/* deTodo.com — Estilos principales (publico) */

/* ── Reset & Variables ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Un <dialog> abierto con showModal() se centra gracias al `margin: auto`
 * que le pone la hoja de estilos del navegador. El `margin: 0` del reset de
 * arriba lo pisaba, asi que los CUATRO dialogs de la app (buscar por imagen,
 * importar por link, agregar al carrito y direccion del perfil) se dibujaban
 * pegados a la esquina superior izquierda y se salian de la pantalla.
 *
 * Se restaura aqui, en el reset, y no modal por modal: el que se agregue
 * manana tiene que nacer centrado sin que nadie se acuerde de esto.
 *
 * `:modal` matchea solo los abiertos con showModal(); un dialog no-modal
 * (show()) debe quedarse donde el layout lo ponga.
 */
dialog:modal {
    margin: auto;
}

/* El atributo `hidden` vale `display: none`, pero eso vive en la hoja del
 * navegador y cualquier regla de clase con `display` le gana por
 * especificidad. Sin esto, un elemento con `hidden` y `display:flex` (como el
 * badge del carrito) se sigue viendo — un circulo rojo vacio en el header.
 * El `!important` esta justificado: `hidden` significa oculto, sin matices,
 * y debe ganarle a cualquier `display` de clase.
 */
[hidden] {
    display: none !important;
}

:root {
    /* Paleta detodo.com — azul confianza único (monocolor por pedido del cliente) */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-darker: #1e3a8a;
    --color-primary-light: #dbeafe;
    --color-primary-50: #eff6ff;
    --color-accent: #f59e0b;
    --color-accent-dark: #b45309;
    /* Ambar claro: estaba hardcodeado 4 veces como #fef3c7 */
    --color-accent-light: #fef3c7;
    --color-success: #10b981;
    --color-success-dark: #047857;
    --color-success-light: #d1fae5;
    --color-danger: #ef4444;
    --color-danger-dark: #b91c1c;
    --color-danger-light: #fee2e2;
    --color-purple: #7c3aed;
    --color-purple-light: #ede9fe;

    /* Texto y superficies */
    --color-text: #0f172a;
    --color-text-light: #475569;
    --color-text-muted: #94a3b8;
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-white: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-card-shadow: rgba(15, 23, 42, 0.06);

    /* Elevación */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    /* Pill: antes se escribia 999px o 20px indistintamente para lo mismo */
    --radius-pill: 999px;

    /* Escala de espacio (base 4px). Antes no existia ninguna: la home tenia
       ~17 ritmos verticales distintos y habia 61 border-radius literales.
       Toda medida nueva sale de aqui. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Movimiento: curva y duraciones unicas (150-300ms segun el design system).
       Antes toda transicion usaba el 'ease' implicito del navegador. */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 150ms;
    --dur: 200ms;

    /* Mascara de estrella para el rating (ver .estrellas). Va como data URI
       para no agregar un request ni depender de una fuente de iconos. */
    --estrellas-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --max-width: 1280px;
    --navbar-h: 104px;
    --topbar-h: 36px;
    --catbar-h: 48px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

html {
    overflow-x: hidden;
}

/* Solo para lectores de pantalla: label visible para asistencia tecnica pero
   fuera de la pantalla. No usar `display:none` — eso lo esconde tambien del
   lector, que es justo lo contrario de lo que se busca. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

ul {
    list-style: none;
}

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

input, select {
    font: inherit;
    color: inherit;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* El padding lateral NO es decorativo: sin el, `.navbar__inner` era el unico
 * contenedor del sitio pegado al borde de la pantalla (todos los demas usan
 * 16px), y en movil el logo quedaba literalmente tocando el filo — se veia
 * cortado. Verificado a 390px: .navbar__inner en x=0 con padding 0, contra
 * .container, .topbar__inner y .categorias-bar__inner en 16px. */
.navbar__inner {
    display: flex;
    align-items: center;
    height: var(--navbar-h);
    gap: var(--space-4);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.navbar__logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar__logo span {
    color: var(--color-primary);
}

.navbar__search {
    flex: 1;
    max-width: 560px;
    display: flex;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
}

.navbar__search:focus-within {
    border-color: var(--color-primary);
}

.navbar__search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 12px;
    background: transparent;
}

.navbar__search button {
    padding: 8px 12px;
    color: var(--color-text-light);
    transition: color 0.2s;
}

.navbar__search button:hover {
    color: var(--color-primary);
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.navbar__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.navbar__link:hover {
    color: var(--color-primary);
}

/* Target tactil: la hamburguesa es LA navegacion en movil y medía 40x32. */
.navbar__hamburger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.navbar__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-sm);
    transition: transform 0.2s;
}

/* ── Barra de categorias ────────────────────────────────────────── */
.categorias-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.categorias-bar__inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    height: var(--catbar-h);
    align-items: center;
}

.categorias-bar__inner::-webkit-scrollbar {
    display: none;
}

.categorias-bar__item {
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-light);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
}

.categorias-bar__item:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.categorias-bar__item--active {
    color: var(--color-white);
    background: var(--color-primary);
}

.categorias-bar__item--active:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
}

/* ── Flash messages ─────────────────────────────────────────────── */
.flash-container {
    padding-top: 12px;
}

.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.flash--success { background: #d1fae5; color: #065f46; }
.flash--error   { background: #fee2e2; color: #991b1b; }
.flash--info    { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3b82f6 100%);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    margin: 24px 0;
    color: var(--color-white);
}

.hero__content h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.hero__content p {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius);
    transition: all 0.2s;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.btn--primary:hover {
    background: var(--color-primary-light);
}

.btn--outline {
    border-color: var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
}

.btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--sm {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.8125rem;
}

/* ── Secciones ──────────────────────────────────────────────────── */
.seccion {
    margin: 40px 0;
}

.seccion__titulo {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* ── Grid de productos ──────────────────────────────────────────── */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* Relacionados: columnas fijas para que las filas siempre cierren simetricas
   (el template corta a 8/4/2 items) */
.productos-grid--relacionados { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .productos-grid--relacionados { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tarjeta de producto ────────────────────────────────────────── */
.producto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    /* 16px = mismo radio que .oferta-card y .masvendido-card. Antes esta
       tarjeta usaba 12px sin borde y se veia de otra familia que sus vecinas
       en la misma pantalla. */
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.producto-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Enlace estirado: la tarjeta entera es clickeable sin anidar el boton
   dentro del <a> (HTML invalido + trampa para lectores de pantalla). */
.producto-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.producto-card__link:focus-visible {
    outline: none;
}

.producto-card__link:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: var(--radius-xl);
}

.producto-card--oferta {
    border-color: var(--color-accent);
}

.producto-card__badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    z-index: 2;
}

/* Fondo BLANCO, no gris: las fotos de Amazon/eBay vienen recortadas sobre
   blanco, asi que sobre gris se ve el rectangulo del JPG y la grilla queda
   con cara de catalogo scrapeado. */
.producto-card__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    overflow: hidden;
}

.producto-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.producto-card__placeholder {
    color: var(--color-border);
}

.producto-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

/* 15px/600: mismo peso que .oferta-card__name. El min-height reserva dos
   lineas para que el precio quede alineado en toda la fila del grid. */
.producto-card__nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-card__nombre a {
    color: inherit;
    text-decoration: none;
}

/* ── Condicion del producto (Nuevo / Caja abierta / Usado / ...) ──────
 * Pedido del cliente 2026-07-27 + Proteccion al Consumidor (Decreto
 * 006-2003): la condicion real tiene que verse ANTES de comprar, en
 * espanol y sin tener que leer la descripcion.
 *
 * El ambar aqui es FUNCIONAL (advertencia), no color de marca: el design
 * system lo permite justo para este uso. El color nunca va solo — siempre
 * acompanado del texto (WCAG 1.4.1).
 */
.producto-card__condicion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.producto-card__condicion::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* "Nuevo" va discreto a proposito: si todo grita, nada grita. */
.producto-card__condicion--nuevo {
    color: var(--color-success-dark);
}

/* Prominente: usado, caja abierta, reacondicionado. Fondo lleno para que
   se lea de un vistazo aunque el cliente no lea nada mas. */
.producto-card__condicion--advertencia,
.producto-card__condicion--critico,
.producto-card__condicion--desconocido {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.producto-card__condicion--advertencia {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
}

.producto-card__condicion--critico {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.producto-card__condicion--desconocido {
    background: var(--color-border-light);
    color: var(--color-text-light);
}

.producto-card__condicion--advertencia::before,
.producto-card__condicion--critico::before,
.producto-card__condicion--desconocido::before {
    display: none;
}

.producto-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* ── Condicion en la ficha del producto ──────────────────────────────
 * Misma semantica de color que en la tarjeta, pero con mas peso: aqui es
 * donde se decide la compra, asi que un "Usado" tiene que ser imposible de
 * pasar por alto aunque el cliente no lea nada mas de la pagina.
 */
.producto-info__condicion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.producto-info__condicion-nota {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.9;
}

.producto-info__condicion--nuevo {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.producto-info__condicion--advertencia {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-left: 4px solid var(--color-accent);
}

.producto-info__condicion--critico {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    border-left: 4px solid var(--color-danger);
}

.producto-info__condicion--desconocido {
    background: var(--color-border-light);
    color: var(--color-text);
    border-left: 4px solid var(--color-border);
}

.producto-card__precio {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.precio-gtq {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    /* tabular-nums: los precios no bailan de fila a fila en la grilla */
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.precio-usd {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.precio-tachado {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* -dark, no el tono base: --color-success sobre blanco da 2.54:1 */
.producto-card__ahorro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-success-light);
    color: var(--color-success-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Estrellas de rating ────────────────────────────────────────── */
/* ── Estrellas de rating ─────────────────────────────────────────────
 * Antes se escribian los caracteres Unicode ★ y ☆ en textContent. Tres
 * problemas: (1) `--color-accent` sobre blanco da 2.15:1, ilegible;
 * (2) no habia media estrella, asi que un 4.5 se veia identico a un 4.0;
 * (3) el glifo cambia de forma y de ancho segun la fuente del sistema.
 *
 * Con una mascara SVG el relleno es un porcentaje real: media estrella sale
 * gratis, el tamano es identico en todas las plataformas, y el color es
 * `--color-accent-dark` (5.02:1 sobre blanco).
 */
.estrellas {
    --rating: 0%;
    position: relative;
    display: inline-block;
    width: 84px;
    height: 16px;
    vertical-align: -2px;
    /* Fondo = estrella vacia */
    background: var(--color-border);
    -webkit-mask: var(--estrellas-mask);
    mask: var(--estrellas-mask);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

/* Relleno = porcentaje exacto del rating */
.estrellas::before {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--rating);
    background: var(--color-accent-dark);
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    flex-wrap: wrap;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb__actual {
    color: var(--color-text);
    font-weight: 500;
}

/* ── Detalle de producto ────────────────────────────────────────── */
.producto-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

/* Galeria */
.galeria__principal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}

.galeria__principal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 20px;
}

.galeria__placeholder {
    color: var(--color-text-light);
}

.galeria__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
}

.galeria__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    padding: 4px;
    background: var(--color-white);
    transition: border-color 0.2s;
}

.galeria__thumb:hover,
.galeria__thumb--active {
    border-color: var(--color-primary);
}

.galeria__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Info del producto */
.producto-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.producto-info__nombre {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.producto-info__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.producto-info__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.tag--amazon  { background: #fef3c7; color: #92400e; }
.tag--ebay    { background: #dbeafe; color: #1e3a8a; }
.tag--shopify { background: #d1fae5; color: #065f46; }
.tag--eshop   { background: #ede9fe; color: #5b21b6; }
/* Badge de producto digital / gift card. El design system reserva el morado
   justo para esto; antes iba con un indigo hardcodeado fuera de la paleta.
   Contraste #7c3aed sobre #ede9fe = 5.48:1 (AA para texto pequeno). */
.tag--digital { background: var(--color-purple-light); color: var(--color-purple); }
.tag--stock   { background: #d1fae5; color: #065f46; }
.tag--agotado { background: #fee2e2; color: #991b1b; }

.producto-info__precio {
    background: var(--color-primary-light);
    padding: 16px 20px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.precio-hint {
    font-size: 0.8125rem;
    color: var(--color-primary-darker);
}

.precio-principal {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
}

.precio-secundario {
    font-size: 1rem;
    color: var(--color-text-light);
}

.precio-tc {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.producto-info__entrega {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.producto-info__entrega svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
}

.producto-info__entrega small {
    display: block;
    color: var(--color-text-light);
    font-size: 0.75rem;
    margin-top: 2px;
}

.producto-info__variaciones h3 {
    font-size: 0.9375rem;
    margin-bottom: 10px;
}

.variacion-grupo {
    margin-bottom: 10px;
}

.variacion-grupo label {
    font-size: 0.8125rem;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.variacion-opciones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.variacion-chip {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    background: var(--color-white);
}

.producto-info__acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Fila principal de compra: cantidad + boton grande (estilo Onos) */
.producto-info__compra-fila {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.producto-info__cantidad-grupo { flex-shrink: 0; }

/* ── Inputs de formulario globales (mismo lenguaje que el buscador del nav:
      bordes redondeados, foco azul suave) ─────────────────────────────── */
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-input,
.form-select,
textarea.form-input {
    width: 100%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
}

.form-input::placeholder { color: var(--color-text-muted); }

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* ── Validacion de formularios (validacion.js) ───────────────────────── */
.form-input.is-invalid,
.form-select.is-invalid,
textarea.form-input.is-invalid {
    border-color: var(--color-danger);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
textarea.form-input.is-invalid:focus {
    box-shadow: 0 0 0 4px var(--color-danger-light);
}

.field-error-msg {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--color-danger-dark);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
    cursor: pointer;
}

.form-input--cantidad {
    width: 84px;
    text-align: center;
    min-height: 48px;
}

.btn--comprar {
    flex: 1;
    justify-content: center;
    padding: 13px 24px;
    font-size: 0.9375rem;
    min-height: 48px;
}

.producto-info__acciones-secundarias {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.producto-info__acciones-secundarias .btn { flex: 1; justify-content: center; white-space: nowrap; }
.producto-info__acciones-secundarias form { flex: 1; display: flex; }
.producto-info__acciones-secundarias form .btn { width: 100%; }

/* Garantias de compra (estilo Onos detail-guarantees) */
.producto-garantias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 4px;
}

.producto-garantias__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.producto-garantias__item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Descripcion como tarjeta a lo ancho (estilo Onos description-card) */
.producto-descripcion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 48px;
}

.producto-descripcion__titulo {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.descripcion-texto {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text-light);
    white-space: pre-line;
    max-width: 85ch;
}

@media (max-width: 560px) {
    .producto-garantias { grid-template-columns: 1fr; gap: 8px; }
    .producto-descripcion { padding: 20px; }
    .producto-info__acciones-secundarias { flex-direction: column; }
}

/* ── Busqueda ───────────────────────────────────────────────────── */
.busqueda-page {
    padding-top: 20px;
    padding-bottom: 40px;
}

.busqueda-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}

.busqueda-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.busqueda-total {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.busqueda-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

.busqueda-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.busqueda-toolbar #filtros-abrir-btn {
    display: none;
}

/* ── Filtros sidebar ────────────────────────────────────────────── */
.filtros {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--color-border);
    align-self: start;
    position: sticky;
    top: calc(var(--navbar-h) + var(--catbar-h) + 16px);
}

.filtros__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.filtros__header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.filtros__cerrar {
    display: none;
    font-size: 1.5rem;
    color: var(--color-text-light);
}

.filtro-grupo {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.filtro-grupo:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filtro-grupo h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.filtro-lista li {
    margin-bottom: 2px;
}

.filtro-link {
    display: block;
    padding: 6px 10px;
    font-size: 0.875rem;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.filtro-link:hover {
    background: var(--color-primary-light);
}

.filtro-link--active {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 500;
}

.filtro-link--active:hover {
    background: var(--color-primary-dark);
}

.filtro-lista--sub {
    margin-left: 12px;
}

.filtro-rango {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.filtro-rango input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
    font-size: 0.8125rem;
}

.filtro-rango input:focus {
    border-color: var(--color-primary);
}

.filtro-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    font-size: 0.8125rem;
    outline: none;
}

.filtro-select:focus {
    border-color: var(--color-primary);
}

/* ── Scroll infinito ────────────────────────────────────────────── */
.scroll-loader,
.scroll-end,
.scroll-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--color-text-light);
    font-size: 0.875rem;
}

/* Segunda linea del estado vacio: apunta a la caja de "pega el link", que es
   la unica salida real cuando no tenemos el producto en catalogo. */
.scroll-empty__hint {
    margin-top: 8px;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.scroll-empty__hint a {
    color: var(--color-primary);
    font-weight: 600;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
    background: var(--color-text);
    color: #d1d5db;
    margin-top: 60px;
}

.footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 40px 16px;
}

.footer__col h4 {
    color: var(--color-white);
    font-size: 1rem;
    margin-bottom: 12px;
}

.footer__col p,
.footer__col li {
    font-size: 0.875rem;
    line-height: 1.8;
}

.footer__col a:hover {
    color: var(--color-white);
}

.footer__bottom {
    border-top: 1px solid #374151;
    padding: 16px;
    text-align: center;
    font-size: 0.8125rem;
}

/* ── Scroll to top ──────────────────────────────────────────────── */
.scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
    z-index: 90;
}

.scroll-top:hover {
    transform: translateY(-2px);
    background: var(--color-primary-dark);
}

.scroll-top--visible {
    opacity: 1;
    visibility: visible;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar__actions {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    .navbar__search {
        max-width: none;
    }

    .hero {
        padding: 32px 24px;
    }

    .hero__content h1 {
        font-size: 1.5rem;
    }

    .productos-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .producto-detalle {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .busqueda-layout {
        grid-template-columns: 1fr;
    }

    .filtros {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        border-radius: 0;
        overflow-y: auto;
        border: none;
    }

    .filtros--open {
        display: block;
    }

    .filtros__cerrar {
        display: block;
    }

    .busqueda-toolbar #filtros-abrir-btn {
        display: inline-flex;
    }

    .precio-principal {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .productos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .producto-card__info {
        padding: 10px 12px 14px;
    }

    .producto-card__nombre {
        font-size: 0.8125rem;
    }

    .precio-gtq {
        font-size: 1rem;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Estilos agregados — items 1.5 a 1.13 (Sesion 3, 2026-04-10)
   ────────────────────────────────────────────────────────────────── */

/* ── Accesibilidad: focus visible global ─────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Header de seccion con link "Ver todas" ──────────────────────── */
.seccion__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.seccion__header .seccion__titulo {
    margin-bottom: 0;
}

.seccion__link {
    color: var(--color-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: color 0.15s;
}

.seccion__link:hover {
    color: var(--color-primary-dark);
}

/* ── Estado vacio generico ───────────────────────────────────────── */
.estado-vacio {
    text-align: center;
    padding: 80px 16px;
    color: var(--color-text-light);
}

.estado-vacio p {
    margin-bottom: 16px;
}

/* ── Pagina ofertas ──────────────────────────────────────────────── */
.ofertas-header {
    text-align: center;
    padding: 40px 16px 24px;
}

.ofertas-header__subtitulo {
    color: var(--color-text-light);
    max-width: 600px;
    margin: 8px auto 0;
    font-size: 1rem;
}

.producto-card__expira {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-danger-dark);
    font-weight: 600;
}

/* ── Pagina ayuda ────────────────────────────────────────────────── */
.ayuda-header {
    text-align: center;
    padding: 40px 16px 24px;
}

.ayuda-header__subtitulo {
    color: var(--color-text-light);
    max-width: 600px;
    margin: 8px auto 0;
}

.ayuda-acordeon {
    max-width: 820px;
    margin: 24px auto 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ayuda-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ayuda-item:hover {
    box-shadow: 0 2px 8px var(--color-card-shadow);
}

.ayuda-item__titulo {
    padding: 18px 22px;
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 48px;
    color: var(--color-text);
}

.ayuda-item__titulo::-webkit-details-marker {
    display: none;
}

.ayuda-item__titulo::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: transform 0.2s;
}

.ayuda-item[open] .ayuda-item__titulo::after {
    content: '−';
}

.ayuda-item__cuerpo {
    padding: 0 22px 22px;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}

.ayuda-item__cuerpo h4 {
    color: var(--color-text);
    margin: 16px 0 8px;
    font-size: 1rem;
}

.ayuda-item__cuerpo h4:first-child {
    margin-top: 0;
}

.ayuda-item__cuerpo p,
.ayuda-item__cuerpo li {
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 8px;
}

.ayuda-item__cuerpo ol,
.ayuda-item__cuerpo ul {
    padding-left: 24px;
    margin-bottom: 12px;
}

.ayuda-item__cuerpo ol {
    list-style: decimal;
}

.ayuda-item__cuerpo ul {
    list-style: disc;
}

.ayuda-item__cuerpo a {
    color: var(--color-primary);
    text-decoration: underline;
}

.ayuda-item__nota {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.ayuda-contacto {
    list-style: none !important;
    padding-left: 0 !important;
}

.ayuda-contacto li {
    padding: 6px 0;
}

.ayuda-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 20px 0;
}

.ayuda-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

/* ── Auth (login / registro) ─────────────────────────────────────── */
main > .auth-wrapper,
.auth-wrapper {
    /* Full-width real, inmune a cualquier .container heredado o wrapper externo */
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: calc(100vh - var(--topbar-h) - var(--navbar-h) - var(--catbar-h) - 40px);
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    padding: 48px 16px;
    position: relative;
    box-sizing: border-box;
}

main > .auth-wrapper > .auth-card,
.auth-wrapper > .auth-card {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fondo suave branded detrás del card */
.auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 400px at 50% 0%, rgba(37, 99, 235, 0.07), transparent 60%),
        radial-gradient(800px 300px at 50% 100%, rgba(124, 58, 237, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* Contenedor centrado SIN que el <a> se estire al ancho del card */
.auth-card {
    text-align: center;
}

.auth-card > .auth-form,
.auth-card > .auth-oauth,
.auth-card > .auth-divisor,
.auth-card > .auth-card__flashes {
    text-align: left;
}

.auth-card__logo {
    display: inline-block;
    margin: 0 auto 20px;
    border-radius: var(--radius-xl);
    line-height: 0;
}

.auth-card__logo:focus-visible {
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

.auth-card__logo img {
    height: 220px;
    width: auto;
    display: block;
}

.auth-card__titulo {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 6px;
    color: var(--color-text);
}

.auth-card__subtitulo {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.9375rem;
    margin-bottom: 24px;
}

.auth-card__flashes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-card__flashes .flash {
    margin: 0;
    font-size: 0.875rem;
}

.auth-card__pie {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.auth-card__pie a {
    color: var(--color-primary);
    font-weight: 600;
}

.auth-card__pie a:hover {
    text-decoration: underline;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.auth-form__label input,
.auth-form__label select {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 400;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-form__label input:focus,
.auth-form__label select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.auth-form__hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-light);
}

.auth-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.auth-form__checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.auth-form__checkbox a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Submit: mismas dimensiones que los botones OAuth, pero con color primario */
.auth-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-white);
    background: var(--color-primary);
    margin-top: 8px;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    cursor: pointer;
}

.auth-form__submit:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.auth-form__submit:active {
    transform: translateY(1px);
}

.auth-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: var(--color-text-light);
    font-size: 0.8125rem;
}

.auth-divisor::before,
.auth-divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-oauth {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-oauth__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.auth-oauth__btn:hover {
    background: var(--color-bg);
    border-color: var(--color-text-light);
}

.auth-oauth__btn:active {
    transform: translateY(1px);
}

/* ── Cotizador ───────────────────────────────────────────────────── */
.cotizador-header {
    text-align: center;
    padding: 40px 16px 24px;
}

.cotizador-header__subtitulo {
    color: var(--color-text-light);
    max-width: 680px;
    margin: 8px auto 0;
}

.cotizador-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    margin: 0 auto 60px;
    align-items: start;
}

.cotizador-form {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: calc(var(--navbar-h) + var(--catbar-h) + 16px);
}

.cotizador-form .auth-form__label {
    gap: 6px;
}

.cotizador-form__pago {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cotizador-form__pago legend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 6px;
    color: var(--color-text);
}

.cotizador-form__pago label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    cursor: pointer;
}

.cotizador-resultado,
.cotizador-placeholder {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 32px;
}

.cotizador-placeholder {
    text-align: center;
    color: var(--color-text-light);
    padding: 80px 32px;
}

.cotizador-resultado__total {
    text-align: center;
    padding: 24px 16px;
    background: var(--color-primary-light);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.cotizador-resultado__total-label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.cotizador-resultado__total-valor {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
}

.cotizador-resultado__total-metodo {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 6px;
}

.cotizador-resultado__beneficio {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-left: 3px solid var(--color-success);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-size: 0.9375rem;
}

.cotizador-resultado__beneficio strong {
    color: var(--color-success-dark);
}

.cotizador-resultado__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Lista "que incluye este precio": reemplaza al desglose numerico del
   cotizador. Dice QUE cubre el precio sin publicar cuanto cuesta cada
   concepto (margen, logistica, tarifa de flete) — ver cotizador.html. */
.cotizador-incluye {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: 0.9375rem;
}

.cotizador-incluye li {
    position: relative;
    padding: 6px 0 6px 26px;
    border-bottom: 1px solid var(--color-border);
}

.cotizador-incluye li:last-child {
    border-bottom: none;
}

.cotizador-incluye li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}

.cotizador-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.cotizador-tabla th {
    text-align: left;
    padding: 12px 8px 6px;
    color: var(--color-text-light);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
}

.cotizador-tabla td {
    padding: 8px;
    border-bottom: 1px solid var(--color-bg);
}

.cotizador-tabla td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cotizador-tabla__subtotal td {
    background: var(--color-bg);
}

.cotizador-tabla__total td {
    border-top: 2px solid var(--color-text);
    border-bottom: none;
    padding-top: 14px;
    font-size: 1.0625rem;
    color: var(--color-primary);
}

.cotizador-resultado__nota {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .cotizador-grid {
        grid-template-columns: 1fr;
    }

    .cotizador-form {
        position: static;
    }
}

/* ── Footer extendido (5 cols) ───────────────────────────────────── */
.footer__col--brand {
    grid-column: span 2;
}

.footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__col ul li {
    margin-bottom: 6px;
}

.footer__col a {
    transition: color 0.15s;
}

.footer__social li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer__social svg {
    flex-shrink: 0;
}

.footer__app-nota {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer__apps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #4b5563;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: #d1d5db;
    transition: border-color 0.15s, color 0.15s;
}

.footer__app-badge:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.footer__bottom-extra {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.footer__bottom-extra a {
    color: var(--color-text-light);
    text-decoration: underline;
}

.footer__bottom-extra a:hover {
    color: var(--color-white);
}

@media (max-width: 768px) {
    .footer__col--brand {
        grid-column: span 1;
    }

    .auth-card {
        padding: 28px 20px;
    }
}

/* ── Pulido boton primary (focus + hover refinado) ───────────────── */
.btn--primary {
    transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn--primary:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn--primary:active {
    transform: translateY(1px);
}

/* ── Busqueda por imagen (boton camara + modal) ─────────────────── */
.navbar__search-camera {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-texto-suave, #6b7280);
    padding: 0 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.navbar__search-camera:hover {
    color: var(--color-primario, #2563eb);
}

.modal-imagen {
    border: 0;
    border-radius: var(--radius-2xl);
    padding: 0;
    /* 480px: el dropzone necesita respirar; a 440 el texto de arrastre
       quedaba en tres lineas. */
    max-width: 480px;
    width: calc(100% - var(--space-8));
    box-shadow: var(--shadow-xl);
}
.modal-imagen::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.modal-imagen__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}
.modal-imagen__form h3 {
    margin: 0;
    font-size: 1.2rem;
}
.modal-imagen__hint {
    margin: 0;
    color: var(--color-texto-suave, #6b7280);
    font-size: 0.9rem;
}
.modal-imagen__form input[type="file"] {
    padding: 8px;
    border: 1px dashed #d1d5db;
    border-radius: var(--radius);
    background: #f9fafb;
}
.modal-imagen__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* ── Filtro solo digital + entrega digital en producto ─────────── */
.filtro-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.producto-info__entrega--digital {
    background: #ecfdf5;
    border-left: 3px solid #10b981;
    color: #065f46;
}
.producto-info__entrega--digital small {
    color: #047857;
}

.tag--digital {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Checkbox digital en cotizador */
.cotizador-form__digital {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    padding: 10px 12px;
    background: #f3f4f6;
    border-radius: var(--radius);
    cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────
   Sesion 6 (2026-04-13) — UI flujo de compra, ordenes, admin
   ────────────────────────────────────────────────────────────────── */

/* ── Banner DEMO (avisos de data hardcoded) ─────────────────────── */
.demo-banner {
    margin: 16px 0;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    color: #9a3412;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Titulo pagina generico ─────────────────────────────────────── */
.pagina__titulo {
    font-size: 1.625rem;
    font-weight: 700;
    margin-bottom: 24px;
}

/* ── Btn block / lg / danger ────────────────────────────────────── */
.btn--block {
    display: flex;
    justify-content: center;
    width: 100%;
}

.btn--lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn--danger {
    background: var(--color-danger);
    color: var(--color-white);
}

.btn--danger:hover {
    background: var(--color-danger-dark);
}

/* Primary sobre fondo claro (invertido al de hero) */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
}

.hero .btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.hero .btn--primary:hover {
    background: var(--color-primary-light);
}

/* ── Tags y badges ──────────────────────────────────────────────── */
.tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-border);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--success { background: #d1fae5; color: #065f46; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--info    { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge--danger  { background: #fee2e2; color: #991b1b; }

/* ── CARRITO ────────────────────────────────────────────────────── */
.carrito-vacio {
    text-align: center;
    padding: 80px 16px;
    color: var(--color-text-light);
}

.carrito-vacio svg {
    margin: 0 auto 16px;
    color: var(--color-text-light);
}

.carrito-vacio h2 {
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 8px;
}

.carrito-vacio p {
    margin-bottom: 20px;
}

.carrito-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    margin-bottom: 60px;
    align-items: start;
}

.carrito-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carrito-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    padding: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    align-items: start;
}

.carrito-item__img {
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: #f3f4f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrito-item__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-1);
}

/* Texto (no icono): necesita contraste real. Antes reusaba
   .producto-card__placeholder, que paso a ser color de icono SVG. */
.carrito-item__sin-imagen {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-1);
}

.carrito-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.carrito-item__nombre {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
}

.carrito-item__nombre:hover {
    color: var(--color-primary);
}

.carrito-item__variacion,
.carrito-item__llegada {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.carrito-item__controles {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
    /* El selector de cantidad paso de 32px a 44px por target tactil, asi que
       la fila mide ~140px + "Eliminar". En pantallas angostas debe poder
       bajar de linea en vez de desbordar la tarjeta. */
    flex-wrap: wrap;
}

.carrito-item__eliminar {
    font-size: 0.8125rem;
    color: var(--color-danger-dark);
    background: transparent;
    padding: 4px 6px;
}

.carrito-item__eliminar:hover {
    text-decoration: underline;
}

.carrito-item__precio {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Selector cantidad +/- */
.cantidad-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Target tactil >= 44px (WCAG 2.5.8 + Ley de Fitts). Estaba por debajo. */
.cantidad-selector__btn {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
}

.cantidad-selector__btn:hover {
    background: var(--color-bg);
}

.cantidad-selector__input {
    width: 52px;
    height: 44px;
    text-align: center;
    border: 1px solid var(--color-border);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.cantidad-selector__input::-webkit-inner-spin-button,
.cantidad-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Resumen lateral (carrito + checkout) */
.carrito-resumen {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: sticky;
    top: calc(var(--navbar-h) + var(--catbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.carrito-resumen__titulo {
    font-size: 1.0625rem;
    font-weight: 700;
}

.carrito-resumen__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.carrito-resumen__lista > div {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
}

.carrito-resumen__lista dt {
    color: var(--color-text-light);
}

.carrito-resumen__envio {
    color: var(--color-success-dark);
    font-weight: 600;
}

.carrito-resumen__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.125rem;
}

.carrito-resumen__total strong {
    color: var(--color-primary);
    font-size: 1.375rem;
}

.carrito-resumen__nota {
    font-size: 0.75rem;
    color: var(--color-text-light);
    padding: 10px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

/* ── CHECKOUT ───────────────────────────────────────────────────── */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    margin-bottom: 60px;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-seccion {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 24px 28px;
}

.checkout-seccion__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.checkout-seccion__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.checkout-seccion__header h2 {
    font-size: 1.125rem;
    font-weight: 700;
}

.checkout-login-hint {
    padding: 10px 14px;
    background: var(--color-primary-light);
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.checkout-login-hint a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.checkout-info {
    margin-top: 14px;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    padding: 10px 12px;
    background: var(--color-bg);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field--full {
    grid-column: span 2;
}

.form-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    background: var(--color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-field small {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* Opciones de pago */
.pago-opciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pago-opcion {
    display: flex;
    cursor: pointer;
    gap: 12px;
}

.pago-opcion input[type="radio"] {
    margin-top: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.pago-opcion__box {
    flex: 1;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pago-opcion:hover .pago-opcion__box {
    border-color: var(--color-primary-light);
}

.pago-opcion--activa .pago-opcion__box {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.pago-opcion__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    flex-wrap: wrap;
}

.pago-opcion__head strong {
    font-size: 0.9375rem;
}

.pago-opcion__monto {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1rem;
}

.pago-opcion__monto--ahorro {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-success-dark);
}

.pago-opcion__desc {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Detalle de cada metodo de pago: solo se ve el de la opcion elegida.
   Los campos de tarjeta estaban con display:block inline, asi que seguian
   visibles con "deposito" seleccionado — el usuario veia los dos formularios
   a la vez. Ocultarlos ademas los saca de la validacion: el motor de
   validacion.js ignora los campos que no son visibles. */
.visacuotas-detalle,
.efectivo-cuentas,
.tarjeta-campos {
    display: none;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    flex-direction: column;
    gap: 10px;
    font-size: 0.875rem;
}

.pago-opcion--activa .visacuotas-detalle,
.pago-opcion--activa .efectivo-cuentas,
.pago-opcion--activa .tarjeta-campos {
    display: flex;
}

/* La opcion no elegida se compacta: queda solo el encabezado (nombre y
   monto), suficiente para compararlas y cambiar de una a otra. */
.pago-opcion:not(.pago-opcion--activa) .pago-opcion__desc {
    display: none;
}

.visacuotas-detalle__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.visacuotas-plazos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.visacuotas-plazo {
    cursor: pointer;
    position: relative;
}

.visacuotas-plazo input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.visacuotas-plazo > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    transition: border-color 0.15s;
}

.visacuotas-plazo input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.visacuotas-plazo small {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.cuenta-bancaria {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.cuenta-bancaria code {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9375rem;
    color: var(--color-primary-dark);
}

/* ── Dropzone de archivo (comprobante de deposito) ─────────────────
   Todo el markup usa <span> a proposito: vive dentro de
   <label class="pago-opcion">, que solo admite contenido de frase. */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.dropzone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

/* El icono vive en un contenedor circular tintado, como los iconos de
   seccion: da peso visual al area de drop sin recargarla. */
.dropzone .dropzone__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background: var(--color-primary-50);
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.dropzone:hover .dropzone__icono,
.dropzone--dragover .dropzone__icono {
    background: var(--color-primary-light);
}

.dropzone--con-archivo .dropzone__icono { background: var(--color-success-light); }
.dropzone--invalido .dropzone__icono { background: var(--color-danger-light); }

.dropzone:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Mientras se arrastra un archivo encima. */
.dropzone--dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    border-style: solid;
}

/* Ya hay un archivo valido seleccionado. */
.dropzone--con-archivo {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-light);
}

.dropzone--invalido {
    border-color: var(--color-danger);
    background: var(--color-danger-light);
}

/* El input real: accesible para teclado/lectores, invisible a la vista. */
.dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Sin font-size: ya no es un emoji, es un SVG que hereda `color` por
   currentColor y trae su propio width/height. */
.dropzone__icono {
    line-height: 1;
    color: var(--color-primary);
}

.dropzone--con-archivo .dropzone__icono { color: var(--color-success-dark); }
.dropzone--invalido .dropzone__icono { color: var(--color-danger-dark); }

.dropzone__titulo {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
}

.dropzone__enlace {
    color: var(--color-primary);
    text-decoration: underline;
}

.dropzone__hint {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* Nombre + peso del archivo elegido; solo visible con archivo cargado. */
.dropzone__archivo {
    display: none;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-success-dark);
}

.dropzone--con-archivo .dropzone__archivo { display: flex; }
.dropzone--con-archivo .dropzone__titulo,
.dropzone--con-archivo .dropzone__hint { display: none; }

.dropzone__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone__peso {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--color-text-light);
}

.dropzone__quitar {
    /* 44px de area tactil sin agrandar la caja: el margen negativo
       compensa el crecimiento (WCAG 2.5.8). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -6px -4px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    padding: 0 4px;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-light);
    cursor: pointer;
}

.dropzone__quitar:hover { color: var(--color-danger); }

/* Mensaje de error del cliente (tipo/peso), replica los limites del server. */
.dropzone__error {
    display: none;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--color-danger-dark);
}

.dropzone__error--visible { display: block; }

.checkout-terminos {
    margin-top: 16px;
    padding: 12px;
    background: var(--color-bg);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1.5;
}

.checkout-terminos input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--color-primary);
}

.checkout-terminos a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Resumen lateral del checkout */
.checkout-resumen {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: sticky;
    top: calc(var(--navbar-h) + var(--catbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-resumen__titulo {
    font-size: 1.0625rem;
    font-weight: 700;
}

.checkout-resumen__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.checkout-resumen__items li {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    font-size: 0.8125rem;
    align-items: center;
}

.checkout-resumen__item-img {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}

.checkout-resumen__item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.checkout-resumen__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-text);
    color: var(--color-white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}

.checkout-resumen__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.checkout-resumen__item-nombre {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-resumen__item-info small {
    font-size: 0.6875rem;
    color: var(--color-text-light);
}

.checkout-resumen__item-precio {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.checkout-resumen__totales {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}

.checkout-resumen__totales > div {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
}

.checkout-resumen__totales dt {
    color: var(--color-text-light);
}

.checkout-resumen__total {
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: 1.125rem !important;
}

.checkout-resumen__total dt {
    color: var(--color-text) !important;
    font-weight: 600;
}

.checkout-resumen__total dd {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.375rem;
}

.checkout-resumen__seguro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* ── CONFIRMACION ORDEN ─────────────────────────────────────────── */
.orden-confirmada {
    text-align: center;
    padding: 48px 16px 32px;
}

.orden-confirmada__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #d1fae5;
    color: var(--color-success);
    margin-bottom: 20px;
}

.orden-confirmada h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.orden-confirmada__numero {
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.orden-confirmada__numero strong {
    color: var(--color-primary);
    font-size: 1.375rem;
}

.orden-confirmada__mensaje {
    max-width: 560px;
    margin: 0 auto;
    color: var(--color-text-light);
}

.orden-confirmada__mensaje a {
    color: var(--color-primary);
    text-decoration: underline;
}

.orden-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.orden-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.orden-card h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.orden-card__dato {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.orden-card__hint {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

.orden-items-lista {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.orden-items-lista h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.orden-items-lista ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.orden-items-lista li {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg);
    align-items: center;
}

.orden-items-lista li:last-child {
    border-bottom: none;
}

.orden-items-lista__img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: #f3f4f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orden-items-lista__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.orden-items-lista__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

.orden-items-lista__info small {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.orden-items-lista__precio {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.orden-items-lista__totales {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.orden-items-lista__totales > div {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
}

.orden-items-lista__totales dt {
    color: var(--color-text-light);
}

.orden-acciones {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* ── Responsive carrito / checkout ──────────────────────────────── */
@media (max-width: 900px) {
    .carrito-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .carrito-resumen,
    .checkout-resumen {
        position: static;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--full {
        grid-column: span 1;
    }

    .carrito-item {
        grid-template-columns: 72px 1fr;
    }

    .carrito-item__precio {
        grid-column: span 2;
        text-align: left;
        flex-direction: row;
        gap: 12px;
        align-items: baseline;
    }
}

/* ── MIS COMPRAS ────────────────────────────────────────────────── */
.mis-compras__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mis-compras__subtitulo {
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.mis-compras__filtros {
    margin-bottom: 16px;
}

.mis-compras__filtros label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.mis-compras__filtros select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
}

.ordenes-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
}

.orden-fila {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orden-fila__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.orden-fila__head h3 {
    font-size: 1rem;
    font-weight: 700;
}

.orden-fila__head small {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.orden-fila__body {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    gap: 16px;
    flex-wrap: wrap;
}

.orden-fila__items {
    color: var(--color-text-light);
}

.orden-fila__total strong {
    color: var(--color-primary);
    font-size: 1.0625rem;
}

.orden-fila__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── BUSCAR GUEST ───────────────────────────────────────────────── */
.buscar-guest {
    max-width: 520px;
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.buscar-guest__header {
    text-align: center;
}

.buscar-guest__header h1 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.buscar-guest__header p {
    color: var(--color-text-light);
}

.buscar-guest__form {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.buscar-guest__form .btn {
    margin-top: 6px;
}

.buscar-guest__resultado {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    color: #065f46;
}

.buscar-guest__resultado h2 {
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.buscar-guest__ayuda {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-align: center;
}

.buscar-guest__ayuda h3 {
    font-size: 0.9375rem;
    margin-bottom: 6px;
}

.buscar-guest__ayuda p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

/* ── DETALLE ORDEN ──────────────────────────────────────────────── */
.orden-detalle__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.orden-detalle__header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.orden-detalle__header p {
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.orden-detalle__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.orden-card__dato--sm {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
}

.orden-card code {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9375rem;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ── TRACKING TIMELINE ──────────────────────────────────────────── */
.tracking-timeline {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 24px;
}

.tracking-timeline__titulo {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.tracking-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin-left: 12px;
}

.tracking-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 16px;
    padding: 6px 0 20px;
    position: relative;
}

.tracking-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.tracking-step--completada:not(:last-child)::before,
.tracking-step--actual:not(:last-child)::before {
    background: var(--color-success);
}

.tracking-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    z-index: 1;
}

.tracking-step--completada .tracking-step__dot {
    background: var(--color-success);
    border-color: var(--color-success);
}

.tracking-step--actual .tracking-step__dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.tracking-step__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}

.tracking-step__info strong {
    font-size: 0.9375rem;
    font-weight: 600;
}

.tracking-step--futura .tracking-step__info strong {
    color: var(--color-text-light);
    font-weight: 500;
}

.tracking-step__info small {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.tracking-step__info .badge {
    width: fit-content;
    margin-top: 4px;
}

/* ── FACTURA FEL ────────────────────────────────────────────────── */
.factura-acciones {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.factura {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    max-width: 820px;
    margin: 0 auto 60px;
    font-size: 0.9375rem;
}

.factura__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 24px;
}

.factura__emisor h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.factura__emisor p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.factura__regimen {
    margin-top: 8px;
    font-weight: 600;
    color: var(--color-text) !important;
}

.factura__tipo {
    text-align: right;
}

.factura__tipo h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.factura__etiqueta {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.factura__tipo p {
    font-size: 0.875rem;
    margin-bottom: 3px;
}

.factura__receptor {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius);
}

.factura__receptor h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.factura__receptor dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    font-size: 0.875rem;
}

.factura__receptor dl > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.factura__receptor dt {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.factura__receptor dd {
    font-weight: 500;
}

.factura-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.factura-tabla th {
    text-align: left;
    padding: 10px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    border-bottom: 2px solid var(--color-border);
}

.factura-tabla th:last-child,
.factura-tabla td:last-child,
.factura-tabla th:nth-child(3),
.factura-tabla td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.factura-tabla th:first-child,
.factura-tabla td:first-child {
    text-align: center;
}

.factura-tabla td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-bg);
}

.factura-tabla tfoot td {
    padding: 8px;
    font-size: 0.875rem;
}

.factura-tabla tfoot td:first-child {
    text-align: right;
    color: var(--color-text-light);
}

.factura-tabla__total td {
    font-size: 1.0625rem !important;
    border-top: 2px solid var(--color-text);
    padding-top: 12px !important;
    color: var(--color-primary);
}

.factura__footer {
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}

.factura__pie-legal {
    font-size: 0.75rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.factura__certificador {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.factura__certificador code {
    font-family: 'SF Mono', monospace;
    font-size: 0.75rem;
    background: var(--color-bg);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
}

@media print {
    body { background: white; }
    .navbar, .categorias-bar, .footer, .scroll-top,
    .demo-banner, .breadcrumb, .factura-acciones { display: none !important; }
    .factura { border: none; box-shadow: none; padding: 0; }
}

@media (max-width: 768px) {
    .factura {
        padding: 24px 18px;
    }
    .factura__header {
        grid-template-columns: 1fr;
    }
    .factura__tipo {
        text-align: left;
    }
    .factura__receptor dl {
        grid-template-columns: 1fr;
    }
    .factura-tabla {
        font-size: 0.8125rem;
    }
}

/* ── PAGINA DE ERROR (404 / 500 / 403) ──────────────────────────── */
.error-pagina {
    max-width: 520px;
    margin: 40px auto 80px;
    padding: 40px 24px;
    text-align: center;
}

.error-pagina__codigo {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.04em;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--color-primary), #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-pagina h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.error-pagina p {
    color: var(--color-text-light);
    margin-bottom: 20px;
    line-height: 1.6;
}

.error-pagina__acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.error-pagina__hint {
    font-size: 0.8125rem;
    margin-top: 24px;
}

.error-pagina__hint a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── PERFIL ─────────────────────────────────────────────────────── */
.perfil-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    margin-bottom: 60px;
    align-items: start;
}

.perfil-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--navbar-h) + var(--catbar-h) + 16px);
}

.perfil-sidebar__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.perfil-sidebar__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.perfil-sidebar__card strong {
    font-size: 1rem;
}

.perfil-sidebar__card small {
    color: var(--color-text-light);
    font-size: 0.8125rem;
    word-break: break-all;
}

.perfil-nav {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.perfil-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-bg);
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: background 0.15s;
}

.perfil-nav__item:last-child {
    border-bottom: none;
}

.perfil-nav__item:hover {
    background: var(--color-bg);
}

.perfil-nav__item--activa {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: 13px;
}

.perfil-nav__item--logout {
    color: var(--color-danger-dark);
}

.perfil-contenido {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.perfil-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.perfil-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.perfil-card h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.perfil-card__hint {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.direcciones-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.direccion-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.direccion-card--principal {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.direccion-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.direccion-card p {
    line-height: 1.5;
}

.direccion-card__tel {
    color: var(--color-text-light);
    margin-top: 4px;
}

.direccion-card__acciones {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn--danger-outline {
    border-color: var(--color-danger-dark);
    color: var(--color-danger-dark);
    background: var(--color-white);
}

.btn--danger-outline:hover {
    background: var(--color-danger);
    color: var(--color-white);
}

.seguridad-bloque {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.seguridad-bloque:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.seguridad-bloque h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.seguridad-bloque--peligro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 16px;
}

.seguridad-bloque--peligro h3 {
    color: var(--color-danger);
}

.seguridad-bloque--peligro p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.metodos-login {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metodos-login li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.metodos-login li > span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .perfil-layout {
        grid-template-columns: 1fr;
    }
    .perfil-sidebar {
        position: static;
    }
}

/* ── COMPARADOR WIDGET ──────────────────────────────────────────── */
.comparador-widget {
    margin: 20px 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-lg);
    position: relative;
}

.comparador-widget--discreto {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.comparador-widget__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-success-dark);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.comparador-widget--discreto .comparador-widget__badge {
    background: var(--color-primary);
}

.comparador-widget__titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.comparador-widget__lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.comparador-widget__fila {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.comparador-widget__fila--nosotros {
    background: var(--color-success-light);
    font-weight: 700;
    color: var(--color-success-dark);
}

.comparador-widget__fila--nosotros strong {
    color: var(--color-success-dark);
    font-size: 1rem;
}

.comparador-widget__nuestro {
    font-size: 0.9375rem;
    color: var(--color-text);
    margin-bottom: 8px;
}

.comparador-widget__nuestro strong {
    color: var(--color-primary-dark);
    font-size: 1.0625rem;
}

.comparador-widget__nota {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* =================================================================
   ██████  V2 REFRESH — diseño claro, e-commerce detodo.com
   Copyright-safe: esta capa sobreescribe/amplía clases base sin borrar
   ================================================================= */

/* ── Topbar (anuncio superior azul oscuro) ──────────────────────── */
/* Slate oscuro y no `--color-primary-darker`: contra el azul del navbar ese
 * token daba 2.00:1 y las dos barras se leian como un solo bloque turbio con
 * una costura apenas visible. Con slate el corte es limpio (~4.4:1) y ademas
 * rima con el footer, que ya usa esta familia. No es un color nuevo: sigue
 * siendo el monocolor azul + los neutros de la paleta.
 */
.topbar {
    background: var(--color-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Blanco puro a 13px sobre slate es agresivo; 0.88 lo asienta sin bajar
       de 4.5:1. */
    color: rgba(255, 255, 255, 0.88);
    height: var(--topbar-h);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* El icono en el tono de marca claro: da un punto de color sobre el slate y
   jerarquiza el icono respecto al texto sin usar un color nuevo. */
.topbar__item svg {
    color: #93c5fd;
    opacity: 1;
    flex-shrink: 0;
}

/* Los separadores `·` competian con el texto. Casi invisibles: solo marcan
   el ritmo. */
.topbar__sep {
    opacity: 0.25;
    font-weight: 400;
}

/* ── Topbar en movil ─────────────────────────────────────────────────
 * Medido con Playwright a 390px: los tres mensajes se apilaban y el topbar
 * pasaba de 36px a 98px. Sumado al navbar, el header comia el 38% de la
 * pantalla y el primer producto aparecia recien en Y=805 — casi un scroll
 * entero antes de ver algo que vender.
 *
 * En movil se muestra UN solo mensaje: el de mayor valor comercial ("envio
 * gratis"). Los otros dos no desaparecen del sitio (siguen en el footer y en
 * /soporte/ayuda), simplemente no compiten por el espacio mas caro.
 */
@media (max-width: 720px) {
    .topbar {
        height: var(--topbar-h);
        padding: 0;
        font-size: 0.75rem;
    }

    .topbar__inner {
        gap: 0;
        flex-wrap: nowrap;
    }

    .topbar__sep { display: none; }

    /* Del segundo mensaje en adelante, fuera. */
    .topbar__item:not(:first-child) { display: none; }
}

/* ── Navbar v2 (header navy estilo Onos: logo + buscador + acciones) ── */
.navbar {
    background: var(--color-primary);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(1, 17, 38, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--navbar-h);
}

.navbar__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.15s;
}

.navbar__logo:hover { transform: translateY(-1px); }

.navbar__logo-img {
    height: 88px;
    width: auto;
    display: block;
}

/* ── Logo detodo.com.gt — el logo blanco vive sobre fondos navy; glow sutil ── */
.logo-detodo {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));
    transition: filter 0.2s;
}

.navbar__logo:hover .logo-detodo {
    filter: drop-shadow(0 0 8px rgba(219, 234, 254, 0.55));
}

.navbar__search {
    flex: 1;
    max-width: 640px;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: all 0.18s ease;
}

.navbar__search:focus-within {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 4px rgba(219, 234, 254, 0.35);
}

.navbar__search-icon {
    padding: 0 10px 0 14px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

.navbar__search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 4px;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.navbar__search input::placeholder {
    color: var(--color-text-muted);
}

.navbar__search-camera,
.navbar__search-link {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 8px 10px;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color-border);
    transition: color 0.15s;
}

.navbar__search-camera:hover,
.navbar__search-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-50);
}

.navbar__search .navbar__search-submit {
    background: var(--color-primary-darker);
    color: var(--color-white);
    padding: 0 18px;
    min-height: 36px;
    margin: 4px 4px 4px 6px;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, box-shadow 0.15s;
    border: none;
    border-radius: var(--radius);
}

.navbar__search .navbar__search-submit:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.35);
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.navbar__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s;
    white-space: nowrap;
}

.navbar__action:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
}

.navbar__action-icon {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
}

.navbar__action:hover .navbar__action-icon {
    color: var(--color-white);
}

.navbar__cart {
    background: var(--color-white);
    color: var(--color-primary);
    padding: 9px 16px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    position: relative;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.navbar__cart:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.navbar__cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
}

.navbar__action-icon {
    color: rgba(255, 255, 255, 0.75);
}

.navbar__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--radius);
}

.navbar__hamburger span { background: var(--color-white); }

.navbar__hamburger:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 960px) {
    .navbar__action-label { display: none; }
    .navbar__action { padding: 8px; }
}

@media (max-width: 820px) {
    .navbar__search-submit span { display: none; }
    .navbar__search-submit { padding: 0 14px; }
}

@media (max-width: 720px) {
    .navbar__actions .navbar__action:not(.navbar__cart) { display: none; }
    .navbar__hamburger { display: flex; }
    /* 44px: el logotipo incluye la marca denominativa ("deTodo.com.gt") dentro
       de la misma imagen cuadrada, asi que por debajo de eso deja de leerse.
       El espacio salio de comprimir el topbar, no de apretar la marca. */
    .navbar__logo img { height: 44px; }

    /* Fila 1: logo + carrito + hamburguesa · Fila 2: buscador a lo ancho */
    .navbar__inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-2) var(--space-4) var(--space-3);
        row-gap: var(--space-2);
        column-gap: var(--space-3);
    }

    .navbar__search {
        order: 10;
        flex-basis: 100%;
        max-width: none;
    }

    .navbar__actions { margin-left: auto; }

    /* Con el buscador a lo ancho vuelve a caber el texto "Buscar" */
    .navbar__search-submit span { display: inline; }
    .navbar__search-submit { padding: 0 16px; }

    /* Menú hamburguesa abierto: dropdown azul con todas las acciones (login, rastrear, etc.) */
    .navbar__actions--open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-primary);
        padding: 12px 16px 16px;
        gap: 4px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .navbar__actions.navbar__actions--open .navbar__action:not(.navbar__cart) { display: inline-flex; }
    .navbar__actions--open .navbar__action-label { display: inline; }
    .navbar__actions--open .navbar__cart { margin-top: 8px; justify-content: center; }
}

/* La busqueda por FOTO se queda en movil: la camara esta en el telefono, es
 * ahi donde esa funcion tiene sentido. Antes se ocultaba por debajo de 560px,
 * justo donde mas sirve. Lo que se oculta es el "pegar link", que implica
 * copiar una URL — un gesto de escritorio. */
@media (max-width: 560px) {
    .navbar__search-link { display: none; }

    /* Sin el texto "Buscar" entra todo con holgura y el input respira. */
    .navbar__search-submit span { display: none; }
    .navbar__search-submit { padding: 0 14px; }
}

/* ── Barra de categorías refinada ─────────────────────────────── */
.categorias-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.categorias-bar__inner {
    gap: 8px;
    padding-block: 4px;
}

.categorias-bar__item {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-light);
    border-radius: var(--radius-pill);
    position: relative;
    transition: all 0.15s;
}

.categorias-bar__item:hover {
    color: var(--color-primary);
    background: var(--color-primary-50);
}

.categorias-bar__item--active {
    color: var(--color-primary);
    background: transparent;
    font-weight: 600;
}

.categorias-bar__item--active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
}

/* ── Hero v2 ────────────────────────────────────────────────────── */
.hero-v2 {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 32px;
    margin: 32px 0 40px;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 60%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.hero-v2::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-v2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-v2__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin-bottom: 16px;
}

.hero-v2__title-accent {
    color: var(--color-primary);
}

.hero-v2__desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: 28px;
    max-width: 46ch;
}

.hero-v2__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-v2__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
}

.hero-v2__card-img {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.hero-v2__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.hero-v2__card-tag {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
}

.hero-v2__card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.hero-v2__card-price {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.hero-v2__card-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .hero-v2 {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
    .hero-v2__card { max-width: 360px; justify-self: center; width: 100%; }
}

/* ── Beneficios bar (4 pastillas) ──────────────────────────────── */
.beneficios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0 36px;
}

.beneficio {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.beneficio:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.beneficio__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Beneficios: mismo criterio que las categorias — cuatro iconos de cuatro
   colores distintos en la misma fila era la otra fuente de ruido cromatico.
   Las clases .beneficio--* se dejan sin efecto de color a proposito, para no
   tener que tocar home.html en tres lugares. */
.beneficio--success .beneficio__icon,
.beneficio--accent .beneficio__icon,
.beneficio--purple .beneficio__icon {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.beneficio__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.beneficio__sub {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

@media (max-width: 900px) {
    .beneficios { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .beneficios { grid-template-columns: 1fr; }
}

/* ── Sección header v2 (título + "Ver todas") ─────────────────── */
.seccion-v2 {
    margin: 48px 0;
}

.seccion-v2__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.seccion-v2__title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.seccion-v2__title-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.seccion-v2__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1;
}

.seccion-v2__sub {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 4px;
    flex-basis: 100%;
    padding-left: 42px;
}

.seccion-v2__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: gap 0.15s;
}

.seccion-v2__link:hover { gap: 8px; }

/* ── Oferta card con badge descuento y countdown ──────────────── */
.oferta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.oferta-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.oferta-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.oferta-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.oferta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.3s;
}

/* Sin scale(): el design system lo prohibe explicitamente porque desplaza
   layout. El gesto de hover se resuelve en la tarjeta (sombra + borde), no
   agrandando la foto del producto. */
.oferta-card:hover .oferta-card__media img { transform: none; }

.oferta-card__placeholder {
    color: #cbd5e1;
}

.oferta-card__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-danger);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.oferta-card__countdown {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.85);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.oferta-card__body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.oferta-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oferta-card__precio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.oferta-card__precio-actual {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.oferta-card__precio-tachado {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.oferta-card__ahorro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
    margin-top: 4px;
}

/* ── Categorías con icono coloreado ───────────────────────────── */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.categoria-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.categoria-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.categoria-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: 0;
}

.categoria-card__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Variantes de color (igual orden que reference) */
/* Categorias: UNA sola familia cromatica.
 *
 * Antes cada categoria tenia su propio color (morado, verde, rojo, ambar,
 * cian, naranja, indigo, rosa): ocho matices fuera de paleta en la primera
 * pantalla, contra la decision del cliente de monocolor azul. Lo que
 * distingue a cada categoria es el ICONO, que ya es distinto en cada una —
 * el color no aportaba informacion, solo ruido.
 *
 * Las clases .cat-* se conservan (los templates las emiten) por si mas
 * adelante se quiere diferenciar por otro medio.
 */
.categoria-card__icon,
.cat-audio .categoria-card__icon,
.cat-laptops .categoria-card__icon,
.cat-celulares .categoria-card__icon,
.cat-gaming .categoria-card__icon,
.cat-camaras .categoria-card__icon,
.cat-hogar .categoria-card__icon,
.cat-ropa .categoria-card__icon,
.cat-deportes .categoria-card__icon,
.cat-tarjetas .categoria-card__icon,
.cat-default .categoria-card__icon {
    background: var(--color-primary-50);
    color: var(--color-primary);
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.categoria-card:hover .categoria-card__icon {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

@media (max-width: 1024px) {
    .categorias-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .categorias-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .categoria-card { padding: 18px 10px; }
    .categoria-card__icon { width: 48px; height: 48px; }
}

/* ── Visacuotas banner ────────────────────────────────────────── */
.pago-seguro-banner {
    display: grid;
    /* Una sola columna: la tarjeta de la derecha (.pago-seguro-banner__card)
       nunca se renderizo desde el template y dejaba media franja vacia. */
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-light) 100%);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-2xl);
    padding: 36px 40px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.pago-seguro-banner::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -80px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.pago-seguro-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
}

.pago-seguro-banner__title {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary-darker);
    margin-bottom: 12px;
    line-height: 1.2;
}

.pago-seguro-banner__desc {
    color: var(--color-text-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 48ch;
}

.pago-seguro-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap 0.15s;
}

.pago-seguro-banner__link:hover { gap: 10px; }






@media (max-width: 820px) {
    .pago-seguro-banner { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ── Más vendidos card ────────────────────────────────────────── */
.masvendido-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.masvendido-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.masvendido-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.masvendido-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}

.masvendido-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.masvendido-card__body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.masvendido-card__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.masvendido-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.masvendido-card__price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
    margin-top: 4px;
}

.masvendido-card__cuotas {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
}

.masvendido-card__badge-ahorro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    width: fit-content;
    margin-top: 4px;
}

.masvendido-card__entrega {
    font-size: 0.75rem;
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

@media (max-width: 900px) {
    .masvendido-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .masvendido-grid { grid-template-columns: 1fr; }
}

/* ── Atención al cliente (tres tarjetas ayuda) ────────────────── */
.ayuda-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0 40px;
}

.ayuda-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ayuda-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.ayuda-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary);
    margin-bottom: 16px;
}

.ayuda-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

.ayuda-card__desc {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.ayuda-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: gap 0.15s;
}

.ayuda-card__link:hover { gap: 8px; }

@media (max-width: 820px) {
    .ayuda-grid { grid-template-columns: 1fr; }
}

/* ── Footer v2 ───────────────────────────────────────────────── */
.footer-v2 {
    margin-top: 60px;
    background: #0f172a;
    color: #cbd5e1;
}

.footer-v2__benefits {
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.footer-v2__benefits-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 28px 16px;
}

.footer-v2__benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.footer-v2__benefit-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    flex-shrink: 0;
}

.footer-v2__benefit h6 {
    font-size: 0.9375rem;
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 2px;
}

.footer-v2__benefit p {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.4;
}

.footer-v2__main {
    padding: 48px 0 32px;
}

.footer-v2__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.footer-v2__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-v2__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    text-decoration: none;
}

.footer-v2__logo-img {
    height: 180px;
    width: auto;
    display: block;
}

.footer-v2__logo .logo-detodo {
    filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.3));
}

.footer-v2__about {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #94a3b8;
    max-width: 40ch;
}

.footer-v2__social {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

/* Target tactil >= 44px (WCAG 2.5.8 + Ley de Fitts). Estaba por debajo. */
.footer-v2__social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}

.footer-v2__social a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-v2__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.footer-v2__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
}

.footer-v2__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-v2__links a {
    color: #94a3b8;
    font-size: 0.875rem;
    transition: color 0.15s, padding-left 0.15s;
}

.footer-v2__links a:hover {
    color: var(--color-white);
    padding-left: 4px;
}

.footer-v2__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 4px 0;
}

.footer-v2__contact-item svg {
    color: #60a5fa;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-v2__contact-item a { color: inherit; transition: color 0.15s; }
.footer-v2__contact-item a:hover { color: var(--color-white); }

.footer-v2__bottom {
    background: #020617;
    border-top: 1px solid #1e293b;
    padding: 22px 0;
}

.footer-v2__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.footer-v2__payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.footer-v2__payment img {
    height: 32px;
    width: auto;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0;
    display: block;
}

.footer-v2__copyright {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.footer-v2__copyright strong { color: #e2e8f0; font-weight: 700; }

.footer-v2__sep { color: #64748b; margin: 0 6px; }

.footer-v2__copyright a {
    color: #cbd5e1;
    font-weight: 600;
    transition: color 0.15s;
}

.footer-v2__copyright a:hover { color: #60a5fa; }

.footer-v2__powered {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
}

.footer-v2__powered a {
    color: #cbd5e1;
    font-weight: 600;
    transition: color 0.15s;
}

.footer-v2__powered a:hover { color: #60a5fa; }

@media (max-width: 960px) {
    .footer-v2__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-v2__benefits-inner { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 560px) {
    .footer-v2__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-v2__payment img { height: 28px; }
}

/* ── Catálogo header ──────────────────────────────────────── */
.catalogo-header {
    margin: 24px 0 32px;
}

/* ── Titulo de pagina: UNA sola escala para todo el sitio publico ────
 * Antes el H1 media cinco tamanos distintos segun la pantalla (22, 24, 26,
 * 32px y el hero), y el H1 de Ofertas terminaba siendo mas chico que el H2
 * de la home. Sin jerarquia consistente, cada pagina parece de otro sitio.
 *
 * `.seccion__titulo` NO se toca: se usa tambien para <h2> de seccion.
 */
.pagina-header {
    margin: var(--space-6) 0 var(--space-8);
}

.catalogo-header__title,
.pagina-header__title,
.pagina__titulo,
.busqueda-header h1 {
    font-size: clamp(1.75rem, 2.5vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
    /* space-4 y no space-1: no todas estas paginas llevan subtitulo debajo,
       y con 4px el titulo quedaba pegado al contenido cuando no lo hay. */
    margin-bottom: var(--space-4);
}

/* Cuando SI hay subtitulo, se acerca al titulo: son una sola unidad visual. */
.catalogo-header__title + .catalogo-header__sub,
.pagina-header__title + .pagina-header__sub {
    margin-top: calc(-1 * var(--space-3));
}

.pagina-header__sub,
.catalogo-header__sub {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 65ch;
}

.catalogo-header__sub {
    font-size: 1rem;
    color: var(--color-text-light);
}

/* ── Checkout v2: stepper + layout ────────────────────────────── */
.checkout-v2 {
    margin: 24px 0 60px;
}

.checkout-v2__stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-xs);
}

.checkout-v2__step {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.checkout-v2__step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.checkout-v2__step-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.checkout-v2__step--done .checkout-v2__step-num {
    background: var(--color-success);
    color: var(--color-white);
}

.checkout-v2__step--done .checkout-v2__step-label {
    color: var(--color-text-light);
}

.checkout-v2__step--active .checkout-v2__step-num {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.checkout-v2__step--active .checkout-v2__step-label {
    color: var(--color-text);
    font-weight: 600;
}

.checkout-v2__step-line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 16px;
    position: relative;
    min-width: 24px;
}

.checkout-v2__step-line--done {
    background: var(--color-success);
}

.checkout-v2__ssl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-success-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-success-light);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    margin-bottom: 16px;
}

.checkout-v2__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.checkout-v2__main { display: flex; flex-direction: column; gap: 20px; }

.checkout-v2__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
}

/* El paso oculto usa [hidden]; se refuerza aca porque el display:flex/grid de
   otras reglas puede ganarle al display:none que trae [hidden] por defecto. */
.checkout-v2__card[hidden] { display: none; }

/* Navegacion entre pasos (Regresar / Continuar) al pie de cada bloque. */
.checkout-v2__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}

/* Con boton de regresar, este va a la izquierda y "Continuar" a la derecha. */
.checkout-v2__nav:has([data-paso-anterior]) { justify-content: space-between; }

.checkout-v2__nav .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 480px) {
    .checkout-v2__nav { flex-direction: column-reverse; }
    .checkout-v2__nav .btn { width: 100%; justify-content: center; }
}

.checkout-v2__card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.checkout-v2__card-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.checkout-v2__card h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.checkout-v2__guest-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--color-primary-darker);
    margin-bottom: 16px;
}

.checkout-v2__guest-note a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.checkout-v2__resumen {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px;
    position: sticky;
    top: 96px;
    box-shadow: var(--shadow-sm);
}

.checkout-v2__resumen h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}

.checkout-v2__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.checkout-v2__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
}

.checkout-v2__item-img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
    overflow: hidden;
}

.checkout-v2__item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.checkout-v2__item-info { flex: 1; min-width: 0; }
.checkout-v2__item-name {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkout-v2__item-meta { font-size: 0.75rem; color: var(--color-text-light); }
.checkout-v2__item-price { font-weight: 700; color: var(--color-text); text-align: right; white-space: nowrap; }
.checkout-v2__item-qty { font-size: 0.75rem; color: var(--color-text-light); text-align: right; }

.checkout-v2__sum {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.checkout-v2__sum-row { display: flex; justify-content: space-between; }
.checkout-v2__sum-row--shipping { color: var(--color-accent-dark); font-weight: 600; }
.checkout-v2__sum-row--discount { color: var(--color-success-dark); font-weight: 600; }

.checkout-v2__cupon {
    padding: 12px 0;
    border-bottom: 1px dashed var(--color-border, #e2e8f0);
    margin-bottom: 12px;
}

.checkout-v2__cupon-form {
    display: flex;
    gap: var(--space-2);
}

/* min-width:0 para que el input pueda encogerse dentro del flex en movil
   (sin esto desborda la columna del resumen). */
.checkout-v2__cupon-form .form-input {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
}

/* Antes usaba .admin-link, que solo existe en admin.css — nunca cargado en
   el layout publico. El boton quedaba sin estilo en la pagina de pago. */
.checkout-v2__cupon-quitar {
    background: none;
    border: none;
    padding: var(--space-1) var(--space-2);
    color: var(--color-success-dark);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-v2__cupon-quitar:hover {
    color: var(--color-text);
}

.checkout-v2__cupon-error {
    font-size: 0.8125rem;
    color: var(--color-danger-dark);
    margin: 0 0 8px;
}

.checkout-v2__cupon-activo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.8125rem;
}

.checkout-v2__cupon-activo form { display: inline; }
.checkout-v2__cupon-activo button {
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-v2__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 16px;
    margin-bottom: 14px;
}

.checkout-v2__total-label {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}

.checkout-v2__total-amount {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

/* Aqui vivian `.checkout-v2__cuotas` y `.checkout-v2__cuotas-amount`, del
   bloque de cuotas de Visacuotas/EBI. Esa pasarela quedo reemplazada por n1co
   (ver memoria/decisiones.md 2026-05-18) y las clases no se emiten desde
   ningun template ni JS: era CSS muerto, y ademas el ultimo morado fuera de
   la paleta monocolor. */

.checkout-v2__cuotas-sub {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

.checkout-v2__cta {
    width: 100%;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.checkout-v2__cta:hover { background: var(--color-primary-dark); }
.checkout-v2__cta:active { transform: translateY(1px); }
.checkout-v2__cta:disabled { background: var(--color-text-muted); cursor: not-allowed; box-shadow: none; }

@media (max-width: 960px) {
    .checkout-v2__layout { grid-template-columns: 1fr; }
    .checkout-v2__resumen { position: static; }
}

@media (max-width: 560px) {
    .checkout-v2__stepper { padding: 16px; gap: 8px; overflow-x: auto; }
    .checkout-v2__step-label { display: none; }
    .checkout-v2__step-line { min-width: 16px; margin: 0 8px; }
    .checkout-v2__card { padding: 20px; }
}

/* ── Oculta la barra de categorías vieja negro ────────────────── */
.navbar__cart svg { color: currentColor; }

/* ── Cart cell mejora ─────────────────────────────────────────── */
.navbar__action .navbar__action-icon { color: rgba(255, 255, 255, 0.75); }

/* ────────────────────────────────────────────────────────────────────
   FASE 3 — Botón "+ Agregar" en producto-card y modal Agregar al carrito
   ──────────────────────────────────────────────────────────────────── */

/* Boton "Agregar" en producto-card (top-right).
 *
 * Se revela en hover para bajar el ruido visual de la grilla: el unico
 * elemento que destaca en reposo es el precio. En tactil (hover: none) queda
 * siempre visible, asi que no se pierde la funcion.
 *
 * z-index 2 lo pone POR ENCIMA del enlace estirado (.producto-card__link,
 * z-index 1); sin eso el clic caeria en el enlace y navegaria en vez de
 * abrir el modal.
 */
.btn-modal-agregar {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    min-height: 36px;
    padding: 8px 14px;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    z-index: 2;
}

.producto-card:hover .btn-modal-agregar,
.btn-modal-agregar:focus-visible {
    opacity: 1;
    transform: none;
}

/* Hover NO usa scale(): el design system lo prohibe (desplaza layout). */
.btn-modal-agregar:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-modal-agregar:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tactil: sin hover posible, el boton vive visible — y crece a 44px.
 *
 * En escritorio se quedan 36px: WCAG 2.5.8 pide 24px minimo y con mouse la
 * precision es alta, asi que 44 solo agrega peso visual a la tarjeta. En
 * tactil manda la Ley de Fitts y el estandar de 44px del design system.
 */
@media (hover: none) {
    .btn-modal-agregar {
        opacity: 1;
        transform: none;
        min-height: 44px;
        padding: 10px 18px;
    }
}

/* Modal "Agregar al carrito" (singleton <dialog> en base.html) */
.modal-agregar {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.modal-agregar::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-agregar__form {
    position: relative;
    margin: 0;
    padding: 0;
}

.modal-agregar__cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #888;
    z-index: 1;
}
.modal-agregar__cerrar:hover { color: #333; }

.modal-agregar__contenido {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
@media (max-width: 600px) {
    .modal-agregar__contenido {
        grid-template-columns: 1fr;
    }
}

.modal-agregar__imagen-wrap {
    background: #f5f5f5;
    border-radius: var(--radius);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}
.modal-agregar__imagen {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-agregar__detalles {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.modal-agregar__titulo {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #222;
}

.modal-agregar__precio {
    margin: 0;
    font-size: 1rem;
}
.modal-agregar__precio-valor {
    font-weight: 700;
    color: var(--color-primary, #1a4f8a);
    font-size: 1.25rem;
}

.modal-agregar__variaciones {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.modal-agregar__variacion-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-agregar__cantidad-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 120px;
}

.modal-agregar__btn-submit {
    margin-top: 0.5rem;
}

/* Cart item alertas (Fase 3 stale) — BEM naming corregido a carrito-* */
.carrito-item__alerta {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.carrito-item__alerta--expirado {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}
.carrito-item__alerta--sin-stock {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.carrito-resumen__hint {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
/* Aqui vivia `.navbar__action:hover .navbar__action-icon { color: var(--color-accent) }`,
   que pisaba la regla correcta de la linea ~4479 y ponia ambar los iconos del
   header en hover. El ambar es funcional (advertencias, ratings), NO color de
   marca: el header es monocolor azul por decision del cliente. */

/* ── Paginas legales (terminos, privacidad, devoluciones) ───────── */
.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 0 64px;
}

.legal-doc__actualizado {
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin: 4px 0 20px;
}

.legal-doc__aviso {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: 28px;
    line-height: 1.6;
}

.legal-doc__nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.legal-doc__nav a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.legal-doc__nav a.activo,
.legal-doc__nav a:hover { color: var(--color-primary); }

.legal-doc article h2 {
    font-size: 1.125rem;
    margin: 28px 0 10px;
    color: var(--color-text);
}

.legal-doc article h2:first-child { margin-top: 0; }

.legal-doc article p,
.legal-doc article li {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.legal-doc article ul,
.legal-doc article ol {
    margin: 8px 0 16px;
    padding-left: 22px;
}

.legal-doc article strong { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   Reseñas propias de clientes (producto.html #resenas)
   ══════════════════════════════════════════════════════════════ */

.resenas__resumen {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.resenas__promedio {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
}

.resenas__total { color: var(--color-text-light); font-size: 0.9375rem; }

.resenas__lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.resena {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.resena__cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.resena__autor { color: var(--color-text); font-size: 0.9375rem; }

.resena__verificada {
    color: var(--color-success-dark);
    background: var(--color-success-light);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.resena__fecha {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.resena__titulo {
    margin: 4px 0;
    font-size: 1rem;
    color: var(--color-text);
}

.resena__comentario {
    margin: 4px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-light);
    white-space: pre-line;
}

.resenas__vacio,
.resenas__login,
.resenas__aviso,
.resenas__nota {
    color: var(--color-text-light);
    font-size: 0.9375rem;
    margin: 12px 0;
}

.resenas__aviso {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius);
    padding: 10px 14px;
}

.resenas__form-wrap summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.resenas__form-wrap summary::-webkit-details-marker { display: none; }

.resenas__form {
    margin-top: 16px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resenas__form-grupo { display: flex; flex-direction: column; gap: 6px; }

.resenas__nota { font-size: 0.8125rem; margin: 0; }

/* ── Sobre nosotros ─────────────────────────────────────────── */
.sobre-nosotros__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* ── Cookie consent banner ──────────────────────────────────── */
/* [hidden] debe ganar al display:flex, si no los botones "no funcionan" */
.cookie-banner[hidden] { display: none; }

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.cookie-banner__texto {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-light);
}

.cookie-banner__acciones {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Wishlist ───────────────────────────────────────────────── */
.btn--wishlist-activo {
    color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

.mi-lista__quitar { margin-top: 8px; }

.mi-lista__vacio {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-light);
}

.mi-lista__vacio .btn { margin-top: 16px; }

/* ── Footer newsletter ──────────────────────────────────────── */
.footer-v2__newsletter {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
}

.footer-v2__newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-v2__newsletter-hint {
    margin: 4px 0 0;
    font-size: 0.875rem;
    opacity: 0.75;
}

.footer-v2__newsletter-form {
    display: flex;
    gap: 8px;
    flex: 0 1 380px;
}

.footer-v2__newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 0.9375rem;
}

.footer-v2__newsletter-form input[type="email"]::placeholder { opacity: 0.6; }

/* ── Newsletter baja ────────────────────────────────────────── */
.newsletter-baja {
    text-align: center;
    padding: 48px 16px;
}

.newsletter-baja .btn { margin-top: 16px; }

/* ── Loaders: spinner en botones/enlaces durante envios ─────────── */
.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dt-girar 0.6s linear infinite;
}

@keyframes dt-girar { to { transform: rotate(360deg); } }

/* ── prefers-reduced-motion ──────────────────────────────────────────
 * Antes esta media query cubria UNICAMENTE el spinner de los botones: el
 * scroll suave, los hover que elevan tarjetas y el resto de transiciones
 * seguian corriendo para alguien que pidio explicitamente menos movimiento.
 *
 * Los indicadores de progreso son la excepcion deliberada: si el spinner se
 * congela, el usuario no sabe que algo esta pasando. Se los deja girando,
 * solo que mas lento.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Excepcion: informan estado, tienen que seguir animando. */
    .spinner,
    .is-loading::after,
    .skeleton-card__media,
    .skeleton-line {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }

    /* Nada de desplazamientos en hover. */
    .producto-card:hover,
    .oferta-card:hover,
    .masvendido-card:hover,
    .categoria-card:hover,
    .ayuda-card:hover,
    .btn-modal-agregar {
        transform: none;
    }
}

/* ── Estado disabled de los botones ──────────────────────────────────
 * No existia ninguna regla :disabled en todo el archivo: un boton
 * bloqueado se veia identico a uno activo. En el carrito eso significaba
 * un CTA que parecia clickeable y no hacia nada.
 *
 * Va DESPUES de todas las variantes .btn--* para ganar por orden en la
 * cascada (misma especificidad).
 *
 * :not(.is-loading) es deliberado: el loader global pone `disabled` Y
 * `is-loading` al enviar un form. Sin la exclusion, todo boton en envio se
 * volveria gris y el spinner (que usa currentColor) se perderia.
 *
 * Contraste #475569 sobre #f1f5f9 = 7.0:1. Los controles inactivos estan
 * exentos de 1.4.3, pero igual tienen que poder leerse.
 */
.btn:disabled:not(.is-loading),
.btn[aria-disabled="true"] {
    background: var(--color-border-light);
    border-color: var(--color-border);
    color: var(--color-text-light);
    box-shadow: none;
    cursor: not-allowed;
}

.btn:disabled:not(.is-loading):hover,
.btn[aria-disabled="true"]:hover {
    background: var(--color-border-light);
    border-color: var(--color-border);
    color: var(--color-text-light);
    box-shadow: none;
    transform: none;
}

/* Inputs/selects inactivos (checkout: municipio antes de elegir depto) */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background: var(--color-border-light);
    color: var(--color-text-light);
    cursor: not-allowed;
}

/* ── Toasts ──────────────────────────────────────────────────────────
 * Avisos que no sacan al cliente de donde esta. Nacieron para "Agregado al
 * carrito": antes esa accion redirigia a /carrito y te hacia perder el lugar
 * en la grilla, que era el mayor punto de friccion del flujo de compra.
 */
.toast-region {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* 360px fijos + 16px de margen desbordan una pantalla de 375px: el toast
       se salia por la derecha. El min() lo acota al ancho disponible. */
    max-width: min(360px, calc(100vw - var(--space-8)));
    /* La region siempre existe (aria-live necesita estar en el DOM antes de
       que llegue el mensaje), pero no debe tapar clicks cuando esta vacia. */
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    color: var(--color-text);
    pointer-events: auto;
    animation: toast-in var(--dur) var(--ease);
}

.toast--error {
    border-left-color: var(--color-danger);
}

.toast__texto {
    flex: 1;
}

.toast__accion {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Skeletons de carga ──────────────────────────────────────────────
 * Antes la grilla arrancaba vacia y los productos "aparecian" de golpe,
 * empujando el layout. El skeleton reserva exactamente el mismo espacio que
 * la tarjeta real (mismo aspect-ratio y mismo radio), asi no hay salto.
 */
.skeleton-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.skeleton-card__media {
    aspect-ratio: 1;
}

.skeleton-card__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-line {
    height: 12px;
    border-radius: var(--radius-sm);
}

.skeleton-line--corta {
    width: 45%;
    height: 20px;
}

.skeleton-card__media,
.skeleton-line {
    background: linear-gradient(90deg,
        var(--color-border-light) 25%,
        var(--color-border) 37%,
        var(--color-border-light) 63%);
    background-size: 400% 100%;
    animation: dt-shimmer 1.4s var(--ease) infinite;
}

@keyframes dt-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* ── Clases que los templates usaban SIN estar definidas ─────────────
 * Cada una de estas se emitia en el HTML y no tenia ni una regla en el CSS:
 * el elemento salia con estilo de navegador. Se definen aqui, no se borran
 * del markup, porque cada una cumple una funcion real.
 */

/* producto.html: aviso de "no pudimos verificar el precio" */
.flash--warning {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-left: 3px solid var(--color-accent);
}

.producto-info__stale-warning {
    font-size: 0.8125rem;
    color: var(--color-accent-dark);
    line-height: 1.5;
}

.producto-card__reviews {
    color: var(--color-text-light);
    font-size: 0.75rem;
}

.efectivo-cuentas__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--space-1);
}

/* -dark y no --color-danger: el tono base sobre blanco no llega a 4.5:1 */
.text-danger {
    color: var(--color-danger-dark);
    font-size: 0.875rem;
}

/* Error de red en listados. Antes el JS inyectaba `.error-msg` y
   `.btn--small`, dos clases que tampoco existian. */
.estado-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-light);
}

/* ── Descuento de origen en el detalle del producto ──────────────
   Mismo lenguaje visual que la tarjeta del listado y la pagina de
   ofertas: badge rojo con el %, precio anterior tachado y el ahorro
   en verde. Si el producto viene rebajado por Amazon/eBay, se ve
   igual en la vitrina y adentro del producto. */
.galeria__principal {
    position: relative;
}

.galeria__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}

.producto-info__precio-fila {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.producto-info__precio-fila .precio-tachado {
    font-size: 1rem;
}

.producto-info__descuento {
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.producto-info__ahorro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

/* ── Caja "pega el link": una casilla para Amazon y otra para eBay ──
   Sustituye a los botones "Buscar tambien en Amazon/eBay". */
.importar-link {
    margin: 28px 0 8px;
    padding: 22px 24px;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
}

.importar-link__texto {
    margin-bottom: 18px;
}

.importar-link__titulo {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary-darker);
}

.importar-link__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-light);
    max-width: 70ch;
}

.importar-link__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.importar-link__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

.importar-link__fila {
    display: flex;
    gap: 8px;
}

.importar-link__input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-white);
}

.importar-link__fila .btn {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .importar-link__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .importar-link {
        padding: 18px;
    }

    .importar-link__fila {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Cotizar pegando el link (Amazon / eBay por separado) ───────── */
.cotizador-links {
    margin-bottom: 28px;
    padding: 22px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.cotizador-links__titulo {
    margin: 0 0 4px;
    font-size: 1.125rem;
    font-weight: 700;
}

.cotizador-links__sub {
    margin: 0 0 18px;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.cotizador-links__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cotizador-links__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

.cotizador-links__fila {
    display: flex;
    gap: 8px;
}

.cotizador-links__fila .form-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cotizador-links__fila .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cotizador-links__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Targets tactiles ────────────────────────────────────────────────
 * Medido con Playwright a 390px el 2026-07-27: el boton Buscar quedaba en
 * 36px de alto y los items de categoria en 38px. Con mouse eso alcanza
 * (WCAG 2.5.8 pide 24px); con el dedo no. Se agrandan SOLO en tactil para
 * no engordar el header en escritorio.
 */
@media (hover: none) {
    .navbar__search-submit {
        min-height: 44px;
    }

    .categorias-bar__item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── Ritmo vertical en movil ─────────────────────────────────────────
 * Medido con Playwright a 390px el 2026-07-27: entre el header y el primer
 * producto habia 532px — mas de media pantalla de preambulo en una pagina
 * cuyo trabajo es mostrar productos.
 *
 * La causa no es un bloque en particular sino el ritmo: 48px de separacion
 * entre secciones es una medida pensada para 1440px de ancho. En 390px pesa
 * proporcionalmente casi el triple. Se comprime el ritmo, no el contenido:
 * no se esconde nada, solo se junta.
 */
@media (max-width: 720px) {
    .seccion,
    .seccion-v2 {
        margin: var(--space-8) 0;
    }

    .breadcrumb {
        padding: var(--space-2) 0;
        font-size: 0.75rem;
    }

    .catalogo-header,
    .pagina-header {
        margin: var(--space-4) 0 var(--space-5);
    }

    /* El encabezado de seccion (icono + titulo + enlace "ver todos") se
       apilaba en dos lineas altas. */
    .seccion-v2__header {
        margin-bottom: var(--space-3);
    }

    .seccion-v2__sub {
        margin-bottom: var(--space-3);
    }
}

/* ── Categorias en movil: fila con scroll, no grilla ─────────────────
 * Con `repeat(6, 1fr)` y pocas categorias reales, la seccion quedaba con una
 * tarjeta chiquita perdida en 178px de alto — parecia rota, no vacia.
 *
 * Una fila horizontal desplazable se ve intencional con UNA categoria o con
 * veinte, es el patron que el usuario ya conoce de cualquier app de compras,
 * y ademas ocupa la mitad de alto.
 */
@media (max-width: 720px) {
    .categorias-grid {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        /* Sangria negativa + padding: las tarjetas nacen y mueren al borde de
           la pantalla, para que se lea que hay mas hacia el costado. */
        margin-inline: calc(-1 * var(--space-4));
        padding-inline: var(--space-4);
        padding-bottom: var(--space-2);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .categorias-grid::-webkit-scrollbar { display: none; }

    .categoria-card {
        flex: 0 0 auto;
        width: 108px;
        padding: var(--space-4) var(--space-2);
        gap: var(--space-2);
        scroll-snap-align: start;
    }

    .categoria-card__nombre {
        font-size: 0.8125rem;
        line-height: 1.25;
    }
}