/* ==========================================================================
   Página principal: el fondo bíblico, la entrada con las manos y los
   paneles de la iglesia que flotan sobre el fondo.
   Sin la clase .con-movimiento todo se ve quieto: el Edén de fondo, las
   manos abiertas y el contenido completo.
   ========================================================================== */

.pagina-inicio {
  background: var(--abismo);
}

.pagina-inicio main,
.pagina-inicio .pie {
  position: relative;
  z-index: 1;
}

/* La cabecera aparece cuando las manos se abren */
.pagina-inicio .cabecera {
  transition:
    opacity 0.6s var(--curva),
    visibility 0.6s,
    background-color var(--normal) var(--curva);
}

.con-movimiento .pagina-inicio .cabecera:not(.cabecera--visible) {
  opacity: 0;
  visibility: hidden;
}

/* Modo de revisión (index.html?fondo=…): esconde el contenido para ver el fondo */
.solo-fondo main,
.solo-fondo .pie,
.solo-fondo .cabecera {
  visibility: hidden !important;
}

/* ------------------------------------------------------------------ FONDO
   Una capa fija detrás de todo. Cada escena es una obra a pantalla
   completa; GSAP las va cambiando en el orden de la Biblia. */
.fondo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 100lvh;
  overflow: hidden;
  background: var(--abismo);
  pointer-events: none;
}

.fondo__escena {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.fondo__escena:first-child {
  visibility: visible;
}

.fondo__escena img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}

/* --------------------------------------------------------------- ENTRADA */
.portal {
  position: relative;
  height: 100svh;
  color: var(--marfil);
}

.con-movimiento .portal {
  height: 230svh;
}

.portal__escena {
  --w: clamp(250px, 33vw, 480px);                     /* ancho de cada mano */
  --bajo: 5svh;                                       /* aire bajo las muñecas */
  --dedos: calc(100% - var(--bajo) - var(--w) * 0.9); /* altura de las yemas juntas */
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(75% 60% at 50% 46%, #1a1530 0%, var(--abismo) 72%);
  isolation: isolate;
}

.con-movimiento .portal__escena {
  /* Cubre también el espacio que gana Safari al ocultar su barra. */
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 10;
}

/* En pantallas verticales (celulares) las manos son más grandes y suben un
   poco: quedan al centro de la mirada y el aviso no les tapa las muñecas */
@media (max-aspect-ratio: 3/4) {
  .portal__escena {
    --w: min(74vw, 360px);
    --bajo: 13svh;
  }
}

.portal .estrellas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

/* La luz grande y los rayos nacen en las yemas de los dedos */
.portal__luz,
.portal__rayos {
  --d: min(160vmax, 1700px);
  position: absolute;
  left: calc(50% - var(--d) / 2);
  top: calc(var(--dedos) - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  pointer-events: none;
}

.portal__luz {
  background: radial-gradient(
    closest-side,
    #fff6e2 0%,
    rgba(248, 222, 170, 0.92) 16%,
    rgba(235, 169, 76, 0.42) 38%,
    rgba(235, 169, 76, 0.1) 58%,
    transparent 70%
  );
}

.portal__rayos {
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 196, 0.14) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
  opacity: 0.5;
}

/* La luz pequeña que late entre los dedos mientras las manos están juntas */
.portal__brillo {
  --d: clamp(80px, 11vmin, 150px);
  position: absolute;
  left: calc(50% - var(--d) / 2);
  top: calc(var(--dedos) - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff6e2 0%, rgba(248, 222, 170, 0.85) 28%, rgba(235, 169, 76, 0.28) 62%, transparent 100%);
  visibility: hidden;
}

/* Las manos de Durero: la misma imagen dos veces, una en espejo.
   Estado por defecto = abiertas (así se ven sin movimiento). */
.portal__manos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mano {
  position: absolute;
  bottom: var(--bajo);
  width: var(--w);
  aspect-ratio: 1100 / 1060;
  mix-blend-mode: screen;
  opacity: 0.75;
}

.mano img {
  display: block;
  width: 100%;
  height: 100%;
  /* Deja fuera los dedos de la mano de atrás: queda una sola mano por lado */
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 32% 100%, 28% 86%, 22% 74%, 18% 62%, 15% 50%, 13% 38%, 11% 25%, 11% 10%);
}

.mano--der {
  left: calc(50% - var(--w) * 0.33);
  transform-origin: 32% 100%;
  transform: translate(6vw, 4svh) rotate(46deg);
}

.mano--izq {
  right: calc(50% - var(--w) * 0.33);
  transform-origin: 68% 100%;
  transform: translate(-6vw, 4svh) rotate(-46deg);
}

.mano--izq img {
  transform: scaleX(-1);
}

/* El nombre, como en el logo, con aire entre "Más" y "VIDA" */
.portal__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--alto-cabecera) var(--gutter) 16svh;
  color: #1d1408;
  text-align: center;
}

.portal__iglesia {
  font-size: clamp(0.78rem, 0.7rem + 0.35vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: #3b2a12;
}

.portal__titulo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.25rem;
  line-height: 1;
}

.portal__titulo .firma {
  display: inline-block;
  margin-right: 0.16em;
  font-size: clamp(4.6rem, 2.4rem + 9vw, 11rem);
  line-height: 0.8;
  transform: rotate(-6deg);
}

.portal__vida {
  font-size: clamp(3rem, 1.4rem + 6vw, 7.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.portal__lema {
  margin-top: clamp(0.75rem, 2svh, 1.5rem);
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.4rem);
  font-weight: 500;
  color: #3b2a12;
}

.portal__pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 3svh, 2rem);
  z-index: 2;
  display: none;
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  color: color-mix(in srgb, var(--marfil) 80%, transparent);
  text-shadow: 0 1px 14px rgba(7, 8, 15, 0.95);
}

.con-movimiento .portal__pista {
  display: block;
}

.portal__pista::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.4rem;
  margin: 0.7rem auto 0;
  background: linear-gradient(var(--lampara), transparent);
}

/* Antes de que GSAP tome el control, la entrada espera a oscuras */
.con-movimiento .portal__manos,
.con-movimiento .portal__logo,
.con-movimiento .portal__pista {
  visibility: hidden;
}

.con-movimiento .portal__luz,
.con-movimiento .portal__rayos {
  opacity: 0;
}

/* ------------------------------------------------- LA IGLESIA SOBRE EL FONDO
   Cada sección es un panel que flota sobre el fondo. Entre panel y panel
   queda aire para ver las obras y sus transiciones. */
.iglesia .seccion {
  background: transparent;
  padding-block: clamp(9rem, 28svh, 17rem);
}

.iglesia .seccion::before {
  display: none;
}

.iglesia .seccion > .contenedor {
  position: relative;
  padding: clamp(1.75rem, 4.5vw, 4.5rem);
  border-radius: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  isolation: isolate;
}

.iglesia .seccion--noche > .contenedor {
  border: 1px solid color-mix(in srgb, var(--lampara) 22%, transparent);
  background: color-mix(in srgb, var(--abismo) 76%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.iglesia .seccion--piedra > .contenedor,
.iglesia .seccion--sombra > .contenedor {
  background: color-mix(in srgb, var(--piedra) 91%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.iglesia .seccion--sombra > .contenedor {
  background: color-mix(in srgb, var(--piedra-2) 92%, transparent);
}

/* Grano de pergamino dentro de los paneles claros */
.iglesia .seccion--piedra > .contenedor::before,
.iglesia .seccion--sombra > .contenedor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grano);
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* En el celular, sin desenfoque (ahorra batería) y con paneles más opacos */
@media (max-width: 899.98px) {
  .iglesia .seccion {
    padding-block: clamp(6rem, 20svh, 10rem);
  }

  .iglesia .seccion > .contenedor {
    width: min(100% - 1.5rem, var(--ancho));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .iglesia .seccion--noche > .contenedor {
    background: color-mix(in srgb, var(--abismo) 90%, transparent);
  }

  .iglesia .seccion--piedra > .contenedor {
    background: color-mix(in srgb, var(--piedra) 97%, transparent);
  }

  .iglesia .seccion--sombra > .contenedor {
    background: color-mix(in srgb, var(--piedra-2) 97%, transparent);
  }
}

/* ------------------------------------------------- NUESTRA HISTORIA */
.continua__rejilla {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.continua__etiqueta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lampara-suave);
}

.continua__titulo {
  display: grid;
  margin-top: 0.4rem;
  line-height: 1;
}

.continua__titulo .firma {
  font-size: clamp(3.4rem, 1.6rem + 6vw, 7rem);
  line-height: 0.95;
  color: var(--marfil);
}

.continua__mayus {
  margin-top: 0.4rem;
  font-size: clamp(0.85rem, 0.75rem + 0.45vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lampara);
}

.continua__entrada {
  max-width: 34ch;
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  color: color-mix(in srgb, var(--marfil) 88%, transparent);
}

.hitos {
  position: relative;
  display: grid;
  gap: 3rem;
  padding: 0 0 0 1.9rem;
  list-style: none;
}

.hitos::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0;
  width: 1px;
  background: linear-gradient(var(--lampara), color-mix(in srgb, var(--lampara) 15%, transparent));
}

.hito {
  position: relative;
}

.hito::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: calc(-1.9rem - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lampara);
  box-shadow: 0 0 14px var(--lampara);
}

.hito__fecha {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lampara);
}

.hito__titulo {
  margin-top: 0.5rem;
  font-size: var(--t-24);
}

.hito__texto {
  max-width: 46ch;
  margin-top: 0.5rem;
  color: color-mix(in srgb, var(--marfil) 80%, transparent);
}

@media (min-width: 900px) {
  .continua__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .continua__cabeza {
    position: sticky;
    top: calc(var(--alto-cabecera) + 3rem);
  }
}

/* ------------------------------------------------------------------- PIE */
.pagina-inicio .pie {
  border-top: 1px solid color-mix(in srgb, var(--lampara) 20%, transparent);
  background: color-mix(in srgb, var(--abismo) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.pie__creditos {
  margin-top: 3.5rem;
}

.pie__obras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--piedra-clara) 62%, transparent);
}

/* El contenido nunca asoma durante la apertura, tampoco con la barra móvil dinámica. */
.con-movimiento.intro-espera .pagina-inicio :is(.iglesia, .pie) { visibility: hidden; }

/* ADN breve: presentación y valores lado a lado; cuatro filas en móvil. */
.iglesia #adn { padding-block: clamp(3rem, 8svh, 5rem); }
.iglesia #adn > .contenedor { padding-block: clamp(1.5rem, 3vw, 3rem); }
#adn .valores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: .65rem 1rem;
  margin-top: 1.75rem;
}
#adn .valor {
  min-width: 0;
  padding: .1em 0;
  text-align: center;
  line-height: 1.25;
  font-size: clamp(2rem, 10cqi, 3.5rem);
}
#adn .valor:nth-child(3) { font-size: clamp(1.9rem, 9cqi, 3.2rem); }
#adn .valor:nth-child(4) { font-size: clamp(1.2rem, 6.5cqi, 2.5rem); }
#adn .valor:nth-child(5) { font-size: clamp(2.5rem, 12cqi, 4.5rem); }
#adn .valor:nth-child(6) { font-size: clamp(1.5rem, 7.8cqi, 2.9rem); }
#adn .valor:nth-child(7) { grid-column: 1 / -1; font-size: clamp(1.9rem, 9cqi, 3.2rem); }
#adn .adn__cita { margin-top: 1.5rem; }
#adn .adn__cita blockquote p { font-size: clamp(1.2rem, 2vw, 1.6rem); }
#adn .entrada { font-size: 1.05rem; line-height: 1.65; }
@media (min-width: 900px) {
  .iglesia #adn > .contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-content: center;
  }
  #adn .titulo-seccion, #adn .entrada, #adn .adn__cita { grid-column: 1; }
  #adn .valores { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}