/* ==========================================================================
   KUSTOMS — base (PROTOTIPO LOCAL, no se publica)
   Tokens, tipografía, reset y elementos transversales.
   Las secciones y componentes viven en kus-secciones.css.

   IDENTIDAD REAL DE KUSTOMS — 2026-09-25. Hasta hoy este archivo usaba la
   paleta y las fuentes de KOKURA "prestadas" porque la dueña no había
   mandado su propia marca todavía. Ya mandó su hoja de marca (imágenes en
   `img/marca/`, fuentes en `libs/fuentes/`): rojo/cian/beige/negro y
   Aileron/Knewave, NO el rosa/ciruela/lila de Kokura ni Arimo. Los ratios de
   abajo se MIDIERON hoy contra estos colores nuevos (no son los de Kokura
   reetiquetados).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFÍA — local, en kustoms/public/libs/fuentes/ (CLAUDE.md §2.3: nunca
   CDN, nunca duplicado). Aileron (CC0) para cuerpo/interfaz, Knewave (SIL
   OFL) como acento decorativo puntual. «Brought», la display del logo, es
   comercial y NO está en disco (PROCEDENCIA-LIBS.md): el nombre de la marca
   se pinta con el logo PNG/WebP, nunca con una tipografía parecida sin
   avisar.

   Arimo YA NO SE CARGA: era la fuente prestada de Kokura vía el puente de
   router.php, y dejó de usarse en cuanto Aileron llegó. Se sacó de acá, de
   router.php (la entrada del puente) y de exportar.sh (la copia) — cargar
   una fuente que ninguna regla usa es peso muerto y una URL más para
   auditar contra CDN.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Aileron';
    src: url('../libs/fuentes/Aileron-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('../libs/fuentes/Aileron-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('../libs/fuentes/Aileron-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Knewave';
    src: url('../libs/fuentes/Knewave-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   TOKENS — valores textuales de la hoja de marca de Kustoms. Contrastes
   MEDIDOS hoy (2026-09-25), con un script de contraste WCAG, no a ojo:

     blanco/rojo   5.49 ✅   rojo/blanco   5.49 ✅
     negro/cian    7.58 ✅   negro/beige   8.50 ✅
     blanco/negro 17.40 ✅   negro/rojo    3.17 (sólo texto grande o UI)
     blanco/cian   2.30 ❌   blanco/beige  2.05 ❌
     cian/rojo     2.39 ❌   beige/rojo    2.68 ❌

   Reglas que salen: el cian y el beige llevan SIEMPRE texto negro; el rojo
   lleva SIEMPRE texto blanco; blanco nunca va sobre cian ni sobre beige.
   -------------------------------------------------------------------------- */
:root {
    --kus-rojo:   #D20A2E;
    --kus-cian:   #00BCD4;
    --kus-beige:  #C7B299;
    --kus-negro:  #1A1A1A;
    --kus-blanco: #ffffff;

    /* Tinte suave del rojo, SIN texto encima (fondo decorativo de hover en
       botones pequeños: la bandeja de stickers, por ejemplo) — no es uno de
       los 6 valores de marca, es un derivado transparente del rojo, así que
       no le compite ninguna regla de contraste de texto. */
    --kus-resalte-suave: rgba(210, 10, 46, 0.08);

    /* Tintes de tarjeta (2026-09-26, "¿Cómo funciona?" — pedido de la dueña:
       "agregarle igual más color"). SÍ llevan texto negro/gris de apoyo
       encima (el título y el texto del paso), así que la opacidad de cada
       uno se midió con un script WCAG contra el texto real, no a ojo —
       beige necesita más opacidad que los otros dos porque el tono en sí es
       más parecido al blanco y a poca opacidad no se lee como "beige":
         negro/tinte:  rojo 14.16 · cian 15.23 · beige 13.34  (los tres ≥13)
         apoyo/tinte:  rojo  5.68 · cian  6.11 · beige  5.35  (los tres ≥4.5)
       (medido con las opacidades de abajo: rojo 12%, cian 15%, beige 40%,
       todas sobre blanco). */
    --kus-rojo-tarjeta:  rgba(210, 10, 46, 0.12);
    --kus-cian-tarjeta:  rgba(0, 188, 212, 0.15);
    --kus-beige-tarjeta: rgba(199, 178, 153, 0.40);

    /* Cian MUY diluido, para el fondo de huellas de toda la página (ver
       HUELLAS DECORATIVAS más abajo). 8% de opacidad: con el rojo de marca
       encima —el texto más débil de la paleta, 5.49 sobre blanco puro— da
       5.11 sobre este fondo; el gris de apoyo da 6.50. Medido con la
       fórmula WCAG (contraste.js, script aparte), no a ojo. */
    --kus-cian-fondo: rgba(0, 188, 212, 0.08);

    --kus-fondo:        #ffffff;
    --kus-fondo-foto:   #efefef;
    --kus-linea:        #e6e2e6;
    --kus-linea-fuerte: #cfc8d0;
    /* Borde de un control interactivo (WCAG 1.4.11, 3:1 contra su fondo).
       Gris neutro, no depende de la paleta de marca: #8d858f sobre blanco
       da 3.57 — medido igual que en Kokura, sigue valiendo porque el fondo
       del cuerpo sigue siendo blanco. */
    --kus-linea-control: #8d858f;

    --kus-texto:        #1a1a1a;
    --kus-texto-apoyo:  #5e5760;
    --kus-texto-inv:       #ffffff;
    --kus-texto-inv-apoyo: #cfc9cc;

    --kus-fuente:         'Aileron', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --kus-fuente-display: 'Knewave', 'Aileron', cursive;

    --kus-e1: 4px;   --kus-e2: 8px;   --kus-e3: 12px;  --kus-e4: 16px;
    --kus-e5: 24px;  --kus-e6: 32px;  --kus-e7: 48px;  --kus-e8: 64px;
    --kus-e9: 96px;

    --kus-radio: 4px;
    --kus-radio-pill: 99px;
    --kus-ancho: 1200px;
    --kus-ancho-angosto: 720px;
    --kus-franja-alto: 40px;
}

/* --------------------------------------------------------------------------
   RESET mínimo — [hidden] tiene que GANAR sobre cualquier `display` de
   autor: el editor, el carrusel-controles y la ventana pop cuelgan de este
   atributo antes de que el JS decida mostrarlos.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kus-franja-alto) + 72px + var(--kus-e4));
}

body {
    margin: 0;
    background: var(--kus-fondo);
    color: var(--kus-texto);
    font-family: var(--kus-fuente);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: var(--kus-franja-alto);
    /* position:relative a propósito: es el ancla del fondo de huellas
       (::before, más abajo), que necesita a `body` como su contenedor de
       posicionamiento para estirarse a la altura REAL de la página. */
    position: relative;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
p  { margin: 0 0 var(--kus-e4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
    outline: 3px solid var(--kus-negro);
    outline-offset: 2px;
}
.kus-inverso :focus-visible {
    outline-color: var(--kus-blanco);
}
/* El hero es ROJO SÓLIDO, no negro ni blanco: un foco negro contra rojo da
   3.17 (linde del mínimo de UI, WCAG 1.4.11), y blanco da 5.49 con margen
   real — medido, no asumido. */
.kus-hero :focus-visible {
    outline-color: var(--kus-blanco);
}

/* --------------------------------------------------------------------------
   UTILIDADES
   -------------------------------------------------------------------------- */
.kus-contenedor {
    width: 100%;
    max-width: var(--kus-ancho);
    margin: 0 auto;
    padding-inline: var(--kus-e6);
}
.kus-contenedor--angosto { max-width: var(--kus-ancho-angosto); }

/* --------------------------------------------------------------------------
   HUELLAS DECORATIVAS — pedido de la dueña, 2026-09-26: "más color, familiar
   y divertido", con huellas CIAN en vez de un fondo de color por sección
   (eso ya se probó una vez en Kokura y el cliente lo rechazó por
   "muestrario" — ver CLAUDE.md de Kokura §2.2). Rondas 1 a 5 (2026-09-26)
   fueron todas variantes de DOS TIRAS FIJAS a los lados (32px de ancho):
   una sola huella repetida en fila, después el archivo completo recortado a
   una tira angosta de 4 huellas. Ninguna daba lo que pide el dibujo de
   ella (fondo-6-w1600.webp): un patrón DISPERSO y girado, cubriendo toda la
   página — 32px de margen sólo puede mostrar una columna, nunca dispersión.

   ⚠ SEXTA ronda, 2026-09-28, pedido explícito: «que no se vean como en
   línea» + una referencia (R8.jpg) que resultó ser exactamente su Fondo6.
   Se abandonan las tiras: ahora es su Fondo6 ENTERO, en mosaico, cubriendo
   TODA la página — sin redibujar nada del archivo.

   CÓMO se pone DETRÁS del contenido sin tapar nada: `body` es el ancla
   (position:relative, arriba) y este patrón vive en `body::before` —no un
   <div> nuevo, es puramente decorativo y los pseudo-elementos no entran al
   árbol de accesibilidad, así que no hace falta aria-hidden. `position:
   absolute; inset:0` sobre un ancla de altura automática se resuelve DESPUÉS
   de que el contenido normal (header/main/footer) fija la altura real de
   `body` — por eso cubre la página entera y no sólo el viewport. `z-index:
   -1` lo manda a pintarse ANTES que cualquier contenido de flujo normal
   (Apéndice E de CSS2.1: los descendientes con z-index negativo pintan
   antes que los descendientes en flujo, sin necesitar que cada sección
   declare su propio z-index para "taparlo" — el hero rojo, las tarjetas, el
   pie negro y las imágenes lo cubren solos, por estar simplemente encima en
   el orden normal de pintado). Y como no es `fixed`, se desplaza con la
   página, tal como se pidió.

   TAMAÑO: en el archivo, cada huella mide ~75px a 1600px de ancho de
   imagen (≈4,69% del ancho). Para que en pantalla mida ~45px en escritorio
   y ~36px en celular, `mask-size` escala la imagen ENTERA a 960px y 768px
   respectivamente (45/75×1600 y 36/75×1600) — más chica en el breakpoint
   angosto para no saturar un celular. `mask-repeat` la vuelve mosaico.

   COSTURA: el archivo no se diseñó como tile (no es un patrón seamless), así
   que `mask-repeat` puede cortar una huella justo en el borde de cada
   repetición. Revisado en captura (1366 y 375): se ve algún corte leve en el
   borde de la costura, aceptable — es la contrapartida de no redibujar nada
   del archivo de ella; si algún día molesta, el arreglo es recortar un tile
   ya sin costura aparte (mismo criterio que ya se usó para la tira vieja),
   no reescribir esto.

   CONTRASTE — REGLA DURA: el texto más débil de la paleta sobre blanco
   puro es el rojo de marca (5.49); el gris de apoyo parte más alto (6.68)
   y no es el caso que ajusta. Contra el PEOR caso —un trazo de huella, a
   la opacidad elegida, mezclado con blanco— los dos tienen que seguir
   pasando 4.5:1. Medido con la fórmula WCAG (no a ojo): a
   `--kus-cian-fondo` (8% de opacidad, arriba) el rojo da 5.11 y el gris de
   apoyo 6.50 — los dos con margen real sobre 4.5. (A 20% el rojo cae a
   4.59, ya al límite; por eso 8% y no más.) */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--kus-cian-fondo);
    -webkit-mask-image: url('../img/marca/fondo-6-w1600.webp');
            mask-image: url('../img/marca/fondo-6-w1600.webp');
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    -webkit-mask-size: 768px auto;
            mask-size: 768px auto;
}
@media (min-width: 768px) {
    body::before {
        -webkit-mask-size: 960px auto;
                mask-size: 960px auto;
    }
}

.kus-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--kus-negro);
    color: var(--kus-blanco);
    padding: var(--kus-e3) var(--kus-e5);
    font-weight: 700;
}
.kus-saltar:focus { left: 0; }

/* Texto que no se ve pero sí se lee en voz alta. */
.kus-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Se oculta mientras el JS no haya marcado <html class="kus-js">. Sin JS no
   queda ningún botón muerto: el editor, la bandeja de stickers, el carrusel
   con controles automáticos, la ventana pop y el botón de votar necesitan
   script para hacer algo, así que no se pintan (CLAUDE.md §2.5).
   Especificidad (0,2,1) a propósito, igual que Kokura: gana sobre cualquier
   `.kus-btn{display:…}` declarado después sin necesitar !important — ese fue
   el bug real que ya le costó a Kokura ocho botones "Agregar" visibles sin
   JS (CLAUDE.md §3.3, incidente 2). */
html:not(.kus-js) .kus-solo-js { display: none; }

/* Al revés: sólo tiene sentido SIN JavaScript (el aviso de que el editor
   necesita script). Nada compite en especificidad acá, no hace falta el
   mismo truco. */
.kus-js .kus-solo-sin-js { display: none; }

/* --------------------------------------------------------------------------
   SISTEMA TIPOGRÁFICO
   -------------------------------------------------------------------------- */
.kus-sobretitulo {
    margin: 0 0 var(--kus-e3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--kus-texto-apoyo);
}
.kus-inverso .kus-sobretitulo { color: var(--kus-cian); }

.kus-titulo {
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.kus-titulo-seccion {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: var(--kus-e6);
}

.kus-bajada {
    max-width: 56ch;
    margin-top: var(--kus-e4);
    font-size: 1.02rem;
    color: var(--kus-texto-apoyo);
}
.kus-inverso .kus-bajada { color: var(--kus-texto-inv-apoyo); }

/* --------------------------------------------------------------------------
   BOTONES — principal = ROJO con texto BLANCO (pedido de la tarea: "Botón
   principal = rojo con texto blanco"). Nunca blanco sobre cian/beige.
   -------------------------------------------------------------------------- */
.kus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kus-e2);
    min-height: 48px;
    padding: var(--kus-e3) var(--kus-e6);
    border-radius: var(--kus-radio);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    /* ⚠ CORREGIDO 2026-09-26 — `background-color` SE SACÓ de esta lista.
       Causa real, medida: cuando el color efectivo de un `.kus-btn` cambia
       porque un ANCESTRO gana una clase en tiempo de ejecución (ej.
       ".kus-carrusel--activo", agregada por kus-carrusel.js al cargar,
       nunca por el propio botón) Y `background-color` es transicionable,
       Chrome en headless (con --disable-gpu, que es como corre el banco y
       las capturas) se queda pintando el color ANTERIOR indefinidamente —
       no es un parpadeo de transición, es un repintado que nunca llega.
       Verificado: sacando el transition, el mismo botón pinta bien
       (blanco/negro) al toque; con capturas reales (sin --virtual-time-budget
       de por medio) el problema seguía ahí, así que no era un artefacto de
       ese flag. Es exactamente el tipo de bug de repintado que
       `getComputedStyle` puede reportar mal si no se le da tiempo/replintado
       real — la lección concreta: un color que cambia por una clase en el
       ANCESTRO (no en el propio elemento) es más frágil que un simple
       :hover, y no vale la pena animarlo. El color y el borde SÍ siguen
       transicionando (ahí no se vio el problema, y son casos de :hover
       normal, no de ancestro cambiando de clase). */
    transition: color 0.15s ease, border-color 0.15s ease;
}
.kus-btn:hover { text-decoration: none; }

.kus-btn--principal {
    background: var(--kus-rojo);
    color: var(--kus-blanco);
}
.kus-btn--principal:hover { background: #a5081f; }

.kus-btn--linea {
    color: var(--kus-negro);
    box-shadow: inset 0 0 0 2px var(--kus-negro);
}
.kus-btn--linea:hover { background: var(--kus-negro); color: var(--kus-blanco); }

/* Acción SECUNDARIA de marca (2026-09-26, "botones... con los colores de
   la marca" — "Agregar al pedido" era un contorno negro, sin color de
   marca). CIAN con texto NEGRO: 7.58, medido — se reserva el rojo para la
   acción PRINCIPAL/final ("Pedidos muy pronto" / "Hacé tu pedido"), así
   las dos acciones del configurador quedan diferenciadas por color y no
   sólo por posición. */
.kus-btn--cian {
    background: var(--kus-cian);
    color: var(--kus-negro);
}
.kus-btn--cian:hover { background: var(--kus-negro); color: var(--kus-blanco); }

/* Blanco sobre negro (fondo del pie): 17.40, el más seguro de la paleta. */
.kus-inverso .kus-btn--principal { background: var(--kus-blanco); color: var(--kus-negro); }
.kus-inverso .kus-btn--principal:hover { background: var(--kus-cian); }
.kus-inverso .kus-btn--linea { color: var(--kus-blanco); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45); }
.kus-inverso .kus-btn--linea:hover { background: var(--kus-blanco); color: var(--kus-negro); }

/* Sobre el hero (rojo sólido): el botón de línea usa blanco, nunca cian ni
   beige (blanco/rojo 5.49; cian y beige sobre rojo fallan, ver la tabla de
   arriba). */
.kus-hero .kus-btn--linea { color: var(--kus-blanco); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.kus-hero .kus-btn--linea:hover { background: var(--kus-blanco); color: var(--kus-rojo); }

/* ⚠ CORREGIDO 2026-09-25 — «Ver productos kustomizables» y «Descargar mi
   imagen» (ésta dentro del panel translúcido del editor, que sigue siendo
   descendiente de .kus-hero) son BOTONES RELLENOS: con el `.kus-btn--principal`
   de base (rojo sobre... el hero rojo), el relleno se fundía con el fondo y
   sólo quedaba el texto blanco flotando — medido con getComputedStyle antes
   de este fix: backgroundColor del botón y del .kus-hero daban el MISMO
   rgb(210, 10, 46). Sobre el hero, el principal se invierte: BLANCO con
   texto ROJO (rojo/blanco 5.49 ✅) — el mismo par que ya usa el botón de
   línea al revés. El hover pasa a negro con texto blanco (17.40), un estado
   claramente distinto del reposo y del fondo. */
.kus-hero .kus-btn--principal { background: var(--kus-blanco); color: var(--kus-rojo); }
.kus-hero .kus-btn--principal:hover { background: var(--kus-negro); color: var(--kus-blanco); }

.kus-btn--grande { min-height: 56px; padding: var(--kus-e4) var(--kus-e7); font-size: 0.88rem; }

/* ⚠ CORREGIDO 2026-09-26 — pedido de la dueña: "los botones siempre con los
   colores de la marca, incluidos los deshabilitados/pendientes". Antes
   llevaban `opacity: 0.55`, y sobre un fondo SÓLIDO eso no atenúa el color —
   deja ver lo que hay DETRÁS del botón (la foto del carrusel, en el slide
   de WhatsApp), así que el blanco de marca se volvía translúcido y leía
   como gris apagado, no como "de marca en pausa". Ahora el color queda
   ENTERO y lo que comunica "todavía no está abierto" es el cursor, el
   `aria-disabled`/`disabled` (para lectores de pantalla) y, sobre todo, el
   propio texto del botón ("Pedidos muy pronto") — nunca un hover que
   sugiera que sí se puede tocar. */
.kus-btn:disabled,
.kus-btn[aria-disabled="true"] { cursor: not-allowed; }
.kus-btn:disabled:hover,
.kus-btn[aria-disabled="true"]:hover { background: inherit; color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   MOVIMIENTO — se DESACTIVA, no se atenúa (CLAUDE.md §2.5)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}