/* ==========================================================================
   KOKURA — secciones y componentes
   Depende de kk-base.css (tokens, botones, contenedor).

   TRES ZONAS Y NADA MÁS (ver el bloque de tokens en kk-base.css):
     a) HERO    — el degradado rosa del cliente, entero. Texto negro.
     b) CUERPO  — blanco. El producto manda.
     c) CIERRE  — un bloque negro continuo: la marca, el CTA y el pie.

   Ninguna sección del cuerpo declara `background`. Es a propósito: es lo que
   evita volver al muestrario de cinco fondos, y además evita el choque de
   reglas que ya dejó el panel del carrito visible una vez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.kk-cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--kk-linea);
}
.kk-cabecera__fila {
    display: flex;
    align-items: center;
    gap: var(--kk-e5);
    min-height: var(--kk-cabecera-alto);
}

.kk-marca { flex: none; display: flex; align-items: center; }
.kk-marca img { width: auto; height: 34px; }
.kk-marca:hover { text-decoration: none; }

.kk-nav { margin-left: auto; }
.kk-nav__lista { display: flex; gap: var(--kk-e6); }
.kk-nav__lista a {
    display: inline-block;
    padding: var(--kk-e2) 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* El hover subraya en vez de cambiar de color: el rosa sobre blanco da 2.57 y
   no se lee. Un hover que baja el contraste castiga justo al que está
   apuntando el elemento. */
.kk-nav__lista a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.kk-boton-carrito {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--kk-e2);
    min-height: 44px;
    padding: var(--kk-e2) var(--kk-e4);
    border-radius: var(--kk-radio);
    box-shadow: inset 0 0 0 2px var(--kk-negro);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kk-boton-carrito:hover { background: var(--kk-negro); color: var(--kk-blanco); }
.kk-boton-carrito svg { width: 19px; height: 19px; flex: none; }

/* Acá el rosa es RELLENO con texto negro encima (7.88), que es su uso bueno. */
.kk-boton-carrito__cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--kk-radio-pill);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);   /* blanco sobre ciruela: 9.29 */
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}
.kk-boton-carrito:hover .kk-boton-carrito__cuenta { background: var(--kk-ciruela); }

.kk-hamburguesa {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.kk-hamburguesa__barra {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--kk-negro);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.kk-nav-abierto .kk-hamburguesa__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kk-nav-abierto .kk-hamburguesa__barra:nth-child(2) { opacity: 0; }
.kk-nav-abierto .kk-hamburguesa__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   ZONA A — HERO
   El degradado del cliente, entero y sin adornos encima. Texto negro: es el
   único color que aguanta todo el recorrido (peor punto 7.94, en el arranque).
   -------------------------------------------------------------------------- */
.kk-hero {
    background: var(--kk-grad-hero);
    color: var(--kk-texto-inv);          /* blanco: 9.29 arriba, 5.5 abajo */
    padding: var(--kk-e9) 0 var(--kk-e9);
    text-align: center;
}

/* Los botones del hero van invertidos, como en el bloque negro del cierre.
   El de línea lleva el borde a 0.7 de opacidad y no a 0.45: sobre el morado
   más claro del rango, un borde muy translúcido es lo primero que se pierde
   — se vio en la comparación antes de aplicar esto. */
.kk-hero .kk-btn--principal { background: var(--kk-blanco); color: var(--kk-negro); }
.kk-hero .kk-btn--principal:hover { background: var(--kk-rosa); }
.kk-hero .kk-btn--linea {
    color: var(--kk-blanco);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.kk-hero .kk-btn--linea:hover { background: var(--kk-blanco); color: var(--kk-negro); }

/* LA FRANJA DE FUNDIDO — y por qué es un elemento aparte.
   El morado tiene que llegar al blanco del cuerpo sin dejar un borde, pero si
   el aclarado ocurre DENTRO del área de contenido, se come el texto: el fondo
   sube de luminancia justo donde están los botones y el borde fino del
   secundario desaparece. Pasó en la primera prueba y se vio en la captura.
   Poniendo el fundido en su propia franja, después del contenido y con altura
   fija, el texto no puede caer ahí — en ningún viewport, con cualquier largo
   de texto. Es una garantía estructural, no un ajuste que hay que revisar. */
.kk-hero__fundido {
    height: 200px;
    background: var(--kk-grad-hero-fin);
}
.kk-hero__logo {
    width: min(620px, 88vw);
    margin: 0 auto var(--kk-e6);
}
.kk-hero__titulo { margin: 0; }

.kk-hero__lema {
    margin: 0 0 var(--kk-e5);
    font-size: clamp(0.9rem, 2.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
}
.kk-hero__texto {
    max-width: 44ch;
    margin: 0 auto var(--kk-e7);
    font-size: 1.05rem;
}
.kk-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kk-e3);
}

/* --------------------------------------------------------------------------
   ZONA B — CUERPO BLANCO
   -------------------------------------------------------------------------- */
.kk-seccion { padding: var(--kk-e10) 0; }
.kk-seccion--ajustada { padding: var(--kk-e9) 0; }

/* Separador fino entre secciones del cuerpo. Es todo lo que hace falta: sin
   fondos de colores, una línea de 1px ya ordena la página. */
.kk-seccion + .kk-seccion { border-top: 1px solid var(--kk-linea); }

.kk-seccion__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kk-e5);
    margin-bottom: var(--kk-e8);
}
.kk-seccion__cabecera > div { max-width: 60ch; }

/* --------------------------------------------------------------------------
   VITRINA DE PRODUCTOS
   Ficha limpia: foto grande sobre gris claro, sin borde, sin sombra de color.
   Es lo que hace el mercado y es lo que deja que la ropa se vea.
   -------------------------------------------------------------------------- */
.kk-aviso-nojs {
    margin-bottom: var(--kk-e7);
    padding: var(--kk-e4) var(--kk-e5);
    border-left: 3px solid var(--kk-negro);
    background: var(--kk-gris);
}

.kk-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kk-e7) var(--kk-e5);
}

.kk-tarjeta { display: flex; flex-direction: column; }

/* SIN CAJA GRIS DETRAS DE LA PRENDA (2026-09-07).

   Las fotos de la clienta son RECORTES: PNG con fondo transparente — medido,
   66%% de los pixeles de una camisa son transparentes, y 6 de 8 fotos de una
   muestra son asi. El `background` de esta caja se veia A TRAVES de la
   prenda, asi que la grilla eran 150 rectangulos grises identicos con algo
   chiquito flotando adentro. Ese gris era NUESTRO, no de sus fotos.

   Sacandolo, el recorte se apoya directo sobre el blanco de la pagina y la
   grilla deja de leerse como una cuadricula de cajas. Es el cambio que mas
   cambia la sensacion y no toca la paleta ni la regla de las tres zonas.

   EL PLACEHOLDER SI CONSERVA EL GRIS: ahi no hay foto que mostrar y la caja
   es justamente lo que comunica «falta algo aca». */
.kk-tarjeta__figura {
    position: relative;
    margin-bottom: var(--kk-e4);
    overflow: hidden;
}

/* PLACEHOLDER 4:5. Todas las fotos en 4:5 — una grilla con proporciones
   distintas se ve rota aunque cada foto sea buena. */
.kk-tarjeta__placeholder,
.kk-tarjeta__figura img {
    aspect-ratio: 4 / 5;
    width: 100%;
    object-fit: cover;
}
.kk-tarjeta__placeholder {
    /* El gris se quedo ACA y no en la figura (2026-09-07): donde no hay foto,
       la caja es lo que dice «falta algo». Donde si la hay, estorbaba. */
    background: var(--kk-fondo-foto);
    display: grid;
    place-content: center;
    gap: var(--kk-e2);
    padding: var(--kk-e5);
    text-align: center;
}
.kk-tarjeta__placeholder span:first-child {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.kk-tarjeta__pendiente {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}
.kk-tarjeta__figura img { transition: transform 0.4s ease; }
.kk-tarjeta:hover .kk-tarjeta__figura img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   LUPA SOBRE LA FOTO — 2026-09-08, pedido del usuario: «que la imagen haga
   zoom, de manera bonita, discreta y funcional».

   Al poner el mouse sobre la foto se agranda DENTRO de su propio marco y el
   punto que se agranda sigue al cursor. El marco ya tiene `overflow: hidden`,
   asi que la foto no se derrama sobre la tarjeta ni empuja nada: el layout no
   se mueve un pixel.

   SOLO CON `pointer: fine`. En una pantalla tactil no hay «pasar por encima»:
   el primer toque haria zoom y el segundo avanzaria la foto, que es la clase
   de gesto que nadie descubre y todos sufren. Con dedo, el toque sigue pasando
   fotos y punto.

   EL CLIC SIGUE AVANZANDO. Era la condicion: si el clic hiciera zoom, se
   pisaria con la galeria que se armo ayer.

   `transform-origin` sale de dos variables que escribe el JS con la posicion
   del cursor. Se hace con variables y no tocando el `style.transform` para que
   el CSS siga siendo el dueno de CUANTO se agranda: el JS solo dice DONDE.
   -------------------------------------------------------------------------- */
@media (pointer: fine) {
    .kk-tarjeta__figura { --kk-zx: 50%; --kk-zy: 50%; }

    /* Especificidad 0,4,0 — le gana a la regla de arriba (0,3,1) sin
       !important. Si alguna vez deja de ganarle, el sintoma es que la lupa
       «no hace nada»: la foto se queda en el 1.03 del hover de la tarjeta. */
    /* EL ORIGEN VA FUERA DEL `:hover`, y no es un detalle de orden: sin
       zoom aplicado `transform-origin` no cambia nada visible, pero SI se
       puede medir. Adentro del `:hover` no habria forma de probar que el
       punto sigue al cursor —`:hover` no se puede simular desde un test— y
       la mitad mas facil de romper quedaria sin red. */
    .kk-tarjeta__figura .kk-tarjeta__foto {
        transform-origin: var(--kk-zx) var(--kk-zy);
    }

    /* CUANTO SE AGRANDA: 1.35 — LO BAJO LA DUENA EL 2026-09-09.
       Estaba en 2.1 desde que se hizo la lupa (a7e722d) y ella lo pidio mas
       chico: «ahora me sale mucho zoom cuando paso el click por encima, antes
       me gustaba mas como estaba, que era un mini zoom». El «antes» es real y
       esta en el historial: hasta ese commit lo unico que habia era el
       scale(1.03) del hover de la tarjeta, unas lineas mas arriba.
       SE ELIGIO MIRANDO, NO CALCULANDO: con 2.1 la prenda se sale del marco y
       lo que queda en pantalla es tela — se pierde justo lo que la foto
       muestra. Con 1.35 el estampado se lee y la prenda sigue reconocible.
       No se volvio al 1.03 porque eso es quitar la lupa, y lo que ella pidio
       fue menos zoom, no ninguno. */
    .kk-tarjeta:hover .kk-tarjeta__figura:hover .kk-tarjeta__foto {
        transform: scale(1.35);
    }

    /* El cursor lo dice antes de que pase nada. */
    .kk-tarjeta__figura:has(.kk-tarjeta__foto) { cursor: zoom-in; }
}

/* Rosa de relleno con texto negro: 7.88. Es el uso correcto del color. */
.kk-etiqueta {
    position: absolute;
    top: var(--kk-e3);
    left: var(--kk-e3);
    padding: var(--kk-e1) var(--kk-e3);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);   /* blanco sobre ciruela: 9.29 */
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kk-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; }

.kk-tarjeta__categoria {
    margin: 0 0 var(--kk-e1);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}
.kk-tarjeta__nombre {
    font-size: 0.98rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.kk-tarjeta__descripcion {
    margin: var(--kk-e2) 0 0;
    font-size: 0.86rem;
    color: var(--kk-texto-apoyo);
}
/* `margin-top: auto` empuja el precio —y con él la talla y los botones— al pie
   de la tarjeta. Sin esto, las descripciones de largo distinto dejan cada
   precio y cada botón a una altura diferente, y la grilla se ve desordenada
   aunque cada ficha esté bien por separado. Es lo primero que se nota. */
.kk-precio {
    margin: var(--kk-e4) 0 0;
    margin-top: auto;
    padding-top: var(--kk-e4);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Precio que todavía no entregó la clienta. Se ve DISTINTO de un precio real a
   propósito: mismo lugar y mismo peso visual daría a entender que el dato está
   y que dice otra cosa. Va en el gris de apoyo y sin negrita — se lee, pero no
   compite con los precios de las fichas de al lado. */
.kk-precio--pendiente {
    font-weight: 400;
    color: var(--kk-texto-apoyo);
}

/* DISPONIBILIDAD — cómo y cuándo llega. Es de lo que más pesa al decidir una
   compra y hasta el 2026-08-10 el sitio no lo decía en ninguna parte.

   Son etiquetas de relleno, no texto de párrafo: el rosa sólo se lee sobre
   negro (§2.2), así que acá el color va de fondo con el texto en negro (7.88) o
   el bloque entero en gris con texto oscuro. Ninguna combinación pone rosa
   sobre claro, que es donde no llega ni a 2.6. */
.kk-disponibilidad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-e2);
    margin: var(--kk-e2) 0 0;
}
.kk-entrega,
.kk-tirada {
    display: inline-block;
    padding: 3px var(--kk-e2);
    border-radius: var(--kk-radio);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* En stock: rosa de marca con texto negro — 7.88. Es el único fondo donde el
   rosa aguanta texto, y acá gana un uso que sí merece el acento: es la buena
   noticia de la ficha. */
.kk-entrega--inmediata {
    background: var(--kk-ciruela);
    color: var(--kk-blanco);   /* blanco sobre ciruela: 9.29 */
}

/* Bajo confección: neutro a propósito. No es una mala noticia, pero tampoco es
   lo que hay que celebrar — si compite con el «en stock», el acento deja de
   significar algo. Gris claro con texto de apoyo: 6.07. */
.kk-entrega--confeccion {
    background: var(--kk-gris);
    color: var(--kk-texto-apoyo);
}

/* Tirada: contorno, sin relleno. Es un dato, no un estado. */
.kk-tirada {
    border: 1px solid var(--kk-linea-control);
    color: var(--kk-texto-apoyo);
}

/* STOCK POR TALLA — el hecho fechado («Talla M — 1 disponible al 2 de
   setiembre»), distinto del badge de arriba: ese dice el ESTADO de la talla
   elegida, esto es el detalle completo de lo que hay, siempre visible y
   siempre desde PHP (§2.5 punto 5 — nada de contador que suene a urgencia). */
.kk-stock-detalle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--kk-e2) 0 0;
    font-size: 0.76rem;
    color: var(--kk-texto-apoyo);
}

/* TALLAS — grupo de radios pintado como chips (§2.5 punto 6, ROADMAP Fase 1).
   Era un <select>. Cambió porque con el eje «corte» encima serían dos
   desplegables por tarjeta, y porque el desplegable esconde justo el dato que
   decide la compra: si TU talla está.

   Es un <fieldset> y hay que desarmarlo: trae borde, padding y margen propios
   del navegador, y en algunos motores un `display` que ignora flex. */
.kk-tarjeta__talla {
    border: 0;
    padding: 0;
    margin: var(--kk-e4) 0 0;
    min-width: 0;          /* el fieldset trae min-width:min-content y desborda la tarjeta */
}
.kk-tarjeta__talla legend {
    padding: 0;
    margin-bottom: var(--kk-e2);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}

.kk-tallas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-e2);
}

/* El radio se oculta A LA VISTA pero sigue existiendo, enfocable y en el árbol
   de accesibilidad. `display:none` lo sacaría del tabulador y de las flechas,
   que son exactamente lo que se gana usando radios. */
.kk-talla__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kk-talla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;      /* área táctil mínima (§2.5) — el chip es chico, el blanco no */
    padding: 0 var(--kk-e3);
    border: 1px solid var(--kk-linea-control);   /* 3.57 sobre blanco — §2.2 */
    border-radius: var(--kk-radio);
    background: var(--kk-blanco);
    color: var(--kk-texto);
    font-size: 0.86rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;     /* dos toques rápidos seleccionaban la letra en móvil */
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.kk-talla:hover { border-color: var(--kk-negro); }

/* ELEGIDA — negro pleno con texto blanco: 20.24, el contraste más alto de la
   paleta. Se descartó el rosa a propósito: da 7.88 y cumple, pero el botón
   «Agregar» de la misma tarjeta ya es rosa y dos rosas pegados compiten. El
   rosa rinde apareciendo poco (§2.2). */
.kk-talla__radio:checked + .kk-talla {
    background: var(--kk-negro);
    border-color: var(--kk-negro);
    color: var(--kk-texto-inv);
}

/* AGOTADA — se muestra, no se esconde (§2.5 punto 6). Tachada y apagada, pero
   legible: el gris de apoyo sobre blanco da 6.98, así que sigue siendo texto de
   verdad y no un fantasma. La palabra «agotada» viaja en .kk-solo-lectores. */
.kk-talla__radio:disabled + .kk-talla {
    color: var(--kk-texto-apoyo);
    background: var(--kk-gris);
    border-color: var(--kk-linea);
    text-decoration: line-through;
    cursor: not-allowed;
}
.kk-talla__radio:disabled + .kk-talla:hover { border-color: var(--kk-linea); }

/* El foco vive en el input, que es invisible — hay que reenviarlo al chip o el
   teclado navega a ciegas. Mismo grosor y color que el :focus-visible global. */
.kk-talla__radio:focus-visible + .kk-talla {
    outline: 3px solid var(--kk-negro);
    outline-offset: 2px;
}

.kk-tarjeta__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--kk-e2);
    margin-top: var(--kk-e4);
}
.kk-tarjeta__acciones .kk-btn {
    width: 100%;
    min-height: 46px;
    padding-inline: var(--kk-e4);
    font-size: 0.74rem;
}

.kk-nota-tienda {
    margin-top: var(--kk-e8);
    padding-top: var(--kk-e5);
    border-top: 1px solid var(--kk-linea);
    text-align: center;
    color: var(--kk-texto-apoyo);
}

/* Enlace «Ver toda la línea» al pie de una sección de línea de la home. */
.kk-seccion__ver-todo {
    display: inline-block;
    margin-top: var(--kk-e7);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   GUÍA DE LLENADO — Kokura (2026-09-03)
   Cuando una sección de la home no tiene datos, en vez de desaparecer explica
   qué columna llenar en la hoja. Cuelga de KK_CONTENIDO_APROBADO (§2.9): con
   el contenido aprobado, la sección entera deja de pintarse y esto no existe.

   Tiene que leerse como una nota de trabajo, no como un error: mismo patrón
   que .kk-nota-legal (filete + fondo gris), pero con su propio rótulo para
   que no se confunda con contenido real de la tienda. */
.kk-guia-llenado {
    max-width: 62ch;
    margin: 0 auto;
    padding: var(--kk-e5);
    border-left: 3px solid var(--kk-linea-control);
    background: var(--kk-gris);
}
.kk-guia-llenado__titulo {
    margin: 0 0 var(--kk-e2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}
.kk-guia-llenado p:last-child { margin: 0; }
.kk-guia-llenado strong { color: var(--kk-texto); }

/* --------------------------------------------------------------------------
   GRUPOS — colecciones y líneas, en la home
   Es la tarjeta grande de la sección «Colecciones»: foto y nombre debajo, sin
   precio ni talla — no es la ficha de producto. Referencia de la clienta: una
   fila de imágenes con una etiqueta debajo de cada una.
   -------------------------------------------------------------------------- */
.kk-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--kk-e6);
}
.kk-grupo-tarjeta a:hover { text-decoration: none; }
.kk-grupo-tarjeta__figura {
    background: var(--kk-fondo-foto);
    overflow: hidden;
}
.kk-grupo-tarjeta__figura img,
.kk-grupo-tarjeta__figura .kk-tarjeta__placeholder {
    aspect-ratio: 4 / 5;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.kk-grupo-tarjeta:hover .kk-grupo-tarjeta__figura img { transform: scale(1.03); }
.kk-grupo-tarjeta__nombre {
    margin: var(--kk-e3) 0 0;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   CÓMO PEDIR — sobre blanco, con el número en rosa de relleno
   -------------------------------------------------------------------------- */
.kk-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--kk-e7);
}
.kk-paso__numero {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--kk-e4);
    border-radius: var(--kk-radio-pill);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);       /* blanco sobre ciruela: 9.29 */
    font-size: 1rem;
    font-weight: 700;
}
.kk-paso__titulo {
    margin-bottom: var(--kk-e2);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.kk-paso p { margin: 0; color: var(--kk-texto-apoyo); }

.kk-nota-legal {
    max-width: 74ch;
    margin: var(--kk-e8) auto 0;
    padding: var(--kk-e4) var(--kk-e5);
    border-left: 3px solid var(--kk-rosa);
    background: var(--kk-gris);
    font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   FAQ — sobre blanco
   Usa <button aria-expanded>, nunca un <div> con click: así abre con Enter y
   con Espacio sin escribir una línea de JS para eso.
   -------------------------------------------------------------------------- */
.kk-faq__item { border-bottom: 1px solid var(--kk-linea); }
.kk-faq__item:first-child { border-top: 1px solid var(--kk-linea); }
.kk-faq__encabezado { margin: 0; font-size: inherit; }
.kk-faq__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-e4);
    width: 100%;
    min-height: 64px;
    padding: var(--kk-e4) 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
}
.kk-faq__boton:hover { text-decoration: underline; text-underline-offset: 4px; }

.kk-faq__cruz { position: relative; flex: none; width: 16px; height: 16px; }
.kk-faq__cruz::before,
.kk-faq__cruz::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--kk-negro);
    transition: transform 0.2s ease;
}
.kk-faq__cruz::after { transform: rotate(90deg); }
.kk-faq__boton[aria-expanded="true"] .kk-faq__cruz::after { transform: rotate(0deg); }

/* Cerrado por CSS colgado de .kk-js: sin JavaScript el panel queda visible y
   el contenido nunca desaparece por culpa del script. */
.kk-faq__panel { padding-bottom: var(--kk-e5); max-width: 62ch; color: var(--kk-texto-apoyo); }
.kk-js .kk-faq__panel { display: none; }
.kk-js .kk-faq__panel.kk-abierto { display: block; }

/* --------------------------------------------------------------------------
   ZONA C — EL CIERRE NEGRO
   La marca, el CTA y el pie son UN solo bloque negro continuo. No hay bordes
   entre ellos: se lee como una sola pieza al final del recorrido.
   -------------------------------------------------------------------------- */
.kk-inverso {
    background: var(--kk-negro);
    color: var(--kk-texto-inv);
}
.kk-inverso .kk-sobretitulo { color: var(--kk-lila); }   /* lila sobre negro: 14.82 */
/* Los <li> van acá explicitamente: este selector alcanzaba solo a <p>, asi que
   los tres puntos de la marca heredaban el blanco puro de .kk-inverso y salian
   MAS brillantes que el parrafo que los precede. Los dos valores pasan de sobra
   (20.24 y 9.70 sobre negro), asi que no era un problema de contraste sino de
   consistencia: en la zona negra el cuerpo va en gris de apoyo y el blanco se
   reserva para lo destacado. Lo cazo QA el 2026-09-02 midiendo el color
   computado, no leyendo la hoja. */
.kk-inverso .kk-bajada,
.kk-inverso .kk-marca__puntos li,
.kk-inverso p { color: var(--kk-texto-inv-apoyo); }

/* `padding-block` y NO el atajo `padding`: este elemento también lleva
   .kk-contenedor, que define `padding: 0 var(--kk-e6)` para los costados. Un
   `padding: X 0 Y` acá lo pisa entero y el texto queda pegado al borde de la
   pantalla — que es exactamente lo que pasaba. El atajo no respeta lo que ya
   había, lo reemplaza. */
.kk-marca__caja {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kk-e7);
    align-items: center;
    padding-block: var(--kk-e10) var(--kk-e8);
}
.kk-marca__texto .kk-titulo { margin-bottom: var(--kk-e5); }
/* El reset global (kk-base.css) quita margin y list-style de ul/li: sin esto
   los tres puntos fuertes quedan pegados uno contra otro, sin separación. */
.kk-marca__puntos { display: grid; gap: var(--kk-e4); margin: var(--kk-e5) 0; }
.kk-marca__firma {
    margin-top: var(--kk-e5);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-transform: uppercase;
    color: var(--kk-lila) !important;   /* lila sobre negro: 14.82 */
}
.kk-marca__figura img { width: min(400px, 78%); margin: 0 auto; }

.kk-cta {
    padding: var(--kk-e8) 0 var(--kk-e10);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kk-cta p { max-width: 44ch; margin: var(--kk-e4) auto var(--kk-e7); }

/* --------------------------------------------------------------------------
   PIE — sigue dentro del bloque negro
   -------------------------------------------------------------------------- */
.kk-pie {
    padding: var(--kk-e8) 0 var(--kk-e5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kk-pie__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-e7);
    justify-content: space-between;
    align-items: flex-start;
}
.kk-pie__logo { height: 40px; width: auto; }
.kk-pie__lema {
    margin-top: var(--kk-e3);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--kk-lila) !important;   /* lila sobre negro: 14.82 */
}
.kk-pie__datos { font-size: 0.9rem; }
.kk-pie__datos a { color: var(--kk-texto-inv); text-decoration: underline; text-underline-offset: 3px; }

.kk-pie__legal {
    margin-top: var(--kk-e7);
    padding-top: var(--kk-e4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   PANEL DEL CARRITO — sobre claro, como el resto del cuerpo
   -------------------------------------------------------------------------- */
.kk-carrito-fondo {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(7, 6, 6, 0.45);
}

.kk-carrito {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--kk-blanco);
    box-shadow: -20px 0 60px -30px rgba(7, 6, 6, 0.5);
}

.kk-carrito__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-e4);
    padding: var(--kk-e5);
    border-bottom: 1px solid var(--kk-linea);
}
.kk-carrito__titulo {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* El botón de cerrar va POR ENCIMA del contenido del panel. Un panel que pinta
   sobre su propio botón de cerrar es un bloqueante real y no se ve leyendo el
   CSS — se comprueba con elementFromPoint (skill verificar-de-verdad §6). */
.kk-carrito__cerrar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--kk-radio);
}
.kk-carrito__cerrar:hover { background: var(--kk-gris); }
.kk-carrito__cerrar svg { width: 20px; height: 20px; }

.kk-carrito__cuerpo { flex: 1; overflow-y: auto; padding: 0 var(--kk-e5); }

.kk-carrito__vacio {
    display: grid;
    gap: var(--kk-e2);
    padding: var(--kk-e9) var(--kk-e4);
    text-align: center;
    color: var(--kk-texto-apoyo);
}

.kk-linea {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--kk-e2) var(--kk-e4);
    padding: var(--kk-e5) 0;
    border-bottom: 1px solid var(--kk-linea);
}
.kk-linea:last-child { border-bottom: 0; }
.kk-linea__nombre { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }
.kk-linea__talla {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}
.kk-linea__precio { font-weight: 700; white-space: nowrap; }

.kk-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--kk-linea-control);   /* 3.57 sobre blanco — §2.2 */
    border-radius: var(--kk-radio);
}
.kk-cantidad button {
    display: grid;
    place-items: center;
    width: 44px;    /* área táctil mínima (§2.5) — antes 38px, medido por QA el 2026-09-02 */
    height: 44px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.kk-cantidad button:hover { background: var(--kk-gris); }
.kk-cantidad__valor { min-width: 28px; text-align: center; font-weight: 700; }

.kk-linea__quitar {
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kk-linea__quitar:hover { color: var(--kk-negro); }

.kk-carrito__pie {
    padding: var(--kk-e5);
    border-top: 1px solid var(--kk-linea);
    background: var(--kk-gris);
}
.kk-carrito__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kk-e4);
    margin-bottom: var(--kk-e2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
}
.kk-carrito__total strong {
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--kk-texto);
    text-transform: none;
}
.kk-carrito__nota {
    margin-bottom: var(--kk-e4);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--kk-texto-apoyo);
}
.kk-carrito__vaciar {
    display: block;
    width: 100%;
    margin-top: var(--kk-e3);
    padding: var(--kk-e2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kk-carrito__vaciar:hover { color: var(--kk-negro); }

.kk-btn.kk-inactivo { pointer-events: none; opacity: 0.35; }

/* --------------------------------------------------------------------------
   AVISO DE «PRÓXIMO DROP»
   Arranca oculto en el HTML (`hidden`) y sólo kk-nav.js lo muestra, con
   ~4s de retardo — sin JS no aparece nunca, a propósito (es un aviso
   promocional, no contenido). Mismo patrón que el panel del carrito: fondo +
   caja, foco atrapado. z-index por encima de la franja: si coinciden, gana
   el aviso.

   REHECHO 2026-09-03 — el primero se veía mal, medido sobre una captura:
     1) el panel se ESTIRABA a casi toda la altura de la ventana, con un
        vacío blanco de ~400px bajo «Ver más». Causa: `inset:0` fija TOP y
        BOTTOM a la vez, y con `height` en `auto` (sin valor propio) el
        cálculo del box model hace que el alto se ESTIRE para llenar ese
        espacio — no es un bug de navegador, es lo que dice la spec cuando
        top/bottom están fijos y no hay un alto que gane. `margin:auto` sólo
        reparte el sobrante cuando el alto YA está resuelto por otra vía
        (fija, `fit-content`, etc.), y acá no lo estaba.
     2) por lo mismo, el panel arrancaba pegado al borde de arriba (offset 0)
        y tapaba la cabecera.
     3) la foto iba a `aspect-ratio: 3/2` (más ancha que alta) en vez del
        4:5 que ya usa toda foto de producto del sitio (CLAUDE.md: mezclar
        proporciones se ve roto).
     4) sin margen contra los bordes ni sombra visible (topaba los bordes,
        así que la sombra no tenía dónde leerse), el panel no se despegaba
        de la página — se veía pegado, no flotando encima.

   EL ARREGLO, en orden:
     - `height: fit-content` es la pieza que faltaba: fuerza al box a medir
       lo que mide su CONTENIDO en vez de estirarse, y ahí sí `margin:auto`
       centra de verdad.
     - `inset` YA NO es `0` parejo: el TOP reserva el alto de la cabecera
       más un respiro (`--kk-cabecera-alto` + `--kk-e4`), así que el panel
       ESTRUCTURALMENTE no puede superponerse a la cabecera —no depende de
       que el contenido "generalmente" quepa antes de llegar ahí—, y los
       otros tres lados reservan el mínimo de `--kk-e4` (16px) pedido.
     - `max-height` topa a 90vh (el pedido) O a lo que quede libre dentro de
       ese `inset` reducido, lo que sea MENOR — así nunca se pasa del hueco
       que la cabecera y los márgenes le dejaron, ni en una ventana baja.
     - `border-radius` + sombra más presente: son las dos señales de "esto
       es una pieza encima del sitio", y no se leían porque antes el panel
       no tenía aire alrededor para mostrarlas.
   -------------------------------------------------------------------------- */
.kk-aviso-drop-fondo {
    position: fixed;
    inset: 0;
    z-index: 170;
    background: rgba(7, 6, 6, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.kk-aviso-drop {
    position: fixed;
    z-index: 171;
    /* top: cabecera + respiro · derecha/abajo/izquierda: el mínimo pedido */
    inset: calc(var(--kk-cabecera-alto) + var(--kk-e4)) var(--kk-e4) var(--kk-e4) var(--kk-e4);
    margin: auto;
    /* `width: auto` (NO un `min(420px, 100%)`): con `inset` fijando los
       cuatro lados, un `width` en porcentaje resuelve contra el viewport
       COMPLETO, no contra el hueco que dejan los insets — medido: a 375px
       de ventana daba un panel de 375px de ancho, pegado a los dos bordes,
       sin el margen de 16px. `width: auto` sí respeta los insets (los
       resta del contenedor), y `max-width` lo tapa en 420px sin repetir
       el mismo error. */
    width: auto;
    max-width: 420px;
    height: fit-content;
    max-height: min(90vh, calc(100vh - var(--kk-cabecera-alto) - 2 * var(--kk-e4)));
    overflow-y: auto;
    border-radius: var(--kk-radio);
    background: var(--kk-blanco);
    box-shadow: 0 24px 70px -16px rgba(7, 6, 6, 0.55);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* La transición de entrada la dispara kk-nav.js agregando esta clase un
   frame después de sacar `hidden` (si no, el navegador se salta la
   animación). Con prefers-reduced-motion la duración de arriba baja a
   ~0 por la regla global de kk-base.css: el aviso sigue apareciendo, sólo
   que sin el movimiento — nunca deja de aparecer, sólo deja de animarse
   (CLAUDE.md §2.5). */
.kk-aviso-drop.kk-aviso-drop--visible { opacity: 1; transform: none; }
.kk-aviso-drop-fondo.kk-aviso-drop--visible { opacity: 1; }

/* Fondo SÓLIDO, no translúcido: este botón se apoya sobre una foto arbitraria
   que manda la clienta, y un fondo semitransparente hereda el contraste de lo
   que tenga detrás — que puede ser cualquier cosa. Sólido garantiza el 20.24
   de negro sobre blanco (medido) sin importar la imagen. */
.kk-aviso-drop__cerrar {
    position: absolute;
    top: var(--kk-e3);
    right: var(--kk-e3);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--kk-radio);
    background: var(--kk-blanco);
}
.kk-aviso-drop__cerrar:hover { background: var(--kk-gris); }
.kk-aviso-drop__cerrar svg { width: 18px; height: 18px; }

/* 4:5 — LA MISMA PROPORCIÓN QUE TODA FOTO DE PRODUCTO DEL SITIO
   (.kk-tarjeta__figura img, kk-secciones.css). No es casualidad: es la
   proporción que ya está medida y aprobada para las fotos que manda la
   clienta, y usar otra acá era la fuente del recorte raro que se veía en
   la captura. `object-fit: cover` para que nunca se deforme, sea cual sea
   el encuadre de la imagen real. */
.kk-aviso-drop__imagen {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--kk-fondo-foto);
}
.kk-aviso-drop__cuerpo { padding: var(--kk-e6); }
.kk-aviso-drop__titulo {
    margin: 0 0 var(--kk-e3);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.kk-aviso-drop__texto { margin: 0 0 var(--kk-e5); color: var(--kk-texto-apoyo); }

/* --------------------------------------------------------------------------
   FRANJA DE MAQUETA
   Desaparece con KK_CONTENIDO_APROBADO = true, junto con el noindex.
   Deliberadamente sobria pero visible: tiene que molestar un poco.
   -------------------------------------------------------------------------- */
.kk-franja {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 160;
    padding: var(--kk-e2) var(--kk-e4);
    background: var(--kk-negro);
    color: var(--kk-blanco);
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: center;
}
.kk-franja strong { color: var(--kk-rosa); }   /* sobre negro: 7.88 */

/* --------------------------------------------------------------------------
   ANIMACIÓN DE APARICIÓN
   El estado base es VISIBLE. El JS agrega .kk-js a <html> y recién ahí se
   oculta para revelar al hacer scroll. Si el script no corre, no se oculta
   nada: un opacity:0 esperando a un observer deja la página en blanco.
   -------------------------------------------------------------------------- */
.kk-js .kk-anima {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.kk-js .kk-anima.kk-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE — breakpoint 768px (CLAUDE.md §2.2)
   Al medir cerca del breakpoint, ojo con los 15px de la barra de scroll:
   Chrome evalúa la media query con el ancho CON barra y maqueta SIN ella.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .kk-marca__caja { grid-template-columns: 1.15fr 1fr; }
    .kk-tarjeta__acciones { flex-direction: row; }
    .kk-tarjeta__acciones .kk-btn { flex: 1; }
}

@media (max-width: 767px) {
    .kk-hamburguesa { display: flex; }

    /* El menú se despliega bajo la cabecera, posicionado respecto al viewport
       para que no tape la propia hamburguesa que lo abre. */
    .kk-nav {
        position: fixed;
        inset: var(--kk-cabecera-alto) 0 auto 0;
        margin-left: 0;
        background: var(--kk-blanco);
        border-bottom: 1px solid var(--kk-linea);
        display: none;
    }
    .kk-nav-abierto .kk-nav { display: block; }
    .kk-nav__lista { flex-direction: column; gap: 0; padding: var(--kk-e2) var(--kk-e5) var(--kk-e5); }
    .kk-nav__lista a { display: block; padding: var(--kk-e4) 0; border-bottom: 1px solid var(--kk-linea); }
    .kk-nav__lista li:last-child a { border-bottom: 0; }

    .kk-boton-carrito { order: 3; }
    .kk-boton-carrito__texto { display: none; }

    .kk-seccion { padding: var(--kk-e9) 0; }
    .kk-hero { padding: var(--kk-e8) 0 var(--kk-e9); }
    .kk-marca__caja { padding: var(--kk-e9) 0 var(--kk-e7); }
    .kk-cta { padding: var(--kk-e7) 0 var(--kk-e9); }
    .kk-seccion__cabecera { margin-bottom: var(--kk-e7); }
    .kk-grilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--kk-e6) var(--kk-e4); }
    /* `padding-inline` por lo mismo que en kk-base.css: esta regla vive al
       final del bloque movil, asi que con el atajo le ganaba el padding
       vertical a TODAS las clases combinadas declaradas mas arriba. */
    .kk-contenedor { padding-inline: var(--kk-e4); }
}

/* --------------------------------------------------------------------------
   PORTADAS DE CAMPAÑA (2026-09-07)
   Dos zonas que pidió la clienta: un carrusel bajo el hero y, antes de
   Preguntas, Madame Whiskey / Regalías / Kurito.

   LA PISTA ES UN SCROLLER, NO UN `transform`. Con `overflow-x` + `scroll-snap`
   el carrusel funciona SIN JavaScript —se arrastra con el dedo, con la rueda o
   con el teclado— y el JS sólo agrega el paso automático y los botones. Con un
   `translateX` sin JS quedarían las tres imágenes apiladas invisibles.

   Ninguna de estas reglas declara `background` en la sección: el cuerpo del
   sitio es blanco y ese es el acuerdo de las TRES ZONAS (CLAUDE.md §2.2).
   -------------------------------------------------------------------------- */
.kk-portadas { padding: var(--kk-e7) 0; }
.kk-portadas__titulo { margin: 0 0 var(--kk-e5); }

.kk-portadas__pista {
    display: flex;
    gap: var(--kk-e4);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Sin JS el scrollbar es la única pista de que hay más a la derecha, así
       que NO se esconde. Con JS aparecen los botones y deja de hacer falta,
       pero tampoco molesta. */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.kk-portadas__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}
.kk-portadas__imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kk-radio);
    background: var(--kk-fondo-foto);
}
.kk-portadas__accion {
    /* «el botón podría estar centrado a abajo» — textual de su hoja. */
    margin: var(--kk-e4) 0 0;
    text-align: center;
}

/* Los controles los INYECTA kk-interfaz.js: sin JS no existen, y por eso no
   pueden quedar como botones muertos. */
.kk-portadas__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-e3);
    margin-top: var(--kk-e4);
}
.kk-portadas__flecha {
    display: grid;
    place-items: center;
    /* 44x44 es el mínimo táctil de §2.5, y acá no se negocia: son los dos
       controles con los que ella pidió «devolver la imagen o pasarla». */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--kk-radio);
    background: var(--kk-blanco);
    /* Borde de CONTROL, no decorativo: 3.57 sobre blanco (§2.2, WCAG 1.4.11).
       Con --kk-linea-fuerte daba 1.64 y el botón era invisible como control. */
    box-shadow: inset 0 0 0 2px var(--kk-linea-control);
    color: var(--kk-negro);
    cursor: pointer;
}
.kk-portadas__flecha:hover { background: var(--kk-gris); }
.kk-portadas__flecha svg { width: 20px; height: 20px; }

.kk-portadas__puntos {
    display: flex;
    gap: var(--kk-e2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.kk-portadas__punto {
    /* El punto VISIBLE mide 10px, pero el botón mide 44x44 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;
}
.kk-portadas__punto::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--kk-linea-control);
}
.kk-portadas__punto[aria-current="true"]::before {
    background: var(--kk-negro);
    box-shadow: inset 0 0 0 2px var(--kk-negro);
}

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

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

/* «Ver más» de una grilla (Colecciones). El botón lo inyecta kk-interfaz.js:
   sin JS no existe, y por eso no puede quedar muerto. */
.kk-ver-mas__caja { margin: var(--kk-e5) 0 0; text-align: center; }

/* Mensaje por prenda que escribe la clienta («Disponible hasta noviembre»).
   Gris de apoyo #5e5760: 6.98 sobre blanco y 6.07 sobre el gris claro de la
   ficha — los dos medidos (§2.2). No lleva color de alerta a propósito: es un
   dato, no una advertencia, y el rojo/rosa de urgencia es justo lo que §2.5
   punto 5 prohíbe. */
.kk-mensaje-prenda {
    margin: var(--kk-e2) 0 0;
    color: var(--kk-texto-apoyo);
    font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   MENÚ: LAS COLECCIONES EN UN DESPLEGABLE (2026-09-07)
   Abre por :hover y por :focus-within — sin JavaScript. El script no toca
   esto: si algún día se rompe kk-nav.js, el menú sigue navegable.
   -------------------------------------------------------------------------- */
.kk-nav__grupo { position: relative; }
.kk-nav__grupo > a { display: inline-flex; align-items: center; gap: 6px; }
.kk-nav__flecha { width: 10px; height: 7px; flex: none; }

.kk-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    min-width: 230px;
    margin: 0;
    padding: var(--kk-e2) 0;
    list-style: none;
    background: var(--kk-blanco);
    /* Borde de CONTROL (3.57 sobre blanco, §2.2): este panel flota sobre el
       contenido y su límite es lo único que lo separa de lo que hay debajo. */
    box-shadow: inset 0 0 0 1px var(--kk-linea-control), 0 18px 40px -14px rgba(7, 6, 6, 0.4);
    border-radius: var(--kk-radio);
    /* Se oculta con visibility y no con display:none: display no es animable y
       además saca el subárbol del orden de tabulación de golpe, lo que hace que
       el foco «salte» de forma rara al recorrer el menú con el teclado. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.kk-nav__grupo:hover > .kk-nav__sub,
.kk-nav__grupo:focus-within > .kk-nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}
.kk-nav__sub a {
    display: block;
    padding: var(--kk-e2) var(--kk-e4);
    white-space: nowrap;
}
.kk-nav__sub a:hover { background: var(--kk-gris); }

@media (max-width: 767px) {
    /* DENTRO DE LA HAMBURGUESA NO HAY DESPLEGABLE: la sublista se muestra
       siempre, indentada. Un menú dentro de otro menú en 375px es donde la
       gente se pierde, y además obligaría a tocar dos veces para llegar a algo
       que ya estaba a la vista. */
    .kk-nav__sub {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        min-width: 0;
        padding: 0 0 var(--kk-e3) var(--kk-e4);
        background: none;
        box-shadow: none;
    }
    .kk-nav__sub a { padding: var(--kk-e2) 0; }
    .kk-nav__flecha { display: none; }
}

/* Tallas plegadas: sin el fieldset, el bloque de acciones sube y la ficha
   pierde ~110px. El margen se saca acá y no con `gap`, porque la tarjeta usa
   `margin-top:auto` para pegar los botones abajo y alinear las filas. */
.kk-tarjeta--plegada .kk-tarjeta__talla { margin: 0; }

/* --------------------------------------------------------------------------
   CARRUSEL, SEGUNDA VERSIÓN (2026-09-07)

   La primera se rechazó mirándola, con razón: la foto metida en una caja con
   márgenes, el botón en una losa negra despegada debajo, los controles
   flotando en blanco y UNA BARRA DE SCROLL GRIS cruzando la pantalla.

   Lo que cambia, y por qué:

   1. SIN JS ES UNA PILA VERTICAL, no un scroller. Antes el `overflow-x` estaba
      siempre puesto para que funcionara sin script, y su barra de scroll era lo
      más feo de la página. Ahora sin JS las imágenes se apilan y se ven TODAS
      con el scroll normal — no hace falta ningún control. El script agrega la
      clase `kk-portadas--activo` y ahí sí se vuelve carrusel.
      Es mejor fallback que antes: sin JS ya no hay nada que operar.

   2. A SANGRE, y el botón y los controles ENCIMA de la foto.
   -------------------------------------------------------------------------- */
.kk-portadas__ancho { width: 100%; }

/* --- Sin JS: pila vertical. Es también el estado inicial con JS, un instante. */
.kk-portadas--carrusel .kk-portadas__pista {
    display: block;
    overflow: visible;
    gap: 0;
}
.kk-portadas--carrusel .kk-portadas__slide + .kk-portadas__slide { margin-top: var(--kk-e4); }

/* --- Con JS: carrusel. */
.kk-portadas--activo .kk-portadas__pista {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* LA BARRA DE SCROLL SE ESCONDE, y sólo acá: con JS hay flechas y puntos,
       así que la barra no aporta nada y era lo que más afeaba el bloque. Sin JS
       (regla de arriba) no hay scroller y por lo tanto tampoco barra. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.kk-portadas--activo .kk-portadas__pista::-webkit-scrollbar { display: none; }
.kk-portadas--activo .kk-portadas__slide { margin-top: 0; }

/* La diapositiva es el lienzo de lo que va encima. */
.kk-portadas--carrusel .kk-portadas__slide { position: relative; }
.kk-portadas--activo .kk-portadas__imagen { border-radius: 0; }

/* --- El botón, sobre la foto. «El botón podría estar centrado abajo» — textual
       de su hoja; antes estaba debajo, en un bloque aparte. */
.kk-portadas--activo .kk-portadas__accion {
    position: absolute;
    left: 50%;
    /* 96px y no 48: con 48 el boton y la fila de controles se PISABAN — los
       puntos quedaban encima del boton. Se vio en una captura del borde
       inferior; medir que ambos existan no lo habria mostrado. */
    bottom: var(--kk-e9);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
}

/* --- Los controles, encima y no en el vacío blanco de abajo. */
.kk-portadas--activo .kk-portadas__controles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--kk-e4);
    margin: 0;
    pointer-events: none;   /* el hueco entre controles no tapa la foto */
}
.kk-portadas--activo .kk-portadas__flecha,
.kk-portadas--activo .kk-portadas__puntos { pointer-events: auto; }

.kk-portadas--activo .kk-portadas__flecha {
    /* Fondo SÓLIDO, no translúcido: estos botones se apoyan sobre una foto
       arbitraria que manda la clienta, y un fondo semitransparente hereda el
       contraste de lo que tenga detrás. Es la misma decisión, y por el mismo
       motivo, que el botón de cerrar del aviso de próximo drop. */
    background: var(--kk-blanco);
    box-shadow: inset 0 0 0 2px var(--kk-linea-control), 0 2px 10px rgba(7, 6, 6, 0.25);
}
.kk-portadas--activo .kk-portadas__punto::before {
    background: var(--kk-blanco);
    box-shadow: inset 0 0 0 2px var(--kk-negro), 0 1px 4px rgba(7, 6, 6, 0.35);
}
.kk-portadas--activo .kk-portadas__punto[aria-current="true"]::before {
    background: var(--kk-negro);
    box-shadow: inset 0 0 0 2px var(--kk-blanco), 0 1px 4px rgba(7, 6, 6, 0.35);
}

@media (max-width: 767px) {
    /* En móvil el botón sube: a 375px, pegado abajo, se come el borde de la
       foto y queda encima de la prenda. */
    .kk-portadas--activo .kk-portadas__accion { bottom: var(--kk-e8); }
}

/* --------------------------------------------------------------------------
   CARRUSEL: EL CONTEXTO DE POSICIONAMIENTO (2026-09-07)

   Los controles se inyectan como HERMANOS de la pista, no como hijos de una
   diapositiva. `position:relative` estaba sólo en `.kk-portadas__slide`, asi que
   su `position:absolute` se resolvia contra el ancestro posicionado mas cercano
   —ninguno— y terminaban anclados al documento: existian, medían 1425x44 y NO SE
   VEIAN EN NINGUNA PARTE.

   Es un defecto que ninguna prueba podia cazar: el banco comprueba que las dos
   flechas y los puntos EXISTAN y midan 44px, y todo eso era cierto. Estaban,
   con su tamaño, en el lugar equivocado. Se vio mirando el borde inferior de la
   foto en una captura.
   -------------------------------------------------------------------------- */
.kk-portadas--activo .kk-portadas__ancho,
.kk-portadas--activo .kk-contenedor { position: relative; }

/* --------------------------------------------------------------------------
   Y UN VELO ABAJO, que resuelve dos cosas a la vez.

   1. El boton caia como un rectangulo negro pegado encima del cuerpo de una
      modelo — se leia como un sticker, no como parte de la portada.
   2. Los controles se apoyan sobre una foto ARBITRARIA que manda la clienta:
      blancos sobre una pared clara, se pierden.

   El velo es un degradado del negro de marca, no un color nuevo (§2.2). Da
   fondo a la zona de accion sin taparle la foto: arranca transparente y sólo
   se cierra en el ultimo tercio.
   -------------------------------------------------------------------------- */
.kk-portadas--activo .kk-portadas__slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(7, 6, 6, 0) 0%, rgba(7, 6, 6, 0.72) 100%);
    pointer-events: none;
}
/* El boton y su texto van POR ENCIMA del velo. */
.kk-portadas--activo .kk-portadas__accion { z-index: 2; }

/* Con el velo detras, el boton ya no necesita ser una losa: pasa a ser el
   blanco de marca, que sobre el velo da 20.24 con texto negro (§2.2). */
.kk-portadas--activo .kk-portadas__accion .kk-btn {
    background: var(--kk-blanco);
    color: var(--kk-negro);
    box-shadow: none;
}
.kk-portadas--activo .kk-portadas__accion .kk-btn:hover {
    background: var(--kk-ciruela);
    color: var(--kk-blanco);   /* 9.29, medido */
}

/* ==========================================================================
   EL MOSAICO DE PORTADAS — una grande y dos satelites, y la grande rota
   Kokura, 2026-09-07. Reemplaza al carrusel a sangre SOLO en el hero; los
   bloques de Madame Whiskey, Regalias y Kurito siguen usando .kk-portadas.
   ========================================================================== */

.kk-mosaico { padding: var(--kk-e7) 0 var(--kk-e6); }

.kk-mosaico__grilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* MOVIL: UNA COLUMNA Y LAS TRES A LA VISTA. No hay rotacion bajo 768px
       —el JS ni la arranca—, porque con las tres apiladas a ancho completo no
       queda nada escondido que ir a buscar: rotar ahi seria mover cosas por
       moverlas, que es justo lo que se rechazo del carrusel. */
    grid-template-columns: 1fr;
    gap: var(--kk-e5);
}

.kk-mosaico__ficha {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.kk-mosaico__figura { margin: 0 0 var(--kk-e4); }

.kk-mosaico__imagen {
    display: block;
    width: 100%;
    height: auto;
    /* 16/9 FIJO Y `object-fit: cover` QUE NUNCA LLEGA A RECORTAR: los archivos
       ya son 1280x720, o sea 16/9 exacto. El `cover` esta como red por si algun
       dia entra una imagen de otra proporcion —preferible un recorte a que la
       grilla se descuadre—, pero la regla de verdad es que ESTAS PORTADAS NO
       TOLERAN RECORTE: son figuras de cuerpo entero que tocan los dos bordes.
       La altura se baja achicando el ANCHO, nunca tocando la proporcion. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kk-radio);
    background: var(--kk-gris);   /* mientras carga, no un hueco blanco */
}

.kk-mosaico__rotulo {
    margin: 0 0 var(--kk-e3);
    color: var(--kk-texto);   /* 20.24 sobre blanco; el gris de apoyo del
                                 sobretitulo generico se queda corto para lo que
                                 aca es el NOMBRE de la campana */
}

/* La accion y la nota se empujan al pie para que las tres fichas terminen
   alineadas por abajo aunque tengan contenidos de alturas distintas. */
.kk-mosaico__accion,
.kk-mosaico__nota { margin: auto 0 0; }

.kk-mosaico__nota {
    color: var(--kk-texto-apoyo);   /* 7.06 sobre blanco, medido */
    font-size: 0.88rem;
}

.kk-mosaico__accion--vacia { min-height: 0; }

/* --------------------------------------------------------------------------
   EL BOTON: UNA SOLA CLASE, Y EL ASPECTO LO DECIDE LA POSICION

   El PHP escribe siempre `kk-btn kk-btn--linea kk-mosaico__cta`. La ficha que
   esta en la posicion grande lo pinta como principal. Se hace asi para que
   ROTAR NO OBLIGUE A CAMBIAR CLASES DESDE EL JS: el script mueve un unico
   atributo y el aspecto sigue solo.
   -------------------------------------------------------------------------- */
.kk-mosaico__cta {
    min-height: 44px;              /* area tactil minima (§2.5) */
    padding: var(--kk-e3) var(--kk-e5);
    font-size: 0.74rem;
}

/* Especificidad 0,2,0 — le gana a `.kk-btn--linea` (0,1,0) sin !important. */
.kk-mosaico__ficha[data-kk-pos="0"] .kk-mosaico__cta {
    background: var(--kk-negro);
    color: var(--kk-blanco);       /* 20.24, medido */
    box-shadow: none;
    min-height: 58px;
    padding: var(--kk-e4) var(--kk-e8);
    font-size: 0.9rem;
}
.kk-mosaico__ficha[data-kk-pos="0"] .kk-mosaico__cta:hover {
    background: #2b2530;
    color: var(--kk-blanco);
}

.kk-mosaico__ficha[data-kk-pos="0"] .kk-mosaico__rotulo { font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   ESCRITORIO: AHI RECIEN ES UN MOSAICO
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* POR DEFECTO, COLUMNAS IGUALES. Es el caso de «cualquier cantidad que no
       sea tres», y va a ocurrir con fecha conocida: la portada PROXIMAMENTE
       vence el 18/09/2026 y ese dia el bloque pasa a tener dos. `auto-fit`
       colapsa las pistas vacias, asi que con una sola imagen queda una columna
       a ancho completo y con dos, dos columnas iguales. Sin esto, un `2fr 1fr`
       fijo dejaria un hueco de 223px de alto en la columna derecha, solo y sin
       que nadie toque una linea de codigo. */
    .kk-mosaico__grilla { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    /* Y con TRES, la maqueta que eligio la clienta. Con el contenedor en 1216px
       y 24px de hueco: la grande mide 794x447 y cada satelite 397x223. */
    .kk-mosaico__grilla[data-kk-mosaico="3"] { grid-template-columns: 2fr 1fr; }

    .kk-mosaico__grilla[data-kk-mosaico="3"] .kk-mosaico__ficha[data-kk-pos="0"] {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .kk-mosaico__grilla[data-kk-mosaico="3"] .kk-mosaico__ficha[data-kk-pos="1"] {
        grid-column: 2;
        grid-row: 1;
    }
    .kk-mosaico__grilla[data-kk-mosaico="3"] .kk-mosaico__ficha[data-kk-pos="2"] {
        grid-column: 2;
        grid-row: 2;
    }
}

/* --------------------------------------------------------------------------
   LA ROTACION

   `--rota` la pone el JS: sin script no hay transicion declarada y no hay nada
   que pueda quedarse a medias. `--cambiando` es el medio segundo en que las
   fichas estan invisibles mientras se reasignan las posiciones.

   NO SE ANIMA LA POSICION, se funde. Las fichas cambian de celda de la grilla,
   y las celdas de una grilla no interpolan: intentar deslizarlas daria un salto
   igual, pero con 400ms de espera antes. Fundir es honesto y ademas es lo unico
   que no marea con tres cosas moviendose a la vez.
   -------------------------------------------------------------------------- */
.kk-mosaico--rota .kk-mosaico__ficha { transition: opacity 0.4s ease; }
.kk-mosaico--cambiando .kk-mosaico__ficha { opacity: 0; }

/* El bloque global de `prefers-reduced-motion` de kk-base.css ya lleva estas
   transiciones a 0.001ms. Igual el JS NO ARRANCA la rotacion con movimiento
   reducido: se APAGA, no se atenua (§2.5). Esta regla queda como segunda red
   por si alguien un dia toca el JS. */
@media (prefers-reduced-motion: reduce) {
    .kk-mosaico--rota .kk-mosaico__ficha { transition: none; }
    .kk-mosaico--cambiando .kk-mosaico__ficha { opacity: 1; }
}

/* LA FICHA GRANDE NO EMPUJA SU BOTON AL PIE, y las otras si.

   Motivo, medido a 1280px: la columna izquierda ABARCA LAS DOS FILAS, o sea
   663px, mientras su contenido (imagen 447 + rotulo + boton) mide 537. Con
   `margin-top:auto` el boton se iba al fondo de esos 663 y quedaba flotando a
   126px del rotulo, sin nada en medio — un boton huerfano, no una alineacion.

   Se prefiere que sobre blanco al final de la columna: es invisible. El
   `margin-top:auto` se conserva para el resto de los casos —movil apilado y el
   reparto en dos columnas de cuando venza PROXIMAMENTE—, donde dos fichas si
   comparten fila y alinear sus botones por abajo es lo correcto. */
@media (min-width: 768px) {
    .kk-mosaico__grilla[data-kk-mosaico="3"] .kk-mosaico__ficha[data-kk-pos="0"] .kk-mosaico__accion,
    .kk-mosaico__grilla[data-kk-mosaico="3"] .kk-mosaico__ficha[data-kk-pos="0"] .kk-mosaico__nota {
        margin-top: 0;
    }
}

/* ==========================================================================
   BOTON «VOLVER ARRIBA» — Kokura, 2026-09-08

   Es un <a href="#top">: el salto y el desplazamiento suave los hace el
   navegador con el `scroll-behavior: smooth` que ya declara kk-base.css, y
   por eso tambien respeta `prefers-reduced-motion` sin una sola linea nueva.
   Lo unico que hace el JS es decidir CUANDO se ve. Ver lib/_boton-arriba.php.
   ========================================================================== */
.kk-arriba {
    position: fixed;
    right: var(--kk-e5);

    /* SE APOYA SOBRE LA FRANJA, NO DEBAJO DE ELLA. `.kk-franja` es fixed al
       pie y su alto NO es constante: depende de su texto —que cambia cada vez
       que llega algo de la clienta— y de en cuantas lineas caiga, o sea del
       ancho de la ventana. `--kk-franja-alto` lo mide y lo publica el JS.
       El respaldo `0px` es el caso sano: con KK_CONTENIDO_APROBADO en true la
       franja no se pinta y el boton baja solo a su lugar. */
    bottom: calc(var(--kk-franja-alto, 0px) + var(--kk-e5));

    /* Debajo del fondo del carrito (140), que es un modal y tiene que taparlo.
       Encima del desplegable de colecciones (120), que se abre desde arriba. */
    z-index: 130;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;    /* area tactil por encima del minimo de 44px (§2.5) */
    height: 48px;

    border-radius: var(--kk-radio-pill);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);   /* flecha blanca sobre ciruela: 9.29, medido */
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(7, 6, 6, 0.55);

    /* ARRANCA OCULTO Y FUERA DEL ORDEN DE TABULACION. Tiene que ser
       `visibility`, no solo `opacity`: un boton invisible con opacity:0 sigue
       recibiendo el foco del teclado, y tabular hacia algo que no se ve es
       exactamente la clase de defecto que este proyecto ya se comio con el
       panel del carrito (§3.3).

       La visibilidad se retrasa 0.25s SOLO al ocultarse, para que alcance a
       desvanecerse en vez de desaparecer de golpe. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.kk-arriba--visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.kk-arriba:hover {
    background: #3f2d4b;         /* blanco encima: 12.44, medido */
    color: var(--kk-blanco);
    text-decoration: none;
}

.kk-arriba__flecha { width: 22px; height: 22px; }

/* El bloque global de kk-base.css lleva las DURACIONES a 0.001ms, pero no
   toca los RETRASOS: sin esto, con movimiento reducido el boton se apagaria
   al instante y recien 250ms despues dejaria de existir. */
@media (prefers-reduced-motion: reduce) {
    .kk-arriba { transition-delay: 0s; }
}

@media (max-width: 767px) {
    /* Mas pegado al borde: en 375px cada pixel de la esquina es contenido. */
    .kk-arriba {
        right: var(--kk-e4);
        bottom: calc(var(--kk-franja-alto, 0px) + var(--kk-e4));
    }
}

/* ==========================================================================
   GALERIA DE LA TARJETA — miniaturas debajo de la foto
   Kokura, 2026-09-08. Lo pidio la clienta: ver el frente, la espalda y las
   fotos con modelo sin salir de la tarjeta. Ver lib/_tarjeta-producto.php.
   ========================================================================== */

/* TODAS LAS TARJETAS RESERVAN EL ALTO DE LA TIRA, TENGAN GALERIA O NO.

   Se vio en una captura, no en las pruebas: en una fila de cuatro, las tres
   con galeria bajaban su titulo 76px respecto de la que no la tiene, y la
   fila quedaba dentada. Las pruebas no podian verlo — miden una tarjeta a la
   vez, y cada una estaba bien por separado.

   El hueco se reserva con un ::after de alto calculado, no con un numero
   escrito a mano: sale de `--kk-mini` por 1.25, que es la proporcion 4:5 de
   la miniatura. Asi, cambiar el tamano de la miniatura mueve las dos cosas a
   la vez y no pueden separarse — que es como estas dos medidas se habrian
   desincronizado en tres meses. */
/* DOS MEDIDAS, UNA SOLA FUENTE. `--kk-mini` es el ancho de la miniatura y
   `--kk-tira-alto` sale de el: la proporcion 4:5 mas un canal para la barra
   de desplazamiento. Las usan la tira Y la reserva de las tarjetas sin
   galeria, asi que no se pueden desincronizar — que es como la fila se
   dento dos veces en dos dias.

   14px de canal y no 6: `scrollbar-width: thin` manda sobre
   `::-webkit-scrollbar` en Chrome moderno, y medido ocupa ~10px, no los 6
   que pedia la regla vieja. Con 6 la barra se comia el alto y recortaba la
   miniatura 4px — ahi nacia el desplazamiento vertical que reporto el
   usuario. 14 le da lugar en Chrome y en Firefox sin quedar holgado. */
.kk-tarjeta__fotos {
    --kk-mini: 54px;
    --kk-tira-alto: calc(var(--kk-mini) * 1.25 + 14px);
}
.kk-tarjeta__fotos .kk-tarjeta__figura { margin-bottom: var(--kk-e2); }
.kk-tarjeta__fotos:not([data-kk-galeria])::after {
    content: '';
    display: block;
    /* La MISMA variable que la tira: si no miden igual, vuelve la fila
       dentada. Por eso es una variable y no dos expresiones parecidas. */
    height: var(--kk-tira-alto);
    margin-bottom: var(--kk-e4);
}

.kk-tarjeta__miniaturas {
    list-style: none;
    margin: 0 0 var(--kk-e4);
    padding: 0;
    display: flex;
    gap: var(--kk-e2);

    /* ALTO FIJO, no el que resulte. La barra de desplazamiento ocupa alto
       solo cuando el contenido desborda, y solo si el navegador dibuja
       barras: dos condiciones que cambian de tarjeta en tarjeta y de
       navegador en navegador. Con el alto fijo, la barra se come el hueco
       que ya esta reservado y TODAS las tiras miden igual.

       `flex-start` va con esto: sin el, los botones se estiran al alto del
       contenedor y las miniaturas salen deformadas. */
    height: var(--kk-tira-alto);
    align-items: flex-start;

    /* `position: relative` NO ES DECORATIVO ACA, Y COSTO UN DEFECTO REAL
       (2026-09-08, reportado en celular: «se hace un scroll horizontal
       enorme»).

       Cada miniatura lleva un `<span class="kk-solo-lectores">Foto 3 de 5</span>`
       para el lector de pantalla, y ese span es `position: absolute`. Con la
       tira en `static`, el span NO se posiciona respecto de la tira: sube
       hasta la tarjeta, o sea que SE ESCAPA del `overflow-x: auto` y su borde
       derecho aterriza donde caeria la miniatura si la tira no tuviera
       scroll. Medido a 375px: el documento pasaba de 375 a 595px de ancho.

       Y arrastraba un segundo sintoma que parecia otro bug: el boton de
       «volver arriba» se iba «totalmente a la derecha». Es `position: fixed`
       con `right`, asi que se ancla al viewport de layout — y ese viewport
       era el de 595px, no el de la pantalla. Un solo desborde, dos sintomas
       que no se parecen. */
    position: relative;

    /* CON SEIS FOTOS NO ENTRAN EN UNA TARJETA DE 163px (el ancho real en un
       celular de 375px con la grilla de dos columnas, medido). Se desplazan en
       horizontal DENTRO de su caja: el cuerpo de la pagina nunca se mueve de
       lado, que es la regla de siempre. */
    overflow-x: auto;
    /* SOLO HORIZONTAL. Con `overflow-x: auto` el otro eje se calcula `auto`
       solo, asi que la tira tambien se podia desplazar en vertical — 4px,
       suficientes para que el gesto se sintiera raro. Lo reporto el usuario:
       «se hace un scroll vertical tambien y debemos evitarlo». */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* LA BARRA SE ESCONDE SOLO DONDE HAY DEDO. Estaba escondida en todos
       lados —«sobra en una tira de 54px»— y eso dejaba la tira INALCANZABLE
       con mouse: sin barra visible y sin gesto de arrastre, las fotos que no
       entraban no se podian ver. Lo reporto el usuario el 2026-09-08:
       «en celulares si se ve bien puedo moverlo pero en escritorio cuando
       presiono el espacio de fotos y quiero hacerlo a la izquierda no sirve».

       Con dedo la barra sigue sobrando: el gesto de deslizar YA alcanza, y en
       moviles la barra ni siquiera se dibuja salvo mientras se desplaza. */
}
@media (pointer: coarse) {
    .kk-tarjeta__miniaturas { scrollbar-width: none; }
    .kk-tarjeta__miniaturas::-webkit-scrollbar { display: none; }
}
@media (pointer: fine) {
    /* Fina y discreta, pero VISIBLE: es lo unico que dice que hay mas fotos. */
    .kk-tarjeta__miniaturas { scrollbar-width: thin; scrollbar-color: var(--kk-linea-control) transparent; }
    .kk-tarjeta__miniaturas::-webkit-scrollbar { height: 6px; }
    .kk-tarjeta__miniaturas::-webkit-scrollbar-thumb {
        background: var(--kk-linea-control);
        border-radius: 99px;
    }
    .kk-tarjeta__miniaturas::-webkit-scrollbar-track { background: transparent; }
}

.kk-miniatura {
    display: block;
    flex: none;
    width: var(--kk-mini);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--kk-radio);
    overflow: hidden;

    /* EL CONTORNO ES LO QUE IDENTIFICA AL CONTROL, asi que necesita 3:1 contra
       el fondo (WCAG 1.4.11, §2.2). `--kk-linea-control` da 3.57 sobre blanco;
       `--kk-linea-fuerte` daria 1.64 y la miniatura seria invisible COMO BOTON
       aunque la foto se viera perfecta — es exactamente lo que paso con los
       chips de talla el 2026-08-10. */
    box-shadow: inset 0 0 0 1px var(--kk-linea-control);
    opacity: 0.62;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.kk-miniatura img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;   /* la misma proporcion que la foto grande */
    object-fit: cover;
}

.kk-miniatura:hover { opacity: 1; }

/* LA ACTIVA SE MARCA CON DOS SENALES, no con una: contorno grueso oscuro Y
   opacidad plena. Si la unica diferencia fuera el color del borde, quien no
   distingue bien los tonos no sabria cual esta viendo. */
.kk-miniatura[aria-current="true"] {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--kk-negro);
}

/* La foto grande avisa que se puede tocar. Solo cuando hay galeria: sin ella,
   un cursor de mano sobre una imagen que no hace nada es una promesa falsa. */
.kk-tarjeta__fotos[data-kk-galeria] .kk-tarjeta__foto { cursor: pointer; }

/* --------------------------------------------------------------------------
   CHIP «AGOTADO» — 2026-09-08
   Solo lo lleva una edicion limitada sin ninguna talla (lib/_tarjeta-producto).
   Negro con blanco: 20.24, medido. No usa el acento a proposito — el rosa y el
   ciruela son de las buenas noticias, y esta no lo es; y no se queda en el gris
   de «bajo confeccion» porque son estados distintos y tienen que verse
   distintos.
   -------------------------------------------------------------------------- */
.kk-entrega--agotado {
    background: var(--kk-negro);
    color: var(--kk-blanco);
}

/* ==========================================================================
   CONOCE A KURITO — elegir la regalia
   Kokura, 2026-09-08. Ver lib/_seccion-regalias.php.

   LA ELECCION LA HACE EL CSS, NO EL JAVASCRIPT. Son radios de verdad, y la
   figura grande se cambia con `#id:checked ~ …`. Por eso el marcado pone los
   seis radios ANTES de la escena: el combinador `~` solo mira hacia adelante.
   El JS agrega recordar la eleccion, meterla en el pedido y —desde el
   2026-09-09— APAGARLA al volver a tocar la que ya estaba elegida. Eso ultimo
   no lo puede hacer el CSS: un grupo de radios no se desmarca solo.
   ========================================================================== */

.kk-regalias__escena {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;                 /* reserva el alto: sin esto la pagina
                                          salta al cambiar de personaje */
    padding: var(--kk-e6) 0 var(--kk-e5);
}

/* TODAS LAS FIGURAS OCUPAN LA MISMA CELDA DE LA GRILLA y se apagan con
   opacidad. No se usa `display:none` a proposito: no es animable, y el fundido
   es justo lo que ella pidio («tal vez con alguna animacion»). */
.kk-regalias__grande {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;                /* fuera del arbol mientras no se ve */
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.kk-regalias__grande img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 260px;
    object-fit: contain;
    margin: 0 auto;
}
.kk-regalias__grande figcaption {
    margin-top: var(--kk-e3);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kk-texto);            /* 20.24 sobre blanco */
}

/* LA MASCOTA ES EL ESTADO INICIAL: se ve mientras no hay ninguno elegido. */
.kk-regalias__grande--mascota {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* Y SE APAGA EN CUANTO HAY UNO ELEGIDO, sea cual sea. `:has()` evita escribir
   seis reglas iguales; si un navegador viejo no lo entiende, la mascota se
   queda encendida detras del elegido en vez de desaparecer — degrada feo pero
   no roto. Por eso el elegido lleva un fondo propio mas abajo. */
.kk-regalias:has(.kk-regalia__radio:checked) .kk-regalias__grande--mascota {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

/* EL ELEGIDO. Seis reglas por POSICION, no por personaje: el CSS no sabe como
   se llaman, asi que agregar un septimo personaje al CSV no obliga a tocar
   esta hoja — solo a agregar un `nth-of-type` mas si algun dia son mas de seis.
   El `~` alcanza a la escena porque los radios son hermanos anteriores. */
.kk-regalia__radio:nth-of-type(1):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(1),
.kk-regalia__radio:nth-of-type(2):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(2),
.kk-regalia__radio:nth-of-type(3):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(3),
.kk-regalia__radio:nth-of-type(4):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(4),
.kk-regalia__radio:nth-of-type(5):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(5),
.kk-regalia__radio:nth-of-type(6):checked ~ .kk-regalias__escena .kk-regalias__grande:nth-of-type(6) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* El globo de texto de Kurito. Se va con la mascota: cuando elegis un
   personaje, lo que manda es el personaje. */
.kk-regalias__globo {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    max-width: 34ch;
    margin: 0;
    padding: var(--kk-e3) var(--kk-e4);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);           /* 9.29, medido */
    border-radius: var(--kk-radio);
    font-size: 0.86rem;
    line-height: 1.45;
    transition: opacity 0.35s ease;
}
.kk-regalias:has(.kk-regalia__radio:checked) .kk-regalias__globo {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   EL VESTIDO DE LA SECCION — muestreado del mockup de la clienta (2026-09-08)

   La primera version de esta seccion perdio el diseno entero: quedaron los
   personajes sobre el blanco del cuerpo, sin el fondo lila, sin la barra con
   lupa del titulo y sin las bandas ciruela. El usuario lo pidio de vuelta.

   LOS COLORES SE MIDIERON, NO SE ESTIMARON. Leyendo pixeles de K1.jpg:

     fondo de la seccion   #d7c4e0 / #e0c9e6   ->  --kk-lila     #e5d8ed
     bandas y globo        #675472 / #695379   ->  --kk-ciruela  #553e64
     pastilla del nombre   #f7dfef             ->  --kk-rosa-palido #fcdee9
     borde de la carta     #e5d8ec             ->  --kk-lila (exacto)

   O sea que su diseno YA ESTABA en la paleta del proyecto: se reconstruye con
   los tokens y no con los valores del JPG, que traen la compresion encima.

   ⚠ ESTA SECCION DECLARA `background`, Y §2.2 DICE QUE NINGUNA DEL CUERPO LO
   HACE. La excepcion es deliberada y la pidio el usuario al ver que se habia
   perdido el diseno. Lo que §2.2 prohibe es el MUESTRARIO —cinco fondos
   distintos, uno por seccion, que ya costo dos rondas rechazadas—; esto es UN
   fondo, de la paleta, en la unica seccion que no vende ropa: es el mundo de
   la mascota. Si alguna vez aparece una segunda seccion con fondo propio, la
   que hay que revisar es esta regla, no agregar la tercera.
   -------------------------------------------------------------------------- */
.kk-regalias {
    background: var(--kk-lila);
}

.kk-regalias__cabecera {
    display: grid;
    justify-items: center;
    gap: var(--kk-e3);
    margin-bottom: var(--kk-e5);
    text-align: center;
}
.kk-regalias .kk-sobretitulo { color: var(--kk-ciruela); }   /* 6.81 sobre lila */

/* LA BARRA DEL TITULO. En el mockup parece un buscador: pastilla clara, el
   texto a la izquierda, un tabique y la lupa a la derecha. Es DECORATIVA —
   ver la nota del marcado— y por eso no lleva ni borde de foco ni cursor de
   texto: nada invita a escribir ahi. */
.kk-regalias__barra {
    display: inline-flex;
    align-items: stretch;
    background: var(--kk-blanco);
    border-radius: var(--kk-radio-pill);
    box-shadow: inset 0 0 0 2px var(--kk-ciruela),   /* 6.81 sobre lila: se ve */
                6px 6px 0 0 var(--kk-ciruela);       /* la sombra dura del mockup */
    overflow: hidden;
    max-width: 100%;
}
.kk-regalias__titulo {
    margin: 0;
    padding: var(--kk-e3) var(--kk-e6);
    font-size: clamp(1.1rem, 4.4vw, 1.9rem);
    line-height: 1.1;
    color: var(--kk-ciruela);        /* ciruela sobre blanco: 9.29, medido */
    white-space: nowrap;
}
.kk-regalias__lupa {
    display: flex;
    align-items: center;
    padding: 0 var(--kk-e4);
    border-left: 2px solid var(--kk-ciruela);
    color: var(--kk-ciruela);
    flex: none;
}
.kk-regalias__lupa svg { width: 22px; height: 22px; }

/* LA BANDA. En el mockup «ELIGE TU PERSONAJE» va sobre un rectangulo ciruela
   con el texto blanco y muy espaciado. */
.kk-regalias__banda {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--kk-e5);
    padding: var(--kk-e3) var(--kk-e6);
    background: var(--kk-ciruela);
    color: var(--kk-blanco);         /* 9.29, medido */
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
}

/* --------------------------------------------------------------------------
   LAS CARTAS
   -------------------------------------------------------------------------- */
.kk-regalias__cartas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--kk-e4);
}

.kk-regalia {
    display: block;
    cursor: pointer;
    padding: var(--kk-e3);
    border-radius: var(--kk-radio);
    /* Clara sobre el lila: en el mockup la carta se despega del fondo por
       ser mas clara, no por tener otro color. */
    background: rgba(255, 255, 255, 0.55);
    /* Borde de CONTROL: 3.57 sobre blanco (§2.2, WCAG 1.4.11). La carta es lo
       que se toca, asi que su limite tiene que verse COMO control — el gris
       decorativo daria 1.64 y la carta seria invisible como boton aunque la
       foto se viera perfecta. */
    /* BORDE CIRUELA Y NO `--kk-linea-control`: el fondo de esta seccion ya
       no es blanco. Ciruela sobre lila da 6.81 medido, muy por encima del
       3:1 que pide WCAG 1.4.11 para el limite de un control; el gris de
       control esta pensado contra blanco y aca casi desaparece.
       La sombra dura desplazada es de su mockup. */
    box-shadow: inset 0 0 0 2px var(--kk-ciruela), 4px 4px 0 0 var(--kk-ciruela);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kk-regalia img {
    display: block;
    width: 100%;
    height: auto;
    /* CUADRADA: las imagenes que entrego la clienta el 2026-09-08 son de
       900x900 con fondo transparente. Antes decia 192/238, que era la
       proporcion de los recortes provisionales del mockup — con las nuevas
       habria dejado al personaje flotando en una caja mas alta que ancha. */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
/* LA PASTILLA DEL NOMBRE VA ARRIBA, como en el mockup: rosa palido, borde
   ciruela y la lupa a la izquierda. Ciruela sobre rosa palido: 7.42. */
.kk-regalia__nombre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-e2);
    margin-bottom: var(--kk-e3);
    padding: 4px var(--kk-e3);
    background: var(--kk-rosa-palido);
    border-radius: var(--kk-radio-pill);
    box-shadow: inset 0 0 0 1px var(--kk-ciruela);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kk-ciruela);
}
.kk-regalia__lupa { width: 13px; height: 13px; flex: none; }

.kk-regalia:hover { transform: translateY(-3px); }

/* LA ELEGIDA SE MARCA CON DOS SENALES, no con una: contorno grueso oscuro Y
   fondo blanco. Con el color solo, quien no distingue bien los tonos no
   sabria cual eligio. Seis reglas por POSICION, igual que arriba. */
.kk-regalia__radio:nth-of-type(1):checked ~ .kk-regalias__cartas li:nth-child(1) .kk-regalia,
.kk-regalia__radio:nth-of-type(2):checked ~ .kk-regalias__cartas li:nth-child(2) .kk-regalia,
.kk-regalia__radio:nth-of-type(3):checked ~ .kk-regalias__cartas li:nth-child(3) .kk-regalia,
.kk-regalia__radio:nth-of-type(4):checked ~ .kk-regalias__cartas li:nth-child(4) .kk-regalia,
.kk-regalia__radio:nth-of-type(5):checked ~ .kk-regalias__cartas li:nth-child(5) .kk-regalia,
.kk-regalia__radio:nth-of-type(6):checked ~ .kk-regalias__cartas li:nth-child(6) .kk-regalia {
    background: var(--kk-blanco);
    box-shadow: inset 0 0 0 3px var(--kk-negro), 7px 7px 0 0 var(--kk-ciruela);
    transform: translateY(-3px);
}

/* EL FOCO DEL TECLADO CAE EN EL RADIO, que esta recortado a 1px y no se ve.
   Sin esto, tabular por la seccion no muestra donde estas parado: se dibuja
   el anillo sobre SU carta, que es lo que el visitante si ve. */
.kk-regalia__radio:nth-of-type(1):focus-visible ~ .kk-regalias__cartas li:nth-child(1) .kk-regalia,
.kk-regalia__radio:nth-of-type(2):focus-visible ~ .kk-regalias__cartas li:nth-child(2) .kk-regalia,
.kk-regalia__radio:nth-of-type(3):focus-visible ~ .kk-regalias__cartas li:nth-child(3) .kk-regalia,
.kk-regalia__radio:nth-of-type(4):focus-visible ~ .kk-regalias__cartas li:nth-child(4) .kk-regalia,
.kk-regalia__radio:nth-of-type(5):focus-visible ~ .kk-regalias__cartas li:nth-child(5) .kk-regalia,
.kk-regalia__radio:nth-of-type(6):focus-visible ~ .kk-regalias__cartas li:nth-child(6) .kk-regalia {
    outline: 3px solid var(--kk-negro);
    outline-offset: 2px;
}

.kk-regalias__aviso {
    margin: var(--kk-e5) 0 0;
    text-align: center;
    font-size: 0.86rem;
    color: var(--kk-texto-apoyo);      /* 5.11 sobre lila, medido */
}
.kk-regalias__aviso strong { color: var(--kk-texto); }

@media (max-width: 767px) {
    .kk-regalias__escena { min-height: 260px; }
    .kk-regalias__grande img { height: 200px; }

    /* EL GLOBO BAJA A SU PROPIA FILA — 2026-09-09, lo reporto la duena.
       En un celular el globo le tapaba la cara a Kurito: medido a 375px antes
       de tocar nada, se solapaba 208 x 48 px, el 23,8% de la imagen, justo
       debajo de los ojos.
       LA CAUSA NO ERA EL `position`. Este bloque ya decia `position: static`,
       que no hacia nada: el globo YA era estatico. Lo que lo mantenia encima
       de la mascota era `grid-area: 1 / 1` de la regla general — la MISMA
       celda que ocupan las figuras—, y eso no lo deshace ni `position` ni
       `margin-top`, porque en una grilla dos hijos de la misma celda se
       apilan. Con `grid-area: auto` el globo se auto-coloca, y como la fila 1
       esta tomada por las figuras cae en la fila 2: debajo, sin taparle nada.
       En escritorio no se toca — ahi el globo va a la esquina y no molesta. */
    .kk-regalias__globo {
        grid-area: auto;
        align-self: auto;
        justify-self: center;
        margin-top: var(--kk-e4);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kk-regalias__grande,
    .kk-regalias__globo,
    .kk-regalia { transition-delay: 0s; }
}

/* ==========================================================================
   EL BUSCADOR — la lupa de la cabecera y su panel
   Kokura, 2026-09-08. Ver public/js/kk-busqueda.js y lib/_busqueda-panel.php.
   ========================================================================== */

/* La lupa vive al lado del carrito y se parece a el, pero sin relleno: el
   carrito es la accion principal de la cabecera y no se le compite. */
.kk-lupa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;                        /* area tactil minima (§2.5) */
    height: 44px;
    margin-left: var(--kk-e2);
    border-radius: var(--kk-radio);
    color: var(--kk-texto);             /* 20.24 sobre la cabecera clara */
}
.kk-lupa svg { width: 21px; height: 21px; }
.kk-lupa:hover { background: var(--kk-gris); text-decoration: none; }

/* --------------------------------------------------------------------------
   EL PANEL
   -------------------------------------------------------------------------- */
.kk-busqueda-fondo {
    position: fixed;
    inset: 0;
    z-index: 180;                       /* encima del carrito (150) y del aviso
                                           de drop (170): es lo ultimo que se
                                           abre, y lo primero que hay que ver */
    background: rgba(7, 6, 6, 0.5);
}

.kk-busqueda {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 181;
    padding: var(--kk-e5) var(--kk-e4) var(--kk-e6);
    background: var(--kk-blanco);
    box-shadow: 0 20px 60px -30px rgba(7, 6, 6, 0.6);
}

.kk-busqueda__caja {
    width: 100%;
    max-width: var(--kk-ancho-angosto);
    margin: 0 auto;
}

/* EL CAMPO. El borde es lo que lo identifica COMO control, asi que necesita
   3:1 contra el blanco (WCAG 1.4.11): `--kk-linea-control` da 3.57 medido. Con
   el foco pasa a negro y engorda, que es una segunda senal ademas del anillo. */
.kk-busqueda__campo {
    display: flex;
    align-items: center;
    gap: var(--kk-e3);
    padding: 0 var(--kk-e4);
    border-radius: var(--kk-radio);
    box-shadow: inset 0 0 0 1px var(--kk-linea-control);
}
.kk-busqueda__campo:focus-within {
    box-shadow: inset 0 0 0 2px var(--kk-negro);
}
.kk-busqueda__lupa { width: 20px; height: 20px; flex: none; color: var(--kk-texto-apoyo); }

.kk-busqueda__input {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1rem;
    color: var(--kk-texto);
}
.kk-busqueda__input:focus { outline: none; }   /* el anillo lo dibuja la caja */
.kk-busqueda__input::placeholder { color: var(--kk-texto-apoyo); }  /* 7.06 */

/* La crucecita de `type=search` la pone el navegador y no se puede estilar
   bien; se apaga y queda SOLO nuestro boton de cerrar, que ademas es el que
   cierra el panel entero. Dos crucecitas que hacen cosas distintas a 8px una
   de otra es una trampa. */
.kk-busqueda__input::-webkit-search-cancel-button { display: none; }

.kk-busqueda__cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--kk-texto);
    border-radius: var(--kk-radio);
}
.kk-busqueda__cerrar svg { width: 20px; height: 20px; }
.kk-busqueda__cerrar:hover { background: var(--kk-gris); }

.kk-busqueda__ayuda {
    margin: var(--kk-e3) 0 0;
    font-size: 0.8rem;
    color: var(--kk-texto-apoyo);       /* 7.06 sobre blanco, medido */
}

/* --------------------------------------------------------------------------
   LOS RESULTADOS
   -------------------------------------------------------------------------- */
.kk-busqueda__resultados {
    list-style: none;
    margin: var(--kk-e3) 0 0;
    padding: 0;
    /* Se desplazan DENTRO del panel: con ocho resultados y un teclado abierto
       en un celular, la lista no puede empujar el campo fuera de la pantalla. */
    max-height: min(58vh, 520px);
    overflow-y: auto;
}

.kk-resultado {
    display: flex;
    align-items: center;
    gap: var(--kk-e4);
    padding: var(--kk-e3);
    border-radius: var(--kk-radio);
    color: var(--kk-texto);
}
.kk-resultado:hover,
.kk-resultado:focus-visible { background: var(--kk-gris); text-decoration: none; }

.kk-resultado__foto,
.kk-resultado__sinfoto {
    flex: none;
    width: 48px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--kk-radio);
    background: var(--kk-fondo-foto);
}

.kk-resultado__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kk-resultado__nombre {
    font-weight: 700;
    font-size: 0.88rem;
    /* Un nombre largo no puede empujar el precio fuera de la fila. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kk-resultado__grupo {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kk-texto-apoyo);       /* 7.06 */
}
.kk-resultado__precio {
    flex: none;
    font-weight: 700;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .kk-busqueda { padding: var(--kk-e6) var(--kk-e6) var(--kk-e7); }
    .kk-resultado__foto,
    .kk-resultado__sinfoto { width: 56px; }
}