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

    :root {
      --dorado:       #c9972b;
      --dorado-claro: #e8c96b;
      --crema:        #f5ede0;
      --negro:        #000000;
      --azul-oscuro:  #0a0f3c;
      --header-h:     140px;
      --ease:         cubic-bezier(.4,0,.2,1);
    }

    /* ══════════════════════════════════════════════════════
       BODY & FONDO
    ══════════════════════════════════════════════════════ */
    html, body {
      min-height: 100vh;
      font-family: 'Cinzel', serif;
      color: #fff;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      background:
        linear-gradient(to top,
          rgba(10,15,60,1)    0%,
          rgba(10,15,60,0.65) 25%,
          rgba(10,15,60,0.25) 45%,
          rgba(10,15,60,0)    70%
        ),
        url("../imagenes/Arco_Iglesia_BenitzReel.png"),
        radial-gradient(circle at center,
          #283278d9 40%,
          rgba(10,15,60,1) 100%
        );

      background-repeat:   no-repeat, no-repeat, no-repeat;
      background-position: bottom center, bottom center, center;
      background-size:     auto 120px, auto 280px, contain;
    }

    /* ══════════════════════════════════════════════════════
       HEADER
    ══════════════════════════════════════════════════════ */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      height: var(--header-h);
      background: transparent;
      transition:
        background .5s var(--ease),
        box-shadow  .5s var(--ease),
        height      .4s var(--ease);
    }

    .site-header.scrolled {
      background: rgba(10, 11, 168, 0.92);
      backdrop-filter: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: blur(14px) saturate(1.4);
      box-shadow: 0 1px 0 rgba(201,151,43,.18),
                  0 8px 32px rgba(0,0,0,.45);
      height: 70px;
    }

    /* línea decorativa inferior */
    .site-header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 10%; right: 10%;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(0,17,255,0.92) 30%,
        #c9972b 70%,
        transparent
      );
      transition: opacity .4s;
    }
    .site-header.scrolled::after { opacity: .6; }

    /* ── INNER GRID ────────────────────────────────────── */
    .header-inner {
      max-width: 1280px;
      margin: 0 auto;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 2.5rem;
      gap: 1rem;
    }

    /* ── MENÚS ─────────────────────────────────────────── */
    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 2.8rem;
      list-style: none;
    }

    .nav-right { justify-content: flex-end; }

    .nav-left a,
    .nav-right a {
      position: relative;
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(245, 237, 224, 0.85);
      text-decoration: none;
      padding-bottom: 3px;
      transition: color .3s var(--ease);
    }

    .nav-left a::after,
    .nav-right a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1px;
      background: var(--dorado-claro);
      transition: width .35s var(--ease);
    }

    .nav-left a:hover,
    .nav-right a:hover { color: var(--dorado-claro); }

    .nav-left a:hover::after,
    .nav-right a:hover::after { width: 100%; }

    .nav-divider {
      color: rgba(201,151,43,.35);
      font-size: .55rem;
      user-select: none;
    }

    /* ── LOGO ──────────────────────────────────────────── */
    .header-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .logo-placeholder {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: transform .4s var(--ease), box-shadow .4s;
    }

    .logo-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* brillo al hover */
    .logo-placeholder::before {
      content: '';
      position: absolute;
      inset: -40%;
      background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255,255,255,.2) 15%,
        transparent 30%
      );
      animation: spin 6s linear infinite;
      opacity: 0;
      transition: opacity .4s;
    }

    .header-logo:hover .logo-placeholder::before { opacity: 1; }
    .logo-placeholder:hover {
      transform: scale(1.07);
      box-shadow: 0 0 24px rgba(201,151,43,.35);
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* logo encoge al hacer scroll */
    .scrolled .logo-placeholder {
      width: 52px;
      height: 52px;
    }

    /* ── HAMBURGUESA ───────────────────────────────────── */
    .menu-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      background: none;
      border: none;
    }

    .menu-toggle span {
      display: block;
      width: 24px; height: 1.5px;
      background: var(--crema);
      transition: transform .35s var(--ease), opacity .3s;
    }

    .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* ── MENÚ MÓVIL ────────────────────────────────────── */
    .mobile-nav {
      display: none;
      position: fixed;
      top: var(--header-h);
      left: 0; right: 0;
      z-index: 999;
      background: #c9972b33;
      backdrop-filter: blur(18px);
      border-top: 1px solid #c9972b33;
      padding: 2rem 2rem 3rem;
      flex-direction: column;
      animation: slideDown .35s var(--ease) both;
    }

    .mobile-nav.open { display: flex; }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .mobile-nav a {
      font-family: 'Cinzel', serif;
      font-size: .85rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(245,237,224,.8);
      text-decoration: none;
      padding: 1.1rem 0;
      border-bottom: 1px solid rgba(201,151,43,.1);
      transition: color .3s, padding-left .3s;
    }

    .mobile-nav a:last-child { border-bottom: none; }
    .mobile-nav a:hover { color: var(--dorado-claro); padding-left: .6rem; }

    /* ══════════════════════════════════════════════════════
       CONTENIDO PRINCIPAL (próximamente)
    ══════════════════════════════════════════════════════ */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      padding: 40px 60px;
      border-radius: 18px;
      background: rgba(0,0,0,0.28);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      border: 1px solid rgba(201,151,43,.35);
      margin-top: var(--header-h); /* evita que el header tape el contenido */
    }

   .footer {
  margin-top: 10px;
  font-size: 0.75rem;
  opacity: 0.7;
}

.footer a {
  color: rgb(183, 188, 255);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

    /* ══════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    padding: 0 1.4rem;
  }

  .nav-left, .nav-right { display: none; }

  .header-logo {
    grid-column: 2;
    justify-self: center;
  }

  .mobile-toggle-wrap {
    grid-column: 3;
    display: flex !important;
    justify-content: flex-end;
  }

  .menu-toggle { display: flex; }
}
  














/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
:root {
  --amarillo: #f5c518;
  --rojo:     #cc0001;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 860px;
  width: 100%;
  margin-top: var(--header-h);
}

.hero-year {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--amarillo);
  opacity: .85;
  margin-bottom: 2rem;
  animation: fadeUp .9s .1s var(--ease) both;
}

.hero-year::before,
.hero-year::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--amarillo);
  opacity: .5;
}

.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 60px rgba(245,197,24,.25), 0 4px 24px rgba(0,0,0,.5);
  animation: fadeUp .9s .25s var(--ease) both;
}

.hero-title span {
  display: block;
  color: var(--amarillo);
  font-size: clamp(2rem, 7vw, 5.5rem);
  font-weight: 600;
  margin-top: .1em;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  animation: fadeUp .9s .4s var(--ease) both;
}

.hero-divider::before,
.hero-divider::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245,197,24,.6));
}

.hero-divider::after {
  background: linear-gradient(to left, transparent, rgba(245,197,24,.6));
}

.hero-divider-icon {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.dot-rojo     { background: var(--rojo); }
.dot-amarillo { background: var(--amarillo); }
.dot-azul     { background: #4a6cf7; }

.hero-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .08em;
  color: rgba(245,237,224,.9);
  margin-bottom: .6rem;
  animation: fadeUp .9s .5s var(--ease) both;
}

.hero-origin {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245,237,224,.5);
  margin-bottom: 3rem;
  animation: fadeUp .9s .6s var(--ease) both;
}

.hero-origin strong {
  color: rgba(245,197,24,.7);
  font-weight: 400;
}

.hero-btn {
  display: inline-block;
  position: relative;
  padding: 1rem 3.2rem;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--azul-oscuro);
  text-decoration: none;
  background: var(--amarillo);
  overflow: hidden;
  transition: transform .2s;
  animation: fadeUp .9s .75s var(--ease) both;
}

.hero-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}

.hero-btn:hover::before { transform: scaleX(1); }
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn span { position: relative; z-index: 1; }

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(245,197,24,.45);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  animation: fadeUp 1s 1.2s var(--ease) both;
}

.scroll-line {
  width: 1px;
  height: 45px;
  background: linear-gradient(to bottom, rgba(245,197,24,.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}

.hero-bands {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  height: 4px;
}

.band { flex: 1; opacity: .7; }
.band-amarillo { background: var(--amarillo); }
.band-azul     { background: #1a3a8f; }
.band-rojo     { background: var(--rojo); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-redes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  animation: fadeUp .9s .75s var(--ease) both;
}

.red-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(245,197,24,.3);
  color: rgba(245,237,224,.7);
  text-decoration: none;
  transition: color .3s, border-color .3s, 
              transform .3s, background .3s;
}

.red-social:hover {
  color: #fff;
  border-color: var(--amarillo);
  background: rgba(245,197,24,.15);
  transform: translateY(-4px);
}

/* ── RESPONSIVE HERO ───────────────────────────────── */
@media (max-width: 768px) {
  .hero-year   { font-size: .62rem; letter-spacing: .3em; }
  .hero-origin { font-size: .62rem; letter-spacing: .2em; }
  .hero-btn    { padding: .85rem 2.2rem; font-size: .72rem; }

}
@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    padding: 0 1.4rem;
  }

  .nav-left, .nav-right { display: none; }

  .header-logo {
    grid-column: 2;
    justify-self: center;
  }

  .mobile-toggle-wrap {
    grid-column: 3;
    display: flex !important;
    justify-content: flex-end;
  }

  .menu-toggle { display: flex; }
}









/* ══════════════════════════════════════════════════════
   SECCIONES - TARJETAS
══════════════════════════════════════════════════════ */
.secciones {
  display: none;
  width: 100%;
  padding: 5rem 2rem 25rem 2rem;  /* ← el último valor es el espacio abajo */
}

.secciones-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.seccion-card {
  position: relative;
  height: 280px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,151,43,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  transition: transform .4s var(--ease),
              border-color .4s,
              box-shadow .4s;
}

.seccion-card:hover {
  transform: translateY(-6px);
  border-color: var(--amarillo);
  box-shadow: 0 25px 60px rgba(0,0,0,.5),
              0 0 30px rgba(245,197,24,.12);
}

/* overlay oscuro */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,15,60,.95) 0%,
    rgba(10,15,60,.5)  50%,
    rgba(10,15,60,.2)  100%
  );
  transition: background .4s;
}

.seccion-card:hover .card-overlay {
  background: linear-gradient(
    to top,
    rgba(10,15,60,.98) 0%,
    rgba(10,15,60,.6)  50%,
    rgba(10,15,60,.3)  100%
  );
}

/* contenido */
.card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.8rem;
  text-align: center;
}

.card-icon {
  font-size: 2rem;
  margin-bottom: .8rem;
  display: block;
  transition: transform .3s;
}

.seccion-card:hover .card-icon {
  transform: scale(1.2);
}

.card-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .5rem;
}

.card-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  font-style: italic;
  color: rgba(245,237,224,.65);
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 220px;
}

.card-arrow {
  font-size: 1rem;
  color: var(--amarillo);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
  letter-spacing: .1em;
  font-family: 'Cinzel', serif;
}

.seccion-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* franja dorada inferior al hover */
.seccion-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--rojo),
    var(--amarillo),
    #1a3a8f
  );
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}

.seccion-card:hover::after {
  transform: scaleX(1);
}

/* ── RESPONSIVE TARJETAS ───────────────────────────── */
@media (max-width: 900px) {
  .secciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .secciones-grid {
    grid-template-columns: 1fr;
  }

  .seccion-card { height: 220px; }
}