/* ═══════════════════════════════════════════════════
     INTRO CURTAIN — "El primer renglón"
     ═══════════════════════════════════════════════════ */
  .intro-curtain {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    opacity: 1;
    filter: blur(0);
    transition: opacity 700ms cubic-bezier(0.6, 0, 0.4, 1),
                filter 700ms cubic-bezier(0.6, 0, 0.4, 1);
  }
  .intro-curtain.is-leaving {
    opacity: 0;
    filter: blur(18px);
    pointer-events: none;
  }
  .intro-curtain.is-finished { display: none; }
  .intro-content {
    text-align: center;
    max-width: 760px;
    width: 100%;
    position: relative;
  }
  /* ── El renglón: línea dorada + frase encima ── */
  .intro-renglon {
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
    margin-bottom: 56px;
    width: 100%;
  }
  .intro-renglon-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 92%;
    max-width: 640px;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      color-mix(in srgb, var(--amber-soft) 70%, transparent) 12%,
      var(--amber-soft) 50%,
      color-mix(in srgb, var(--amber-soft) 70%, transparent) 88%,
      transparent 100%
    );
    animation: intro-renglon-draw 1100ms cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards;
  }
  @keyframes intro-renglon-draw {
    from { transform: translateX(-50%) scaleX(0); }
    to   { transform: translateX(-50%) scaleX(1); }
  }
  .intro-quote {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    line-height: 0.95;
    color: var(--paper-warm);
    margin: 0;
    letter-spacing: 0.005em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.32em;
    padding: 0 4%;
  }
  .intro-quote-word {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    animation: intro-word-appear 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .intro-quote-word:nth-child(1) { animation-delay: 1100ms; }
  .intro-quote-word:nth-child(2) { animation-delay: 1320ms; }
  .intro-quote-word:nth-child(3) { animation-delay: 1540ms; }
  .intro-quote-word:nth-child(4) { animation-delay: 1760ms; }
  @keyframes intro-word-appear {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  .intro-quote-word--key { position: relative; }
  .intro-quote-word-underline {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--amber-soft);
    transform: scaleX(0);
    transform-origin: left;
    animation: intro-underline-draw 600ms cubic-bezier(0.4, 0, 0.2, 1) 2400ms forwards;
  }
  @keyframes intro-underline-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  /* ── Firma ── */
  .intro-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    animation: intro-signature-appear 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 3100ms forwards;
  }
  .intro-signature-line {
    flex: 0 0 60px;
    height: 1px;
    background: color-mix(in srgb, var(--paper-warm) 28%, transparent);
  }
  .intro-signature-name {
    font-family: var(--ui);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--paper-muted);
    white-space: nowrap;
  }
  @keyframes intro-signature-appear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* ── Botón Saltar ── */
  .intro-skip {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper-warm) 22%, transparent);
    color: color-mix(in srgb, var(--paper-warm) 55%, transparent);
    font-family: var(--ui);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: intro-skip-appear 400ms ease 1000ms forwards;
  }
  .intro-skip:hover,
  .intro-skip:focus-visible {
    border-color: color-mix(in srgb, var(--paper-warm) 55%, transparent);
    color: color-mix(in srgb, var(--paper-warm) 95%, transparent);
  }
  .intro-skip:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 3px; }
  @keyframes intro-skip-appear { to { opacity: 0.85; } }
  body.intro-active { overflow: hidden; }
  @media (max-width: 600px) {
    .intro-renglon { margin-bottom: 40px; padding-bottom: 14px; }
    .intro-quote { font-size: 1.25rem; padding: 0 8%; gap: 0.25em; }
    .intro-signature-line { flex: 0 0 32px; }
    .intro-signature-name { font-size: 0.66rem; letter-spacing: 0.18em; }
    .intro-skip { top: 14px; right: 14px; font-size: 0.58rem; padding: 6px 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .intro-renglon-line,
    .intro-quote-word,
    .intro-quote-word-underline,
    .intro-signature {
      animation: intro-simple-fade 400ms ease forwards !important;
      transform: none !important;
      filter: none !important;
    }
    .intro-curtain { transition: opacity 300ms ease; filter: none; }
    .intro-curtain.is-leaving { filter: none; }
  }
  @keyframes intro-simple-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* =======================================================
     DESIGN TOKENS — refined literary palette
     Terracotta + deep teal pairing, rich cream backdrop
     ======================================================= */
  :root {
    /* ═══════════════════════════════════════════════════
       Paleta nombrada por material: --ink es el color de la
       tinta y --paper el del papel. Cada uno se usa en los dos
       roles — la tinta como fondo oscuro y como texto sobre
       papel; el papel como superficie clara y como texto sobre
       la tinta. Los contrastes están verificados contra WCAG AA
       (4.5:1 texto normal, 3:1 texto grande y bordes de control).
       ═══════════════════════════════════════════════════ */

    /* Tinta — superficies oscuras y texto sobre papel */
    --ink: #111419;        /* fondo principal · 14.7:1 con --paper */
    --ink-input: #22262e;  /* campos de formulario */

    /* Papel — superficies claras y texto sobre la tinta */
    --paper: #eae5dd;      /* hueso, no crema dorada */
    --paper-warm: #f4ece0; /* página del lector */
    --paper-deep: #cfc9bf; /* texto secundario sobre oscuro · 9.9:1 */

    /* Texto atenuado — antes se hacía con opacidades que no se leían */
    --paper-muted: #908c86; /* sobre oscuro · 5.5:1 */
    --ink-soft: #4a4640;    /* sobre papel · 8.3:1 */
    --ink-mid: #5c5850;     /* sobre papel · 6.1:1 */
    --ink-muted: #6b665f;   /* sobre papel · 4.54:1 */

    /* Ámbar — el acento. Antes se llamaba --terracotta sin serlo. */
    --amber: #c08a4d;       /* 6.1:1 sobre la tinta, sirve de texto y de fondo de botón */
    --amber-deep: #8e5b27;  /* 4.56:1 sobre el papel */
    --amber-soft: #e0bd8a;  /* ornamentos y trazos finos */

    /* Verde de confirmación (WhatsApp) */
    --wa: #3d9a5a;          /* 5.2:1 sobre la tinta */

    /* Líneas */
    --rule: #5d636b;        /* bordes de controles · 3.04:1 */
    --rule-soft: #2e333b;   /* separadores decorativos */

    /* Typography */
    --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --body: 'Cormorant Garamond', Georgia, serif;
    --ui: 'Inter', system-ui, sans-serif;

    /* Spatial */
    --pad-x: clamp(1.5rem, 4vw, 5rem);
    --max-w: 1200px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--body);
    font-size: 1.15rem;
    line-height: 1.24;
    color: var(--paper);
    background: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }

  /* Subtle paper grain, always on */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(circle at 15% 20%, rgba(212, 161, 90, 0.07) 0%, transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(42, 69, 72, 0.09) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
  }

  /* =======================================================
     NAV — minimal, always visible top bar
     ======================================================= */
  .nav {
    position: sticky;
    top: 0; left: 0; right: 0;
    z-index: 90;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem var(--pad-x);
    background: rgba(243, 231, 204, 0.0);
    transition: background-color 0.5s, border-color 0.5s;
    border-bottom: 1px solid transparent;
  }
  .nav.solid {
    background: rgba(28, 29, 34, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(168, 135, 92, 0.25);
  }

  .brand {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
  }
  .brand:hover { color: var(--amber); }

  /* Hamburger button (always visible) */
  .menu-toggle {
    background: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    color: inherit;
    transition: all 0.35s ease;
    position: relative;
  }
  .menu-toggle:hover {
    background: currentColor;
  }
  .menu-toggle:hover .bar {
    background: var(--paper);
  }
  .nav.solid .menu-toggle:hover .bar {
    background: var(--ink);
  }
  .menu-toggle .bar {
    width: 18px;
    height: 1.2px;
    background: currentColor;
    transition: all 0.4s cubic-bezier(.7,.1,.3,1);
    transform-origin: center;
  }
  /* When menu is OPEN, morph into X */
  body.menu-open .menu-toggle .bar:nth-child(1) {
    transform: translateY(3px) rotate(45deg);
  }
  body.menu-open .menu-toggle .bar:nth-child(2) {
    transform: translateY(-3px) rotate(-45deg);
  }

  /* =======================================================
     MENU OVERLAY — slides in from right, full-height panel
     ======================================================= */
  .menu-panel {
    position: fixed;
    top: 0; right: 0;
    width: min(520px, 100vw);
    height: 100vh;
    background: var(--ink);
    color: var(--paper);
    z-index: 80;
    padding: clamp(4rem, 10vh, 7rem) clamp(2rem, 5vw, 5rem);
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
  }
  body.menu-open .menu-panel { transform: translateX(0); }

  /* Painterly gradient accent on menu panel */
  .menu-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
      radial-gradient(ellipse 500px 300px at 80% 20%, rgba(183, 78, 48, 0.18) 0%, transparent 70%),
      radial-gradient(ellipse 400px 250px at 20% 90%, rgba(30, 61, 63, 0.25) 0%, transparent 70%);
    pointer-events: none;
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 22, 0.55);
    backdrop-filter: blur(3px);
    z-index: 75;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
  }
  body.menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .menu-label {
    font-family: var(--ui);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--amber-soft);
    opacity: 0.6;
    margin-bottom: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    z-index: 1;
  }
  .menu-label::before {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
  }

  .menu-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    z-index: 1;
  }
  .menu-links a {
    display: block;
    padding: 0.7rem 0;
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    line-height: 0.95;
    color: var(--paper);
    text-decoration: none;
    letter-spacing: -0.01em;
    position: relative;
    transition: color 0.35s;
    opacity: 0.75;
  }
  .menu-links a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.18em;
    width: 0;
    height: 1px;
    background: var(--amber);
  }
  .menu-links a:hover,
  .menu-links a.current {
    color: var(--paper);
    opacity: 1;
  }

  .menu-footer {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
    border-top: 1px solid rgba(166, 132, 82, 0.2);
    font-family: var(--ui);
    font-weight: 300;
    font-size: 0.8rem;
    color: rgba(243, 231, 204, 0.55);
    letter-spacing: 0.05em;
  }
  .menu-footer a {
    color: var(--amber-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
  }
  .menu-footer a:hover { border-color: var(--amber-soft); }

  /* =======================================================
     VIEW SYSTEM — one at a time
     ======================================================= */
  .view {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
  }
  .view.active { display: block; }
  .view.active > * {
    animation: viewFadeIn 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
  @keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .view-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(7rem, 14vh, 10rem) var(--pad-x) clamp(4rem, 8vh, 6rem);
  }

  .eyebrow {
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--amber);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
  }
  .eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
  }

  .page-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 1.5rem;
  }

  .page-intro {
    font-size: 1.35rem;
    font-style: italic;
    color: var(--ink-mid);
    max-width: 620px;
    line-height: 1.27;
    margin-bottom: 4rem;
  }

  /* =======================================================
     VIEW: PARA LECTORES
     ======================================================= */
  /* .page-intro es compartido con /libros/, /autor/, etc. — el interlineado
     más apretado se pide solo para esta vista, así que va scopeado acá. */
  #view-para-lectores .page-intro { line-height: 1.12; }
  .lectores-rutas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 5rem);
  }
  .lectores-ruta {
    padding-top: 2rem;
    border-top: 1px solid rgba(240, 230, 210, 0.1);
  }
  .lectores-ruta-eyebrow {
    display: block;
    font-family: var(--ui);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber-soft);
    margin-bottom: 0.6rem;
  }
  .lectores-ruta-titulo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 0.95;
    color: var(--paper);
    margin-bottom: 0.9rem;
  }
  .lectores-ruta-texto {
    font-size: 1.05rem;
    line-height: 1.12;
    color: var(--paper-deep);
    margin-bottom: 1.75rem;
  }
  .lectores-ruta-codigo {
    font-family: var(--ui);
    font-size: 0.8rem;
    color: var(--paper-muted);
    margin-top: 0.9rem;
  }
  .lectores-ruta-codigo a {
    color: var(--amber-soft);
  }
  @media (max-width: 700px) {
    .lectores-rutas { grid-template-columns: 1fr; gap: 2.5rem; }
  }

  /* =======================================================
     VIEW: INICIO (hero)
     ======================================================= */
  #view-inicio {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  #view-inicio.active { display: flex; }

  .inicio-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .inicio-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.65) saturate(1.1);
  }
  .inicio-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right, rgba(10,8,14,0.72) 0%, rgba(10,8,14,0.50) 45%, rgba(10,8,14,0.18) 100%),
      linear-gradient(180deg, rgba(10, 8, 14, 0.52) 0%, rgba(10, 8, 14, 0.40) 45%, rgba(10, 8, 14, 0.88) 100%),
      radial-gradient(ellipse at 20% 50%, rgba(212, 161, 90, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, rgba(42, 69, 72, 0.08) 0%, transparent 50%);
  }

  .inicio-content {
    padding: 0 var(--pad-x);
    max-width: 900px;
    color: var(--paper);
  }
  .inicio-kicker {
    font-family: var(--ui);
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.8rem;
    color: var(--amber-soft);
  }
  .inicio-kicker::before,
  .inicio-kicker::after {
    content: "";
    width: 44px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  .inicio-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3.5rem, 10vw, 8.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--paper);
    margin-bottom: 2.5rem;
  }
  .inicio-title .ln2 {
    display: block;
    font-weight: 400;
    font-style: italic;
    opacity: 0.88;
    padding-left: 0.5em;
    margin-top: 0.1em;
  }

  .inicio-tagline {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.16;
    max-width: 540px;
    opacity: 0.9;
    margin-bottom: 3.5rem;
  }

  .inicio-enter {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--paper);
    background: transparent;
    border: 1px solid var(--paper);
    padding: 1rem 2rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .inicio-enter:hover {
    background: var(--paper);
    color: var(--ink);
    padding: 1rem 2.5rem;
  }
  .inicio-enter svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s;
  }
  .inicio-enter:hover svg { transform: translateX(4px); }

  /* =======================================================
     HERO REFINEMENTS — vignette, grain, sombras, animación
     ======================================================= */

  /* Paso 1: Vignette y gradiente inferior */
  #view-inicio { isolation: isolate; }
  #view-inicio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
    z-index: 1;
  }
  #view-inicio::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 35%;
    background: linear-gradient(to bottom, transparent, var(--ink) 95%);
    pointer-events: none;
    z-index: 1;
  }
  .inicio-content { position: relative; z-index: 2; }

  /* Paso 2: Grano SVG global */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    /* Relativa a assets/, que es donde vive esta hoja desde el refactor. */
    background-image: url('textures/grain.svg');
    background-size: 200px 200px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
  }

  /* Paso 3: Sombra en el nombre */
  .inicio-title {
    text-shadow:
      0 1px 2px rgba(0,0,0,0.25),
      0 4px 24px rgba(0,0,0,0.35);
  }

  /* Paso 4: Filete con rombos bajo el eyebrow */
  .inicio-kicker {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .inicio-kicker::before,
  .inicio-kicker::after { display: none; }
  .eyebrow-rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }
  .rule-line {
    width: 80px;
    height: 1px;
    background: color-mix(in srgb, var(--amber-soft) 70%, transparent);
  }
  .rule-diamond {
    width: 5px;
    height: 5px;
    background: var(--amber-soft);
    transform: rotate(45deg);
    opacity: 0.85;
  }

  /* Paso 5: Sombra warm en el botón */
  .inicio-enter {
    box-shadow:
      0 2px 12px rgba(201,169,106,0.08),
      0 8px 32px rgba(0,0,0,0.25);
  }
  .inicio-enter:hover {
    box-shadow:
      0 4px 18px rgba(201,169,106,0.15),
      0 12px 40px rgba(0,0,0,0.35);
  }

  /* Paso 6: Indicador de scroll */
  .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
  }
  .scroll-line {
    display: block;
    width: 1px;
    height: 56px;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--amber-soft) 60%, transparent),
      transparent
    );
    animation: scroll-breathe 2.4s ease-in-out infinite;
  }
  @keyframes scroll-breathe {
    0%, 100% { opacity: 0.4; transform: scaleY(0.7); }
    50%       { opacity: 1;   transform: scaleY(1); }
  }

  /* Paso 7: Animación de entrada en cascada */
  @keyframes hero-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-anim {
    opacity: 0;
    animation: hero-enter 900ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  }
  .hero-anim-1 { animation-delay: 100ms; }
  .hero-anim-2 { animation-delay: 350ms; }
  .hero-anim-3 { animation-delay: 600ms; }
  .hero-anim-4 { animation-delay: 850ms; }

  @media (prefers-reduced-motion: reduce) {
    .hero-anim  { animation: none; opacity: 1; transform: none; }
    .scroll-line { animation: none; opacity: 0.6; }
  }

  /* =======================================================
     VIEW: LIBROS — book vitrine
     ======================================================= */
  .books-list {
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 10vh, 7rem);
    margin-top: 3rem;
  }

  .book {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-top: clamp(2rem, 5vh, 4rem);
    border-top: 1px solid rgba(240, 230, 210, 0.1);
  }
  .book:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .book:nth-child(even) .book-cover-wrap { order: 2; }
  .book:nth-child(even) .book-info { order: 1; }

  @media (max-width: 820px) {
    .book, .book:nth-child(even) {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .book:nth-child(even) .book-cover-wrap,
    .book:nth-child(even) .book-info { order: initial; }
  }

  .book-cover-wrap {
    perspective: 1600px;
  }
  .book-cover {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    cursor: pointer;
  }
  .book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow:
      0 4px 12px rgba(20, 10, 18, 0.12),
      0 18px 40px -14px rgba(20, 10, 18, 0.3),
      0 45px 80px -25px rgba(20, 10, 18, 0.35);
    transition: box-shadow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .book-cover:hover {
    transform: rotateY(-5deg) rotateX(1.5deg) translateY(-6px);
  }
  .book-cover:hover img {
    box-shadow:
      0 6px 14px rgba(20, 10, 18, 0.15),
      0 30px 65px -18px rgba(20, 10, 18, 0.4),
      0 70px 120px -35px rgba(20, 10, 18, 0.45);
  }

  .book-genre {
    display: inline-block;
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1.25rem;
  }
  .book-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 0.7rem;
  }
  .book-year {
    font-family: var(--ui);
    font-weight: 400;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-muted);
    letter-spacing: 0.2em;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.8rem;
  }
  .book-year::before,
  .book-year::after {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--rule-soft);
  }

  .book-synopsis {
    font-size: 1.25rem;
    line-height: 1.31;
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
    max-width: 52ch;
  }

  .book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .btn {
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.95rem 1.7rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: none;
    color: inherit;
  }
  .btn svg {
    width: 13px;
    height: 13px;
    transition: transform 0.3s;
  }

  .btn-primary {
    background: var(--amber);
    color: var(--ink);
    border-color: var(--amber);
  }
  .btn-primary:hover {
    background: var(--amber-deep);
    border-color: var(--amber-deep);
    color: var(--ink);
  }
  .btn-primary:hover svg { transform: translateX(3px); }

  .btn-ghost {
    color: var(--paper);
    border-color: var(--paper-muted);
  }
  .btn-ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }

  /* =======================================================
     VIEW: AUTOR
     ======================================================= */
  #view-autor { background: var(--ink); }

  .autor-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  @media (max-width: 820px) {
    .autor-grid { grid-template-columns: 1fr; }
  }

  .autor-photo {
    position: relative;
    max-width: 300px;
  }
  .autor-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(1) contrast(1.02);
    box-shadow:
      0 10px 30px rgba(20, 10, 18, 0.15),
      0 30px 60px rgba(20, 10, 18, 0.1);
  }
  .autor-photo::before {
    content: "";
    position: absolute;
    inset: -12px -12px auto auto;
    width: 100%;
    aspect-ratio: 3/4;
    border: 1px solid var(--amber);
    z-index: -1;
  }

  .autor-name {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    color: var(--ink);
    margin-bottom: 0.4rem;
    line-height: 0.95;
  }
  .autor-origin {
    font-family: var(--ui);
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--amber);
    margin-bottom: 2rem;
    text-transform: uppercase;
  }
  .autor-bio {
    font-size: 1.3rem;
    line-height: 1.35;
    color: var(--ink-soft);
  }
  .autor-bio p + p { margin-top: 1.3rem; }

  .autor-quote {
    margin-top: 3.5rem;
    padding: 0.5rem 0 0.5rem 2rem;
    border-left: 2px solid var(--amber);
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.05;
    color: var(--ink);
    max-width: 580px;
  }
  .autor-quote cite {
    display: block;
    font-family: var(--ui);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 1rem;
  }


  /* =======================================================
     VIEW: CONTACTO
     ======================================================= */
  .contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (max-width: 720px) {
    .contacto-grid { grid-template-columns: 1fr; }
  }

  .contacto-email {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--amber);
    text-decoration: none;
    border-bottom: 1px solid var(--amber-deep);
    padding-bottom: 0.2rem;
    transition: all 0.3s;
  }
  .contacto-email:hover {
    color: var(--ink);
    border-color: var(--ink);
  }

  .social {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
  }
  .social a {
    width: 44px; height: 44px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    transition: all 0.35s;
  }
  .social a:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translateY(-2px);
  }
  .social svg { width: 16px; height: 16px; }

  .contacto-form {
    background: var(--paper-warm);
    padding: 2.5rem;
    border: 1px solid rgba(184, 146, 104, 0.3);
  }
  .contacto-form h3 {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
  }
  .contacto-form p {
    font-size: 0.95rem;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
  }
  .contacto-form label {
    display: block;
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 1rem 0 0.4rem;
  }
  .contacto-form input,
  .contacto-form textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
  }
  .contacto-form input:focus,
  .contacto-form textarea:focus {
    border-color: var(--amber);
  }
  .contacto-form textarea { min-height: 100px; resize: vertical; }
  .contacto-form button { margin-top: 1.5rem; width: 100%; }

  /* =======================================================
     READER — scroll horizontal con snap
     ======================================================= */
  .reader {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--paper-warm);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
  }
  .reader.open { transform: translateY(0); }

  /* Cursor nativo dentro del lector — sin efectos de compositing sobre el texto */
  .reader * { cursor: inherit; }
  .reader .page-poem-verses,
  .reader .page-p { cursor: default; }
  .reader button,
  .reader [role="button"] { cursor: pointer; }
  /* Ocultar cualquier cursor custom que pudiera existir */
  .reader.open ~ [class*="cursor"],
  body.reader-open [class*="cursor"] { display: none !important; }

  .reader-top {
    flex-shrink: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--paper-warm) 97%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.85rem var(--pad-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(168, 135, 92, 0.3);
  }
  .reader-top-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
  }
  .reader-top-title span {
    color: var(--amber-deep);
    font-size: 0.82rem;
    margin-left: 0.5rem;
  }
  .reader-top-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .reader-mute {
    background: none;
    border: 1px solid rgba(63, 66, 75, 0.25);
    border-radius: 999px;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .reader-mute:hover { border-color: var(--amber-deep); color: var(--amber-deep); }
  .reader-mute.muted { color: rgba(63, 66, 75, 0.2); }
  .reader-mute svg { width: 16px; height: 16px; }
  .reader-close {
    background: none;
    border: 1px solid rgba(63, 66, 75, 0.3);
    border-radius: 999px;
    padding: 0.45rem 1.1rem 0.45rem 0.9rem;
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
  }
  .reader-close:hover { border-color: var(--ink); color: var(--ink); }

  /* Progress bar */
  .reader-progress-bar {
    flex-shrink: 0;
    height: 2px;
    background: rgba(168, 135, 92, 0.15);
  }
  .reader-progress-fill {
    height: 100%;
    background: var(--amber);
    width: 0%;
    transition: width 0.35s ease;
  }

  /* Pages track — horizontal snap container */
  .pages-track {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pages-track::-webkit-scrollbar { display: none; }

  /* Individual page slide */
  .page {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem clamp(1.5rem, 6vw, 5rem);
    box-sizing: border-box;
    background: var(--paper-warm);
  }

  /* Paper card inside each slide */
  .page-content {
    max-width: 600px;
    width: 100%;
    background: var(--paper-warm);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0.03 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3.5vw, 3rem);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.08),
      0 24px 60px rgba(0,0,0,0.06);
    border: 1px solid rgba(184, 146, 104, 0.08);
    border-radius: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow: hidden;
  }

  /* Poetry cards: altura fija, scroll vertical interno si el poema es largo */
  .page-content--poetry {
    align-self: stretch;
    max-height: calc(100vh - 180px);
    height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transition: scrollbar-color 0.2s;
  }
  .page-content--poetry:hover {
    scrollbar-color: rgba(184,146,104,0.35) transparent;
  }
  .page-content--poetry::-webkit-scrollbar { width: 5px; }
  .page-content--poetry::-webkit-scrollbar-track { background: transparent; }
  .page-content--poetry::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s;
  }
  .page-content--poetry:hover::-webkit-scrollbar-thumb {
    background: rgba(184,146,104,0.35);
  }
  /* Poema corto: centrar verticalmente */
  .page-content--poetry.short-poem {
    justify-content: center;
  }
  /* Indicador de scroll: pseudo-elemento sobre la card, fuera del flujo de texto */
  .page-content--poetry {
    position: relative;  /* ancla el ::after */
  }
  .page-content--poetry::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 52px;
    margin-top: -52px;
    background: linear-gradient(to bottom, transparent, var(--paper-warm));
    pointer-events: none;
    transition: opacity 0.35s;
    flex-shrink: 0;
  }
  .page-content--poetry.short-poem::after,
  .page-content--poetry.scroll-end::after { opacity: 0; }
  /* Clase legacy por si queda algún .poem-scroll-fade en el DOM */
  .poem-scroll-fade { display: none !important; }

  /* Cover slide */
  .page.page-cover { background: var(--paper-warm); }
  .page.page-cover .page-content {
    max-width: 340px;
    padding: 8px;           /* respiro alrededor de la imagen */
    overflow: hidden;
    background: #1c1d22;
    aspect-ratio: 3/4;
    max-height: calc(100vh - 180px);
  }
  .page.page-cover .page-content img {
    width: 100%; height: 100%;
    object-fit: contain;    /* imagen completa, sin recorte */
    display: block;
  }

  /* CTA / closing slide */
  .page.page-cta { background: var(--paper-deep); }
  .page.page-cta .page-content {
    background: var(--paper-deep);
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: none;
  }

  /* Back cover slide */
  .page.page-back { background: #1c1d22; }
  .page.page-back .page-content {
    max-width: 360px;
    padding: 0;
    overflow: hidden;
    background: #1c1d22;
    aspect-ratio: 3/4;
    max-height: calc(100vh - 180px);
    position: relative;
  }
  .page.page-back .page-content img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.28) saturate(0.55);
  }
  .page-back-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
  }
  .page-back-fleuron { width: 72px; opacity: 0.65; margin-bottom: 1.4rem; }
  .page-back-title {
    font-family: 'Fraunces', serif;
    font-style: italic; font-weight: 300;
    font-size: 1.05rem; color: #f0e6d2;
    display: block; margin-bottom: 0.55rem;
    letter-spacing: 0.02em;
  }
  .page-back-author {
    font-family: 'Inter', sans-serif;
    font-size: 0.5rem; font-weight: 300;
    letter-spacing: 0.38em; text-transform: uppercase;
    color: rgba(212, 161, 90, 0.8); display: block;
  }

  /* Prose */
  .page-prose { flex: 1; overflow: hidden; }
  .page-p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.22;
    color: #2d2f37;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    margin-bottom: 0.65em;
    text-indent: 1.4em;
  }
  .page-p:first-child { text-indent: 0; }
  .page-dropcap {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 3.4em;
    float: left;
    line-height: 0.6;
    padding: 0.1em 0.28em 0 0;
    color: #a87e3f;
  }

  /* Poetry — centrada verticalmente */
  .page-poems {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page-poem { text-align: center; width: 100%; }

  /* Jerarquía visual del título de poema */
  .poem-title-block { text-align: center; margin-bottom: 3rem; }
  .poem-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 2.5rem;
    color: var(--amber);
    line-height: 0.75;
    display: block;
    margin-bottom: 0.15em;
  }
  .poem-name {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 0.83;
    display: block;
    margin-bottom: 0.85em;
  }
  .poem-rule-svg { display: block; margin: 0 auto; width: 80px; height: 12px; }

  /* Versos */
  .page-poem-verses {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.39;
    color: #2d2f37;
    font-style: italic;
  }
  .page-verse { display: block; }
  .page-verse.stanza-end { margin-bottom: 1.2rem; }

  /* Ornamento al final del poema */
  .poem-ornament { display: flex; justify-content: center; margin-top: 2.5rem; }
  .poem-ornament svg { width: 34px; opacity: 0.6; }

  /* Folio */
  .page-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-top: 0.5em;
    margin-top: auto;
    border-top: 1px solid rgba(168, 135, 92, 0.18);
  }
  .page-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.52rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: #a87e3f;
  }

  /* CTA page elements */
  .page-cta-fleuron { margin-bottom: 1.6rem; }
  .page-cta-fleuron svg { width: 60px; display: block; margin: 0 auto; }
  .page-closing-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: #a87e3f;
    margin-bottom: 1.4em;
  }
  .page-closing-message {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.31;
    color: #2d2f37;
    max-width: 28ch;
    margin: 0 auto 2rem;
  }
  .page-closing-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.1rem 2rem;
    background: #d4a15a;
    color: #2d2f37;
    border: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.25s;
    border-radius: 1px;
  }
  .page-closing-btn:hover { background: #a87e3f; }
  .page-closing-btn.pulse { animation: btn-pulse 0.4s ease; }
  @keyframes btn-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  /* Navigation controls */
  .reader-controls {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--paper-warm) 97%, transparent);
    border-top: 1px solid rgba(168, 135, 92, 0.3);
    padding: 0.7rem var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  .reader-nav {
    background: none;
    border: 1px solid rgba(63, 66, 75, 0.22);
    color: var(--ink-mid);
    font-family: var(--ui);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .reader-nav:hover { border-color: var(--amber-deep); color: var(--amber-deep); }
  .reader-nav:disabled { opacity: 0.2; cursor: default; pointer-events: none; }
  .reader-page-indicator {
    font-family: var(--ui);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--amber-deep);
    min-width: 6rem;
    text-align: center;
  }

  /* =======================================================
     PURCHASE MODAL (small popup) — rediseño editorial
     ======================================================= */
  .modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .modal-bg.open { opacity: 1; visibility: visible; }
  .modal {
    background: var(--paper);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.97) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
  }
  .modal-bg.open .modal { transform: scale(1) translateY(0); }
  .modal-header {
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(197, 168, 122, 0.2);
    flex-shrink: 0;
  }
  .modal-close {
    position: absolute;
    top: 0.8rem; right: 0.9rem;
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--ink-muted);
    cursor: pointer;
    line-height: 0.75;
    transition: background 0.18s, color 0.18s;
  }
  .modal-close:hover { background: var(--paper-deep); color: var(--ink); }
  .modal-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .modal-eyebrow {
    font-family: var(--ui);
    font-weight: 400;
    font-size: 0.67rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amber);
    display: block;
    margin-bottom: 0.35rem;
  }
  .modal h2 {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 0.95;
    padding-right: 2rem;
  }
  .modal-intro {
    font-family: var(--ui);
    font-size: 0.8rem;
    line-height: 1.16;
    color: var(--ink-mid);
    margin-top: 0.55rem;
  }
  .modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 1rem 1.1rem 1.4rem;
    scroll-behavior: smooth;
  }
  .modal-channels {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  /* Separador con etiqueta */
  .channel-group-label {
    font-family: var(--ui);
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0.75rem 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .channel-group-label::before,
  .channel-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--paper-deep);
  }
  /* Base de canales (links y details) */
  .modal-channels a,
  .modal-channels details.channel {
    background: var(--paper-warm);
    border: 1px solid rgba(197, 168, 122, 0.3);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--ui);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .modal-channels a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    text-decoration: none;
    font-size: 0.88rem;
  }
  .modal-channels a:hover:not(.channel-disabled) {
    border-color: var(--amber);
    box-shadow: 0 2px 8px rgba(212,161,90,0.15);
  }
  .modal-channels a:focus-visible,
  .modal-channels details.channel > summary:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
  }
  /* Avatar circular */
  .channel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 400;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.07);
  }
  /* Bloque nombre + subtítulo */
  .channel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .channel-name { font-weight: 500; font-size: 0.88rem; color: var(--ink); }
  .channel-sub  { font-size: 0.73rem; color: var(--ink-mid); }
  /* Badge de región */
  .channel-badge {
    font-family: var(--ui);
    font-size: 0.67rem;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: var(--paper-deep);
    color: var(--ink-mid);
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Chevron SVG */
  .channel-chevron {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .modal-channels details.channel > summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
  }
  .modal-channels details.channel > summary::-webkit-details-marker { display: none; }
  .modal-channels details.channel > summary::marker { display: none; content: ''; }
  .modal-channels details.channel:hover > summary { background: rgba(212,161,90,0.05); }
  .modal-channels details.channel[open] .channel-chevron { transform: rotate(90deg); }
  .modal-channels details.channel[open] > summary {
    border-bottom: 1px solid rgba(197,168,122,0.22);
    background: rgba(212,161,90,0.04);
  }
  /* Cuerpo expandido */
  .channel-body {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    animation: chBodyFadeIn 0.18s ease;
  }
  @keyframes chBodyFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .channel-qr {
    width: 180px;
    height: 180px;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(197,168,122,0.22);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    flex-shrink: 0;
  }
  /* Lista de datos */
  .channel-data {
    margin: 0;
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .channel-data-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0 0.5rem;
    align-items: center;
  }
  .channel-data-row dt {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .channel-data-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--ink);
    word-break: break-all;
  }
  /* Botón copiar */
  .copy-btn {
    background: none;
    border: 1px solid rgba(197,168,122,0.4);
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    padding: 0;
  }
  .copy-btn:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink-muted); }
  .copy-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .copy-btn.copied { background: var(--amber); color: var(--ink); border-color: var(--amber); }
  .copy-btn svg { width: 11px; height: 11px; }
  .copy-btn .icon-check { display: none; }
  .copy-btn.copied .icon-copy { display: none; }
  .copy-btn.copied .icon-check { display: block; }
  /* Nota contextual al pie de cada método */
  .channel-note {
    width: 100%;
    font-family: var(--ui);
    font-size: 0.74rem;
    color: var(--ink-mid);
    font-style: italic;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(197,168,122,0.18);
    margin-top: 0.2rem;
    line-height: 1.12;
  }
  /* Canales deshabilitados */
  .channel-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }
  /* Responsivo móvil */
  @media (max-width: 600px) {
    .modal { max-width: 94vw; border-radius: 14px; }
    .channel-body { flex-direction: column; align-items: stretch; }
    .channel-qr { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; margin: 0 auto; }
    .copy-btn { opacity: 1; }
  }

  /* =======================================================
     MODAL DE COMPRA — nuevo flujo híbrido
     ======================================================= */
  .buy-modal-content {
    background: var(--paper-warm);
    color: var(--ink);
    padding: 16px clamp(16px, 4vw, 32px);
    max-width: 420px;
    width: calc(100% - 32px);
    border-radius: 6px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
      0 24px 60px rgba(20, 12, 6, 0.45),
      0 8px 24px rgba(20, 12, 6, 0.25);
  }
  .buy-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    line-height: 0.75;
  }
  .buy-modal-close:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
  }
  .buy-modal-close:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
  }
  .buy-modal-header {
    text-align: center;
    margin-bottom: 8px;
    padding-top: 4px;
  }
  .buy-modal-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
    line-height: 0.95;
    margin: 0 0 2px;
    color: var(--ink);
    padding-right: 2rem;
  }
  .buy-modal-subtitle {
    font-family: var(--body, system-ui);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    margin: 0 0 4px;
    line-height: 0.95;
  }
  .buy-modal-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 130px;
    margin: 6px auto;
  }
  .buy-modal-rule .rule-line {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--amber-soft) 50%, transparent);
    width: auto;
  }
  .buy-modal-rule .rule-diamond {
    color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
    font-size: 0.55rem;
  }
  .buy-payment-block { margin: 6px 0; }
  .buy-payment-heading {
    font-family: var(--body, system-ui);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
    text-align: center;
    margin: 0 0 8px;
    font-weight: 500;
  }
  .buy-qr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 240px;
    margin: 0 auto 12px;
  }
  .buy-qr {
    margin: 0;
    padding: 6px 6px 4px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 4px;
    text-align: center;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    /* reset button styles */
    all: unset;
    display: block;
    padding: 6px 6px 4px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 4px;
    text-align: center;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }
  .buy-qr:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20, 12, 6, 0.18);
  }
  .buy-qr:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--amber-soft) 70%, transparent);
    outline-offset: 2px;
  }
  .buy-qr img {
    width: 110%;
    height: auto;
    max-width: 110%;
    display: block;
    margin: -5% -5% -5% -5%;
    background: transparent;
  }
  .buy-qr-caption {
    display: block;
    font-family: var(--body, system-ui);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    margin-top: 4px;
    position: relative;
    z-index: 2;
  }
  /* tooltip hover */
  .buy-qr::after {
    content: 'Ampliar';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(20, 12, 6, 0.85);
    color: var(--paper-warm);
    padding: 3px 10px;
    border-radius: 12px;
    font-family: var(--body, system-ui);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
    white-space: nowrap;
  }
  .buy-qr:hover::after,
  .buy-qr:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
  .buy-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px auto 8px;
    max-width: 280px;
  }
  .buy-divider .rule-line {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    width: auto;
  }
  .buy-divider-text {
    font-family: var(--body, system-ui);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    white-space: nowrap;
  }
  .buy-bank-data {
    margin: 0 auto;
    max-width: 360px;
    font-family: var(--body, system-ui);
    line-height: 0.75;
  }
  .buy-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    min-height: 30px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    gap: 12px;
  }
  .buy-bank-row:last-child { border-bottom: none; }
  .buy-bank-row dt {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    margin: 0;
    flex-shrink: 0;
    line-height: 0.75;
  }
  .buy-bank-row dd {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink);
    text-align: right;
    line-height: 0.95;
  }
  .buy-bank-row code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.74rem;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 0.95;
  }
  .buy-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    margin: 8px 0 4px;
    background: var(--ink);
    color: var(--paper-warm);
    border: 1px solid var(--ink);
    font-family: var(--body, system-ui);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  .buy-confirm-btn:hover {
    background: color-mix(in srgb, var(--ink) 85%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(20, 12, 6, 0.3);
  }
  .buy-confirm-btn:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }
  .buy-confirm-arrow { transition: transform 0.3s ease; display: inline-block; }
  .buy-confirm-btn:hover .buy-confirm-arrow { transform: translateX(4px); }
  .buy-help-note {
    font-family: var(--body, system-ui);
    font-size: 0.66rem;
    text-align: center;
    color: color-mix(in srgb, var(--ink) 58%, transparent);
    margin: 4px 0 0;
    font-style: italic;
    line-height: 0.98;
  }
  /* Estilos listos para cuando se descomente el bloque Payhip */
  .buy-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    margin: 12px 0;
    background: color-mix(in srgb, var(--amber-soft) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber-soft) 50%, transparent);
    border-radius: 3px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  .buy-option:hover {
    background: color-mix(in srgb, var(--amber-soft) 22%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 12, 6, 0.18);
  }
  .buy-option-icon { font-size: 1.35rem; }
  .buy-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .buy-option-label {
    font-family: var(--body, system-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .buy-option-hint {
    font-family: var(--body, system-ui);
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
    letter-spacing: 0.03em;
  }
  .buy-option-arrow {
    font-size: 1rem;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
    transition: transform 0.3s ease;
  }
  .buy-option:hover .buy-option-arrow { transform: translateX(4px); }
  @media (max-width: 600px) {
    .buy-modal-content { padding: 12px 12px; max-height: 96vh; width: calc(100% - 16px); }
    .buy-modal-title { font-size: 1.05rem; }
    .buy-qr-grid { gap: 6px; max-width: 100%; }
    .buy-bank-row code, .buy-copy-target { font-size: 0.7rem; word-break: break-all; }
    .buy-confirm-btn { padding: 10px 14px; font-size: 0.66rem; }
  }

  /* ── Botones de copiar en el modal ── */
  .buy-bank-row dd {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
  }
  .buy-yape-data {
    margin: 0 auto;
    max-width: 380px;
    font-family: var(--body, system-ui);
    line-height: 0.75;
  }
  .buy-yape-data .buy-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  }
  .buy-yape-data .buy-bank-row:last-child { border-bottom: none; }
  .buy-yape-data dt {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    margin: 0;
    flex-shrink: 0;
  }
  .buy-yape-data dd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  .buy-copy-target {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.74rem;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--ink);
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: all;
    transition: background 0.2s ease;
    line-height: 0.95;
  }
  .buy-copy-target:hover {
    background: color-mix(in srgb, var(--amber-soft) 18%, transparent);
  }
  .buy-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: 3px;
    color: color-mix(in srgb, var(--ink) 68%, transparent);
    font-family: var(--body, system-ui);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    line-height: 0.75;
  }
  .buy-copy-btn:hover {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    border-color: color-mix(in srgb, var(--ink) 32%, transparent);
    color: var(--ink);
  }
  .buy-copy-btn:active { transform: scale(0.95); }
  .buy-copy-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--amber-soft) 70%, transparent);
    outline-offset: 2px;
  }
  .buy-copy-icon svg { display: block; width: 11px; height: 11px; }
  .buy-copy-btn.is-copied {
    background: color-mix(in srgb, #2d8a47 14%, transparent);
    border-color: color-mix(in srgb, #2d8a47 55%, transparent);
    color: #2d8a47;
  }
  .buy-copy-announcer {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  @media (max-width: 600px) {
    .buy-yape-data .buy-bank-row,
    .buy-bank-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 0; }
    .buy-bank-row dd,
    .buy-yape-data dd { width: 100%; justify-content: space-between; display: flex; align-items: center; gap: 6px; }
    .buy-bank-row code, .buy-copy-target { font-size: 0.7rem; word-break: break-all; }
    .buy-copy-btn { padding: 4px 8px; font-size: 0.56rem; }
  }

  /* =======================================================
     LIGHTBOX QR
     ======================================================= */
  .qr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 12, 6, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: qr-lightbox-fade 0.25s ease-out;
  }
  .qr-lightbox[hidden] { display: none; }
  @keyframes qr-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .qr-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper-warm) 35%, transparent);
    color: var(--paper-warm);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
  }
  .qr-lightbox-close:hover {
    background: color-mix(in srgb, var(--paper-warm) 12%, transparent);
    transform: rotate(90deg);
  }
  .qr-lightbox-close:focus-visible {
    outline: 2px solid var(--amber-soft);
    outline-offset: 3px;
  }
  .qr-lightbox-content {
    background: var(--paper-warm);
    padding: clamp(24px, 4vh, 40px);
    border-radius: 8px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    animation: qr-lightbox-zoom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes qr-lightbox-zoom {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
  }
  .qr-lightbox-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    margin: 0 0 20px;
    color: var(--ink);
  }
  .qr-lightbox-image-wrap {
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    margin: 0 auto 18px;
    display: inline-block;
  }
  .qr-lightbox-image {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0;
  }
  .qr-lightbox-actions { margin-bottom: 14px; }
  .qr-lightbox-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--ink);
    color: var(--paper-warm);
    border: none;
    font-family: var(--body, system-ui);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  .qr-lightbox-download:hover {
    background: color-mix(in srgb, var(--ink) 86%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 12, 6, 0.3);
  }
  .qr-lightbox-hint {
    font-family: var(--body, system-ui);
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
    font-style: italic;
    margin: 0 auto;
    max-width: 38em;
    line-height: 1.05;
  }
  @media (max-width: 600px) {
    .qr-lightbox { padding: 16px; }
    .qr-lightbox-content { padding: 24px 18px; }
    .qr-lightbox-image { max-width: 280px; }
    .qr-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    .qr-lightbox-download { padding: 11px 18px; font-size: 0.7rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .qr-lightbox, .qr-lightbox-content { animation: none; }
  }

  /* =======================================================
     VISTA #confirmar-pago
     ======================================================= */
  .view-confirmar {
    background: var(--paper-warm);
    color: var(--ink);
    min-height: calc(100vh - 80px);
    padding: clamp(48px, 8vh, 88px) clamp(20px, 5vw, 60px) clamp(60px, 9vh, 100px);
  }
  .confirmar-inner {
    max-width: 540px;
    margin: 0 auto;
  }
  .confirmar-header {
    text-align: center;
    margin-bottom: clamp(28px, 4vh, 44px);
  }
  .confirmar-eyebrow {
    display: block;
    font-family: var(--body, system-ui);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--amber-deep);
    margin-bottom: 10px;
  }
  .confirmar-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 0.95;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .confirmar-book-name {
    font-family: var(--body, system-ui);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
    margin: 0;
  }
  .confirmar-form {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 6px;
    padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 36px);
    box-shadow: 0 4px 24px rgba(20, 12, 6, 0.08);
  }
  .confirmar-field {
    margin-bottom: 20px;
  }
  .confirmar-field:last-of-type { margin-bottom: 28px; }
  .confirmar-label {
    display: block;
    font-family: var(--body, system-ui);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .confirmar-input,
  .confirmar-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: 3px;
    background: var(--paper-warm);
    color: var(--ink);
    font-family: var(--body, system-ui);
    font-size: 0.92rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
  }
  .confirmar-input:focus,
  .confirmar-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-soft) 18%, transparent);
  }
  .confirmar-select-wrap {
    position: relative;
  }
  .confirmar-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    pointer-events: none;
    font-size: 0.8rem;
  }
  .confirmar-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: var(--amber);
    color: var(--ink);
    border: none;
    font-family: var(--body, system-ui);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  .confirmar-submit:hover {
    background: color-mix(in srgb, var(--amber) 88%, black);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(183, 78, 48, 0.35);
  }
  .confirmar-submit:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }
  .confirmar-submit-arrow { transition: transform 0.3s ease; display: inline-block; }
  .confirmar-submit:hover .confirmar-submit-arrow { transform: translateX(4px); }
  .confirmar-email-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-family: var(--body, system-ui);
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    text-decoration: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .confirmar-email-link:hover { color: var(--ink); text-decoration: underline; }
  /* Panel de éxito post-envío */
  .confirmar-success {
    display: none;
    text-align: center;
    padding: clamp(24px, 4vh, 40px) 20px;
  }
  .confirmar-success.visible { display: block; }
  .confirmar-success-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
    display: block;
  }
  .confirmar-success-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--ink);
    margin: 0 0 10px;
  }
  .confirmar-success-body {
    font-family: var(--body, system-ui);
    font-size: 0.88rem;
    line-height: 1.2;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
    margin: 0 0 24px;
  }
  .confirmar-back-link {
    font-family: var(--body, system-ui);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-block;
    margin-top: 8px;
  }
  .confirmar-back-link:hover { color: var(--ink); }
  @media (max-width: 760px) {
    .view-confirmar { padding: 36px 16px 60px; }
    .confirmar-form { padding: 22px 16px; }
  }

  /* =======================================================
     FOOTER (shared)
     ======================================================= */
  footer {
    background: var(--ink);
    color: rgba(243, 231, 204, 0.65);
    padding: clamp(40px, 6vh, 80px) var(--pad-x) clamp(20px, 3vh, 40px);
    text-align: center;
    font-family: var(--ui);
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
  }
  footer .fleuron {
    display: block;
    margin: 0 auto 1.5rem;
    width: 130px;
    color: var(--amber-soft);
    opacity: 0.5;
  }
  footer small {
    display: block;
    margin-top: 0.8rem;
    font-size: 0.7rem;
    opacity: 0.55;
    letter-spacing: 0.03em;
  }

  /* Responsive — Mobile (<768px) */
  @media (max-width: 767px) {
    .page {
      padding: 1rem 0.75rem;
      align-items: flex-start;
      padding-top: 1.25rem;
    }
    .page-content {
      max-width: 100%;
      max-height: calc(100vh - 160px);
      padding: 1.75rem 1.25rem;
    }
    .page.page-cover .page-content,
    .page.page-back .page-content {
      max-width: 240px;
      margin: 0 auto;
    }
    .page-p { font-size: 1.05rem; line-height: 1.24; }
    .page-poem-title { font-size: 0.9rem; }
    .page-poem-verses { font-size: 1rem; }
    .reader-controls {
      gap: 0.75rem;
      padding: 0.6rem 0.75rem;
    }
    .reader-nav {
      min-height: 44px;
      padding: 0 0.85rem;
      font-size: 0.65rem;
    }
    .reader-page-indicator {
      font-size: 0.65rem;
      min-width: 4.5rem;
    }
    .reader-top { padding: 0.65rem 1rem; }
    .reader-top-title { font-size: 0.88rem; }
  }

  /* =======================================================
     MOODY DARK THEME — overrides de contexto oscuro
     ======================================================= */

  /* Tipografía estructural en fondo oscuro */
  .page-title { color: var(--paper); }
  .page-intro { color: var(--paper-deep); }

  /* Libros en fondo oscuro */
  .book-title   { color: var(--paper); }
  .book-year    { color: var(--amber-soft); }
  .book-synopsis { color: var(--paper-deep); }

  /* Autor */
  .autor-name   { color: var(--paper); }
  .autor-bio    { color: var(--paper-deep); }
  .autor-quote  { color: var(--paper); }
  .autor-quote cite { color: var(--amber-soft); }
  .autor-photo::before { border-color: var(--amber); }

  /* Contacto — email link */
  .contacto-email {
    color: var(--amber);
    border-bottom-color: var(--amber-deep);
  }
  .contacto-email:hover {
    color: var(--paper);
    border-color: var(--paper);
  }

  /* Ícono social (solo correo visible) */
  .social a {
    border-color: var(--amber-soft);
    color: var(--amber-soft);
  }
  .social a:hover {
    background: var(--amber);
    color: var(--ink);
    border-color: var(--amber);
    transform: translateY(-2px);
  }

  /* Formulario de contacto */
  .contacto-form {
    background: var(--ink-input);
    border-color: rgba(240, 230, 210, 0.1);
  }
  .contacto-form h3 { color: var(--paper); }
  .contacto-form p  { color: var(--paper-deep); }
  .contacto-form label { color: var(--amber-soft); }
  .contacto-form input,
  .contacto-form textarea {
    background: var(--ink);
    border-color: var(--ink-mid);
    color: var(--paper);
  }
  .contacto-form input::placeholder,
  .contacto-form textarea::placeholder { color: var(--paper-muted); opacity: 1; }
  .contacto-form input:focus,
  .contacto-form textarea:focus { border-color: var(--amber); }

  /* Lector 3D — wrapper oscuro, páginas claras internamente (no override needed) */

  /* Modal de compra — siempre sobre fondo paper (sin override needed, ya definido arriba) */

  /* =======================================================
     SECCIÓN COMPRAR — tabs de pago
     ======================================================= */
  .libro-compra {
    border-top: 1px solid rgba(168,135,92,0.18);
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }
  .compra-header {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .compra-titulo {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.9rem;
    font-weight: 300;
    color: var(--paper);
    line-height: 0.83;
  }
  .compra-precio-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .precio-monto {
    font-family: var(--display);
    font-style: italic;
    font-size: 2.4rem;
    color: var(--amber);
    line-height: 0.75;
  }
  .precio-formato {
    font-family: var(--ui);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-muted);
    margin-top: 0.2rem;
  }

  /* Tab buttons */
  .compra-tab-btns {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(168,135,92,0.2);
    flex-wrap: wrap;
  }
  .compra-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ui);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: none;
    border: none;
    color: var(--paper-muted);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
  }
  .compra-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .compra-tab-btn.active {
    color: var(--paper);
  }
  .compra-tab-btn.active::after { transform: scaleX(1); }
  .compra-tab-btn:hover { color: rgba(240,230,210,0.8); }
  .compra-tab-btn svg { flex-shrink: 0; }

  /* Tab panels */
  .compra-tab-panels { position: relative; }
  .compra-panel {
    display: none;
    animation: panelFadeIn 0.2s ease;
  }
  .compra-panel.active { display: block; }
  @keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .compra-panel-inner {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 520px;
  }

  /* Yape / Plin panel — dos QRs en grid */
  .yape-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 380px;
  }
  .yape-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
  }
  .yape-qr-label {
    font-family: var(--display);
    font-style: italic;
    font-size: 1rem;
    color: var(--paper);
  }
  .yape-qr-item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    display: block;
  }
  .yape-instruccion {
    font-family: var(--ui);
    font-size: 0.72rem;
    line-height: 1.24;
    color: rgba(240,230,210,0.55);
    max-width: 380px;
  }

  /* Banco panel */
  .banco-datos {
    background: rgba(240,230,210,0.04);
    border: 1px solid rgba(168,135,92,0.15);
    padding: 1.25rem 1.5rem;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .banco-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .banco-label {
    font-family: var(--ui);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    flex-shrink: 0;
  }
  .banco-valor {
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--paper);
    text-align: right;
  }
  .banco-cci-row {
    align-items: center;
  }
  .btn-copiar {
    font-family: var(--ui);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: none;
    border: 1px solid rgba(212,161,90,0.35);
    color: var(--amber);
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .btn-copiar:hover { background: var(--amber); color: var(--ink); }
  .btn-copiar.copiado { border-color: var(--wa); color: var(--wa); }

  /* Tarjeta panel */
  .tarjeta-info {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.27;
    color: rgba(240,230,210,0.7);
    font-style: italic;
    max-width: 440px;
  }
  .boton-payhip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ui);
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9rem 2rem;
    background: var(--amber);
    color: var(--ink);
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s;
    border-radius: 1px;
  }
  .boton-payhip:hover { background: var(--amber-deep); color: var(--paper); transform: translateY(-1px); }

  /* Botón WhatsApp */
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ui);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(90,173,106,0.4);
    color: var(--wa);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 1px;
    width: fit-content;
  }
  .btn-whatsapp:hover { background: rgba(90,173,106,0.1); border-color: var(--wa); }

  /* FAQ de compra */
  .compra-faq {
    border-top: 1px solid rgba(168,135,92,0.12);
    padding-top: 1.75rem;
  }
  .compra-faq-titulo {
    font-family: var(--ui);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1rem;
  }
  .faq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .faq-item details {
    border-bottom: 1px solid rgba(168,135,92,0.1);
  }
  .faq-item summary {
    font-family: var(--ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(240,230,210,0.75);
    padding: 0.85rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--amber);
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .faq-item details[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--paper); }
  .faq-answer {
    font-family: var(--body);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.24;
    color: rgba(240,230,210,0.55);
    padding-bottom: 1rem;
  }

  /* Responsive móvil — tabs se apilan como accordeón */
  @media (max-width: 600px) {
    .compra-tab-btns { flex-direction: column; border-bottom: none; gap: 0; }
    .compra-tab-btn {
      border-bottom: 1px solid rgba(168,135,92,0.15);
      justify-content: space-between;
      padding: 0.9rem 0;
    }
    .compra-tab-btn::after { bottom: 0; height: 0; }
    .compra-tab-btn.active { color: var(--amber); }
    .compra-panel { margin-top: 0; }
    .yape-grid { grid-template-columns: 1fr; max-width: 180px; }
    .banco-fila { flex-direction: column; align-items: flex-start; }
    .banco-valor { text-align: left; }
  }

  /* =======================================================
     CORTINA DE TRANSICIÓN (2.2)
     ======================================================= */

  /* =======================================================
     ANIMACIÓN ESCALONADA HERO (2.6)
     ======================================================= */
  .inicio-bg { opacity: 0; transition: opacity 0.6s ease; }
  .inicio-bg.visible { opacity: 1; }

  .inicio-kicker,
  .inicio-title,
  .inicio-tagline,
  .inicio-enter {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .inicio-kicker.visible  { opacity: 1; transform: translateY(0); }
  .inicio-title.visible   { opacity: 1; transform: translateY(0); }
  .inicio-tagline.visible { opacity: 1; transform: translateY(0); }
  .inicio-enter.visible   { opacity: 1; transform: translateY(0); }

  /* =======================================================
     PARALLAX HERO (2.5) — desktop only
     ======================================================= */
  @media (min-width: 769px) {
    #view-inicio .inicio-bg img {
      will-change: transform;
    }
  }

  /* =======================================================
     DROP CAP SVG (2.4) — solo primer párrafo en prosa
     ======================================================= */
  .page-dropcap {
    float: left;
    line-height: 0.64;
    margin-right: 0.08em;
    margin-bottom: -0.05em;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 5em;
    color: var(--amber);
    font-weight: 400;
    position: relative;
    top: 0.06em;
  }

  /* =======================================================
     PÁGINAS INDIVIDUALES DE LIBRO (3.2)
     ======================================================= */
  .libro-hero {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    min-height: 80vh;
    background: linear-gradient(160deg, #1c1d22 0%, var(--ink) 60%);
    color: var(--paper);
    padding: 5rem var(--pad-x);
    gap: 4rem;
    align-items: center;
  }
  .libro-cover-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .libro-cover-frame {
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
    transform: perspective(800px) rotateY(-4deg) rotate(-0.8deg);
    transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
  }
  .libro-cover-frame:hover {
    transform: perspective(800px) rotateY(0deg) rotate(0deg) scale(1.02);
  }
  .libro-cover-frame img {
    width: 100%;
    display: block;
  }
  .libro-meta-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .libro-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 0.95;
    color: var(--paper);
  }
  .libro-year {
    font-family: var(--ui);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper-muted);
  }
  .libro-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
  .libro-body {
    padding-top: 4rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .libro-seccion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .libro-seccion-label {
    font-family: var(--ui);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .libro-sinopsis p {
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--paper-deep);
    max-width: 680px;
    margin-bottom: 1rem;
  }
  .libro-sinopsis p:last-child { margin-bottom: 0; }
  .libro-pullquote-wrap {
    text-align: center;
    padding: 3rem var(--pad-x);
    border-top: 1px solid rgba(168,135,92,0.15);
    border-bottom: 1px solid rgba(168,135,92,0.15);
  }
  .libro-pullquote {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.09;
    color: var(--paper);
    position: relative;
    max-width: 700px;
    margin: 0 auto;
  }
  .pq-open, .pq-close {
    font-size: 4rem;
    line-height: 0;
    vertical-align: -0.4em;
    color: var(--amber);
    opacity: 0.6;
    font-family: var(--display);
  }
  .pq-open { margin-right: 0.1em; }
  .pq-close { margin-left: 0.1em; }
  .pq-cite {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--ui);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .libro-contenido {
    list-style: none;
    counter-reset: libro-items;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 560px;
  }
  .libro-contenido li {
    counter-increment: libro-items;
    display: flex;
    gap: 1rem;
    font-size: 1rem;
    color: var(--paper-deep);
    align-items: baseline;
  }
  .libro-contenido li::before {
    content: counter(libro-items, decimal-leading-zero);
    font-family: var(--ui);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    flex-shrink: 0;
    padding-top: 0.1em;
  }
  .libro-contenido--2col {
    columns: 2;
    column-gap: 3rem;
    display: block;
    max-width: 680px;
  }
  .libro-contenido--2col li { break-inside: avoid; margin-bottom: 0.6rem; display: flex; }
  .libro-nota-placeholder {
    font-family: var(--ui);
    font-size: 0.72rem;
    color: var(--ink-muted);
    opacity: 0.6;
  }
  .resenias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 800px;
  }
  .resenia {
    background: rgba(240,230,210,0.04);
    border: 1px solid rgba(168,135,92,0.12);
    padding: 1.5rem;
    border-radius: 1px;
  }
  .resenia-texto {
    font-family: var(--body);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.24;
    color: rgba(240,230,210,0.75);
    margin-bottom: 0.75rem;
  }
  .resenia-autor {
    font-family: var(--ui);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--amber);
  }
  .libro-otros { margin-top: 1rem; }
  .otros-libros {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }
  .otro-libro {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    max-width: 120px;
    transition: transform 0.3s;
  }
  .otro-libro:hover { transform: translateY(-4px); }
  .otro-libro img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  }
  .otro-titulo {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--paper);
    line-height: 0.98;
  }
  .otro-genre {
    font-family: var(--ui);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
  }

  /* Responsive libro (legacy hero — mantenido por compat) */
  @media (max-width: 768px) {
    .libro-hero { grid-template-columns: 1fr; padding: 3rem var(--pad-x) 2rem; gap: 2rem; min-height: auto; }
    .libro-cover-frame { max-width: 220px; transform: none; }
    .resenias { grid-template-columns: 1fr; }
    .libro-contenido--2col { columns: 1; }
  }

  /* =======================================================
     LIBRO INDIVIDUAL — Layout 2 columnas
     ======================================================= */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
  }
  .libro-layout {
    --navbar-h: 5.8rem;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    align-items: start;
  }
  .libro-col-izq {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--navbar-h) + 1rem);
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .libro-col-izq .libro-cover-frame {
    max-width: 240px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
    transform: perspective(800px) rotateY(-4deg) rotate(-0.5deg);
    transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1);
  }
  .libro-col-izq .libro-cover-frame:hover {
    transform: perspective(800px) rotateY(0deg) rotate(0deg) scale(1.02);
  }
  .libro-col-izq .libro-cover-frame img { width: 100%; display: block; border-radius: 3px; }
  .libro-col-izq .book-genre {
    font-family: var(--display);
    font-style: normal;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .libro-col-izq .libro-year {
    font-family: var(--ui);
    font-size: 0.8rem;
    color: rgba(240,230,210,0.6);
    text-align: center;
  }
  .libro-col-sep {
    width: 60%;
    border: none;
    border-top: 1px solid rgba(212,161,90,0.15);
    margin: 0;
  }
  .precio-badge { text-align: center; }
  .precio-badge .precio-valor {
    font-family: var(--display);
    font-style: normal;
    font-size: 1.4rem;
    color: var(--amber);
    display: block;
  }
  .precio-badge .precio-formato {
    font-family: var(--ui);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(240,230,210,0.7);
    display: block;
    margin-top: 0.2rem;
  }
  .libro-col-botones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  .libro-col-botones .btn { width: 100%; justify-content: center; }
  .libro-col-botones .btn-primary { padding: 0.9rem 1.7rem; }
  .libro-col-botones .btn-ghost {
    border-color: var(--amber);
    color: var(--amber);
    padding: 0.7rem 1.7rem;
  }
  .libro-col-botones .btn-ghost:hover {
    background: var(--amber);
    color: var(--ink);
    border-color: var(--amber);
  }
  /* Drawer de compra */
  .libro-compra-drawer {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
  }
  .libro-compra-drawer.compra-abierta { max-height: 980px; }
  .libro-compra-drawer .compra-tabs { padding-top: 1.25rem; }
  /* Columna derecha */
  .libro-col-der { min-width: 0; padding-top: 0; }
  /* Sinopsis con pull-quote inline */
  .sinopsis-extendida { margin-bottom: 1.5rem; }
  .sinopsis-extendida::after { content: ''; display: table; clear: both; }
  .pull-quote-inline {
    float: right;
    max-width: 45%;
    margin: 0.5rem 0 1.5rem 2rem;
    padding: 0.25rem 0 0.25rem 1.5rem;
  }
  .pull-quote-inline blockquote {
    position: relative;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.12;
    color: rgba(240,230,210,0.85);
  }
  .pull-quote-inline blockquote::before {
    content: "«";
    position: absolute;
    left: -1.5rem;
    top: -0.1em;
    font-family: var(--display);
    font-style: normal;
    font-size: 1.8em;
    line-height: 0.75;
    color: color-mix(in srgb, var(--amber-soft) 75%, transparent);
  }
  .pull-quote-inline cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--ui);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--amber);
    text-align: right;
  }
  /* Details plegables */
  .libro-details { border-top: 1px solid rgba(168,135,92,0.2); }
  .libro-details:last-child { border-bottom: 1px solid rgba(168,135,92,0.2); }
  .libro-details summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 0;
    font-family: var(--ui);
    font-size: 0.67rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: opacity 0.2s;
  }
  .libro-details summary::-webkit-details-marker { display: none; }
  .libro-details summary::marker { content: ''; display: none; }
  .libro-details summary::before {
    content: '▸';
    font-size: 0.58rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .libro-details[open] summary::before { transform: rotate(90deg); }
  .libro-details[open] summary { opacity: 1; }
  .libro-details .details-body { padding-bottom: 1.75rem; }
  /* Otros libros — fuera del grid */
  .libro-otros-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    border-top: 1px solid rgba(168,135,92,0.12);
  }
  /* Mobile ≤899px */
  @media (max-width: 899px) {
    .libro-layout {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 1.5rem 1.25rem 2.5rem;
    }
    .libro-col-izq {
      width: 100%;
      position: static;
      max-width: 340px;
      margin: 0 auto;
    }
    .libro-col-izq .libro-cover-frame { max-width: 180px; }
    .libro-compra-drawer.compra-abierta { max-height: 1200px; }
    .pull-quote-inline {
      float: none;
      max-width: 100%;
      margin: 1.5rem 0;
    }
  }

  /* =======================================================
     VISTA LECTURAS (4.2)
     ======================================================= */
  .lecturas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
  }
  .lectura-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: rgba(240,230,210,0.04);
    border: 1px solid rgba(168,135,92,0.12);
    padding: 1.75rem;
    border-radius: 2px;
    transition: background 0.3s;
  }
  .lectura-card:hover { background: rgba(240,230,210,0.07); }
  .lectura-portada {
    align-self: center;
    width: 90px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  .lectura-portada svg { display: block; width: 100%; }
  .lectura-portada img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
  }
  .lectura-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .lectura-titulo {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--paper);
    line-height: 0.95;
  }
  .lectura-autor {
    font-family: var(--ui);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .lectura-comentario {
    font-family: var(--body);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.27;
    color: rgba(240,230,210,0.7);
  }

  /* =======================================================
     RESPONSIVE MÓVIL COMPLETO (1.4)
     ======================================================= */
  @media (max-width: 480px) {
    :root { --pad-x: 1.25rem; }
    body { font-size: 1.05rem; }
    .inicio-content { padding: 0 var(--pad-x) 2rem; }
    .inicio-title { font-size: clamp(3rem, 14vw, 5rem); }
    .view-inner { padding-top: 4rem; padding-bottom: 3rem; }
    .books-list { gap: 4rem; }
    .book { flex-direction: column; gap: 1.5rem; }
    .book-cover-wrap { width: 100%; max-width: 240px; margin: 0 auto; }
    .book-info { padding: 0; }
    .lecturas-grid { grid-template-columns: 1fr; }
    .book-actions { gap: 0.65rem; }
    .btn { min-height: 44px; }
    .lectura-card { flex-direction: row; align-items: flex-start; }
    .lectura-portada { width: 70px; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01s !important;
      transition-duration: 0.01s !important;
    }
  }

  /* =======================================================
     HOME EXTENDED — 5 secciones de scroll tras el hero
     ======================================================= */
  #home-extended { display: none; }

  /* Eyebrow con filete y rombos */
  .section-eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: clamp(32px, 6vh, 56px);
  }
  .eyebrow-text {
    font-family: var(--ui);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--paper-muted);
  }

  /* Reveal on scroll. Dentro de @media (scripting: enabled) a
     propósito: si el navegador no ejecuta JS, la regla no aplica y el
     contenido nace visible — sin eso, una falla de JS (ya pasó una vez
     por CSP) deja la sección en blanco sin nada roto a la vista. */
  @media (scripting: enabled) {
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity 900ms cubic-bezier(0.2, 0.6, 0.2, 1),
        transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
    }
    /* .reveal-libreria (audiovisual-placeholder, pullquote-band, hero-grid
       de inicio.html) pierde el opacity:0 de arriba pese a que la regla
       matchea y la media query da true — un elemento igual creado por JS
       sí la respeta, así que no es la regla ni la cascada por
       especificidad visible. !important de blindaje, verificado en vivo:
       sin esto queda en opacity:1 desde el primer paint. */
    .reveal-libreria {
      opacity: 0 !important;
      transform: translateY(16px) !important;
      transition:
        opacity 900ms cubic-bezier(0.2, 0.6, 0.2, 1),
        transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
    }
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  /* !important porque el opacity:0 de arriba también lo lleva — si no,
     nunca gana y la sección se queda invisible para siempre. */
  .reveal-libreria.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-libreria { opacity: 1; transform: none; transition: none; }
  }

  /* =======================================================
     HERO DIVIDIDO — grid izquierda + estante derecha
     ======================================================= */
  .hero-grid {
    display: flex;
    justify-content: center;
    max-width: 920px;
    margin: 0 auto;
    align-items: center;
    min-height: auto;
    padding: clamp(16px, 2vh, 28px) clamp(24px, 5vw, 60px);
    position: relative;
    z-index: 2;
  }
  .hero-left {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 16px);
    align-items: flex-start;
    text-align: left;
    max-width: 620px;
  }
  .hero-origin {
    font-family: var(--ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber-soft);
    margin: 0 0 2px;
  }
  .hero-name {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--paper-warm) 96%, transparent);
    margin: 0;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 4px 24px rgba(0,0,0,0.35);
  }
  .hero-manifesto {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(0.92rem, 1.3vw, 1.08rem);
    line-height: 1.16;
    color: color-mix(in srgb, var(--paper-warm) 80%, transparent);
    margin: 0;
    max-width: 42ch;
    text-align: left;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    margin-top: 4px;
    border: 1px solid color-mix(in srgb, var(--amber-soft) 70%, transparent);
    text-decoration: none;
    color: color-mix(in srgb, var(--paper-warm) 92%, transparent);
    font-family: var(--ui);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: background 240ms ease, border-color 240ms ease;
  }
  .hero-cta:hover {
    background: color-mix(in srgb, var(--amber-soft) 12%, transparent);
    border-color: var(--amber-soft);
  }
  .hero-cta-arrow {
    display: inline-block;
    transition: transform 240ms ease;
  }
  .hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }


  /* =======================================================
     VISTA SPA — Novedades
     ======================================================= */
  .view-novedades.active {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px, 10vh, 120px) clamp(24px, 5vw, 60px);
    background: var(--paper-warm);
  }
  .novedades-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }
  .novedades-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 0.95;
    margin: clamp(20px, 3vh, 32px) 0 clamp(16px, 2vh, 20px);
    color: var(--ink);
  }
  .novedades-subtitle {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.16;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    margin: 0;
  }

  /* ===== AUDIOVISUAL (reservado) =====
     Vacío a propósito — ver el comentario en inicio.html. Solo un borde
     sutil para que se lea como espacio reservado, no como un hueco roto. */
  .audiovisual-placeholder {
    height: clamp(220px, 32vh, 380px);
    margin: 0 clamp(24px, 6vw, 80px);
    border: 1px solid color-mix(in srgb, var(--amber-soft) 18%, transparent);
    background: color-mix(in srgb, var(--ink) 97%, var(--amber-soft) 3%);
  }

  /* ===== PULL-QUOTE BAND ===== */
  .pullquote-band {
    position: relative;
    width: 100%;
    min-height: clamp(64px, 8vh, 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2vh, 24px) clamp(20px, 5vw, 60px);
    background: linear-gradient(
      to bottom,
      var(--ink) 0%,
      color-mix(in srgb, var(--ink) 92%, var(--paper-warm) 8%) 100%
    );
    isolation: isolate;
    flex-shrink: 0;
  }
  .pullquote-text {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.9vw, 1.4rem);
    line-height: 1.05;
    text-align: center;
    margin: 0;
    max-width: 36em;
    color: color-mix(in srgb, var(--paper-warm) 85%, transparent);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pullquote-mark {
    font-family: var(--display, Georgia, serif);
    font-style: normal;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    line-height: 0.75;
    color: color-mix(in srgb, var(--amber-soft) 75%, transparent);
    vertical-align: -0.15em;
  }
  .pullquote-mark--left  { margin-right: 4px; }
  .pullquote-mark--right { margin-left: 4px; }
  .pullquote-body { display: inline; }
  @media (max-width: 600px) {
    .pullquote-text { font-size: 1rem; line-height: 1.09; }
    .pullquote-mark { font-size: 1.5rem; }
  }

  /* ===== LIBRERÍA SCROLLEABLE =====
     Base: fila simple, siempre visible — es lo que ve cualquiera sin JS o
     con prefers-reduced-motion (libreria-scroll.js no le agrega
     .is-animada en esos casos, así que esta es toda la CSS que corre).
     ─────────────────────────────────────────────────────────── */
  .libreria-scroll {
    position: relative;
    padding: clamp(40px, 7vh, 72px) clamp(24px, 6vw, 80px);
    background: var(--ink);
    overflow: hidden;
  }
  .libreria-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .libreria-fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
  }
  .libreria-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,8,14,0.35), var(--ink) 92%);
  }
  .libreria-escenario {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(28px, 4vw, 56px);
  }
  .libreria-libro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    max-width: 260px;
  }
  .libreria-libro-img {
    width: 170px;
    height: auto;
    aspect-ratio: 896 / 1200;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    margin-bottom: 18px;
  }
  .libreria-libro-genero {
    font-family: var(--ui);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber-soft);
  }
  .libreria-libro-titulo {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.1;
    color: var(--paper-warm);
    margin: 6px 0;
  }
  .libreria-libro-frase {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--paper-warm) 80%, transparent);
    margin-bottom: 12px;
  }
  .libreria-libro-cta {
    font-family: var(--ui);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber-soft);
    transition: gap var(--dur-control) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .libreria-libro:hover .libreria-libro-cta,
  .libreria-libro:focus-visible .libreria-libro-cta { gap: 8px; }
  .libreria-libro:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 4px; }

  /* Modo animado: solo cuando JS confirmó GSAP + movimiento permitido.
     La sección se fija en pantalla (pin de ScrollTrigger) y cada libro
     pasa a superponerse en el centro — el estado de reposo (oculto/
     visible/girado) lo pone libreria-scroll.js por scroll. */
  .libreria-scroll.is-animada {
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* pinReparent (libreria-scroll.js) la saca al final de <body> — con
       z-index:auto ahí perdía contra el contenido normal de la página.
       10 alcanza y sobra: queda debajo del nav (90) y de cualquier
       overlay real (menú 80, modal 200, promo 500). */
    z-index: 10;
  }
  .libreria-scroll.is-animada .libreria-escenario {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }
  .libreria-scroll.is-animada .libreria-libro {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 320px;
    height: fit-content;
    justify-content: center;
    perspective: 1200px;
  }
  .libreria-scroll.is-animada .libreria-libro-img {
    width: 230px;
    will-change: transform, opacity;
  }
  @media (max-width: 600px) {
    .libreria-scroll.is-animada .libreria-libro-img { width: 170px; }
    .libreria-scroll.is-animada .libreria-libro-frase { font-size: 0.8rem; }
  }

  @media (max-width: 760px) {
    /* Pull-quote móvil */
    .pullquote-band {
      min-height: 70px;
      padding: 16px 24px;
    }
    .pullquote-text {
      font-size: 0.95rem;
      line-height: 1.09;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 4px;
    }
    .pullquote-mark { font-size: 1.4rem; }
    .pullquote-body { text-align: center; }

    /* Hero móvil */
    .hero-grid {
      padding: 16px 0;
      text-align: center;
    }
    .hero-left { align-items: center; text-align: center; }
    .hero-origin {
      font-size: 0.64rem;
      margin-bottom: 8px;
    }
    .hero-name {
      font-size: 1.5rem;
      line-height: 0.95;
      max-width: 100%;
      text-align: center;
    }
    .hero-manifesto {
      font-size: 0.9rem;
      line-height: 1.12;
      padding: 0 8px;
      max-width: 100%;
      text-align: center;
    }
    .hero-cta {
      padding: 10px 20px;
      font-size: 0.7rem;
      align-self: center;
    }
  }

  @media (max-width: 414px) {
    .pullquote-text {
      font-size: 0.88rem;
      padding: 0 8px;
    }
    .pullquote-mark { font-size: 1.2rem; }
    .hero-name { font-size: 1.35rem; }
    .hero-manifesto { font-size: 0.86rem; }
  }

  @media (max-height: 720px) {
    .pullquote-band { min-height: 64px; padding: 12px 24px; }
    .hero-grid { padding: clamp(10px, 1.2vh, 20px) clamp(24px, 5vw, 60px); }
    .hero-name { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
    .hero-manifesto { font-size: 0.88rem; }
  }

  @media (max-height: 700px) and (min-width: 760px) {
    .pullquote-band { min-height: 60px; padding: 12px 24px; }
    .hero-name { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
    .hero-manifesto { font-size: 0.9rem; }
  }

  /* ===================================================
     VISTA: PRENSA
     =================================================== */
  .view-prensa {
    background: var(--ink);
    color: var(--paper-warm);
    min-height: calc(100vh - 80px);
    padding: clamp(48px, 8vh, 88px) clamp(20px, 5vw, 80px) clamp(60px, 9vh, 120px);
    position: relative;
  }
  .view-prensa .eyebrow-text {
    color: color-mix(in srgb, var(--paper-warm) 60%, transparent);
  }
  .prensa-inner {
    max-width: 760px;
    margin: 0 auto;
  }
  .prensa-header {
    text-align: center;
    margin-bottom: clamp(40px, 6vh, 72px);
  }
  .prensa-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 0.95;
    margin: 12px 0 14px;
    color: var(--paper-warm);
  }
  .prensa-subtitle {
    font-family: var(--body, Georgia, serif);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.12;
    color: color-mix(in srgb, var(--paper-warm) 65%, transparent);
    margin: 0 auto;
    max-width: 36em;
  }

  /* Tarjeta de prensa */
  .press-card {
    position: relative;
    padding: clamp(32px, 5vh, 56px) clamp(24px, 4vw, 48px);
    background: color-mix(in srgb, var(--paper-warm) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--paper-warm) 8%, transparent);
    border-radius: 4px;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--paper-warm) 5%, transparent) inset,
      0 24px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 32px;
  }
  .press-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ui, system-ui);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
    margin-bottom: 18px;
  }
  .press-source { font-weight: 600; }
  .press-sep { color: color-mix(in srgb, var(--paper-warm) 40%, transparent); }
  .press-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 0.95;
    text-align: center;
    margin: 0 0 8px;
    color: var(--paper-warm);
  }
  .press-byline {
    font-family: var(--body, Georgia, serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: color-mix(in srgb, var(--paper-warm) 60%, transparent);
    margin: 0 0 28px;
  }
  .press-quote-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 32px;
    padding: 0 8px;
  }
  .press-quote-mark {
    font-family: var(--display, Georgia, serif);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 0.75;
    color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
    font-style: normal;
  }
  .press-quote {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.05;
    text-align: center;
    margin: 0;
    color: color-mix(in srgb, var(--paper-warm) 88%, transparent);
  }
  .press-body {
    font-family: var(--body, Georgia, serif);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.27;
    color: color-mix(in srgb, var(--paper-warm) 82%, transparent);
  }
  .press-body p { margin: 0 0 18px; text-align: justify; }
  .press-body p:last-child { margin-bottom: 0; }
  .press-body em {
    font-style: italic;
    color: color-mix(in srgb, var(--paper-warm) 92%, transparent);
  }
  .press-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 36px auto 28px;
    max-width: 200px;
  }
  .press-rule .rule-line {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--amber-soft) 35%, transparent);
    width: auto;
  }
  .press-rule .rule-diamond {
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--amber-soft) 70%, transparent);
    transform: rotate(45deg);
  }
  .press-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--amber-soft) 60%, transparent);
    color: var(--amber-soft);
    font-family: var(--ui, system-ui);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .press-cta:hover {
    background: color-mix(in srgb, var(--amber-soft) 12%, transparent);
    border-color: var(--amber-soft);
    transform: translateX(-50%) translateY(-2px);
  }
  .press-cta-arrow { transition: transform 300ms ease; display: inline-block; }
  .press-cta:hover .press-cta-arrow { transform: translateX(4px); }

  .press-block {
    margin-bottom: clamp(48px, 7vh, 88px);
  }
  .press-block:last-child {
    margin-bottom: 0;
  }
  .press-block .press-card + .press-card {
    margin-top: clamp(24px, 4vh, 48px);
  }
  .press-block-title {
    font-family: var(--body, system-ui);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
    text-align: center;
    margin: 0 0 28px;
    font-weight: 500;
    position: relative;
    padding-bottom: 16px;
  }
  .press-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: color-mix(in srgb, var(--amber-soft) 50%, transparent);
  }
  .press-card h3.press-title {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 0.95;
    text-align: center;
    margin: 0 0 8px;
    color: var(--paper-warm);
  }

  /* ── Acordeón de tarjetas de prensa ── */
  .press-card-header {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    position: relative;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  .press-card-header:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--amber-soft) 70%, transparent);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .press-card-header:hover .press-title {
    color: color-mix(in srgb, var(--paper-warm) 100%, var(--amber-soft) 8%);
    transition: color 0.3s ease;
  }
  .press-card-header:hover .press-toggle {
    background: color-mix(in srgb, var(--amber-soft) 18%, transparent);
    border-color: color-mix(in srgb, var(--amber-soft) 70%, transparent);
  }
  .press-toggle {
    position: absolute;
    top: 24px;
    right: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--amber-soft) 45%, transparent);
    border-radius: 50%;
    transition: all 0.3s ease;
    pointer-events: none;
    flex-shrink: 0;
  }
  .press-toggle-line {
    position: absolute;
    background: var(--amber-soft);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .press-toggle-line--h {
    width: 14px;
    height: 1.5px;
  }
  .press-toggle-line--v {
    width: 1.5px;
    height: 14px;
  }
  .press-card-header[aria-expanded="true"] .press-toggle-line--v {
    transform: rotate(90deg) scaleY(0);
  }
  .press-card-header[aria-expanded="true"] .press-toggle {
    background: color-mix(in srgb, var(--amber-soft) 22%, transparent);
    border-color: color-mix(in srgb, var(--amber-soft) 80%, transparent);
  }
  .press-card-body[hidden] { display: none; }
  .press-card-body {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--paper-warm) 12%, transparent);
    animation: press-body-enter 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  @keyframes press-body-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .press-card {
    padding-right: clamp(56px, 6vw, 80px) !important;
  }
  .press-card-header .press-meta    { margin-bottom: 14px; }
  .press-card-header .press-title   { margin-bottom: 6px; }
  .press-card-header .press-byline  { margin-bottom: 22px; }
  .press-card-header .press-quote-wrap { margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    .press-card-body  { animation: none; }
    .press-toggle-line { transition: none; }
  }

  @media (max-width: 760px) {
    .view-prensa { padding: 36px 18px 60px; }
    .prensa-inner { max-width: 100%; }
    .press-block { margin-bottom: 40px; }
    .press-block-title { font-size: 0.7rem; letter-spacing: 0.18em; margin-bottom: 22px; }
    .press-card { padding: 28px 20px; padding-right: 50px !important; }
    .press-card h3.press-title { font-size: 1.5rem; }
    .press-meta { font-size: 0.65rem; letter-spacing: 0.14em; gap: 6px; }
    .press-quote { font-size: 1.05rem; }
    .press-body p { text-align: left; }
    .press-cta { padding: 11px 22px; font-size: 0.72rem; }
    .press-toggle { top: 18px; right: 0; width: 30px; height: 30px; }
    .press-toggle-line--h { width: 11px; }
    .press-toggle-line--v { height: 11px; }
    .press-card-header .press-quote-wrap { margin: 4px 0 0; }
  }

  /* ═══════════════════════════════════════════════════
     VISTA NOVEDADES — Mensajes no leídos
     ═══════════════════════════════════════════════════ */

  .vista-novedades-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(48px, 10vh, 96px) clamp(24px, 6vw, 48px);
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 8vh, 88px);
  }

  .novedades-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.4vh, 24px);
    text-align: left;
  }

  .novedades-titulo {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 0.95;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
  }

  .novedades-rule {
    display: block;
    width: clamp(80px, 16vw, 140px);
    height: 1px;
    margin: 4px auto 0;
    overflow: hidden;
  }
  .novedades-rule--izq { margin: 0; }

  .novedades-rule .rule-line {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--amber-soft) 30%,
      var(--amber-soft) 70%,
      transparent 100%
    );
  }

  .novedades-pullquote {
    font-family: var(--display, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.12;
    color: var(--ink-mid);
    margin: 0;
    max-width: 46ch;
    letter-spacing: 0.005em;
  }

  .novedades-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .novedades-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    border: 1px solid rgba(142, 91, 39, 0.5);
    border-radius: 2px;
    background: transparent;
    color: var(--amber-deep);
    font-family: var(--body, system-ui);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
    cursor: pointer;
    min-width: 280px;
    justify-content: center;
  }

  .novedades-cta-btn:hover,
  .novedades-cta-btn:focus-visible {
    border-color: rgba(142, 91, 39, 0.9);
    background: rgba(142, 91, 39, 0.08);
    color: var(--ink);
    transform: translateY(-1px);
  }

  .novedades-cta-btn:focus-visible {
    outline: 2px solid rgba(142, 91, 39, 0.9);
    outline-offset: 4px;
  }

  .novedades-cta-btn .cta-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
  }

  .novedades-cta-btn:hover .cta-arrow {
    transform: translateX(3px);
  }

  .novedades-cta-help {
    font-family: var(--body, system-ui);
    font-size: 0.82rem;
    line-height: 1.12;
    color: var(--ink-muted);
    margin: 0;
    max-width: 420px;
    font-style: italic;
  }

  .novedades-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  .novedades-titulo--item {
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  }

  /* Anuncio 1 — video a la derecha, en marco propio de marca (no el
     reproductor nativo pelado). */
  .novedades-media {
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--amber-soft) 45%, transparent);
    border-radius: 3px;
  }
  .novedades-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    background: #000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }

  @media (max-width: 860px) {
    .novedades-item { grid-template-columns: 1fr; }
    .novedades-media { order: -1; }
  }

  @media (max-width: 600px) {
    .vista-novedades-inner {
      padding: 48px 20px;
      gap: 48px;
    }
    .novedades-titulo {
      font-size: 2rem;
    }
    .novedades-pullquote {
      font-size: 1.05rem;
      padding: 0 8px;
    }
    .novedades-cta-btn {
      min-width: 100%;
      padding: 14px 24px;
      font-size: 0.72rem;
    }
  }