/* ═══════════════════════════════════════════════════════════════
   PIEL — Sifu · El Retorno del Fénix
   ───────────────────────────────────────────────────────────────
   Todo sale de la tapa: el índigo #39415F ocupa el 57% de la
   portada y el dorado es el acento. El cliente había elegido
   "Dorado clásico" (fondo crema) mirando cinco cuadraditos, sin
   la tapa al lado — le faltaba justo el color que más manda.

   EL GESTO PROPIO: el recorrido de color va de OSCURO A LUMINOSO,
   al revés que en Lucía Manfredi. La página arranca en la noche
   índigo de la tapa, se hunde en el azul más profundo mientras
   cuenta su búsqueda, y amanece en crema justo cuando empieza el
   texto de él. Es literal al libro: va de "la noche oscura del
   alma" (cap. 5) a "Iluminación" (cap. 5), y el fénix renace.

   TIPOGRAFÍA: el interior del libro mezcla Palatino, Adobe
   Garamond y Times sin sistema; el único gesto tipográfico
   deliberado son las VERSALITAS doradas del título de tapa
   (Palatino en caps + small caps). De ahí sale Alegreya SC, que
   tiene versalitas de verdad y no mayúsculas falsas. Alegreya es
   caligráfica y de pluma, como la Palatino de Zapf, y viene con
   su sans hermana diseñada por la misma fundición (Huerta
   Tipográfica, argentina).
   ═══════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍAS PROPIAS ────────────────────────────────────── */
@font-face { font-family:'Alegreya SC';   src:url('../fonts/alegreya-sc-400.woff2')     format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya SC';   src:url('../fonts/alegreya-sc-500.woff2')     format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya';      src:url('../fonts/alegreya-500.woff2')        format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya';      src:url('../fonts/alegreya-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('../fonts/alegreya-sans-300.woff2')   format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('../fonts/alegreya-sans-400.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('../fonts/alegreya-sans-500.woff2')   format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('../fonts/alegreya-sans-700.woff2')   format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ── COLORES ────────────────────────────────────────────────
     Todos los pares verificados con contraste.py. El único que
     NO pasa es dorado #D4B283 sobre crema (1.80:1): por eso en
     las secciones claras el acento de texto es #8A5E00. */

  --fondo:            #F8F3E2;   /* crema del halo de la tapa */
  --fondo-suave:      #FDFAF0;   /* el amanecer: lo más luminoso */
  --fondo-medio:      #333B57;   /* índigo, un paso bajo la tapa */
  --fondo-oscuro:     #2B3150;   /* el fondo del pozo */

  /* El índigo EXACTO de la tapa. Las secciones que llevan el
     fénix tienen que usar este hex y ninguno otro: el recorte
     del medallón trae ese fondo horneado y cualquier otro tono
     dibujaría un cuadrado alrededor. */
  --noche:            #39415F;

  --acento:           #D4B283;   /* el dorado de la tapa */
  --acento-oscuro:    #8A5E00;   /* hover de botones */
  --acento-claro:     #ECCCA2;   /* detalles sobre índigo */
  --acento-texto:     #8A5E00;   /* 5.14:1 sobre crema */

  --texto:            #1C2036;   /* 14.44:1 sobre crema */
  --texto-suave:      #4A4F68;   /*  7.25:1 sobre crema */
  --texto-claro:      #F8F3E2;   /*  9.02:1 sobre el índigo */
  --texto-claro-suave:#C9CEE0;   /*  6.39:1 sobre el índigo */

  --font-serif:  'Alegreya', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans:   'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-versal: 'Alegreya SC', 'Palatino Linotype', Palatino, Georgia, serif;

  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;
  --espacio-2xl: 7.5rem;

  --radio-sm: 3px;
  --radio-md: 4px;

  /* Sombras teñidas de índigo, nunca negras. */
  --sombra-foto:       18px 18px 44px rgba(27, 32, 54, 0.34), 0 0 0 1px rgba(212, 178, 131, 0.14);
  --sombra-foto-hover: 22px 22px 52px rgba(27, 32, 54, 0.42), 0 0 0 1px rgba(212, 178, 131, 0.22);

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --medida: 680px;
}

@media (max-width: 640px) {
  :root {
    --espacio-lg: 2.25rem;
    --espacio-xl: 3rem;
    --espacio-2xl: 4rem;
  }
}

/* ── EL RECORRIDO DE COLOR ──────────────────────────────────────
   Oscuro → luminoso. Al revés que en Lucía, y por una razón: acá
   el libro va de la noche oscura al despertar, no del día al
   ocaso. */
.seccion { padding: var(--espacio-2xl) 0; }

.seccion--claro  { background: var(--fondo-suave);  color: var(--texto); }
.seccion--medio  { background: var(--fondo-medio);  color: var(--texto-claro); }
.seccion--oscuro { background: var(--fondo-oscuro); color: var(--texto-claro); }

/* Las secciones que llevan el medallón del fénix. */
.seccion--noche  { background: var(--noche);        color: var(--texto-claro); }

/* Sobre fondo índigo, la volanta y las citas cambian de color. Sin
   esto la volanta queda en #8A5E00 sobre azul (1.6:1, ilegible) y
   la cita en gris de fondo claro. */
.seccion--medio .ojo,
.seccion--oscuro .ojo,
.seccion--noche .ojo          { color: var(--acento-claro); }

.seccion--medio .titulo-doble em,
.seccion--oscuro .titulo-doble em,
.seccion--noche .titulo-doble em { color: var(--acento-claro); }

.seccion--medio .cita-interna,
.seccion--oscuro .cita-interna,
.seccion--noche .cita-interna {
  border-left-color: var(--acento-claro);
  color: var(--texto-claro);
}

.seccion__titulo {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--espacio-md);
}

/* Las volantas van en versalitas de verdad, no en mayúsculas
   falsas — es el eco del título de tapa. */
.ojo {
  font-family: var(--font-versal);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: none;
}

/* El reset del núcleo pone margin:0 en todo y `.prosa` sólo define
   peso e interlineado: sin esto los párrafos quedan pegados uno
   abajo del otro. */
.prosa p + p { margin-top: 1.15em; }

/* ═══ HERO ═══════════════════════════════════════════════════════
   Asimétrico: el texto a la izquierda y el medallón saliéndose por
   el borde derecho, como una luna que asoma. El fondo es el índigo
   exacto de la tapa para que el recorte se funda sin costura. */
.hero {
  position: relative;
  background: var(--noche);
  color: var(--texto-claro);
  overflow: hidden;
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem);
}

.hero__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--espacio-lg);
  align-items: center;
}

.hero__texto { position: relative; z-index: 2; }

.hero__nombre {
  font-family: var(--font-versal);
  font-weight: 500;
  font-size: clamp(4.5rem, 13vw, 9rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--acento);
  margin-bottom: var(--espacio-md);
}

.hero__frase {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.7vw, 2.05rem);
  line-height: 1.34;
  color: var(--texto-claro);
  max-width: 26ch;
  text-wrap: balance;
}

.hero__bajada {
  margin-top: var(--espacio-md);
  max-width: 46ch;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--texto-claro-suave);
}

/* ── EL MEDALLÓN ────────────────────────────────────────────────
   La imagen es SÓLO el disco, recortado en círculo con
   transparencia real: nada de un cuadrado con el fondo horneado.
   Se probó así primero y no funciona — el resplandor de la tapa no
   llega a apagarse dentro del recorte (sobre la circunferencia
   inscrita todavía difiere 48 puntos del fondo), así que los cuatro
   lados rectos cortaban halo vivo y se veía el cuadrado.

   El resplandor se rehace acá, con los colores muestreados de la
   tapa radio por radio. Ventajas: es redondo de verdad, anda sobre
   cualquier fondo, y escala sin perder nitidez.

   La geometría respeta la original: el anillo dorado termina en
   r=519 y el halo se apaga en r≈800, o sea 1.55 veces. Por eso el
   disco ocupa el 64.5% (= 1/1.55) de la caja. */
.hero__medallon {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-right: calc(-1 * clamp(1rem, 5vw, 4.5rem));
}
.hero__medallon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(250, 249, 242, 1)     0%,
    rgba(250, 249, 242, 1)     64.5%,
    rgba(249, 245, 228, 0.96)  69.6%,
    rgba(246, 214, 203, 0.90)  73.4%,
    rgba(240, 200, 205, 0.51)  80.8%,
    rgba(240, 200, 205, 0.22)  87.0%,
    rgba(240, 200, 205, 0.085) 93.2%,
    rgba(240, 200, 205, 0)     100%);
}
.hero__medallon picture { position: relative; width: 64.5%; }
.hero__medallon img { width: 100%; }

@media (max-width: 860px) {
  .hero__grilla { grid-template-columns: 1fr; gap: var(--espacio-md); }
  .hero__medallon {
    order: -1;
    margin: 0 auto;
    max-width: min(78vw, 420px);
  }
  .hero__frase  { max-width: none; }
  .hero__bajada { max-width: none; }
}

/* ── MOVIMIENTO ─────────────────────────────────────────────────
   Una sola idea: el halo respira, muy lento. Y la entrada del
   texto es escalonada. Las dos se apagan enteras si el sistema
   pide menos movimiento — envueltas en no-preference, para no
   depender del override global del núcleo, que sólo acorta la
   duración y dejaría un bucle parpadeando. */
@media (prefers-reduced-motion: no-preference) {
  .hero__medallon { animation: respira 9s ease-in-out infinite; }
  @keyframes respira {
    0%, 100% { transform: scale(1);     opacity: 0.97; }
    50%      { transform: scale(1.025); opacity: 1; }
  }

  .hero__nombre,
  .hero__frase,
  .hero__bajada {
    opacity: 0;
    animation: sube 1.1s var(--suave) forwards;
  }
  .hero__nombre { animation-delay: 0.15s; }
  .hero__frase  { animation-delay: 0.45s; }
  .hero__bajada { animation-delay: 0.72s; }

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

/* ═══ DOS COLUMNAS ═══════════════════════════════════════════════
   Texto ancho a la izquierda, columna lateral a la derecha con la
   foto y la cronología. Alineadas arriba, no al centro. */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.dos-columnas__lado { display: flex; flex-direction: column; gap: var(--espacio-lg); }

@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; gap: var(--espacio-lg); }
}

/* ═══ EL AMANECER ════════════════════════════════════════════════
   La banda donde la página cambia de la noche al día. Cae justo
   antes del adelanto: la web se hace de día en el momento exacto
   en que empezás a leerlo a él. */
.amanecer {
  height: clamp(120px, 22vh, 220px);
  background: linear-gradient(to bottom, var(--noche) 0%, #6A6480 42%, #C9A98C 72%, var(--fondo) 100%);
}

/* ═══ RETRATO ════════════════════════════════════════════════════
   La foto que mandó es de 632×678 y no da para más: se usa a
   tamaño chico y en su proporción nativa, para no recortarle las
   manos ni estirarla. */
.marco-foto--retrato {
  aspect-ratio: 632 / 678;
  /* La fuente tiene 632 px de ancho: más grande que esto se ve
     blanda en pantallas retina. */
  max-width: 320px;
}

/* ═══ EL LINAJE ══════════════════════════════════════════════════
   Cronología real con fechas, no tarjetas numeradas de adorno: el
   orden acá dice algo (primero la filial, después el discipulado).
   Por eso lleva línea de tiempo y no numeritos 01/02/03. */
.linaje { list-style: none; border-left: 1px solid rgba(212, 178, 131, 0.32); padding-left: var(--espacio-md); }
.linaje li { position: relative; padding-bottom: var(--espacio-md); }
.linaje li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--espacio-md) - 4px);
  top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acento);
}
.linaje__cuando {
  display: block;
  font-family: var(--font-versal);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  color: var(--acento-claro);
  margin-bottom: 0.2em;
}

/* ═══════════════════════════════════════════════════════════════
   PIEZAS DE PÁGINA
   ───────────────────────────────────────────────────────────────
   `fragmentos.html` usa .cierre, .red, .pie y .con-barra, pero el
   núcleo no las define: se escriben acá, en cada web.
   ═══════════════════════════════════════════════════════════════ */

/* Un escalón más del recorrido: el primer crema, todavía no el
   más luminoso. */
.seccion--alba { background: var(--fondo); color: var(--texto); }

/* ── EL LIBRO ───────────────────────────────────────────────── */
.libro { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.libro__tapa { position: sticky; top: var(--espacio-lg); }
.libro__pie {
  margin-top: var(--espacio-sm);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--texto-claro-suave);
}
.libro__subtitulo {
  font-family: var(--font-versal);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.08em;
  color: var(--acento-claro);
  margin-top: -0.4em;
  margin-bottom: var(--espacio-md);
}
.ficha { list-style: none; margin-top: var(--espacio-md); font-size: 0.9375rem; font-weight: 300; }
.ficha li { padding: 0.42rem 0; border-top: 1px solid rgba(212, 178, 131, 0.20); display: flex; gap: var(--espacio-sm); }
.ficha li:last-child { border-bottom: 1px solid rgba(212, 178, 131, 0.20); }
.ficha dt, .ficha b {
  font-family: var(--font-versal);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--acento-claro);
  min-width: 9.5rem;
  flex: none;
}

@media (max-width: 860px) {
  .libro { grid-template-columns: 1fr; }
  .libro__tapa { position: static; max-width: 300px; margin: 0 auto; }
}

/* ── EL ADELANTO ────────────────────────────────────────────── */
/* El epígrafe del Prefacio, tal como está impreso. */
.epigrafe {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--texto);
  margin-bottom: var(--espacio-lg);
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento-oscuro);
  max-width: 44ch;
}
.adelanto__firma {
  margin-top: var(--espacio-lg);
  font-family: var(--font-versal);
  letter-spacing: 0.1em;
  color: var(--acento-texto);
}

/* ── CIERRE ─────────────────────────────────────────────────── */
.cierre { text-align: center; max-width: 34rem; margin: 0 auto; }
.cierre__titulo {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-style: italic;
  line-height: 1.34;
  text-wrap: balance;
}
.cierre__texto { margin-top: var(--espacio-md); font-weight: 300; color: var(--texto-suave); }
.cierre__redes { margin-top: var(--espacio-lg); display: flex; gap: var(--espacio-md); justify-content: center; flex-wrap: wrap; }

.red {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(138, 94, 0, 0.32);
  border-radius: var(--radio-md);
  font-size: 0.9375rem;
  color: var(--acento-texto);
  transition: background 0.3s var(--suave), border-color 0.3s var(--suave);
}
.red:hover { background: rgba(212, 178, 131, 0.16); border-color: var(--acento-texto); }
.red:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; }

/* ── PIE ────────────────────────────────────────────────────── */
.pie {
  background: var(--fondo-suave);
  color: var(--texto-suave);
  border-top: 1px solid rgba(138, 94, 0, 0.18);
  padding: var(--espacio-lg) 0;
  font-size: 0.875rem;
  text-align: center;
}

/* El espacio para la barra fija ya lo reserva el núcleo
   (`body.con-barra`, sólo bajo 760px). No repetirlo acá. */

/* ── BOTÓN PRINCIPAL ────────────────────────────────────────────
   El núcleo lo pinta con texto claro sobre --acento, porque da por
   sentado que el acento es oscuro (en Lucía era terracota #C74C23).
   Acá el acento es un dorado claro: crema sobre dorado da 1.80:1,
   ilegible. Va al revés — tinta sobre dorado, 8.02:1 — y en hover
   aclara en vez de oscurecer (10.48:1). */
.boton--principal { color: var(--texto); }
.boton--principal:hover { background: var(--acento-claro); color: var(--texto); }
.boton--principal:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

/* ── LEER MÁS SOBRE FONDO CLARO ─────────────────────────────────
   El núcleo lo pinta con --acento-claro porque en Lucía el adelanto
   iba sobre fondo oscuro. Acá el adelanto es la sección donde la
   página ya amaneció: dorado claro sobre crema da 1.38:1. */
.seccion--alba .leer-mas,
.seccion--claro .leer-mas { color: var(--acento-texto); }
.seccion--alba .leer-mas:hover,
.seccion--claro .leer-mas:hover { color: var(--texto); }

/* ═══ CONSULTA JUNTO AL CTA ══════════════════════════════════════
   Va como enlace y no como botón, a propósito: el que está listo
   compra sin fricción, y el que duda tiene la salida a un
   centímetro sin que nada le compita al CTA.

   Reemplaza al WhatsApp flotante, que se sacó de esta web: en móvil
   quedaba tapando justo la zona del botón de compra. */
.consulta {
  margin-top: var(--espacio-sm);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--texto-claro-suave);
  max-width: 42ch;
}
.consulta a {
  color: var(--acento-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(236, 204, 162, 0.45);
  transition: text-decoration-color 0.25s var(--suave);
}
.consulta a:hover { text-decoration-color: var(--acento-claro); }
.consulta a:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

/* Sin flotante, la barra fija ya no tiene que dejarle lugar a la
   derecha: el núcleo le reserva 56px + 0.75rem para un botón que en
   esta web no existe, y quedaba un hueco muerto. */
.barra-compra { padding-right: 1rem; }