/* ═══════════════════════════════════════════════════════════════
   PIEL v2 — Sifu · El Retorno del Fénix   (LUMINOSA)
   ───────────────────────────────────────────────────────────────
   Reescrita el 25-08-2026 por pedido del cliente. La v1 era índigo
   dominante; él la esperaba "delicada, prolija, luminosa" y sentía
   que se alejaba de eso. La v1 queda entera en `_v1-indigo/`.

   EL CAMBIO DE FONDO: se invirtió el recorrido. Antes la página
   arrancaba de noche y amanecía al final. Ahora es luminosa de
   punta a punta y se hunde en índigo UNA SOLA VEZ: la placa del
   simbolismo del fénix. Ahí el medallón por fin brilla, en vez de
   flotar sobre un fondo de su mismo tono.

   El índigo #39415F dejó de ser el fondo y pasó a ser el acento:
   aparece en la tapa, en el medallón, en los títulos y en esa
   única placa. Sigue siendo el color del libro, pero ya no pesa.

   OJO CON EL DORADO: #D4B283 sobre blanco da 1.9:1. Sobre fondo
   claro el acento de texto es SIEMPRE #8A5E00 (5.70:1).

   LAS FOTOS NO ESTÁN RECORTADAS. Vienen con fondo blanco y se
   apoyan sobre secciones blancas: sus esquinas son #FEFEFE/#FFFFFF,
   o sea 1/255 de diferencia, invisible. Se intentó recortarlas a
   transparente y NO funciona: el satén blanco del uniforme tiene
   brillos casi puros que quedan conectados al fondo, y el recorte
   se come pedazos de la ropa.
   ═══════════════════════════════════════════════════════════════ */

/* ── 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:            #FAF7F0;   /* crema cálido — la referencia que le gustó
                                    al cliente (evelynescribe) usa #FAF7F2.
                                    El blanco puro sale frío, casi clínico. */
  --fondo-blanco:     #FFFFFF;   /* paneles: sobre ellos van las fotos */
  --fondo-suave:      #FFFFFF;
  --fondo-medio:      #F2EBDD;   /* el más cálido de los claros */
  --fondo-oscuro:     #39415F;   /* el índigo de la tapa: UNA sola placa */

  --noche:            #39415F;   /* el hex exacto del fondo del medallón */

  --acento:           #D4B283;   /* el dorado de la tapa: sólo en fondos oscuros */
  --acento-oscuro:    #6F4B00;   /* hover */
  --acento-claro:     #ECCCA2;   /* detalles sobre índigo */
  --acento-texto:     #8A5E00;   /* 5.70:1 sobre blanco — el dorado legible */

  --texto:            #2A2E42;   /* 13.39:1 sobre blanco */
  --texto-suave:      #5A5F78;   /*  6.28:1 sobre blanco */
  --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: 9rem;

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

  /* Sombras teñidas de índigo, nunca negras. */
  --sombra-foto:       0 22px 48px rgba(42, 46, 66, 0.13), 0 2px 8px rgba(42, 46, 66, 0.05);
  --sombra-foto-hover: 0 30px 60px rgba(42, 46, 66, 0.18), 0 3px 10px rgba(42, 46, 66, 0.07);

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

@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); }
.seccion--blanco { background: var(--fondo-blanco); color: var(--texto); }
.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. */
/* Ahora sólo la placa índigo invierte los acentos. En la v1 esto
   valía también para `--medio`, que era azul; ahora es crema. */
.seccion--oscuro .ojo,
.seccion--noche .ojo             { color: var(--acento-claro); }
.seccion--oscuro .titulo-doble em,
.seccion--noche .titulo-doble em { color: var(--acento-claro); }
.seccion--oscuro .cita-interna,
.seccion--noche .cita-interna {
  border-left-color: var(--acento-claro);
  color: var(--texto-claro);
}
/* Sobre los fondos claros el acento de texto es el dorado oscuro:
   el dorado de la tapa daría 1.9:1 y no se leería. */
.seccion--claro .ojo,
.seccion--medio .ojo,
.seccion--blanco .ojo { color: var(--acento-texto); }

.seccion__titulo {
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
  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(--fondo);
  color: var(--texto);
  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-texto);
  margin-bottom: var(--espacio-md);
}

.hero__frase {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.34;
  color: var(--texto);
  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-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;
}

/* La sección LINAJE se sacó por pedido del cliente: en la tradición
   el linaje es la sucesión de nombres de maestros por donde se
   transmite el conocimiento, es conceptualmente delicado, y la web
   está centrada en el libro. Sus estilos se eliminaron con ella. */

/* ═══ HERO v2 · ENCABEZADO POR EL LIBRO ══════════════════════════
   El cliente pidió que lo primero que se vea sea la portada y el
   título, y que su nombre NO aparezca en grande. Así que el h1 es
   el título del libro y "Sifu" queda como volanta chica arriba. */
.hero--libro { padding: clamp(4rem, 10vh, 7.5rem) 0 clamp(3.5rem, 8vh, 6rem); }

.hero--libro .hero__grilla {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.hero__volanta {
  font-family: var(--font-versal);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--acento-texto);
  margin-bottom: var(--espacio-sm);
}

.hero__titulo {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  color: var(--texto);
  margin-bottom: 0.3em;
  text-wrap: balance;
}

.hero__sub {
  font-family: var(--font-versal);
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  letter-spacing: 0.11em;
  color: var(--acento-texto);
  margin-bottom: var(--espacio-lg);
}

/* La tapa como objeto sobre blanco: sombra tenue, sin marco. */
.hero__tapa {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--sombra-foto);
  transition: transform .5s var(--suave), box-shadow .5s var(--suave);
}
@media (hover: hover) {
  .hero__tapa:hover { transform: translateY(-4px); box-shadow: var(--sombra-foto-hover); }
}

@media (max-width: 860px) {
  .hero--libro .hero__grilla { grid-template-columns: 1fr; }
  .hero__tapa { max-width: 270px; margin: 0 auto var(--espacio-lg); }
}

/* ═══ LA PLACA DEL SIMBOLISMO ════════════════════════════════════
   La única inmersión en índigo de toda la página. Existe para que
   el medallón brille: sobre claro se apagaba, y sobre su propio
   índigo el fondo del recorte se funde sin costura. */
.simbolo { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.simbolo__medallon { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.simbolo__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,.96) 69.6%, rgba(246,214,203,.90) 73.4%,
    rgba(240,200,205,.51) 80.8%, rgba(240,200,205,.22) 87%,
    rgba(240,200,205,.085) 93.2%, rgba(240,200,205,0) 100%);
}
.simbolo__medallon picture { position: relative; width: 64.5%; }
.simbolo__medallon img { width: 100%; }
@media (max-width: 860px) {
  .simbolo { grid-template-columns: 1fr; }
  .simbolo__medallon { max-width: 340px; margin: 0 auto; }
}

/* ═══ PRÓXIMO LIBRO ══════════════════════════════════════════════ */
/* La tapa iba a .5fr y quedaba chica contra un bloque de texto de
   tres líneas: media sección vacía. Se equilibra dándole más peso a
   la tapa y acotando la columna de texto. */
.proximo { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1fr); gap: clamp(2.5rem,6vw,5rem); align-items: center; }
.proximo__texto { max-width: 38ch; }
.proximo__tapa img { width: 100%; }
.proximo__epigrafe {
  font-family: var(--font-versal);
  font-size: .9375rem; letter-spacing: .17em;
  color: var(--acento-texto); margin-bottom: var(--espacio-sm);
}
@media (max-width: 860px) {
  .proximo { grid-template-columns: 1fr; }
  .proximo__tapa { max-width: 240px; margin: 0 auto; }
}

/* ═══ PANEL BLANCO ═══════════════════════════════════════════════
   Las fotos vienen con fondo blanco y sin recortar. Sobre el crema
   se les vería el rectángulo, así que van dentro de un panel blanco
   con sombra muy tenue: el blanco pasa a ser una decisión de diseño
   en vez de un borde accidental. */
.panel {
  background: var(--fondo-blanco);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(42, 46, 66, 0.10), 0 1px 3px rgba(42, 46, 66, 0.05);
}
.panel img { width: 100%; display: block; }

/* ═══ CABECERA FIJA ══════════════════════════════════════════════
   La referencia tiene una barra fina arriba con el sello y el CTA
   siempre a mano. Se porta acá: en una página de venta, tener el
   botón visible sin scrollear vale más que el par de píxeles. */
.cabecera {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(42, 46, 66, 0.09);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espacio-md); padding: 0.85rem 0;
}
.cabecera__marca {
  font-family: var(--font-versal);
  font-size: 0.9375rem; letter-spacing: 0.16em;
  color: var(--texto-suave);
}
.cabecera .boton { padding: 0.6rem 1.15rem; font-size: 0.875rem; }
/* Antes la marca se ocultaba en móvil y el botón quedaba solo,
   colgado contra el borde derecho. Ahora se achica y el botón
   acorta su texto: la barra queda equilibrada en cualquier ancho. */
.cta-corto { display: none; }
@media (max-width: 560px) {
  .cabecera__marca { font-size: 0.8125rem; letter-spacing: 0.1em; }
  .cabecera .boton { padding: 0.55rem 0.9rem; }
  .cta-largo { display: none; }
  .cta-corto { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════
   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 era del recorrido de la v1; ya no aplica. */

/* ── 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-suave);
}
.libro__subtitulo {
  font-family: var(--font-versal);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.08em;
  color: var(--acento-texto);
  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(42, 46, 66, 0.13); display: flex; gap: var(--espacio-sm); }
.ficha li:last-child { border-bottom: 1px solid rgba(42, 46, 66, 0.13); }
.ficha dt, .ficha b {
  font-family: var(--font-versal);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--acento-texto);
  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-texto);
  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-medio);
  color: var(--texto-suave);
  border-top: 1px solid rgba(42, 46, 66, 0.10);
  padding: var(--espacio-lg) 0;
  font-size: 0.875rem;
  text-align: center;
}

/* El sello de la editorial es discreto, pero tiene que verse que es un link:
   sin esto queda del mismo color que el texto y nadie sabe que se puede tocar. */
.pie a {
  color: var(--acento-oscuro);
  border-bottom: 1px solid rgba(138, 94, 0, 0.30);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--suave), color 0.25s var(--suave);
}
.pie a:hover {
  color: var(--texto);
  border-bottom-color: var(--acento-oscuro);
}

/* 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. */
.leer-mas { color: var(--acento-texto); }
.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-suave);
  max-width: 42ch;
}
.consulta a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(138, 94, 0, 0.4);
  transition: text-decoration-color 0.25s var(--suave);
}
.consulta a:hover { text-decoration-color: var(--acento-texto); }
.consulta a:focus-visible { outline: 2px solid var(--acento-texto); 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; }

/* Una sola foto en "El autor". Se probó con las dos apiladas y la
   columna se leía como catálogo de poses; y una en el cierre tampoco
   funcionaba —chica, con el panel marcándose contra el crema, y
   compitiéndole a la frase—. Menos es más. */
.dos-columnas__lado .panel + .panel { margin-top: var(--espacio-md); }