/* ============================================================
   SAMUEL RODRIGUES · AUTOR — v2.0 CINEMÁTICO EDITORIAL
   "La Casa del Número 48"
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ------------------------------------------------------------
   RED DE SEGURIDAD RESPONSIVE
   Garantiza que la web se adapte sola a cualquier pantalla (sobre
   todo móvil) sin que el usuario tenga que reducir el zoom: ningún
   elemento puede provocar scroll horizontal, y las palabras o
   códigos largos (URLs, ISBN, emails) siempre rompen de línea en
   vez de desbordar. 'clip' recorta sin afectar al scroll vertical
   ni al smooth-scroll. (Si el navegador es muy antiguo y no conoce
   'clip', el fallback 'hidden' hace el mismo trabajo.)
   ------------------------------------------------------------ */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { overflow-wrap: break-word; word-break: break-word; }
img, picture, svg, video { max-width: 100%; display: block; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:root {
  /* Paleta Casa del Número 48 */
  --negro-profundo: #0F0D0A;
  --negro-tierra: #1F1B16;
  --negro-cuero: #2A241D;
  --crema-marfil: #F2E8D5;
  --blanco-hueso: #FAF5EC;
  --oro-antiguo: #C49A4E;
  --oro-claro: #D9B673;
  --oro-tenue: rgba(196, 154, 78, 0.4);
  --marron-roble: #5C4A32;
  --gris-piedra: #8A8178;
  /* Acento secundario para las valoraciones escritas en la web (no Amazon) */
  --verde-salvia: #7C9A7A;
  --verde-salvia-claro: #A8C2A0;

  /* Tipografías */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Lora", Georgia, "Iowan Old Style", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica */
  --fs-mega: clamp(4rem, 13vw, 11rem);
  --fs-hero: clamp(3rem, 9vw, 7.5rem);
  --fs-h1:   clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2:   clamp(2rem, 4vw, 3.25rem);
  --fs-h3:   clamp(1.5rem, 2.5vw, 2rem);
  --fs-lead: clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;
  --fs-micro: 0.7rem;

  /* Espaciado */
  --sp-xs:  0.75rem;
  --sp-sm:  1.25rem;
  --sp-md:  2rem;
  --sp-lg:  3.5rem;
  --sp-xl:  5.5rem;
  --sp-2xl: 8rem;
  --sp-3xl: 12rem;

  /* Contenedores */
  --container: 1440px;
  --container-narrow: 960px;
  --container-text: 720px;

  /* Animación */
  --ease-cinema: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slow: 1200ms;
  --duration-med: 700ms;
  --duration-fast: 400ms;
}

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
body {
  background: var(--negro-profundo);
  color: var(--crema-marfil);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--crema-marfil);
}

em { font-style: italic; color: var(--oro-antiguo); font-weight: 400; }

::selection { background: var(--oro-antiguo); color: var(--negro-profundo); }

/* ============================================================
   ELEMENTOS COMUNES
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); }
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--oro-antiguo);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 300; }

/* ============================================================
   NAVEGACIÓN — invisible al principio, aparece al scrollear
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background var(--duration-med) var(--ease-cinema),
              backdrop-filter var(--duration-med) var(--ease-cinema),
              padding var(--duration-med) var(--ease-cinema),
              border-color var(--duration-med) var(--ease-cinema);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(15, 13, 10, 0.85);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  padding: 1rem 0;
  border-bottom-color: rgba(196, 154, 78, 0.15);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--crema-marfil);
  line-height: 1;
}
.nav__brand-dot { color: var(--oro-antiguo); }

.nav__links {
  display: flex;
  gap: var(--sp-md);
  align-items: center;
}
.nav__link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(242, 232, 213, 0.75);
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--duration-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--oro-antiguo);
  transition: width var(--duration-med) var(--ease-out);
}
.nav__link:hover { color: var(--crema-marfil); }
.nav__link:hover::after { width: 100%; }

.nav__cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oro-antiguo);
  border: 1px solid rgba(196, 154, 78, 0.45);
  padding: 0.65rem 1.1rem;
  transition: all var(--duration-fast);
}
.nav__cta:hover {
  background: var(--oro-antiguo);
  color: var(--negro-profundo);
  border-color: var(--oro-antiguo);
}

.nav__toggle {
  display: none;
  width: 32px; height: 26px;
  position: relative;
  z-index: 102;
}
.nav__toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--crema-marfil);
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}
.nav__toggle span:nth-child(1) { top: 6px; }
.nav__toggle span:nth-child(2) { top: 13px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--negro-profundo);
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-md);
    transform: translateY(-100%);
    transition: transform var(--duration-slow) var(--ease-cinema);
    padding: 0 2rem;
  }
  .nav__link { font-size: 1rem; letter-spacing: 0.25em; color: var(--crema-marfil); }
  .nav__cta { font-size: 0.85rem; }
  .nav.is-open .nav__links { transform: translateY(0); }
}

/* ============================================================
   HERO CINEMÁTICO — pantalla completa
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* padding-top reserva el alto de la nav fija para que el título nunca
     se solape con el menú en pantallas de escritorio más bajas */
  padding: clamp(7rem, 13vh, 10rem) 0 var(--sp-xl);
}

/* Fondo cinemático — donde va la foto a pantalla completa */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero__background-image {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(196, 154, 78, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(92, 74, 50, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1A1612 0%, #0F0D0A 100%);
  animation: hero-pan 30s ease-in-out infinite alternate;
}
@keyframes hero-pan {
  0%   { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1.12) translate(1%, 1%); }
}

/* Placeholder visible cuando aún no hay foto */
.hero__background-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.hero__background-placeholder-content {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.35);
}
.hero__background-placeholder-content svg {
  margin: 0 auto 1rem;
  opacity: 0.5;
}

/* Gradiente que oscurece la parte inferior para legibilidad */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 10, 0.2) 0%,
      rgba(15, 13, 10, 0.4) 40%,
      rgba(15, 13, 10, 0.85) 85%,
      rgba(15, 13, 10, 0.95) 100%
    );
}

/* Capa de "grano de película" muy sutil */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
/* Sombreado suave detrás del texto para que destaque sobre la foto */
.hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -8% -10% -6%;
  pointer-events: none;
  background: radial-gradient(
    115% 95% at 22% 68%,
    rgba(15, 13, 10, 0.72) 0%,
    rgba(15, 13, 10, 0.5) 38%,
    rgba(15, 13, 10, 0.22) 62%,
    transparent 78%
  );
  filter: blur(10px);
}
.hero__title,
.hero__lead {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.hero__chapter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: var(--oro-claro);
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__chapter::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--oro-antiguo);
  opacity: 0.8;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 300;
  color: var(--crema-marfil);
  margin: 0 0 var(--sp-md);
  max-width: 14em;
}
.hero__title em {
  font-style: italic;
  color: var(--oro-antiguo);
  font-weight: 300;
}

.hero__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.85);
  max-width: 36em;
  margin-bottom: var(--sp-md);
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.hero__meta {
  position: absolute;
  bottom: var(--sp-md);
  left: 0; right: 0;
  z-index: 6;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.55);
  pointer-events: none;
}
.hero__meta > div { display: flex; align-items: center; gap: 8px; }

.hero__scroll-cue {
  position: absolute;
  bottom: var(--sp-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(196, 154, 78, 0.6);
  animation: scroll-bob 2.5s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* Vertical text en lateral (cinemático) */
.hero__vertical {
  position: absolute;
  right: var(--sp-sm);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(196, 154, 78, 0.5);
}
@media (max-width: 880px) { .hero__vertical { display: none; } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 1.15rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 500;
  transition: all var(--duration-med) var(--ease-out);
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.btn__arrow {
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--duration-med) var(--ease-out);
}
.btn__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn__arrow { width: 32px; }

.btn--gold {
  background: var(--oro-antiguo);
  color: var(--negro-profundo);
  border-color: var(--oro-antiguo);
}
.btn--gold:hover { background: var(--oro-claro); border-color: var(--oro-claro); }

.btn--ghost-light {
  background: transparent;
  color: var(--crema-marfil);
  border-color: rgba(242, 232, 213, 0.4);
}
.btn--ghost-light:hover {
  background: var(--crema-marfil);
  color: var(--negro-profundo);
  border-color: var(--crema-marfil);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--negro-profundo);
  border-color: rgba(31, 27, 22, 0.4);
}
.btn--ghost-dark:hover {
  background: var(--negro-profundo);
  color: var(--crema-marfil);
  border-color: var(--negro-profundo);
}

.btn--solid-dark {
  background: var(--negro-profundo);
  color: var(--crema-marfil);
  border-color: var(--negro-profundo);
}
.btn--solid-dark:hover { background: var(--oro-antiguo); color: var(--negro-profundo); border-color: var(--oro-antiguo); }

.btn--text {
  padding: 0.65rem 0;
  color: var(--oro-antiguo);
  border-bottom: 1px solid currentColor;
  background: transparent;
}
.btn--text:hover { color: var(--oro-claro); }

/* ============================================================
   ESCENAS — secciones tipo "capítulos de película"
   ============================================================ */
.scene {
  position: relative;
  padding: var(--sp-2xl) 0;
  overflow: hidden;
}
.scene--tight { padding: var(--sp-xl) 0; }
.scene--loose { padding: var(--sp-3xl) 0; }
.scene--dark { background: var(--negro-profundo); color: var(--crema-marfil); }
.scene--earth { background: var(--negro-tierra); color: var(--crema-marfil); }
.scene--light { background: var(--blanco-hueso); color: var(--negro-profundo); }
.scene--cream { background: var(--crema-marfil); color: var(--negro-profundo); }
.scene--light h1, .scene--light h2, .scene--light h3,
.scene--cream h1, .scene--cream h2, .scene--cream h3 { color: var(--negro-profundo); }
.scene--light em, .scene--cream em { color: var(--oro-antiguo); }

/* Número de capítulo gigante en marca de agua */
.scene__chapter-mark {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(8rem, 24vw, 22rem);
  line-height: 0.8;
  color: var(--oro-antiguo);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
}
.scene__chapter-mark--left { left: -2vw; }
.scene__chapter-mark--right { right: -2vw; }

.scene__inner { position: relative; z-index: 1; }

/* ============================================================
   ESCENA: PULL QUOTE / VERSO
   ============================================================ */
.verse {
  text-align: center;
  padding: var(--sp-2xl) 0;
}
.verse__inner {
  max-width: 28em;
  margin: 0 auto;
}
.verse__rule {
  width: 1px;
  height: 56px;
  background: var(--oro-antiguo);
  margin: 0 auto var(--sp-md);
}
.verse__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.85rem);
  line-height: 1.25;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.015em;
}
.verse__text em { color: var(--oro-antiguo); }
.verse__cite {
  display: block;
  margin-top: var(--sp-md);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.6);
}

/* ============================================================
   ESCENA: HISTORIA (split asimétrico)
   ============================================================ */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.story__visual {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: var(--negro-cuero);
  border: 1px solid rgba(196, 154, 78, 0.2);
}
.story__visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(242, 232, 213, 0.1);
  pointer-events: none;
}
.story__visual-tag {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.7);
}

.story__text h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-sm) 0 var(--sp-md);
}
.story__text p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(242, 232, 213, 0.78);
  margin-bottom: 1.2em;
  max-width: 30em;
}
.story__text p.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--crema-marfil);
  margin-bottom: var(--sp-md);
  font-weight: 300;
}
.story__text strong { color: var(--oro-claro); font-weight: 500; }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
  /* width:100% es imprescindible: como la foto va en position:absolute,
     sin un ancho explícito el margin auto colapsa el contenedor a 0 y la
     foto desaparece en móvil. */
  .story__visual { width: 100%; max-width: 440px; margin: 0 auto; }
}

/* ============================================================
   ESCENA: LIBROS (3 actos)
   ============================================================ */
.books-intro {
  text-align: center;
  max-width: 36em;
  margin: 0 auto var(--sp-2xl);
}
.books-intro h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-sm) 0;
}

.book-act {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: var(--sp-2xl) 0;
  border-top: 1px solid rgba(196, 154, 78, 0.15);
}
.book-act:first-of-type { border-top: none; padding-top: var(--sp-md); }
.book-act:nth-of-type(even) { grid-template-columns: 1.1fr 0.9fr; }
.book-act:nth-of-type(even) .book-act__visual { order: 2; }
.book-act:nth-of-type(even) .book-act__content { order: 1; }

.book-act__visual {
  position: relative;
  aspect-ratio: 2/3;
  max-width: 340px;
  margin: 0 auto;
  width: 100%;
  perspective: 1000px;
}
.book-act__visual-inner {
  position: absolute;
  inset: 0;
  background: var(--negro-profundo);
  --tlt-rx: 0deg; --tlt-ry: -4deg; --tlt-ty: 0rem; --tlt-tz: 0px;
  box-shadow:
    -2px 0 4px rgba(0, 0, 0, 0.4),
    0 40px 80px -20px rgba(15, 13, 10, 0.7),
    0 12px 24px -8px rgba(15, 13, 10, 0.5);
  transform: rotateX(var(--tlt-rx)) rotateY(var(--tlt-ry)) translate3d(0, var(--tlt-ty), var(--tlt-tz));
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-out);
  overflow: hidden;
}
.book-act:hover .book-act__visual-inner {
  --tlt-ry: 0deg; --tlt-ty: -0.5rem; --tlt-tz: 24px;
  box-shadow:
    0 0 0 1px rgba(196, 154, 78, 0.45),
    0 36px 84px -22px rgba(0, 0, 0, 0.85),
    0 14px 30px -10px rgba(0, 0, 0, 0.6),
    0 0 60px -8px rgba(196, 154, 78, 0.28);
}

.book-act__act-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 300;
  color: var(--oro-antiguo);
  line-height: 1;
  margin-bottom: var(--sp-sm);
  opacity: 0.85;
}
.book-act__act-label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(196, 154, 78, 0.6);
  margin-bottom: var(--sp-xs);
}
.book-act__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-sm);
  line-height: 1.02;
}
.book-act__desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(242, 232, 213, 0.7);
  margin-bottom: var(--sp-md);
  max-width: 32em;
}
.scene--light .book-act__desc,
.scene--cream .book-act__desc { color: rgba(31, 27, 22, 0.75); }
.scene--light .book-act__act-label,
.scene--cream .book-act__act-label { color: var(--marron-roble); }

.book-act__cta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 880px) {
  .book-act,
  .book-act:nth-of-type(even) {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .book-act:nth-of-type(even) .book-act__visual { order: 0; }
  .book-act:nth-of-type(even) .book-act__content { order: 0; }
  .book-act__visual { max-width: 240px; }
  .book-act__desc { margin-left: auto; margin-right: auto; }
  .book-act__cta { justify-content: center; }
}

/* Placeholder de portada */
.cover-placeholder {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(196, 154, 78, 0.08), transparent 60%),
    linear-gradient(180deg, #2a241d 0%, #1a1612 70%, #100d0a 100%);
}
.cover-placeholder::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 0.5px solid rgba(196, 154, 78, 0.3);
}
.cover-placeholder__brand {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(196, 154, 78, 0.75);
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
}
.cover-placeholder__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--crema-marfil);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  padding: 0 0.5rem;
}
.cover-placeholder__divider {
  width: 28px;
  height: 1px;
  background: var(--oro-antiguo);
  margin: 1rem 0;
}
.cover-placeholder__author {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(242, 232, 213, 0.7);
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
}

/* ============================================================
   ESCENA: CASA 48 (escena central)
   ============================================================ */
.casa48 {
  position: relative;
  padding: var(--sp-3xl) 0;
  overflow: hidden;
}
.casa48__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(196, 154, 78, 0.1) 0%, transparent 60%),
    var(--negro-profundo);
}
.casa48__door {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  pointer-events: none;
}
.casa48__door-number {
  font-family: var(--font-display);
  font-size: clamp(20rem, 50vw, 42rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.8;
  color: var(--oro-antiguo);
  opacity: 0.13;
  letter-spacing: -0.08em;
}
.casa48__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--sp-md);
}
.casa48__content h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-md) 0;
  line-height: 1;
}
.casa48__content p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(242, 232, 213, 0.75);
  margin: 0 auto 1.25em;
  max-width: 28em;
}
.casa48__content p strong {
  color: var(--oro-claro);
  font-weight: 500;
}

.casa48__form {
  margin-top: var(--sp-md);
}
.signup-row {
  display: flex;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid rgba(196, 154, 78, 0.4);
  background: rgba(31, 27, 22, 0.5);
  transition: border-color var(--duration-fast);
}
.signup-row:focus-within { border-color: var(--oro-antiguo); background: rgba(31, 27, 22, 0.7); }
.signup-row input {
  flex: 1;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--crema-marfil);
  font-family: var(--font-body);
}
.signup-row input::placeholder { color: rgba(242, 232, 213, 0.4); }
.signup-row button {
  background: var(--oro-antiguo);
  color: var(--negro-profundo);
  padding: 0 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  transition: background var(--duration-fast);
  white-space: nowrap;
}
.signup-row button:hover { background: var(--oro-claro); }

.signup-note {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(196, 154, 78, 0.5);
}

@media (max-width: 600px) {
  .signup-row { flex-direction: column; }
  .signup-row button { padding: 1rem; }
}

/* ============================================================
   ESCENA: CARTA PERSONAL
   ============================================================ */
.letter {
  background: var(--negro-tierra);
  padding: var(--sp-3xl) 0;
  position: relative;
  overflow: hidden;
}
.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(196, 154, 78, 0.1), transparent 70%);
}
.letter__inner {
  max-width: var(--container-text);
  margin: 0 auto;
  position: relative;
  padding: 0 var(--sp-md);
}
.letter__seal {
  text-align: center;
  margin-bottom: var(--sp-md);
}
.letter__seal-text {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--oro-antiguo);
  padding: 0.5rem 1.5rem;
  border: 1px solid rgba(196, 154, 78, 0.3);
}
.letter h2 {
  text-align: center;
  font-size: var(--fs-h1);
  margin: 0 0 var(--sp-lg);
  line-height: 1;
}
.letter p {
  font-size: 1.18rem;
  line-height: 1.85;
  color: rgba(242, 232, 213, 0.82);
  margin-bottom: 1.5em;
}
.letter p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.5em;
  float: left;
  line-height: 0.8;
  padding: 0.1em 0.1em 0 0;
  color: var(--oro-antiguo);
  font-weight: 300;
  font-style: italic;
}
.letter__signature {
  margin-top: var(--sp-lg);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--oro-claro);
  font-weight: 300;
}
.letter__signature small {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.5);
}

/* ============================================================
   ESCENA: CONFERENCIAS
   ============================================================ */
.speaking {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.speaking__intro h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-sm) 0 var(--sp-md);
}
.speaking__intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(242, 232, 213, 0.75);
  margin-bottom: 1.2em;
}

.topics-list {
  border-top: 1px solid rgba(196, 154, 78, 0.15);
}
.topic {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid rgba(196, 154, 78, 0.12);
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.5rem;
  align-items: baseline;
  transition: padding var(--duration-fast);
}
.topic:hover { padding-left: 0.5rem; }
.topic__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--oro-antiguo);
  font-weight: 300;
}
.topic__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
  line-height: 1.15;
}
.topic__desc {
  font-size: 0.95rem;
  color: rgba(242, 232, 213, 0.6);
  line-height: 1.6;
}

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

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--negro-profundo);
  color: rgba(242, 232, 213, 0.6);
  padding: var(--sp-2xl) 0 var(--sp-md);
  border-top: 1px solid rgba(196, 154, 78, 0.15);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--crema-marfil);
  margin-bottom: 0.4rem;
  line-height: 1;
  font-weight: 400;
}
.footer__brand-dot { color: var(--oro-antiguo); }
.footer__brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--oro-antiguo);
  margin-top: 8px;
}
.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(242, 232, 213, 0.65);
  margin-top: var(--sp-sm);
  max-width: 22em;
  line-height: 1.4;
  font-weight: 300;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--oro-antiguo);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer__col a {
  font-size: 0.95rem;
  color: rgba(242, 232, 213, 0.65);
  transition: color var(--duration-fast);
}
.footer__col a:hover { color: var(--oro-antiguo); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-md);
  border-top: 1px solid rgba(196, 154, 78, 0.12);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(242, 232, 213, 0.4);
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .footer__brand-col { grid-column: 1 / -1; }
}

/* ============================================================
   ANIMACIONES — Reveal cinemático
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slow) var(--ease-cinema),
    transform var(--duration-slow) var(--ease-cinema);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 250ms; }
.reveal--delay-3 { transition-delay: 400ms; }
.reveal--delay-4 { transition-delay: 600ms; }

/* Entrada cinemática del hero — sin esperar scroll */
.hero__chapter,
.hero__title,
.hero__lead,
.hero__ctas {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter 1400ms var(--ease-cinema) forwards;
}
.hero__chapter { animation-delay: 400ms; }
.hero__title { animation-delay: 600ms; }
.hero__lead { animation-delay: 900ms; }
.hero__ctas { animation-delay: 1200ms; }
.hero__meta { opacity: 0; animation: hero-enter 1400ms var(--ease-cinema) forwards; animation-delay: 1500ms; }

@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PÁGINAS DE LIBRO — LANDINGS
   ============================================================ */
.book-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 9rem 0 var(--sp-xl);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.book-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(196, 154, 78, 0.15), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(92, 74, 50, 0.12), transparent 50%),
    var(--negro-profundo);
  z-index: 0;
}
.book-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.book-hero__cover {
  aspect-ratio: 2/3;
  max-width: 400px;
  margin: 0 auto;
  perspective: 1200px;
}
.book-hero__cover-inner {
  position: absolute;
  inset: 0;
  background: var(--negro-profundo);
  --tlt-rx: 0deg; --tlt-ry: -6deg; --tlt-ty: 0rem; --tlt-tz: 0px;
  box-shadow:
    -3px 0 6px rgba(0, 0, 0, 0.5),
    0 50px 100px -25px rgba(15, 13, 10, 0.8),
    0 16px 32px -10px rgba(15, 13, 10, 0.6);
  transform: rotateX(var(--tlt-rx)) rotateY(var(--tlt-ry)) translate3d(0, var(--tlt-ty), var(--tlt-tz));
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-out);
}
.book-hero__cover:hover .book-hero__cover-inner {
  --tlt-ry: 0deg; --tlt-ty: -0.6rem; --tlt-tz: 28px;
  box-shadow:
    0 0 0 1px rgba(196, 154, 78, 0.45),
    0 46px 100px -26px rgba(0, 0, 0, 0.85),
    0 16px 34px -12px rgba(0, 0, 0, 0.6),
    0 0 70px -8px rgba(196, 154, 78, 0.3);
}

.book-hero h1 {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: var(--sp-sm) 0 var(--sp-sm);
  font-weight: 300;
}
.book-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: rgba(242, 232, 213, 0.8);
  margin-bottom: var(--sp-md);
  max-width: 28em;
  line-height: 1.4;
}
.book-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 880px) {
  .book-hero { padding: 7rem 0 var(--sp-md); }
  .book-hero__grid { grid-template-columns: 1fr; }
  .book-hero__cover { max-width: 280px; order: -1; }
}

/* Scene: para ti si */
.for-you {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.for-you__intro h2 {
  font-size: var(--fs-h1);
  line-height: 1;
}
.for-you__list {
  border-top: 1px solid rgba(31, 27, 22, 0.2);
}
.scene--dark .for-you__list,
.scene--earth .for-you__list { border-color: rgba(196, 154, 78, 0.15); }
.for-you__item {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(31, 27, 22, 0.2);
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.scene--dark .for-you__item,
.scene--earth .for-you__item { border-color: rgba(196, 154, 78, 0.12); }
.for-you__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--oro-antiguo);
  font-style: italic;
  font-weight: 300;
}
.for-you__text {
  font-size: 1.15rem;
  line-height: 1.6;
}
@media (max-width: 880px) { .for-you { grid-template-columns: 1fr; } }

/* Extracto */
.excerpt-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.excerpt__rule {
  width: 1px;
  height: 48px;
  background: var(--oro-antiguo);
  margin: 0 auto var(--sp-md);
}
.excerpt__text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.45;
  font-style: italic;
  font-weight: 300;
  margin: var(--sp-md) 0;
  text-align: left;
}
.excerpt__text p { margin-bottom: 1.2em; }
.excerpt__from {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(196, 154, 78, 0.6);
  margin-top: var(--sp-md);
}

/* Author block en landing */
.author-on-landing {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.author-on-landing__photo {
  aspect-ratio: 4/5;
  background: var(--negro-cuero);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 78, 0.2);
}
.author-on-landing__photo::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(242, 232, 213, 0.1);
  pointer-events: none;
}
.author-on-landing__text h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-sm);
}
.author-on-landing__text p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(242, 232, 213, 0.78);
  margin-bottom: 1.2em;
}
@media (max-width: 880px) {
  .author-on-landing { grid-template-columns: 1fr; }
  /* width:100% evita que el margin auto colapse la foto (hijos absolutos). */
  .author-on-landing__photo { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* CTA final */
.final-cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.final-cta-inner h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-sm) 0;
  line-height: 1;
}
.final-cta-inner p {
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-md);
  color: rgba(31, 27, 22, 0.75);
}
.scene--dark .final-cta-inner p,
.scene--earth .final-cta-inner p { color: rgba(242, 232, 213, 0.78); }
.final-cta-inner__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PÁGINA CONTACTO
   ============================================================ */
.page-hero {
  position: relative;
  padding: 9rem 0 var(--sp-xl);
  background: var(--negro-tierra);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(196, 154, 78, 0.1), transparent 60%);
}
.page-hero__content { position: relative; z-index: 1; max-width: 800px; }
.page-hero h1 {
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: var(--sp-sm) 0 var(--sp-md);
  font-weight: 300;
}
.page-hero p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: rgba(242, 232, 213, 0.8);
  max-width: 32em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form {
  display: grid;
  gap: var(--sp-sm);
}
.contact-form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form__field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oro-antiguo);
  font-weight: 500;
}
.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  background: rgba(31, 27, 22, 0.4);
  border: 1px solid rgba(196, 154, 78, 0.25);
  padding: 1rem 1.2rem;
  font-size: 1rem;
  transition: all var(--duration-fast);
  font-family: inherit;
  width: 100%;
  color: var(--crema-marfil);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: rgba(242, 232, 213, 0.35); }
.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
  outline: none;
  border-color: var(--oro-antiguo);
  background: rgba(31, 27, 22, 0.7);
}
.contact-form__field textarea { min-height: 180px; resize: vertical; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-sidebar {
  border-left: 1px solid rgba(196, 154, 78, 0.2);
  padding-left: var(--sp-md);
}
@media (max-width: 880px) {
  .contact-sidebar { border-left: none; padding-left: 0; border-top: 1px solid rgba(196, 154, 78, 0.2); padding-top: var(--sp-md); }
}
.contact-sidebar h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--oro-antiguo);
  margin-bottom: var(--sp-sm);
  font-weight: 500;
}
.email-list { display: flex; flex-direction: column; gap: 1.5rem; }
.email-item {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(196, 154, 78, 0.12);
}
.email-item:last-child { border-bottom: none; }
.email-item__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  color: var(--crema-marfil);
}
.email-item__desc {
  font-size: 0.88rem;
  color: rgba(242, 232, 213, 0.55);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.email-item__addr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--oro-antiguo);
  letter-spacing: 0.02em;
  transition: color var(--duration-fast);
}
.email-item__addr:hover { color: var(--oro-claro); }

/* ============================================================
   PÁGINA SOBRE MÍ
   ============================================================ */
.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.about-hero__photo {
  aspect-ratio: 3/4;
  background: var(--negro-cuero);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 78, 0.2);
}
.about-hero__photo::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(242, 232, 213, 0.1);
  pointer-events: none;
}
@media (max-width: 880px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  /* width:100% evita que el margin auto colapse la foto (hijos absolutos). */
  .about-hero__photo { width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 4/5; }
}

.long-form {
  max-width: var(--container-text);
  margin: 0 auto;
}
.long-form p {
  font-size: 1.18rem;
  line-height: 1.9;
  margin-bottom: 1.4em;
}
.long-form p.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--oro-claro);
  margin-bottom: 1.5em;
  font-weight: 300;
}
.long-form h2 {
  font-size: var(--fs-h2);
  margin: var(--sp-xl) 0 var(--sp-md);
  line-height: 1;
}
.long-form .drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 5em;
  float: left;
  line-height: 0.8;
  padding: 0.1em 0.12em 0 0;
  color: var(--oro-antiguo);
  font-weight: 300;
  font-style: italic;
}
.long-form strong { color: var(--oro-claro); font-weight: 500; }
.long-form__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--oro-claro);
  margin: var(--sp-lg) 0;
  padding: 0.2em 0 0.2em 1.4rem;
  border-left: 2px solid var(--oro-antiguo);
  font-weight: 300;
}

/* ============================================================
   PLACEHOLDER VISUAL
   ============================================================ */
.photo-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(242, 232, 213, 0.04),
      rgba(242, 232, 213, 0.04) 1px,
      transparent 1px,
      transparent 18px
    ),
    linear-gradient(135deg, #2a241d 0%, #1a1612 100%);
}
.photo-placeholder__content {
  text-align: center;
  padding: 1.5rem;
}
.photo-placeholder__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 1px solid rgba(196, 154, 78, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 154, 78, 0.6);
}
.photo-placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: rgba(242, 232, 213, 0.45);
  line-height: 1.6;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-center { text-align: center; }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__chapter, .hero__title, .hero__lead, .hero__ctas, .hero__meta { opacity: 1; transform: none; animation: none; }
  .hero__background-image { animation: none; }
}

/* ============================================================
   v2.1 — REFINAMIENTOS DE CRAFT (Emil Kowalski) + FOTOS REALES
   ============================================================ */

/* --- Curvas fuertes para micro-interacciones --- */
:root {
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;
  --dur-hover: 220ms;
}

/* --- Botones: propiedades explícitas + feedback al presionar --- */
.btn {
  transition:
    background-color var(--dur-hover) var(--ease-snap),
    color var(--dur-hover) var(--ease-snap),
    border-color var(--dur-hover) var(--ease-snap),
    transform var(--dur-press) var(--ease-snap),
    box-shadow var(--dur-hover) var(--ease-snap);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn__arrow { transition: width var(--dur-hover) var(--ease-snap); }
.btn--gold:hover { box-shadow: 0 10px 30px -10px rgba(196,154,78,0.5); }
.btn--solid-dark:hover { box-shadow: 0 10px 30px -12px rgba(196,154,78,0.45); }

.nav__cta {
  transition:
    background-color var(--dur-hover) var(--ease-snap),
    color var(--dur-hover) var(--ease-snap),
    border-color var(--dur-hover) var(--ease-snap),
    transform var(--dur-press) var(--ease-snap);
}
.nav__cta:active { transform: scale(0.96); }
.btn--text { transition: color var(--dur-hover) var(--ease-snap); }

/* --- Nav links: subrayado que crece desde el origen --- */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--oro-antiguo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-snap);
}
.nav__link:hover::after { transform: scaleX(1); }

/* --- Accesibilidad: foco visible con anillo dorado --- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Reveal un punto más ágil (sigue siendo fílmico) --- */
.reveal {
  transition:
    opacity 900ms var(--ease-cinema),
    transform 900ms var(--ease-cinema);
}

/* --- Formulario Casa 48 / contacto: press feedback --- */
.casa48__form button:active,
.signup-row button:active,
form[data-form] button:active { transform: scale(0.97); }
.casa48__form button, .signup-row button, form[data-form] button {
  transition: background-color var(--dur-hover) var(--ease-snap),
              color var(--dur-hover) var(--ease-snap),
              transform var(--dur-press) var(--ease-snap);
}

/* ============================================================
   FOTOS REALES — estilado
   ============================================================ */

/* HERO a pantalla completa */
img.hero__background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  background: var(--negro-tierra);
  animation: hero-pan 32s ease-in-out infinite alternate;
}

/* utilidad: foto que rellena su contenedor */
.fill-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Foto de la sección historia (mantiene el marco interior dorado) */
.story__visual .fill-photo { z-index: 0; }
.story__visual::after { z-index: 1; }
.story__visual-tag { z-index: 2; }
.story__visual { background: var(--negro-cuero); }
.story__visual .fill-photo {
  transition: transform 1400ms var(--ease-cinema), filter 1400ms var(--ease-cinema);
  transform: scale(1.02);
  filter: saturate(0.96);
}
.story:hover .story__visual .fill-photo { transform: scale(1.06); }

/* Portadas reales de libros dentro del visual 3D */
.book-act__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Casa 48 — portada flotante junto al contenido */
.casa48 { overflow: hidden; }
.casa48__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}
.casa48__cover-wrap {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: min(72vw, 21rem);
  aspect-ratio: 2 / 3;
  --tlt-rx: 0deg; --tlt-ry: 0deg;
  perspective: var(--depth-perspective, 1200px);
  box-shadow:
    0 50px 90px -25px rgba(0,0,0,0.85),
    0 16px 36px -14px rgba(0,0,0,0.6);
  transform: rotate(-2deg) rotateX(var(--tlt-rx)) rotateY(var(--tlt-ry));
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--dur-cover, 600ms) var(--ease-snap);
  border: 1px solid rgba(196,154,78,0.18);
}
.casa48__cover-wrap:hover {
  transform: rotate(0deg) rotateX(var(--tlt-rx)) rotateY(var(--tlt-ry)) translateY(-0.4rem);
  box-shadow:
    0 0 0 1px rgba(196, 154, 78, 0.4),
    0 50px 96px -26px rgba(0,0,0,0.88),
    0 16px 36px -14px rgba(0,0,0,0.6),
    0 0 70px -10px rgba(196, 154, 78, 0.26);
}
.casa48__cover-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.casa48__cover-tag {
  position: absolute;
  bottom: -10px; right: -10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--negro-profundo);
  background: var(--oro-antiguo);
  padding: 0.5rem 0.8rem;
}
.casa48__content { text-align: left; margin: 0; }
@media (max-width: 880px) {
  .casa48__inner { grid-template-columns: 1fr; text-align: center; }
  .casa48__cover-wrap { max-width: 260px; }
  .casa48__content { text-align: center; }
}

/* Foto autor en about / landing de libros */
.about-hero__photo .fill-photo,
.author-on-landing__photo .fill-photo { z-index: 0; }

.book-hero__cover-inner, .book-act__visual-inner { overflow: hidden; }

/* Portada clicable hacia Amazon en landings de libro */
.book-hero__cover-link { position:absolute; inset:0; z-index:3; display:block; }
.book-hero__cover-link:focus-visible { outline:2px solid var(--oro-claro); outline-offset:4px; }

/* Figura editorial dentro del texto largo (sobre-mi) */
.longform-figure {
  margin: var(--sp-lg) auto;
  max-width: 320px;
}
.longform-figure picture { display:block; position:relative; }
.longform-figure img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid rgba(196,154,78,0.2);
  filter: saturate(0.92) contrast(1.02);
}
.longform-figure figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-piedra);
  text-align: center;
}

/* ============================================================
   v2.2 — PRUEBA SOCIAL · RESEÑAS · REFLEXIONES
   ============================================================ */
.hero__scroll-cue { font-size: 1.1rem; }

.proof {
  background: var(--negro-tierra);
  border-top: 1px solid rgba(196,154,78,0.14);
  border-bottom: 1px solid rgba(196,154,78,0.14);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.proof__inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem); flex-wrap: wrap; text-align: center;
}
.proof__item { display: flex; flex-direction: column; gap: 0.4rem; min-width: 140px; }
.proof__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 400; line-height: 1; color: var(--oro-claro); letter-spacing: -0.03em;
}
.proof__star { font-size: 0.55em; vertical-align: super; color: var(--oro-antiguo); }
.proof__label {
  font-family: var(--font-mono); font-size: var(--fs-tiny);
  text-transform: uppercase; letter-spacing: 0.22em; color: rgba(242,232,213,0.62);
}
.proof__divider { width: 1px; height: 56px; background: rgba(196,154,78,0.22); }
@media (max-width: 700px) { .proof__divider { display: none; } .proof__inner { gap: 2rem; } }

.book-act__rating {
  font-family: var(--font-mono); font-size: var(--fs-tiny);
  letter-spacing: 0.12em; color: rgba(242,232,213,0.7);
  margin: 0.4rem 0 1rem; text-transform: uppercase;
}
.book-act__rating .stars, .review-card__stars, .reviews__badge { color: var(--oro-claro); letter-spacing: 0.1em; }

.reviews__intro { max-width: 40em; margin: 0 auto var(--sp-xl); text-align: center; }
.reviews__intro h2 { font-size: var(--fs-h1); margin: var(--sp-sm) 0 var(--sp-md); }
.reviews__badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-tiny);
  text-transform: uppercase; letter-spacing: 0.18em; color: rgba(242,232,213,0.8);
  border: 1px solid rgba(196,154,78,0.3); padding: 0.6rem 1.1rem;
}
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.review-card {
  background: var(--negro-cuero); border: 1px solid rgba(196,154,78,0.16);
  padding: clamp(1.6rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem;
  transition: transform var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap);
}
.review-card:hover { transform: translateY(-4px); border-color: rgba(196,154,78,0.4); }
.review-card__stars { font-size: 0.95rem; }
.review-card blockquote {
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem;
  line-height: 1.45; color: var(--crema-marfil); font-weight: 300;
}
.review-card figcaption {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--oro-antiguo); margin-top: auto;
}
.review-card figcaption span { color: rgba(242,232,213,0.45); }

.reflexiones-teaser__head { max-width: 40em; }
.reflexiones-teaser__head h2 { font-size: var(--fs-h1); margin: var(--sp-sm) 0 var(--sp-sm); }
.reflexiones-teaser__head p { color: rgba(242,232,213,0.75); font-size: var(--fs-lead); max-width: 32em; }
.reflexiones-teaser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); margin: var(--sp-xl) 0 var(--sp-lg); }
.reflexion-card {
  display: block; background: rgba(15,13,10,0.5); border: 1px solid rgba(196,154,78,0.16);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  transition: transform var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap), background var(--dur-hover) var(--ease-snap);
}
.reflexion-card:hover { transform: translateY(-5px); border-color: rgba(196,154,78,0.45); background: var(--negro-cuero); }
.reflexion-card__tag { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.2em; color: var(--oro-antiguo); }
.reflexion-card h3 { font-size: 1.6rem; margin: 0.8rem 0 0.6rem; line-height: 1.05; }
.reflexion-card p { color: rgba(242,232,213,0.72); font-size: 1rem; line-height: 1.6; }
.reflexion-card__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.2rem; font-family: var(--font-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.2em; color: var(--oro-claro); }
.reflexiones-teaser__cta { margin-top: var(--sp-md); }

/* Blog · páginas */
.article-hero { padding: clamp(8rem, 14vh, 11rem) 0 var(--sp-lg); text-align: center; border-bottom: 1px solid rgba(196,154,78,0.14); position: relative; }
.article-hero__inner { max-width: var(--container-text); margin: 0 auto; padding: 0 var(--sp-md); }
.article-hero h1 { font-size: var(--fs-h1); line-height: 1.0; margin: var(--sp-sm) 0 var(--sp-sm); font-weight: 300; }
.article-hero h1 em { font-style: italic; color: var(--oro-antiguo); }
.article__meta { font-family: var(--font-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.2em; color: rgba(242,232,213,0.5); }
.article-body { padding: var(--sp-xl) 0 var(--sp-2xl); }
.article-body .pull { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.35; color: var(--oro-claro); text-align: center; margin: var(--sp-lg) 0; font-weight: 300; }
.article-body .verse { text-align: center; font-weight: 500; color: var(--crema-marfil); margin: var(--sp-lg) auto; max-width: 30em; }
.article-cta { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid rgba(196,154,78,0.16); text-align: center; }
.blog-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); max-width: var(--container-narrow); margin: 0 auto; }

/* ============================================================
   v2.3 — PULIDO EMIL KOWALSKI
   Detalles invisibles. Nada de estructura nueva, solo cómo se siente.
   ============================================================ */

:root {
  /* Curva drawer iOS (Ionic) para superficies que entran/salen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-drawer: 460ms;
  --dur-cover: 600ms;
}

/* El contenedor del hero es el que recibe el parallax (lo mueve el JS).
   La imagen conserva su animación Ken Burns sin conflicto. */
.hero__background { will-change: transform; }

/* 1. Menú móvil — 1200ms se sentía perezoso en algo que abres a diario.
   Drawer rápido + los enlaces entran escalonados (stagger corto). */
@media (max-width: 880px) {
  .nav__links {
    transition: transform var(--dur-drawer) var(--ease-drawer);
  }
  .nav.is-open .nav__link,
  .nav.is-open .nav__cta {
    animation: nav-item-in var(--dur-drawer) var(--ease-snap) backwards;
  }
  .nav.is-open .nav__links li:nth-child(1) .nav__link { animation-delay: 90ms; }
  .nav.is-open .nav__links li:nth-child(2) .nav__link { animation-delay: 135ms; }
  .nav.is-open .nav__links li:nth-child(3) .nav__link { animation-delay: 180ms; }
  .nav.is-open .nav__links li:nth-child(4) .nav__link { animation-delay: 225ms; }
  .nav.is-open .nav__links li:nth-child(5) .nav__link { animation-delay: 270ms; }
  .nav.is-open .nav__links li:nth-child(6) .nav__cta  { animation-delay: 315ms; }
}
@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. Inputs de contacto — propiedades explícitas, nunca `all`. */
.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  transition: border-color var(--dur-hover) var(--ease-snap),
              background-color var(--dur-hover) var(--ease-snap);
}

/* 3. Hover de portadas — responde antes (1200ms -> 600ms). */
.book-act__visual-inner,
.book-hero__cover-inner,
.casa48__cover-wrap {
  transition: transform var(--dur-cover) var(--ease-snap),
              box-shadow var(--dur-cover) var(--ease-snap);
}

/* 4. Anclas que aterrizan limpio bajo la barra fija. */
[id] { scroll-margin-top: 92px; }

/* 5. Las tarjetas-enlace confirman el toque al presionar. */
.reflexion-card:active { transform: translateY(-2px) scale(0.995); }

/* 6. Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav__link,
  .nav.is-open .nav__cta { animation: none !important; }
  .hero__background { transform: none !important; }
}

/* ============================================================
   v2.4 — SMOOTH SCROLL (Lenis) + MOMENTO ESTRELLA "48"
   ============================================================ */

/* CSS base que Lenis necesita (añade las clases .lenis a <html>) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* La puerta del Número 48: marca de agua estática -> momento que se abre.
   Va bajo `html.js` para degradar con gracia: sin JS, se ve normal. */
html.js .casa48__door-number {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(8px);
  transition:
    opacity 1500ms var(--ease-cinema),
    transform 1700ms var(--ease-cinema),
    filter 1500ms var(--ease-cinema);
}
html.js .casa48.is-open .casa48__door-number {
  opacity: 0.16;
  transform: scale(1);
  filter: blur(0);
}

/* Resplandor dorado que florece detrás del número al abrirse */
.casa48__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(196, 154, 78, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 1900ms var(--ease-cinema);
  pointer-events: none;
}
html.js .casa48.is-open .casa48__bg::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .casa48__door-number {
    opacity: 0.13;
    transform: none;
    filter: none;
    transition: none;
  }
  .casa48__bg::after { display: none; }
}

/* ============================================================
   v2.5 — CASA 48 (lanzamiento) · TESTIMONIOS DE REDES ·
           CONTRASTE DE VALORACIÓN · TEMAS SIN NÚMEROS
   ============================================================ */

/* 1. Valoración: en escenas claras la crema se perdía sobre el blanco. */
.scene--light .book-act__rating,
.scene--cream .book-act__rating { color: rgba(31, 27, 22, 0.78); }
.scene--light .book-act__rating .stars,
.scene--cream .book-act__rating .stars { color: var(--oro-antiguo); }

/* 2. Libro destacado: badge de pre-venta sobre la portada. */
.book-act__visual { position: relative; }
.book-act__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--negro-profundo);
  background: var(--oro-antiguo);
  padding: 0.4rem 0.7rem;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.book-act__rating--feature {
  color: var(--oro-claro);
  text-transform: none;
  letter-spacing: 0.03em;
  font-style: normal;
}
.scene--light .book-act__rating--feature,
.scene--cream .book-act__rating--feature { color: var(--marron-roble); }

/* 3. Temas de conferencia: ya no hay número romano -> una sola columna. */
.topic { grid-template-columns: 1fr; }

/* 4. Testimonios de redes (placeholders hasta tener comentarios reales). */
.social-proof__intro { max-width: 40em; margin: 0 auto var(--sp-xl); text-align: center; }
.social-proof__intro h2 { font-size: var(--fs-h1); margin: var(--sp-sm) 0 var(--sp-md); }
.social-proof__intro p {
  color: rgba(242, 232, 213, 0.72);
  font-size: var(--fs-lead);
  max-width: 30em;
  margin: 0 auto;
}
.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.social-card {
  background: rgba(15, 13, 10, 0.45);
  border: 1px solid rgba(196, 154, 78, 0.16);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition:
    transform var(--dur-hover) var(--ease-snap),
    border-color var(--dur-hover) var(--ease-snap),
    background var(--dur-hover) var(--ease-snap);
}
.social-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 154, 78, 0.4);
  background: var(--negro-cuero);
}
.social-card__head { display: flex; align-items: center; gap: 0.8rem; }
.social-card__avatar {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 154, 78, 0.4);
  border-radius: 50%;
  color: var(--oro-antiguo);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.social-card__id { display: flex; flex-direction: column; gap: 2px; }
.social-card__handle { font-family: var(--font-body); font-size: 0.95rem; color: var(--crema-marfil); }
.social-card__src {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(196, 154, 78, 0.7);
}
.social-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.82);
  font-weight: 300;
}
.social-proof__note {
  margin: var(--sp-lg) auto 0;
  max-width: 46em;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: rgba(196, 154, 78, 0.5);
}

/* ============================================================
   v2.6 — MURO DE RESEÑAS: SCROLL NETFLIX + VALORACIÓN + MODAL
   ============================================================ */

.reviews-wall { padding: var(--sp-2xl) 0; }
.reviews-wall__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
  margin-bottom: var(--sp-xl);
}
.reviews-wall__intro h2 { font-size: var(--fs-h1); margin-top: var(--sp-sm); }
.reviews-wall__meta { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); flex-wrap: wrap; }

.rating-badge { display: flex; align-items: center; gap: 1rem; }
.rating-badge__big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.9;
  color: var(--oro-claro);
  letter-spacing: -0.03em;
}
.rating-badge__lines { display: flex; flex-direction: column; gap: 0.35rem; }
.rating-badge__stars { color: var(--oro-claro); letter-spacing: 0.12em; font-size: 0.95rem; }
.rating-badge__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(242, 232, 213, 0.6);
  max-width: 22em;
  line-height: 1.5;
}

/* --- Scroll continuo tipo Netflix --- */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  padding: 0.5rem clamp(0.5rem, 2vw, 1.5rem);
  animation: marquee-scroll 64s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rev-card {
  flex: 0 0 auto;
  width: clamp(270px, 80vw, 350px);
  background: var(--negro-cuero);
  border: 1px solid rgba(196, 154, 78, 0.16);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color var(--dur-hover) var(--ease-snap), transform var(--dur-hover) var(--ease-snap);
}
.rev-card:hover { border-color: rgba(196, 154, 78, 0.4); transform: translateY(-4px); }
.rev-card__stars { color: var(--oro-claro); letter-spacing: 0.1em; font-size: 0.9rem; }
.rev-card__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: rgba(242, 232, 213, 0.88);
  font-weight: 300;
}
.rev-card__who {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro-antiguo);
}
.rev-card__who span { color: rgba(242, 232, 213, 0.45); }

/* --- Modal de reseña --- */
.review-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 520px;
  width: calc(100% - 2rem);
  margin: auto;
  overflow: visible;
}
.review-dialog::backdrop {
  background: rgba(15, 13, 10, 0.72);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.review-dialog[open] { animation: dialog-in 320ms var(--ease-snap); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.review-form {
  position: relative;
  background: var(--negro-tierra);
  border: 1px solid rgba(196, 154, 78, 0.3);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}
.review-form h3 { font-size: var(--fs-h3); margin-top: 0.25rem; }
.review-form__sub { color: rgba(242, 232, 213, 0.7); font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.25rem; }
.review-dialog__close {
  position: absolute;
  top: 0.9rem; right: 1rem;
  font-size: 1.1rem;
  color: rgba(242, 232, 213, 0.6);
  transition: color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}
.review-dialog__close:hover { color: var(--oro-claro); }
.review-dialog__close:active { transform: scale(0.9); }
.review-form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.review-form__field label, .review-form__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oro-antiguo);
}
.review-form input, .review-form textarea {
  background: rgba(15, 13, 10, 0.5);
  border: 1px solid rgba(196, 154, 78, 0.25);
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--crema-marfil);
  font-family: var(--font-body);
  transition: border-color var(--dur-hover) var(--ease-snap), background-color var(--dur-hover) var(--ease-snap);
}
.review-form input:focus, .review-form textarea:focus {
  outline: none;
  border-color: var(--oro-antiguo);
  background: rgba(15, 13, 10, 0.75);
}
.review-form textarea { resize: vertical; }
.review-form__submit { justify-content: center; margin-top: 0.5rem; }
.review-form__legal {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(196, 154, 78, 0.5);
  text-align: center;
  line-height: 1.5;
}

/* --- Selector de estrellas --- */
.star-input { display: inline-flex; gap: 0.35rem; }
.star-input__star {
  font-size: 1.85rem;
  line-height: 1;
  color: rgba(242, 232, 213, 0.25);
  transition: color 120ms var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}
.star-input__star:hover { transform: scale(1.12); }
.star-input__star.is-on { color: var(--oro-claro); }

@media (max-width: 600px) {
  .reviews-wall__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .marquee__track { animation: none; }
  .review-dialog[open] { animation: none; }
}

/* ============================================================
   v2.7 — FIX: menú móvil colapsado al hacer scroll
   El backdrop-filter en .nav creaba un bloque contenedor que
   encogía el menú fijo (inset:0) a la altura de la barra.
   Movemos el fondo+desenfoque a un pseudo-elemento.
   ============================================================ */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none;
  transition:
    background var(--duration-med) var(--ease-cinema),
    backdrop-filter var(--duration-med) var(--ease-cinema);
}
.nav.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.nav.is-scrolled::before {
  background: rgba(15, 13, 10, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
          backdrop-filter: blur(20px) saturate(120%);
}

/* ============================================================
   v2.8 — Reseñas: Amazon (oro) separadas de las valoraciones
   escritas en la web (otro color), insignia de seguidor de
   Instagram, moderación con mensaje sagrado, y valorar blog.
   ============================================================ */

/* --- Filas etiquetadas (Amazon vs. web) --- */
.reviews-row { margin-top: var(--sp-lg); }
.reviews-row:first-of-type { margin-top: 0; }
.reviews-row__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 1rem clamp(1rem, 4vw, 2rem);
  padding: 0.35rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.reviews-row__label--amazon { color: var(--oro-antiguo); }
.reviews-row__label--web {
  color: var(--verde-salvia);
  background: rgba(124, 154, 122, 0.08);
}

/* La fila web hereda un color de acento distinto al oro */
.reviews-row--web {
  --acento-web: var(--verde-salvia);
  --acento-web-claro: var(--verde-salvia-claro);
}

.marquee__track--reverse { animation-direction: reverse; }

/* --- Tarjeta Amazon: mantiene el oro --- */
.rev-card--amazon { /* usa el estilo base .rev-card (oro) */ }

/* --- Tarjeta de la web: otro color (salvia) + avatar e insignia --- */
.rev-card--web {
  border-color: rgba(124, 154, 122, 0.28);
  background: linear-gradient(180deg, rgba(124, 154, 122, 0.06), rgba(42, 36, 29, 0.6));
}
.rev-card--web:hover { border-color: rgba(124, 154, 122, 0.55); }
.rev-card--web .rev-card__stars { color: var(--verde-salvia-claro); }
.rev-card--web .rev-card__text { color: rgba(242, 232, 213, 0.9); }

.rev-card__top { display: flex; align-items: center; gap: 0.75rem; }
.rev-card__avatar {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--negro-profundo);
  background: linear-gradient(135deg, var(--verde-salvia-claro), var(--verde-salvia));
}
.rev-card__id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.rev-card__name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema-marfil);
}
.rev-card__ig {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--verde-salvia-claro);
  transition: color var(--dur-hover, 200ms) var(--ease-snap, ease);
}
.rev-card__ig:hover { color: var(--crema-marfil); text-decoration: underline; }
.rev-card__badge {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: rgba(242, 232, 213, 0.65);
  border: 1px solid rgba(242, 232, 213, 0.2);
}
.rev-card__badge--ig {
  color: var(--negro-profundo);
  background: var(--verde-salvia-claro);
  border-color: transparent;
}

/* --- Campos extra del formulario --- */
.review-form__hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(196, 154, 78, 0.55);
  line-height: 1.5;
}
.review-form__opt { color: rgba(242, 232, 213, 0.4); text-transform: none; letter-spacing: 0; }
.review-form__error {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #E5A0A0;
  border-left: 2px solid #E5A0A0;
  padding: 0.5rem 0.9rem;
  background: rgba(229, 160, 160, 0.08);
}
.review-form__error--sacred {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--oro-claro);
  border-left-color: var(--oro-antiguo);
  background: rgba(196, 154, 78, 0.08);
  text-align: center;
  padding: 1rem 1.1rem;
}

/* --- Valorar una reflexión (blog) --- */
.article-rate {
  margin-top: var(--sp-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(196, 154, 78, 0.22);
  background: rgba(31, 27, 22, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.article-rate__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 232, 213, 0.6);
}
.article-rate .star-input { gap: 0.5rem; }
.article-rate__msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--oro-claro);
  min-height: 1.4em;
}
.article-rate__comment {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(242, 232, 213, 0.55);
}
.article-rate__comment a { color: var(--oro-antiguo); text-decoration: underline; text-underline-offset: 3px; }
.article-rate__comment a:hover { color: var(--oro-claro); }
.article-rate.is-rated .star-input__star { cursor: default; }

/* ============================================================
   Compartir reflexión (WhatsApp · Facebook · X · copiar enlace)
   ============================================================ */
.article-share {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(196, 154, 78, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.article-share__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 232, 213, 0.6);
}
.article-share__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid rgba(196, 154, 78, 0.28);
  border-radius: 999px;
  background: rgba(31, 27, 22, 0.5);
  color: var(--crema-marfil);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.share-btn svg { flex: none; }
.share-btn:hover { transform: translateY(-2px); }
.share-btn:focus-visible { outline: 2px solid var(--oro-antiguo); outline-offset: 2px; }
.share-btn--whatsapp:hover { border-color: #25D366; color: #25D366; background: rgba(37, 211, 102, 0.08); }
.share-btn--facebook:hover { border-color: #1877F2; color: #3b8bff; background: rgba(24, 119, 242, 0.08); }
.share-btn--x:hover { border-color: var(--crema-marfil); color: #fff; background: rgba(242, 232, 213, 0.08); }
.share-btn--copy:hover { border-color: var(--oro-antiguo); color: var(--oro-claro); background: rgba(196, 154, 78, 0.1); }
.share-btn.is-copied { border-color: var(--oro-antiguo); color: var(--oro-claro); background: rgba(196, 154, 78, 0.12); }

@media (max-width: 600px) {
  .reviews-row__label { margin-left: 1rem; }
}

/* ============================================================
   v2.9 — Pedidos de oración: muro, controles segmentados,
   botón "Oré por ti", acompañamiento en crisis y nota pastoral.
   ============================================================ */
.prayer__head { max-width: 42rem; }
.prayer__head h2 { font-size: var(--fs-h1); margin-top: var(--sp-sm); }
.prayer__head p { color: rgba(242, 232, 213, 0.72); margin: var(--sp-sm) 0 var(--sp-md); line-height: 1.7; }

.prayer__wall {
  margin-top: var(--sp-lg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.prayer-card {
  background: var(--negro-cuero);
  border: 1px solid rgba(196, 154, 78, 0.16);
  border-left: 2px solid var(--oro-tenue);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color var(--dur-hover) var(--ease-snap), transform var(--dur-hover) var(--ease-snap);
}
.prayer-card:hover { border-color: rgba(196, 154, 78, 0.4); transform: translateY(-3px); }
.prayer-card__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.9);
  font-weight: 300;
}
.prayer-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.prayer-card__who {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--oro-antiguo);
}
.prayer-card__pray {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crema-marfil);
  border: 1px solid rgba(196, 154, 78, 0.3);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  transition: border-color var(--dur-hover) var(--ease-snap), background-color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}
.prayer-card__pray:hover { border-color: var(--oro-antiguo); background: rgba(196, 154, 78, 0.1); }
.prayer-card__pray:active { transform: scale(0.95); }
.prayer-card__pray-count {
  background: rgba(196, 154, 78, 0.18);
  color: var(--oro-claro);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.66rem;
}
.prayer-card__pray.is-prayed {
  color: var(--oro-claro);
  border-color: var(--oro-antiguo);
  background: rgba(196, 154, 78, 0.12);
  cursor: default;
}
.prayer__note {
  margin-top: var(--sp-lg);
  max-width: 44rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: rgba(242, 232, 213, 0.45);
  border-top: 1px solid rgba(242, 232, 213, 0.12);
  padding-top: var(--sp-sm);
}

/* --- Control segmentado (radios con forma de píldora) --- */
.seg {
  display: inline-flex;
  gap: 0.4rem;
  background: rgba(15, 13, 10, 0.5);
  border: 1px solid rgba(196, 154, 78, 0.2);
  border-radius: 999px;
  padding: 0.3rem;
  flex-wrap: wrap;
}
.seg__opt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(242, 232, 213, 0.65);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  transition: background-color var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}
.seg__opt:hover { color: var(--crema-marfil); }
.seg__opt.is-on { background: var(--oro-antiguo); color: var(--negro-profundo); }

/* --- Acompañamiento en crisis (no es un error: es cuidado) --- */
.prayer-support {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--crema-marfil);
  background: rgba(124, 154, 122, 0.12);
  border: 1px solid rgba(124, 154, 122, 0.4);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}

@media (max-width: 600px) {
  .seg { width: 100%; }
  .seg__opt { flex: 1; text-align: center; }
}

/* ============================================================
   v3.0 — SISTEMA FLUIDO + PROFUNDIDAD 3D DE LUJO
   Todo el dimensionado escala con el viewport: nada de medidas
   fijas en píxeles para espaciado, contenedores ni portadas.
   Las portadas ganan inclinación 3D que sigue al cursor, luz de
   borde dorada y un barrido de brillo (gloss) tipo Awwwards.
   Degrada con gracia: en táctil o con "menos movimiento" todo
   queda en su estado final, legible y elegante.
   ============================================================ */

/* --- 1. Espaciado fluido: respira con la pantalla --------- */
:root {
  --sp-xs:  clamp(0.6rem, 0.45rem + 0.6vw, 0.85rem);
  --sp-sm:  clamp(1rem,   0.7rem  + 1.1vw, 1.45rem);
  --sp-md:  clamp(1.5rem, 1rem    + 2vw,   2.25rem);
  --sp-lg:  clamp(2.4rem, 1.4rem  + 4vw,   3.75rem);
  --sp-xl:  clamp(3.4rem, 1.8rem  + 6.5vw, 6rem);
  --sp-2xl: clamp(4.5rem, 2.4rem  + 9vw,   8.5rem);
  --sp-3xl: clamp(6rem,   3rem    + 14vw,  13rem);

  /* Contenedores en rem (respetan el zoom del usuario) */
  --container:        90rem;   /* ~1440px */
  --container-narrow: 60rem;   /* ~960px  */
  --container-text:   45rem;   /* ~720px  */

  /* Profundidad de la perspectiva 3D, también fluida */
  --depth-perspective: clamp(800px, 70vw, 1500px);
}

/* --- 2. Píxeles fijos restantes -> medidas relativas ------ */
.nav__toggle { width: 2rem; height: 1.625rem; }
.story__visual::after,
.about-hero__photo::after,
.author-on-landing__photo::after { inset: clamp(0.6rem, 1.4vw, 1rem); }
.story__visual-tag {
  bottom: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
}
.proof__item { min-width: clamp(7rem, 18vw, 9rem); }
.proof__divider,
.verse__rule { height: clamp(2.5rem, 6vh, 3.5rem); }
[id] { scroll-margin-top: clamp(5rem, 10vh, 7rem); }

/* Portadas con tamaño fluido (mismo tope que antes, ahora escalable) */
.book-act__visual { max-width: min(78vw, 21rem); perspective: var(--depth-perspective); }
.book-hero__cover { max-width: min(80vw, 25rem); perspective: var(--depth-perspective); }
@media (max-width: 880px) {
  .book-act__visual { max-width: min(62vw, 15rem); }
  .book-hero__cover { max-width: min(70vw, 17.5rem); }
  .casa48__cover-wrap { max-width: min(66vw, 16rem); }
}

/* --- 3. Reveal con desplazamiento relativo al viewport ---- */
.reveal { transform: translateY(clamp(1.25rem, 3vh, 2.25rem)); }
.reveal.is-visible { transform: translateY(0); }
/* A prueba de fallos: si JS no corre, el contenido se ve igual. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* Quiebre de línea cuidado en titulares y prosa larga */
h1, h2, h3 { text-wrap: balance; }
.hero__lead, .book-act__desc, .letter p, .story__text p, .long-form p { text-wrap: pretty; }

/* --- 4. Barrido de brillo que sigue al cursor (gloss) ----- */
.book-act__visual-inner::after,
.book-hero__cover-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 247, 228, 0.30),
    rgba(255, 247, 228, 0.06) 35%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-hover, 220ms) var(--ease-snap, ease);
  mix-blend-mode: screen;
}
.book-act:hover .book-act__visual-inner::after,
.book-hero__cover:hover .book-hero__cover-inner::after { opacity: 1; }

/* --- 5. Táctil y "menos movimiento": sin tilt ni brillo --- */
@media (hover: none), (pointer: coarse) {
  .book-act__visual-inner::after,
  .book-hero__cover-inner::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .book-act__visual-inner,
  .book-hero__cover-inner,
  .casa48__cover-wrap {
    --tlt-rx: 0deg !important;
    --tlt-ry: -4deg;
    --tlt-ty: 0rem !important;
    --tlt-tz: 0px !important;
  }
  .casa48__cover-wrap { --tlt-ry: 0deg; }
  .book-act__visual-inner::after,
  .book-hero__cover-inner::after { display: none; }
  .reveal { transform: none; }
}

/* ============================================================
   v3.1 — VIDA · "Nada estático"
   Cinética de lujo: números que cuentan, titulares que suben
   palabra a palabra, botones magnéticos, luz que sigue al
   cursor, reglas que se trazan y respiración sutil en las
   portadas. Todo en transform/opacity. Degrada con gracia
   (sin JS = estado final) y respeta prefers-reduced-motion.
   ============================================================ */

/* --- 0. Hilo de progreso de lectura (oro, fino, arriba) ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--oro-antiguo), var(--oro-claro));
  box-shadow: 0 0 14px -2px rgba(196, 154, 78, 0.65);
  pointer-events: none;
  will-change: transform;
}

/* --- 1. Reveal por palabras: los titulares "suben" --------- */
.kin .word { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; padding-bottom: 0.04em; }
.kin .word__in {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition:
    transform 880ms var(--ease-cinema),
    opacity 880ms var(--ease-cinema);
  transition-delay: calc(var(--i, 0) * 42ms);
  will-change: transform;
}
.kin.is-on .word__in { transform: translateY(0); opacity: 1; }
/* El hero usa el reveal por palabras en vez del fade antiguo */
.hero__title.kin { opacity: 1; animation: none; transform: none; }

/* Brillo dorado que recorre la palabra acentuada del hero (luz que
   roza el oro). Se mantiene aunque la palabra esté dividida. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title em {
    background: linear-gradient(100deg,
      var(--oro-antiguo) 28%, #F4DBA2 50%, var(--oro-antiguo) 72%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: oro-shimmer 7s linear infinite;
  }
}
@keyframes oro-shimmer { to { background-position: -220% 0; } }

/* --- 2. Botones magnéticos (el JS escribe --mtx / --mty) ---- */
.btn { transform: translate(var(--mtx, 0px), var(--mty, 0px)); }
.btn:active { transform: translate(var(--mtx, 0px), var(--mty, 0px)) scale(0.97); }

/* --- 3. Luz ambiental que sigue al cursor (escenas oscuras) - */
.ambient-glow {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  background: radial-gradient(
    20rem 20rem at var(--gx, 50%) var(--gy, 50%),
    rgba(196, 154, 78, 0.08), transparent 62%);
  mix-blend-mode: screen;
}
html.has-glow .ambient-glow { opacity: 1; }

/* --- 4. Reglas y firmas que se trazan al revelarse --------- */
.reveal .verse__rule,
.reveal .excerpt__rule {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1000ms var(--ease-cinema) 180ms;
}
.reveal.is-visible .verse__rule,
.reveal.is-visible .excerpt__rule { transform: scaleY(1); }

/* La línea del "eyebrow" se dibuja de izquierda a derecha */
html.js .reveal .eyebrow::before,
html.js .reveal .reviews-wall__intro .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--ease-out) 160ms;
}
html.js .reveal.is-visible .eyebrow::before { transform: scaleX(1); }

/* El sello de la carta entra con un latido sutil */
.reveal .letter__seal-text {
  transition: transform 700ms var(--ease-snap) 120ms, opacity 700ms var(--ease-out) 120ms;
}

/* --- 5. Respiración: las portadas nunca quedan del todo quietas */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .book-act__visual { animation: cover-breathe 7.5s ease-in-out infinite; }
  .book-act:nth-of-type(even) .book-act__visual { animation-delay: -3.75s; }
  .book-act:hover .book-act__visual { animation-play-state: paused; }
}
@keyframes cover-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* El "48" respira despacio una vez abierta la puerta */
@media (prefers-reduced-motion: no-preference) {
  html.js .casa48.is-open .casa48__door-number {
    animation: door-breathe 7s ease-in-out 1.9s infinite;
  }
}
@keyframes door-breathe {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.225; }
}

/* --- 6. Marca de tarjeta: el cursor "ilumina" reflexiones --- */
.reflexion-card { position: relative; overflow: hidden; }
.reflexion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    16rem 16rem at var(--cx, 50%) var(--cy, 0%),
    rgba(196, 154, 78, 0.12), transparent 60%);
  transition: opacity var(--dur-hover) var(--ease-snap);
}
.reflexion-card:hover::before { opacity: 1; }
.reflexion-card > * { position: relative; z-index: 1; }

/* --- 7. El cursor del scroll-cue invita con más vida -------- */
.hero__scroll-cue { will-change: transform, opacity; }

/* --- 8. Garantías de accesibilidad / sin-JS ---------------- */
html:not(.js) .kin .word__in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kin .word { overflow: visible; }
  .kin .word__in { transform: none; opacity: 1; transition: none; }
  .scroll-progress { display: none; }
  .ambient-glow { display: none; }
  .book-act__visual { animation: none; }
  .hero__title em { animation: none; }
  .reveal .verse__rule,
  .reveal .excerpt__rule { transform: none; }
  html.js .reveal .eyebrow::before { transform: scaleX(1); }
}

/* ============================================================
   v3.2 — INTERACTIVIDAD TOTAL
   Menú con Oración (7 ítems), números y estrellas que reaccionan
   al cursor, flechas en el muro de reseñas y el VISOR DE LIBRO 3D
   (se abre como pasando páginas y gira 360° mostrando lomo y
   contraportada). Todo en transform/opacity, táctil-friendly y
   con guarda prefers-reduced-motion.
   ============================================================ */

/* --- 1. Menú: cabe holgado con 7 ítems + stagger completo --- */
.nav__links { gap: clamp(0.9rem, 1.8vw, 1.75rem); }
@media (min-width: 881px) and (max-width: 1040px) {
  .nav__link { font-size: 0.66rem; letter-spacing: 0.16em; }
}
@media (max-width: 880px) {
  .nav.is-open .nav__links li:nth-child(6) .nav__link { animation-delay: 270ms; }
  .nav.is-open .nav__links li:nth-child(7) .nav__cta  { animation-delay: 315ms; }
}

/* --- 2. Números reactivos: el cursor invita a "subir" -------- */
.proof__num { cursor: default; transition: transform var(--dur-hover) var(--ease-snap); }
@media (hover: hover) and (pointer: fine) {
  .proof__item:hover .proof__num { transform: translateY(-3px); }
  .proof__item:hover .proof__star { animation: star-pop 600ms var(--ease-snap); }
}

/* --- 3. Estrellas con vida al pasar el cursor --------------- */
/* El JS divide los grupos de estrellas en .star spans con --i. */
.stars-kin { display: inline-flex; gap: 0.06em; }
.stars-kin .star {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stars-kin:hover .star { animation: star-wave 720ms var(--ease-snap); animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes star-wave {
  0%   { transform: translateY(0) scale(1)   rotate(0deg); }
  35%  { transform: translateY(-22%) scale(1.32) rotate(-9deg); }
  60%  { transform: translateY(0) scale(1.1) rotate(4deg); }
  100% { transform: translateY(0) scale(1)   rotate(0deg); }
}
@keyframes star-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.4) rotate(10deg); } 100% { transform: scale(1); }
}

/* --- 4. Flechas laterales en el muro de reseñas ------------- */
.reviews-row { position: relative; }
.marquee-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: clamp(2.4rem, 5vw, 3rem);
  height: clamp(2.4rem, 5vw, 3rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(196, 154, 78, 0.4);
  background: rgba(15, 13, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--oro-claro);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-snap),
              transform var(--dur-press) var(--ease-snap),
              border-color var(--dur-hover) var(--ease-snap),
              background-color var(--dur-hover) var(--ease-snap);
  cursor: pointer;
}
.reviews-row:hover .marquee-nav,
.reviews-row:focus-within .marquee-nav { opacity: 1; }
.marquee-nav:hover { border-color: var(--oro-antiguo); background: rgba(31, 27, 22, 0.92); }
.marquee-nav:active { transform: translateY(-50%) scale(0.92); }
.marquee-nav--prev { left: clamp(0.25rem, 1vw, 0.75rem); }
.marquee-nav--next { right: clamp(0.25rem, 1vw, 0.75rem); }
.marquee-nav:focus-visible { opacity: 1; outline: 2px solid var(--oro-claro); outline-offset: 2px; }
/* En táctil las flechas siempre visibles (no hay hover) */
@media (hover: none), (pointer: coarse) { .marquee-nav { opacity: 1; } }
/* Cuando el usuario toma control, el track se mueve con transición */
.marquee__track.is-manual { animation: none !important; transition: transform 620ms var(--ease-cinema); }

/* --- 5. Las portadas del grid invitan a abrirse ------------- */
.book-act__visual { cursor: pointer; }
.book-act__open-hint {
  position: absolute;
  left: 50%; bottom: clamp(0.6rem, 2vw, 1rem);
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 13, 10, 0.82);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 78, 0.4);
  color: var(--oro-claro);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-snap), transform var(--dur-hover) var(--ease-snap);
}
.book-act__visual:hover .book-act__open-hint { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: none), (pointer: coarse) { .book-act__open-hint { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ============================================================
   VISOR DE LIBRO 3D
   ============================================================ */
.book3d-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  background: rgba(9, 8, 6, 0.92);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms;
}
.book3d-viewer.is-open { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-out); }
.book3d-viewer__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(196,154,78,0.16), transparent 70%);
}
.book3d-viewer__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
  z-index: 2;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(242, 232, 213, 0.25);
  color: var(--crema-marfil);
  font-size: 1.2rem;
  background: rgba(31, 27, 22, 0.6);
  transition: border-color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}
.book3d-viewer__close:hover { border-color: var(--oro-antiguo); color: var(--oro-claro); }
.book3d-viewer__close:active { transform: scale(0.9); }

.book3d-stage {
  position: relative;
  z-index: 1;
  perspective: 2200px;
  width: min(90vw, 30rem);
  height: min(70vh, 32rem);
  display: grid;
  place-items: center;
}

.book3d {
  --w: clamp(160px, 52vw, 270px);
  --h: calc(var(--w) * 1.5);
  --d: clamp(20px, 6vw, 40px);
  --rx: -8deg;
  --ry: -26deg;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1700ms var(--ease-cinema);
  will-change: transform;
}
.book3d.is-spun { --ry: 334deg; }      /* -26 + 360 → gira completo */

.b3d__face {
  position: absolute;
  top: 50%; left: 50%;
  backface-visibility: hidden;
  overflow: hidden;
}
/* primera página (bajo la portada) y caras de papel */
.b3d__page {
  width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 - 1px));
  background:
    linear-gradient(100deg, #efe7d6 0%, #fbf6ec 12%, #f3ead7 100%);
  box-shadow: inset 0 0 40px rgba(92, 74, 50, 0.12);
}
.b3d__page-line {
  position: absolute; left: 8%; right: 10%;
  height: 1px; background: rgba(92, 74, 50, 0.12);
}
.b3d__back {
  width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(155deg, #211c16 0%, #14110c 100%);
  border: 1px solid rgba(196, 154, 78, 0.18);
}
.b3d__spine {
  width: var(--d); height: var(--h);
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(180deg, #2a241d, #14110c);
  border-top: 1px solid rgba(196,154,78,0.25);
  border-bottom: 1px solid rgba(196,154,78,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 0.8rem 0;
}
.b3d__edge {
  width: var(--d); height: var(--h);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(90deg, #efe7d6, #efe7d6 1px, #d9cdb4 2px, #efe7d6 3px);
}
.b3d__cap {
  width: var(--w); height: var(--d);
  background: repeating-linear-gradient(90deg, #efe7d6, #efe7d6 1px, #d9cdb4 2px, #efe7d6 3px);
}
.b3d__cap--top    { transform: translate(-50%, -50%) rotateX(90deg)  translateZ(calc(var(--h) / 2)); }
.b3d__cap--bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* portada que se abre como una página */
.b3d__cover {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--w); height: var(--h);
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 + 0.5px)) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 1100ms var(--ease-cinema);
}
.book3d.is-open .b3d__cover { transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 + 0.5px)) rotateY(-156deg); }
.b3d__cover-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}
.b3d__cover-face img { width: 100%; height: 100%; object-fit: cover; }
.b3d__cover-face--out {
  box-shadow: -2px 0 6px rgba(0,0,0,0.4), 0 30px 60px -20px rgba(0,0,0,0.7);
}
.b3d__cover-face--in {
  transform: rotateY(180deg);
  background: linear-gradient(100deg, #efe7d6, #fbf6ec);
  display: grid; place-items: center;
}

/* hojas que pasan */
.b3d__leaf {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--w); height: var(--h);
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 - 2px)) rotateY(0deg);
  background: linear-gradient(100deg, #f0e8d7, #fbf6ec);
  border-left: 1px solid rgba(92,74,50,0.15);
  transition: transform 900ms var(--ease-cinema);
}
.book3d.is-flipped .b3d__leaf--1 { transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 - 2px)) rotateY(-150deg); }
.book3d.is-flipped .b3d__leaf--2 { transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 - 4px)) rotateY(-150deg); transition-delay: 160ms; }

/* lomo: texto vertical + emblema */
.b3d__spine-title {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.7rem, 2.6vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--oro-claro);
  white-space: nowrap;
  overflow: hidden;
  max-height: 70%;
}
.b3d__spine-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--oro-antiguo);
  font-size: 1rem;
}

/* contraportada: blurb + autor + código */
.b3d__back-inner {
  position: absolute; inset: 0;
  padding: clamp(1rem, 4vw, 1.6rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.b3d__back-eyebrow {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oro-antiguo);
}
.b3d__back-text {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(0.85rem, 3.4vw, 1.05rem); line-height: 1.4;
  color: rgba(242, 232, 213, 0.85);
}
.b3d__back-author {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(242, 232, 213, 0.6);
}
.b3d__barcode {
  align-self: flex-start;
  width: clamp(46px, 22%, 70px); height: clamp(22px, 10%, 32px);
  background: repeating-linear-gradient(90deg, var(--crema-marfil) 0 1px, transparent 1px 3px);
  opacity: 0.75;
  padding: 3px; border: 2px solid var(--crema-marfil); border-radius: 2px;
}

/* controles del visor */
.book3d-viewer__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem);
  flex-wrap: wrap; justify-content: center;
}
.book3d-viewer__title {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 4vw, 1.8rem); color: var(--crema-marfil);
  text-align: center; width: 100%;
}
.book3d-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  border: 1px solid rgba(196, 154, 78, 0.45);
  color: var(--oro-claro);
  border-radius: 999px;
  background: rgba(31, 27, 22, 0.4);
  transition: background-color var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}
.book3d-btn:hover { background: var(--oro-antiguo); color: var(--negro-profundo); border-color: var(--oro-antiguo); }
.book3d-btn:active { transform: scale(0.95); }
.book3d-btn--amazon { border-color: var(--oro-antiguo); }
.book3d-btn[hidden] { display: none; }

/* --- Compartir dentro del visor 3D (menú emergente) --- */
.book3d-share { position: relative; display: inline-flex; }
.book3d-share__menu {
  position: absolute; bottom: calc(100% + 0.6rem); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.5rem;
  min-width: 12rem;
  border: 1px solid rgba(196, 154, 78, 0.45);
  border-radius: 14px;
  background: rgba(20, 17, 13, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  z-index: 3;
  animation: book3d-share-in 220ms var(--ease-out) both;
}
@keyframes book3d-share-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.book3d-share__menu[hidden] { display: none; }
.book3d-share__opt {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--crema-marfil);
  border: 1px solid transparent; border-radius: 999px;
  background: rgba(242, 232, 213, 0.04);
  text-align: left; width: 100%;
  transition: background-color var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}
.book3d-share__opt::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: currentColor; opacity: 0.85;
}
.book3d-share__opt:hover { background: rgba(242, 232, 213, 0.09); border-color: rgba(196, 154, 78, 0.5); }
.book3d-share__opt--wa:hover { color: #25D366; border-color: #25D366; }
.book3d-share__opt--fb:hover { color: #3b8bff; border-color: #1877F2; }
.book3d-share__opt--x:hover { color: #fff; border-color: var(--crema-marfil); }
.book3d-share__opt--copy:hover { color: var(--oro-claro); border-color: var(--oro-antiguo); }
.book3d-share__opt--copy.is-copied { color: var(--oro-claro); border-color: var(--oro-antiguo); background: rgba(196, 154, 78, 0.14); }
.book3d-share__opt:focus-visible { outline: 2px solid var(--oro-antiguo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .book3d { transition: none; }
  .b3d__cover, .b3d__leaf { transition: none; }
  .stars-kin:hover .star { animation: none; }
  .marquee__track.is-manual { transition: none; }
}

/* ============================================================
   v3.3 — LIBRO 3D REALISTA + portadas KDP reales
   Caras reales (portada/lomo/contraportada extraídas de los PDF
   de KDP), entrada/salida con zoom suave y desenfoque, sello
   "CONFIDENCIAL", sombra de contacto, brillo de cubierta y grosor
   proporcional al nº de páginas.
   ============================================================ */

/* Entrada/salida: el libro emerge con zoom y se difumina (no brusco) */
.book3d-viewer { transition: opacity 540ms var(--ease-out), visibility 0s linear 540ms; }
.book3d-viewer.is-open { transition: opacity 540ms var(--ease-out); }
.book3d-stage {
  transform: scale(0.78);
  opacity: 0;
  filter: blur(18px);
  transition: transform 660ms var(--ease-cinema),
              opacity 540ms var(--ease-out),
              filter 620ms var(--ease-out);
}
.book3d-viewer.is-open .book3d-stage { transform: scale(1); opacity: 1; filter: blur(0); }
.book3d-viewer__title, .book3d-viewer__bar {
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out) 180ms, transform 500ms var(--ease-out) 180ms;
}
.book3d-viewer.is-open .book3d-viewer__title,
.book3d-viewer.is-open .book3d-viewer__bar { opacity: 1; transform: translateY(0); }

/* Sombra de contacto bajo el libro (estática, no gira) */
.book3d-stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 8%;
  width: 58%; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 72%);
  filter: blur(11px);
  opacity: 0.75;
  z-index: 0;
}

/* Caras con imágenes reales */
.b3d__back img,
.b3d__spine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.b3d__cover-face--out img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b3d__back { background: #14110c; }
.b3d__spine { padding: 0; background: #14110c; }

/* Brillo sutil que recorre la cubierta (papel satinado) */
.b3d__cover-face--out::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(108deg,
    rgba(255,255,255,0) 32%, rgba(255,255,255,0.16) 49%, rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Pliegue junto al lomo + viñeta de profundidad: la cara plana se lee
   como un objeto físico e integrado (capa de mezcla normal). */
.b3d__cover-face--out::before,
.b3d__back::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38) 0%, transparent 14%),
    radial-gradient(125% 120% at 50% 48%, transparent 60%, rgba(0,0,0,0.34));
}

/* Sello CONFIDENCIAL en la primera página */
.b3d__stamp {
  position: absolute;
  top: 28%; left: 52%;
  transform: translate(-50%, -50%) rotate(-13deg);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.7rem, 3.4vw, 1.15rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(150, 42, 32, 0.74);
  border: 3px double rgba(150, 42, 32, 0.66);
  padding: 0.34em 0.7em;
  border-radius: 5px;
  opacity: 0.8;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(150, 42, 32, 0.12);
}
.b3d__stamp small {
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.3em;
  text-align: center;
  margin-top: 0.3em;
  color: rgba(150, 42, 32, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .book3d-stage { transition: opacity 300ms ease; transform: none; filter: none; }
  .book3d-viewer__title, .book3d-viewer__bar { transition: opacity 300ms ease; transform: none; }
}

/* ============================================================
   v3.4 — GIRO MANUAL DEL LIBRO 3D
   Tras la presentación, el libro se puede girar libremente:
   en escritorio siguiendo el ratón, en móvil arrastrando el
   dedo o con scroll encima. Para ver lomo y contraportada.
   ============================================================ */
.book3d-stage { touch-action: none; } /* el dedo gira el libro, no hace scroll */
.book3d.is-manual { transition: none; } /* el suavizado lo lleva el lerp en JS */
.book3d-viewer.is-manual .book3d-stage { cursor: grab; }
.book3d.is-grabbing { cursor: grabbing; }

.book3d-hint {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 154, 78, 0.0);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 600ms var(--ease-out);
  pointer-events: none;
  text-align: center;
}
.book3d-hint::before,
.book3d-hint::after {
  content: "";
  width: clamp(1.2rem, 4vw, 2rem);
  height: 1px;
  background: rgba(196, 154, 78, 0.4);
  display: inline-block;
}
.book3d-viewer.is-manual .book3d-hint { color: rgba(196, 154, 78, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .book3d.is-manual, .book3d.is-returning { transition: none; }
}

/* ============================================================
   AÑADIDOS v2.1 — ficha técnica, cinta viva, vida sutil y
   protección de contenido.
   ============================================================ */

/* --- Cinta de reseñas movida por JS (apaga la animación CSS) --- */
.marquee__track.js-marquee { animation: none !important; will-change: transform; }

/* --- Ficha técnica dentro del visor 3D --- */
.book3d-ficha {
  width: min(92vw, 460px);
  margin: 1rem auto 0;
  padding: clamp(1.5rem, 3.2vw, 2.1rem) clamp(1.3rem, 3vw, 1.8rem);
  background: rgba(20, 17, 12, 0.92);
  border: 1px solid rgba(196, 154, 78, 0.22);
  border-radius: 2px;
  text-align: left;
  animation: ficha-in 360ms var(--ease-snap);
  /* Cajita alta y cómoda. El scroll se hace por TODO el panel (rueda o
     arrastre del dedo en el centro), no solo por la barra lateral. */
  max-height: min(52vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* Con la ficha abierta encogemos el libro para dejar sitio a la cajita y que
   quepa entera en pantalla (su parte baja siempre alcanzable). Como apoyo,
   el visor también puede desplazarse si la pantalla es muy baja. */
.book3d-viewer.is-ficha {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: clamp(3rem, 6vh, 4.5rem);
  padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
  gap: clamp(0.8rem, 2vh, 1.4rem);
}
.book3d-viewer.is-ficha .book3d-stage { height: min(20vh, 11rem); flex: 0 0 auto; }
.book3d-viewer.is-ficha .book3d-viewer__title { margin: 0; }
.book3d-viewer.is-ficha .book3d-hint { display: none; }
.book3d-viewer.is-ficha .book3d-viewer__bar,
.book3d-viewer.is-ficha .book3d-ficha { flex: 0 0 auto; }
/* barra fina y discreta para el scroll del panel */
.book3d-ficha::-webkit-scrollbar { width: 8px; }
.book3d-ficha::-webkit-scrollbar-thumb { background: rgba(196,154,78,0.35); border-radius: 8px; }
.book3d-ficha[hidden] { display: none; }
@keyframes ficha-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.book3d-ficha__list { margin: 0; display: grid; gap: 0.55rem; }
.book3d-ficha__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(196, 154, 78, 0.12);
}
.book3d-ficha__row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro-antiguo);
}
.book3d-ficha__row dd { margin: 0; color: var(--crema-marfil); font-size: 0.95rem; text-align: right; }
.book3d-ficha__formats { margin-top: 0.9rem; }
.book3d-ficha__formats-h {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro-antiguo);
  margin-bottom: 0.5rem;
}
.book3d-ficha__fmt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  padding: 0.3rem 0;
}
.book3d-ficha__fmt span { color: rgba(242, 232, 213, 0.82); font-size: 0.92rem; }
.book3d-ficha__fmt code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--oro-claro);
  letter-spacing: 0.04em;
}
.book3d-ficha__note,
.book3d-ficha__verify {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.6);
}
.book3d-ficha__note { color: var(--oro-antiguo); }
.book3d-viewer.is-ficha .book3d-stage { transform: scale(0.82); opacity: 0.5; pointer-events: none; }

/* --- Estrellas del badge: al pasar el ratón se inclinan hacia atrás --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* anula la "ola" genérica en el badge y aplica el retroceso */
  .rating-badge .stars-kin .star { transform-origin: 50% 80%; }
  .rating-badge:hover .stars-kin .star,
  .rating-badge .stars-kin:hover .star {
    animation: star-recede 760ms var(--ease-snap);
    animation-delay: calc((4 - var(--i, 0)) * 70ms); /* la ola viaja hacia atrás */
  }
}
@keyframes star-recede {
  0%   { transform: perspective(360px) translateY(0) translateZ(0) rotateX(0) scale(1); }
  45%  { transform: perspective(360px) translateY(16%) translateZ(-26px) rotateX(34deg) scale(0.84); }
  100% { transform: perspective(360px) translateY(0) translateZ(0) rotateX(0) scale(1); }
}

/* --- Compartir un libro (WhatsApp + copiar enlace) --- */
.book-share {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
}
/* En el hero del libro acompaña al texto, alineado a la izquierda. */
.book-hero .book-share { align-items: flex-start; text-align: left; }
.book-hero .book-share .article-share__row { justify-content: flex-start; }
/* En Casa 48 sigue la alineación de su columna (izq. en escritorio). */
.casa48 .book-share { align-items: flex-start; text-align: left; }
.casa48 .book-share .article-share__row { justify-content: flex-start; }
@media (max-width: 880px) {
  .casa48 .book-share { align-items: center; text-align: center; }
  .casa48 .book-share .article-share__row { justify-content: center; }
}

/* --- Estrellas en los CTA a libros dentro de las reflexiones --- */
.article-cta__stars {
  color: var(--oro-claro);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.9rem;
  display: inline-flex;
}

/* --- Vida sutil al hacer scroll --- */
.text-life { transform: translate3d(0, var(--sy, 0px), 0); will-change: transform; }
.photo-life {
  transform: translate3d(0, var(--sy, 0px), 0) scale(1.12);
  will-change: transform;
  transition: filter 1400ms var(--ease-cinema);
}
/* las fotos enmarcadas ganan un punto de calidez al pasar el ratón */
.author-on-landing__photo:hover .photo-life,
.about-hero__photo:hover .photo-life { filter: saturate(1.06) brightness(1.03); }

@media (prefers-reduced-motion: reduce) {
  .text-life, .photo-life { transform: none; }
  .book3d-ficha { animation: none; }
  .rating-badge:hover .stars-kin .star,
  .rating-badge .stars-kin:hover .star { animation: none; }
}

/* --- Protección de contenido (activa al publicar) --- */
.content-protected,
.content-protected img,
.content-protected picture,
.content-protected .fill-photo,
.content-protected .book-act__cover {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
/* los formularios y zonas autorizadas SÍ permiten escribir, seleccionar y copiar */
.content-protected input,
.content-protected textarea,
.content-protected select,
.content-protected [contenteditable],
.content-protected .selectable,
.content-protected .allow-download {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}
.content-protected img,
.content-protected .fill-photo,
.content-protected .book-act__cover { pointer-events: none; }
/* excepción: imágenes que deben ser clicables (portadas-enlace, etc.) */
.content-protected a img,
.content-protected .book-hero__cover-link ~ picture img,
.content-protected .allow-download img { pointer-events: auto; }

/* ============================================================
   PODCAST · PRÓXIMAMENTE
   Banda íntima y cinematográfica que anuncia el podcast: micro,
   disco girando, ecualizador vivo y chips de plataformas.
   ============================================================ */
.podcast {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(196, 154, 78, 0.16), transparent 60%),
    linear-gradient(180deg, var(--negro-profundo), var(--negro-tierra) 55%, var(--negro-profundo));
  padding: clamp(4.5rem, 11vw, 9rem) 0;
  border-top: 1px solid rgba(196, 154, 78, 0.16);
  border-bottom: 1px solid rgba(196, 154, 78, 0.16);
}
.podcast__glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(217, 182, 115, 0.18), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}
.podcast__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}
.podcast__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}
.podcast__text h2 {
  font-size: var(--fs-h1);
  margin: var(--sp-sm) 0 var(--sp-md);
}
.podcast__text p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(242, 232, 213, 0.78);
  max-width: 34em;
  margin-bottom: var(--sp-md);
}
.podcast__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0 0.9rem;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--oro-claro);
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(196, 154, 78, 0.45);
  border-radius: 100px;
}
.podcast__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro-claro);
  box-shadow: 0 0 0 0 rgba(217, 182, 115, 0.7);
  animation: podcast-pulse 2.2s ease-out infinite;
}
@keyframes podcast-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 182, 115, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(217, 182, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 182, 115, 0); }
}
.podcast__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.podcast__platforms-label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(196, 154, 78, 0.7);
}
.podcast__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.podcast__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.05em;
  color: var(--crema-marfil);
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(242, 232, 213, 0.18);
  border-radius: 100px;
  background: rgba(242, 232, 213, 0.04);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.podcast__chip:hover { border-color: var(--oro-antiguo); color: var(--oro-claro); }

/* --- Visual: disco + micrófono + ondas --- */
.podcast__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.podcast__disc {
  position: relative;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--negro-cuero) 0 26%, transparent 27%),
    repeating-radial-gradient(circle at 50% 50%, rgba(196,154,78,0.10) 0 2px, rgba(15,13,10,0.9) 2px 6px),
    var(--negro-profundo);
  box-shadow:
    inset 0 0 0 1px rgba(196, 154, 78, 0.25),
    0 40px 80px -28px rgba(0, 0, 0, 0.8),
    0 0 70px -12px rgba(196, 154, 78, 0.25);
  animation: podcast-spin 18s linear infinite;
}
.podcast__disc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(217, 182, 115, 0.35);
  animation: podcast-ripple 3.4s ease-out infinite;
}
.podcast__disc-ring--2 { animation-delay: 1.7s; }
@keyframes podcast-ripple {
  0%   { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes podcast-spin { to { transform: rotate(360deg); } }
.podcast__mic {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--negro-profundo);
  background: linear-gradient(145deg, var(--oro-claro), var(--oro-antiguo));
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.7);
  /* contrarresta el giro del disco para que el micro quede quieto */
  animation: podcast-spin 18s linear infinite reverse;
}
.podcast__wave {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
}
.podcast__wave span {
  width: 5px;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--oro-claro), rgba(196, 154, 78, 0.4));
  transform-origin: bottom;
  animation: podcast-eq 1.1s ease-in-out infinite;
}
.podcast__wave span:nth-child(odd)  { animation-duration: 0.9s; }
.podcast__wave span:nth-child(3n)   { animation-duration: 1.4s; }
.podcast__wave span:nth-child(1)    { animation-delay: -0.2s; }
.podcast__wave span:nth-child(2)    { animation-delay: -0.5s; }
.podcast__wave span:nth-child(3)    { animation-delay: -0.1s; }
.podcast__wave span:nth-child(4)    { animation-delay: -0.7s; }
.podcast__wave span:nth-child(5)    { animation-delay: -0.3s; }
.podcast__wave span:nth-child(6)    { animation-delay: -0.6s; }
.podcast__wave span:nth-child(7)    { animation-delay: -0.15s; }
.podcast__wave span:nth-child(8)    { animation-delay: -0.55s; }
.podcast__wave span:nth-child(9)    { animation-delay: -0.35s; }
.podcast__wave span:nth-child(10)   { animation-delay: -0.65s; }
.podcast__wave span:nth-child(11)   { animation-delay: -0.25s; }
.podcast__wave span:nth-child(12)   { animation-delay: -0.45s; }
@keyframes podcast-eq {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

@media (max-width: 880px) {
  .podcast__inner { grid-template-columns: 1fr; text-align: center; }
  .podcast__text p { margin-left: auto; margin-right: auto; }
  .podcast__badge { margin-left: 0.6rem; }
  .podcast__platforms { justify-content: center; }
  .podcast__visual { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .podcast__disc,
  .podcast__mic { animation: none; }
  .podcast__disc-ring { display: none; }
  .podcast__badge-dot { animation: none; }
  .podcast__wave span { animation: none; height: 60%; }
}

/* ============================================================
   ETIQUETA DE LANZAMIENTO · destaque "La casa del número 48"
   Reusa la píldora dorada del badge y le añade un punto que late:
   señal clara de "en venta ya" sin romper la paleta.
   ============================================================ */
.book-act__badge--live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.book-act__badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--negro-profundo);
  animation: badge-live-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-live-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .book-act__badge--live::before { animation: none; opacity: 0.85; }
}

/* ============================================================
   v3.5 — CRISTAL CÁLIDO + ESQUINA SUAVE (liquid glass selectivo)
   Apple-style glass, pero teñido a la marca: oro / crema sobre
   negro tierra — NUNCA frío ni azulado. Solo en lo que "flota"
   sobre foto o sobre la página: nav al scrollear, CTA secundario
   del hero y el fondo de los modales. La firma se respeta: el
   botón oro primario y las tarjetas de libro NO se tocan.
   Esquina apenas suavizada (3px) como nota de modernidad, sin
   perder el carácter de libro impreso.
   ============================================================ */
:root {
  --radius-soft: 3px;
  --glass-warm: rgba(42, 36, 29, 0.55);         /* negro-cuero translúcido */
  --glass-warm-strong: rgba(31, 27, 22, 0.72);  /* negro-tierra translúcido */
  --glass-border: rgba(196, 154, 78, 0.30);     /* oro tenue */
  --glass-blur: blur(14px) saturate(135%);
}

/* — Esquina apenas suavizada: solo cajas completas — */
.btn,
.reflexion-card { border-radius: var(--radius-soft); }

/* — Nav al hacer scroll: el mismo cristal de siempre, ahora
   teñido cálido (negro tierra) y con más saturación para que el
   oro del fondo respire a través del desenfoque. — */
.nav.is-scrolled::before {
  background: var(--glass-warm-strong);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
}

/* — CTA secundario del hero como cristal cálido sobre la foto.
   Convive con el .btn--gold sólido (primario = firma intacta):
   sólido + cristal = jerarquía premium, en tu paleta. — */
.btn--glass {
  background: var(--glass-warm);
  color: var(--blanco-hueso);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(242, 232, 213, 0.12);
}
.btn--glass:hover {
  background: rgba(196, 154, 78, 0.18);
  border-color: rgba(217, 182, 115, 0.6);
  color: var(--blanco-hueso);
}

/* — Modal: la superficie del formulario sigue SÓLIDA (la
   legibilidad del texto manda); solo suavizamos su esquina y
   enriquecemos el frost cálido del fondo difuminado. — */
.review-form { border-radius: var(--radius-soft); }
.review-dialog::backdrop {
  background: rgba(31, 27, 22, 0.75);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
          backdrop-filter: blur(8px) saturate(115%);
}

/* — Red de seguridad: si el navegador no soporta backdrop-filter,
   el cristal cae a un sólido cálido legible. Nada se rompe. — */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn--glass { background: rgba(42, 36, 29, 0.92); }
  .nav.is-scrolled::before { background: rgba(15, 13, 10, 0.95); }
}