/*
 * ISES Tienda — estilos del diseño de Claude Design (docs/diseno/Tienda ISES.dc.html).
 * Móvil primero (marco de 390 px); escritorio desde 960 px (marco de 1280 px, contenido de 1216 px).
 */

:root {
    --negro: #0B0B0C;
    --negro-2: #161618;
    --borde-oscuro: #2A2B2F;
    --borde-oscuro-2: #3A3B40;
    --fondo: #F4F4F6;
    --azul: #0A6CF0;
    --azul-hover: #0858C7;
    --azul-suave: #E8F1FE;
    --azul-claro: #8DBBFF;
    --borde: #E3E4E8;
    --borde-suave: #EDEEF1;
    --borde-input: #C9CBD1;
    --borde-control: #D3D5DA;
    --texto: #0B0B0C;
    --texto-2: #33363C;
    --gris: #4A4D55;
    --gris-2: #575B63;
    --gris-3: #6A6D75;
    --gris-4: #9A9DA5;
    --gris-claro: #F1F1F3;
    --gris-panel: #F6F6F8;
    --claro-1: #C9CBD1;
    --claro-2: #B4B7BE;
    --verde: #1FAF55;
    --verde-texto: #0E6230;
    --verde-fondo: #E5F5EB;
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--sans);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd { margin: 0; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: var(--azul); }
a:hover { color: var(--azul-hover); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--negro); color: #fff; }
.saltar:focus { left: 8px; }

.contenedor { width: 100%; max-width: 1216px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

@media (max-width: 959.98px) { .solo-escritorio { display: none !important; } }
@media (min-width: 960px) {
    .solo-movil { display: none !important; }
    .contenedor { padding-left: 32px; padding-right: 32px; }
}

.etiqueta-azul { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--azul-claro); }
.seccion-titulo { font: 800 21px/1.2 var(--sans); letter-spacing: -.02em; }
.seccion-sub { font: 400 15px/1.4 var(--sans); color: var(--gris); }
.encabezado-seccion { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.encabezado-seccion-textos { display: flex; flex-direction: column; gap: 6px; }
.enlace-seccion { min-height: 44px; display: flex; align-items: center; font: 700 14px/1 var(--sans); text-decoration: none; flex: none; }
.enlace-boton { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--azul); font: 700 14px/1 var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.enlace-boton:hover { color: var(--azul-hover); }
.migas { font: 500 12px/1.4 var(--mono); color: var(--gris); }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { text-decoration: underline; }

@media (min-width: 960px) {
    .seccion-titulo { font-size: 30px; line-height: 1.1; letter-spacing: -.025em; }
    .encabezado-seccion { align-items: flex-end; }
    .enlace-seccion { font-size: 15px; }
}

/* Botones medianos (sin resultados, error) */
.btn-negro-medio, .btn-borde-medio {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px;
    border-radius: 12px; text-decoration: none; font: 700 15px/1 var(--sans); cursor: pointer;
}
.btn-negro-medio { background: var(--negro); color: #fff; border: 0; }
.btn-negro-medio:hover { color: #fff; background: #26272B; }
.btn-borde-medio { border: 1px solid var(--borde-input); color: var(--texto); background: #fff; font-weight: 600; }
.btn-borde-medio:hover { border-color: var(--negro); color: var(--texto); }

/* ---------- Encabezado (SiteHeader) ---------- */
.cab { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--borde); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; flex: none; }
.logo:hover { color: var(--texto); }
.logo-caja { width: 44px; height: 44px; border-radius: 12px; background: var(--negro); display: flex; align-items: center; justify-content: center; }
.logo-caja img { width: 32px; height: auto; }
.logo-texto { display: flex; flex-direction: column; gap: 3px; }
.logo-nombre { font: 800 19px/1 var(--sans); letter-spacing: .2em; }
.logo-sub { font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--gris-2); }

.cab-barra { background: var(--negro); color: #E6E7EA; }
.cab-barra-int { height: 36px; display: flex; align-items: center; justify-content: space-between; font: 500 12.5px/1 var(--sans); }
.cab-barra-sellos { display: flex; gap: 20px; }
.cab-barra-sellos .sep { color: #8E929A; }
.cab-barra a { color: #fff; text-decoration: none; font: 500 12px/1 var(--mono); }
.cab-principal { height: 76px; display: flex; align-items: center; gap: 28px; }

.buscador { flex: 1; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; border: 1px solid var(--borde-control); border-radius: 12px; background: var(--gris-panel); }
.buscador:focus-within { border-color: var(--negro); }
.buscador svg { flex: none; color: var(--gris-2); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 15px/1 var(--sans); color: var(--texto); }
.buscador button { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--negro); color: #fff; font: 700 13px/1 var(--sans); cursor: pointer; }

.cab-acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.cab-enlace { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; color: var(--texto); text-decoration: none; font: 600 14px/1 var(--sans); }
.cab-enlace:hover { background: var(--gris-claro); color: var(--texto); }
.cab-carrito { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 10px; background: var(--negro); color: #fff; text-decoration: none; font: 600 14px/1 var(--sans); }
.cab-carrito:hover { color: #fff; }
.contador-en-linea { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--azul); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--mono); }

.cab-categorias { max-width: 1216px; margin: 0 auto; padding: 0 20px; height: 48px; display: flex; align-items: center; gap: 2px; font: 600 14px/1 var(--sans); }
.cab-categorias a { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--texto); text-decoration: none; }
.cab-categorias a:hover { color: var(--azul); }
.cab-categorias a.destacado { color: var(--azul); }
.punto-azul { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: none; }

/* Móvil */
.cab-movil-barra { height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; }
.cab-movil .logo { gap: 9px; }
.cab-movil .logo-caja { width: 38px; height: 38px; border-radius: 10px; }
.cab-movil .logo-caja img { width: 28px; }
.cab-movil .logo-nombre { font-size: 16px; }
.cab-movil .logo-sub { font-size: 9px; }
.cab-movil-acciones { margin-left: auto; display: flex; }
.icono-btn { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--texto); cursor: pointer; }
.icono-btn:hover { color: var(--texto); }
.contador { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 10px/1 var(--mono); }
.cab-movil-buscar { padding: 0 16px 12px; }
.buscador-chico { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--borde-control); border-radius: 12px; background: var(--gris-panel); }
.buscador-chico:focus-within { border-color: var(--negro); }
.buscador-chico svg { flex: none; color: var(--gris-2); }
.buscador-chico input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 15px/1 var(--sans); color: var(--texto); }
.menu-movil { display: flex; flex-direction: column; padding: 8px 8px 12px; border-top: 1px solid var(--borde); max-height: calc(100vh - 120px); overflow-y: auto; }
.menu-movil a { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; color: var(--texto); text-decoration: none; font: 600 15px/1 var(--sans); }
.menu-movil a:hover { background: var(--gris-claro); }
.menu-movil a.destacado { color: var(--azul); }

/* ---------- Pie (SiteFooter) ---------- */
.pie { background: var(--negro); color: #fff; padding: 36px 20px 28px; }
.pie-int { max-width: 1216px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.pie-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; }
.pie-marca { display: flex; flex-direction: column; gap: 14px; }
.pie-logo { display: flex; align-items: center; gap: 10px; }
.pie-logo img { width: 40px; height: auto; }
.pie-logo span { font: 800 18px/1 var(--sans); letter-spacing: .2em; }
.pie-desc { font: 400 13.5px/1.55 var(--sans); color: var(--claro-2); }
.pie-col { display: flex; flex-direction: column; gap: 4px; font: 400 13.5px/1.55 var(--sans); }
.pie-empresa { gap: 8px; color: #D7D9DE; }
.pie-titulo { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8E929A; margin-bottom: 8px; }
.pie-empresa .pie-titulo { margin-bottom: 4px; }
.pie-col a { min-height: 36px; display: flex; align-items: center; color: #fff; text-decoration: none; }
.pie-col a:hover { text-decoration: underline; }
.pie-col a.acento { color: #7DB3FF; }
.pie-pagos { display: flex; flex-wrap: wrap; gap: 8px; }
.pie-pagos span { padding: 7px 10px; border: 1px solid #2E2F34; border-radius: 8px; font: 600 12px/1 var(--sans); color: #D7D9DE; }
.pie-pagos .marca-pago { display: inline-flex; align-items: center; padding: 6px 12px; }
.marca-pago img { display: block; height: 24px; width: auto; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 18px; border-top: 1px solid #222327; font: 400 12px/1.5 var(--mono); color: #8E929A; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: 16px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); text-decoration: none; }
.wa-flotante:hover { color: #fff; }
.wa-flotante span { display: none; }
.con-barra-inferior .wa-flotante { bottom: 88px; }
@media (min-width: 960px) {
    .wa-flotante { right: 24px; bottom: 24px; width: auto; height: auto; min-height: 56px; gap: 10px; padding: 0 22px 0 18px; border-radius: 999px; font: 700 15px/1 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
    .wa-flotante svg { width: 24px; height: 24px; }
    .wa-flotante span { display: inline; }
    .con-barra-inferior .wa-flotante { bottom: 24px; }
}

/* ---------- StockBadge ---------- */
.sello { display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 600 12px/1.3 var(--sans); max-width: 100%; }
.sello::before { content: ""; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; flex: none; }
.sello-ises { background: var(--verde-fondo); color: var(--verde-texto); }
.sello-ises::before { background: #1A9E4B; }
.sello-almacen { background: var(--azul-suave); color: #0A4AA8; }
.sello-almacen::before { background: var(--azul); }
.sello-agotado { background: #EEEEF1; color: var(--gris); }
.sello-agotado::before { background: #8A8D95; }
.sello-cotiza { background: #FFF3D6; color: #6E4500; }
.sello-cotiza::before { background: #D98E04; }

/* ---------- FilterChip ---------- */
.chip { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borde-control); background: #fff; color: var(--texto); font: 600 14px/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--negro); color: var(--texto); }
.chip-conteo { font: 500 12px/1 var(--mono); color: var(--gris-3); }
.chip.activo { padding: 0 12px 0 16px; border-color: var(--negro); background: var(--negro); color: #fff; }
.chip.activo:hover { color: #fff; }

/* ---------- ProductCard ---------- */
.rejilla-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tarjeta-producto { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; color: var(--texto); }
.tp-foto { position: relative; aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid #F0F0F2; }
.tp-foto-modelo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 500 11px/1.4 var(--mono); color: var(--gris-4); word-break: break-all; }
.tp-foto img, .tk-foto img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
.etiqueta-descuento { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px; background: var(--negro); color: #fff; font: 700 12px/1 var(--mono); }
.tp-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 13px 13px; }
.tp-marca { display: flex; flex-direction: column; gap: 2px; }
.tp-marca b { font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.tp-marca span { font: 400 11px/1.3 var(--mono); color: var(--gris-3); word-break: break-all; }
.tp-nombre { font: 600 14px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; color: var(--texto); text-decoration: none; }
.tp-nombre:hover { color: var(--texto); text-decoration: underline; }
.tp-sello { display: flex; min-width: 0; }
.tp-precio { display: flex; flex-direction: column; gap: 1px; margin-top: auto; padding-top: 4px; }
.tp-precio-fila { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tp-precio-actual { font: 700 18px/1.2 var(--mono); letter-spacing: -.02em; }
.tp-precio-antes { font: 400 12px/1.2 var(--mono); color: var(--gris-3); text-decoration: line-through; }
.tp-iva { font: 500 11px/1.3 var(--sans); color: var(--gris-3); }
.tp-boton { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font: 700 14px/1 var(--sans); text-decoration: none; cursor: pointer; }
.tp-boton:hover { background: var(--azul-hover); color: #fff; }
.tp-boton-avisar { border: 1px solid var(--borde-input); background: #fff; color: var(--texto); font-weight: 600; }
.tp-boton-avisar:hover { border-color: var(--negro); background: #fff; color: var(--texto); }
.tp-esqueleto-foto { aspect-ratio: 1 / 1; background: #F1F2F4; }
.tp-esqueleto { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tp-esqueleto span { display: block; border-radius: 4px; background: #ECEDF0; }

/* ---------- KitCard ---------- */
.tarjeta-kit { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; color: var(--texto); }
.tk-foto { position: relative; aspect-ratio: 16 / 10; background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px; border-bottom: 1px solid #F0F0F2; }
.tk-foto .tp-foto-modelo { padding: 0; }
.tk-etiquetas { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.tk-descuento { padding: 5px 8px; border-radius: 6px; background: var(--negro); color: #fff; font: 700 12px/1 var(--mono); }
.tk-kit { padding: 5px 8px; border-radius: 6px; background: var(--gris-claro); color: var(--texto); font: 700 11px/1 var(--mono); letter-spacing: .08em; }
.tk-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; }
.tk-titulo { display: flex; flex-direction: column; gap: 6px; }
.tk-nombre { font: 700 17px/1.3 var(--sans); letter-spacing: -.01em; text-wrap: pretty; }
.tk-para { font: 400 14px/1.45 var(--sans); color: var(--gris); text-wrap: pretty; }
.tk-incluye { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 12px; background: var(--gris-panel); }
.tk-incluye-titulo { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); }
.tk-item { display: grid; grid-template-columns: 30px 1fr; gap: 6px; font: 500 13.5px/1.35 var(--sans); }
.tk-item b { font: 700 13px/1.35 var(--mono); color: var(--azul); }
.tk-precio { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.tk-separado { font: 400 13px/1.2 var(--mono); color: var(--gris-3); }
.tk-actual { font: 700 26px/1.15 var(--mono); letter-spacing: -.03em; }
.tk-iva { font: 500 12px/1.3 var(--sans); color: var(--gris); }
.tk-iva b { color: var(--verde-texto); font-weight: 700; }
.tk-botones { display: flex; flex-direction: column; gap: 8px; }
.tk-comprar, .tk-cotizar { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; text-decoration: none; font: 700 15px/1 var(--sans); cursor: pointer; }
.tk-comprar { border: 0; background: var(--azul); color: #fff; }
.tk-comprar:hover { background: var(--azul-hover); color: #fff; }
.tk-cotizar { border: 1px solid var(--borde-input); background: #fff; color: var(--texto); font-weight: 600; }
.tk-cotizar:hover { border-color: var(--negro); color: var(--texto); }
.tk-cotizar svg { color: #128C4A; }

/* ---------- TrustStrip ---------- */
.confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.confianza-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; }
.confianza-icono { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--azul-suave); color: var(--azul); display: flex; align-items: center; justify-content: center; }
.confianza-texto { display: flex; flex-direction: column; gap: 3px; }
.confianza-texto b { font: 700 14px/1.3 var(--sans); }
.confianza-texto span { font: 400 13px/1.4 var(--sans); color: var(--gris); }

/* ---------- FAQ ---------- */
.faq { background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--borde-suave); }
.faq-pregunta { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; font: 700 15px/1.35 var(--sans); color: var(--texto); }
.faq-signo { flex: none; font: 500 20px/1 var(--mono); color: var(--azul); }
.faq-respuesta p { padding: 0 16px 16px; font: 400 14.5px/1.55 var(--sans); color: var(--texto-2); text-wrap: pretty; }
@media (min-width: 960px) {
    .faq-pregunta { min-height: 64px; padding: 12px 20px; font-size: 16px; }
    .faq-signo { font-size: 22px; }
    .faq-respuesta p { padding: 0 20px 20px; max-width: 640px; font-size: 15px; line-height: 1.6; }
}

/* =========================================================
   Kits: segmentos, lista y preguntas frecuentes
   ========================================================= */
.kits-cabeza { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.kits-cabeza h1 { font: 800 28px/1.1 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.kits-cabeza p { font: 400 15px/1.5 var(--sans); color: var(--gris); text-wrap: pretty; }
.kits-titulos { display: flex; flex-direction: column; gap: 6px; }
.kits-titulos h2 { font: 800 24px/1.15 var(--sans); letter-spacing: -.02em; }
.kits-titulos span { font: 400 15px/1.45 var(--sans); color: var(--gris); }
.kits-segmentos { padding-top: 24px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 16px; }
.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmento { position: relative; min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; color: var(--texto); }
.segmento-icono { color: var(--azul); display: flex; }
.segmento-textos { display: flex; flex-direction: column; gap: 3px; }
.segmento-textos b { font: 700 16px/1.2 var(--sans); }
.segmento-textos span { font: 500 12px/1 var(--mono); color: var(--gris); }
.segmento[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: #F3F8FE; }

.kits-lista { padding-top: 16px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 14px; }
.kits-nota { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font: 600 14px/1.3 var(--sans); }
.rejilla-kits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.kits-aclaracion { font: 400 13px/1.55 var(--sans); color: var(--gris); text-wrap: pretty; }
.kits-confianza { padding-bottom: 32px; }
.kits-faq { padding-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.kits-faq .kits-titulos { margin-bottom: 4px; }

@media (min-width: 640px) and (max-width: 959.98px) {
    .rejilla-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .kits-cabeza { padding-top: 28px; gap: 10px; }
    .kits-cabeza .migas { font-size: 12.5px; }
    .kits-cabeza h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; }
    .kits-cabeza p { max-width: 640px; font-size: 16px; }
    .kits-titulos { gap: 8px; }
    .kits-titulos h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.025em; }
    .kits-titulos span { font-size: 16px; }
    .kits-segmentos { padding-top: 40px; padding-bottom: 0; gap: 20px; }
    .segmentos { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .segmento { min-height: 112px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 20px; border-radius: 16px; }
    .segmento:hover { border-color: #9A9DA5; }
    .segmento[aria-pressed="true"]:hover { border-color: var(--azul); }
    .segmento-icono { width: 56px; height: 56px; border-radius: 14px; background: var(--azul-suave); align-items: center; justify-content: center; }
    .segmento-icono svg { width: 30px; height: 30px; }
    .segmento-textos { gap: 5px; }
    .segmento-textos b { font-size: 19px; }
    .segmento-textos span { font-size: 13px; }
    .kits-lista { padding-top: 24px; padding-bottom: 56px; gap: 16px; }
    .kits-nota { justify-content: flex-start; gap: 16px; font-size: 15px; }
    .kits-nota .enlace-boton { font-size: 15px; }
    .rejilla-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .kits-confianza { padding-bottom: 56px; }
    .kits-faq { padding-bottom: 72px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
    .kits-faq .kits-titulos { gap: 12px; margin-bottom: 0; }
    .kits-faq .kits-titulos span { line-height: 1.5; text-wrap: pretty; }
}

/* =========================================================
   B1 · Inicio
   ========================================================= */
.ini-hero { background: #fff; border-bottom: 1px solid var(--borde); }
.ini-hero-int { padding-top: 24px; padding-bottom: 22px; }
.ini-hero-texto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ini-hero h1 { font: 800 28px/1.1 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.buscador-grande { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border: 1.5px solid var(--negro); border-radius: 14px; background: #fff; }
.buscador-grande svg { flex: none; }
.buscador-grande input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 500 16px/1 var(--sans); }
.buscador-grande button { height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font: 700 14px/1 var(--sans); cursor: pointer; }
.buscador-grande button:hover { background: var(--azul-hover); }
.populares { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.populares::-webkit-scrollbar { display: none; }
.populares-titulo { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--gris); }
.pastilla { flex: none; min-height: 40px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--gris-claro); color: var(--texto); text-decoration: none; font: 600 13.5px/1 var(--sans); }
.pastilla:hover { background: #E6E6EA; color: var(--texto); }

.ini-categorias { padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; }
.cat:hover { color: var(--texto); }
.cat-icono { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; }
.cat-corto { font: 600 12px/1.25 var(--sans); text-align: center; }
.cat-largo { display: none; }

.ini-kits { padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.carrusel-kits { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
.carrusel-kits::-webkit-scrollbar { display: none; }
.carrusel-item { flex: none; width: 300px; scroll-snap-align: start; }

.ini-catalogo-envoltura { padding-top: 32px; }
.ini-catalogo { padding: 22px 20px; border-radius: 18px; background: var(--negro); color: #fff; }
.ini-catalogo-texto { display: flex; flex-direction: column; gap: 12px; }
.ini-catalogo h2 { font: 800 23px/1.15 var(--sans); letter-spacing: -.02em; }
.ini-catalogo p { font: 400 14.5px/1.5 var(--sans); color: var(--claro-1); text-wrap: pretty; }
.ini-catalogo-boton { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: var(--texto); text-decoration: none; font: 700 15px/1 var(--sans); }
.ini-catalogo-boton:hover { color: var(--texto); background: #EDEDF0; }
.ini-catalogo-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ini-catalogo-cats a { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; border-radius: 12px; background: var(--negro-2); border: 1px solid var(--borde-oscuro); color: #fff; text-decoration: none; font: 600 14.5px/1.2 var(--sans); }
.ini-catalogo-cats a:hover { border-color: #4A4B50; }
.ini-catalogo-cats svg { color: var(--azul-claro); flex: none; }

.ini-marcas { padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.marcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.marca { height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font: 800 13px/1 var(--sans); letter-spacing: .06em; }
.marca:hover { border-color: var(--negro); color: var(--texto); }

.ini-ofertas { padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.ini-confianza { padding-top: 32px; padding-bottom: 32px; }

@media (min-width: 640px) and (max-width: 959.98px) {
    .rejilla-ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .ini-hero-int { padding-top: 48px; padding-bottom: 48px; }
    .ini-hero-texto { gap: 20px; max-width: 760px; }
    .ini-hero h1 { font-size: 48px; line-height: 1.05; letter-spacing: -.035em; }
    .buscador-grande { height: 60px; gap: 12px; padding: 0 8px 0 18px; border-radius: 16px; }
    .buscador-grande svg { width: 24px; height: 24px; }
    .buscador-grande input { font-size: 17px; }
    .buscador-grande button { height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
    .populares { flex-wrap: wrap; align-items: center; overflow: visible; margin: 0; padding: 0; }

    .ini-categorias { padding-top: 40px; }
    .cats { grid-template-columns: repeat(8, 1fr); gap: 12px; }
    .cat { gap: 12px; padding: 20px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); }
    .cat:hover { border-color: var(--negro); }
    .cat-icono { width: auto; height: auto; border: 0; border-radius: 0; background: none; }
    .cat-icono svg { width: 34px; height: 34px; }
    .cat-corto { display: none; }
    .cat-largo { display: block; font: 700 14px/1.25 var(--sans); text-align: center; }

    .ini-kits { padding-top: 48px; gap: 18px; }
    .carrusel-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; padding-bottom: 0; }
    .carrusel-item { width: auto; }

    .ini-catalogo-envoltura { padding-top: 48px; }
    .ini-catalogo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 36px 40px; border-radius: 22px; }
    .ini-catalogo-texto { gap: 14px; }
    .ini-catalogo .etiqueta-azul { font-size: 12px; }
    .ini-catalogo h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.025em; }
    .ini-catalogo p { max-width: 480px; font-size: 16px; line-height: 1.55; }
    .ini-catalogo-boton { align-self: flex-start; padding: 0 22px; }

    .ini-marcas { padding-top: 48px; gap: 18px; }
    .marcas { grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .marca { height: 80px; border-radius: 14px; font-size: 16px; }

    .ini-ofertas { padding-top: 48px; gap: 18px; }
    .rejilla-ofertas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .ini-confianza { padding-top: 48px; padding-bottom: 64px; }
}

/* =========================================================
   B2 · Listado
   ========================================================= */
.lst-cabeza, .lst-controles, .lst-cuerpo { padding-left: 16px; padding-right: 16px; }
.lst-cabeza { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.lst-titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lst-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; }
.lst-titulo h1 { font: 800 26px/1.1 var(--sans); letter-spacing: -.025em; }
.lst-conteo { flex: none; font: 500 12px/1 var(--mono); color: var(--gris); }
.lst-orden { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--sans); }
.select-falso { min-height: 44px; display: flex; align-items: center; gap: 24px; padding: 0 14px; border: 1px solid var(--borde-control); border-radius: 10px; background: #fff; }

.lst-controles { padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lst-btn-filtros, .lst-btn-orden { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: #fff; color: var(--texto); cursor: pointer; }
.lst-btn-filtros { border: 1px solid var(--negro); font: 700 14px/1 var(--sans); }
.lst-btn-filtros[aria-expanded="true"] { background: var(--negro); color: #fff; }
.lst-btn-orden { gap: 6px; border: 1px solid var(--borde-control); font: 600 14px/1 var(--sans); }
.lst-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; }
.lst-chips::-webkit-scrollbar { display: none; }

.lst-cuerpo { padding-top: 12px; padding-bottom: 32px; }
.lst-filtros { display: none; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.lst-filtros.abierto { display: flex; }
.filtro-grupo { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--borde-suave); }
.filtro-grupo.con-espacio { gap: 10px; }
.filtro-grupo.ultimo { padding-bottom: 20px; border-bottom: 0; }
.filtro-titulo { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--gris); margin-bottom: 8px; }
.filtro-grupo.con-espacio .filtro-titulo { margin-bottom: 0; }
.filtro-opcion { min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font: 500 14px/1.3 var(--sans); }
.filtro-opcion.fuerte { font-weight: 600; }
.filtro-opcion:hover { color: var(--texto); }
.filtro-opcion:hover .casilla { border-color: var(--negro); }
.filtro-etiqueta { flex: 1; }
.filtro-conteo { font: 500 12px/1 var(--mono); color: var(--gris); }
.casilla { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #8A8D95; display: flex; align-items: center; justify-content: center; }
.casilla.marcada { border: 0; background: var(--azul); color: #fff; }
.filtro-sub { min-height: 40px; display: flex; align-items: center; justify-content: space-between; color: var(--texto); text-decoration: none; font: 500 14px/1.3 var(--sans); }
.filtro-sub:hover { color: var(--azul); }
.filtro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-precio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtro-precio input { height: 44px; min-width: 0; padding: 0 10px; border: 1px solid var(--borde-input); border-radius: 10px; font: 500 14px/1 var(--mono); }

.lst-resultados { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lst-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lst-activos .enlace-boton { padding: 0 10px; }
.lst-mas { padding-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lst-btn-mas { width: 100%; min-height: 48px; border: 1px solid var(--negro); border-radius: 12px; background: #fff; font: 700 15px/1 var(--sans); cursor: pointer; }
a.lst-btn-mas { display: flex; align-items: center; justify-content: center; color: var(--negro); text-decoration: none; }
.lst-mas span { font: 500 12px/1 var(--mono); color: var(--gris); }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 12px; font: 600 14px/1 var(--mono); }
.paginacion a, .paginacion span[aria-current] { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; text-decoration: none; }
.paginacion span[aria-current] { background: var(--negro); color: #fff; }
.paginacion a { background: #fff; border: 1px solid var(--borde); color: var(--texto); }
.paginacion a:hover { border-color: var(--negro); color: var(--texto); }
.paginacion .paginacion-siguiente { width: auto; padding: 0 16px; font-family: var(--sans); }
.paginacion-salto { width: 32px; text-align: center; color: var(--gris); }

.sin-resultados { margin-top: 4px; padding: 28px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sin-resultados-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--gris-claro); display: flex; align-items: center; justify-content: center; }
.sin-resultados-icono svg { width: 26px; height: 26px; }
.sin-resultados-titulo { font: 800 18px/1.25 var(--sans); }
.sin-resultados-texto { font: 400 14.5px/1.5 var(--sans); color: var(--gris); text-wrap: pretty; }
.sin-resultados-botones { width: 100%; display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) and (max-width: 959.98px) {
    .rejilla-listado { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .lst-cabeza, .lst-cuerpo { padding-left: 32px; padding-right: 32px; }
    .lst-cabeza { padding-top: 28px; gap: 8px; }
    .lst-cabeza .migas { font-size: 12.5px; }
    .lst-titulo-fila { align-items: flex-end; gap: 20px; }
    .lst-titulo { justify-content: flex-start; gap: 14px; flex: initial; }
    .lst-titulo h1 { font-size: 36px; letter-spacing: -.03em; }
    .lst-conteo { font-size: 13px; }
    .lst-cuerpo { padding-top: 24px; padding-bottom: 64px; display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 28px; align-items: start; }
    .lst-filtros { display: flex; margin-bottom: 0; }
    .rejilla-listado { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .sin-resultados { margin-top: 0; padding: 56px 24px; gap: 14px; }
    .sin-resultados-icono { width: 64px; height: 64px; }
    .sin-resultados-icono svg { width: 30px; height: 30px; }
    .sin-resultados-titulo { font-size: 22px; }
    .sin-resultados-texto { max-width: 420px; font-size: 15px; }
    .sin-resultados-botones { width: auto; flex-direction: row; justify-content: center; }
}

/* =========================================================
   B3 · Ficha de producto  ·  B4 · Solo con cotización
   ========================================================= */
.fi-migas { display: block; background: #fff; padding: 12px 16px 0; }
.fi-galeria { background: #fff; }
.fi-foto { position: relative; height: 320px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fi-restringida .fi-foto { height: 300px; }
.fi-foto-modelo { position: absolute; font: 500 12px/1 var(--mono); color: var(--gris-4); }
.fi-foto img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
.fi-foto .etiqueta-descuento { top: 12px; left: 16px; padding: 5px 8px; }
.fi-puntos { display: flex; justify-content: center; gap: 6px; padding-bottom: 16px; }
.fi-puntos span { width: 6px; height: 6px; border-radius: 3px; background: var(--borde-input); }
.fi-puntos span:first-child { width: 18px; background: var(--negro); }

.fi-info { padding: 18px 16px; background: #fff; border-top: 1px solid var(--borde-suave); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fi-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/1.3 var(--mono); color: var(--gris); }
.fi-meta b { font-weight: 700; color: var(--texto); letter-spacing: .06em; }
.fi-info h1 { font: 800 23px/1.2 var(--sans); letter-spacing: -.02em; text-wrap: pretty; }
.fi-sello { display: flex; }
.fi-precio { display: flex; flex-direction: column; gap: 4px; }
.fi-precio-fila { display: flex; align-items: baseline; gap: 10px; }
.fi-precio-actual { font: 700 32px/1 var(--mono); letter-spacing: -.03em; }
.fi-precio-antes { font: 400 15px/1 var(--mono); color: var(--gris-3); text-decoration: line-through; }
.fi-iva { font: 500 13px/1.3 var(--sans); color: var(--gris); }
.fi-msi { font: 600 14.5px/1.4 var(--sans); }
.fi-msi-total { font-weight: 400; color: var(--gris); }
.fi-spei { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--verde-fondo); color: var(--verde-texto); font: 600 14px/1.4 var(--sans); }
.fi-spei svg { flex: none; }
.fi-envio { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--borde); }
.fi-envio-titulo { font: 700 14px/1.3 var(--sans); }
.fi-cp { display: flex; gap: 8px; }
.fi-cp input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--borde-input); border-radius: 10px; font: 500 16px/1 var(--mono); }
.fi-cp button { min-height: 46px; padding: 0 16px; border: 1px solid var(--negro); border-radius: 10px; background: #fff; font: 700 14px/1 var(--sans); cursor: pointer; }
.fi-cp-ok { font: 500 13.5px/1.45 var(--sans); color: var(--texto); }
.fi-cp-error { font: 600 13.5px/1.45 var(--sans); color: #B02A18; }
.fi-pdf { min-height: 44px; display: flex; align-items: center; gap: 10px; font: 700 14.5px/1 var(--sans); text-decoration: none; }
.fi-garantia { font: 500 13.5px/1.45 var(--sans); color: var(--texto-2); }

.fi-cotiza { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--gris-panel); border: 1px solid var(--borde); }
.fi-cotiza-titulo { font: 800 17px/1.3 var(--sans); }
.fi-cotiza p { font: 400 14.5px/1.5 var(--sans); color: var(--texto-2); text-wrap: pretty; }
.fi-btn { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; text-decoration: none; font: 700 16px/1 var(--sans); }
.fi-btn-azul { background: var(--azul); color: #fff; }
.fi-btn-azul:hover { background: var(--azul-hover); color: #fff; }
.fi-btn-borde { border: 1px solid var(--borde-input); background: #fff; color: var(--texto); font-weight: 600; }
.fi-btn-borde:hover { border-color: var(--negro); color: var(--texto); }

.fi-specs { padding: 24px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.fi-extra-restringida .fi-specs { padding-bottom: 32px; }
.fi-specs h2, .fi-completa h2 { font: 800 20px/1.2 var(--sans); }
.tabla-specs { background: #fff; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.tabla-specs div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde-suave); font: 400 14px/1.4 var(--sans); }
.tabla-specs dt { color: var(--gris); }
.lista-caracteristicas { margin: 0; padding: 14px 14px 14px 32px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.45 var(--sans); }
.cat-arbol { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 8px 0 40px; }
.cat-arbol-grupo { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cat-arbol-titulo { display: flex; align-items: center; gap: 10px; font: 800 17px/1.2 var(--sans); color: var(--texto); text-decoration: none; }
.cat-arbol-hijas { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-arbol-hijas a { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--texto); text-decoration: none; }
@media (min-width: 768px) { .cat-arbol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cat-arbol { grid-template-columns: repeat(3, 1fr); } }
.tabla-specs dd { font-weight: 600; }
.fi-completa { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.fi-completa h2 { padding: 0 16px; }
.fi-completa-lista { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
.fi-completa-lista::-webkit-scrollbar { display: none; }
.fi-completa-lista > div { flex: none; width: 180px; }

.fi-instalacion { margin: 24px 16px 32px; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--negro); color: #fff; text-decoration: none; }
.fi-instalacion:hover { color: #fff; }
.fi-instalacion > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fi-instalacion b { font: 700 15px/1.3 var(--sans); }
.fi-instalacion span span { font: 400 13px/1.4 var(--sans); color: var(--claro-1); }

.cantidad { height: 48px; display: flex; align-items: center; border: 1px solid var(--borde-input); border-radius: 12px; background: #fff; }
.cantidad button { width: 44px; height: 46px; border: 0; background: transparent; font: 600 20px/1 var(--mono); cursor: pointer; }
.cantidad span { min-width: 24px; text-align: center; font: 700 15px/1 var(--mono); }
.btn-agregar { min-height: 48px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font: 700 15px/1 var(--sans); cursor: pointer; }
.btn-agregar:hover { background: var(--azul-hover); }
.agregado { box-shadow: 0 0 0 3px rgba(10, 108, 240, .3); }
.fi-aviso-envio { font: 400 13px/1.45 var(--sans); color: var(--gris); }
.barra-compra { position: sticky; bottom: 0; z-index: 25; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 16px 14px; background: #fff; border-top: 1px solid var(--borde); }

@media (min-width: 960px) {
    .fi-migas { max-width: 1216px; margin: 0 auto; padding: 24px 32px 0; background: none; font-size: 12.5px; }
    .fi { max-width: 1216px; margin: 0 auto; padding: 18px 32px 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
    .fi-galeria { background: none; display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
    .fi-miniaturas { display: flex; flex-direction: column; gap: 10px; }
    .fi-miniatura { width: 76px; height: 76px; border-radius: 12px; background: #fff; border: 2px solid var(--negro); display: flex; align-items: center; justify-content: center; padding: 8px; }
    .fi-miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .fi-miniatura-pdf { border: 1px solid var(--borde); flex-direction: column; gap: 4px; color: var(--texto); text-decoration: none; font: 700 11px/1 var(--mono); }
    .fi-miniatura-pdf:hover { border-color: var(--negro); color: var(--texto); }
    .fi-foto, .fi-restringida .fi-foto { height: auto; aspect-ratio: 1 / 1; border-radius: 18px; background: #fff; border: 1px solid var(--borde); padding: 48px; }
    .fi-foto-modelo { font-size: 13px; }
    .fi-foto .etiqueta-descuento { top: 16px; left: 16px; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
    .fi-info { padding: 0; background: none; border: 0; gap: 16px; }
    .fi-meta { gap: 6px 16px; font-size: 12.5px; }
    .fi-info h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.025em; }
    .fi-precio { gap: 6px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); }
    .fi-precio-fila { gap: 12px; }
    .fi-precio-actual { font-size: 40px; }
    .fi-precio-antes { font-size: 16px; }
    .fi-msi { font-size: 15px; }
    .fi-compra { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
    .fi-compra .cantidad { height: 52px; }
    .fi-compra .cantidad button { width: 48px; height: 50px; }
    .fi-compra .cantidad span { min-width: 28px; font-size: 16px; }
    .fi-compra .btn-agregar { min-height: 52px; font-size: 16px; }
    .fi-cotizar-instalacion { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--borde-input); color: var(--texto); text-decoration: none; font: 600 15px/1 var(--sans); }
    .fi-cotizar-instalacion:hover { border-color: var(--negro); color: var(--texto); }
    .fi-envio { gap: 10px; padding: 16px 20px; border-radius: 16px; background: #fff; }
    .fi-envio-titulo { font-size: 14.5px; }
    .fi-cp button { padding: 0 18px; }
    .fi-cp-ok, .fi-cp-error { font-size: 14px; }
    .fi-envio-sellos { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; border-top: 1px solid var(--borde-suave); font: 500 13.5px/1.4 var(--sans); color: var(--texto-2); }
    .fi-cotiza { padding: 20px; border-radius: 16px; background: #fff; }
    .fi-extra { max-width: 1216px; margin: 0 auto; padding: 48px 32px 64px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
    .fi-specs, .fi-extra-restringida .fi-specs { padding: 0; gap: 14px; }
    .fi-specs h2, .fi-completa h2 { font-size: 24px; }
    .tabla-specs { border-radius: 16px; }
    .tabla-specs div { grid-template-columns: 200px 1fr; gap: 16px; padding: 13px 20px; font-size: 14.5px; }
    .fi-completa { padding-top: 0; gap: 14px; }
    .fi-completa h2 { padding: 0; }
    .fi-completa-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 0; }
    .fi-completa-lista > div { width: auto; }
}

/* =========================================================
   C · Componentes y estados de pago
   ========================================================= */
.pago { display: flex; flex-direction: column; gap: 10px; }
.pago-opcion { border: 1px solid var(--borde-control); border-radius: 14px; background: #fff; overflow: hidden; }
.pago-opcion.activa { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.pago-cabeza { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.pago-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #8A8D95; display: flex; align-items: center; justify-content: center; }
.pago-opcion.activa .pago-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.pago-textos { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pago-textos b { font: 700 15px/1.3 var(--sans); }
.pago-textos span { font: 400 13px/1.35 var(--sans); color: var(--gris); }
.pago-total { font: 700 14px/1 var(--mono); }
.pago-marcas { display: flex; align-items: center; gap: 8px; }
.pago-marcas .marca-pago img { height: 20px; }
@media (max-width: 520px) { .pago-marcas { display: none; } }
.pago-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 0 16px 16px; }
.pago-tarjeta label { display: flex; flex-direction: column; gap: 6px; font: 600 13px/1 var(--sans); }
.pago-tarjeta .ancho, .pago-nota { grid-column: 1 / -1; }
.pago-tarjeta input { height: 46px; min-width: 0; padding: 0 12px; border: 1px solid var(--borde-input); border-radius: 10px; font: 500 15px/1 var(--mono); }
.pago-tarjeta input.sans { font-family: var(--sans); }
.pago-nota { font: 400 12.5px/1.45 var(--sans); color: var(--gris); }
.pago-msi { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 16px; }
.pago-msi > div { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 10px; font: 500 14px/1.3 var(--sans); }
.pago-msi small { font: 400 12.5px/1 var(--mono); color: var(--gris); }
.pago-texto { padding: 0 16px 16px; font: 400 13px/1.5 var(--sans); color: var(--gris); }
.pago-sellos { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pago-sellos span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--gris-claro); font: 600 12px/1 var(--sans); }
.pago-sellos svg { color: var(--verde-texto); }

.alerta { display: flex; gap: 12px; padding: 16px; border-radius: 14px; }
.alerta > svg { flex: none; }
.alerta-error { background: #FDECEA; border: 1px solid #F3C2BB; }
.alerta-error > svg { color: #B02A18; }
.alerta-aviso { background: #FFF3D6; border: 1px solid #F0D58F; }
.alerta-aviso > svg { color: #6E4500; }
.alerta-cuerpo { display: flex; flex-direction: column; gap: 6px; }
.alerta-titulo { font: 800 15px/1.3 var(--sans); }
.alerta-error .alerta-titulo { color: #7A1A0D; }
.alerta-aviso .alerta-titulo { color: #4F3200; }
.alerta-texto { font: 400 14px/1.5 var(--sans); color: var(--texto-2); }
.alerta-botones { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.btn-chico { min-height: 44px; padding: 0 16px; border-radius: 10px; font: 700 14px/1 var(--sans); cursor: pointer; }
.btn-chico.negro { border: 0; background: var(--negro); color: #fff; }
.btn-chico.borde { border: 1px solid var(--borde-input); background: #fff; font-weight: 600; }

.comp { padding-top: 32px; padding-bottom: 64px; }
.comp h1 { font: 800 28px/1.1 var(--sans); letter-spacing: -.02em; }
.comp-sub { margin: 8px 0 24px; font: 400 14px/1.4 var(--mono); color: var(--gris); }
.comp-rejilla { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.comp-panel { padding: 24px; border-radius: 20px; background: #fff; display: flex; flex-direction: column; gap: 16px; max-width: 100%; min-width: 0; }
.comp-panel label { min-width: 0; }
.comp-etiqueta { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--gris); }
.comp-ancho { width: 100%; }
.comp-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.comp-kit { width: 388px; }
.comp-columna { display: flex; flex-direction: column; gap: 28px; width: 420px; max-width: 100%; }
.comp-sellos { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.comp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.comp-selector { width: 440px; }

/* ---------- Página de error ---------- */
.pagina-error { padding-top: 64px; padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pagina-error-codigo { font: 700 14px/1 var(--mono); padding: 6px 10px; border-radius: 8px; background: var(--negro); color: #fff; }
.pagina-error h1 { font: 800 28px/1.15 var(--sans); letter-spacing: -.02em; }
.pagina-error p { font: 400 15px/1.5 var(--sans); color: var(--gris); }
.pagina-error-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }
[data-carrito-conteo][hidden] { display: none; }

/* =========================================================
   Carrito, checkout y pedido
   ========================================================= */
.form-agregar { display: contents; }
.saltar-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja { padding-top: 20px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.caja-titulo { font: 800 26px/1.15 var(--sans); letter-spacing: -.02em; }
.caja-subtitulo { display: flex; align-items: center; gap: 10px; font: 800 18px/1.2 var(--sans); }
.caja-num { width: 26px; height: 26px; border-radius: 50%; background: var(--negro); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--mono); flex: none; }
.caja-rejilla { display: flex; flex-direction: column; gap: 16px; }
.caja-pasos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.caja-bloque { background: #fff; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.caja-lateral { gap: 14px; }
.caja-nota { font: 400 13px/1.5 var(--sans); color: var(--gris); }
.caja-seguir { align-self: center; }
.caja-vacio { background: #fff; border-radius: 18px; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--gris); }
.caja-vacio p { font: 600 16px/1.4 var(--sans); color: var(--texto); }
.caja-folio { align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: var(--negro); color: #fff; font-size: 13px; }
.caja-pagar { width: 100%; border: 0; cursor: pointer; }
.caja-pagar[disabled] { opacity: .6; cursor: progress; }
.caja-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 600 15px/1.3 var(--sans); cursor: pointer; }
.caja-check input { width: 20px; height: 20px; accent-color: var(--azul); }
.caja-factura { display: flex; flex-direction: column; gap: 12px; }
.caja-bloque:has(.caja-check input:not(:checked)) .caja-factura { display: none; }

.campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-etiqueta { font: 600 13px/1.2 var(--sans); }
.campo input, .campo select, .carrito-cantidad select {
    height: 48px; min-width: 0; width: 100%; padding: 0 12px; border: 1px solid var(--borde-input); border-radius: 10px;
    background: #fff; font: 500 16px/1 var(--sans); color: var(--texto);
}
.campo input.mayus { text-transform: uppercase; }
.campo.con-error input, .campo.con-error select { border-color: #B02A18; box-shadow: inset 0 0 0 1px #B02A18; }
.campo-ayuda { font: 400 12.5px/1.4 var(--sans); color: var(--gris); }
.campo-error { font: 600 13px/1.4 var(--sans); color: #B02A18; }

.pago-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pago-opcion:has(.pago-input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.pago-opcion:has(.pago-input:checked) .pago-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.pago-opcion:has(.pago-input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.pago-opcion:not(:has(.pago-input:checked)) .pago-detalle { display: none; }
.pago-nota-error { color: #B02A18; font-weight: 600; }

.resumen { display: flex; flex-direction: column; gap: 10px; }
.resumen-lineas { list-style: none; margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 8px; }
.resumen-lineas li { display: flex; gap: 8px; font: 500 14px/1.35 var(--sans); }
.resumen-cant { font: 700 13px/1.35 var(--mono); flex: none; }
.resumen-nombre { flex: 1; min-width: 0; }
.resumen-lineas .mono { flex: none; font-size: 13.5px; }
.resumen-totales { display: flex; flex-direction: column; gap: 8px; }
.resumen-totales > div { display: flex; justify-content: space-between; gap: 12px; font: 500 15px/1.3 var(--sans); }
.resumen-totales dd { font-size: 15px; }
.resumen-total { padding-top: 8px; border-top: 1px solid var(--borde); }
.resumen-total dt, .resumen-total dd { font-weight: 800; font-size: 19px; }
.resumen-gratis { color: var(--verde-texto); font-family: var(--sans); }
.resumen-iva { font: 600 12.5px/1.4 var(--sans); color: var(--gris); }
.resumen-nota { font: 400 13px/1.45 var(--sans); color: var(--gris); }

.carrito-lineas { gap: 0; padding-top: 4px; padding-bottom: 4px; }
.carrito-linea { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--borde-suave); }
.carrito-linea:last-child { border-bottom: 0; }
.carrito-foto { position: relative; width: 76px; height: 76px; border-radius: 12px; background: var(--gris-panel); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.carrito-foto img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.carrito-foto .tp-foto-modelo { font-size: 9px; }
.carrito-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.carrito-nombre { font: 700 15px/1.3 var(--sans); color: var(--texto); text-decoration: none; }
.carrito-nombre:hover { color: var(--azul); }
.carrito-meta, .carrito-unitario { font: 500 12.5px/1.3 var(--mono); color: var(--gris); }
.carrito-acciones { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.carrito-cantidad { display: flex; align-items: center; gap: 8px; }
.carrito-cantidad select { width: 84px; font-family: var(--mono); }
.carrito-quitar { color: var(--gris); font-weight: 600; }
.carrito-importe { margin-left: auto; font-size: 16px; font-weight: 700; }

.pedido-estado { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: #fff; }
.pedido-estado > svg { flex: none; color: var(--azul); }
.pedido-ok > svg { color: var(--verde-texto); }
.pedido-estado h1 { font: 800 22px/1.2 var(--sans); letter-spacing: -.01em; }
.pedido-estado p { margin-top: 6px; font: 400 15px/1.5 var(--sans); color: var(--texto-2); }
.pedido-barras { max-width: 100%; height: auto; background: #fff; }
.simulador-caja { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--borde-input); border-radius: 12px; }
.simulador { max-width: 560px; }

.aviso-carrito {
    position: fixed; left: 16px; right: 16px; bottom: 84px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-radius: 14px; background: var(--negro); color: #fff; font: 600 14px/1.35 var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.aviso-carrito a { color: var(--azul-claro); font-weight: 700; white-space: nowrap; }

@media (min-width: 960px) {
    .caja { padding-top: 32px; gap: 20px; }
    .caja-titulo { font-size: 32px; }
    .caja-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 24px; }
    .caja-lateral { position: sticky; top: 196px; }
    .caja-bloque { padding: 28px; }
    .campos-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .campo-ancho { grid-column: 1 / -1; }
    .carrito-linea { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
    .carrito-foto { width: 96px; height: 96px; }
    .carrito-acciones { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
    .carrito-importe { margin-left: 0; order: -1; }
    .caja-pedido { max-width: 820px; }
    .aviso-carrito { left: auto; right: 32px; bottom: 32px; width: 380px; }
}

/* ---------- Páginas legales ---------- */
.legal { padding-top: 20px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.legal-texto { background: #fff; border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; gap: 22px; }
.legal-texto h1 { font: 800 28px/1.15 var(--sans); letter-spacing: -.02em; }
.legal-fecha { font: 500 13px/1.4 var(--mono); color: var(--gris); margin-top: -12px; }
.legal-texto section { display: flex; flex-direction: column; gap: 10px; }
.legal-texto h2 { font: 800 18px/1.3 var(--sans); }
.legal-texto h3 { font: 700 15px/1.3 var(--sans); margin: 4px 0 0; }
.legal-texto p, .legal-texto li { font: 400 15px/1.6 var(--sans); color: var(--texto-2); }
.legal-texto ul, .legal-texto ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal-otras { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-otras a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font: 600 14px/1 var(--sans); }
.caja-acepto { align-items: flex-start; font-weight: 500; font-size: 14px; line-height: 1.45; }
.caja-acepto input { flex: none; margin-top: 2px; }
.caja-acepto.con-error { color: #B02A18; }
@media (min-width: 960px) {
    .legal { padding-top: 32px; }
    .legal-texto { padding: 40px 48px; }
    .legal-texto h1 { font-size: 34px; }
}

/* ---------- Cuenta del cliente ---------- */
.caja-cuenta { max-width: 640px; }
.cuenta-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cuenta-menu a, .cuenta-menu button {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--borde-input); border-radius: 10px;
    background: #fff; color: var(--texto); font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.cuenta-menu a[aria-current="page"] { background: var(--negro); border-color: var(--negro); color: #fff; }
.cuenta-menu form { margin-left: auto; }
.cuenta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cuenta-pedido {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-radius: 14px;
    background: #fff; color: var(--texto); text-decoration: none; font: 500 14px/1.3 var(--sans);
}
.cuenta-pedido:hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--azul); }
.cuenta-pedido-folio { font-weight: 700; }
.cuenta-pedido-total { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
.cuenta-pedido-estado { font-weight: 600; color: var(--azul); }
.cuenta-pedido-fecha { grid-column: 2; grid-row: 2; text-align: right; color: var(--gris); }