/* ------------------------------------------------------------------
   tu nombre — hoja de estilo COMPARTIDA de las páginas de nombre
   ------------------------------------------------------------------
   Una sola hoja para María, Antonio, Carmen, Javier, Ana y los que vengan.

   Antes cada página llevaba su copia dentro del HTML: ~2.100 líneas casi
   idénticas por archivo. Cada arreglo había que repetirlo en todas y, en la
   práctica, se desincronizaban — los arreglos móviles del 20 de agosto
   (esconder .label, .locked-list a dos columnas, el botón dentro de las
   .extra-card) quedaron sólo en María, y el mock del teléfono para nombres
   de 4 kanji quedó sólo en Javier. Esta hoja toma lo más nuevo de cada una.

   LO QUE CAMBIA POR NOMBRE está abajo del todo, en dos bloques cortos:
     · la paleta          body[data-palette="gold|rose"] (hombre|mujer;
                          "blue" existe pero hoy no lo usa ningún nombre)
     · los ajustes finos  body[data-name="..."]
   El HTML de cada nombre sólo declara <body data-name="x" data-palette="y">.
   ------------------------------------------------------------------ */

:root {
      --paper: #f5f1e8;
      --ink: #1a1a1a;
      --ink-soft: #4a4a4a;
      --ink-faint: #999;
      --ink-line: rgba(0,0,0,0.08);
      --seal: #a8332e;
      --paper-dark: #1a1a1a;
      --ink-on-dark: #f5f1e8;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Noto Serif JP', 'Cormorant Garamond', serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    /* Una vez pagado (las 5 versiones extra desbloqueadas), el kanji ya es del
       cliente — ahí sí puede seleccionarlo/copiarlo (lo necesita para POD, para
       llevarlo a un tatuador vía encargo, etc). Antes de pagar, no. */
    body.is-paid #s-more .scene-more,
    body.is-paid #s-more .scene-more * {
      -webkit-user-select: text;
      -moz-user-select: text;
      user-select: text;
    }

    /* Top bar */
    .top-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 44px;
      background: rgba(245, 241, 232, 0.85);
      backdrop-filter: blur(10px);
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      border-bottom: 1px solid var(--ink-line);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      color: var(--ink-soft);
      text-transform: uppercase;
      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }
    .top-bar.on-dark {
      background: rgba(26, 26, 26, 0.85);
      color: var(--ink-on-dark);
      border-bottom-color: rgba(255,255,255,0.08);
    }
    .top-bar .mark { font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0.1em; color: inherit; text-decoration: none; transition: opacity 0.2s; }
    .top-bar .mark:hover { opacity: 0.7; }
    .top-bar .right {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    /* Cambiar de idioma en la barra. Sólo aparece en los nombres que existen en
       el otro idioma (lo decide el generador), igual que en la portada — de ahí
       viene esta regla, que hasta 2026-08-27 vivía sólo en index.html. */
    .top-link {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: none;
      color: inherit;
      text-decoration: none;
      opacity: 0.8;
      transition: opacity 0.2s;
    }
    .top-link:hover { opacity: 1; }
    .top-cta {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.78rem;
      letter-spacing: 0.15em;
      text-transform: none;
      color: var(--paper);
      background: var(--seal);
      padding: 0.45rem 0.95rem;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
      white-space: nowrap;
    }
    .top-cta:hover { opacity: 0.85; transform: translateY(-1px); }
    .top-bar.on-dark .top-cta { color: var(--paper); }

    /* Chapter dots (right side) */
    .chapter-dots {
      position: fixed;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      z-index: 15;
    }
    .chapter-dots a {
      display: block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ink-faint);
      opacity: 0.4;
      transition: all 0.25s;
      text-decoration: none;
    }
    .chapter-dots a.active {
      background: var(--seal);
      opacity: 1;
      transform: scale(1.4);
    }
    .chapter-dots.on-dark a { background: rgba(245, 241, 232, 0.5); }
    .chapter-dots.on-dark a.active { background: var(--ink-on-dark); }

    /* Full screen scenes */
    .scene {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5rem 4rem;
      position: relative;
      overflow: hidden;
    }
    .scene--dark {
      background: var(--paper-dark);
      color: var(--ink-on-dark);
    }
    .scene--dark .label { color: rgba(245, 241, 232, 0.5); }

    .label {
      position: absolute;
      top: 5rem;
      left: 4rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.78rem;
      color: var(--ink-faint);
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }
    .scene-caption {
      position: absolute;
      bottom: 5rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--ink-soft);
      letter-spacing: 0.05em;
      text-align: center;
      max-width: 40em;
      line-height: 1.5;
    }
    .scene--dark .scene-caption { color: rgba(245, 241, 232, 0.7); }

    /* Scene 1: Name */
    .scene-name {
      text-align: center;
    }
    .scene-name .credit {
      margin-bottom: 3rem;
      animation: creditFade 1.2s ease-out both;
    }
    .scene-name .credit-line {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(0.85rem, 1.2vw, 1.05rem);
      color: var(--ink-faint);
      letter-spacing: 0.28em;
      text-transform: lowercase;
    }
    .scene-name .credit-line .hl {
      font-style: normal;
      font-weight: 500;
      color: var(--seal);
      letter-spacing: 0.32em;
      padding: 0 0.1em;
    }
    .scene-name .credit-presenta {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.65rem, 0.85vw, 0.78rem);
      color: var(--ink-faint);
      letter-spacing: 0.45em;
      text-transform: uppercase;
      margin-top: 0.8rem;
    }
    @keyframes creditFade {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .scene-name .name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(5rem, 16vw, 17rem);
      line-height: 1;
      letter-spacing: 0;
      margin-bottom: 2rem;
      animation: creditFade 1.4s 0.4s ease-out both;
    }
    .scene-name .kana {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(1rem, 2vw, 1.4rem);
      color: var(--ink-soft);
      letter-spacing: 0.4em;
      animation: creditFade 1.4s 0.7s ease-out both;
    }
    .scene-name .etymology {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.85rem, 1.3vw, 1rem);
      color: var(--ink-faint);
      margin-top: 1.4rem;
      animation: creditFade 1.4s 1s ease-out both;
    }
    .scene-name .etymology em { font-style: normal; color: var(--seal); }

    /* LAS MANERAS DE DECIR EL MISMO NOMBRE (escena i)
       ------------------------------------------------------------------
       Sale sólo en los nombres partidos (David = da-bi-do / de-i-bi-do). Va
       ENTRE el katakana y el origen del nombre porque es lo primero que hay
       que resolver: quien no se reconoce en el sonido de arriba está en la
       página equivocada, y cuanto antes lo vea, mejor.

       Se ofrece en letras, no como «inglés/español»: el visitante reconoce su
       sonido, no elige un idioma. El activo se ve como texto (no es un enlace
       a ningún lado); los demás son enlaces a la página de esa lectura. */
    .scene-name .lecturas {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 0.5rem 1rem;
      margin-top: 1.6rem;
      animation: creditFade 1.4s 0.85s ease-out both;
    }
    .scene-name .lec-q {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.8rem, 1.2vw, 0.95rem);
      color: var(--ink-faint);
      width: 100%;
    }
    .scene-name .lec {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1rem, 1.8vw, 1.25rem);
      letter-spacing: 0.12em;
      color: var(--ink-faint);
      text-decoration: none;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid transparent;
      transition: color 0.25s, border-color 0.25s;
    }
    .scene-name .lec-on { color: var(--ink); border-bottom-color: var(--seal); }
    .scene-name a.lec:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }

    /* Scene 3-5: Kanji big */
    .scene-kanji {
      text-align: center;
    }
    /* white-space:nowrap fuerza una sola línea siempre (el orden de lectura de
       varios kanji se pierde si se cortan a una segunda línea). Para que eso no
       termine recortando el texto en vez de solo achicarlo, el piso mínimo de
       cada clamp() está calculado para caber en un ancho de pantalla angosto
       (~360px, el mismo piso que se viene probando en el resto del sitio) —
       antes el piso era el mismo para cualquier ancho de pantalla y en celulares
       angostos terminaba envolviendo a una segunda línea incluso con 3 kanji
       (el calígrafo: "3 caracteres también se parte en dos líneas"). De paso se agrega
       el escalón de 4 caracteres, que faltaba del todo (Antonio usa 4 en sus
       3 candidatos gratis y caía en el tamaño base, demasiado grande). */
    .scene-kanji .glyph {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      color: var(--ink-on-dark);
      letter-spacing: 0.1em;
      line-height: 1.05;
      font-size: clamp(5rem, 14vw, 14rem);
      margin-bottom: 3rem;
      white-space: nowrap;
    }
    .scene-kanji .glyph[data-glyphs="2"] { font-size: clamp(8rem, 20vw, 20rem); }
    .scene-kanji .glyph[data-glyphs="3"] { font-size: clamp(5.4rem, 18vw, 18rem); }
    .scene-kanji .glyph[data-glyphs="4"] { font-size: clamp(4.2rem, 15vw, 15rem); }
    .scene-kanji .glyph[data-glyphs="5"] { font-size: clamp(3.2rem, 12vw, 12rem); }
    .scene-kanji .glyph[data-glyphs="6"] { font-size: clamp(2.7rem, 10vw, 10rem); }
    /* Cómo suena esta versión. Va entre el kanji y la frase de significado
       porque es lo que contesta la pregunta que trae el visitante desde la
       escena ii ("el katakana es fijo… ¿y esto cómo suena?"). Mismo tratamiento
       que el katakana de allá: chico, espaciado, sin peso — es un dato, no un
       titular. */
    .scene-kanji .yomi {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-size: clamp(0.78rem, 1.5vw, 1rem);
      letter-spacing: 0.22em;
      color: rgba(245, 241, 232, 0.45);
      margin-bottom: 0.75rem;
    }
    .scene-kanji .reading {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.3rem, 2.4vw, 2rem);
      color: rgba(245, 241, 232, 0.85);
      line-height: 1.4;
      max-width: 24em;
      margin: 0 auto;
    }

    /* Seal on kanji scenes */
    .scene .seal-corner {
      position: absolute;
      bottom: 2.5rem;
      right: 4rem;
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      color: var(--ink-on-dark);
      background: var(--seal);
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
    }

    /* Mini-CTA on kanji scenes */
    .mini-cta {
      margin-top: 3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      letter-spacing: 0.08em;
      color: rgba(245, 241, 232, 0.85);
      background: transparent;
      border: 1px solid rgba(245, 241, 232, 0.35);
      padding: 0.85rem 1.6rem;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s;
    }
    .mini-cta:hover {
      background: var(--paper);
      color: var(--ink);
      border-color: var(--paper);
    }
    .mini-cta::after {
      content: '↓';
      font-style: normal;
      transition: transform 0.15s;
    }
    .mini-cta:hover::after { transform: translateY(2px); }

    /* Light-scene mini-cta (for detail scenes) */
    .mini-cta-light {
      margin-top: 2.5rem;
      color: var(--ink-soft);
      border-color: var(--ink-line);
      background: transparent;
    }
    .mini-cta-light:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    /* Scene 6: meaning detail (back to light) */
    .scene-detail {
      max-width: 36em;
    }

    /* RED DE SEGURIDAD DE LAS ESCENAS DE DETALLE (iv · 解一 / vi · 解二)
       ------------------------------------------------------------------
       .scene es 100vh + overflow:hidden. Cuando el contenido pasaba de esa
       altura NO se recortaba prolijamente: desaparecían el encabezado con el
       kanji y el botón, y no había forma de llegar a ellos. Medido en Chrome
       el 2026-08-28: Antonio (4 caracteres) pedía 787px contra los 667px de un
       iPhone SE, y hasta un portátil de 1280x800 quedaba con 13px de sobra.
       El 2026-08-28 se sacaron las partes repetidas (ver escenaDetalle en
       tools/build_name_pages.js) y ahora entra — pero un nombre de 5 caracteres
       volvería a pasarse, así que esto queda como red: si entra no se nota, y
       si no entra el cliente puede llegar igual a todo.

       POR QUÉ NO ALCANZA `overflow-y: auto` A SECAS: .scene centra con flex
       (align-items:center) y, cuando el ítem es más alto que el contenedor,
       el borde de arriba queda FUERA del área scrolleable — probado en Chrome:
       con sólo overflow-y:auto el encabezado seguía sin poder alcanzarse.
       `align-items: safe center` lo arregla en Chrome, pero si un navegador no
       entiende `safe` descarta toda la declaración y vuelve el bug en silencio.
       Por eso se saca del flex (position:absolute) igual que #s-more, y el
       centrado lo hace `margin:auto` sobre .detail-inner, que sí convive con
       el scroll. */
    .detail-scene .scene-detail {
      position: absolute;
      inset: 0;
      max-width: none;
      margin: 0;
      padding: 5rem 4rem 3rem;
      display: flex;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .detail-scene .scene-detail .detail-inner {
      margin: auto;          /* centra si entra, no recorta si no entra */
      width: 100%;
      max-width: 36em;
    }
    .detail-scene .scene-detail::-webkit-scrollbar { width: 6px; }
    .detail-scene .scene-detail::-webkit-scrollbar-track { background: transparent; }
    .detail-scene .scene-detail::-webkit-scrollbar-thumb { background: rgba(245, 241, 232, 0.25); border-radius: 3px; }
    .scene-detail .label-num {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.5rem;
      color: var(--ink-faint);
      margin-bottom: 1.5rem;
    }
    .scene-detail h3 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 1.3;
      margin-bottom: 2rem;
      color: var(--ink);
    }
    .scene-detail h3 .glyph-inline {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-style: normal;
      color: var(--ink);
      letter-spacing: 0.05em;
    }
    .scene-detail p {
      font-size: 1.05rem;
      color: var(--ink-soft);
      line-height: 2;
    }
    .scene-detail p em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--ink);
    }
    .scene-detail p .ji {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      color: var(--seal);
      font-size: 1.15em;
      margin: 0 0.05em;
    }
    .scene-detail .ji-intro {
      font-size: 1rem;
      color: var(--ink-soft);
      line-height: 1.85;
      margin-bottom: 1.5rem;
      font-style: italic;
      font-family: 'Cormorant Garamond', serif;
    }
    .scene-detail .ji-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
    }
    .scene-detail .ji-list li {
      display: grid;
      grid-template-columns: 2.6em 1fr;
      gap: 1.2rem;
      align-items: center;
      padding: 0.95rem 0;
      border-bottom: 1px solid var(--ink-line);
    }
    .scene-detail .ji-list li:first-child { padding-top: 0; }
    .scene-detail .ji-list li:last-child { border-bottom: none; }
    .scene-detail .ji-list .ji {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 1.6rem;
      color: var(--seal);
      letter-spacing: 0.04em;
      line-height: 1;
    }
    /* El sonido va al PRINCIPIO de la descripción, en la misma línea.
       Debajo del carácter quedaba más bonito pero le sumaba ~25px a cada
       escena de detalle, y esas escenas ya se salían por 2px en un iPhone SE
       (medido el 2026-08-30 en Carmen). Acá no cuesta ni un pixel de alto:
       la fila ya la marca la descripción. */
    .scene-detail .ji-list .ji-yomi,
    .extra-card .ji-yomi {
      font-style: normal;
      font-size: 0.72em;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--ink-faint);
      margin-right: 0.55em;
    }
    .scene-detail .ji-list .ji-desc {
      font-size: 1rem;
      color: var(--ink-soft);
      line-height: 1.7;
    }
    .scene-detail .ji-conclusion {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--ink-line);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.15rem;
      color: var(--ink);
      line-height: 1.5;
    }

    /* Card quote — el texto exacto que llevaría la tarjeta real (q), leído en voz alta */
    .card-quote {
      margin-top: 1.5rem;
      padding: 1.3rem 1.5rem;
      background: rgba(255, 255, 255, 0.35);
      border-left: 2px solid var(--seal);
      text-align: left;
    }
    .card-quote .card-quote-label {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 0.6rem;
    }
    .card-quote p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--ink-soft);
      line-height: 1.8;
    }
    /* Dark variant, used inside the unlocked extra-cards (#s-more) */
    .extra-card .card-quote {
      margin-top: 1.2rem;
      padding: 1.1rem 1.3rem;
      background: rgba(255, 255, 255, 0.04);
      border-left-color: var(--seal);
    }
    .extra-card .card-quote .card-quote-label { color: rgba(245, 241, 232, 0.5); }
    .extra-card .card-quote p { color: rgba(245, 241, 232, 0.85); font-size: 0.95rem; }

    /* Scene: merit (por qué un calígrafo japonés) */
    .scene-merit {
      max-width: 38em;
      text-align: center;
    }
    .scene-merit h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      line-height: 1.3;
      color: var(--ink);
      margin-bottom: 3rem;
    }
    .scene-merit h2 .hl {
      font-style: normal;
      color: var(--seal);
    }
    .merit-statement {
      font-size: 1.05rem;
      color: var(--ink-soft);
      line-height: 1.9;
      max-width: 30em;
      margin: 0 auto;
    }
    .merit-statement strong { color: var(--ink); font-weight: 500; }
    /* Aviso del tatuaje en la escena ii. Deliberadamente chico: la escena mide
       100vh con overflow:hidden, así que cada línea que se agrega acá se puede
       comer el final en pantallas bajas. */
    .tatuaje-aviso { margin-top: 1.1rem; font-size: 0.9rem; }
    .tatuaje-aviso a {
      color: var(--ink-soft);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .tatuaje-aviso strong { font-weight: 500; }
    .merit-tease {
      margin-top: 2rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.15rem;
      color: var(--ink);
      line-height: 1.6;
    }
    .merit-tease .hl { font-style: normal; color: var(--seal); }

    /* Scene 2 (s7): las tres escrituras — la tabla que justifica que haya varias versiones */
    .escrituras {
      list-style: none;
      margin: 0 auto 2.2rem;
      padding: 0;
      max-width: 33em;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
    }
    .escrituras li {
      display: grid;
      grid-template-columns: 7.5em 1fr;
      align-items: start;
      gap: 1.4rem;
      padding-bottom: 1.15rem;
      border-bottom: 1px solid rgba(245, 241, 232, 0.13);
    }
    .escrituras li:last-child { border-bottom: 0; padding-bottom: 0; }
    .esc-glyph {
      display: block;
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-size: 1.45rem;
      line-height: 1.15;
      color: rgba(245, 241, 232, 0.95);
      white-space: nowrap;
    }
    .esc-name {
      display: block;
      margin-top: 0.35rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .esc-desc {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.65;
      color: rgba(245, 241, 232, 0.72);
    }
    .esc-desc .hl { color: var(--hl); font-weight: 500; }
    .escrituras li.esc-kanji .esc-glyph { color: rgba(245, 241, 232, 0.6); }
    /* s7 lleva tabla + texto: se aprieta para no cruzar las reglas doradas (escena de 100vh, overflow hidden) */
    #s7 .scene-merit h2 {
      font-size: clamp(1.55rem, 2.9vw, 2.3rem);
      margin-bottom: 2rem;
      text-wrap: balance;
    }
    #s7 .merit-statement { font-size: 1rem; line-height: 1.75; }
    #s7 .merit-tease { margin-top: 1.5rem; font-size: 1.1rem; }
    @media (max-width: 720px) {
      /* s7 es la escena más cargada: se aprieta y sus reglas doradas se abren para dejarle sitio */
      #s7 { padding: 4rem 1.5rem; }
      #s7::before { top: 6rem; }
      #s7::after { bottom: 6rem; }
      #s7 .scene-merit h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
      .escrituras { gap: 0.7rem; margin-bottom: 1.2rem; }
      .escrituras li { grid-template-columns: 5.8em 1fr; gap: 0.9rem; padding-bottom: 0.7rem; }
      .esc-glyph { font-size: 1.2rem; }
      .esc-name { font-size: 0.62rem; letter-spacing: 0.12em; margin-top: 0.25rem; }
      .esc-desc { font-size: 0.83rem; line-height: 1.45; }
      #s7 .merit-statement { font-size: 0.92rem; line-height: 1.6; }
      #s7 .merit-tease { margin-top: 1.1rem; font-size: 0.98rem; line-height: 1.45; }
    }
    /* pantallas cortas (360x640 y similares): s7 necesita otro escalón de compresión */
    @media (max-width: 720px) and (max-height: 690px) {
      #s7::before { top: 5.8rem; }
      #s7::after { bottom: 5.8rem; }
      #s7 .scene-merit h2 { font-size: 1.3rem; margin-bottom: 1rem; }
      .escrituras { gap: 0.6rem; margin-bottom: 1rem; }
      .escrituras li { padding-bottom: 0.6rem; }
      .esc-desc { font-size: 0.8rem; line-height: 1.4; }
      #s7 .merit-statement { font-size: 0.88rem; line-height: 1.55; }
      #s7 .merit-tease { margin-top: 0.9rem; font-size: 0.94rem; }
    }

    /* Scene: wallpaper teaser — enlaza a la herramienta interactiva (página aparte, no cabe en el formato cinema) */
    .scene-wallpaper-teaser { text-align: center; max-width: 34em; }
    .wp-phones {
      display: flex;
      justify-content: center;
      gap: 1.1rem;
      margin-bottom: 2.2rem;
      flex-wrap: wrap;
    }
    .wp-phone {
      width: 140px;
      background: #111;
      border-radius: 24px;
      padding: 7px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .wp-phone-screen {
      position: relative;
      aspect-ratio: 9 / 19.5;
      border-radius: 18px;
      overflow: hidden;
      background: url('/assets/great_wave_hokusai.jpg') 58% center / cover;
    }
    /* Segundo mock: no es "tu bloqueo de pantalla", es la tarjeta con el significado — papel dorado, no la foto */
    .wp-phone.card .wp-phone-screen { background: linear-gradient(160deg, var(--accent-card), var(--accent)); }
    .wp-phone.card .wp-phone-glyph[data-glyphs="4"] { font-size: 1.55rem; letter-spacing: 0.08em; }
    .wp-phone.card .wp-phone-glyph[data-glyphs="5"] { font-size: 1.3rem; letter-spacing: 0.05em; }
    .wp-phone.card .wp-phone-glyph[data-glyphs="6"] { font-size: 1.1rem; letter-spacing: 0.03em; }
    .wp-phone.card .wp-phone-glyph { color: var(--ink); text-shadow: none; }
    .wp-phone.card .wp-phone-alpha { color: var(--ink-soft); text-shadow: none; }
    .wp-phone.card .wp-phone-meaning { color: var(--ink-soft); text-shadow: none; }
    .wp-phone-notch {
      position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
      width: 46px; height: 13px;
      background: #000;
      border-radius: 8px;
    }
    .wp-phone-time {
      position: absolute; top: 30px; left: 0; right: 0;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      color: rgba(255,255,255,0.95);
      font-size: 1.05rem;
      font-weight: 600;
      text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    }
    .wp-phone-comp {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.5rem;
    }
    .wp-phone-glyph {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-size: 2rem;
      letter-spacing: 0.06em;
      color: #f5f1e8;
      text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);
      /* Un nombre de 4+ kanji no entra a cuerpo completo en el mock: se achica
         en vez de envolver (venía sólo en javier.html, ahora vale para todos). */
      white-space: nowrap;
    }
    .wp-phone-glyph[data-glyphs="4"] { font-size: 1.55rem; letter-spacing: 0.04em; }
    .wp-phone-glyph[data-glyphs="5"] { font-size: 1.3rem; letter-spacing: 0.02em; }
    .wp-phone-glyph[data-glyphs="6"] { font-size: 1.1rem; letter-spacing: 0.01em; }
    .wp-phone.card .wp-phone-glyph {
      font-family: 'Hina Mincho', 'Noto Serif JP', serif;
      font-size: 1.9rem;
      letter-spacing: 0.14em;
      line-height: 1.3;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
    .wp-phone-alpha {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.68rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.95);
      text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.6);
    }
    .wp-phone-meaning {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.6rem;
      line-height: 1.4;
      color: rgba(245, 241, 232, 0.82);
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
      padding: 0 0.5rem;
      text-align: center;
    }
    .wp-phone-seal {
      position: absolute; bottom: 14px; right: 10px;
      width: 16px; height: 16px;
      background: var(--seal);
      color: #f5f1e8;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Noto Serif JP', serif;
      font-size: 0.5rem;
    }
    .scene-wallpaper-teaser h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      line-height: 1.3;
      color: var(--ink-on-dark);
      margin-bottom: 1.2rem;
    }
    .scene-wallpaper-teaser h2 .hl { font-style: normal; color: var(--seal); }
    .wp-sub {
      font-size: 1rem;
      color: rgba(245, 241, 232, 0.75);
      line-height: 1.8;
      margin-bottom: 2.2rem;
    }
    .wp-cta {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--ink-on-dark);
      background: var(--seal);
      padding: 1rem 2rem;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
    }
    .wp-cta:hover { opacity: 0.88; transform: translateY(-1px); }

    /* Scene: la mano (s-mano) — lo escribe el calígrafo, no una tipografía.
       Las tres hojas son fotos reales del pincel (la misma palabra tres veces);
       son compartidas por todos los nombres, no dicen el nombre del visitante.
       Mientras el <figure> esté vacío se ve una hoja en blanco con su etiqueta:
       nunca un pincel simulado con tipografía — eso es lo que se borró el
       2026-08-26 por no poder justificar el precio. */
    .scene-mano { text-align: center; max-width: 34em; }
    .scene-mano h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      line-height: 1.3;
      color: var(--ink-on-dark);
      margin-bottom: 1.1rem;
    }
    .scene-mano h2 .hl { font-style: normal; color: var(--seal); }
    .mano-sub {
      font-size: 1rem;
      color: rgba(245, 241, 232, 0.75);
      line-height: 1.8;
      margin-bottom: 1.8rem;
    }
    .mano-sub strong { color: #f5f1e8; font-weight: 500; }
    .mano-sheets {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 0.8rem;
    }
    .mano-sheet {
      position: relative;
      box-sizing: border-box;
      width: 108px;
      aspect-ratio: 3 / 4;
      /* El PNG trae SOLO la tinta (fondo transparente): el papel de la hoja es
         este background, no la foto. Así las tres hojas comparten el mismo tono
         aunque las fotos se hayan sacado con luces distintas. */
      background: var(--paper);
      /* El margen es del papel, no del recorte: sumi_extract.py entrega la tinta
         ya recortada a su borde, y sin este padding la palabra tocaría el filo
         de la hoja.
         EN PIXELES, NO EN PORCENTAJE: un padding en % se resuelve contra el
         ANCHO DEL BLOQUE CONTENEDOR (.mano-sheets, ~544px), no contra los 108px
         de la hoja — los cuatro lados, el vertical incluido. Con "9% 8%" daba
         49px arriba y abajo y la palabra quedaba en 21x46px. Medido en Chrome
         el 2026-08-28. */
      padding: 9px 8px;
      box-shadow: 0 14px 34px rgba(0,0,0,0.45);
      overflow: hidden;
    }
    /* contain, no cover: el alto de la palabra depende de cuántos caracteres
       tenga (dos kanji dan un bloque casi cuadrado, cuatro dan una columna
       larga) y ninguna foto cae justo en 3/4. Con cover se le cortaba la cabeza
       al primer kanji; con contain la palabra entra entera y el papel absorbe
       la diferencia. */
    .mano-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .mano-sheet[data-todo]::after {
      content: attr(data-todo);
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      color: rgba(0, 0, 0, 0.25);
    }
    .mano-caption {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      color: rgba(245, 241, 232, 0.5);
      margin-bottom: 1.8rem;
    }
    .mano-cta {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--ink-on-dark);
      background: var(--seal);
      padding: 1rem 2rem;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
    }
    .mano-cta:hover { opacity: 0.88; transform: translateY(-1px); }
    .mano-note {
      font-size: 0.82rem;
      line-height: 1.7;
      color: rgba(245, 241, 232, 0.5);
      margin-top: 1.1rem;
    }

    /* Scene: encargo (para ti, no para el nombre) */
    .encargo-note {
      font-size: 1rem;
      color: var(--ink-soft);
      line-height: 1.9;
      max-width: 30em;
      margin: 0 auto 2.5rem;
      text-align: left;
    }
    .encargo-note strong { color: var(--ink); font-weight: 500; }
    /* La línea de «para quién es esto» (tatuaje / un kanji solo tuyo). Va
       separada del párrafo de arriba para que se lea como un golpe aparte,
       justo antes del botón. */
    .encargo-note .encargo-quien { margin-top: 1.3rem; }

    /* Scene more (7 más bloqueadas) */
    .scene-more {
      text-align: center;
      max-width: 38em;
    }
    .scene-more h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.5rem, 2.6vw, 2.1rem);
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 2rem;
    }
    .scene-more h2 .hl {
      font-style: normal;
      color: var(--seal);
      font-weight: 500;
    }
    .locked-box {
      margin: 0 0 1.2rem;
      padding: 1.4rem 1.5rem 1rem;
      background: rgba(255, 255, 255, 0.35);
      border: 1px solid var(--ink-line);
      position: relative;
    }
    /* Lock icon (replaces the 鍵 character) */
    .lock-icon {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 36px;
      background: var(--paper-dark);
      padding: 5px;
      color: rgba(245, 241, 232, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.4s;
    }
    .lock-icon svg { width: 100%; height: 100%; }
    .lock-icon.open { display: none; }
    .locked-box.unlocked .lock-icon.closed { display: none; }
    .locked-box.unlocked .lock-icon.open { display: flex; color: var(--seal); }
    .locked-list {
      list-style: none;
      text-align: left;
      margin: 0;
      padding: 0;
      counter-reset: loc var(--free-count, 2);
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1.6rem;
      row-gap: 0.1rem;
    }
    .locked-list li:last-child { grid-column: 1 / -1; }
    .locked-list li {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.88rem;
      line-height: 1.35;
      color: rgba(245, 241, 232, 0.85);
      letter-spacing: 0.02em;
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0.3rem 0;
    }
    .locked-list li::before {
      content: counter(loc, lower-roman);
      counter-increment: loc;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 1rem;
      color: rgba(245, 241, 232, 0.6);
      letter-spacing: 0.1em;
      min-width: 2em;
      flex-shrink: 0;
    }
    .locked-list .ji-blurred {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 1.2rem;
      color: var(--ink-on-dark);
      letter-spacing: 0.05em;
      filter: blur(5px);
      user-select: none;
      transition: filter 0.6s ease-out;
      font-style: normal;
      flex-shrink: 0;
    }
    .locked-list .meaning {
      color: rgba(245, 241, 232, 0.75);
      flex: 1;
    }
    .locked-list.unlocked .ji-blurred {
      filter: none;
      user-select: auto;
    }

    /* Scroll-in attention effects on s-more (locked state) */
    #s-more .locked-state { position: relative; max-width: var(--locked-max, 52em); margin: 0 auto; }
    #s-more.is-visible .locked-state::before {
      content: '';
      position: absolute;
      inset: -10% -25%;
      background: radial-gradient(ellipse at 50% 45%, rgba(168, 51, 46, 0.22) 0%, rgba(168, 51, 46, 0.08) 35%, transparent 65%);
      pointer-events: none;
      opacity: 0;
      animation: spotlightIn 1.6s ease-out 0.1s forwards;
      z-index: 0;
    }
    #s-more .locked-state > * { position: relative; z-index: 1; }
    @keyframes spotlightIn {
      0%   { opacity: 0; transform: scale(0.7); }
      60%  { opacity: 1; transform: scale(1.05); }
      100% { opacity: 0.75; transform: scale(1); }
    }

    /* Lock icon pulse on scroll-in */
    #s-more.is-visible .lock-icon.closed {
      animation: keyPulse 1.8s ease-out 0.4s both;
    }
    @keyframes keyPulse {
      0%   { transform: translateX(-50%) scale(1); background: var(--paper-dark); color: rgba(245, 241, 232, 0.55); }
      25%  { transform: translateX(-50%) scale(1.4); background: var(--seal); color: var(--paper); }
      50%  { transform: translateX(-50%) scale(1); background: var(--paper-dark); color: rgba(245, 241, 232, 0.55); }
      75%  { transform: translateX(-50%) scale(1.2); background: var(--seal); color: var(--paper); }
      100% { transform: translateX(-50%) scale(1); background: var(--paper-dark); color: rgba(245, 241, 232, 0.55); }
    }

    /* Shimmer on locked rows */
    #s-more .locked-list li { position: relative; overflow: hidden; }
    #s-more.is-visible .locked-list li::after {
      content: '';
      position: absolute;
      top: 0;
      left: -50%;
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(168, 51, 46, 0.55), transparent);
      animation: shimmerSweep 2.4s ease-in-out forwards;
      pointer-events: none;
    }
    #s-more.is-visible .locked-list li:nth-child(1)::after { animation-delay: 0.6s; }
    #s-more.is-visible .locked-list li:nth-child(2)::after { animation-delay: 0.75s; }
    #s-more.is-visible .locked-list li:nth-child(3)::after { animation-delay: 0.9s; }
    #s-more.is-visible .locked-list li:nth-child(4)::after { animation-delay: 1.05s; }
    #s-more.is-visible .locked-list li:nth-child(5)::after { animation-delay: 1.2s; }
    #s-more.is-visible .locked-list li:nth-child(6)::after { animation-delay: 1.35s; }
    #s-more.is-visible .locked-list li:nth-child(7)::after { animation-delay: 1.5s; }
    @keyframes shimmerSweep {
      0%   { left: -50%; }
      100% { left: 160%; }
    }

    /* Unlocked state cancels the locked-state attention effects */
    #s-more.unlocked .locked-state::before { display: none; }
    .locked-list li {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 2.2;
      color: var(--ink);
      letter-spacing: 0.05em;
    }
    .locked-list li::before {
      content: counter(loc, lower-roman) ' · ';
      counter-increment: loc;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 0.95rem;
      color: var(--ink-soft);
      margin-right: 0.4rem;
      letter-spacing: 0.1em;
    }
    .more-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.9rem;
      color: var(--ink-soft);
      line-height: 1.5;
      margin-bottom: 1.1rem;
    }

    /* Scene-more: la sección se queda en un viewport (100vh, como cualquier .scene) —
       si crece más que eso, pelea con el scroll-snap mandatory de la página y corta
       contenido arriba/abajo. Tanto el estado bloqueado (7 filas + botones) como el
       desbloqueado (7 cartas) pueden no entrar en una ventana real de navegador
       (barra de marcadores, etc.), así que el panel entero scrollea internamente
       en los dos estados — no solo al desbloquear. */
    .scene-more .locked-state { display: block; }
    .scene-more .unlocked-state { display: none; }
    .scene-more.unlocked .locked-state { display: none; }
    .scene-more.unlocked .unlocked-state { display: block; }

    /* position:absolute + inset:0 saca el panel del flex de #s-more (que centraba y
       no dejaba encoger) y lo fija al tamaño exacto de la sección, con su propio
       scroll interno — sin depender de calc()/% sobre flex. Sigue siendo un bloque
       normal (no flex) para que .locked-state / .unlocked-state mantengan su ancho
       tal cual estaba (ver max-width en #s-more .locked-state más abajo). */
    #s-more .scene-more {
      position: absolute;
      inset: 0;
      max-width: none;
      padding: 4.5rem 3.5rem 3rem;
      margin: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    #s-more .scene-more::-webkit-scrollbar { width: 6px; }
    #s-more .scene-more::-webkit-scrollbar-track { background: transparent; }
    #s-more .scene-more::-webkit-scrollbar-thumb { background: rgba(245, 241, 232, 0.25); border-radius: 3px; }

    /* Unlocked state: 7 cards grid */
    .scene-more .unlocked-state {
      width: 100%;
      max-width: 880px;
      margin: 0 auto;
    }
    .unlocked-state .unlocked-tag {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.85rem;
      color: var(--seal);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-bottom: 1rem;
      text-align: center;
    }

    /* Unlock dramatic effect */
    .unlock-flash {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at center, rgba(168, 51, 46, 0.4) 0%, rgba(168, 51, 46, 0.15) 35%, transparent 65%);
      opacity: 0;
      pointer-events: none;
      z-index: 999;
    }
    .unlock-flash.fire { animation: unlockFlash 1.3s ease-out; }
    @keyframes unlockFlash {
      0%   { opacity: 0; transform: scale(0.6); }
      18%  { opacity: 1; }
      100% { opacity: 0; transform: scale(1.4); }
    }

    /* Big lock icon on unlock */
    .unlock-stamp {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.3) rotate(-90deg);
      color: var(--paper);
      background: var(--seal);
      width: 220px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      z-index: 1000;
      box-shadow: 0 12px 60px rgba(168, 51, 46, 0.5), 0 0 0 8px rgba(245, 241, 232, 0.08);
    }
    .unlock-stamp svg { width: 56%; height: 56%; }
    .unlock-stamp.fire { animation: keyTurn 1.7s cubic-bezier(0.18, 0.9, 0.3, 1.02); }
    @keyframes keyTurn {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.8) rotate(-110deg); }
      22%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
      38%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
      48%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(8deg); }
      62%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
    }

    /* Unlocked content stagger entrance */
    .scene-more.unlocked .unlocked-state .unlocked-tag { animation: tagPulse 1.4s 0.5s ease-out both; }
    .scene-more.unlocked .unlocked-state h2 { animation: extraIn 0.8s 0.7s ease-out both; }
    .scene-more.unlocked .extra-card { animation: extraIn 0.7s ease-out both; opacity: 0; }
    .scene-more.unlocked .extra-card:nth-child(1) { animation-delay: 0.95s; }
    .scene-more.unlocked .extra-card:nth-child(2) { animation-delay: 1.05s; }
    .scene-more.unlocked .extra-card:nth-child(3) { animation-delay: 1.15s; }
    .scene-more.unlocked .extra-card:nth-child(4) { animation-delay: 1.25s; }
    .scene-more.unlocked .extra-card:nth-child(5) { animation-delay: 1.35s; }
    .scene-more.unlocked .extra-card:nth-child(6) { animation-delay: 1.45s; }
    .scene-more.unlocked .extra-card:nth-child(7) { animation-delay: 1.55s; }
    .scene-more.unlocked .down-wrap { animation: extraIn 0.7s 1.75s ease-out both; }
    @keyframes extraIn {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes tagPulse {
      0%   { opacity: 0; transform: scale(0.85); letter-spacing: 0.5em; }
      40%  { opacity: 1; transform: scale(1.08); letter-spacing: 0.3em; }
      100% { opacity: 1; transform: scale(1); letter-spacing: 0.3em; }
    }
    .unlocked-state h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 1.3;
      color: var(--ink-on-dark);
      margin-bottom: 3rem;
      text-align: center;
    }
    .extra-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem 1.4rem;
      margin-bottom: 3rem;
    }
    @media (max-width: 720px) {
      .extra-grid { grid-template-columns: 1fr; }
    }
    .extra-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 2rem 1.8rem 1.8rem;
      text-align: left;
    }
    .extra-card .ex-head {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 1.1rem;
    }
    .extra-card .ex-num {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: rgba(245, 241, 232, 0.5);
      letter-spacing: 0.2em;
    }
    .extra-card .ex-glyph {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 2.6rem;
      letter-spacing: 0.05em;
      color: var(--ink-on-dark);
      line-height: 1;
    }
    /* Cómo suena esta versión, al principio de la línea de significado.
       Las versiones de pago son donde viven los caracteres que llaman la
       atención, o sea donde es más probable que el sonido se aparte —
       花流芽艶 da ka-ru-me-en y eso tiene que verse entero, no sólo repartido
       carácter por carácter.
       Al lado del kanji quedaba mejor pero no entra: con cuatro glifos de
       2.6rem la cabecera ya llena una pantalla de 320px y la lectura caía a
       una segunda línea (+24px por tarjeta, medido el 2026-08-30). Acá va en
       una línea que ya existe y no cuesta alto en ningún ancho. */
    .extra-card .ex-yomi {
      font-style: normal;
      font-size: 0.72em;
      letter-spacing: 0.12em;
      color: rgba(245, 241, 232, 0.45);
      margin-right: 0.6em;
      white-space: nowrap;
    }
    .extra-card .ex-glyph[data-glyphs="5"] { font-size: 2.1rem; letter-spacing: 0.03em; }
    .extra-card .ex-glyph[data-glyphs="6"] { font-size: 1.85rem; letter-spacing: 0.02em; }
    .extra-card .ex-reading {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.15rem;
      color: rgba(245, 241, 232, 0.9);
      line-height: 1.45;
      margin-bottom: 1.3rem;
    }
    .extra-card .mini-cta {
      margin-top: 1.4rem;
      padding: 0.6rem 1.1rem;
      font-size: 0.88rem;
      width: 100%;
      justify-content: center;
    }
    .ex-ji-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.55rem;
      margin: 0;
      padding: 1rem 0 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ex-ji-list li {
      display: grid;
      grid-template-columns: 1.8em 1fr;
      align-items: center;
      gap: 0.9rem;
      font-size: 0.95rem;
      color: rgba(245, 241, 232, 0.75);
      line-height: 1.5;
    }
    .ex-ji-list li .ji {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 1.25rem;
      color: var(--seal);
      letter-spacing: 0;
    }
    .unlocked-state .down-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: rgba(245, 241, 232, 0.7);
      letter-spacing: 0.05em;
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      transition: color 0.15s, border-color 0.15s;
    }
    .unlocked-state .down-link:hover {
      color: var(--ink-on-dark);
      border-color: var(--ink-on-dark);
    }
    .unlocked-state .down-wrap { text-align: center; }

    /* Casual "buy me a coffee" tip — after the unlocked 7, and again at the very end of the page */
    .coffee-ask { margin-top: 1.5rem; text-align: center; }
    .coffee-ask p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: rgba(245, 241, 232, 0.65);
      line-height: 1.6;
      margin-bottom: 0.9rem;
    }
    .coffee-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: rgba(245, 241, 232, 0.75);
      letter-spacing: 0.05em;
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      transition: color 0.15s, border-color 0.15s;
    }
    .coffee-link:hover { color: var(--ink-on-dark); border-color: var(--ink-on-dark); }

    /* Dark variant for scene-more */
    .scene--dark .scene-more h2 { color: var(--ink-on-dark); }
    .scene--dark .more-sub { color: rgba(245, 241, 232, 0.65); }
    .scene--dark .locked-box {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .scene--dark .locked-box::after {
      background: var(--paper-dark);
      color: rgba(245, 241, 232, 0.45);
    }
    .scene--dark .locked-list li { color: var(--ink-on-dark); }
    .scene--dark .locked-list li::before { color: rgba(245, 241, 232, 0.4); }
    .scene--dark .price-btn {
      border-color: var(--paper);
      color: var(--paper);
    }
    .scene--dark .price-btn:hover {
      background: var(--paper);
      color: var(--ink);
    }
    .scene--dark .price-btn.rec {
      background: var(--paper);
      color: var(--ink);
    }
    .scene--dark .price-btn.rec:hover {
      background: var(--seal);
      color: var(--paper);
      border-color: var(--seal);
    }

    .price-row { display: flex; gap: 0.8rem; max-width: 28em; margin: 0 auto; }
    .price-btn {
      flex: 1;
      display: block;
      padding: 1.2rem 0.5rem;
      background: transparent;
      border: 1px solid var(--ink);
      color: var(--ink);
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: background 0.15s, color 0.15s;
    }
    .price-btn:hover { background: var(--ink); color: var(--paper); }
    .price-btn.rec { background: var(--ink); color: var(--paper); }
    .price-btn.rec:hover { background: var(--seal); border-color: var(--seal); }
    .price-btn .tag {
      display: block;
      font-style: italic;
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-top: 0.4rem;
      opacity: 0.75;
    }

    /* Scene footer */
    .scene-end {
      text-align: center;
    }
    .seal-mark {
      display: inline-block;
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      background: var(--seal);
      color: var(--paper);
      width: 80px;
      height: 80px;
      line-height: 80px;
      font-size: 2.2rem;
      margin-bottom: 2rem;
    }
    .scene-end .sig {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.3rem;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }
    .scene-end .sig-meta {
      font-size: 0.75rem;
      color: var(--ink-faint);
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }

    /* Scene POD */
    #s-pod {
      height: auto;
      min-height: 100vh;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 6rem;
      padding-bottom: 5rem;
      overflow: visible;
    }
    #s-pod .scene-caption {
      position: static;
      transform: none;
      margin-top: 3rem;
      left: auto;
      bottom: auto;
    }
    .scene-pod {
      text-align: center;
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
    }
    .scene-pod h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      line-height: 1.3;
      color: var(--ink-on-dark);
      margin-bottom: 1.5rem;
    }
    .scene-pod h2 .hl {
      font-style: normal;
      color: var(--seal);
      font-weight: 500;
    }
    .pod-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: rgba(245, 241, 232, 0.7);
      line-height: 1.7;
      max-width: 32em;
      margin: 0 auto 2rem;
    }
    .pod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
      margin-bottom: 2rem;
    }
    @media (max-width: 720px) {
      .pod-grid { grid-template-columns: 1fr; gap: 1.8rem; max-width: 18em; margin-left: auto; margin-right: auto; }
    }
    .pod-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
    }
    .pod-thumb {
      width: 100%;
      aspect-ratio: 1/1;
      background-color: rgba(255, 255, 255, 0.04);
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
      overflow: hidden;
    }
    .pod-thumb[data-product="tshirt"] {
      background-image: url('/assets/pod-tshirt.jpg');
      background-position: 50% 32%;
    }
    .pod-thumb[data-product="mug"] {
      background-image: url('/assets/pod-mug.jpg');
      background-position: 50% 62%;
    }
    .pod-thumb[data-product="tote"] {
      background-image: url('/assets/pod-tote.jpg');
      background-position: 50% 40%;
    }
    .pod-thumb[data-product="mug"] .pod-glyph { top: 51%; left: 57%; }
    .pod-thumb[data-product="tote"] .pod-glyph { top: 58%; left: 50%; }
    .pod-glyph {
      position: absolute;
      transform: translate(-50%, -50%);
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      writing-mode: vertical-rl;
      text-orientation: upright;
      color: #17130f;
      letter-spacing: 0.04em;
      line-height: 1.05;
      font-size: 1.15rem;
      mix-blend-mode: multiply;
      opacity: 0.9;
    }
    .pod-glyph[data-glyphs="2"] { font-size: 1.85rem; letter-spacing: 0.1em; }
    .pod-glyph[data-glyphs="3"] { font-size: 1.55rem; letter-spacing: 0.08em; }
    .pod-glyph[data-glyphs="4"] { font-size: 1.35rem; letter-spacing: 0.05em; }
    .pod-glyph[data-glyphs="5"] { font-size: 1.1rem; letter-spacing: 0.03em; }
    .pod-glyph[data-glyphs="6"] { font-size: 0.95rem; letter-spacing: 0.02em; }
    /* T-shirt: horizontal kanji + romanized name, distinct from the vertical mug/tote treatment */
    .pod-tshirt-text {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.75);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5em;
      mix-blend-mode: multiply;
      opacity: 0.9;
    }
    .pod-thumb[data-product="tshirt"] .pod-glyph {
      position: static;
      transform: none;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      mix-blend-mode: normal;
      opacity: 1;
      font-size: 1.6rem;
      letter-spacing: 0.16em;
    }
    .pod-thumb[data-product="tshirt"] .pod-glyph[data-glyphs="2"] { font-size: 1.9rem; letter-spacing: 0.22em; }
    .pod-thumb[data-product="tshirt"] .pod-glyph[data-glyphs="3"] { font-size: 1.6rem; letter-spacing: 0.16em; }
    .pod-thumb[data-product="tshirt"] .pod-glyph[data-glyphs="4"] { font-size: 1.35rem; letter-spacing: 0.1em; }
    .pod-thumb[data-product="tshirt"] .pod-glyph[data-glyphs="5"] { font-size: 1.15rem; letter-spacing: 0.06em; }
    .pod-thumb[data-product="tshirt"] .pod-glyph[data-glyphs="6"] { font-size: 1rem; letter-spacing: 0.04em; }
    .pod-alpha {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.68rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #17130f;
    }
    .pod-name {
      font-family: 'Noto Serif JP', serif;
      font-size: 0.95rem;
      color: var(--ink-on-dark);
      letter-spacing: 0.04em;
    }
    .pod-notes {
      list-style: none;
      max-width: 30em;
      margin: 0 auto 1.5rem;
      padding: 1.1rem 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      text-align: left;
    }
    .pod-notes li {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.92rem;
      color: rgba(245, 241, 232, 0.75);
      line-height: 1.7;
      padding: 0.25rem 0 0.25rem 1.3rem;
      position: relative;
    }
    .pod-notes li::before {
      content: '·';
      position: absolute;
      left: 0.4rem;
      color: var(--seal);
      font-size: 1.4rem;
      line-height: 1;
      top: 0.25rem;
    }
    .pod-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      letter-spacing: 0.08em;
      color: var(--ink-on-dark);
      background: var(--seal);
      padding: 1rem 2rem;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
    }
    .pod-cta:hover { opacity: 0.88; transform: translateY(-1px); }
    /* Descarga del PNG transparente (#s-pod). Los botones reusan .pod-cta para
       heredar el tratamiento dorado/sello de cada nombre; solo hay que apagar el
       borde y el fondo que el navegador le pone a <button> por defecto. */
    .pod-download { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
    .pod-dl-note {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.82rem;
      letter-spacing: 0.06em;
      opacity: 0.55;
    }

    @media (max-width: 720px) {
      .scene { padding: 5rem 1.5rem; }
      #s-more .scene-more { padding: 4.2rem 1.1rem 1.2rem; }
      /* el panel de detalle se salió del flex y ahora lleva él el padding,
         así que acá se repite el 1.5rem lateral que tenía .scene en móvil */
      .detail-scene .scene-detail { padding: 4.5rem 1.5rem 2rem; }
      /* en mobile el label de esquina (i · el nombre, ix · hay más, etc.) queda
         tan chico que no se lee, y en varias escenas se pisa con el título
         principal (label-num "iii", h2 de #s-more) — se saca del todo */
      .label { display: none; }
      .scene-kanji::after { right: 1.5rem; }
      .chapter-dots { right: 0.6rem; }
      /* a 2 columnas, "una elegancia digna, que se mueve con color y vida" no
         entra en ~160px de columna sin envolver 4+ líneas — vuelve a 1 columna
         angosta, donde sí entra en ~2 líneas */
      .locked-box { padding: 1.1rem 1.1rem 0.8rem; margin-bottom: 0.9rem; }
      .locked-list { grid-template-columns: 1fr; row-gap: 0; }
      .locked-list li:last-child { grid-column: auto; }
      .locked-list li { font-size: 0.82rem; line-height: 1.5; padding: 0.35rem 0; gap: 0.45rem; }
      .locked-list li::before { font-size: 0.88rem; min-width: 1.6em; }
      .locked-list .ji-blurred { font-size: 1.05rem; }
      .scene-more h2 { font-size: 1.35rem; margin-bottom: 1.4rem; }
      .more-sub { font-size: 0.82rem; margin-bottom: 0.8rem; }
      .price-row { max-width: 100%; }
      /* Dos medidas, las dos medidas de verdad en el navegador:
         · ancho — tres hojas de 108px + dos gaps de 1rem miden 356px y no
           entran en los 342px útiles de una pantalla de 390px. Se achican en
           vez de apilarse: la escena ES "la misma palabra tres veces", en
           columna no se comparan.
         · alto — .scene recorta lo que sobra (overflow:hidden), y con los
           tamaños de escritorio esta escena medía 507px contra los 480px
           útiles de una pantalla de 360x640: se comía la última línea sin
           avisar. Los valores de abajo la dejan en ~455px. Si se alarga el
           texto de .mano-sub, volver a medir a 360x640 antes de publicar. */
      .scene-mano h2 { font-size: 1.45rem; margin-bottom: 0.8rem; }
      .mano-sub { font-size: 0.84rem; line-height: 1.6; margin-bottom: 1.1rem; }
      .mano-sheets { gap: 0.6rem; margin-bottom: 0.7rem; }
      .mano-sheet { width: 84px; padding: 7px 6px; }
      .mano-caption { font-size: 0.72rem; margin-bottom: 1.1rem; }
      .mano-cta { font-size: 0.95rem; padding: 0.8rem 1.4rem; }
      .mano-note { font-size: 0.72rem; margin-top: 0.8rem; }
    }

    /* Scene 1: cinema gold foil sobre negro */
    #s1 {
      background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(var(--accent-amb-rgb), 0.4), rgba(0,0,0,0) 62%),
        var(--paper-dark);
    }
    #s1::before, #s1::after {
      content: "";
      position: absolute; left: 6rem; right: 6rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
    }
    #s1::before { top: 7.5rem; }
    #s1::after { bottom: 7.5rem; }
    #s1 .name {
      background: linear-gradient(115deg, var(--accent-deep) 0%, var(--accent-light) 22%, var(--accent-pale) 38%, var(--accent) 52%, var(--accent-deep) 68%, var(--accent-light) 84%, var(--accent-deep) 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmerGold 6s ease-in-out infinite;
    }
    @keyframes shimmerGold {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    #s1 .credit-line { color: rgba(245, 241, 232, 0.55); }
    #s1 .credit-line .hl { color: var(--hl); }
    #s1 .credit-presenta { color: rgba(245, 241, 232, 0.4); }
    #s1 .kana { color: rgba(245, 241, 232, 0.75); }
    #s1 .etymology { color: rgba(245, 241, 232, 0.55); }
    #s1 .etymology em { color: var(--hl); }
    #s1 .lec-q { color: rgba(245, 241, 232, 0.4); }
    #s1 .lec { color: rgba(245, 241, 232, 0.5); }
    #s1 .lec-on { color: rgba(245, 241, 232, 0.92); border-bottom-color: var(--hl); }
    #s1 a.lec:hover { color: rgba(245, 241, 232, 0.92); border-bottom-color: rgba(245, 241, 232, 0.4); }
    @media (max-width: 720px) {
      #s1::before, #s1::after { left: 1.5rem; right: 1.5rem; }
    }

    /* Kanji scenes (s3/s4/s5): mismo lenguaje dorado que la escena 1 */
    .kanji-scene {
      background:
        radial-gradient(ellipse 65% 55% at 50% 42%, rgba(var(--accent-amb-rgb), 0.28), rgba(0,0,0,0) 62%),
        var(--paper-dark);
    }
    .kanji-scene::before, .kanji-scene::after {
      content: "";
      position: absolute; left: 6rem; right: 6rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
    }
    .kanji-scene::before { top: 7.5rem; }
    .kanji-scene::after { bottom: 7.5rem; }
    .scene-kanji .glyph {
      background: linear-gradient(115deg, var(--accent-deep) 0%, var(--accent-light) 22%, var(--accent-pale) 38%, var(--accent) 52%, var(--accent-deep) 68%, var(--accent-light) 84%, var(--accent-deep) 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmerGold 7s ease-in-out infinite;
    }
    .kanji-scene .mini-cta {
      border-color: rgba(var(--accent-rgb), 0.45);
      color: rgba(245, 241, 232, 0.9);
    }
    .kanji-scene .mini-cta:hover {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
      border-color: transparent;
    }
    @media (max-width: 720px) {
      .kanji-scene::before, .kanji-scene::after { left: 1.5rem; right: 1.5rem; }
    }

    /* Meaning/detail scenes (s3d/s4d/s5d): misma noche dorada que la escena del kanji,
       para no volver de golpe al papel claro justo después del reveal. */
    .detail-scene {
      background-color: var(--paper-dark);
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(ellipse 65% 55% at 50% 40%, rgba(var(--accent-amb-rgb), 0.22), rgba(0,0,0,0) 62%);
      background-size: 3px 3px, 100% 100%;
    }
    .scene-detail .label-num {
      position: relative;
      padding-bottom: 0.6rem;
    }
    .scene-detail .label-num::after {
      content: "";
      position: absolute;
      bottom: 0; left: 0;
      width: 2.4rem; height: 1px;
      background: linear-gradient(90deg, var(--accent), transparent);
    }
    .card-quote {
      background: rgba(var(--accent-rgb), 0.07);
      border-left: 2px solid var(--accent);
    }
    .card-quote .card-quote-label { color: var(--accent-deep); }
    .scene-detail .ji-list li { border-bottom-color: rgba(var(--accent-rgb), 0.25); }
    .scene-detail .ji-conclusion { border-top-color: rgba(var(--accent-rgb), 0.35); }

    .detail-scene .label-num { color: rgba(245, 241, 232, 0.55); }
    .detail-scene .scene-detail h3 { color: rgba(245, 241, 232, 0.92); }
    .detail-scene .scene-detail h3 .glyph-inline { color: var(--accent-bright); }
    .detail-scene .ji-list .ji { color: var(--hl); }
    .detail-scene .ji-list .ji-desc { color: rgba(245, 241, 232, 0.75); }
    .detail-scene .ji-conclusion { color: rgba(245, 241, 232, 0.92); }
    .detail-scene .card-quote {
      background: rgba(255, 255, 255, 0.05);
    }
    .detail-scene .card-quote .card-quote-label { color: var(--accent-bright); }
    .detail-scene .card-quote p { color: rgba(245, 241, 232, 0.85); }
    .detail-scene .mini-cta-light {
      color: rgba(245, 241, 232, 0.9);
      border-color: rgba(var(--accent-rgb), 0.45);
    }
    .detail-scene .mini-cta-light:hover {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
      border-color: transparent;
    }
    /* Scene 2 (s7): presentación del calígrafo — mismo lenguaje nocturno que el resto */
    .intro-scene {
      background:
        radial-gradient(ellipse 65% 55% at 50% 45%, rgba(var(--accent-amb-rgb), 0.24), rgba(0,0,0,0) 62%),
        var(--paper-dark);
    }
    .intro-scene::before, .intro-scene::after {
      content: "";
      position: absolute; left: 6rem; right: 6rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
    }
    .intro-scene::before { top: 7.5rem; }
    .intro-scene::after { bottom: 7.5rem; }
    #s7::before, #s7::after { display: none; }
    .intro-scene .scene-merit h2 { color: rgba(245, 241, 232, 0.95); }
    .intro-scene .scene-merit h2 .hl { color: var(--hl); }
    .intro-scene .merit-statement { color: rgba(245, 241, 232, 0.75); }
    .intro-scene .merit-statement strong { color: #f5f1e8; font-weight: 500; }
    .intro-scene .tatuaje-aviso a { color: rgba(245, 241, 232, 0.6); }
    .intro-scene .merit-tease { color: rgba(245, 241, 232, 0.9); }
    .intro-scene .merit-tease .hl { color: var(--hl); }
    @media (max-width: 720px) {
      .intro-scene::before, .intro-scene::after { left: 1.5rem; right: 1.5rem; }
    }

    /* Scene "hay más" (#s-more): mismo lenguaje nocturno + dorado */
    #s-more {
      background-color: var(--paper-dark);
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--accent-amb-rgb), 0.22), rgba(0,0,0,0) 62%);
      background-size: 3px 3px, 100% 100%;
    }
    .scene--dark .locked-box { border-color: rgba(var(--accent-rgb), 0.3); }
    .lock-icon { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35); }
    .scene--dark .locked-list li::before { color: rgba(var(--accent-bright-rgb), 0.85); }
    .unlocked-state .unlocked-tag { color: var(--accent-bright); text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35); }
    .extra-card { border-color: rgba(var(--accent-rgb), 0.2); }
    .extra-card .ex-num { color: rgba(var(--accent-rgb), 0.65); }
    .extra-card .ex-glyph { color: var(--accent-bright); }
    .ex-ji-list { border-top-color: rgba(var(--accent-rgb), 0.2); }
    .ex-ji-list li .ji { color: var(--hl); }
    .unlocked-state .down-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
    #s-more .coffee-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
    #s-more .price-btn.rec {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
      border-color: transparent;
    }
    #s-more .price-btn.rec:hover {
      background: linear-gradient(115deg, var(--accent-darker), var(--accent-bright), var(--accent-deep));
      border-color: transparent;
    }

    /* Scene "la mano" (s-mano): mismo lenguaje nocturno + dorado.
       Las hojas de papel se dejan en papel crudo a propósito: son lo único de
       la página que no está diseñado — es una foto de tinta sobre papel. */
    #s-mano {
      background-color: var(--paper-dark);
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--accent-amb-rgb), 0.22), rgba(0,0,0,0) 62%);
      background-size: 3px 3px, 100% 100%;
    }
    .scene-mano h2 .hl { color: var(--hl); }
    .mano-cta {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
    }

    /* Scene "encargo" (s-encargo): reusa el tratamiento de .intro-scene */
    .intro-scene .encargo-note { color: rgba(245, 241, 232, 0.75); }
    .intro-scene .encargo-note strong { color: #f5f1e8; font-weight: 500; }
    .intro-scene .mini-cta-light {
      color: rgba(245, 241, 232, 0.9);
      border-color: rgba(var(--accent-rgb), 0.45);
    }
    .intro-scene .mini-cta-light:hover {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
      border-color: transparent;
    }

    /* Scene POD (s-pod): mismo lenguaje nocturno + dorado.
       Las fotos de producto (pod-thumb) y su tinta simulada (pod-glyph/pod-alpha,
       mix-blend-mode: multiply) se dejan intactas — son un mockup realista, no
       una tarjeta de marca. Solo se viste el marco alrededor. */
    #s-pod {
      background-color: var(--paper-dark);
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--accent-amb-rgb), 0.22), rgba(0,0,0,0) 62%);
      background-size: 3px 3px, 100% 100%;
    }
    .scene-pod h2 .hl { color: var(--hl); }
    .pod-thumb { border-color: rgba(var(--accent-rgb), 0.25); }
    .pod-notes { border-top-color: rgba(var(--accent-rgb), 0.25); border-bottom-color: rgba(var(--accent-rgb), 0.25); }
    .pod-notes li::before { color: var(--hl); }
    .pod-cta {
      background: linear-gradient(115deg, var(--accent-deep), var(--accent-light), var(--accent));
      color: #1a1a1a;
    }
    #s-pod .coffee-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }

/* ==================================================================
   LO ÚNICO QUE CAMBIA ENTRE UN NOMBRE Y OTRO
   ================================================================== */

/* ---- Paletas de acento ------------------------------------------
   Mismo diseño, distinto color. La regla es fija: nombres de mujer en
   oro rosa, nombres de hombre en oro — sin excepciones por nombre.
   (Javier estuvo en azul un tiempo por los kanji de gema azul que eligió
   el calígrafo; se volvió a oro el 2026-08-26 para no romper la regla.)
   El azul queda definido pero sin usar: está por si algún día se cambia
   el oro entero por azul. Cada paleta define los mismos siete tonos,
   con el mismo papel en el diseño.
   La galería de la portada pinta cada tarjeta con la paleta que el nombre
   declara en names.js (.gallery-card[data-palette] en es/index.html), así
   que una tarjeta no puede quedar de otro color que su página. */

body[data-palette="rose"] {
  --accent-deep:   #a3525f;
  --accent:        #c97a8f;
  --accent-light:  #e9acc0;
  --accent-pale:   #fdebf1;
  --accent-bright: #d992a8;
  --accent-darker: #8a4f5c;
  --accent-card:   #f0b8cc;
  --hl:            #d9645a;
  --accent-rgb:        201, 122, 143;
  --accent-bright-rgb: 216, 154, 172;
  --accent-amb-rgb:    95, 50, 60;
}

body[data-palette="gold"] {
  --accent-deep:   #a3782f;
  --accent:        #c9973f;
  --accent-light:  #e9cd85;
  --accent-pale:   #fdf6de;
  --accent-bright: #d9b873;
  --accent-darker: #8a6a2f;
  --accent-card:   #f0d78a;
  --hl:            #d9645a;
  --accent-rgb:        201, 151, 63;
  --accent-bright-rgb: 201, 151, 63;
  --accent-amb-rgb:    90, 70, 30;
}

body[data-palette="blue"] {
  --accent-deep:   #3d5a99;
  --accent:        #6a8fd0;
  --accent-light:  #b8cdf0;
  --accent-pale:   #eaf1fc;
  --accent-bright: #8fb3ea;
  --accent-darker: #33477a;
  /* Antes esto era #f0b8cc: la tarjeta de Javier iba de rosa a azul porque
     el valor se copió de María y no se cambió. */
  --accent-card:   #a8c6f2;
  --hl:            #5b84d6;
  --accent-rgb:        106, 143, 208;
  --accent-bright-rgb: 106, 143, 208;
  --accent-amb-rgb:    45, 70, 120;
}

/* ---- Ajustes finos por nombre ------------------------------------
   --free-count  cuántas versiones son gratis (numera la lista bajo llave)
   --locked-max  ancho del bloque bajo llave; depende de cuántas versiones
                 de pago hay y de qué tan largos son sus significados */

/* Hoy NINGÚN nombre necesita una línea acá: los cinco usaban exactamente los
   valores por defecto que ya están en el var() de arriba (2 y 52em), así que
   eran cinco líneas que no hacían nada — pero que parecían obligatorias y
   convertían "agregar un nombre" en "acordarse de tocar también el CSS".
   Se borraron el 2026-08-27, al pasar las páginas a generarse desde names.js:
   un nombre nuevo NO se toca acá.

   Volver a escribir una línea sólo si ese nombre es la excepción:
     body[data-name="X"] { --free-count: 3; --locked-max: 60em; }
   (p. ej. si algún nombre llega con 3 versiones libres, o con significados tan
   largos que el bloque bajo llave necesita más ancho). */