/* ============================================================================
   KOKÏN — Hoja única de la landing (kokinstudio.com/)
   ----------------------------------------------------------------------------
   Una página, una hoja. Aquí se fundieron las dos portadas que hubo:
     · la v2 «editorial» —fondo papel, tinta negra y un solo color vivo (el
       hilo rojo) para la numeración y las palabras clave—, de la que quedan
       la cabecera, el héroe, la marquesina, el raíl, el cierre y el pie;
     · la v3 «clara» —todo en fichas redondeadas, mucho aire y la letra
       subida—, de la que vienen las secciones de en medio (§14 en adelante).

   Índice
     §0  Tokens (color, tipo, espaciado)
     §1  Reset y base
     §2  Tipografía de sistema (display, mono, texto)
     §3  Piezas sueltas (etiquetas, botones, marcos, marquesina)
     §4  Cabecera y navegación
     §5  Héroe
     §6  Secciones
     §7  Raíles horizontales (Así quedan)
     §9  Plegables (FAQ)
     §11 Cierre y pie
     §12 Movimiento (reveals) y accesibilidad
     §13 Utilidades de rejilla
     §14–§22 Las fichas: problema, cómo funciona, patrones, precios, FAQ
     §23 Lo nuevo de la página única (héroe, demo, así quedan, diferencia)
     §24 Páginas legales
   ========================================================================== */

/* ============================================================================
   §0 · TOKENS
   Los colores son los de PALETA.md sin tocar. Lo que cambia respecto a la v1
   es el REPARTO: aquí el papel y la tinta ocupan casi todo, y el rojo aparece
   sólo en la numeración de sección, en palabras subrayadas y en el foco.
   ========================================================================== */
:root {
  /* Deja que `auto` se pueda interpolar: lo necesita la apertura
     animada del acordeón de la FAQ. */
  interpolate-size: allow-keywords;

  /* Superficies. El fondo es BLANCO (decidido el 25 sep 2026: el papel
     beige de antes apagaba las fotos y los dibujos). Las fichas se separan
     del fondo con un gris cálido muy leve y su filo, no con color. */
  --paper:        #ffffff;
  --paper-2:      #faf9f7;
  --kraft:        #f2efea;
  --ink:          #16150f;
  --on-ink:       #f7f2ea;

  /* Tinta */
  --text:         #16150f;
  --text-soft:    #46423a;
  --text-faint:   #6d675c;

  /* Radio de las esquinas. Ligero a propósito: lo justo para quitar el filo
     sin que el botón se vuelva una píldora —el resto de la página va a escuadra
     (fichas, cuadrícula, hoja de patrón) y una cápsula chocaría. */
  --radio:        4px;

  /* El hilo rojo */
  --red:          #c2402d;
  --red-ink:      #9d3121;  /* rojo como TEXTO sobre papel  */
  --red-bright:   #d9614f;  /* rojo como TEXTO sobre tinta  */
  --on-red:       #fbf6ee;
  --red-soft:     rgba(194, 64, 45, .10);

  /* Filos */
  --line:         #e0d6c6;
  --line-strong:  #c3b7a2;
  --line-deep:    rgba(247, 242, 234, .16);

  /* Tipografías.
     Fraunces → los displays. Es LA LETRA DEL LOGOTIPO (que va en trazados
              dentro del SVG). Antes aquí había Anton, y el logo era la única
              serif de toda la página: se leía como resto de otro proyecto.
              Con los titulares en Fraunces, marca y voz son la misma letra.
     Archivo→ variable en peso Y ANCHO: cubre los intermedios condensados
              (navegación, botones, subtítulos) con una sola familia.
     Inter  → texto corrido.
     JetBrains Mono → etiquetas, cifras, (paréntesis) y [corchetes]. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --cond:    "Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala tipográfica fluida. Los displays crecen mucho más rápido que el
     texto: es lo que da el contraste de revista. */
  /* Bajados al cambiar Anton por Fraunces: la condensada metía el doble de
     texto por línea. Con los mismos cuerpos, los titulares desbordaban. */
  --fs-xl:    clamp(2.3rem, 6.4vw, 5.4rem);
  --fs-lg:    clamp(1.85rem, 4.4vw, 3.5rem);
  --fs-md:    clamp(1.35rem, 2.6vw, 2.1rem);
  --fs-body:  clamp(.95rem, 1.05vw, 1.0625rem);
  --fs-meta:  clamp(.625rem, .78vw, .75rem);

  /* Ritmo */
  --gut:      clamp(1.15rem, 4vw, 3.25rem);   /* margen lateral de página */
  --sec:      clamp(3.75rem, 8vw, 8.5rem);    /* aire entre secciones     */
  --hdr:      3.5rem;                         /* alto de la cabecera      */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================================
   §1 · RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;               /* los raíles a sangre no deben desbordar */
  overflow-x: clip;                 /* …y sin crear caja de scroll: si no, el `sticky` de «Cómo funciona» no se pega */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Foco: un filo rojo grueso, nunca se quita. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 200;
  transform: translateY(-200%);
  background: var(--ink); color: var(--on-ink);
  padding: .6rem 1rem;
  font-family: var(--mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: .1em;
}
.skip:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Contenedor. `--gut` a los lados; el contenido a sangre se sale de él a
   propósito con `.bleed`. */
.wrap {
  width: 100%;
  padding-inline: var(--gut);
}

/* ============================================================================
   §2 · TIPOGRAFÍA DE SISTEMA
   ========================================================================== */

/* --- Display enorme: la voz de la página ---------------------------------
   Fraunces en CAJA BAJA. Es deliberado: en mayúsculas esta serif se ensancha
   y pierde justo lo que la ata al logotipo —las minúsculas de «Kokïn»—. El
   copy ya viene en caja baja desde el HTML, así que basta con no forzarla.
   El peso alto y el interletrado cerrado son los que dan la presencia que
   antes daba la condensada. */
.d-xl, .d-lg {
  font-family: var(--display);
  font-weight: 700;
  font-optical-sizing: auto;        /* Fraunces es variable: afina a este cuerpo */
  line-height: 1.02;
  letter-spacing: -.021em;
  margin: 0;
  overflow-wrap: anywhere;          /* palabras largas sin desbordar */
}
.d-xl   { font-size: var(--fs-xl); }
.d-lg   { font-size: var(--fs-lg); }

/* Palabras marcadas dentro de un display: van en rojo, nunca en otro tamaño. */
.d-xl em, .d-lg em,
.d-xl .hl, .d-lg .hl { font-style: normal; color: var(--red-ink); }
.on-ink .d-xl em, .on-ink .d-lg em,
.on-ink .hl { color: var(--red-bright); }

/* --- Etiqueta mono ------------------------------------------------------
   Versalitas muy espaciadas, para el dato suelto (pie, notas).             */
.meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.4;
  margin: 0;
}

.meta { color: var(--text-faint); }
.on-ink .meta { color: rgba(247, 242, 234, .6); }

/* Texto corrido. */
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--text-soft); max-width: 46ch; }
.on-ink .lede { color: rgba(247, 242, 234, .74); }

/* Bloques sobre tinta. */
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink a { color: inherit; }

/* ============================================================================
   §3 · PIEZAS SUELTAS
   ========================================================================== */

/* --- Botón ---------------------------------------------------------------
   Rectangular, sin radio, mono en versalitas. El primario es rojo pleno; el
   fantasma es un filo. Al pasar el ratón se rellena de tinta. */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .95em 1.5em;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn .arrow { transition: transform .3s var(--ease); flex: none; }
.btn:hover .arrow { transform: translateX(.28em); }

.btn--primary { background: var(--red); color: var(--on-red); border-color: var(--red); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.on-ink .btn--ghost { border-color: var(--line-deep); color: var(--on-ink); }
.on-ink .btn--ghost:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }

.btn--sm { padding: .75em 1.15em; }

/* --- Marco de imagen -----------------------------------------------------
   La foto siempre llena el marco (object-fit) y crece un poco al pasar el
   ratón; el marco recorta. Sin bordes redondeados en toda la página. */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--kraft);
  aspect-ratio: 4 / 5;
}
.frame > img, .frame > video, .frame > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
a:hover > .frame > img,
a:hover > .frame > picture > img { transform: scale(1.035); }

/* --- Marquesina ----------------------------------------------------------
   Banda de tinta con el texto en marcha. El contenido va DOS veces para que
   el bucle a -50% sea continuo. Decorativa: aria-hidden en el HTML. */
.marquee {
  overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  border-block: 1px solid var(--ink);
  padding-block: .85rem;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center;
  padding-inline: 1.6rem;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
  white-space: nowrap;
}
.marquee__track span::after {
  content: "\2022";                  /* bolita separadora */
  margin-left: 1.6rem;
  opacity: .45;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================================
   §4 · CABECERA
   Fija y transparente sobre el héroe (texto claro), se vuelve papel opaco en
   cuanto se hace scroll. La clase `is-solid` la pone anima.js.
   ========================================================================== */
/* LA CABECERA SOBRESALE UN POCO: cristal blanco translúcido con desenfoque
   de lo que pasa por debajo, un filo finísimo y una sombra muy suave. Así
   se lee como una pieza encima de la página y no pintada en ella. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--hdr);
  display: flex; align-items: center;
  color: var(--text);               /* el héroe ya es papel: arranca en tinta */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(22, 21, 15, .06);
  box-shadow: 0 8px 24px -18px rgba(22, 21, 15, .28);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease),
              transform .45s var(--ease);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* ya dentro de la página: el cristal un punto más opaco y la sombra algo
   más marcada, para que se despegue del contenido que pasa por debajo */
.site-header.is-solid {
  background: rgba(255, 255, 255, .86);
  color: var(--text);
  border-bottom-color: rgba(22, 21, 15, .08);
  box-shadow: 0 10px 30px -18px rgba(22, 21, 15, .35);
}
/* Al bajar se aparta para dejar ver la prenda; al subir vuelve. */
.site-header.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; flex: none; }
.brand svg, .brand img { width: 92px; height: auto; color: currentColor; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }
.nav a, .nav summary {
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  position: relative;
  transition: color .25s var(--ease);
}
/* Subrayado que se traza de izquierda a derecha. */
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.35em;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-links { display: none; gap: clamp(.9rem, 2vw, 2rem); }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* «Entrar», no «Crear mi patrón gratis»: la cabecera es para quien ya tiene
   cuenta; el botón rojo de la primera pantalla es el del héroe. */

/* EL MÓVIL: EL MENÚ, NO EL BOTÓN. En la primera pantalla del móvil sólo
   manda el botón del héroe; el de la cabecera se guarda y en su sitio va la
   hamburguesa, que abre las secciones y «Entrar» para quien ya tiene cuenta.
   En escritorio no cambia nada: los enlaces y el botón, en fila. */
.header-cta { display: inline-flex; white-space: nowrap; }
.menu-boton { display: none; }
.menu-movil { display: none; }
@media (max-width: 899px) {
  .header-cta { display: none; }
  .menu-boton {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    border: 0; background: none; color: inherit; cursor: pointer;
  }
  .menu-boton span {
    display: block; height: 2px; width: 100%;
    background: currentColor; border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s ease;
  }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-boton:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; border-radius: 6px; }

  /* Se despliega de arriba abajo: la cortina (`clip-path`) se abre desde el
     borde de la cabecera mientras la lista baja un poco y aparece. Cerrada
     sigue en su sitio pero invisible y fuera del tabulador (`visibility`),
     que es lo que deja animar la salida igual que la entrada. */
  .menu-movil {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 49;
    padding: .5rem var(--gut) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgba(0, 0, 0, .35);
    clip-path: inset(0 0 100% 0);
    transform: translateY(-.75rem);
    opacity: 0; visibility: hidden;
    transition: clip-path .38s var(--ease), transform .38s var(--ease),
                opacity .25s ease, visibility 0s linear .38s;
  }
  .menu-movil.is-abierto {
    clip-path: inset(0 0 0 0);
    transform: none;
    opacity: 1; visibility: visible;
    transition: clip-path .38s var(--ease), transform .38s var(--ease),
                opacity .25s ease, visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-movil, .menu-movil.is-abierto { transition: none; }
  }
  .menu-movil a {
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display); font-size: 1.25rem; font-weight: 600;
    color: var(--text); text-decoration: none;
  }
  .menu-movil a:last-child { border-bottom: 0; color: var(--red-ink); }
}

/* ============================================================================
   §6 · SECCIONES DE TEXTO
   ========================================================================== */
.section { padding-block: var(--sec); }

/* --- Tarjeta de prenda (KS1) --------------------------------------------- */
.look { width: min(80vw, 31rem); background: var(--paper); }
.on-ink .look { background: var(--ink); }
.look .frame { background: var(--paper-2); }
.look__foot {
  display: grid; gap: .2rem;
  padding: .85rem 1.5rem .85rem 0;
}
.look__name {
  font-family: var(--cond); font-variation-settings: "wdth" 84;
  font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em;
}

/* ============================================================================
   §9 · PLEGABLES
   <details> nativo: funciona sin JS y con teclado. El signo de la derecha gira.
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.on-ink .accordion { border-color: var(--line-deep); }
.accordion details { border-bottom: 1px solid var(--line); }
.on-ink .accordion details { border-color: var(--line-deep); }
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--cond); font-variation-settings: "wdth" 86;
  font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.15; text-transform: uppercase; letter-spacing: -.003em;
  transition: color .25s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--red-ink); }
.on-ink .accordion summary:hover { color: var(--red-bright); }
.accordion summary::after {
  content: "\002B"; flex: none;
  font-family: var(--mono); font-weight: 400; font-size: 1.1rem;
  transition: transform .3s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > *:not(summary) { margin: 0 0 1.25rem; max-width: 62ch; color: var(--text-soft); }

/* --- FAQ en fichas -------------------------------------------------------
   Variante del acordeón: cada pregunta es una ficha sobre papel en vez de una
   fila entre filos, y el `+` va dentro de un botón redondo que al abrirse
   gira hasta quedar en flecha hacia abajo. Todo el gesto —ficha, botón,
   apertura— se anima; la ficha además se hunde un pelín al pulsar, que es lo
   que hace que el clic se sienta. */

.accordion--fichas { border-top: 0; display: grid; gap: clamp(.55rem, 1.2vw, .8rem); }
.accordion--fichas details {
  border-bottom: 0;
  border-radius: calc(var(--radio) * 3);
  background: var(--kraft);
  transition: background .3s var(--ease), box-shadow .3s var(--ease),
              transform .12s var(--ease);
}
.accordion--fichas details[open] { background: var(--paper-2); box-shadow: 0 1px 0 var(--line); }
.accordion--fichas details:active { transform: scale(.995); }
.accordion--fichas summary {
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.6vw, 1.6rem);
  font-family: var(--sans); font-variation-settings: normal;
  font-weight: 600; font-size: clamp(.95rem, 1.5vw, 1.12rem);
  text-transform: none; letter-spacing: -.012em;
}
/* El botón redondo. Es el `::after` de siempre, pero ahora con caja propia:
   un `+` que gira 135° al abrir y queda apuntando hacia abajo. */
.accordion--fichas summary::after {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--paper-2);
  font-size: .95rem; line-height: 1;
  color: var(--text-soft);
  transition: transform .35s var(--ease), background .25s var(--ease),
              color .25s var(--ease);
}
.accordion--fichas summary:hover::after { background: var(--red-soft); color: var(--red-ink); }
.accordion--fichas details[open] summary::after {
  transform: rotate(135deg);        /* el `+` acaba de flecha hacia abajo */
  background: var(--red); color: var(--on-red);
}

/* Animar la APERTURA de un `<details>` tiene trampa: mientras está cerrado el
   navegador no renderiza el contenido, así que el truco clásico de pasar una
   rejilla de `0fr` a `1fr` no llega a ejecutarse —no hay nada que interpolar—.
   Lo que sí funciona es `::details-content` con `allow-discrete`, que anima
   justo esa caja. Donde no haya soporte, el panel abre de golpe y el resto de
   la animación (el botón que gira, la ficha que se hunde) sigue igual. */
.accordion--fichas details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
}
.accordion--fichas details[open]::details-content { block-size: auto; }
.accordion--fichas .accordion__cuerpo { display: block; }
.accordion--fichas .accordion__cuerpo > * {
  overflow: hidden;
  margin: 0; max-width: 62ch; color: var(--text-soft);
  padding: 0 clamp(1rem, 2.6vw, 1.6rem);
}
.accordion--fichas details[open] .accordion__cuerpo > * {
  padding-bottom: clamp(1rem, 2.4vw, 1.4rem);
}
@media (prefers-reduced-motion: reduce) {
  .accordion--fichas details::details-content { transition: none; }
}
/* Con JS (pasos.js, «PREGUNTAS») la apertura y el cierre los anima el script
   en todos los navegadores —suave al abrir, algo más rápido al cerrar—, así
   que la transición de `::details-content` se apaga para no pisarse. */
.accordion--fichas.js-acordeon details::details-content { block-size: auto; transition: none; }
.accordion--fichas.js-acordeon .accordion__cuerpo { overflow: hidden; }

.on-ink .accordion details > *:not(summary) { color: rgba(247, 242, 234, .74); }

/* ============================================================================
   §11 · CIERRE Y PIE
   ========================================================================== */
/* --- La malla de la tela ------------------------------------------------
   El cuadriculado del patron ondeando como una bandera, pintado en <canvas>
   por malla.js. Estuvo en el heroe y alli la foto acabo tapandola; vive en
   el cierre, la seccion sin nada detras, que es donde se la ve. El hilo lo
   lee el JS de `--hilo` (RGB suelto): sobre tinta va en PAPEL, no en tinta,
   o seria invisible. Decorativa y por debajo del texto. */
.section--malla { position: relative; isolation: isolate; overflow: hidden; }
.section--malla > .wrap { position: relative; z-index: 1; }
.malla {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  --hilo: 247, 242, 234;
  opacity: .42;
  pointer-events: none;
  /* se desvanece por abajo: su último hilo dibujaba una línea justo antes
     del pie */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}

.closing { text-align: left; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); justify-items: start; }
.closing .d-xl { max-width: 16ch; }
/* la frase de debajo, en una sola línea en cuanto cabe */
.closing .lede { max-width: none; }
@media (min-width: 48rem) { .closing .lede { white-space: nowrap; } }

.site-footer {
  background: var(--ink); color: var(--on-ink);
  padding-block: clamp(3rem, 7vw, 5.5rem) 1.5rem;
}
/* El wordmark gigante que cierra la página: a sangre y recortado abajo, como
   una firma estampada. */
.footer-mark {
  padding-top: clamp(2rem, 6vw, 5rem);
  color: rgba(247, 242, 234, .14);
  overflow: hidden;
}
.footer-mark svg { width: 100%; height: auto; margin-bottom: -14%; }

.footer-cols { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; } }
.footer-cols h2 {
  margin: 0 0 .9rem;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(247, 242, 234, .5);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-cols a { transition: color .25s var(--ease); }
.footer-cols a:hover { color: var(--red-bright); }
.footer-cols .tagline { color: rgba(247, 242, 234, .6); max-width: 34ch; margin-top: .9rem; }
.footer-cols .brand svg { width: 110px; }

.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-deep);
  font-family: var(--mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(247, 242, 234, .5);
}

/* ============================================================================
   §12 · MOVIMIENTO Y ACCESIBILIDAD
   Nada se esconde salvo que haya JS (`html.js`) Y no se pida calma. Sin JS o
   con `prefers-reduced-motion`, todo está visible desde el primer pintado.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Los displays entran por líneas, desde abajo, con la máscara del propio
     contenedor. Lo prepara anima.js envolviendo cada línea en un .line. */
  /* GRID, no block: entre dos hermanos en flujo normal los márgenes contiguos
     se COLAPSAN, y aquí los dos son negativos, así que en vez de sumarse
     (-.28 y -.24) salía sólo el mayor, -.28 — y el interlineado del titular
     crecía .24em por línea sin que se viera de dónde. En un contenedor grid
     los márgenes no colapsan y la compensación vuelve a ser exacta. */
  .js [data-lines] { display: grid; }
  .js [data-lines] .line {
    display: block; overflow: hidden;
    padding-top: .28em; margin-top: -.28em;
    /* Abajo también hace falta sitio: al pasar los titulares a caja baja
       aparecieron descendentes (p, g, j, y) que la máscara recortaba. */
    padding-bottom: .24em; margin-bottom: -.24em;
  }
  .js [data-lines] .line > span {
    display: block;
    transform: translateY(105%);
    transition: transform .9s var(--ease);
  }
  .js [data-lines].is-in .line > span { transform: none; }
  .js [data-lines].is-in .line:nth-child(2) > span { transition-delay: .09s; }
  .js [data-lines].is-in .line:nth-child(3) > span { transition-delay: .18s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee__track { animation: none; }
}

/* Impresión: sin foto de fondo, sin malla ni bandas oscuras. El titular se
   imprime en negro sobre blanco, sin el halo de papel que sólo tiene sentido
   cuando hay una foto debajo. */
@media print {
  .site-header, .marquee, .malla { display: none; }
  .on-ink, .site-footer { background: #fff; color: #000; }
}

/* ============================================================================
   §13 · UTILIDADES DE REJILLA
   Dos piezas que se repiten en casi todas las secciones y que no merecen una
   clase propia por sección.
   ========================================================================== */

/* El cierre respira más entre sus piezas que una sección normal. */
.closing .meta { max-width: none; }

/* ============================================================================
   §14 · FICHAS (lo que venía de la v3 «clara»)
   Todo en fichas redondeadas sobre papel, mucho aire y el cuerpo de letra
   subido: se lee de una pasada en un móvil. Las piezas de los extremos
   (cabecera, héroe, cierre, pie) son las de la v2; las de en medio, éstas.
   ========================================================================== */
/* ============================================================================
   §15 · TOKENS DE LAS FICHAS
   Dos cambios respecto a la v2, y sólo dos:
     — el radio pasa de 4 px a un radio de verdad (todo son fichas);
     — el texto corrido sube de cuerpo. La v2 era una revista y podía tener
       letra de revista; ésta se lee de una pasada en un móvil.
   ========================================================================== */
body {
  --radio:      18px;               /* fichas, marcos, campos                */
  --radio-lg:   28px;               /* los bloques grandes (héroe, tarifa)   */
  --fs-body:    clamp(1.02rem, 1.25vw, 1.15rem);
  --fs-meta:    clamp(.66rem, .8vw, .76rem);
  --sec:        clamp(3.25rem, 7vw, 7rem);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Los botones dejan de ser rectángulos: cápsula. Es la señal más barata de
   «esto se toca» y la que más se agradece en móvil. */
body .btn { border-radius: 999px; padding: 1.05em 1.7em; }
body .btn--sm { padding: .8em 1.25em; }

/* El titular de la v3 respira más que el de la v2: aquí no compite con una
   foto a sangre, así que puede permitirse interlineado. Las tildes del
   español necesitan ese aire (á, í, ó llegan a tocar la línea de arriba). */
body .d-xl, body .d-lg { line-height: 1.06; letter-spacing: -.024em; }

/* ============================================================================
   §16 · PIEZAS COMPARTIDAS
   ========================================================================== */

/* El ancho de lectura. La v2 va a sangre; aquí hay un tope: más de ~1240 px
   de línea y la mirada se pierde entre la ficha de la izquierda y la de la
   derecha. `--gut` sigue siendo el margen lateral en móvil. */
.k-wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.k-sec { padding-block: var(--sec); }

/* Cabecera de sección: el número en rojo y el título grande debajo. Sin filo
   superior (la v2 sí lo lleva): aquí lo que separa las secciones es el aire,
   no una línea. */
.k-head { max-width: 42rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.k-head--centro { margin-inline: auto; text-align: center; }
.k-head h2 { margin: 0; text-wrap: balance; }
.k-head p.lede { margin: 1.1rem 0 0; }
.k-head--centro p.lede { margin-inline: auto; }

/* La ficha: la unidad de toda la página. Papel un punto más claro que el
   fondo, filo finísimo y esquinas redondas. Nada de sombras pesadas — la
   sombra sólo aparece al pasar el ratón por las que son clicables. */
.k-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radio-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}

/* Pastilla de texto sobre papel o sobre foto: el dato suelto (medida, dato,
   «gratis»). Mono, versalitas y cápsula. */
.k-pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em .95em;
  border-radius: 999px;
  background: var(--kraft);
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-soft);
}

/* ============================================================================
   §19 · CÓMO FUNCIONA
   Sus piezas están en §23 («un paso por fila, como Insyder»).
   ========================================================================== */

/* ============================================================================
   §20 · PATRONES (LA SECCIÓN DEL HOME DE LA APP)
   LA MISMA SECCIÓN QUE LA HOME DE LA APP (src/ui/Home.tsx + app.css, «LA
   HOME»): los tres pasos y una tarjeta por prenda cuyo flat pasa solo de
   blusa a vestido mini y midi. Las medidas de la caja del dibujo son las de
   la app (230 px de alto): el encuadre viene calculado en px desde allí.
   Aquí sólo se traducen los tokens de la app a los de la landing.
   ========================================================================== */
/* los colores del flat, los mismos que en la app (tema.css): los usan las
   tarjetas de «Patrones» y las fichas del héroe */
.inicio, .k-hero {
  --ficha-tela:   #ffffff;
  --ficha-tinta:  #6b6252;
  --ficha-rotulo: #a49b8a;
}
.inicio {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  max-width: 1040px;
  margin-inline: auto;
}

/* los tres pasos: el primero encendido, que es lo que se hace justo debajo */

.prendas {
  list-style: none; margin: 0; padding: 0;
  width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.prendas > li { display: flex; }
.prenda {
  flex: 1;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px;
  padding: 14px 14px 18px;
  border: 1px solid rgba(22, 21, 15, .07);
  border-radius: 20px;
  background: #ffffff;   /* blanca sobre el fondo claro con puntos de la sección */
  box-shadow: 0 14px 34px -26px rgba(22, 21, 15, .35);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}
.prenda:hover {
  transform: translateY(-4px);
  border-color: rgba(194, 64, 45, .35);
  box-shadow: 0 26px 50px -28px rgba(157, 49, 33, .55);
}
/* EL RECUADRO DEL DIBUJO: el plano, grande, sobre el mismo halo de estudio
   que las fichas del héroe; y, como una versión más del fundido, la prenda
   puesta llenándolo entero. */
.prenda-dibujo {
  position: relative;
  height: clamp(260px, 30vw, 310px);
  /* a sangre: sin el relleno de la tarjeta arriba ni a los lados (el texto
     de debajo sí lo conserva); el radio es el de la tarjeta menos su filo */
  margin: -14px -14px 0;
  overflow: hidden;
  border-radius: 19px 19px 0 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #f1f0ee 0%, rgba(241, 240, 238, 0) 70%),
    #ffffff;
}
/* el lienzo del home (260 × 230 px, con el encuadre en px), escalado */
.prenda-lienzo {
  position: absolute; left: 50%; top: 50%;
  width: 260px; height: 230px;
  transform: translate(-50%, -50%) scale(var(--s, 1.2));
}
@media (max-width: 860px) { .prenda-lienzo { --s: 1.12; } }
/* la prenda puesta, como una versión más: llena el recuadro, con el foco
   en el vestido (se acerca sobre la altura a la que cae la prenda) */
/* entra y sale despacio; llena el recuadro hasta el borde de la tarjeta */
.prenda-variante--foto {
  overflow: hidden;
  transition: opacity 1.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .prenda-variante--foto { transition: none; } }
.prenda-variante--foto picture, .prenda-variante--foto img { display: block; width: 100%; height: 100%; }
.prenda-variante--foto img {
  object-fit: cover; object-position: 50% 48%;
  transform: scale(1.3); transform-origin: 50% 48%;
}
/* las versiones van apiladas y sólo la encendida se ve: el cambio es un fundido */
.prenda-variante { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.prenda-variante.on { opacity: 1; }
.prenda-marco { position: absolute; overflow: hidden; }
.prenda-lamina svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .prenda-variante { transition: none; } }

.prenda-version {
  margin: -4px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-faint);
  min-height: 1.4em;
}

/* «Blusa | Vestido»: dos mitades de una misma pastilla. La puesta, en rojo. */
.prenda-modo {
  padding: 3px 12px;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--text-soft);
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.prenda-modo:hover { color: var(--red-ink); }
.prenda-modo.on { background: var(--red); color: var(--on-red); }
.prenda-modo:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }

.prenda-texto { display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* Lo que se personaliza, en pastillas centradas bajo la referencia. */
.prenda-chips {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.prenda-chips li {
  padding: .3em .75em;
  border-radius: 999px;
  border: 1px solid rgba(22, 21, 15, .1);
  font-family: var(--mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft);
}

/* LA REFERENCIA, bajo el nombre del dibujo y centrada, con una rayita roja
   centrada debajo (un sexto del ancho de la tarjeta) que se desvanece por
   los dos lados */
.prenda-ref {
  margin: -2px 0 0;
  text-align: center;
  font-family: var(--display); font-size: 22px; font-weight: 600;
}
.prenda-ref::after {
  content: ""; display: block;
  width: 16.5%; height: 2px;
  margin: .45rem auto .1rem;
  background: linear-gradient(90deg, rgba(194, 64, 45, 0), var(--red) 30%, var(--red) 70%, rgba(194, 64, 45, 0));
  border-radius: 2px;
}
.prenda-desc { font-size: 14.5px; line-height: 1.4; color: var(--text-soft); }

.prenda-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--red);
  color: var(--red-ink);
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.prenda:hover .prenda-cta,
.prenda-cta:focus-visible { background: var(--red); color: var(--on-red); }
.prenda-cta:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

@media (max-width: 860px) {
  .prendas { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* ============================================================================
   §21 · PRECIOS
   Tres fichas. La del medio es la recomendada y va en tinta: no crece de
   tamaño (eso descuadra la fila en las pantallas intermedias), cambia de
   color, que se ve igual de bien y no mueve nada.
   ========================================================================== */
.k-tarifas { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); align-items: stretch; }
@media (min-width: 56rem) { .k-tarifas { grid-template-columns: repeat(3, 1fr); } }

/* Columna flexible, no rejilla: las tres fichas se estiran a la altura de la
   mas alta (`align-items: stretch` del contenedor) y el boton se empuja al
   fondo con `margin-top:auto`, asi que los tres CTA quedan a la misma altura
   aunque las listas midan distinto. */
.k-plan { display: flex; flex-direction: column; position: relative; }
.k-plan h3 {
  margin: 0;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-faint);
}
.k-plan__precio {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: clamp(1rem, 2vw, 1.3rem) 0 clamp(1.1rem, 2.2vw, 1.5rem);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em;
}
/* «para siempre», «al mes»: pequeño y en la letra de los botones */
.k-plan__precio small {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
/* bajo el nombre del plan, antes del precio, y 2 px más pequeña */
.k-plan__para { margin: .45rem 0 0; font-size: calc(var(--fs-body) - 2px); line-height: 1.45; color: var(--text-soft); }

.k-plan__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.k-plan__lista li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: calc(var(--fs-body) - 2px); }
.k-plan__lista svg { margin-top: .32em; color: var(--red-ink); flex: none; }
.k-plan__cta { margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2rem); }
.k-plan__cta .btn { width: 100%; justify-content: center; }

/* La recomendada, en tinta. Los tokens de texto se redefinen dentro para que
   todo lo que hereda color (listas, precios, letra pequeña) cambie de golpe
   en vez de ir pieza por pieza. */
.k-plan--destacado {
  background: var(--ink);
  border-color: var(--ink);
  --text: var(--on-ink);
  --text-soft: rgba(247, 242, 234, .72);
  --text-faint: rgba(247, 242, 234, .55);
  --line: var(--line-deep);
  color: var(--on-ink);
}
.k-plan--destacado .k-plan__lista svg { color: var(--red-bright); }
.k-plan--destacado .k-pill { background: var(--red); color: var(--on-red); }

/* La chapa «recomendado», centrada sobre el filo superior de la ficha. */
.k-plan__chapa {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
}

/* Letra pequeña bajo las tres fichas: lo que vale para todos los planes. */
.k-tarifas__nota {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  max-width: 54ch; text-align: center;
  color: var(--text-faint);
  font-size: calc(var(--fs-body) * .92);
}

/* ============================================================================
   §22 · PREGUNTAS FRECUENTES
   El acordeón es el de kokin.css (`.accordion--fichas`) sin tocar: ya era de
   fichas redondeadas, que es justo lo que pide esta portada. Aquí sólo se
   ensancha la caja y se sube el cuerpo de la pregunta.
   ========================================================================== */
.k-faq .accordion--fichas { max-width: 52rem; margin-inline: auto; }
.k-faq .accordion--fichas summary { font-size: clamp(1rem, 1.6vw, 1.18rem); }
.k-faq .accordion--fichas details { border-radius: var(--radio-lg); }

/* ============================================================================
   §23 · LO NUEVO DE LA PÁGINA ÚNICA
   ========================================================================== */

/* --- Héroe: las tres dudas resueltas bajo el botón --------------------- */
.hero__notas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem clamp(.8rem, 2vw, 1.3rem);
  margin: clamp(1rem, 2vw, 1.4rem) 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text);
  text-shadow: 0 0 .4em rgba(255, 255, 255, .95), 0 0 1em rgba(255, 255, 255, .85);
}
.hero__notas li { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.3rem); }
.hero__notas li:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
}

/* El botón que remata una cabecera de sección: centrado y con aire encima. */
.k-cta { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --- Cómo funciona: un paso por fila, como Insyder -----------------------
   Texto a la izquierda y, a la derecha, un panel gris con un ordenador
   entero —pantalla, cuello y peana— centrado dentro. Dentro de la pantalla,
   las capturas y los vídeos se relevan (pasos.js). En el móvil, el texto
   arriba y el panel debajo. */
.k-steps {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(2.5rem, 7vw, 5.5rem);
}
.k-step { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }

/* LA BARRA DE PROGRESO 1-2-3-4 (la pone pasos.js dentro de cada pantalla, y
   sólo se ve en escritorio): cuatro tramos, lleno hasta el paso que toca. */
.k-progreso { display: none; }

/* EN ESCRITORIO, LA PANTALLA SE QUEDA FIJA. Cada paso deja de ser una fila:
   `display: contents` suelta su texto y su pantalla en la rejilla de la
   lista. Los textos van a la izquierda, uno por fila y altos (se recorren con
   el scroll); las CUATRO pantallas ocupan la misma celda de la derecha, que
   abarca las cuatro filas, y se pegan (`sticky`) a media altura de la
   ventana. Encima se ve sólo la del paso activo; las demás, fundidas.
   Sin JS se ve el primer paso encendido y su pantalla: nada queda a oscuras. */
@media (min-width: 56rem) {
  .k-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0;
  }
  .k-step { display: contents; }
  .k-step__texto {
    grid-column: 1;
    min-height: 68vh;
    display: flex; flex-direction: column; justify-content: center;
    transition: opacity .4s ease;
  }
  .k-step:nth-child(1) .k-step__texto { grid-row: 1; }
  .k-step:nth-child(2) .k-step__texto { grid-row: 2; }
  .k-step:nth-child(3) .k-step__texto { grid-row: 3; }
  .k-step:nth-child(4) .k-step__texto { grid-row: 4; }
  /* `.k-steps` delante a propósito: la regla base del panel (más abajo en
     esta hoja) le pone `position: relative`, y a igual especificidad ganaba
     ella y el panel dejaba de quedarse fijo */
  .k-steps .k-step__panel {
    grid-column: 2; grid-row: 1 / span 4;
    align-self: start;
    position: sticky; top: max(5.5rem, calc(50vh - 16rem));
    opacity: 0; visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
  }
  .k-step:first-child .k-step__panel { opacity: 1; visibility: visible; }
  /* con JS, manda el paso activo */
  .k-steps.is-vivo .k-step__texto { opacity: .3; }
  .k-steps.is-vivo .k-step__texto.is-activo { opacity: 1; }
  .k-steps.is-vivo .k-step__panel { opacity: 0; visibility: hidden; }
  .k-steps.is-vivo .k-step__panel.is-activo {
    opacity: 1; visibility: visible;
    transition: opacity .5s ease, visibility 0s;
  }

  .k-progreso {
    display: flex; gap: .4rem;
    position: absolute; left: 1.1rem; right: 1.1rem; top: 1rem; z-index: 2;
  }
  .k-progreso span {
    flex: 1; height: 4px; border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    position: relative;
    transition: background .3s ease;
  }
  .k-progreso span.lleno { background: var(--red); }
  /* el número de cada tramo, debajo: 1 2 3 4, el actual en tinta */
  .k-progreso span::after {
    content: attr(data-n);
    position: absolute; left: 0; top: .55rem;
    font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
    color: var(--text-faint);
  }
  .k-progreso span.actual::after { color: var(--red-ink); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .k-step__texto, .k-step__panel { transition: none !important; }
}
.k-step__n {
  margin: 0 0 .6rem;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--red-ink);
}
.k-step__titulo {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.08;
  letter-spacing: -.024em; text-wrap: balance;
}
.k-step__desc { margin: .9rem 0 0; max-width: 40ch; color: var(--text-soft); }

.k-step__panel {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / .92;
  border-radius: var(--radio-lg);
  background: #efefef;
}
@media (max-width: 56rem) { .k-step__panel { aspect-ratio: 4 / 3.6; } }

/* La pantalla: marco negro con la captura dentro, y el pie debajo. */
/* LA PANTALLA ENTERA (26 sep 2026): centrada y completa dentro del panel.
   Antes arrancaba a un 12 % del borde y medía un 108 %: el borde derecho se
   salía del panel, como en Insyder. */
.k-pantalla { position: absolute; left: 7%; top: 17%; width: 86%; }
.k-pantalla__marco {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 1508 / 1022);
  border: clamp(6px, .9vw, 11px) solid #111;
  border-radius: clamp(8px, 1.1vw, 14px);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}
.k-pantalla__marco img, .k-pantalla__marco video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  opacity: 0; transition: opacity .8s ease;
}
.k-pantalla__marco .on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .k-pantalla__marco img, .k-pantalla__marco video { transition: none; } }
/* El cuello del monitor: centrado bajo la parte VISIBLE de la pantalla. */
.k-pantalla__pie {
  position: relative;
  width: 14%; height: clamp(1.9rem, 5vw, 3.6rem);
  margin-left: 43%;      /* centrado bajo la pantalla: (100 − 14) / 2 */
  background: linear-gradient(90deg, #b9b9b9, #d9d9d9 45%, #a9a9a9);
}
/* La peana: ovalada y más ancha que el cuello, con el mismo metal y una
   sombra suave debajo para que se apoye en algo. */
.k-pantalla__pie::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  width: 280%; height: clamp(.5rem, 1.1vw, .8rem);
  transform: translateX(-50%);
  border-radius: 50% / 100% 100% 45% 45%;
  background: linear-gradient(90deg, #a9a9a9, #dcdcdc 45%, #b4b4b4);
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .35);
}

/* Los puntos del carrusel: abajo a la izquierda del panel. Los pone el JS
   sólo cuando hay más de una captura. */
.k-puntos {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2;
  display: flex; gap: 0;
}
.k-puntos button {
  /* 24 px de zona táctil; el punto se dibuja dentro con ::before */
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%;
  background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.k-puntos button::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%;
  background: rgba(0, 0, 0, .22);
  transition: background .2s ease, transform .2s ease;
}
.k-puntos button[aria-current="true"]::before { background: var(--red); transform: scale(1.2); }
.k-puntos button:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }

/* --- Así quedan: desfile infinito -------------------------------------
   Tarjetas un 25 % más pequeñas que las del raíl de antes (16,5 rem en vez
   de 22) y con aire entre ellas. La pista mide DOS tiras iguales (la segunda
   la pone el JS) y se desplaza media pista: al acabar, la segunda está justo
   donde empezó la primera y el salto no se ve. Los bordes se funden con el
   fondo para que las tarjetas entren y salgan, no aparezcan cortadas. */
.k-infinito {
  overflow: hidden;
  padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.k-infinito__pista {
  display: flex; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  width: max-content;
  padding-inline: clamp(1.5rem, 3.5vw, 2.75rem);
}
.k-infinito__pista:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 4px; }
.k-infinito.is-vivo .k-infinito__pista {
  padding-inline: 0;
  animation: desfile var(--dur, 60s) linear infinite;
}
.k-infinito.is-vivo:hover .k-infinito__pista,
.k-infinito.is-vivo:focus-within .k-infinito__pista { animation-play-state: paused; }
/* media pista + medio hueco: así la copia cae exactamente en su sitio */
@keyframes desfile { to { transform: translateX(calc(-50% - var(--hueco, 0px) / 2)); } }
/* sin animación (sin JS o con «reducir movimiento»): tira que se desliza */
.k-infinito:not(.is-vivo) { overflow-x: auto; scrollbar-width: none; }
.k-infinito:not(.is-vivo)::-webkit-scrollbar { display: none; }

/* fondo claro de lado a lado, con una trama de puntitos blancos (como el
   punteado del papel de patronaje): la sección de las prendas se despega del
   blanco de las demás (antes lo llevaba «Así quedan») */
#patrones {
  background-color: #f7f5f1;   /* más claro que --kraft: apenas un tono sobre el blanco */
  /* separados (36 px) para que la trama no pese junto al desfile de fotos */
  background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 1.6px, transparent 2px);
  background-size: 36px 36px;
  background-position: center;
}
#asi-quedan .look { width: min(52vw, 16.5rem); flex: none; background: none; }
#asi-quedan .frame { aspect-ratio: 9 / 16; border-radius: var(--radio-lg); overflow: hidden; }
#asi-quedan .frame img, #asi-quedan .frame video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
#asi-quedan .look__foot { padding-inline: .25rem; }

/* --- La diferencia: dos columnas para leer de un vistazo -----------------
   Nada de tinta: lo estándar va apagado (gris, con aspa) y lo de Kokïn en
   una columna blanca con filo rojo, marca y texto en negrita, que es lo que
   la visitante viene a leer. Una idea por celda. En el móvil cada fila se
   apila: el tema arriba, lo estándar y lo de Kokïn debajo. */
.k-compara { max-width: 60rem; margin-inline: auto; }
.k-compara table { width: 100%; border-collapse: separate; border-spacing: 0; }
.k-compara th, .k-compara td {
  padding: clamp(.85rem, 1.8vw, 1.15rem) clamp(.9rem, 2vw, 1.4rem);
  text-align: left; vertical-align: middle;
  border-bottom: 1px solid rgba(22, 21, 15, .07);
}
.k-compara thead th {
  border-bottom: 0;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
}
.k-compara thead .k-compara__no, .k-compara thead .k-compara__si { padding-left: calc(clamp(.9rem, 2vw, 1.4rem) + 1.4rem); }
.k-compara thead .k-compara__no { color: var(--text-faint); }
.k-compara thead .k-compara__si { color: var(--red-ink); font-weight: 700; }
.k-compara tbody th {
  width: 22%;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.12rem); letter-spacing: -.01em;
  color: var(--text);
}
.k-compara td { width: 39%; }
/* el icono al lado del texto (la regla general pone los svg en bloque) */
.k-compara td > span { display: block; }
.k-compara td { position: relative; padding-left: calc(clamp(.9rem, 2vw, 1.4rem) + 1.4rem); }
.k-compara .k-compara__i { position: absolute; left: clamp(.9rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.k-compara tbody .k-compara__no { color: var(--text-faint); }
.k-compara tbody .k-compara__no .k-compara__i { color: rgba(22, 21, 15, .3); }
.k-compara tbody .k-compara__si { color: var(--text); font-weight: 600; }
.k-compara tbody .k-compara__si .k-compara__i { color: var(--red); }
/* la columna de Kokïn, como una tarjeta blanca con filo rojo que la recorre */
.k-compara .k-compara__si { background: #ffffff; border-left: 1px solid rgba(194, 64, 45, .25); border-right: 1px solid rgba(194, 64, 45, .25); }
.k-compara thead .k-compara__si { border-top: 1px solid rgba(194, 64, 45, .25); border-radius: 16px 16px 0 0; background: #fff8f6; }
.k-compara tbody tr:last-child .k-compara__si { border-bottom: 1px solid rgba(194, 64, 45, .25); border-radius: 0 0 16px 16px; }
.k-compara tbody tr:last-child th, .k-compara tbody tr:last-child .k-compara__no { border-bottom: 0; }
.k-compara { filter: drop-shadow(0 18px 30px rgba(22, 21, 15, .05)); }
@media (max-width: 44rem) {
  .k-compara thead { display: none; }
  .k-compara tr { display: grid; gap: .35rem; padding: 1rem 0; border-bottom: 1px solid rgba(22, 21, 15, .08); }
  .k-compara th, .k-compara td { width: auto; padding: 0; border: 0 !important; background: none !important; border-radius: 0 !important; }
  .k-compara td { padding-left: 1.5rem; }
  .k-compara .k-compara__i { left: 0; }
  .k-compara tbody th { margin-bottom: .15rem; }
}

/* ============================================================================
   §24 · PÁGINAS LEGALES (aviso legal, privacidad, términos)
   Texto corrido a una columna de lectura, sin fichas ni animaciones de
   entrada: se viene a leer y a buscar un dato concreto.
   ========================================================================== */
.legal { padding: calc(var(--hdr) + clamp(2.5rem, 6vw, 4.5rem)) 0 var(--sec); }
.legal__texto { max-width: 46rem; }
.legal__texto h1 { margin: 0; text-wrap: balance; }
.legal__fecha {
  margin: 1.2rem 0 0;
  font-family: var(--mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-faint);
}
.legal__texto .lede { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
.legal__texto h2 {
  margin: clamp(2rem, 4vw, 2.75rem) 0 .7rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2;
  letter-spacing: -.015em;
}
.legal__texto p, .legal__texto li { color: var(--text-soft); }
.legal__texto p { margin: 0 0 .9rem; }
.legal__texto ul { margin: 0 0 .9rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.legal__texto strong { color: var(--text); font-weight: 600; }
.legal__texto a { color: var(--red-ink); text-decoration: underline; text-underline-offset: .15em; }
.legal__texto code { font-family: var(--mono); font-size: .9em; }
/* Los datos que sólo tiene el titular. Se ven a propósito: una página legal
   no puede publicarse con uno de estos sin rellenar. */
mark.pendiente {
  background: #ffe36e; color: var(--ink);
  padding: .05em .3em; border-radius: 4px;
  font-weight: 600;
}

/* ============================================================================
   §25 · HÉROE A (nuevo, a prueba contra el de la foto)
   Lo que hay hoy, dicho y enseñado. A la izquierda el titular, la frase, el
   botón y las tres dudas; a la derecha las prendas en DOS COLUMNAS QUE NO
   PARAN: una sube y la otra baja, con las filas desfasadas (la de la derecha
   empieza media ficha más arriba). Cada ficha es un flat de la app —blusa,
   vestido mini o midi— y lleva a esa prenda. En el móvil, el texto arriba y
   las dos columnas debajo, más bajas.
   ========================================================================== */
.k-hero {
  padding: calc(var(--hdr) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
  background: var(--paper);
}
/* el héroe: 1076 px de contenido (un 15 % más que los 936 que tenía) más
   los márgenes laterales */
.k-hero .k-wrap { max-width: calc(67.25rem + 2 * var(--gut)); }
.k-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.k-hero__texto { text-align: center; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 56rem) {
  .k-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .k-hero__texto { text-align: left; align-items: flex-start; }
  .k-hero .hero__notas { justify-content: flex-start; }
}
.k-hero__titulo {
  margin: 0;
  max-width: 14ch;
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height: 1.05; letter-spacing: -.028em;
  text-wrap: balance;
}
.k-hero__titulo .hl { color: var(--red-ink); }
.k-hero__sub {
  margin: clamp(.9rem, 2vw, 1.3rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem); line-height: 1.5;
  color: var(--text-soft);
  text-wrap: balance;
}
.k-hero__cta { margin-top: clamp(1.3rem, 2.5vw, 1.8rem); }
.k-hero .hero__notas { text-shadow: none; color: var(--text-soft); margin-top: clamp(1rem, 2vw, 1.4rem); }

/* --- Las dos columnas ---------------------------------------------------- */
.kh-muestra {
  --hueco: clamp(.7rem, 1.4vw, 1rem);
  /* `minmax(0, 1fr)`: a partes iguales siempre, aunque un nombre largo pida más */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco);
  height: min(82svh, 46rem);
  overflow: hidden;
  /* las fichas entran y salen fundiéndose, no cortadas por el borde */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
@media (max-width: 56rem) { .kh-muestra { height: 28rem; max-width: 34rem; width: 100%; margin-inline: auto; } }
/* el desfase: la columna que baja arranca media ficha más arriba */
.kh-col--baja { margin-top: -8rem; }
/* La pista lleva la columna DOS veces; cada ficha deja su hueco debajo (y no
   `gap`), así media pista es exactamente una vuelta y el bucle no salta. */
.kh-pista { display: flex; flex-direction: column; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .kh-col--sube .kh-pista.is-doble { animation: kh-sube 46s linear infinite; }
  .kh-col--baja .kh-pista.is-doble { animation: kh-baja 40s linear infinite; }
  .kh-muestra:hover .kh-pista, .kh-muestra:focus-within .kh-pista { animation-play-state: paused; }
}
@keyframes kh-sube { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes kh-baja { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* --- Cada ficha: su flat y su nombre ------------------------------------ */
.kh-ficha {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  margin-bottom: var(--hueco);
  padding: clamp(.7rem, 1.4vw, 1rem) .6rem clamp(.7rem, 1.2vw, .9rem);
  border: 1px solid rgba(22, 21, 15, .07);
  border-radius: 18px;
  /* blanca, con un halo de luz gris muy suave detrás del dibujo, como el
     fondo de estudio de una foto de producto (el degradado beige de lado a
     lado ensuciaba la ficha) */
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #f1f0ee 0%, rgba(241, 240, 238, 0) 70%),
    #ffffff;
  box-shadow: 0 10px 24px -18px rgba(22, 21, 15, .35);
  color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kh-ficha:hover { border-color: var(--red); box-shadow: 0 16px 36px -24px rgba(157, 49, 33, .6); }
.kh-ficha:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
/* La caja del dibujo es la de la app (260 × 230 px, con el encuadre en px):
   se ESCALA entera con `--s` y la de fuera mide lo escalado. */
.kh-dibujo { --s: .95; position: relative; display: block; width: calc(260px * var(--s)); height: calc(230px * var(--s)); }
.kh-caja {
  position: absolute; left: 0; top: 0; display: block;
  width: 260px; height: 230px;
  transform: scale(var(--s)); transform-origin: 0 0;
}
@media (max-width: 72rem) { .kh-dibujo { --s: .76; } }
@media (max-width: 56rem) { .kh-dibujo { --s: .62; } }
.kh-forma {
  font-family: var(--mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); text-align: center;
  text-wrap: balance;
}
.kh-ficha:hover .kh-forma { color: var(--red-ink); }

/* ============================================================================
   §26 · BADGES DE SECCIÓN
   Cada sección empieza con una pastilla con su nombre, no con un número:
   las secciones no son una secuencia (los pasos de «Cómo funciona» sí lo
   son, y ésos conservan su «Paso 1–4»). Rojo suave sobre claro; sobre
   tinta, el mismo rojo encendido con un fondo apenas marcado.
   ========================================================================== */
.k-badge {
  display: inline-flex; align-items: center;
  margin: 0 0 .9rem;
  padding: .45em 1em;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red-ink);
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
}
.on-ink .k-badge { background: rgba(255, 255, 255, .08); color: var(--red-bright); }

/* ============================================================================
   §27 · PRECIOS SOBRE TINTA, con el selector mensual / anual
   La sección va en negro; las fichas, en un gris apenas más claro y con su
   filo, y la recomendada en BLANCO: sobre tinta es la que salta a la vista.
   Los tokens de texto se redefinen dentro para que todo lo que los hereda
   cambie de golpe.
   ========================================================================== */
.k-precios {
  --text: var(--on-ink);
  --text-soft: rgba(247, 242, 234, .74);
  --text-faint: rgba(247, 242, 234, .55);
  --line: var(--line-deep);
}
/* las tres fichas, en blanco sobre la tinta; la recomendada, con filo rojo */
.k-precios .k-plan {
  background: #ffffff; border-color: #ffffff;
  --text: #16150f; --text-soft: #46423a; --text-faint: #6d675c; --line: #e0d6c6;
  color: var(--text);
}
.k-precios .k-plan__lista svg { color: var(--red-ink); }
.k-precios .k-plan--destacado { border: 2px solid var(--red); }
.k-precios .k-plan .btn--ghost { border-color: var(--line-strong); color: #16150f; }
.k-precios .k-plan .btn--ghost:hover { background: #16150f; border-color: #16150f; color: #ffffff; }
.k-precios .k-plan--destacado .k-pill { background: var(--red); color: var(--on-red); }
.k-plan__equiv { margin: calc(-1 * clamp(.7rem, 1.6vw, 1rem)) 0 1.1rem; font-size: .9rem; color: var(--text-faint); }
/* más ancho que el resto de secciones (≈1300 px de contenido): las tres
   fichas respiran y las listas no se parten en tantas líneas */
.k-precios .k-wrap { max-width: calc(81.25rem + 2 * var(--gut)); }
.k-precios .k-tarifas { gap: clamp(1rem, 2.4vw, 2rem); }
/* sobre tinta los enlaces heredan el color: el botón rojo, siempre en claro */
.k-precios .btn--primary { color: var(--on-red); }

.k-periodo {
  display: inline-flex; gap: 4px;
  margin-top: clamp(1.2rem, 2.5vw, 1.6rem);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-deep);
}
.k-periodo button {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1.2em;
  border: 0; border-radius: 999px;
  background: none; color: var(--text-soft);
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.k-periodo button[aria-pressed="true"] { background: #ffffff; color: #16150f; }
.k-periodo button span {
  padding: .15em .55em; border-radius: 999px;
  background: var(--red); color: var(--on-red);
  font-size: .9em; letter-spacing: .06em;
}
.k-periodo button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

/* ============================================================================
   §28 · SELECTOR DE IDIOMA
   El código del idioma con su flecha y, debajo, la lista en una ficha blanca
   que se despliega suave (cortina + fundido), igual que el menú del móvil.
   ========================================================================== */
.idioma { position: relative; }
.idioma__boton {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem;
  border: 0; border-radius: 999px;
  background: none; color: inherit;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: .12em;
  cursor: pointer;
}
.idioma__boton svg { transition: transform .3s var(--ease); }
.idioma.is-abierto .idioma__boton svg { transform: rotate(180deg); }
.idioma__boton:hover { background: rgba(22, 21, 15, .05); }
.idioma__boton:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
.idioma__lista {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 11rem;
  margin: 0; padding: .4rem;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(22, 21, 15, .08);
  border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(22, 21, 15, .35);
  clip-path: inset(0 0 100% 0 round 14px);
  transform: translateY(-.4rem);
  opacity: 0; visibility: hidden;
  transition: clip-path .32s var(--ease), transform .32s var(--ease),
              opacity .2s ease, visibility 0s linear .32s;
}
.idioma.is-abierto .idioma__lista,
.idioma:not(.is-listo):focus-within .idioma__lista {
  clip-path: inset(0 0 0 0 round 14px);
  transform: none; opacity: 1; visibility: visible;
  transition: clip-path .32s var(--ease), transform .32s var(--ease),
              opacity .2s ease, visibility 0s;
}
.idioma__lista a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 9px;
  color: var(--text); text-decoration: none;
  font-size: .95rem;
}
.idioma__lista a:hover, .idioma__lista a:focus-visible { background: var(--red-soft); color: var(--red-ink); outline: none; }
.idioma__lista a[aria-current="true"] { font-weight: 600; color: var(--red-ink); }
@media (prefers-reduced-motion: reduce) {
  .idioma__lista, .idioma.is-abierto .idioma__lista { transition: none; }
}

/* Banderas: SVG en línea (los emojis de bandera no se ven en Windows) */
.bandera {
  display: inline-block; flex: none;
  width: 20px; height: 14px;
  border-radius: 3px;
  background: center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(22, 21, 15, .12);
}
.bandera--es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.bandera--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30M60 0L0 30' stroke='%23C8102E' stroke-width='2'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.bandera--de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' preserveAspectRatio='none'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000'/%3E%3C/svg%3E"); }
.bandera--nl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' preserveAspectRatio='none'%3E%3Crect width='9' height='6' fill='%2321468B'/%3E%3Crect width='9' height='4' fill='%23fff'/%3E%3Crect width='9' height='2' fill='%23AE1C28'/%3E%3C/svg%3E"); }
.bandera--fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E"); }
.idioma__boton .idioma__codigo { font-size: 10px; letter-spacing: .08em; }
.idioma__lista { min-width: 0; }
.idioma__lista a {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
}

/* ============================================================================
   §29 · PORTADA (kokinstudio.com/): el logo y los cinco idiomas
   ========================================================================== */
.portada {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  margin: 0; padding: 24px 16px;
  background: #ffffff; color: var(--text);
}
.portada__caja { display: flex; flex-direction: column; align-items: center; gap: clamp(2.5rem, 7vw, 4rem); }
.portada__logo { margin: 0; line-height: 0; }
.portada__logo svg { width: clamp(180px, 34vw, 280px); height: auto; color: var(--text); }
.portada__idiomas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.portada__idiomas a {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(22, 21, 15, .1);
  border-radius: 999px;
  color: var(--text); text-decoration: none;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.portada__idiomas a:hover, .portada__idiomas a:focus-visible {
  border-color: rgba(194, 64, 45, .45); background: var(--red-soft); color: var(--red-ink); outline: none;
}
.portada__idiomas .bandera { width: 24px; height: 17px; }
@media (max-width: 520px) {
  .portada__idiomas { flex-direction: column; align-items: stretch; width: min(240px, 100%); }
  .portada__idiomas a { justify-content: flex-start; }
}

/* Paso de la portada al home: transición entre documentos (View Transitions).
   El logo grande viaja hasta el de la cabecera; el resto funde y sube un poco.
   Donde el navegador no la soporta, la portada funde a blanco antes de irse
   (clase `portada--saliendo`, la pone el script de la portada). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .portada__logo svg, .site-header .brand svg { view-transition-name: kokin-logo; }
  ::view-transition-group(kokin-logo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  ::view-transition-old(root) { animation: portada-sale .3s ease-in both; }
  ::view-transition-new(root) { animation: portada-entra .5s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .portada__caja { transition: opacity .28s ease-in, transform .28s ease-in; }
  .portada--saliendo .portada__caja { opacity: 0; transform: translateY(-8px); }
}
@keyframes portada-sale { to { opacity: 0; } }
@keyframes portada-entra { from { opacity: 0; transform: translateY(12px); } }