/* ===== RESET & VARIABLES ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --red: #cc0000;
      --red-dark: #a80000;
      --red-light: #e02020;
      --gold: #cc0000;
      --white: #ffffff;
      --off-white: #f4f5f7;
      --gray-100: #eef0f3;
      --gray-200: #dde0e6;
      --gray-400: #8b92a0;
      --gray-600: #4a5263;
      --gray-800: #1a1d24;
      --font-main: 'Inter', sans-serif;
      --font-serif: 'DM Serif Display', serif;
      --shadow: 0 2px 16px rgba(26,29,36,0.07);
      --shadow-lg: 0 8px 40px rgba(26,29,36,0.13);
      --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
      --radius: 10px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-main);
      color: var(--gray-800);
      background: var(--white);
      line-height: 1.7;
      overflow-x: hidden;
    }

    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--gray-100); }
    ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

    /* ===== UTILITY ===== */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .section-label {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 10px;
    }
    .section-title {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 600;
      color: var(--gray-800);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .section-subtitle {
      font-size: 1rem;
      color: var(--gray-600);
      max-width: 600px;
      line-height: 1.8;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 28px;
      border-radius: 6px;
      font-family: var(--font-main);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      cursor: pointer;
      border: none;
      transition: var(--transition);
    }
    .btn-primary {
      background: var(--red);
      color: var(--white);
    }
    .btn-primary:hover {
      background: var(--red-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(204,0,0,0.28);
    }
    .btn-outline {
      background: var(--white);
      color: var(--red);
      border: 1px solid var(--red);
    }
    .btn-outline:hover {
      background: #fff5f5;
      border-color: #a80000;
      color: #a80000;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(204,0,0,0.12);
    }
    .btn-gold {
      background: var(--red);
      color: var(--white);
    }
    .btn-gold:hover {
      background: var(--red-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(204,0,0,0.3);
    }

    /* ===== TOP BAR ===== */
    .top-bar {
      background: #1a1d24;
      color: rgba(255,255,255,0.7);
      font-size: 0.75rem;
      padding: 8px 0;
      letter-spacing: 0.02em;
    }
    .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .top-bar a { color: inherit; transition: color 0.2s; }
    .top-bar a:hover { color: var(--white); }
    .top-bar-socials { display: flex; gap: 10px; align-items: center; }
    .top-bar-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 0.82rem;
      color: #fff !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      text-decoration: none;
    }
    .top-bar-socials a:hover { transform: scale(1.2); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
    .top-bar-socials a[title="Facebook"]   { background: #1877f2; }
    .top-bar-socials a[title="Instagram"]  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
    .top-bar-socials a[title="YouTube"]    { background: #ff0000; }
    .top-bar-socials a[title="Twitter/X"]  { background: #000000; border: 1px solid #333; }

    /* ===== NAVBAR ===== */
    nav {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1000;
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      box-shadow: none;
      transition: var(--transition);
    }
    nav.scrolled {
      box-shadow: 0 2px 16px rgba(26,29,36,0.09);
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(10px);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      max-height: 70px;
      overflow: hidden;
    }
    .nav-logo-img {
      height: 64px !important;
      width: auto !important;
      max-width: 240px !important;
      min-width: 0 !important;
      object-fit: contain;
      display: block !important;
      transition: opacity 0.2s ease;
      flex-shrink: 0;
    }
    .nav-logo:hover .nav-logo-img { opacity: 0.85; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }
    .nav-links a {
      display: block;
      padding: 8px 13px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--gray-600);
      border-radius: 8px;
      transition: var(--transition);
      letter-spacing: 0.01em;
    }
    .nav-links a:hover, .nav-links a.active {
      color: var(--red);
      background: rgba(204,0,0,0.06);
    }
    .nav-cta {
      background: var(--red) !important;
      color: var(--white) !important;
      border-radius: 6px !important;
      padding: 8px 18px !important;
    }
    .nav-cta:hover {
      background: var(--red-dark) !important;
    }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 6px;
      background: none;
      border: none;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--gray-800);
      border-radius: 2px;
      transition: var(--transition);
    }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .hero-video-wrap {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
    }
    .hero-video-wrap iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 177.78vh;
      min-width: 100%;
      min-height: 100%;
      height: 56.25vw;
      transform: translate(-50%, -50%);
      pointer-events: none;
      border: 0;
    }
    .hero-fallback {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(135deg,#1a1d24 0%,#2c313d 50%,#3a4050 100%);
      background-size: cover;
      background-position: center center;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(10,11,16,0.82) 0%, rgba(15,17,23,0.72) 60%, rgba(20,22,30,0.60) 100%);
      z-index: 2;
    }
    /* Fallback texture overlay */
    .hero-texture {
      position: absolute;
      inset: 0;
      z-index: 3;
      background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 4;
      color: var(--white);
      width: 100%;
      max-width: 100%;
      padding: 0 48px;
      box-sizing: border-box;
      animation: heroIn 1.1s ease forwards;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    @keyframes heroIn {
      from { opacity: 0; transform: translateY(36px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      padding: 7px 16px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 24px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-tag i { color: var(--red); }
    .hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.4rem, 5.5vw, 4.2rem);
      font-weight: 600;
      line-height: 1.1;
      margin-bottom: 18px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }
    .hero h1 em {
      font-style: normal;
      color: var(--gold);
    }
    .hero-motto {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1.15rem;
      color: rgba(255,255,255,0.88);
      margin-bottom: 18px;
      letter-spacing: 0.02em;
    }
    .hero p {
      font-size: 1rem;
      color: rgba(255,255,255,0.78);
      max-width: 520px;
      margin-bottom: 36px;
      line-height: 1.8;
    }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
    .hero-scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      color: rgba(255,255,255,0.7);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }
    .hero-scroll i { font-size: 1.1rem; }

    /* ===== STATS BAR ===== */
    .stats-bar {
      background: #1a1d24;
      color: var(--white);
      padding: 28px 0;
      border-bottom: 3px solid var(--red);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .stat-item {
      text-align: center;
      padding: 12px 20px;
      border-right: 1px solid rgba(255,255,255,0.2);
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-size: 2.2rem;
      font-weight: 900;
      font-family: var(--font-serif);
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.88;
    }

    /* ===== SECTION LAYOUT ===== */
    section { padding: 90px 0; }
    .section-head { margin-bottom: 52px; }
    .section-head.centered { text-align: center; }
    .section-head.centered .section-subtitle { margin: 0 auto; }

    /* ===== QUIENES SOMOS ===== */
    #quienes-somos { background: var(--off-white); }
    .identity-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .identity-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 36px 28px;
      box-shadow: var(--shadow);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
      cursor: default;
      display: flex;
      flex-direction: column;
    }
    .identity-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: var(--transition);
    }
    .identity-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .identity-card:hover::before { transform: scaleX(1); }
    .identity-icon {
      width: 52px;
      height: 52px;
      background: var(--gray-100);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--red);
      font-size: 1.3rem;
      transition: var(--transition);
    }
    .identity-card:hover .identity-icon {
      background: var(--red);
      color: var(--white);
    }
    .identity-card h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--gray-800);
      margin-bottom: 10px;
    }
    .identity-card p {
      font-size: 0.88rem;
      color: var(--gray-600);
      line-height: 1.75;
      flex: 1;
    }
    .identity-card .btn {
      margin-top: 18px;
      align-self: flex-start;
    }

    /* ===== MISION ===== */
    #mision { background: var(--white); }
    .mission-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 60px;
    }
    .mission-intro-img {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      height: 380px;
      background: linear-gradient(135deg, #8b0000, #cc3333);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mission-intro-img-placeholder {
      color: rgba(255,255,255,0.3);
      font-size: 5rem;
    }
    .mission-zones {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
    .zone-card {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      cursor: default;
    }
    .zone-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .zone-header {
      padding: 28px 24px 20px;
      background: var(--red);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    .zone-header::after {
      content: attr(data-icon);
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 3rem;
      opacity: 0.15;
    }
    .zone-header h3 { font-size: 1rem; font-weight: 700; position: relative; }
    .zone-header i { font-size: 1.4rem; margin-bottom: 10px; display: block; }
    .zone-body { background: var(--white); padding: 20px 24px; }
    .zone-body p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.75; }
    .zone-card:nth-child(2) .zone-header { background: #8b1a1a; }
    .zone-card:nth-child(3) .zone-header { background: #3a7d44; }
    .zone-card:nth-child(4) .zone-header { background: #1a5fa8; }
    .zone-card:nth-child(5) .zone-header { background: #6b4c11; }

    /* ===== JUSTICIA Y PAZ ===== */
    #justicia-paz {
      background: linear-gradient(135deg, #1a1d24 0%, #2c313d 100%);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    #justicia-paz::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(204,0,0,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    #justicia-paz .section-label { color: var(--gold); }
    #justicia-paz .section-title { color: var(--white); }
    #justicia-paz .section-subtitle { color: rgba(255,255,255,0.7); }
    .jp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }
    .jp-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .jp-pillar {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: var(--radius);
      padding: 24px 20px;
      transition: var(--transition);
    }
    .jp-pillar:hover {
      background: rgba(204,0,0,0.1);
      border-color: rgba(204,0,0,0.3);
      transform: translateY(-3px);
    }
    .jp-pillar i { color: var(--red); font-size: 1.6rem; margin-bottom: 12px; display: block; }
    .jp-pillar h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
    .jp-pillar p { font-size: 0.8rem; color: rgba(255,255,255,0.65); line-height: 1.6; }

    /* ===== VOCACIONAL ===== */
    #vocacional { background: var(--off-white); }
    .voc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .voc-quote {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1.4rem;
      color: var(--gray-800);
      border-left: 4px solid var(--red);
      padding-left: 24px;
      margin-bottom: 28px;
      line-height: 1.6;
    }
    .voc-steps { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
    .voc-step {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .voc-step-num {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--red);
      color: var(--white);
      font-size: 0.8rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .voc-step h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
    .voc-step p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.6; }
    .voc-img {
      border-radius: 20px;
      background: linear-gradient(160deg, #2c313d 0%, #1a1d24 100%);
      height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--gray-200);
    }
    .voc-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
    }
    .voc-img i { font-size: 5rem; color: rgba(255,255,255,0.25); position: relative; }

    /* ===== REVISTAS ===== */
    #revistas { background: var(--white); }
    .revistas-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .revista-card {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
    }
    .revista-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .revista-cover {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .revista-cover.msf { background: linear-gradient(135deg, #cc0000, #8b0000); }
    .revista-cover.aguiluchos { background: linear-gradient(135deg, #1a6b3a, #0d3d22); }
    .revista-cover-label {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: white;
    }
    .revista-cover-label i { font-size: 2.8rem; opacity: 0.7; }
    .revista-cover-label h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.05em; }
    .revista-cover-label span { font-size: 0.75rem; opacity: 0.8; letter-spacing: 0.1em; text-transform: uppercase; }
    .revista-body { padding: 28px 28px 32px; flex: 1; background: var(--white); }
    .revista-body p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 20px; }

    /* ===== NOTICIAS ===== */
    #noticias { background: var(--off-white); }
    .news-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }
    .news-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
    }
    .news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .news-img {
      height: 180px;
      background: linear-gradient(135deg, #cc0000, #8b0000);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .news-img i { font-size: 2.5rem; color: rgba(255,255,255,0.3); }
    .news-img:nth-child(1) { background: linear-gradient(135deg, #1a5fa8, #0d2d52); }
    .news-category {
      position: absolute;
      bottom: 12px; left: 14px;
      background: var(--red);
      color: var(--white);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 4px;
    }
    .news-body { padding: 22px 24px 26px; }
    .news-date {
      font-size: 0.74rem;
      color: var(--gray-400);
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 10px;
    }
    .news-body h3 {
      font-size: 0.97rem;
      font-weight: 700;
      color: var(--gray-800);
      line-height: 1.4;
      margin-bottom: 10px;
    }
    .news-body p { font-size: 0.83rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
    .news-link {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.2s;
    }
    .news-link:hover { gap: 10px; }

    /* ===== DONACIONES ===== */
    #donaciones {
      background: linear-gradient(135deg, #1a1d24 0%, #2c313d 100%);
      color: var(--white);
      text-align: center;
      position: relative;
      overflow: hidden;
      border-top: 3px solid var(--red);
    }
    #donaciones::before {
      content: '';
      position: absolute;
      top: -120px; left: -120px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: rgba(204,0,0,0.06);
      pointer-events: none;
    }
    #donaciones::after {
      content: '';
      position: absolute;
      bottom: -100px; right: -100px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: rgba(204,0,0,0.04);
      pointer-events: none;
    }
    #donaciones .section-label { color: var(--gold); }
    #donaciones .section-title { color: var(--white); }
    .donation-box {
      position: relative;
      z-index: 1;
      max-width: 720px;
      margin: 0 auto;
    }
    .donation-box p {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.88);
      margin-bottom: 36px;
      line-height: 1.8;
      font-family: var(--font-serif);
      font-style: italic;
    }
    .donation-options {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }
    .donation-amount {
      padding: 12px 28px;
      border-radius: 6px;
      border: 1.5px solid rgba(255,255,255,0.25);
      color: var(--white);
      font-weight: 600;
      font-size: 0.88rem;
      cursor: pointer;
      background: transparent;
      font-family: var(--font-main);
      transition: var(--transition);
      letter-spacing: 0.02em;
    }
    .donation-amount:hover, .donation-amount.active {
      background: var(--red);
      border-color: var(--red);
    }
    .donation-trust {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .donation-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      color: rgba(255,255,255,0.75);
    }
    .donation-trust-item i { color: var(--red); }

    /* ===== CONTACTO ===== */
    #contacto { background: var(--white); }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 60px;
      align-items: start;
    }
    .contact-info h3 {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 24px;
      color: var(--gray-800);
    }
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 22px;
    }
    .contact-item-icon {
      width: 44px;
      height: 44px;
      background: rgba(204,0,0,0.08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 1rem;
      flex-shrink: 0;
    }
    .contact-item-text h4 { font-size: 0.82rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
    .contact-item-text p { font-size: 0.92rem; color: var(--gray-800); line-height: 1.5; }
    .contact-form { display: flex; flex-direction: column; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group label { font-size: 0.78rem; font-weight: 700; color: var(--gray-600); letter-spacing: 0.04em; text-transform: uppercase; }
    .form-group input,
    .form-group textarea,
    .form-group select {
      padding: 12px 16px;
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      font-family: var(--font-main);
      font-size: 0.9rem;
      color: var(--gray-800);
      background: var(--white);
      transition: var(--transition);
      outline: none;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(204,0,0,0.1);
    }
    .form-group textarea { resize: vertical; min-height: 120px; }

    /* ===== FOOTER ===== */
    footer {
      background: #13151a;
      color: rgba(255,255,255,0.65);
      padding: 72px 0 0;
      border-top: 1px solid #2c313d;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 52px;
    }
    .footer-brand .nav-logo-icon { margin-bottom: 16px; }
    .footer-brand .footer-logo-img {
      height: 60px;
      width: auto;
      max-width: 220px;
      object-fit: contain;
      display: block;
      margin-bottom: 20px;
      opacity: 1;
    }
    .footer-brand a { display: inline-block; transition: opacity 0.2s; }
    .footer-brand a:hover { opacity: 0.85; }
    .footer-brand p {
      font-size: 0.85rem;
      line-height: 1.8;
      margin-bottom: 24px;
      color: rgba(255,255,255,0.6);
    }
    .footer-socials { display: flex; gap: 10px; }
    .footer-social {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.7);
      font-size: 0.9rem;
      transition: var(--transition);
    }
    .footer-social:hover { background: var(--red); color: var(--white); }
    .footer-col h4 {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 18px;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.6);
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-links a::before {
      content: '';
      width: 14px;
      height: 1.5px;
      background: var(--red);
      display: block;
      transition: width 0.2s;
    }
    .footer-links a:hover { color: var(--white); }
    .footer-links a:hover::before { width: 20px; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.4);
    }
    .footer-bottom a { color: var(--red); transition: color 0.2s; }
    .footer-bottom a:hover { color: var(--red-light); }

    /* ===== MOBILE MENU ===== */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 71px; left: 0; right: 0;
      bottom: 0;
      background: var(--white);
      z-index: 999;
      padding: 20px 24px 40px;
      box-shadow: var(--shadow-lg);
      border-top: 2px solid #cc0000;
      transform: translateY(-10px);
      opacity: 0;
      pointer-events: none;
      transition: var(--transition);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .mobile-menu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: all;
      display: block;
    }
    .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
    .mobile-menu a {
      display: block;
      padding: 12px 16px;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--gray-600);
      border-radius: 8px;
      transition: var(--transition);
    }
    .mobile-menu a:hover { color: var(--red); background: rgba(204,0,0,0.05); }

    /* ===== BACK TO TOP ===== */
    .back-to-top {
      position: fixed;
      bottom: 28px;
      right: 28px;
      width: 46px;
      height: 46px;
      background: var(--red);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      box-shadow: 0 4px 16px rgba(204,0,0,0.4);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: var(--transition);
      z-index: 999;
      border: none;
    }
    .back-to-top.visible { opacity: 1; pointer-events: all; }
    .back-to-top:hover { background: var(--red-dark); transform: translateY(-3px); }

    /* ===== DROPDOWN SUBMENÚS CON IMAGEN ===== */
    .nav-links li,
    .nav-links .menu-item { position: relative; }

    /* Mostrar al hover — sin retardo al abrir */
    .nav-links .menu-item-has-children:hover > .sub-menu,
    .nav-links .has-dropdown:hover > .dropdown {
      opacity: 1 !important;
      pointer-events: all !important;
      transform: translateY(0) !important;
      visibility: visible !important;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s !important;
    }

    /* Contenedor del dropdown — layout en columna (orden DOM respetado) */
    .nav-links .sub-menu,
    .nav-links .dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: #ffffff;
      border-top: 3px solid var(--red);
      border-radius: 0 0 12px 12px;
      box-shadow: 0 12px 48px rgba(26,29,36,0.18);
      padding: 8px;
      list-style: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(12px);
      /* Retardo al ocultar: 300ms antes de visibility:hidden */
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.3s;
      z-index: 9999;
      display: flex !important;
      flex-direction: column !important;
      gap: 4px;
      min-width: 240px;
      max-width: 320px;
    }

    /* Cada ítem del submenú */
    .nav-links .sub-menu li,
    .nav-links .dropdown li {
      width: 100%;
      list-style: none !important;
    }

    /* Enlace del submenú — fila horizontal con imagen+texto */
    .nav-links .sub-menu a,
    .nav-links .dropdown a {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 0 !important;
      padding: 0 !important;
      border: none !important;
      border-radius: 8px !important;
      overflow: hidden;
      background: var(--gray-100) !important;
      color: var(--gray-800) !important;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
      white-space: normal !important;
      text-align: left;
    }
    .nav-links .sub-menu a:hover,
    .nav-links .dropdown a:hover {
      transform: translateX(3px) !important;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13) !important;
      background: var(--gray-100) !important;
      border-left: none !important;
      padding-left: 0 !important;
    }

    /* Imagen de fondo cuadrada a la izquierda */
    .nav-links .sub-menu a .smenu-img,
    .nav-links .dropdown a .smenu-img {
      display: none;
    }
    .nav-links .sub-menu a .smenu-img::after,
    .nav-links .dropdown a .smenu-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent 40%, rgba(204,0,0,0.08));
    }

    /* Label del ítem — a la derecha de la imagen */
    .nav-links .sub-menu a .smenu-label,
    .nav-links .dropdown a .smenu-label {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      font-size: 0.78rem !important;
      font-weight: 600 !important;
      color: var(--gray-800) !important;
      line-height: 1.3;
      flex: 1;
    }
    .nav-links .sub-menu a .smenu-label i,
    .nav-links .dropdown a .smenu-label i {
      color: var(--red);
      font-size: 0.72rem;
      flex-shrink: 0;
    }
    .nav-links .sub-menu a:hover .smenu-label,
    .nav-links .dropdown a:hover .smenu-label {
      color: var(--red) !important;
    }

    /* Flecha en ítems con submenú — clases WordPress y personalizadas */
    .nav-links .menu-item-has-children > a::after,
    .nav-links .has-dropdown > a::after {
      content: '\f078';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 0.58rem;
      margin-left: 5px;
      opacity: 0.55;
      display: inline-block;
      transition: transform 0.22s ease;
    }

    .nav-links .menu-item-has-children:hover > a::after,
    .nav-links .has-dropdown:hover > a::after {
      transform: rotate(180deg);
    }

    /* Mobile submenu */
    .mobile-submenu {
      list-style: none;
      padding: 0 0 4px 16px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease;
    }
    .mobile-submenu.open,
    .mobile-has-sub.open > .mobile-submenu {
      display: block;
      max-height: 600px;
      opacity: 1;
    }
    .mobile-submenu a {
      display: flex !important;
      align-items: center;
      gap: 8px;
      padding: 9px 14px !important;
      font-size: 0.82rem !important;
      color: var(--gray-600) !important;
      border-left: 2px solid var(--gray-200);
    }
    .mobile-submenu a:hover { color: var(--red) !important; border-left-color: var(--red); }
    .mobile-submenu a i { color: var(--red); font-size: 0.7rem; }
    .mobile-has-sub > a {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mobile-has-sub > a .arrow {
      font-size: 0.65rem;
      opacity: 0.6;
      transition: transform 0.2s;
    }
    .mobile-has-sub.open > a .arrow { transform: rotate(180deg); }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-item:nth-child(2) { border-right: none; }
      .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.2); }
    }
    @media (max-width: 860px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .mission-intro-grid { grid-template-columns: 1fr; }
      .mission-intro-img { height: 250px; }
      .jp-grid { grid-template-columns: 1fr; }
      .voc-grid { grid-template-columns: 1fr; }
      .voc-img { height: 260px; order: -1; }
      .revistas-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      /* Móvil: ocultar video YT, la imagen de respaldo se aplica via JS */
      .hero-video-wrap { display: none; }
      .hero { height: 100svh; min-height: 520px; }
      .hero-content { max-width: 100%; padding: 0 20px; }
      .nav-logo-img { height: 42px !important; max-width: 160px !important; }
    }
    @media (max-width: 600px) {
      section { padding: 64px 0; }
      .hero { height: 100svh; min-height: 480px; }
      .hero h1 { font-size: 2.2rem; }
      .hero-lema { display: none; }
      .hero-btns { flex-direction: column; gap: 10px; align-items: center; }
      .hero-btns .btn { width: 90%; max-width: 340px; justify-content: center; }
      .hero-tag { font-size: 0.7rem; padding: 6px 10px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .jp-pillars { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .top-bar .container { flex-direction: column; }
    }

/* ===== PÁGINAS INTERNAS ===== */
.page-hero { padding: 100px 0 60px; color: white; }
.page-hero .section-title { color: white; }

/* Estilos para contenido de páginas internas */
.container article p,
.container .page-content p {
  margin-bottom: 18px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-600);
}
.container article ul,
.container article ol {
  margin: 16px 0 16px 24px;
  color: var(--gray-600);
  line-height: 1.8;
}
.container article h2 { font-size: 1.4rem; font-weight: 700; margin: 32px 0 12px; color: var(--gray-800); }
.container article h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 10px; color: var(--gray-800); }
.container article blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  border-left: 4px solid var(--red);
  padding-left: 24px;
  margin: 28px 0;
  line-height: 1.6;
  color: var(--gray-800);
}

/* Responsive páginas internas */
@media (max-width: 700px) {
  .page-hero { padding: 80px 0 40px; }
}

/* ===== FIXES WORDPRESS MENU ===== */
/* Quitar bullets/cuadrados del menú de WordPress */
.nav-links,
.nav-links li,
.nav-links ul,
.nav-links .sub-menu {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.nav-links li::before,
.nav-links li::marker {
  display: none !important;
  content: none !important;
}

/* Fix sticky navbar full width en WordPress */
#navbar,
nav#navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Eliminar padding/margin del body de WordPress que desplaza el navbar */
.admin-bar #navbar,
.admin-bar nav#navbar {
  top: 32px !important;
}
@media (max-width: 782px) {
  .admin-bar #navbar,
  .admin-bar nav#navbar { top: 46px !important; }
}

/* Separador elegante entre ítems del menú en lugar del cuadrado */
.nav-links > li + li > a::before {
  content: none !important;
}

/* Asegurar que el menú sticky ocupa todo el ancho */
nav { max-width: 100% !important; }

/* ===== FIX ADMIN BAR + STICKY NAVBAR ===== */
/* Cuando WP muestra la barra de admin, el sticky nav baja */
.admin-bar nav#navbar { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar nav#navbar { top: 46px !important; }
}

/* Sin admin bar: nav siempre pegado al top */
nav#navbar {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  left: 0 !important;
  z-index: 9999 !important;
}

/* ===== FIX MENÚ WORDPRESS — quitar bullets y cuadrados ===== */
.nav-links, .nav-links li, .nav-links ul,
.nav-links .sub-menu, .nav-links .children {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}
.nav-links li::before,
.nav-links li::after,
.nav-links li::marker { content: none !important; display: none !important; }

/* ===== FIX GRID RESPONSIVE ===== */
@media (max-width: 700px) {
  .identity-grid { grid-template-columns: repeat(2, 1fr) !important; }
  @media (max-width: 480px) {
    .identity-grid { grid-template-columns: 1fr !important; }
  }
  .revistas-grid { grid-template-columns: 1fr !important; }
  .voc-grid      { grid-template-columns: 1fr !important; }
  .jp-grid       { grid-template-columns: 1fr !important; }
  .contact-grid  { grid-template-columns: 1fr !important; }
  .mission-zones { grid-template-columns: 1fr !important; }
}

/* ===== FIX FOOTER HEART ICON ===== */
.footer-bottom i.fa-heart { color: var(--red) !important; font-size: 0.85rem; }

/* ===== FIX PÁGINAS INTERNAS — grid 2 columnas responsive ===== */
@media (max-width: 860px) {
  .page-two-col { grid-template-columns: 1fr !important; }
  .page-two-col > div:first-child { order: 2; }
  .page-two-col > div:last-child  { order: 1; }
}

/* ===== CORRECCIONES FINALES ===== */

/* Evitar que la barra de admin de WordPress tape el navbar */
.admin-bar nav#navbar { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar nav#navbar { top: 46px !important; }
}

/* Ocultar cualquier segundo menú que WordPress pueda renderizar fuera del navbar */
body > ul.nav-links,
body > .menu,
.site-header ul.nav-links + ul.nav-links {
  display: none !important;
}

/* Asegurar que el grid de 2 columnas sea responsive en páginas internas */
@media (max-width: 768px) {
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* Asegurar imágenes responsivas en páginas internas */
.container img { max-width: 100%; height: auto; }

/* Fix ícono corazón en footer */
.footer-bottom .fa-heart { color: var(--red) !important; }

/* ===== ELIMINAR ESPACIO DEBAJO DEL HERO ===== */
.hero + * { margin-top: 0 !important; }
.stats-bar { margin-top: 0 !important; }
section#inicio + div.stats-bar { margin-top: 0 !important; }

/* Asegurar que el player de YouTube llene correctamente el hero-video-wrap */
#ytBgPlayer,
#ytBgPlayer iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 177.78vh !important;
  min-width: 100% !important;
  min-height: 100% !important;
  height: 56.25vw !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* ===== IMÁGENES DE FONDO EN SUBMENÚS ===== */
.dropdown li a {
  position: relative;
  overflow: hidden;
}
.dropdown li a .submenu-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  border-radius: 0;
}
.dropdown li a:hover .submenu-bg { opacity: 0.12; }

/* ===== GALERÍA DE REVISTAS ===== */
.revista-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.revista-gallery-item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
}
.revista-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.revista-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.revista-gallery-item:hover img { transform: scale(1.05); }
.revista-gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
}
.revista-gallery-item:hover .overlay { opacity: 1; }

/* Placeholder para fotos de Facebook pendientes */
.fb-photo-placeholder {
  background: var(--gray-100);
  border-radius: 10px;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-400);
  font-size: 0.78rem;
  text-align: center;
  padding: 20px;
  border: 2px dashed var(--gray-200);
}
.fb-photo-placeholder i { font-size: 2rem; }

@media (max-width: 600px) {
  .revista-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ===== BOTONES HERO MODERNOS — GLASSMORPHISM ===== */
.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 32px 15px 18px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.01em;
}
.btn-hero-primary::after,
.btn-hero-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.35s;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
}
.btn-hero-primary:hover::after,
.btn-hero-secondary:hover::after { opacity: 1; }

/* Botón primario: rojo con gradiente y glow */
.btn-hero-primary {
  background: linear-gradient(135deg, #e00000 0%, #cc0000 50%, #a80000 100%);
  box-shadow:
    0 4px 20px rgba(204,0,0,0.5),
    0 0 0 0 rgba(204,0,0,0),
    inset 0 1px 0 rgba(255,255,255,0.2);
  animation: pulse-red 2.8s ease-in-out infinite;
  border: 1.5px solid rgba(255,100,100,0.3);
}
.btn-hero-primary:hover {
  background: linear-gradient(135deg, #ff1a1a 0%, #e00000 50%, #cc0000 100%);
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 12px 36px rgba(204,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: none;
}
@keyframes pulse-red {
  0%,100% { box-shadow: 0 4px 20px rgba(204,0,0,0.5), 0 0 0 0 rgba(204,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 4px 20px rgba(204,0,0,0.5), 0 0 0 14px rgba(204,0,0,0), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* Botón secundario: glass blanco */
.btn-hero-secondary {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.55);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.8);
}
.btn-hero-secondary .btn-icon {
  background: rgba(204,0,0,0.25);
  color: #ff8080;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-hero-secondary .btn-text { color: white; }
.btn-hero-secondary .btn-label { color: rgba(255,255,255,0.75); opacity: 1; }

.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.btn-hero-primary:hover .btn-icon,
.btn-hero-secondary:hover .btn-icon {
  transform: scale(1.15) rotate(-5deg);
}
.btn-hero-primary .btn-icon {
  background: rgba(255,255,255,0.2);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-hero-secondary .btn-icon {
  background: rgba(255,255,255,0.15);
  color: white;
}
.btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: white;
  line-height: 1.2;
}
.btn-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.btn-text strong {
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Ocultar hero-scroll definitivamente */
.hero-scroll { display: none !important; }

/* ===== PÁGINA APOYAR — NOMBRE: "IMPULSA LA MISIÓN" ===== */
.apoyar-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
.donation-amount {
  padding: 12px 28px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-main);
  transition: var(--transition);
  letter-spacing: 0.02em;
}
.donation-amount:hover,
.donation-amount.active {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(204,0,0,0.4);
}

/* ══════════════════════════════════════════
   HERO TEXT — VERSIÓN IMPACTANTE
══════════════════════════════════════════ */

/* Etiqueta con punto parpadeante */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.9);
  animation: fadeSlideDown 0.8s ease both;
  margin-left: auto;
  margin-right: auto;
}
.hero-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cc0000;
  box-shadow: 0 0 0 0 rgba(204,0,0,0.6);
  animation: ping 1.5s ease infinite;
  flex-shrink: 0;
}
@keyframes ping {
  0%  { box-shadow: 0 0 0 0 rgba(204,0,0,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(204,0,0,0); }
  100%{ box-shadow: 0 0 0 0 rgba(204,0,0,0); }
}

/* Título en tres líneas con animaciones escalonadas */
.hero-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  line-height: 1;
  width: 100%;
  gap: 4px;
  text-align: center;
  align-items: center;
  position: relative;
}
.hero-line-1,
.hero-line-2,
.hero-line-3 {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
  width: 100%;
}
.hero-line-1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: white;
  letter-spacing: -0.01em;
  animation: fadeSlideUp 0.8s ease 0.1s both;
  text-align: center;
}
.hero-line-2 {
  font-size: clamp(3.2rem, 7.5vw, 6.4rem);
  line-height: 0.95;
  animation: fadeSlideUp 0.8s ease 0.25s both;
  text-align: center;
}
.hero-line-2 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, #cc0000 0%, #ff4444 50%, #cc0000 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
  display: inline-block;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.hero-line-3 {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  color: rgba(255,255,255,0.92);
  animation: fadeSlideUp 0.8s ease 0.4s both;
  text-align: center;
}

/* Animaciones de entrada */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lema con líneas decorativas — MÁS GRANDE */
.hero-lema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
  animation: fadeSlideUp 0.8s ease 0.55s both;
}
.hero-lema-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(204,0,0,0.8), transparent);
  max-width: 100px;
}
.hero-motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  color: white;
  letter-spacing: 0.01em;
  text-shadow:
    0 3px 20px rgba(0,0,0,0.6),
    0 0 60px rgba(204,0,0,0.5),
    0 0 120px rgba(204,0,0,0.2);
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  position: relative;
}

/* Descripción en dos líneas visualmente separadas */
.hero-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 40px auto;
  animation: fadeSlideUp 0.8s ease 0.7s both;
}
.hero-desc-line1,
.hero-desc-line2 {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  border-left: 4px solid #cc0000;
  border-radius: 0 8px 8px 0;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: 0.01em;
  line-height: 1.4;
  transition: background 0.3s;
}
.hero-desc-line1:hover,
.hero-desc-line2:hover {
  background: rgba(204,0,0,0.25);
}
.hero-desc-line2 {
  border-left-color: rgba(204,0,0,0.6);
  background: rgba(0,0,0,0.25);
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Animación de entrada de los botones */
.hero-btns {
  animation: fadeSlideUp 0.8s ease 0.85s both;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 768px) {
  .hero-motto { font-size: clamp(1.6rem, 6vw, 2.4rem); white-space: normal; text-align:center; }
  .hero-lema  { flex-direction: column; gap: 6px; }
  .hero-lema-line { max-width: 60px; }
}
@media (max-width: 600px) {
  .hero-line-2 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .hero-line-1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .hero-line-3 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .hero-motto  { font-size: clamp(1.3rem, 7vw, 2rem); white-space: normal; text-align:center; }
  .hero-lema   { gap: 8px; }
  .hero-desc-line1, .hero-desc-line2 { font-size: 0.88rem; padding: 11px 14px; }
}

/* ===== VIDEO HERO — PANTALLA COMPLETA SIN BARRAS NEGRAS ===== */
.hero-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* El div ytBgPlayer y el iframe que genera la API */
#ytBgPlayer,
#ytBgPlayer iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Ancho y alto calculados para cubrir siempre toda la pantalla
     manteniendo la relación 16:9 del video */
  width: max(100%, 177.78vh) !important;
  height: max(56.25vw, 100%) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  border: 0 !important;
  object-fit: cover !important;
}

/* ===== SUBMENÚS — OVERRIDES FINALES ===== */
/* Asegurar flex column en todos los casos */
.nav-links .sub-menu,
.nav-links .dropdown {
  display: flex !important;
  flex-direction: column !important;
  min-width: 260px !important;
  max-width: 320px !important;
}
/* Items en fila horizontal: imagen izq + texto der */
.nav-links .sub-menu a,
.nav-links .dropdown a {
  flex-direction: row !important;
  padding: 0 !important;
  min-height: 52px;
}

/* ===== TODOS LOS BOTONES TRANSPARENTES → FONDO BLANCO + BORDE ROJO FINO ===== */
.btn-outline,
a.btn-outline,
button.btn-outline {
  background: #ffffff !important;
  color: #cc0000 !important;
  border: 1px solid #cc0000 !important;
}
.btn-outline:hover,
a.btn-outline:hover {
  background: #fff5f5 !important;
  color: #a80000 !important;
  border-color: #a80000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(204,0,0,0.12);
}
/* Botón secundario del hero — glass */
.btn-hero-secondary,
a.btn-hero-secondary {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.btn-hero-secondary .btn-text,
.btn-hero-secondary strong { color: white !important; }
.btn-hero-secondary .btn-label { color: rgba(255,255,255,0.75) !important; opacity: 1 !important; }
.btn-hero-secondary .btn-icon { background: rgba(204,0,0,0.25) !important; color: #ff8080 !important; }

/* Botones con estilo inline transparent */
a[style*="background:transparent"],
a[style*="background: transparent"] {
  background: #ffffff !important;
  color: #cc0000 !important;
  border: 1px solid #cc0000 !important;
}

/* ================================================================
   MEJORAS v3 — COMBONIANOS PERÚ
   Integradas desde combonianos-peru-FINAL.html
   ================================================================ */

/* ── PROGRESS BAR ── */
#pgbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;
  background:linear-gradient(90deg,#C0272D,#F5A623);
  box-shadow:0 0 8px rgba(192,39,45,.65);transition:width .1s linear;pointer-events:none}

/* ── FLOATING CTA ── */
.fcta{position:fixed;bottom:28px;left:28px;z-index:900;
  display:flex;align-items:center;gap:8px;
  background:#C0272D;color:#FDFAF5;padding:13px 22px;border-radius:50px;
  font-weight:600;font-size:.86rem;letter-spacing:.02em;
  box-shadow:0 8px 30px rgba(192,39,45,.55);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
  animation:fcta-in .7s cubic-bezier(.4,0,.2,1) 1.3s both}
@keyframes fcta-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fcta:hover{background:#D9363C;transform:translateY(-4px);box-shadow:0 14px 42px rgba(192,39,45,.7)}
.fcta .fping{position:absolute;inset:-5px;border-radius:50px;
  border:2px solid rgba(192,39,45,.45);animation:fping 2s cubic-bezier(0,0,.2,1) infinite;pointer-events:none}
@keyframes fping{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.2);opacity:0}}
@media(max-width:768px){.fcta .ftxt{display:none}.fcta{padding:14px;border-radius:50%;width:52px;height:52px;justify-content:center}}

/* ── VIDEO HERO ENHANCEMENTS ── */
/* Override existing hero-video-wrap to ensure full coverage */
.hero-video-wrap{position:absolute!important;inset:0!important;z-index:1!important;
  overflow:hidden!important;pointer-events:none!important}
#ytBgPlayer,#ytBgPlayer iframe{
  position:absolute!important;top:50%!important;left:50%!important;
  width:max(100%,177.78vh)!important;height:max(56.25vw,100%)!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;border:0!important}

/* Overlay layers for the video hero */
.hero-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(10,4,5,.72) 0%,
      rgba(10,4,5,.50) 38%,
      rgba(10,4,5,.62) 68%,
      rgba(10,4,5,.88) 100%),
    radial-gradient(ellipse 80% 55% at 50% 105%,rgba(192,39,45,.32) 0%,transparent 65%)}
.hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(10,4,5,.55) 100%)}

/* Mute toggle button */
.vid-toggle{position:absolute;bottom:44px;right:36px;z-index:10;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.75);cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;backdrop-filter:blur(8px);line-height:1}
.vid-toggle:hover{background:rgba(192,39,45,.5);color:#fff;border-color:#C0272D}
@media(max-width:768px){.vid-toggle{bottom:28px;right:16px;width:36px;height:36px;font-size:.8rem}}

/* ── GALERÍA FOTOGRÁFICA ── */
.galeria-section{background:#FDFAF5;padding:100px 52px}
.galeria-head{text-align:center;margin-bottom:52px}
.galeria-eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#C0272D;margin-bottom:12px}
.galeria-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3rem);
  font-weight:700;line-height:1.13;margin-bottom:16px;color:#1a1d24}
.galeria-subtitle{font-size:1rem;color:#4a5263;line-height:1.8;max-width:560px;margin:0 auto}
.galeria-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;gap:14px;max-width:1200px;margin:0 auto}
.gal-item{position:relative;border-radius:16px;overflow:hidden;
  background:#F0E9E9;cursor:pointer;aspect-ratio:1/1}
.gal-item.gal-tall{grid-row:span 2;aspect-ratio:auto}
.gal-item.gal-wide{grid-column:span 2;aspect-ratio:2/1}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1),filter .4s;
  filter:saturate(.8) brightness(.92)}
.gal-item:hover img{transform:scale(1.07);filter:saturate(1.1) brightness(1)}
.gal-caption{position:absolute;bottom:0;inset-inline:0;
  padding:28px 16px 14px;
  background:linear-gradient(to top,rgba(10,4,5,.78),transparent);
  color:#FDFAF5;font-size:.78rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.gal-item:hover .gal-caption{opacity:1;transform:translateY(0)}
.gal-item::after{content:'';position:absolute;inset:0;
  background:rgba(192,39,45,0);
  transition:background .35s;pointer-events:none}
.gal-item:hover::after{background:rgba(192,39,45,.1)}
@media(max-width:960px){
  .galeria-grid{grid-template-columns:repeat(2,1fr)}
  .gal-item.gal-tall{grid-row:span 1;aspect-ratio:1/1}
  .gal-item.gal-wide{grid-column:span 2}}
@media(max-width:600px){
  .galeria-section{padding:72px 20px}
  .galeria-grid{gap:10px}
  .gal-item.gal-wide{grid-column:span 2}}

/* ── TESTIMONIO SLIDER UPGRADES ── */
.testimonio-slider-section{background:#F0E9E9;padding:100px 52px}
@media(max-width:768px){.testimonio-slider-section{padding:72px 20px}}
/* Override existing tcard-av to support images */
.tcard-av { width:48px !important; height:48px !important; min-width:48px !important; border-radius:50% !important; overflow:hidden !important; padding:0 !important; flex-shrink:0; }
.tcard-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── SCROLL REVEAL (supplement existing) ── */
.reveal-v3{opacity:0;transform:translateY(32px);
  transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1)}
.reveal-v3.in{opacity:1;transform:translateY(0)}
.reveal-v3.d1{transition-delay:.08s}.reveal-v3.d2{transition-delay:.16s}
.reveal-v3.d3{transition-delay:.24s}.reveal-v3.d4{transition-delay:.32s}


/* ===== CARRUSEL TESTIMONIOS CON IMAGEN GRANDE ===== */
.tcarousel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  max-width: 960px;
  margin: 0 auto;
  background: #1a1d24;
}
.tcarousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.tcarousel-slide {
  min-width: 100%;
  display: flex;
  flex-direction: row;
}
.tcarousel-img {
  position: relative;
  width: 52%;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 420px;
}
.tcarousel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.tcarousel-slide:hover .tcarousel-img img {
  transform: scale(1.05);
}
.tcarousel-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.15), rgba(26,29,36,0.6));
}
.tcarousel-quote-icon {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 2.2rem;
  color: rgba(204,0,0,0.7);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.tcarousel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 44px;
  background: linear-gradient(135deg, #1e2130 0%, #1a1d24 100%);
}
.tcarousel-txt {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.85;
  font-style: italic;
  margin-bottom: 32px;
  position: relative;
}
.tcarousel-txt::before {
  content: '"';
  font-size: 5rem;
  color: rgba(204,0,0,0.25);
  font-family: Georgia, serif;
  position: absolute;
  top: -20px;
  left: -10px;
  line-height: 1;
  pointer-events: none;
}
.tcarousel-author {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
}
.tcarousel-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}
.tcarousel-loc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.tcarousel-loc i {
  color: #cc0000;
  margin-right: 5px;
}

/* Botones de navegación */
.tcarousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tcarousel-btn:hover {
  background: var(--red, #cc0000);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(204,0,0,0.4);
}
.tcarousel-prev { left: 16px; }
.tcarousel-next { right: 16px; }

/* Dots */
.tcarousel-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.tcarousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}
.tcarousel-dot.active {
  background: #cc0000;
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(204,0,0,0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .tcarousel-slide { flex-direction: column; }
  .tcarousel-img { width: 100%; min-height: 260px; }
  .tcarousel-body { padding: 32px 24px; }
  .tcarousel-txt { font-size: 0.95rem; }
  .tcarousel-btn { display: none; }
}


/* ================================================================
   OVERRIDES FINALES — Mayor especificidad, al final del archivo
   Hero centrado + Botones borde rojo + Sin imágenes en submenú
   ================================================================ */

/* 1. HERO — Todo centrado sin excepción */
.hero .hero-title,
.hero-title {
  text-align: center !important;
  align-items: center !important;
}
.hero .hero-line-1,
.hero-line-1 {
  text-align: center !important;
  display: block !important;
}
.hero .hero-line-2,
.hero-line-2 {
  text-align: center !important;
  display: block !important;
}
.hero .hero-line-3,
.hero-line-3 {
  text-align: center !important;
  display: block !important;
}
.hero .hero-tag,
.hero-tag {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-flex !important;
}
.hero .hero-content,
.hero-content,
.container.hero-content {
  text-align: center !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 2. BOTONES BLANCOS — Borde rojo delgado, fondo blanco */
.btn-outline,
a.btn-outline,
button.btn-outline,
.btn.btn-outline {
  background: #ffffff !important;
  color: #cc0000 !important;
  border: 1px solid #cc0000 !important;
  border-radius: 6px !important;
}
.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background: #fff0f0 !important;
  color: #a80000 !important;
  border-color: #a80000 !important;
  box-shadow: 0 4px 14px rgba(204,0,0,0.15) !important;
}

/* 3. SUBMENÚ — Sin imágenes al hacer hover */
.smenu-img,
.nav-links .sub-menu a .smenu-img,
.nav-links .dropdown a .smenu-img,
.nav-links li a .smenu-img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ================================================================
   HERO LENTE — Imagen recortada + texto fuera del clip
   ================================================================ */

/* Wrap: fondo gris, posición relativa para apilar capas */
.page-hero-lens-wrap {
  background: #e2e2e2;
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
}

/* Capa 1: imagen con forma lente (clip-path aquí, solo imagen) */
.page-hero-lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: url(#lensClip);
  -webkit-clip-path: url(#lensClip);
  z-index: 1;
}

/* SVG de borde — superpuesto sobre la imagen clipeada */
.page-hero-lens-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

/* Capa 2: degradado oscuro sobre toda la figura para leer el texto */
.page-hero-lens-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(8, 8, 16, 0.72) 0%,
    rgba(20, 10, 10, 0.48) 45%,
    rgba(180, 0, 0, 0.22) 75%,
    rgba(120, 0, 0, 0.55) 100%
  );
  clip-path: url(#lensClip);
  -webkit-clip-path: url(#lensClip);
}

/* Imagen de fondo dentro del lente */
.page-hero-lens-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Zoom prolongado tipo Ken Burns */
  animation: lensZoom 14s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}

@keyframes lensZoom {
  0%   { transform: scale(1.0)   translate(0%,    0%);   }
  25%  { transform: scale(1.08)  translate(-1.5%, 0.5%); }
  50%  { transform: scale(1.14)  translate(0.5%,  -1%);  }
  75%  { transform: scale(1.08)  translate(1.5%,  0.5%); }
  100% { transform: scale(1.0)   translate(0%,    0%);   }
}


/* Contenido: centrado dentro del área visible de la lente */
.page-hero-lens-content {
  position: absolute;
  /* Queda dentro del área visible de la lente (evita las puntas) */
  top: 0; bottom: 0;
  left: 18%; right: 18%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.page-hero-lens-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8080;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  opacity: 0.95;
}

.page-hero-lens-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  max-width: 100%;
  margin-bottom: 12px;
  text-align: center;
}

.page-hero-lens-subtitle {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  color: rgba(255,255,255,0.88);
  max-width: 100%;
  line-height: 1.75;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  text-align: center;
}

.page-hero-lens-back {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: color 0.2s;
}
.page-hero-lens-back:hover { color: white; }

/* Barra de acento color en la parte inferior */
.page-hero-lens-accent {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: #cc0000;
  z-index: 3;
  border-radius: 2px;
}

/* ── MÓVIL: sin figura geométrica, imagen a pantalla completa ── */
@media (max-width: 768px) {
  .page-hero-lens-wrap {
    height: 340px;
  }
  /* Quitar clip-path en móvil → imagen rectangular normal */
  .page-hero-lens {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 0 !important;
  }
  .page-hero-lens-gradient {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    /* Degradado más fuerte para legibilidad sin la forma */
    background: linear-gradient(
      to right,
      rgba(8,8,16,0.75) 0%,
      rgba(20,10,10,0.50) 50%,
      rgba(100,0,0,0.45) 100%
    ) !important;
  }
  .page-hero-lens-border { display: none !important; }
  .page-hero-lens-content {
    left: 5% !important;
    right: 5% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .page-hero-lens-title {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    text-align: left !important;
  }
  .page-hero-lens-subtitle {
    font-size: 0.88rem !important;
    text-align: left !important;
  }
  .page-hero-lens-label {
    justify-content: flex-start !important;
  }
}
@media (max-width: 480px) {
  .page-hero-lens-wrap { height: 280px; }
  .page-hero-lens-title { font-size: clamp(1.2rem, 6vw, 1.7rem) !important; }
}

/* ── LOGO NAVBAR SVG — tamaño forzado ── */
nav#navbar .nav-logo-img,
#navbar .nav-logo-img,
.nav-logo .nav-logo-img,
img.nav-logo-img {
  height: 64px !important;
  width: auto !important;
  max-width: 240px !important;
  max-height: 64px !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 860px) {
  nav#navbar .nav-logo-img,
  img.nav-logo-img {
    height: 42px !important;
    max-width: 160px !important;
    max-height: 42px !important;
  }
}