/* ------------------------------------------------------------------
   tu nombre — estilos de la PORTADA (/es/ y /en/)
   ------------------------------------------------------------------
   Hasta el 2026-08-28 esto vivía DOS veces: 506 líneas idénticas dentro
   de es/index.html y otras tantas dentro de en/index.html. Cada arreglo
   había que hacerlo dos veces y ya se habían desincronizado (el aviso
   .gal-note existía sólo en la inglesa). Ahora las dos portadas las
   genera tools/build_index_pages.js y leen este archivo.

   Las PÁGINAS DE NOMBRE usan assets/cinema.css, que es otro archivo:
   comparten paleta y tipografías pero no la estructura.
   ------------------------------------------------------------------ */

    :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-behavior: smooth; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Noto Serif JP', 'Cormorant Garamond', serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
    }

    /* Evita que el navegador "auto-oscurezca" la página en dark mode — solo el fondo/color
       base del body, nunca un reset a los descendientes (eso apaga botones con relleno
       oscuro intencional; mismo gotcha documentado en website/encargo/public/web/). */
    @media (prefers-color-scheme: dark) {
      html, body { background: var(--paper) !important; color: var(--ink) !important; }
    }

    /* --- 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; }
    .top-bar .right { display: flex; align-items: center; gap: 1.4rem; }
    .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.1em;
      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); }

    /* --- Scenes (secciones a pantalla completa) --- */
    .scene {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8rem 4rem;
      position: relative;
      overflow: hidden;
    }
    .scene--dark { background: var(--paper-dark); color: var(--ink-on-dark); }
    .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--dark .label { color: rgba(245, 241, 232, 0.5); }
    .scene-caption {
      position: absolute;
      bottom: 4rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--ink-soft);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: opacity 0.2s;
    }
    .scene--dark .scene-caption { color: rgba(245, 241, 232, 0.6); }
    .scene-caption:hover { opacity: 0.7; }

    @media (max-width: 720px) {
      .scene { padding: 7rem 1.5rem; }
      .label { left: 1.5rem; top: 4.5rem; }
    }

    /* --- Hero (mismo lenguaje dorado que #s1 en maria.html/antonio.html/carmen.html) --- */
    #hero {
      background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(90, 70, 30, 0.4), rgba(0,0,0,0) 62%),
        var(--paper-dark);
    }
    #hero::before, #hero::after {
      content: "";
      position: absolute; left: 6rem; right: 6rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, #c9973f 15%, #c9973f 85%, transparent);
    }
    #hero::before { top: 7.5rem; }
    #hero::after { bottom: 7.5rem; }
    @media (max-width: 720px) {
      #hero::before, #hero::after { left: 1.5rem; right: 1.5rem; }
    }

    .hero-content { text-align: center; }
    .hero-content .credit { margin-bottom: 3rem; animation: creditFade 1.2s ease-out both; }
    .hero-content .credit-line {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(0.85rem, 1.2vw, 1.05rem);
      color: rgba(245, 241, 232, 0.55);
      letter-spacing: 0.28em;
      text-transform: lowercase;
    }
    .hero-content .credit-line .hl { font-style: normal; font-weight: 500; color: #d9645a; letter-spacing: 0.32em; padding: 0 0.1em; }
    .hero-content .credit-presenta {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.65rem, 0.85vw, 0.78rem);
      color: rgba(245, 241, 232, 0.4);
      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); }
    }
    .hero-content .wordmark {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(3.2rem, 11vw, 8rem);
      line-height: 1.05;
      margin-bottom: 1.8rem;
      animation: creditFade 1.4s 0.4s ease-out both;
      background: linear-gradient(115deg, #a3782f 0%, #e9cd85 22%, #fdf6de 38%, #c9973f 52%, #a3782f 68%, #e9cd85 84%, #a3782f 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmerGold 6s ease-in-out infinite, creditFade 1.4s 0.4s ease-out both;
    }
    @keyframes shimmerGold {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .hero-content .kanji-line {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(1rem, 2vw, 1.4rem);
      color: rgba(245, 241, 232, 0.75);
      letter-spacing: 0.4em;
      animation: creditFade 1.4s 0.7s ease-out both;
    }
    .hero-content .pitch {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.95rem, 1.4vw, 1.15rem);
      color: rgba(245, 241, 232, 0.6);
      max-width: 30em;
      margin: 1.6rem auto 0;
      line-height: 1.6;
      animation: creditFade 1.4s 1s ease-out both;
    }
    .hero-content .pitch em { font-style: normal; color: #d9645a; }

    /* --- Galería --- */
    #gallery { display: block; padding: 7rem 4rem; }
    .gallery-inner { max-width: 68rem; margin: 0 auto; text-align: center; }
    .gallery-inner .label { position: static; display: block; margin-bottom: 1.2rem; }
    .gallery-inner h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.8rem, 3.4vw, 2.8rem);
      line-height: 1.3;
      color: var(--ink);
      margin-bottom: 1.2rem;
    }
    .gallery-inner > p {
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      font-size: 1.02rem;
      line-height: 1.85;
      color: var(--ink-soft);
      max-width: 38em;
      margin: 0 auto 3.5rem;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem;
      text-align: left;
    }
    @media (max-width: 900px) {
      .gallery-grid { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
    }
    /* Cada tarjeta lleva el color de SU nombre, el mismo que su página: oro los
       de hombre, oro rosa los de mujer. El data-palette lo pone el script de
       abajo leyendo names.js, así que una tarjeta no puede quedar de un color
       distinto al de la página que abre. */
    .gallery-card {
      --gc: #d9b873;                    /* oro */
      --gc-rgb: 201, 151, 63;
      display: block;
      background: var(--paper-dark);
      border: 1px solid rgba(var(--gc-rgb), 0.2);
      padding: 2.2rem 1.9rem 2rem;
      text-decoration: none;
      transition: transform 0.2s, border-color 0.2s;
    }
    .gallery-card[data-palette="rose"] {
      --gc: #d992a8;                    /* oro rosa */
      --gc-rgb: 201, 122, 143;
    }
    .gallery-card[data-palette="blue"] {
      --gc: #8fb3ea;
      --gc-rgb: 106, 143, 208;
    }
    .gallery-card:hover { transform: translateY(-3px); border-color: rgba(var(--gc-rgb), 0.45); }
    /* El nombre en alfabeto es lo primero que hay que reconocer al pasar la
       vista por la galería ("¿ese es mi nombre?") — el kanji es el payoff,
       pero si el kanji es lo más grande, quien no lee kanji no reconoce nada
       y sigue de largo (el calígrafo: "el kanji no le dice nada al que lo mira"). */
    .gallery-card .gc-name {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(2.2rem, 5.5vw, 2.9rem);
      line-height: 1.1;
      color: var(--ink-on-dark);
      margin-bottom: 0.3rem;
    }
    .gallery-card .gc-kana {
      font-family: 'Noto Serif JP', serif;
      font-size: 0.85rem;
      letter-spacing: 0.3em;
      color: rgba(245, 241, 232, 0.45);
      margin-bottom: 1.4rem;
    }
    .gallery-card .gc-glyph {
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: clamp(1.9rem, 4.2vw, 2.4rem);
      letter-spacing: 0.04em;
      line-height: 1;
      color: var(--gc);
      margin-bottom: 1.2rem;
    }
    .gallery-card .gc-reading {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      line-height: 1.5;
      color: rgba(245, 241, 232, 0.85);
      margin-bottom: 1.4rem;
      min-height: 3.1em;
    }
    .gallery-card .gc-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.92rem;
      color: rgba(245, 241, 232, 0.7);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 1.1rem;
      width: 100%;
    }
    .gallery-card .gc-link::after { content: '→'; margin-left: auto; transition: transform 0.15s; }
    .gallery-card:hover .gc-link::after { transform: translateX(3px); }

    @media (max-width: 720px) {
      #gallery { padding: 5rem 1.5rem; }
      .gallery-card .gc-glyph {
        font-size: clamp(2.6rem, 12vw, 3.6rem);
        text-align: center;
      }
    }

    /* --- Búsqueda --- */
    #search {
      background:
        radial-gradient(ellipse 65% 55% at 50% 42%, rgba(90, 70, 30, 0.22), rgba(0,0,0,0) 62%),
        var(--paper-dark);
      display: block;
      padding: 7rem 4rem;
    }
    .search-inner { max-width: 34rem; margin: 0 auto; text-align: center; }
    .search-inner .label { position: static; display: block; margin-bottom: 1.2rem; color: rgba(245, 241, 232, 0.5); }
    .search-inner h2 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      line-height: 1.35;
      color: var(--ink-on-dark);
      margin-bottom: 1rem;
    }
    .search-inner > p.sub {
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.8;
      color: rgba(245, 241, 232, 0.6);
      margin-bottom: 2.6rem;
    }

    .search-form { display: flex; gap: 0.7rem; }
    .search-form input[type="text"] {
      flex: 1;
      min-width: 0;
      padding: 1rem 1.1rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--ink-on-dark);
      font-family: 'Noto Serif JP', serif;
      font-size: 1rem;
      text-overflow: ellipsis;
    }
    .search-form input[type="text"]::placeholder { color: rgba(245, 241, 232, 0.4); font-style: italic; }
    .search-form input[type="text"]:focus { outline: none; border-color: #d9645a; }
    .search-form button {
      background: var(--seal);
      color: var(--paper);
      border: 1px solid var(--seal);
      padding: 1rem 1.6rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      cursor: pointer;
      transition: opacity 0.2s;
      white-space: nowrap;
    }
    .search-form button:hover { opacity: 0.85; }

    @media (max-width: 480px) {
      .search-form { flex-direction: column; }
    }

    /* Panel de lista de espera */
    .waitlist-panel {
      display: none;
      margin-top: 2.4rem;
      padding-top: 2.2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      text-align: left;
    }
    .waitlist-panel.show { display: block; animation: creditFade 0.5s ease-out both; }
    .waitlist-panel .wp-name {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.15rem;
      color: var(--ink-on-dark);
      margin-bottom: 0.5rem;
    }
    .waitlist-panel .wp-name .q { color: #d9b873; }
    .waitlist-panel .wp-hint {
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      font-size: 0.95rem;
      line-height: 1.75;
      color: rgba(245, 241, 232, 0.65);
      margin-bottom: 1.5rem;
    }
    .waitlist-form { display: flex; gap: 0.7rem; }
    .waitlist-form input[type="email"] {
      flex: 1;
      padding: 0.9rem 1rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--ink-on-dark);
      font-family: 'Noto Serif JP', serif;
      font-size: 0.95rem;
    }
    .waitlist-form input[type="email"]::placeholder { color: rgba(245, 241, 232, 0.4); font-style: italic; }
    .waitlist-form input[type="email"]:focus { outline: none; border-color: #d9645a; }
    .waitlist-form button {
      background: transparent;
      color: var(--ink-on-dark);
      border: 1px solid rgba(245, 241, 232, 0.35);
      padding: 0.9rem 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .waitlist-form button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
    @media (max-width: 480px) {
      .waitlist-form { flex-direction: column; }
    }

    .waitlist-done {
      display: none;
      align-items: center;
      gap: 0.9rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.02rem;
      color: rgba(245, 241, 232, 0.9);
    }
    .waitlist-done.show { display: flex; animation: creditFade 0.5s ease-out both; }
    .waitlist-done .mark {
      flex-shrink: 0;
      width: 34px; height: 34px;
      background: var(--seal);
      color: var(--paper);
      font-family: 'Noto Serif JP', serif;
      font-weight: 700;
      font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
    }

    /* Encargo — nota lateral, deliberadamente discreta (no compite con el buscador) */
    .encargo-note {
      margin-top: 3rem;
      padding-top: 1.8rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.9rem;
      line-height: 1.7;
      color: rgba(245, 241, 232, 0.45);
    }
    .encargo-note a { color: rgba(245, 241, 232, 0.75); text-decoration: none; border-bottom: 1px solid rgba(245, 241, 232, 0.3); }
    .encargo-note a:hover { color: var(--ink-on-dark); border-color: var(--ink-on-dark); }

    @media (max-width: 720px) {
      #search { padding: 5rem 1.5rem; }
    }

    /* --- Footer --- */
    footer {
      padding: 3.5rem 2rem 3rem;
      text-align: center;
      border-top: 1px solid var(--ink-line);
    }
    footer .f-mark {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      letter-spacing: 0.1em;
      color: var(--ink-soft);
      margin-bottom: 0.6rem;
    }
    footer .f-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.85rem;
      color: var(--ink-faint);
      margin-bottom: 1.6rem;
    }
    footer .f-links { display: flex; justify-content: center; gap: 1.6rem; }
    footer .f-links a {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      color: var(--ink-faint);
      text-decoration: none;
    }
    footer .f-links a:hover { color: var(--ink-soft); }
    .gal-note { display: block; margin-top: 0.5rem; font-size: 0.85em; color: var(--ink-faint); font-style: italic; }

    /* --- «ver los 175 nombres» y el catálogo (nombres.html) ---------------
       La vitrina de la portada muestra 9; el resto vive en nombres.html.
       Este enlace es el único puente entre las dos, así que se ve como un
       botón y no como una nota al pie. */
    /* En nombres.html el .mark de la barra es un <a> (vuelve a la portada).
       Sin esto sale azul y subrayado: sería el único enlace del sitio así. */
    .top-bar a.mark { color: inherit; text-decoration: none; }
    .top-bar a.mark:hover { color: var(--ink); }

    .ver-todos {
      display: inline-block;
      margin-top: 3rem;
      padding: 0.9rem 2.2rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      letter-spacing: 0.04em;
      color: var(--ink);
      text-decoration: none;
      border: 1px solid var(--ink-line);
      transition: border-color 0.2s, background 0.2s;
    }
    .ver-todos:hover { border-color: rgba(0,0,0,0.28); background: rgba(0,0,0,0.02); }

    /* El catálogo. A diferencia de la vitrina, acá el kanji NO es el
       protagonista: son 175 filas y lo que el visitante hace es buscar su
       propio nombre en alfabeto latino, así que ese es el que manda. La barra
       de arriba se queda en su estado por defecto (claro): esta página no tiene
       ninguna sección oscura, así que no carga index-page.js ni el observador
       que alterna `on-dark` en la portada. */
    #lista { padding: 8rem 4rem 5rem; }
    .lista-inner { max-width: 68rem; margin: 0 auto; text-align: center; }
    .lista-inner .label { position: static; display: block; margin-bottom: 1.2rem; }
    .lista-inner h1 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.9rem, 3.6vw, 3rem);
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 1.2rem;
    }
    .lista-inner .sub {
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.85;
      color: var(--ink-soft);
      max-width: 38em;
      margin: 0 auto 3.5rem;
    }
    .lista-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      gap: 0.9rem;
      text-align: left;
    }
    .ln {
      --gc: #c9973f;
      display: block;
      /* El <a> sin color propio hereda el azul del navegador. Hoy los tres
         hijos lo pisan, pero el día que se agregue una cuarta línea saldría
         azul y subrayada en medio del catálogo. */
      color: var(--ink);
      padding: 1rem 1.2rem;
      text-decoration: none;
      border: 1px solid var(--ink-line);
      border-left: 2px solid var(--gc);
      transition: background 0.15s, border-color 0.15s;
    }
    .ln[data-palette="rose"] { --gc: #c97a8f; }
    .ln[data-palette="blue"] { --gc: #6a8fd0; }
    .ln:hover { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.18); }
    .ln .ln-alpha {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.5rem;
      line-height: 1.15;
      color: var(--ink);
    }
    .ln .ln-kana {
      display: block;
      font-family: 'Noto Serif JP', serif;
      font-size: 0.72rem;
      letter-spacing: 0.24em;
      color: var(--ink-faint);
      margin: 0.15rem 0 0.5rem;
    }
    .ln .ln-glyph {
      display: block;
      font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 1.25rem;
      letter-spacing: 0.06em;
      color: var(--gc);
    }
    @media (max-width: 900px) {
      #lista { padding: 6rem 1.5rem 4rem; }
      /* 9.5rem y no 11: a 390 px de ancho quedan 342 útiles y con 11rem
         (176 px × 2 + gap = 363) entraba UNA sola columna — 175 filas de a una
         en el teléfono. Medido en iframe a 390×780. */
      .lista-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.7rem; }
      .ln { padding: 0.85rem 1rem; }
      .ln .ln-alpha { font-size: 1.3rem; }
      .ver-todos { margin-top: 2.2rem; padding: 0.8rem 1.6rem; font-size: 1rem; }
    }