/* ==========================================================================
   KUSTOMS — secciones y componentes (PROTOTIPO LOCAL)
   Breakpoint responsive: 768px, igual que Kokura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FRANJA DE PROTOTIPO — fija arriba de todo. Existe SIEMPRE mientras esto
   sea un prototipo (no se publica, instrucción explícita de la tarea).
   Negro, no ciruela: ese token era de la paleta prestada de Kokura y ya no
   existe acá. Blanco sobre negro da 17.40, el más seguro de toda la paleta.
   -------------------------------------------------------------------------- */
.kus-franja-prototipo {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 250;
    height: var(--kus-franja-alto);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 var(--kus-e4);
    background: var(--kus-negro);
    color: var(--kus-blanco);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   CABECERA — blanca, logo NEGRO (logo-4).
   -------------------------------------------------------------------------- */
.kus-cabecera {
    position: sticky;
    top: var(--kus-franja-alto);
    z-index: 200;
    background: var(--kus-blanco);
    border-bottom: 1px solid var(--kus-linea);
}
.kus-cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kus-e3) var(--kus-e5);
    padding-block: var(--kus-e3);
}
.kus-cabecera__marca {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.kus-cabecera__logo {
    height: 32px;
    width: auto;
    display: block;
}
.kus-cabecera nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kus-e5);
}
.kus-cabecera nav a {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --------------------------------------------------------------------------
   PORTADA / HERO — ROJO SÓLIDO con texto BLANCO (pedido de la tarea:
   "hero rojo con texto blanco"). Ya no es el degradado morado prestado de
   Kokura. blanco/rojo mide 5.49 — pasa AA de sobra para el cuerpo de texto
   normal (4.5) y el título, que es grande, pasa con más margen todavía
   (umbral de texto grande: 3).
   -------------------------------------------------------------------------- */
.kus-hero {
    background: var(--kus-rojo);
    color: var(--kus-texto-inv);
    padding-block: var(--kus-e8) var(--kus-e9);
}
.kus-hero__grilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kus-e8);
    align-items: center;
}
@media (min-width: 768px) {
    .kus-hero__grilla { grid-template-columns: 1fr 1fr; }
}
.kus-hero__texto .kus-btn { margin-top: var(--kus-e5); }

/* El hero NO es `.kus-inverso` (ese hace de fondo NEGRO, el del pie), así
   que `.kus-sobretitulo` y `.kus-bajada` no heredan sus overrides de color:
   sin esto se quedarían con el gris `--kus-texto-apoyo`, pensado para fondo
   BLANCO, casi invisible sobre rojo (medido: 1.4 de contraste). Sólo el
   BLANCO sólido aguanta acá (5.49). */
.kus-hero .kus-sobretitulo,
.kus-hero .kus-bajada {
    color: var(--kus-texto-inv);
}

/* --------------------------------------------------------------------------
   EL EDITOR DE STICKERS
   -------------------------------------------------------------------------- */
/* Panel NEGRO translúcido sobre el rojo del hero: blanco 11.78, cian 5.13,
   texto-inv-apoyo 7.22 — los tres con margen sobre el mínimo de 4.5.
   Medido con un script de contraste WCAG (blend del overlay contra el rojo
   sólido), no a ojo. */
.kus-editor {
    background: rgba(26, 26, 26, 0.45);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--kus-radio);
    padding: var(--kus-e5);
}

.kus-editor__titulo-mes {
    font-family: var(--kus-fuente-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 400;
    color: var(--kus-blanco);
    text-align: center;
    line-height: 1.25;
    margin-bottom: var(--kus-e4);
}

/* El NOMBRE va aparte, ABAJO de la foto (pedido 2026-09-26: antes era un
   único <h2> "Ottis, mascota del mes" arriba de todo). No es un encabezado
   —el único <h2> de este bloque sigue siendo el título fijo de arriba, así
   que la jerarquía no se toca—, es una etiqueta de la foto. */
.kus-editor__nombre-mes {
    font-family: var(--kus-fuente-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--kus-blanco);
    text-align: center;
    margin: var(--kus-e3) 0 0;
}

.kus-editor__lienzo-envoltorio {
    width: 100%;
}
.kus-editor__lienzo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--kus-radio);
    background: var(--kus-fondo-foto);
    touch-action: none; /* el arrastre lo maneja el JS con Pointer Events */
}
.kus-editor__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kus-editor__lienzo:focus-visible { outline-offset: -3px; }

/* Cada sticker es un <button> posicionado a mano por el JS (left/top/width/
   height + transform: translate(-50%,-50%) rotate(...)). El botón, no la
   <img> de adentro, recibe el pointerdown: así el "pointer capture" queda en
   el mismo elemento que se mueve. */
.kus-sticker {
    position: absolute;
    padding: 0;
    display: block;
    background: transparent;
    cursor: grab;
    touch-action: none;
}
.kus-sticker:active { cursor: grabbing; }
.kus-sticker img {
    width: 100%;
    height: 100%;
    pointer-events: none; /* el hit-test es del <button>, no de la imagen */
}
/* Anillo del sticker seleccionado: ROJO, no un color inventado — 5.49 sobre
   blanco y visible de sobra sobre una foto cualquiera (uso de UI, no de
   texto corrido). */
.kus-sticker--seleccionado {
    box-shadow: 0 0 0 3px var(--kus-rojo);
    border-radius: 6px;
}

.kus-editor__controles {
    display: flex;
    gap: var(--kus-e2);
    justify-content: center;
    margin-top: var(--kus-e4);
}
.kus-editor__control {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--kus-radio-pill);
    background: var(--kus-blanco);
    color: var(--kus-negro);
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kus-editor__control:hover { background: var(--kus-cian); }

.kus-editor__bandeja {
    margin-top: var(--kus-e5);
    text-align: center;
}
/* Especificidad (0,3,0) a propósito, no por orden de aparición: sube por
   encima de `.kus-hero .kus-sobretitulo` (0,2,0) sin depender de qué regla
   quedó más abajo en el archivo — el mismo tipo de trampa que ya le costó
   ocho botones visibles sin JS en Kokura (CLAUDE.md §3.3, incidente 2). */
.kus-editor .kus-editor__bandeja .kus-sobretitulo { color: var(--kus-blanco); }
.kus-bandeja__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kus-e3);
    justify-content: center;
}
.kus-bandeja__boton {
    width: 48px;
    height: 48px;
    padding: var(--kus-e1);
    border-radius: var(--kus-radio);
    background: var(--kus-blanco);
}
.kus-bandeja__boton:hover { background: var(--kus-resalte-suave); }
.kus-bandeja__boton img { width: 100%; height: 100%; object-fit: contain; }

.kus-editor__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kus-e3);
    justify-content: center;
    margin-top: var(--kus-e5);
}
.kus-editor__acciones .kus-btn { min-height: 44px; padding: var(--kus-e2) var(--kus-e5); font-size: 0.75rem; }

.kus-editor__nota {
    margin-top: var(--kus-e4);
    font-size: 0.8rem;
    color: var(--kus-texto-inv-apoyo);
    text-align: center;
}

.kus-editor__aviso-sin-js {
    margin-top: var(--kus-e4);
    padding: var(--kus-e3) var(--kus-e4);
    background: rgba(0,0,0,0.25);
    border-radius: var(--kus-radio);
    font-size: 0.85rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   CARRUSEL DE DESTACADOS — réplica del carrusel de Kokura
   (lib/_portadas-bloque.php + kk-secciones.css "CARRUSEL, SEGUNDA VERSIÓN"),
   con tokens --kus-*. Pedido del usuario después de ver la primera versión:
   «podemos poner el mismo que usamos en Kokura, que no era 100% el width;
   me parece que está un poco grande».

   LA PISTA ES UN SCROLLER, NO UN `transform` — mismo motivo que Kokura: con
   `overflow-x` + `scroll-snap` el carrusel funciona SIN JavaScript.

   PERO ACÁ NO ARRANCA COMO SCROLLER: arranca como PILA VERTICAL (ver más
   abajo, "SIN JS: PILA VERTICAL") y el script (kus-carrusel.js) recién
   agrega `.kus-carrusel--activo` — que es lo que lo vuelve carrusel y lo que
   inyecta flechas/puntos/pausa. Sin ese script no hay nada que operar y se
   ven las 3 imágenes apiladas, con el scroll normal de la página.

   Ninguna de estas reglas declara `background` en la sección: no hay
   "cuarta zona" — el carrusel vive en el cuerpo blanco del sitio.
   -------------------------------------------------------------------------- */
.kus-carrusel { padding: var(--kus-e7) 0; }

.kus-carrusel__pista {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kus-carrusel__diapositiva + .kus-carrusel__diapositiva { margin-top: var(--kus-e4); }

.kus-carrusel__imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kus-radio);
    background: var(--kus-fondo-foto);
}
.kus-carrusel__accion {
    /* Mismo criterio que Kokura: el botón centrado abajo de la imagen —
       hasta que `--activo` lo superponga (más abajo). */
    margin: var(--kus-e4) 0 0;
    text-align: center;
}

@media (max-width: 767px) {
    .kus-carrusel { padding: var(--kus-e6) 0; }
}

/* El paso automático se apaga con movimiento reducido — se DESACTIVA, no se
   atenúa (§2.5). Lo hace kus-carrusel.js mirando la media query; esta regla
   es la otra mitad: sin ella el scroll suave seguiría animando el salto. */
@media (prefers-reduced-motion: reduce) {
    .kus-carrusel__pista { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   CON JS: CARRUSEL DE VERDAD — la clase la pone `kus-carrusel.js`, nunca el
   PHP: si el script no carga, el bloque de arriba (pila vertical) es TODO lo
   que existe, sin scroller a medias ni controles sueltos.
   -------------------------------------------------------------------------- */
.kus-carrusel--activo .kus-carrusel__pista {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* La barra se esconde SÓLO acá: con JS hay flechas y puntos, así que no
       aporta nada. Sin JS (arriba) no hay scroller y por lo tanto tampoco
       barra — mismo razonamiento que Kokura, tras el bug de la tira de
       miniaturas que quedó inalcanzable con mouse al esconderla siempre. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.kus-carrusel--activo .kus-carrusel__pista::-webkit-scrollbar { display: none; }
.kus-carrusel--activo .kus-carrusel__diapositiva {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
    margin-top: 0;
    /* ⚠ 2026-09-26: a 1366px asomaba una línea de 1-2px de la diapositiva
       SIGUIENTE en el borde derecho (redondeo de sub-píxel de `flex:0 0
       100%` contra el ancho real del contenedor). overflow:hidden la
       recorta sin tocar el layout — la imagen y el botón ya viven enteros
       adentro de esta caja. */
    overflow: hidden;
}
.kus-carrusel--activo .kus-carrusel__imagen { border-radius: var(--kus-radio); }

/* La diapositiva es el lienzo de lo que va encima, y el contenedor necesita
   su propio contexto de posicionamiento — EL BUG QUE YA SE COMIÓ KOKURA UNA
   VEZ: si `position:relative` estuviera SÓLO en `.kus-carrusel__diapositiva`,
   el `position:absolute` de los controles (inyectados como HERMANOS de la
   pista, no adentro de una diapositiva) se resolvería contra el ancestro
   posicionado más cercano —ninguno— y terminarían anclados al documento:
   existirían, medirían 44px, y NO SE VERÍAN EN NINGUNA PARTE. Por eso acá
   TAMBIÉN el `.kus-contenedor` es positioned. */
.kus-carrusel--activo .kus-carrusel__diapositiva { position: relative; }
.kus-carrusel--activo .kus-contenedor { position: relative; }

/* Un velo abajo, que resuelve dos cosas a la vez:
     1. el botón no cae como una losa pegada encima de la foto — se leería
        como un sticker, no como parte de la portada.
     2. los controles se apoyan sobre una foto ARBITRARIA (las 3 traen texto
        horneado en distintas zonas): blancos sobre un fondo claro se
        pierden sin este fondo debajo.
   Arranca transparente y sólo se cierra en el último tercio, así que nunca
   tapa el texto horneado de arriba de la imagen — sólo oscurece la franja
   donde van a sentarse el botón y los controles. */
.kus-carrusel--activo .kus-carrusel__diapositiva::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.72) 100%);
    pointer-events: none;
}

/* ⚠ EL BOTÓN Y LOS CONTROLES VAN A LA DERECHA, NO CENTRADOS — diferencia a
   propósito con Kokura, verificada con capturas de las 3 diapositivas
   (escritorio y 375px). Las fotos de Kustoms traen TEXTO HORNEADO —a
   diferencia de las de Kokura, que no tienen texto— y ese texto vive en la
   MITAD IZQUIERDA en 2 de las 3: la pregunta "¿YA VOTASTE...?" (un globo
   que baja casi hasta el borde inferior) y el chat de WhatsApp. Centrado
   (la posición de Kokura), el botón "VER PARTICIPANTES" tapaba la palabra
   "MES?" del globo, y el de WhatsApp caía encima del marco de la foto del
   perrito. A la derecha, las tres quedan libres: la tercera (KUSTOMIZA)
   no tiene texto abajo así que no le cambia nada. */
.kus-carrusel--activo .kus-carrusel__accion {
    position: absolute;
    right: var(--kus-e6);
    left: auto;
    bottom: calc(var(--kus-e4) + 60px);
    transform: none;
    margin: 0;
    width: max-content;
    max-width: 60%;
    text-align: right;
    z-index: 2;
}
/* Con el velo detrás, el botón es blanco de marca con texto negro — se lee
   sin depender del fondo real de la foto (blanco/negro: 17.40). El hover
   pasa a rojo con texto blanco (5.49), un acento de marca y no un color
   inventado.

   ⚠ `display:flex; width:100%` A PROPÓSITO, no el `inline-flex` de base:
   `.kus-btn` normal es de nivel EN LÍNEA, así que su ancho es el de su
   contenido sin envolver — ignora el `max-width` del `<p>` que lo contiene
   y se sale de la foto en vez de partir el texto en dos líneas. Medido con
   getBoundingClientRect() a 375px: el `<p>` quedaba bien acotado (105px),
   pero el `<a>` de adentro medía 219px y sobresalía por la derecha, tapando
   otra vez el texto horneado — el mismo defecto que esta ronda vino a
   arreglar, reaparecido por una razón distinta. Como bloque, el botón SÍ
   hereda el ancho de su contenedor y el texto envuelve de verdad. */
.kus-carrusel--activo .kus-carrusel__accion .kus-btn {
    display: flex;
    width: 100%;
    background: var(--kus-blanco);
    color: var(--kus-negro);
}
.kus-carrusel--activo .kus-carrusel__accion .kus-btn:hover {
    background: var(--kus-rojo);
    color: var(--kus-blanco);
}

@media (max-width: 767px) {
    /* ⚠ CORREGIDO 2026-09-26 (tercera ronda) — el botón quedaba flotando
       ENCIMA de la foto (mismo criterio que escritorio) y tapaba el texto
       horneado "KUSTOMIZA TUS PRENDAS": a 375px no hay espacio limpio
       donde flotar sin pisar algo. Ahora en móvil vuelve al flujo normal,
       DEBAJO de la foto — como si el carrusel no tuviera JS —, mismo lugar
       donde ya caen los controles (flechas/puntos/pausa, más abajo). En
       escritorio (min-width:768px) el botón sigue flotando sobre la foto,
       sin tocar. */
    .kus-carrusel--activo .kus-carrusel__accion {
        position: static;
        right: auto;
        left: auto;
        bottom: auto;
        z-index: auto;
        width: 100%;
        max-width: none;
        text-align: center;
        margin: var(--kus-e3) 0 0;
    }
    /* El <p> ya no es angosto (era max-width:60/34%): el botón, que hereda
       width:100% de la regla base, ahora ocupa el ancho de la foto — un
       botón grande y fácil de tocar debajo de la imagen, no un texto suelto. */
}

/* Los controles (flechas/puntos/pausa) los INYECTA kus-carrusel.js como
   HERMANOS de la pista: sin JS no existen en el DOM, así que no pueden
   quedar como controles muertos — ni siquiera ocultos con CSS. A la derecha
   en escritorio, por el mismo motivo que el botón (ver arriba). */
.kus-carrusel__controles {
    position: absolute;
    left: auto;
    right: var(--kus-e6);
    bottom: var(--kus-e4);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kus-e3);
    margin: 0;
    pointer-events: none;   /* el hueco entre controles no tapa la foto */
}
.kus-carrusel__flecha,
.kus-carrusel__puntos,
.kus-carrusel__pausa { pointer-events: auto; }

/* ⚠ A 375px LOS CONTROLES BAJAN DEBAJO DE LA FOTO, ya no la pisan.
   Medido: 2 flechas + 3 puntos + 1 pausa, de 44×44 cada uno (mínimo táctil,
   no se puede achicar), NO ENTRAN en la mitad derecha de una imagen de
   343px de ancho útil — la fila entera mide ~300px, más de lo que deja la
   mitad derecha. Superponerlos igual habría vuelto a tapar el texto
   horneado de la izquierda, que es exactamente lo que esta ronda vino a
   arreglar. Bajarlos del todo es más simple y más seguro que repartirlos en
   dos filas sobre la foto: quedan SIEMPRE sobre fondo blanco liso, nunca
   sobre una foto arbitraria, así que ni siquiera necesitan el fondo sólido
   por contraste (aunque lo conservan, no estorba). */
@media (max-width: 767px) {
    .kus-carrusel__controles {
        position: static;
        margin-top: var(--kus-e3);
        justify-content: center;
        flex-wrap: wrap;
    }
}

.kus-carrusel__flecha,
.kus-carrusel__pausa {
    display: grid;
    place-items: center;
    /* 44×44 es el mínimo táctil (§2.5). */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Fondo SÓLIDO, no translúcido: se apoyan sobre una foto arbitraria y un
       fondo semitransparente heredaría el contraste de lo que tenga detrás
       — la misma decisión que ya toma Kokura acá y en su ventana pop. */
    background: var(--kus-blanco);
    box-shadow: inset 0 0 0 2px var(--kus-linea-control), 0 2px 10px rgba(26, 26, 26, 0.25);
    color: var(--kus-negro);
    font-size: 1.2rem;
    cursor: pointer;
}
.kus-carrusel__flecha:hover,
.kus-carrusel__pausa:hover { background: var(--kus-fondo-foto); }
.kus-carrusel__flecha svg,
.kus-carrusel__pausa svg { width: 18px; height: 18px; }

.kus-carrusel__puntos {
    display: flex;
    gap: var(--kus-e1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.kus-carrusel__punto {
    /* El punto VISIBLE mide 10px, pero el botón mide 44×44 con el punto
       centrado: el área táctil no puede ser del tamaño del dibujo. */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.kus-carrusel__punto::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kus-blanco);
    box-shadow: inset 0 0 0 2px var(--kus-negro), 0 1px 4px rgba(26, 26, 26, 0.35);
}
.kus-carrusel__punto[aria-current="true"]::before {
    background: var(--kus-negro);
    box-shadow: inset 0 0 0 2px var(--kus-blanco), 0 1px 4px rgba(26, 26, 26, 0.35);
}

/* --------------------------------------------------------------------------
   ARMÁ TU PRENDA (configurador)
   -------------------------------------------------------------------------- */
.kus-productos { padding-block: var(--kus-e9); }

/* Tiempo de confección (dato de la dueña, 2026-09-28): se ve CON y SIN JS,
   por eso NO cuelga de .kus-solo-js. Mismo texto-apoyo que .kus-bajada. */
.kus-productos__tiempo {
    max-width: 56ch;
    margin: 0 0 var(--kus-e6);
    font-size: 0.92rem;
    color: var(--kus-texto-apoyo);
}

.kus-config__interactivo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "banner" "vista" "form" "resultado" "pedido";
    gap: var(--kus-e6);
    margin-bottom: var(--kus-e6);
}
@media (min-width: 768px) {
    .kus-config__interactivo {
        grid-template-columns: 260px 1fr;
        grid-template-areas:
            "banner banner"
            "vista  form"
            "resultado resultado"
            "pedido pedido";
        align-items: start;
    }
}

/* ⚠ CORREGIDO 2026-09-25 — con `aspect-ratio:16/9` a ancho completo, a
   1280px el banner medía ~560px de alto y empujaba el resto del configurador
   fuera de la primera pantalla. Ahora es ALTO FIJO (no aspect-ratio, que
   crece con el ancho del contenedor) + `object-fit: cover`: se mira contra
   las 4 fotos reales (abrigos/camisas/gorras/pijamas, todas 1600×900) antes
   de fijar el valor — las cuatro tienen su contenido centrado verticalmente
   con margen a los dos lados, así que `object-position: center` (el valor
   por defecto) no corta ninguna prenda con este recorte. */
.kus-config__banner { grid-area: banner; border-radius: var(--kus-radio); overflow: hidden; }
.kus-config__banner img { width: 100%; height: 150px; object-fit: cover; object-position: center; display: block; }
@media (min-width: 768px) {
    .kus-config__banner img { height: 240px; }
}

.kus-config__vista { grid-area: vista; }
.kus-config__foto-envoltorio {
    aspect-ratio: 1 / 1;
    background: var(--kus-fondo-foto);
    border-radius: var(--kus-radio);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kus-config__foto { width: 100%; height: 100%; object-fit: contain; }
.kus-config__detalle {
    margin-top: var(--kus-e3);
    font-size: 0.85rem;
    color: var(--kus-texto-apoyo);
}

.kus-config__form { grid-area: form; display: flex; flex-direction: column; gap: var(--kus-e5); }
.kus-config__grupo { border: 0; padding: 0; margin: 0; }
.kus-config__grupo legend {
    padding: 0;
    margin-bottom: var(--kus-e2);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Selector de prenda CON IMAGEN — siguen siendo radios reales, el <input>
   queda visualmente oculto (.kus-solo-lectores) y el estado se pinta en sus
   hermanos vía combinador `~`: sin depender de :has(), que es más nuevo. */
.kus-config__prendas { display: flex; flex-wrap: wrap; gap: var(--kus-e4); }
.kus-config__prenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kus-e2);
    width: 96px;
    text-align: center;
    cursor: pointer;
}
.kus-config__prenda-figura {
    width: 80px;
    height: 80px;
    border-radius: var(--kus-radio);
    overflow: hidden;
    border: 2px solid var(--kus-linea-control);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kus-config__prenda-figura img { width: 100%; height: 100%; object-fit: cover; }
.kus-config__prenda-nombre { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.kus-config__prenda input:checked ~ .kus-config__prenda-figura {
    border-color: var(--kus-rojo);
    box-shadow: 0 0 0 3px var(--kus-rojo);
}
.kus-config__prenda input:focus-visible ~ .kus-config__prenda-figura {
    outline: 3px solid var(--kus-negro);
    outline-offset: 3px;
}

.kus-config__select {
    width: 100%;
    min-height: 44px;
    padding: var(--kus-e2) var(--kus-e3);
    border: 2px solid var(--kus-linea-control);
    border-radius: var(--kus-radio);
    background: var(--kus-blanco);
    color: var(--kus-texto);
    font: inherit;
    font-size: 0.9rem;
}
.kus-config__textarea {
    width: 100%;
    min-height: 88px;
    padding: var(--kus-e3);
    border: 2px solid var(--kus-linea-control);
    border-radius: var(--kus-radio);
    background: var(--kus-blanco);
    color: var(--kus-texto);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.kus-config__ayuda {
    margin-top: var(--kus-e2);
    font-size: 0.78rem;
    color: var(--kus-texto-apoyo);
}

.kus-config__resultado {
    grid-area: resultado;
    margin-top: var(--kus-e2);
    padding-top: var(--kus-e5);
    border-top: 1px solid var(--kus-linea);
}
.kus-config__precio { font-size: 1.6rem; font-weight: 700; }
.kus-config__precio-nota { font-size: 0.78rem; color: var(--kus-texto-apoyo); margin-bottom: var(--kus-e4); }
#kus-config-agregar { width: 100%; }
@media (min-width: 480px) { #kus-config-agregar { width: auto; } }

/* --------------------------------------------------------------------------
   EL PEDIDO — "varios productos en un pedido" (2026-09-26): "Agregar al
   pedido" (arriba, en .kus-config__resultado) suma la prenda armada a esta
   lista; un solo mensaje de WhatsApp se arma con TODAS. Ver kus-pedido.js.
   -------------------------------------------------------------------------- */
.kus-pedido {
    grid-area: pedido;
    margin-top: var(--kus-e2);
    padding-top: var(--kus-e5);
    border-top: 1px solid var(--kus-linea);
}
.kus-pedido__titulo {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--kus-e4);
}
.kus-pedido__lista { display: flex; flex-direction: column; gap: var(--kus-e3); margin-bottom: var(--kus-e4); }
.kus-pedido__vacio { font-size: 0.88rem; color: var(--kus-texto-apoyo); }

.kus-pedido__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kus-e3);
    padding: var(--kus-e3);
    background: var(--kus-fondo-foto);
    border-radius: var(--kus-radio);
}
.kus-pedido__item-info { flex: 1 1 180px; min-width: 0; }
.kus-pedido__item-nombre { font-weight: 700; font-size: 0.9rem; }
.kus-pedido__item-detalle,
.kus-pedido__item-mensaje { font-size: 0.78rem; color: var(--kus-texto-apoyo); margin-top: var(--kus-e1); }
.kus-pedido__item-precio { font-weight: 700; font-size: 0.9rem; white-space: nowrap; margin-left: var(--kus-e3); }
.kus-pedido__quitar {
    flex-shrink: 0;
    min-height: 44px;
    padding-inline: var(--kus-e3);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kus-rojo);
}
.kus-pedido__quitar:hover { text-decoration: underline; }

.kus-pedido__total { font-weight: 700; margin-bottom: var(--kus-e2); }

.kus-config__preview {
    margin-top: var(--kus-e5);
    padding: var(--kus-e4);
    background: var(--kus-fondo-foto);
    border-radius: var(--kus-radio);
    max-width: 60ch;
}
.kus-config__preview-texto {
    font-size: 0.85rem;
    white-space: pre-line;
    margin: 0;
}

.kus-config__aviso-sin-js {
    padding: var(--kus-e4);
    background: var(--kus-fondo-foto);
    border-radius: var(--kus-radio);
    font-size: 0.9rem;
    max-width: 60ch;
    margin-bottom: var(--kus-e6);
}

/* El envoltorio, no la página, es lo que scrollea: 5 columnas no entran
   cómodas en 375px. */
.kus-config__tabla-envoltorio {
    max-width: 100%;
    overflow-x: auto;
}
.kus-config__tabla {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.kus-config__tabla th,
.kus-config__tabla td {
    text-align: left;
    padding: var(--kus-e3);
    border-bottom: 1px solid var(--kus-linea);
}
.kus-config__tabla th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Envoltorio <details>/<summary> nativo (pedido 2026-09-26: "Lista de
   precios" desplegable) — funciona SIN JavaScript, igual que .kus-pregunta
   más abajo, con el mismo tratamiento visual. */
.kus-config__precios-desplegable {
    margin-top: var(--kus-e6);
    background: var(--kus-fondo);
    border: 1px solid var(--kus-linea-fuerte);
    border-radius: var(--kus-radio);
    padding: var(--kus-e3) var(--kus-e4);
}
.kus-config__precios-resumen {
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}
.kus-config__precios-resumen::-webkit-details-marker { display: none; }
.kus-config__precios-resumen::after { content: '+'; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; }
.kus-config__precios-desplegable[open] .kus-config__precios-resumen::after { content: '−'; }
.kus-config__precios-desplegable .kus-config__tabla-envoltorio { margin-top: var(--kus-e3); }

/* --------------------------------------------------------------------------
   CÓMO FUNCIONA
   -------------------------------------------------------------------------- */
.kus-como { background: var(--kus-fondo-foto); padding-block: var(--kus-e9); }
.kus-como__pasos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kus-e6);
}
@media (min-width: 768px) {
    .kus-como__pasos { grid-template-columns: repeat(3, 1fr); }
}
/* ⚠ 2026-09-26: la dueña pidió "agregarle igual más color" — antes los 3
   números eran círculos negros iguales sobre el mismo gris de la sección,
   sin ningún acento. Ahora cada paso lleva UN color de marca distinto: el
   número en fondo sólido (con su texto de contraste correcto) y la tarjeta
   entera con un tinte suave del mismo color (tokens y ratios documentados
   en kus-base.css, sección :root). */
.kus-paso {
    text-align: center;
    padding: var(--kus-e5) var(--kus-e4);
    border-radius: var(--kus-radio);
}
.kus-paso--rojo  { background: var(--kus-rojo-tarjeta); }
.kus-paso--cian  { background: var(--kus-cian-tarjeta); }
.kus-paso--beige { background: var(--kus-beige-tarjeta); }

.kus-paso__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--kus-e4);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
}
/* Rojo/blanco 5.49 · negro/cian 7.58 · negro/beige 8.50 — medidos, los tres
   pasan de sobra el mínimo de texto normal (4.5). */
.kus-paso--rojo  .kus-paso__numero { background: var(--kus-rojo);  color: var(--kus-blanco); }
.kus-paso--cian  .kus-paso__numero { background: var(--kus-cian);  color: var(--kus-negro); }
.kus-paso--beige .kus-paso__numero { background: var(--kus-beige); color: var(--kus-negro); }

.kus-paso__titulo { font-weight: 700; text-transform: uppercase; margin-bottom: var(--kus-e2); }
.kus-paso__texto { font-size: 0.88rem; color: var(--kus-texto-apoyo); }

/* --------------------------------------------------------------------------
   CONCURSO — 6 participantes reales (Ottis es la mascota DEL MES, no
   compite). Sin mecanismo de "ver más": con 6 tarjetas entran cómodas (3
   columnas en escritorio, 2 en móvil) y no hace falta esconder ninguna.
   -------------------------------------------------------------------------- */
.kus-concurso { padding-block: var(--kus-e9); }
.kus-concurso__regla {
    font-size: 0.85rem;
    color: var(--kus-texto-apoyo);
    margin-bottom: var(--kus-e6);
    padding-bottom: var(--kus-e5);
    border-bottom: 1px solid var(--kus-linea);
}
.kus-concurso__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kus-e5);
}
@media (min-width: 768px) {
    .kus-concurso__lista { grid-template-columns: repeat(3, 1fr); }
}

.kus-mascota { border: 1px solid var(--kus-linea); border-radius: var(--kus-radio); overflow: hidden; }
.kus-mascota__figura { aspect-ratio: 1 / 1; background: var(--kus-fondo-foto); }
.kus-mascota__figura img { width: 100%; height: 100%; object-fit: cover; }
.kus-mascota__cuerpo { padding: var(--kus-e3); text-align: center; }
.kus-mascota__nombre { font-weight: 700; margin-bottom: var(--kus-e2); font-size: 0.9rem; }
.kus-mascota__votos { display: block; font-size: 0.78rem; color: var(--kus-texto-apoyo); margin-bottom: var(--kus-e3); }
/* ⚠ 2026-09-26: "botones... que todos sean siempre con los colores [de la
   marca]" — VOTAR era negro (ni un color de marca de los seis). Ahora es
   ROJO con texto BLANCO (5.49, medido) — el mismo par que ya usa el botón
   principal en el resto del sitio, así que "votar" se lee como la acción
   primaria que es. El hover pasa a NEGRO (17.40 con blanco), un estado
   claramente distinto sin salirse de la paleta. Deshabilitado (después de
   votar) NO se griseaba con opacity — mismo criterio que .kus-btn (ver
   kus-base.css): se mantiene ROJO sólido, sin opacity, para que "ya
   votaste" siga leyéndose de marca y no como un control roto. */
.kus-mascota__votar {
    width: 100%;
    min-height: 44px;
    border-radius: var(--kus-radio);
    background: var(--kus-rojo);
    color: var(--kus-blanco);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.kus-mascota__votar:hover:not(:disabled) { background: var(--kus-negro); }
.kus-mascota__votar:disabled {
    background: var(--kus-rojo);
    color: var(--kus-blanco);
    cursor: not-allowed;
}
.kus-mascota__etiqueta-prueba {
    display: inline-block;
    margin-top: var(--kus-e2);
    font-size: 0.68rem;
    color: var(--kus-texto-apoyo);
}

/* --------------------------------------------------------------------------
   FRANJA INFORMATIVA — sólo imagen(es), uso=info de portadas.csv.

   ⚠ CORREGIDO 2026-09-26 — antes iba a SANGRE (ancho completo de la
   ventana, sin .kus-contenedor) y quedaba enorme. Ahora vive DENTRO del
   contenedor, del tamaño del carrusel, con su mismo radio.

   ⚠ REESCRITO 2026-09-28, pedido de la dueña: "juntas en web no se notan
   algunos detalles, se ve muy pequeña la letra". Antes era una grilla
   auto-fit que ponía las 2 imágenes lado a lado (~550px cada una) en
   escritorio. Ahora es una PILA VERTICAL, cada imagen al ancho COMPLETO
   del contenedor, en todos los anchos (como el carrusel) — sin `auto-fit`,
   sin `:has()`, y sin depender de cuántas imágenes haya: con 1 o con 2 el
   resultado es el mismo (una columna). El `sizes` de cada <img>, en
   index.php, ya pide el ancho real del contenedor y no un techo de 550px.
   -------------------------------------------------------------------------- */
.kus-info { padding-block: var(--kus-e7); }
.kus-info__grilla {
    display: flex;
    flex-direction: column;
    gap: var(--kus-e7);
}
.kus-info__imagen {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--kus-radio);
}

/* --------------------------------------------------------------------------
   VENTANA POP — mismo patrón que lib/_aviso-drop.php de Kokura: arranca
   [hidden] y sólo el JS la muestra. UNA SOLA VEZ POR VISITANTE (localStorage,
   kus-popup.js) — al revés de cómo quedó el aviso de Kokura desde el
   2026-09-23, que ahora vuelve a salir en cada carga.
   -------------------------------------------------------------------------- */
.kus-popup-fondo {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(26, 26, 26, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.kus-popup-fondo.kus-popup--visible { opacity: 1; }

.kus-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    width: min(92vw, 420px);
    max-height: 88vh;
    overflow-y: auto;
    z-index: 401;
    background: var(--kus-blanco);
    border-radius: var(--kus-radio);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.kus-popup.kus-popup--visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}
.kus-popup__cerrar {
    position: absolute;
    top: var(--kus-e3);
    right: var(--kus-e3);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--kus-negro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kus-popup__cerrar:hover { background: var(--kus-blanco); }
.kus-popup__cerrar svg { width: 18px; height: 18px; }
.kus-popup__imagen { width: 100%; height: auto; display: block; }
.kus-popup__cuerpo { padding: var(--kus-e5); text-align: center; }
.kus-popup__titulo {
    font-family: var(--kus-fuente-display);
    font-weight: 400;
    font-size: 1.5rem;
    margin-bottom: var(--kus-e2);
}
.kus-popup__texto { font-size: 0.9rem; color: var(--kus-texto-apoyo); margin-bottom: var(--kus-e4); }

/* --------------------------------------------------------------------------
   PREGUNTAS — <details>/<summary> nativos, funcionan sin JS.
   -------------------------------------------------------------------------- */
.kus-preguntas { background: var(--kus-fondo-foto); padding-block: var(--kus-e9); }
.kus-preguntas__lista { display: flex; flex-direction: column; gap: var(--kus-e3); max-width: var(--kus-ancho-angosto); }
.kus-pregunta {
    background: var(--kus-fondo);
    border: 1px solid var(--kus-linea-fuerte);
    border-radius: var(--kus-radio);
    padding: var(--kus-e3) var(--kus-e4);
}
.kus-pregunta__resumen {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kus-e3);
    min-height: 44px;
}
.kus-pregunta__resumen::-webkit-details-marker { display: none; }
.kus-pregunta__resumen::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}
.kus-pregunta[open] .kus-pregunta__resumen::after { content: '−'; }
.kus-pregunta__cuerpo { padding-top: var(--kus-e3); color: var(--kus-texto-apoyo); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   QUIÉNES SOMOS — 2026-09-28. Fondo por defecto (blanco, igual que .kus-info
   antes que ella): la franja gris ya la lleva Preguntas, justo después, y
   dos fondos grises seguidos aplastarían la alternancia del resto del sitio.
   Texto negro sobre blanco: 17.40, el mismo par que ya usa el resto del
   cuerpo del sitio (medido en la franja de prototipo, arriba).
   -------------------------------------------------------------------------- */
.kus-quienes { padding-block: var(--kus-e9); }
.kus-quienes p { color: var(--kus-texto); }
/* `ul + p`: el párrafo que sigue a una lista («Miramos hacia el futuro…» y
   el cierre) quedaba pegado al último punto — visto en captura, no en el banco. */
.kus-quienes p + p,
.kus-quienes ul + p,
.kus-quienes h3 { margin-top: var(--kus-e6); }
.kus-quienes__subtitulo {
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--kus-e3);
}
.kus-quienes__lista {
    display: flex;
    flex-direction: column;
    gap: var(--kus-e3);
    margin: var(--kus-e3) 0 0;
}
.kus-quienes__lista li { position: relative; padding-left: var(--kus-e5); }
.kus-quienes__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kus-cian);
}
.kus-quienes__lista strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   PIE — negro, logo CIAN (logo-1) y el lema de la marca.
   -------------------------------------------------------------------------- */
.kus-inverso { background: var(--kus-negro); color: var(--kus-texto-inv); }
.kus-pie {
    padding-block: var(--kus-e7);
}
.kus-pie__logo { height: 40px; width: auto; margin-bottom: var(--kus-e3); }
/* Cian sobre negro: 7.58 — pasa de sobra el mínimo de texto normal (4.5). */
.kus-pie__lema {
    font-family: var(--kus-fuente-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--kus-cian);
    margin-bottom: var(--kus-e4);
}
/* Enlace saliente, sólo un <a href> (CLAUDE.md de Kokura §1.3: nada de feed
   embebido ni píxel). Cian sobre negro: 7.58, mismo par ya medido en
   .kus-pie__lema. Subrayado permanente (no sólo al :hover) para que se note
   que es un enlace, no sólo texto de marca. */
.kus-pie__redes {
    margin-top: var(--kus-e4);
}
.kus-pie__redes a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--kus-cian);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   MOVIMIENTO — prefers-reduced-motion se cubre en kus-base.css (transiciones
   y animaciones globales) y en kus-carrusel.js (autoplay: no arranca el
   temporizador si el visitante lo pidió; los controles manuales siguen
   funcionando igual).
   -------------------------------------------------------------------------- */