/* Look compartido: colores por tema, tipografía, navbar con íconos y foco.
   Todo va con variables de color definidas para claro y oscuro, sin colores fijos. */

:root {
    --accent: #F97316;          /* naranja (paleta de 25/10/2026; antes #E9B949, el amarillo del logo) */
    --accent-2: #FBBF24;        /* segundo tono (degradés): dorado */
    --accent-text: #F97316;
    --brand-orange: #E8782F;     /* naranja de la "a" del logo y del botón seleccionado de la barra (un poco menos vibrante que --accent) */
    --positive-text: #57CC31;
    --negative-text: #f87171;
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
    --nav-active-bg: rgba(249, 115, 22, 0.14);
}

[data-theme='light'] {
    /* El amarillo y el verde lima tienen poco contraste como texto sobre blanco:
       para texto se usa una variante más oscura; los rellenos no cambian. */
    --brand-orange: #D9622B;
    --accent-text: #C2410C;   /* RV-09: #A16207 daba 3,9:1 sobre el beige del menú activo; #C2410C da más de 5:1 */
    --positive-text: #166534; /* RV-09: #15803d daba 4,44:1 sobre el fondo claro (mínimo 4,5); #166534 da más de 6:1 */
    --negative-text: #dc2626;
    --nav-hover-bg: rgba(0, 0, 0, 0.05);
    --nav-active-bg: rgba(249, 115, 22, 0.28);
}

/* Precios y cifras alineados en columnas */
body {
    font-variant-numeric: tabular-nums;
}

/* --- Texto de color legible en el tema claro --- */
[data-theme='light'] .text-primary-amber,
[data-theme='light'] .text-primary-amber\/80 {
    color: var(--accent-text);
}
[data-theme='light'] .text-vibrant-green {
    color: var(--positive-text);
}
[data-theme='light'] .text-red-500 {
    color: var(--negative-text);
}
/* Títulos con degradé de acento (ej. "Compará"): en claro, dorado oscuro para que se lea */
[data-theme='light'] .bg-clip-text.text-transparent,
[data-theme='light'] .gradient-text {
    background-image: linear-gradient(90deg, #A16207, #CA8A04);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ...pero sobre fondos oscuros fijos (escáner, toasts) se mantiene el amarillo original */
[data-theme='light'] [class*="bg-black"].text-primary-amber,
[data-theme='light'] [class*="bg-black"] .text-primary-amber {
    color: var(--accent);
}

/* --- Tamaños mínimos: las etiquetas de 7-9 px eran difíciles de leer --- */
body .text-\[9px\]:not([class*="md:text-"]) { font-size: 10px; }
body .text-\[8px\]:not([class*="md:text-"]) { font-size: 9.5px; }
body .text-\[7px\]:not([class*="md:text-"]) { font-size: 9px; }
@media (max-width: 767px) {
    body .text-\[9px\] { font-size: 10px; }
    body .text-\[8px\] { font-size: 9.5px; }
    body .text-\[7px\] { font-size: 9px; }
}

/* --- Logo: no dejar que el contenedor flex lo comprima --- */
.brand-logo {
    flex-shrink: 0;
    max-width: none;
}

/* --- Navbar --- */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link .material-symbols-outlined {
    font-size: 1.125rem;
}
.nav-link:hover {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
}
.nav-link.is-active {
    background: var(--brand-orange);  /* naranja liso, igual al de la "a" del logo */
    color: #fff;
}

/* --- Foco visible con teclado --- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Aviso de nueva versión de la app (pwa-update.js) --- */
.pwa-update {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(92vw, 440px);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: pwa-update-in 0.35s ease-out;
}
.pwa-update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; color: var(--text-muted); }
.pwa-update-text strong { font-size: 0.875rem; color: var(--text-primary); }
.pwa-update-btn {
    background: var(--accent);
    color: #000;
    font-weight: 800;
    font-size: 0.8125rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.pwa-update-btn:disabled { opacity: 0.7; }
.pwa-update-later { color: var(--text-muted); font-size: 0.75rem; font-weight: 600; padding: 0.5rem 0.4rem; }
@keyframes pwa-update-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Footer --- */
.footer-link {
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.footer-link:hover {
    color: var(--accent-text);
}

/* --- Preguntas frecuentes (ayuda.html) --- */
.faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-chevron { transition: transform 0.2s ease; }
details[open] .faq-chevron { transform: rotate(180deg); }

/* --- Grises claros pensados para fondo oscuro: en el tema claro quedaban casi invisibles --- */
[data-theme='light'] .text-gray-200,
[data-theme='light'] .text-gray-300 {
    color: var(--text-primary);
}
[data-theme='light'] .text-gray-400 {
    color: var(--text-muted);
}
/* ...pero sobre fondos oscuros fijos (escáner, toasts) se mantienen */
[data-theme='light'] [class*="bg-black"] .text-gray-200,
[data-theme='light'] [class*="bg-black"] .text-gray-300,
[data-theme='light'] [class*="bg-black"] .text-gray-400,
[data-theme='light'] [class*="bg-black"].text-gray-300,
[data-theme='light'] [class*="bg-black"].text-gray-400 {
    color: #d1d5db;
}

/* =====================================================================
   Sistema de diseño (v10): colores por rol, escala tipográfica, componentes
   ===================================================================== */

/* Modo oscuro un poco más cálido (menos negro puro) y bordes más visibles */
html:root {
    --bg-main: #111318;            /* carbón */
    --bg-card: #181b21;
    --border-subtle: rgba(255, 255, 255, 0.12);
    --header-bg: rgba(17, 19, 24, 0.75);
    --footer-bg: var(--bg-main);
    --card-grad-1: #1e2128;
    --card-grad-2: #181b21;
    --card-hover-1: #262a32;
    --card-hover-2: #1d2027;
    --text-muted: #A8A8B3;
    /* Colores por rol: acción (amarillo), ahorro (verde), alerta (rojo), beneficio bancario (fucsia) */
    --save: #57CC31;
    --alert: #f87171;
    --modo: #c026d3;
    /* Escala tipográfica */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 20px;
    --fs-xl: 28px;
    /* Radios */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --bottom-nav-h: 0px;
}
html[data-theme='light'] {
    --bg-main: #F6F6F4;            /* blanco cálido */
    --bg-card: #ffffff;
    --border-subtle: rgba(0, 0, 0, 0.12);
    --header-bg: rgba(246, 246, 244, 0.85);
    --footer-bg: var(--bg-main);
    --card-grad-1: #ffffff;
    --card-grad-2: #fbfbfa;
    --card-hover-1: #f0f0ec;
    --card-hover-2: #f8f8f6;
    --text-muted: #3f4b5c;
    --save: #166534;
    --alert: #dc2626;
    --modo: #a21caf;
}

/* --- Tipografía: 3 pesos (500 texto, 700 datos, 800 precios y títulos) --- */
body { font-weight: 500; line-height: 1.5; }
body .font-normal { font-weight: 500; }
body .font-semibold { font-weight: 700; }
body .font-black { font-weight: 800; }
body .text-\[8px\]:not([class*="md:text-"]) { font-size: 10px; }
body .text-\[9px\]:not([class*="md:text-"]),
body .text-\[10px\]:not([class*="md:text-"]),
body .text-\[10\.5px\]:not([class*="md:text-"]) { font-size: var(--fs-xs); }
@media (max-width: 767px) {
    body .text-\[8px\] { font-size: 10px; }
    body .text-\[9px\], body .text-\[10px\] { font-size: var(--fs-xs); }
}
/* Íconos un poco más finos, combinan mejor con el texto de peso 500 */
body .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24; }
/* Textos largos (ayuda, términos): interlineado cómodo y renglones no demasiado anchos */
main details p, main article p, .prose-block p { line-height: 1.7; max-width: 68ch; }

/* --- Precios: los centavos van chicos y elevados --- */
.price-cents { font-size: 0.55em; font-weight: 700; vertical-align: 0.55em; margin-left: 1px; letter-spacing: 0; opacity: 0.85; }

/* --- Colores por rol --- */
.text-save { color: var(--save); }
.text-alert { color: var(--alert); }
.bg-save-soft { background: color-mix(in srgb, var(--save) 14%, transparent); color: var(--save); }
.tag-promo {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--save) 14%, transparent); color: var(--save);
}
.tag-promo .material-symbols-outlined { font-size: 13px; }
/* Con qué banco va la promo de MODO (la cinta violeta de la tarjeta lleva solo el %) */
.tag-modo {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, #d946ef 15%, transparent); color: #e879f9; cursor: help;
}
[data-theme="light"] .tag-modo { color: #a21caf; }
.tag-modo .material-symbols-outlined { font-size: 13px; }
.tag-best {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
    padding: 3px 10px; border-radius: 999px; background: var(--save); color: #06210a;
}
.tag-best .material-symbols-outlined { font-size: 14px; }
html[data-theme='light'] .tag-best { color: #fff; }

/* --- Barra de navegación inferior (solo celulares) --- */
.bottom-nav { display: none; }
@media (max-width: 767px) {
    html:root { --bottom-nav-h: 64px; }
    body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border-subtle);
    }
    .bottom-nav a {
        flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); position: relative; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav a .material-symbols-outlined { font-size: 24px; transition: transform .2s ease; }
    .bottom-nav a.is-active { color: var(--accent-text); }
    .bottom-nav a.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    .bottom-nav a:active .material-symbols-outlined { transform: scale(.9); }
    .bottom-nav .bn-badge {
        position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;   /* rojo: aviso de lo que hay en la lista (el amarillo queda para botones y ofertas) */
    }
    .bottom-nav .bn-badge[hidden] { display: none; }
    /* El aviso de actualización y el cohete quedan por encima de la barra */
    .pwa-update { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
    #rocket-btn { bottom: calc(var(--bottom-nav-h) + 16px) !important; right: 16px !important; }
    /* Footer: sin espacio de más debajo, la barra ya reserva su lugar */
    footer { margin-bottom: 0; }
}
.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* --- Botón flotante "volver arriba" (inyectado por ui.js en todas las páginas menos index.html) --- */
.rocket-btn {
    position: fixed; bottom: 32px; right: 32px; z-index: 50; width: 56px; height: 56px; border-radius: 999px; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent); border: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    opacity: 0; transform: translateY(80px); pointer-events: none;
    transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, border-color .3s ease;
}
.rocket-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rocket-btn:hover { background: color-mix(in srgb, var(--text-primary) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rocket-btn .rocket-icon { color: var(--text-muted); transition: color .2s ease; display: inline-block; transform: rotate(-45deg); font-size: 28px; }
.rocket-btn:hover .rocket-icon { color: var(--accent); animation: rocket-shake .2s infinite; }
@keyframes rocket-shake {
    0% { transform: rotate(-45deg) translate(0, 0); }
    25% { transform: rotate(-45deg) translate(1px, -1px); }
    50% { transform: rotate(-45deg) translate(-1px, 1px); }
    75% { transform: rotate(-45deg) translate(1px, 1px); }
    100% { transform: rotate(-45deg) translate(0, 0); }
}
.rocket-btn.rocket-launch { transform: translateY(-100vh) scale(1.5) !important; opacity: 0 !important; }

/* --- Esqueletos de carga --- */
.skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: var(--r-sm); }
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 10%, transparent), transparent);
    animation: skeleton-sweep 1.3s infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after, .bump { animation: none; } }

/* --- Estados vacíos --- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 20px; color: var(--text-muted); }
.empty-state .es-icon { font-size: 56px; opacity: .5; }
.empty-state h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); }
.empty-state p { font-size: var(--fs-sm); max-width: 32ch; }
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px;
    background: var(--accent); color: #000; font-weight: 800; font-size: var(--fs-sm); text-decoration: none; border: 0; cursor: pointer;
}
.btn-primary:hover { background: #E5B800; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    background: transparent; color: var(--text-primary); font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--border-subtle); cursor: pointer;
}

/* --- Zonas táctiles de al menos 44 px en celular --- */
@media (max-width: 767px) {
    .tap-44 { min-width: 44px; min-height: 44px; }
}

/* --- Tarjeta por tienda (buscador): la más barata destaca en verde, el resto queda tranquilo --- */
.store-card { box-shadow: none; }
/* Cards de resultados de búsqueda en mobile (fila): a veces traen insignia/promo/segundo precio y a
   veces no, así que sin una altura mínima común la lista queda dispareja. En escritorio (columna,
   centrado) ya se ven parejas solas y no hace falta. */
@media (max-width: 767px) {
    .search-result-card { min-height: 100px; }
}
/* Reserva el lugar de la insignia de promo bancaria (se agrega después del render, solo si
   corresponde) para que las cards de ofertas no salten de alto según si tienen una o no. */
.promo-bank-slot { min-height: 30px; }
.store-card.store-best {
    border-color: color-mix(in srgb, var(--save) 65%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--save) 9%, var(--card-grad-1)) 0%, var(--card-grad-2) 100%);
}
.store-card.store-best:hover { border-color: var(--save); }
.store-card .price-display { font-variant-numeric: tabular-nums; }

/* Línea fina alrededor de cada resultado de búsqueda, para separar bien una tarjeta de la otra */
.res-card { border: 1px solid var(--border-subtle); transition: border-color .15s ease; }
.res-card:hover { border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); }

/* --- Resultado de búsqueda compacto: foto grande + nombre/botones + una fila por súper (celular y escritorio) --- */
.pr-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
.pr-photo {
    grid-column: 1; grid-row: 1; width: 72px; height: 72px; border-radius: 14px; background: #fff; overflow: hidden;
    display: grid; place-items: center;
}
.pr-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.pr-photo .material-symbols-outlined { font-size: 30px; color: #9ca3af; }
.pr-top { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-name {
    margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-primary); cursor: pointer; transition: color .2s ease;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-name:hover { color: var(--accent-text); }
.pr-actions { display: flex; align-items: center; gap: 8px; }
/* Botones de la tarjeta: "Agregar" en reposo es de contorno (tinte suave, como el resto del sitio) y se rellena de amarillo recién cuando el producto está en la lista;
   historial y compartir son íconos chicos y discretos */
.pr-actions.header-actions .list-btn {
    min-height: 36px; padding: 0 14px 0 10px; font-weight: 800; gap: 4px;
}
.pr-actions.header-actions .list-btn .material-symbols-outlined { font-size: 19px; }
.pr-actions.header-actions .list-btn.is-in, .pr-actions.header-actions .list-btn.is-in:hover, .pr-actions.header-actions .list-btn.is-in:active {
    background-color: var(--accent); color: #000; border-color: var(--accent);
}
.pr-actions.header-actions .list-btn.pr-list { flex: 0 0 auto; width: 46px; padding: 0; }
.pr-actions.header-actions .list-btn.pr-list .material-symbols-outlined { font-size: 21px; }
.pr-actions.header-actions .list-btn.pr-list.is-in .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.pr-actions .pr-ico, .pr-ico.pr-solo {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0;
    border-radius: 999px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border-subtle);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.pr-actions .pr-ico .material-symbols-outlined, .pr-ico.pr-solo .material-symbols-outlined { font-size: 19px; }
@media (hover: hover) {
    .pr-actions .pr-ico:hover, .pr-ico.pr-solo:hover { color: var(--accent-text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
}
.pr-actions .pr-ico:focus-visible, .pr-ico.pr-solo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 640px) { .pr-actions .pr-ico, .pr-ico.pr-solo { width: 34px; height: 34px; } .pr-actions.header-actions .list-btn { min-height: 34px; } }
.pr-stores { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.pr-store {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "logo tags price go" "logo extra extra extra";
    column-gap: 10px; row-gap: 3px; align-items: center; padding: 8px; border-top: 1px solid var(--border-subtle);
}
.pr-stores > .pr-store:first-child { border-top: 0; }
.pr-logo { grid-area: logo; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; align-self: center; }
.pr-logo-txt { display: grid; place-items: center; background: #fff; color: #000; font-size: 9px; font-weight: 900; text-align: center; overflow: hidden; }
.pr-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; min-width: 0; white-space: nowrap; }
.pr-price .price-display { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.pr-sub { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pr-old { text-decoration: line-through; text-decoration-thickness: 1px; }
.pr-tags { grid-area: tags; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pr-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.pr-sname { font-size: 12px; font-weight: 800; color: var(--text-secondary); }
.pr-nopromo { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pr-extra { grid-area: extra; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pr-namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
/* "Más barato" en una sola línea y más discreto; las etiquetas de promo/MODO se parten en líneas en vez de pisar el precio */
.pr-namerow .tag-best { white-space: nowrap; padding: 2px 8px; font-size: 10px; }
.pr-tags .tag-promo, .pr-tags .tag-modo { min-width: 0; white-space: normal; text-align: left; border-radius: 10px; }
.pr-tags .truncate { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.pr-save { margin: 0; font-size: 12px; font-weight: 700; color: var(--save); }
.pr-go {
    grid-area: go; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; border-radius: 12px;
    font-size: 12px; font-weight: 700; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: background-color .2s ease, color .2s ease;
}
.pr-go:hover { background: var(--accent); color: #000; }
.pr-go .material-symbols-outlined { font-size: 20px; }
.pr-go-txt { display: none; }
.pr-missing { margin: 0; padding: 8px 8px 2px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); }
/* La fila más barata va en verde suave (sin el borde y degradé de las tarjetas viejas), con el precio un poco más grande */
.store-card.store-best.pr-store { background: color-mix(in srgb, var(--save) 10%, transparent); border-color: transparent; border-radius: 12px; padding: 10px 8px; }
.store-best .pr-price .price-display { font-size: 21px; }
.pr-stores > .store-best + .pr-store { border-top-color: transparent; }
/* Tablet (una tarjeta por fila): foto grande a la izquierda y filas anchas. En escritorio (dos por fila) se usa el diseño de celular */
@media (min-width: 768px) and (max-width: 1023px) {
    .pr-card { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; }
    .pr-photo { width: 120px; height: 120px; grid-row: 1 / span 2; border-radius: 16px; }
    .pr-photo img { padding: 8px; }
    .pr-photo .material-symbols-outlined { font-size: 44px; }
    .pr-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .pr-name { font-size: 16px; -webkit-line-clamp: 2; }
    .pr-stores { grid-column: 2; }
    .pr-store { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "logo tags price go" "logo extra extra extra"; column-gap: 14px; }
    .pr-logo { width: 44px; height: 44px; align-self: center; }
    .pr-price { flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; min-width: 110px; }
    .pr-price .price-display { font-size: 22px; }
    .pr-go { width: auto; height: 36px; padding: 0 14px; border-radius: 999px; }
    .pr-go-txt { display: inline; }
}

/* --- Opciones de búsqueda (Modo Ahorro / Agregar directo) detrás de un solo botón --- */


/* --- Cohete "volver arriba": más discreto --- */
#rocket-btn { width: 44px; height: 44px; }
#rocket-btn .rocket-icon { font-size: 22px !important; }

/* --- Etiqueta de sección con ícono --- */
.trending-label { display: inline-flex; align-items: center; gap: 4px; }
.trending-label .material-symbols-outlined { font-size: 15px; color: var(--accent-text); }

/* Avisos (toast) con ícono, siempre por encima de la barra inferior */
/* --- Aviso flotante (toast): compartido por las 6 páginas, ver showToast() en ui.js ---
   Siempre oscuro (como el escáner o el menú), a propósito: es un cartel momentáneo, no
   parte de la página, y así se lee igual sin importar el tema. */
.toast {
    position: fixed; left: 50%; bottom: 30px; z-index: 1200;
    display: flex; align-items: center; gap: 8px;
    transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none;
    max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
    background: rgba(17, 17, 17, 0.92); color: #fff; border: 1px solid rgba(249, 115, 22, 0.25);
    font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), opacity .3s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast .material-symbols-outlined { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.toast.is-error { border-color: rgba(248, 113, 113, .35); }
.toast.is-error .material-symbols-outlined { color: var(--alert); }
.toast .toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Aviso con botón (ej. "Ver" de la compra inteligente): se puede tocar */
.toast.has-action { pointer-events: auto; padding-right: 8px; }
.toast .toast-action {
    flex-shrink: 0; margin-left: 4px; padding: 6px 14px; border-radius: 999px;
    background: var(--accent); color: #000; font-weight: 800; text-decoration: none;
}
.toast .toast-action:hover { filter: brightness(1.08); }
@media (max-width: 767px) { .toast { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px) !important; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s ease; } }

/* --- Ofertas: filtros por tienda y orden quedan fijos arriba al hacer scroll --- */
body.page-ofertas .overflow-x-hidden { overflow-x: clip; }          /* "hidden" rompía el position: sticky */
body.page-ofertas header.sticky { position: relative; }              /* el encabezado no se queda fijo: en celular ocuparía demasiado */
.offers-bar { display: contents; }
#offersControls {
    position: sticky; top: 0; z-index: 50; margin: 0 -24px; padding: 10px 24px;
    background: color-mix(in srgb, var(--bg-main) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle);
}
.store-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-overflow-scrolling: touch; }
.store-filters::-webkit-scrollbar { display: none; }
.store-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 12px 3px 4px; border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); background: transparent; border: 1px solid var(--border-subtle); cursor: pointer;
}
.store-chip:first-child { padding-left: 12px; }
.store-chip-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.store-chip-n { font-size: var(--fs-xs); opacity: .65; }
.store-chip.is-on { background: var(--accent); border-color: var(--accent); color: #000; }
.store-chip:hover:not(.is-on) { color: var(--text-primary); }

/* Categorías de Ofertas en escritorio: tarjeta lateral con casillas */
.cat-side {
    padding: 14px 10px 10px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle);
}
.cat-side:empty { display: none !important; }
.cat-side-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: 0 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
.cat-side-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cat-side-title .material-symbols-outlined { font-size: 16px; color: var(--accent-text); }
.cat-side-clear { font-size: var(--fs-xs); font-weight: 800; color: var(--accent-text); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.cat-side-clear:hover { text-decoration: underline; }
.cat-row {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 12px; cursor: pointer;
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); transition: background-color .15s ease, color .15s ease;
}
.cat-row:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }
.cat-row.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-primary); }
.cat-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row-n { font-size: var(--fs-xs); font-weight: 700; opacity: .65; }
.cat-row.is-on .cat-row-n { opacity: 1; color: var(--accent-text); }
.cat-check {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border-radius: 7px; cursor: pointer;
    border: 2px solid color-mix(in srgb, var(--text-muted) 55%, transparent); background: transparent; display: grid; place-content: center;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.cat-check::after {
    content: ''; width: 10px; height: 6px; margin-top: -2px; border-left: 2.5px solid #000; border-bottom: 2.5px solid #000;
    transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
.cat-check:checked { background: var(--accent); border-color: var(--accent); }
.cat-check:checked::after { transform: rotate(-45deg) scale(1); }
.cat-row:hover .cat-check:not(:checked) { border-color: var(--accent); }
.cat-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-row:active .cat-check { transform: scale(.9); }

.select-pill {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 30px 0 14px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 700; font-family: inherit; text-transform: none; letter-spacing: normal;
    color: var(--text-primary); background-color: var(--bg-card); border: 1px solid var(--border-subtle); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8A8B3' stroke-width='2.5' 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 10px center; background-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-theme='light'] .select-pill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233f4b5c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.select-pill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-subtle)); }
.select-pill:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.select-pill[aria-expanded='true'] { border-color: var(--accent); }

.select-custom { position: relative; }
.select-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px;
    list-style: none; margin: 0; padding: 6px; border-radius: 14px;
    background-color: var(--bg-card); border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.select-menu[hidden] { display: none; }
.select-menu li {
    padding: 9px 12px; border-radius: 9px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.select-menu li:hover, .select-menu li:focus { outline: none; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-primary); }
.select-menu li.is-selected { color: var(--accent); }

/* --- Lista: resumen del ahorro --- */
.savings-hero {
    display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 16px 18px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--save) 12%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--save) 45%, transparent);
}
.savings-hero.hidden { display: none; }
.savings-hero > .material-symbols-outlined { font-size: 36px; color: var(--save); flex-shrink: 0; }
.savings-hero .sh-title { font-size: var(--fs-lg); font-weight: 800; color: var(--save); line-height: 1.2; }
.savings-hero .sh-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.savings-hero .sh-sub strong { color: var(--text-primary); }

/* --- Superficie de tarjeta compartida (un solo borde fino, hover neutro) --- */
html .premium-card {
    background: linear-gradient(180deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%);
    border: 1px solid var(--border-subtle);
}
html .premium-card:hover {
    background: linear-gradient(180deg, var(--card-hover-1) 0%, var(--card-hover-2) 100%);
    border-color: color-mix(in srgb, var(--text-primary) 28%, transparent);
}
html .premium-card.store-best, html .premium-card.store-best:hover {
    border-color: color-mix(in srgb, var(--save) 65%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--save) 9%, var(--card-grad-1)) 0%, var(--card-grad-2) 100%);
}

/* Celulares: el contenido más el footer ocupan la pantalla menos la barra inferior (así no queda tapado) */
@media (max-width: 767px) {
    body > .min-h-screen { min-height: calc(100vh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)); min-height: calc(100dvh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Encabezado: indicadores, interruptor de tema y botón de la lista
   ===================================================================== */

/* --- Indicadores (escritorio): tres tarjetas chicas con ícono, título y valor --- */
.metrics { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
@media (min-width: 768px) { .metrics { display: flex; } }
.metric {
    display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border-radius: 14px;
    background: var(--glass-bg); border: 1px solid var(--border-subtle);
}
.metric-ic {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--text-primary) 9%, transparent); color: var(--text-primary);
}
.metric-ic .material-symbols-outlined { font-size: 16px; }
.metric:nth-child(2) .metric-ic { background: color-mix(in srgb, var(--alert) 14%, transparent); color: var(--alert); }
.metric-leader .metric-ic { background: color-mix(in srgb, var(--save) 16%, transparent); color: var(--save); }
.metric-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.metric-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.metric-v { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-leader .metric-v { color: var(--save); }
/* Súper líder: solo el trofeo y el nombre, en una línea (el título "Súper líder" queda en el tooltip) */
.metric-leader { padding: 3px 10px 3px 4px; gap: 6px; }
.metric-leader .metric-l { display: none; }
.metric-leader .metric-ic { width: 22px; height: 22px; }
.metric-leader .metric-ic .material-symbols-outlined { font-size: 14px; }
.metric-leader .metric-v { font-size: var(--fs-xs); }
/* Pantallas medianas: solo ícono y valor (el título queda en el tooltip) */
@media (max-width: 1099px) {
    .metric-l { display: none; }
    .metric { padding: 3px 10px 3px 4px; gap: 6px; }
}

/* --- Indicadores (celular): franja de tres columnas --- */
.metrics-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); width: 100%;
    border-bottom: 1px solid var(--border-subtle); background: var(--header-bg);
}
@media (min-width: 768px) { .metrics-strip { display: none; } }
.ms-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 4px; line-height: 1.15; min-width: 0; }
.ms-cell + .ms-cell { border-left: 1px solid var(--border-subtle); }
.ms-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ms-v { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ms-leader .ms-v { color: var(--save); }

/* --- Interruptor de tema: sol / luna con perilla amarilla --- */
.theme-switch { display: none; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) { .theme-switch { display: inline-flex; } }
.ts-track {
    position: relative; width: 60px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 7px; background: var(--glass-bg); border: 1px solid var(--border-subtle); transition: border-color .2s ease;
}
.theme-switch:hover .ts-track { border-color: var(--accent); }
body .ts-icon { font-size: 17px; z-index: 1; color: var(--text-muted); transition: color .25s ease; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ts-thumb {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #9a97c9;   /* tema oscuro: perilla lavanda grisácea (luna) */
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transform: translateX(28px); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
body .ts-moon { color: #14122a; }
html[data-theme='light'] .ts-thumb { transform: none; background: #E39A5B; }   /* tema claro: perilla dorada apagada (sol) */
html[data-theme='light'] .ts-sun { color: #2b1000; }
html[data-theme='light'] .ts-moon { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .ts-thumb { transition: none; } }

/* --- Botón de la lista (canasta) con contador --- */
.cart-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--glass-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease; flex-shrink: 0;
}
.cart-btn:hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* En la página de la lista, el botón del carrito va marcado (naranja liso, igual que el botón seleccionado de la barra) */
.cart-btn.is-active, .cart-btn.is-active:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
body .cart-btn .material-symbols-outlined { font-size: 24px; }
.cart-dot {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;   /* rojo: contador del carrito (blanco sobre #dc2626 pasa el contraste AA) */
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-main);
}
.cart-btn .cart-dot.hidden { display: none; }
/* En celular la lista ya está en la barra inferior (con su contador): el carrito de arriba sobra */
@media (max-width: 767px) { .cart-btn { display: none; } }

/* Marca de "Nuevo" en el ícono de la Lista (compra inteligente); la pone ui.js hasta que se entra a la Lista */
.nav-new {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); z-index: 1;
    padding: 1px 6px; border-radius: 999px; background: var(--save); color: #04200f;
    font-size: 9px; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
    box-shadow: 0 0 0 2px var(--bg-main); pointer-events: none;
}
.bottom-nav .nav-new { bottom: auto; top: 3px; left: auto; right: calc(50% + 8px); transform: none; box-shadow: none; }
.nav-new.is-inline { position: static; transform: none; margin-left: 4px; box-shadow: none; align-self: center; }

/* "Sobre Preciazo" al pie del inicio: una sola línea chica y tenue; el texto (para buscadores) se ve solo si se despliega */
.about-seo { width: 100%; max-width: 1280px; margin: 0 auto; padding: 2px 24px 12px; text-align: center; color: var(--text-muted); }   /* mismo ancho que el footer */
.about-seo summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 600; opacity: .5; transition: opacity .15s; }
.about-seo summary::-webkit-details-marker { display: none; }
.about-seo summary::after { content: '+'; font-weight: 400; }
.about-seo[open] summary::after { content: '–'; }
.about-seo summary:hover, .about-seo summary:focus-visible, .about-seo[open] summary { opacity: .85; }
.about-seo-body { margin-top: 10px; text-align: left; font-size: 11.5px; line-height: 1.6; }
/* Todo corrido en un solo bloque: títulos y párrafos en línea, sin saltos (y sin el tope de ancho general de los párrafos) */
.about-seo-body h2, .about-seo-body p { display: inline; margin: 0; max-width: none; font-size: inherit; }
.about-seo-body h2 { font-weight: 600; }
.about-seo-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.about-seo-body a:hover { color: var(--text-primary); }

/* Beneficios del hero que son links (Ofertas, Monitor, Compra inteligente) */
.hero-perk-link { text-decoration: none; color: inherit; border-radius: 12px; }
/* Todos alineados arriba: en escritorio van en 4 columnas angostas y algunos títulos ocupan 2 renglones; centrados
   verticalmente, cada ícono y cada título quedaban a una altura distinta. El link ocupa todo el alto de su celda. */
.hero-perks > li { display: flex; }
.hero-perks .hero-perk { align-items: flex-start; flex: 1; }
.hero-perk-link:hover b, .hero-perk-link:focus-visible b { color: var(--accent-text); }

/* --- Botón "Agregar" / "En mi lista" (buscador y ofertas): mismo tinte que los botones de acción
   (ej. WhatsApp), y se ilumina igual al pasar el mouse o tocar. Una sola definición (antes había
   dos generaciones de esta misma regla superpuestas por especificidad, y el navegador a veces
   tardaba en resolver cuál ganaba, dejando el color "En mi lista" pegado en el de reposo). --- */
.list-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; min-height: 44px; padding: 0 14px 0 10px;
    border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer;
    background-color: var(--icon-btn-bg, rgba(249, 115, 22, .1)); color: var(--icon-btn-text, #F97316); border: 1px solid var(--icon-btn-border, rgba(249, 115, 22, .3));
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.list-btn .material-symbols-outlined { font-size: 20px; }
/* Solo el estado "en mi lista" se rellena de amarillo. Pasar el mouse solo refuerza el borde y el tinte
   (y únicamente en dispositivos con mouse: en el celular el hover queda pegado después de tocar). */
@media (hover: hover) {
    .list-btn:hover { background-color: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
}
.list-btn:active { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.list-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-btn.is-in, .list-btn.is-in:hover, .list-btn.is-in:active {
    background-color: var(--accent); color: #000; border-color: var(--accent);
}
@media (min-width: 768px) { .list-btn { min-height: 38px; } }

/* --- Barra de búsqueda: un campo y solo la lupa --- */
.search-form {
    position: relative; display: flex; align-items: center; gap: 4px; width: 100%;
    padding: 6px 6px 6px 22px; border-radius: 999px; background: #fff; border: 1px solid transparent;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28); transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-theme='light'] .search-form { border-color: var(--border-subtle); box-shadow: 0 8px 26px rgba(15, 23, 42, .12); }
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 10px 34px rgba(0, 0, 0, .28), 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.search-input {
    flex: 1; min-width: 0; height: 48px; padding: 0; background: transparent; border: 0; outline: none; box-shadow: none;
    font-size: 16px; font-weight: 600; color: #111827; text-align: left;
}
.search-input:focus { outline: none; box-shadow: none; border: 0; }
.search-input::placeholder { color: #6b7280; font-weight: 500; }
.search-scan {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #4b5563; cursor: pointer;
}
.search-scan .material-symbols-outlined { font-size: 26px; }
.search-scan:active { background: rgba(0, 0, 0, .06); }
@media (min-width: 768px) { .search-scan { display: none; } }
.search-go {
    position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #000;
    background: linear-gradient(135deg, #FDBA74 0%, #EA580C 100%); box-shadow: 0 4px 14px rgba(234, 88, 12, .5);
    transition: transform .18s ease, box-shadow .18s ease;
}
body .search-go .search-go-icon { font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.search-go:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(234, 88, 12, .65); }
.search-go:active { transform: scale(.95); }
.search-go:disabled { cursor: progress; transform: none; }
.search-go:disabled .search-go-icon { display: none; }
.search-go .search-go-loader.hidden { display: none; }
.search-go .search-go-loader { font-size: 26px; }
@media (max-width: 767px) { .search-form { padding-left: 18px; } }

/* --- Tarjeta de producto en celular: "Agregar" ocupa el ancho y el compartir queda al lado --- */
@media (max-width: 639px) { .header-actions .list-btn { flex: 1; } }
.search-input { text-overflow: ellipsis; }
@media (max-width: 420px) {
    .search-input { font-size: 16px; }
    .search-input::placeholder { font-size: 13px; }
    .search-scan { width: 40px; }
    .search-form { padding-left: 16px; gap: 2px; }
}
@media (max-width: 420px) {
    .search-go { width: 44px; height: 44px; }
    body .search-go .search-go-icon { font-size: 26px; }
    .search-scan { width: 36px; height: 40px; }
    .search-scan .material-symbols-outlined { font-size: 24px; }
    .search-form { padding: 5px 5px 5px 14px; }
    .search-input { height: 44px; }
    .search-input::placeholder { font-size: 12.5px; }
}



/* --- Celular: sin pie de página (la barra inferior y el menú lo reemplazan) --- */
@media (max-width: 767px) {
    body footer { display: none !important; }
}
.menu-version { margin-top: auto; padding-top: 12px; text-align: center; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); opacity: .8; }

.menu-version { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 2px; }

/* El plugin de formularios de Tailwind pinta un recuadro azul al enfocar los campos: en la búsqueda el aro amarillo lo pone la barra entera */
.search-form .search-input,
.search-form .search-input:focus,
.search-form .search-input:focus-visible {
    outline: none !important; box-shadow: none !important; border: 0 !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-offset-shadow: 0 0 #0000 !important;
    background: transparent !important;
}

/* --- Footer de escritorio: tres columnas simétricas y la línea legal centrada --- */
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; }
.footer-grid > :first-child { justify-self: start; }
.footer-grid > :last-child { justify-self: end; }
.footer-legal { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }html[data-theme='light'] .search-form:focus-within { border-color: var(--accent); box-shadow: 0 8px 26px rgba(15, 23, 42, .12), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }


/* --- Botón "Invitame un café" del footer (escritorio) --- */
.coffee-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 15px 0 11px; border-radius: 999px; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: 800; color: #1f1300; text-decoration: none;
    background: linear-gradient(135deg, #FDBA74 0%, #EA580C 100%); box-shadow: 0 2px 10px rgba(234, 88, 12, .35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .coffee-btn .material-symbols-outlined { font-size: 19px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.coffee-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(234, 88, 12, .55); filter: brightness(1.04); }
.coffee-btn:active { transform: translateY(0); }.coffee-btn { height: 28px; padding: 0 14px 0 9px; gap: 6px; }
body .coffee-btn .material-symbols-outlined { font-size: 18px; }
@media (min-width: 768px) { html body footer { padding-top: 14px; padding-bottom: 14px; } }   /* compensa la altura del botón: el footer mantiene su tamaño */

/* =====================================================================
   Diálogo de confirmación (reemplaza confirm() nativo): confirmDialog() en ui.js
   ===================================================================== */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .2s ease;
}
.confirm-overlay.is-open { opacity: 1; }
.confirm-card {
    width: min(360px, 100%); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg); padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45); transform: scale(.94); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.confirm-overlay.is-open .confirm-card { transform: scale(1); opacity: 1; }
.confirm-handle { display: none; }
.confirm-icon { font-size: 36px; color: var(--accent-text); margin-bottom: 6px; }
.confirm-icon.is-destructive { color: var(--alert); }
.confirm-title { font-size: var(--fs-lg); font-weight: 800; }
.confirm-msg { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin-top: 2px; }
.confirm-actions { display: flex; gap: 10px; width: 100%; margin-top: 20px; }
.confirm-actions button { flex: 1; min-height: 46px; }
.btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px;
    background: var(--alert); color: #fff; font-weight: 800; font-size: var(--fs-sm); border: 0; cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.08); }

/* Celular: hoja que sube desde abajo, como un action sheet nativo */
@media (max-width: 767px) {
    .confirm-overlay { align-items: flex-end; padding: 0; }
    .confirm-card {
        width: 100%; border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%); opacity: 1; transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }
    .confirm-overlay.is-open .confirm-card { transform: translateY(0); }
    .confirm-handle { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--border-subtle); margin: 2px 0 16px; }
    .confirm-icon { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .confirm-overlay, .confirm-card { transition: none; }
}

/* --- Menú de compartir: shareContent() en ui.js (reusa el overlay/tarjeta del confirmDialog) --- */
.share-card { width: min(380px, 100%); align-items: stretch; }
.share-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.share-opt {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 0; background: transparent;
    color: var(--text-primary); cursor: pointer; text-decoration: none; border-radius: var(--r-md, 14px); font-family: inherit;
}
.share-opt:hover, .share-opt:focus-visible { outline: none; background: rgba(255, 255, 255, .06); }
.share-ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff;
    background: var(--border-subtle);
}
.share-ic svg { width: 22px; height: 22px; fill: currentColor; }
.share-ic .material-symbols-outlined { font-size: 22px; }
.share-lb { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.share-whatsapp .share-ic { background: #25D366; }
.share-facebook .share-ic { background: #1877F2; }
.share-x .share-ic { background: #000; border: 1px solid rgba(255, 255, 255, .25); }
.share-telegram .share-ic { background: #26A5E4; }
.share-copy .share-ic { background: #4b5563; }
.share-cancel { width: 100%; margin-top: 14px; min-height: 46px; }
@media (max-width: 380px) { .share-ic { width: 44px; height: 44px; } }

/* --- Modal de historial de precio: openPriceHistoryModal() en ui.js --- */
.hist-card { width: min(460px, 100%); position: relative; padding-top: 20px; }
.hist-close {
    position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 999px; border: 0;
    background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hist-close:hover { background: var(--glass-bg); color: var(--text-primary); }
/* Popup con la ficha del producto (producto.php?embed=1) al tocar la foto de un resultado */
.confirm-card.prod-pop { width: min(620px, 100%); max-height: 90vh; padding: 0; overflow: hidden; position: relative; align-items: stretch; display: block; }
.prod-pop iframe { display: block; width: 100%; height: 420px; max-height: 90vh; border: 0; background: var(--bg-card); }   /* el alto real lo pone app.js al cargar */
.prod-pop-close { z-index: 2; background: var(--bg-card); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.product-photo-link { display: block; cursor: zoom-in; transition: transform .15s ease; }
.product-photo-link:hover { transform: scale(1.05); }
@media (max-width: 767px) { .confirm-card.prod-pop { padding: 0; } }
.hist-body { width: 100%; margin-top: 16px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.hist-body canvas { width: 100% !important; height: 240px !important; }
.hist-loading, .hist-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: 20px 10px; }
.hist-empty .material-symbols-outlined { font-size: 32px; opacity: .6; }
.hist-loading .material-symbols-outlined { animation: hist-spin 1s linear infinite; }
@keyframes hist-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hist-note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* --- Botón fijo "ver historial" junto a Agregar/WhatsApp --- */
.hist-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer;
    background-color: var(--icon-btn-bg, rgba(249, 115, 22, .1)); color: var(--icon-btn-text, #F97316); border: 1px solid var(--icon-btn-border, rgba(249, 115, 22, .3));
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hist-btn .material-symbols-outlined { font-size: 20px; }
@media (hover: hover) { .hist-btn:hover { background-color: var(--icon-btn-hover-bg, #F97316); color: var(--icon-btn-hover-text, #000); border-color: var(--icon-btn-hover-bg, #F97316); } }
@media (min-width: 768px) { .hist-btn { width: 40px; height: 40px; } }

/* --- Estado de error dentro del modal del escáner (reemplaza alert()) --- */
.scanner-error {
    display: none; position: absolute; inset: 0; z-index: 20; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; text-align: center; background: rgba(10, 10, 10, .97);
}
.scanner-error.is-shown { display: flex; }
.scanner-error .material-symbols-outlined { font-size: 46px; color: var(--text-muted); }
.scanner-error-title { font-size: var(--fs-md); font-weight: 800; color: #fff; }
.scanner-error-msg { font-size: var(--fs-xs); color: #9ca3af; max-width: 280px; line-height: 1.5; }
.scanner-error .btn-primary { margin-top: 8px; }

/* =====================================================================
   Hero del home: título, beneficios y (escritorio) celular con precios reales
   ===================================================================== */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; text-align: center; }
.hero-title {
    font-size: clamp(2.5rem, 9vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
    color: var(--text-primary);
}
.hero-accent { display: inline-block; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Tema claro: el título va todo en carbón, sin adornos (el amarillo solo sobre fondo claro no se lee) */
html[data-theme='light'] .hero-title, html[data-theme='light'] .hero-accent { background: none; color: #111318; -webkit-text-fill-color: #111318; }
.hero-sub { margin: 16px auto 0; max-width: 34rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.55; color: var(--text-muted); }
.hero-perks { list-style: none; margin: 26px auto 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; max-width: 42rem; }
.hero-perk { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; text-align: left; }
.hero-perk .ic {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text);
}
.hero-perk .ic .material-symbols-outlined { font-size: 22px; }
.hero-perk b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.hero-perk .t { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.hero-search { width: 100%; }

/* Con una búsqueda en curso el hero se compacta para dejar lugar a los resultados */
.hero-grid.is-searching { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hero-grid.is-searching .hero-perks, .hero-grid.is-searching .hero-sub, .hero-grid.is-searching .hero-stores, .hero-grid.is-searching .trending-container { display: none; }
.hero-grid.is-searching .hero-title { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: clamp(18px, 3vw, 28px); }
.hero-grid.is-searching .hero-title br { display: none; }
@media (min-width: 640px) { .hero-grid.is-searching .hero-title .hero-accent { margin-left: .3em; } }

.hero-section { overflow-x: clip !important; }
.hero-top { position: relative; }
/* Sobre el degradé oscuro los textos de apoyo van más claros que el gris de siempre */
html:not([data-theme='light']) .hero-main .hero-sub, html:not([data-theme='light']) .hero-main .hero-perk .t { color: rgba(255, 255, 255, .78); }
/* Por encima de las tarjetas de ofertas de abajo (sus carteles de descuento usan z-index 1 y las flechas 3): si no, la lista de sugerencias del buscador queda tapada por esos carteles. */
.hero-main { position: relative; z-index: 5; }
.hero-perks { max-width: 54rem; }
@media (min-width: 768px) { .hero-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-search { max-width: 46rem; margin-inline: auto; }

/* Barra de supermercados: solo los logos */
.hero-stores {
    list-style: none; display: flex; align-items: center; justify-content: center; gap: 16px; width: fit-content; margin: 22px auto 0; padding: 8px 16px;
    border-radius: 18px; background: color-mix(in srgb, var(--bg-card) 78%, transparent); border: 1px solid var(--border-subtle);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-stores li { display: flex; }
.hero-stores img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
@media (max-width: 767px) {
    .hero-stores { width: auto; justify-content: space-between; margin: 64px 0 0; padding: 10px 14px; }
    .hero-stores img { width: 34px; height: 34px; }
}

/* El buscador va justo debajo del título y el subtítulo (lo primero que se usa), con los logos de los súper; los beneficios pasan abajo */
.hero-main { display: flex; flex-direction: column; }
.hero-title { order: 1; }
.hero-sub { order: 2; margin-bottom: 26px; }
.hero-search { order: 3; }
.hero-perks { order: 4; width: 100%; margin: 30px auto 0; }
@media (max-width: 767px) {
    .hero-sub { margin-bottom: 18px; }
    /* Celular: 2 columnas con los íconos alineados (si cada beneficio se centra según el largo de su texto, los íconos quedan desfasados) */
    .hero-perks { margin: 22px auto 0; max-width: 30rem; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
    .hero-perk { justify-content: flex-start; gap: 8px; align-items: center; }
    .hero-perk .ic { width: 34px; height: 34px; border-radius: 10px; }
    .hero-perk .ic .material-symbols-outlined { font-size: 20px; }
    /* Título y subtítulo en una sola línea cada uno: juntos miden lo mismo que el ícono y todo queda parejo */
    .hero-perk b { font-size: clamp(9.8px, 3.1vw, 13px); line-height: 1.25; white-space: nowrap; }
    .hero-perk .t { font-size: clamp(8.8px, 2.75vw, 12px); line-height: 1.25; white-space: nowrap; }
}

/* Ofertas de hoy: slider de miniaturas con foto y etiqueta */
.hero-grid > .trending-container { align-items: stretch; padding: 0; margin-top: 26px; width: 100%; }
/* "Ver todas →" va pegado al título (antes iba al borde derecho, lejos de lo que abre) */
.hero-grid > .trending-container .trending-head { justify-content: flex-start; align-items: center; gap: 16px; margin-bottom: 10px; }
.hero-grid > .trending-container .trending-chips-row { max-width: none; justify-content: flex-start; }
/* Título del slider: más grande y con ícono en pastilla, para que no pase desapercibido */
.hero-grid > .trending-container .trending-label { gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.hero-grid > .trending-container .trending-label .material-symbols-outlined {
    display: inline-grid; place-items: center; width: 30px; height: 30px; font-size: 19px; border-radius: 10px;
    color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 16%, transparent);
}
.hero-grid > .trending-container .trending-more { font-size: 13px; font-weight: 700; }
@media (max-width: 640px) { .hero-grid > .trending-container .trending-label { font-size: 17px; } }
.deal-slider { position: relative; width: 100%; }
.trending-container[hidden] { display: none; }
.hero-grid > .trending-container + .trending-container { margin-top: 12px; }
.deal-old { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trending-chips-row.is-slider {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
    scroll-snap-type: x mandatory; scroll-padding-left: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trending-chips-row.is-slider::-webkit-scrollbar { display: none; }
.deal-card {
    position: relative; flex: 0 0 calc((100% - 4px - (var(--n, 2) - 1) * 12px) / var(--n, 2)); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px;
    text-align: left; font-family: inherit; color: var(--text-primary); cursor: pointer; border-radius: 18px;
    background: var(--glass-bg); border: 1px solid var(--border-subtle); transition: border-color .2s ease, transform .2s ease;
}
.deal-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-2px); }
.deal-card .deal-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 8px; font-size: 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.deal-photo { display: grid; place-items: center; height: 112px; border-radius: 12px; background: #fff; overflow: hidden; }
.deal-photo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.deal-photo .material-symbols-outlined { font-size: 36px; color: #9ca3af; }
.deal-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.deal-foot { display: flex; align-items: center; gap: 6px; }
.deal-price { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.deal-store { width: 20px; height: 20px; margin-left: auto; border-radius: 50%; object-fit: cover; }
.deal-go { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #111; }
.deal-go .material-symbols-outlined { font-size: 18px; }
.deal-nav {
    position: absolute; top: 46%; z-index: 3; display: none; align-items: center; justify-content: center; width: 36px; height: 36px;
    transform: translateY(-50%); border-radius: 50%; cursor: pointer; color: var(--text-primary);
    background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.deal-nav.is-prev { left: -19px; }
.deal-nav.is-next { right: -19px; }
@media (hover: hover) and (min-width: 768px) { .deal-nav:not([hidden]) { display: flex; } }
@media (min-width: 1024px) {
    .deal-photo { height: 128px; }
}
@media (max-width: 600px) {
    .deal-card { padding: 8px; gap: 6px; }
    .deal-photo { height: 96px; }
    .deal-price { font-size: 14px; }
    /* Con precio anterior tachado, ese precio va arriba de una línea propia para que entren precio, súper y flecha */
    .deal-foot:has(.deal-old) { flex-wrap: wrap; row-gap: 2px; }
    .deal-foot .deal-old { order: -1; flex-basis: 100%; font-size: 11px; line-height: 1; }
}

@media (max-width: 480px) {
    .hero-perks { gap: 12px 10px; margin: 20px 0 22px; }
    .hero-perk .ic { width: 36px; height: 36px; border-radius: 11px; }
    .hero-sub { font-size: 1rem; }
}

/* Progreso de la búsqueda: barra + mensaje + un logo por súper que se tilda al responder (app.js) */
.search-progress { margin-bottom: 14px; padding: 14px 16px 16px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--border-subtle); }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-msg { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.sp-count { flex-shrink: 0; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sp-bar { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.sp-bar > i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--brand-orange); transition: width .45s ease; animation: sp-pulse 1.2s ease-in-out infinite; }
@keyframes sp-pulse { 50% { filter: brightness(1.3); } }
.sp-stores { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; }
.sp-stores li { position: relative; width: 34px; height: 34px; opacity: .5; animation: sp-blink 1.2s ease-in-out infinite; transition: opacity .3s ease; }
.sp-stores li.is-done { opacity: 1; animation: none; }
.sp-stores img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sp-stores .material-symbols-outlined { display: none; position: absolute; right: -4px; bottom: -4px; padding: 1px; border-radius: 50%; font-size: 14px; font-weight: 700; background: var(--save); color: #0b1a05; }
.sp-stores li.is-done .material-symbols-outlined { display: block; }
@keyframes sp-blink { 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sp-bar > i, .sp-stores li { animation: none; } }

/* Durante una búsqueda el hero compacto va centrado, simétrico con la grilla de resultados */
.hero-grid.is-searching .hero-main { text-align: center; }
.hero-grid.is-searching .hero-search { margin-inline: auto; }


/* --- Opciones contextuales: "Solo el más barato" (resultados) y "Agregar a mi lista al escanear" (escáner) --- */
.opt-chip {
    position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
    border: 1px solid var(--border-subtle); background: var(--glass-bg); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; user-select: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.opt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.opt-chip .material-symbols-outlined { font-size: 18px; }
.opt-chip:hover { color: var(--text-primary); }
.opt-chip:has(input:checked) { color: var(--accent-text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.opt-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 768px) { .opt-chip { align-self: auto; } }
.scan-opt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 600; color: #d1d5db; cursor: pointer; }

/* --- "Solo el más barato": grilla de tarjetas, mismo estilo que las Ofertas de hoy --- */
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .sv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sv-card { cursor: default; flex: initial; }
.sv-card:hover { transform: none; }
.sv-card .deal-photo { height: 132px; }
.sv-card .deal-price { font-size: 17px; }
.sv-card .deal-store { width: 32px; height: 32px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); background: #fff; }
.sv-card .deal-go { width: 32px; height: 32px; }
.sv-card .sv-promo { align-self: flex-start; max-width: 100%; }
.sv-card .deal-go { text-decoration: none; }
.sv-acts { display: block; margin-top: 2px; }
.sv-acts .sv-list { width: 100%; min-height: 38px; padding: 0 10px; font-size: 13px; }
.sv-acts .sv-list .material-symbols-outlined { font-size: 18px; }
.sv-acts .sv-mini { position: absolute; right: 16px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer;
    background: rgba(20, 20, 20, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(4px); }
.sv-acts .sv-mini:nth-of-type(2) { top: 16px; }
.sv-acts .sv-mini:nth-of-type(3) { top: 56px; }
.sv-acts .sv-mini .material-symbols-outlined { font-size: 18px; }
@media (hover: hover) { .sv-acts .sv-mini:hover { background: var(--accent); color: #000; border-color: var(--accent); } }

@media (min-width: 1024px) {
    .pr-card { grid-template-columns: 88px minmax(0, 1fr); }
    .pr-photo { width: 88px; height: 88px; }
    .pr-photo img { padding: 6px; }
    .pr-name { font-size: 15px; -webkit-line-clamp: 2; }
}

/* --- Llevar la compra al carrito del súper (carrito_super.js) --- */
.cs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 800; cursor: pointer; color: var(--accent-text);
    background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cs-btn .material-symbols-outlined { font-size: 19px; }
.cs-btn.is-main { background: var(--accent); color: #000; border-color: var(--accent); }
@media (hover: hover) { .cs-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); } }
.cs-btn:focus-visible, .cs-primary:focus-visible, .cs-ghost:focus-visible, .cs-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .6); }
.cs-modal {
    width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-subtle); border-radius: 20px 20px 0 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
@media (min-width: 640px) { .cs-overlay { align-items: center; padding: 24px; } .cs-modal { border-radius: 20px; } }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.cs-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary); }
.cs-x { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); cursor: pointer; }
.cs-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 12px; overflow-y: auto; }
.cs-lead { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cs-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.cs-row { display: flex; gap: 8px; margin: 6px 0; }
.cs-input { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--bg-main); color: var(--text-primary); border: 1px solid var(--border-subtle); font: inherit; }
.cs-row .cs-input { flex: 1; min-width: 0; }
.cs-note, .cs-hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.cs-status { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.cs-items { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 12px; }
.cs-items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: var(--fs-sm); border-top: 1px solid var(--border-subtle); }
.cs-items li:first-child { border-top: 0; }
.cs-items li.is-bad .cs-iprice { color: var(--alert); }
.cs-iname { min-width: 0; }
.cs-iprice { flex-shrink: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-total { margin: 0; font-size: 18px; font-weight: 800; }
.cs-notes { display: flex; flex-direction: column; gap: 3px; margin: 0; padding-left: 18px; font-size: var(--fs-xs); color: var(--text-muted); }
.cs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 18px; border-top: 1px solid var(--border-subtle); }
.cs-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-primary { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #000; font-weight: 800; text-decoration: none; }
.cs-ghost { min-height: 40px; padding: 0 14px; border-radius: 999px; background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
/* El plugin de formularios de Tailwind pinta los inputs de blanco: se fuerza el color de la app dentro de la ventana */
.cs-modal input.cs-input, .cs-modal select.cs-input {
    background-color: var(--bg-main); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 12px; min-height: 40px; box-shadow: none;
}
.cs-modal input.cs-input:focus, .cs-modal select.cs-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Etiqueta de súper regional (Átomo): se muestra siempre y aclara dónde se puede comprar */
.tag-region {
    display: inline-flex; align-items: center; gap: 3px; max-width: 100%; white-space: nowrap;
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, #3b82f6 15%, transparent); color: #60a5fa;
}
[data-theme="light"] .tag-region { color: #1d4ed8; }
.tag-region .material-symbols-outlined { font-size: 13px; }

/* Botón dentro de las tarjetas de totales (7 columnas, angostas): una sola línea y alineado abajo en todas */
.cs-btn.cs-card { margin-top: auto; align-self: stretch; white-space: nowrap; min-height: 34px; padding: 0 10px; font-size: 12px; }
.cs-btn.cs-card .material-symbols-outlined { font-size: 17px; }
.cs-btn { white-space: nowrap; }


/* Escritorio: todo el sitio al 90% (como un Ctrl − en el navegador). El celular y la tablet no cambian. */
@media (min-width: 1280px) {
    html { zoom: .9; }
    /* El zoom achica todo al 90%, pero las unidades vh no: "alto de pantalla completa" quedaba 10% corto y el pie flotaba con un hueco debajo en las páginas cortas */
    html .min-h-screen { min-height: calc(100vh / .9); }
}

/* Pantallas anchas (desde 1600 px): los resultados de búsqueda usan más ancho y van de a 4 por fila (12 por página, ver app.js) */
@media (min-width: 1600px) {
    #comparativa { max-width: 1760px; }
    #supermarketGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* "Ofertas de hoy" y "Bajaron esta semana" salen del bloque de 1280 px y toman el mismo ancho que los resultados (el título y el buscador no se mueven) */
    .hero-grid > .trending-container { width: 1760px; max-width: none; margin-left: -240px; }
}


/* RV-04: el menú de escritorio aparece desde 1024 px y la hamburguesa se escondía desde 768 px: en tablet (768–1023 px) no había ningún menú.
   Ahora la hamburguesa se ve hasta los 1023 px. (Va acá y no en las clases de cada página porque el CSS compilado de Tailwind no trae lg:hidden.) */
@media (min-width: 768px) and (max-width: 1023.98px) { button[aria-label="Abrir el menú"], button[aria-label="Menú"] { display: inline-flex !important; align-items: center; } }
@media (min-width: 1024px) { button[aria-label="Abrir el menú"], button[aria-label="Menú"] { display: none !important; } }
/* RV-06: en pantallas bajas (celular acostado o chico) el menú era más alto que la pantalla y no se podía bajar hasta las últimas opciones */
#mobileMenuContent { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* RV-03: aviso de súper que no se pudo consultar */
.search-fail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4;
    color: #fde68a; background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .35); }
.search-fail .material-symbols-outlined { font-size: 20px; color: #fbbf24; }
.search-fail-txt { flex: 1 1 260px; min-width: 0; }
.search-fail-btn { padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #1a1305; background: #fbbf24; border: 0; cursor: pointer; }
.search-fail-btn:hover { filter: brightness(1.08); }
.pr-missing.pr-failed { display: flex; align-items: center; gap: 6px; color: #fbbf24; }
.pr-missing.pr-failed .material-symbols-outlined { font-size: 16px; }
[data-theme="light"] .search-fail { color: #78350f; background: #fef3c7; border-color: #f59e0b; }
[data-theme="light"] .search-fail .material-symbols-outlined, [data-theme="light"] .pr-missing.pr-failed { color: #b45309; }

/* RV-09: en el tema claro los rellenos verdes ("Más barato", "Nuevo") llevan texto blanco: el texto oscuro daba 3,4:1 */
html[data-theme="light"] .tag-best, html[data-theme="light"] .nav-new { color: #fff; }


/* Mi lista: con 8 súper (los 6 nacionales + Átomo + Día) la grilla de totales pasa a 8 columnas en pantallas grandes (el CSS compilado de Tailwind llega hasta 7) */
@media (min-width: 1280px) { #totalsGrid.tg-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }


/* Tarjeta de producto con muchos súper: las filas desde la sexta se despliegan con "Ver N más" */
.pr-more { display: flex; flex-direction: column; min-width: 0; }
.pr-more[hidden] { display: none; }
.pr-morebtn { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 2px; padding: 8px; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border-radius: 0 0 12px 12px; }
.pr-morebtn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pr-morebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr-morebtn .material-symbols-outlined { font-size: 20px; transition: transform .2s ease; }
.pr-morebtn.is-open .material-symbols-outlined { transform: rotate(180deg); }
/* Las tarjetas de una fila miden lo mismo (simetría). Solo cuando alguien despliega "Ver N más" en una fila, sus tarjetas pasan a medir lo que necesitan (clase free-h, la pone togglePrMore) para que la que quedó cerrada no tenga un hueco enorme debajo */
.res-card.free-h { align-self: start; }

/* Sugerencias del buscador: lo que coincide con lo escrito va en negrita */
.suggestion-item .sg-text { min-width: 0; overflow-wrap: anywhere; }
.suggestion-item .sg-hit { font-weight: 800; color: #fff; }   /* la lista es oscura en los dos temas */

/* Sugerencias del buscador en el tema claro: la lista también es clara */
[data-theme="light"] #suggestionsContainer.visible { background: rgba(255, 255, 255, 0.98); border-color: rgba(194, 65, 12, 0.28); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16); }
[data-theme="light"] .suggestion-item { color: #475569; border-bottom-color: rgba(15, 23, 42, 0.07); }
[data-theme="light"] .suggestion-item:hover, [data-theme="light"] .suggestion-item.active { background: rgba(234, 179, 8, 0.16); color: #0f172a; }
[data-theme="light"] .suggestion-item.active { border-left-color: #b45309; }
[data-theme="light"] .suggestion-icon { color: #C2410C; opacity: .8; }
[data-theme="light"] .suggestion-item .sg-hit { color: #0f172a; }

/* Ofertas: en escritorio la frase de arriba va en una sola línea (en celular sigue partiéndose) */
.of-lead { padding-bottom: 8px; }
@media (min-width: 768px) { .of-lead { max-width: none; white-space: nowrap; padding-bottom: 20px; } }

/* Orden de los resultados: el desplegable de siempre; con un orden elegido se marca con el color de acento */
.select-pill.is-active { color: var(--accent-text); border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); }

/* En celular los dos controles (orden y "Solo el más barato") van en una línea, sin partir sus textos */
.opt-chip { white-space: nowrap; }
#resultsContent .opt-chip, #resultsContent .select-pill { min-height: 34px; white-space: nowrap; }

/* El menú del orden de resultados se abre hacia la derecha del botón (el botón queda al borde izquierdo en celular) */
.select-menu.select-menu-left { left: 0; right: auto; }

/* Pantallas anchas (desde 1600 px): los resultados y las ofertas se ensanchan hasta 1760 px, así que el encabezado hace lo mismo y el logo y los botones
   de la derecha quedan alineados con el borde de las tarjetas (antes seguía en 1400 px y quedaba más adentro). Mismo margen de los lados (24 px) en todas las páginas. */
@media (min-width: 1600px) {
    header.sticky { padding-left: 24px; padding-right: 24px; }
    header.sticky > .max-w-\[1400px\] { max-width: 1712px; }
}

/* Súper más barato hoy (canasta básica): en la barra de logos de la portada va con aro amarillo y una coronita */
.hero-stores li { position: relative; }
.hero-stores li.is-leader img { box-shadow: 0 0 0 2px var(--accent); }
.hero-stores .leader-crown {
    position: absolute; top: -8px; right: -7px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #000; font-size: 13px; line-height: 1; box-shadow: 0 0 0 2px var(--bg-card, #181b21);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Barra de logos de los supermercados (portada): con 8 logos los círculos no se aplastan en celular. Cada logo mantiene su forma redonda (alto = ancho)
   y, si falta lugar, se achican todos parejos en vez de estirarse hacia arriba. */
.hero-stores li { flex: 0 1 36px; min-width: 0; }
.hero-stores img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 767px) {
    .hero-stores { gap: 6px; padding: 10px 12px; }
    .hero-stores li { flex-basis: 34px; }
    .hero-stores img { width: 100%; height: auto; }
}

/* El cartel "Más barato llevando 2" pisaba el precio cuando la tarjeta es angosta (celular, o 4 por fila en escritorio): ahora el texto puede partirse en dos líneas
   y, si la tarjeta mide menos de 400 px de ancho, se muestra solo "Más barato" (el "Llevando 2: $X c/u" ya se explica en la misma fila). */
.pr-stores { container-type: inline-size; container-name: prstores; }
.pr-namerow .tag-best { max-width: 100%; white-space: normal; line-height: 1.2; }
@container prstores (max-width: 400px) { .pr-namerow .tb-more { display: none; } }

/* Tipografía (24/10/2026): texto en Nunito y títulos en Varela Round (cargadas desde Google Fonts en cada página).
   Varela Round solo tiene un grosor: el navegador le simula la negrita, como en cualquier título en negrita. */
h1, h2, h3, .font-display { font-family: 'Varela Round', 'Nunito', sans-serif; letter-spacing: -0.005em; }

/* Explorá por categoría: en escritorio las píldoras se acomodan como siempre; en celular van en dos tiras que se deslizan hacia el costado
   (con 13 píldoras en varias filas la sección quedaba larguísima). */
nav .cat-strip { display: contents; }
@media (max-width: 767px) {
    nav .cat-wrap { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-inline: -24px; }
    nav .cat-strip {
        display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 24px; scroll-snap-type: x proximity; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    nav .cat-strip::-webkit-scrollbar { display: none; }
    nav .cat-strip a { flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; font-size: 12.5px; scroll-snap-align: start; }
}

/* Degradé de fondo del inicio: luz amarilla desde arriba de todo, que atraviesa la barra superior (transparente arriba de todo) y se apaga hacia abajo.
   Está en el fondo de la página y no en el hero para que la barra pueda tomar el mismo color. */
body.home-glow {
    background-repeat: no-repeat; background-size: 100% 680px;
    background-image:
        radial-gradient(70% 90% at 50% 0%, rgba(233, 185, 73, .42) 0, rgba(233, 185, 73, 0) 70%),
        radial-gradient(48% 52% at 100% 55%, rgba(233, 185, 73, .14) 0, rgba(233, 185, 73, 0) 70%);
}
html[data-theme='light'] body.home-glow {
    background-image:
        radial-gradient(75% 95% at 50% 0%, rgba(233, 185, 73, .60) 0, rgba(233, 185, 73, 0) 72%),
        radial-gradient(48% 52% at 0% 55%, rgba(233, 185, 73, .24) 0, rgba(233, 185, 73, 0) 70%),
        radial-gradient(48% 52% at 100% 55%, rgba(233, 185, 73, .24) 0, rgba(233, 185, 73, 0) 70%);
}
body.home-glow:has(.hero-grid.is-searching) { background-size: 100% 380px; }

/* Barra superior: sin fondo arriba de todo; con color de vidrio y línea fina recién cuando se scrollea.
   El desenfoque (backdrop-filter) queda SIEMPRE puesto, como antes: prenderlo y apagarlo al scrollear dejaba el desenfoque pegado en el celular al cerrar el menú. */
header.sticky {
    background-color: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    transition: background-color .2s ease, border-color .2s ease;
}
header.sticky.is-scrolled { background-color: var(--header-bg); border-bottom-color: var(--border-subtle); }
header.sticky > .absolute { display: none; }
header.sticky.is-scrolled > .absolute { display: block; }

/* Pie: mismo color que el fondo de la página y una línea naranja fina arriba */
footer.border-t { border-top-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Logotipo escrito (reemplaza a la imagen del logo): "preciazos" en Nunito negrita, blanco en oscuro y carbón en claro, con la "a" naranja */
.brand-word { display: inline-block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 27px; line-height: 1; letter-spacing: -.03em; color: var(--text-primary); transition: transform .5s ease; }
.brand-word > span { color: var(--brand-orange); }
.brand-word-sm { font-size: 23px; }
a.group:hover .brand-word { transform: scale(1.05); }
@media (max-width: 767px) { .brand-word { font-size: 24px; } .brand-word-sm { font-size: 22px; } }

/* Barra superior (escritorio): el logo va a la izquierda y los botones de navegación a la derecha, pegados al interruptor de tema y al carrito.
   En el inicio, además, la barra arranca y termina en los mismos bordes que el contenido ("Ofertas de hoy", tarjetas); desde 1600 px el contenido
   es más ancho y ya tiene su propia regla. */
@media (min-width: 1024px) {
    header.sticky .gap-12 { flex: 1 1 auto; }
    header.sticky .gap-12 > nav { margin-left: auto; margin-right: 1.5rem; }
}
@media (min-width: 768px) and (max-width: 1599px) {
    body.home-glow header.sticky { padding-left: 24px; padding-right: 24px; }
    body.home-glow header.sticky > .max-w-\[1400px\] { max-width: 1280px; }
}
/* Pantallas anchas (desde 1600 px): las filas de ofertas miden 1760 px y arrancan más a la izquierda que el bloque del título; la barra toma ese mismo ancho,
   sin relleno a los costados, así el logo y el carrito caen justo en los bordes de las tarjetas. */
@media (min-width: 1600px) {
    body.home-glow header.sticky { padding-left: 0; padding-right: 0; }
    body.home-glow header.sticky > .max-w-\[1400px\] { max-width: 1760px; }
}
/* Pantallas medianas (1024-1279 px): no entran los 8 botones con íconos, así que van solo con texto y más juntos */
@media (min-width: 1024px) and (max-width: 1279px) {
    header.sticky .nav-link { padding: 0.5rem 0.7rem; }
    header.sticky .nav-link .material-symbols-outlined { display: none; }
}