/* ============================================================
   Distrivent — Sistema visual público
   ============================================================ */

:root {
    --brand-red: #E11D2E;
    --brand-red-600: #C81527;
    --brand-red-700: #A50F1F;
    --brand-red-50: #FFF1F2;
    --brand-navy: #0B1729;
    --brand-navy-700: #142339;
    --brand-navy-600: #1E2F4A;
    --brand-amber: #F59E0B;
    --brand-amber-50: #FFFBEB;

    /* Verde de "nuevo ingreso". No es el rojo de la marca a proposito: la
       cinta tiene que distinguirse de una oferta de un vistazo.
       El extremo oscuro no baja mas: con un verde mas apagado el texto de
       la cinta quedaba en 3.7 de contraste, por debajo de lo legible. */
    --nuevo: #1FE06A;
    --nuevo-700: #12B554;
    --nuevo-900: #0A7A38;

    --ink: #0F172A;
    --ink-muted: #475569;
    --ink-soft: #64748B;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --surface: #FFFFFF;
    --surface-muted: #F8FAFC;
    --surface-sunken: #F1F5F9;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 6px 16px -6px rgba(15, 23, 42, .12), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .08);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
}

* { box-sizing: border-box; }

/* ============================================================
   Scroll
   ============================================================ */

/* Firefox: barra fina y en gris de la paleta, no la gris del sistema. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    /* Que un ancla no deje el titulo tapado por el header pegajoso. */
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* WebKit: barra delgada, sin flechas, con el pulgar redondeado y separado
   del borde. La franja gris de fondo se saca: pesa visualmente al lado de
   una pagina blanca. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    /* El borde transparente afina el pulgar y lo despega del borde: sin
       esto queda pegado y con aspecto de barra vieja. */
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--ink);
    background: var(--surface-muted);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.dv-display {
    font-family: 'Anton', 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: .95;
    text-transform: uppercase;
}

.dv-container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 1024px) {
    .dv-container { padding: 0 32px; }
}

/* ============================================================
   Foco de teclado
   ============================================================ */

/* :focus-visible solo se activa navegando con teclado, no al hacer clic.
   Los campos quedan afuera a proposito: ya marcan el foco con su propio borde
   y anillo, y sumarles outline dibujaba dos aros rojos concentricos. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-red);
    outline-offset: 2px;
    border-radius: 6px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; }

/* El indicador del buscador es el del contenedor, no el del input. */
.dv-search-field:focus-within {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(225, 29, 46, .16);
}
.dv-search-input:focus,
.dv-search-input:focus-visible { outline: none; box-shadow: none; }
.dv-nav a:focus-visible,
.dv-topbar a:focus-visible,
.dv-footer a:focus-visible {
    outline-color: #fff;
}

/* ============================================================
   Header
   ============================================================ */

.dv-topbar {
    background: var(--brand-navy);
    color: #CBD5E1;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.dv-topbar a:hover { color: #fff; }

.dv-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}
.dv-topbar-left, .dv-topbar-right {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.dv-topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.dv-topbar-item img { height: 14px; width: auto; display: inline-block; }
.dv-topbar-item .fa { color: var(--brand-amber); }
.dv-topbar-item--wa { transition: color .15s ease; }
.dv-topbar-item--wa:hover { color: #25D366; }
.dv-ico-wa {
    width: 15px;
    height: 15px;
    color: #25D366;
    flex-shrink: 0;
}

.dv-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    transition: background .2s ease;
}
.dv-social-link:hover { background: var(--brand-red); color: #fff; }

.dv-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    transition: box-shadow .22s ease-in-out;
}
.dv-header.is-condensed { box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .28); }

/* ---- Fila principal: logo · buscador · acciones ---- */

.dv-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0 12px;
    flex-wrap: wrap;
    transition: padding .22s ease-in-out;
}
.dv-header.is-condensed .dv-header-main { padding: 10px 0 8px; }

.dv-logo { flex: 0 0 auto; }
.dv-logo img {
    height: 46px;
    width: auto;
    transition: height .22s ease-in-out;
}
@media (min-width: 768px) { .dv-logo img { height: 54px; } }
.dv-header.is-condensed .dv-logo img { height: 40px; }

.dv-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* ---- Buscador ---- */

.dv-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dv-search {
    position: relative;
    order: 3;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
@media (min-width: 900px) {
    .dv-search {
        order: 0;
        flex: 1 1 auto;
        max-width: 560px;
        margin: 0 8px;
    }
}

.dv-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 14px 0 18px;
    background: var(--surface-sunken);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color .18s ease-in-out, background .18s ease-in-out, box-shadow .18s ease-in-out;
}
.dv-search-field:hover { border-color: var(--border-strong); }
.dv-search-field:focus-within {
    background: #fff;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(225, 29, 46, .12);
}
.dv-search-ico {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--ink-soft);
    transition: color .18s ease-in-out;
}
.dv-search-field:focus-within .dv-search-ico { color: var(--brand-red); }

.dv-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.15;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
}
.dv-search-input::placeholder { color: var(--ink-soft); }
.dv-search-input::-webkit-search-cancel-button { display: none; }

.dv-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--border);
    color: var(--ink-muted);
    font-size: 11px;
    transition: background .18s ease-in-out, color .18s ease-in-out;
}
.dv-search-clear:hover { background: var(--brand-red); color: #fff; }
.dv-search-clear[hidden] { display: none; }

.dv-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand-red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 8px 14px -8px rgba(225, 29, 46, .6);
    transition: background .18s ease-in-out, transform .18s ease-in-out;
}
.dv-search-btn:hover { background: var(--brand-red-600); transform: translateY(-1px); }
.dv-search-btn .fa { display: none; }
@media (max-width: 560px) {
    .dv-search-btn { padding: 12px 16px; }
    .dv-search-btn .fa { display: inline-block; font-size: 14px; }
    .dv-search-btn span { display: none; }
}

/* ---- Sugerencias del buscador ---- */

.dv-search-sug {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .3);
    padding: 6px;
}
.dv-search-sug[hidden] { display: none; }

.dv-search-sug-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    transition: background .15s ease-in-out;
}
.dv-search-sug-item:hover,
.dv-search-sug-item.is-focus { background: var(--surface-sunken); }

.dv-search-sug-img {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-search-sug-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 3px;
}

.dv-search-sug-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-search-sug-txt strong {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-search-sug-txt small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Barra de navegación ---- */

.dv-navbar {
    display: none;
    background: var(--brand-navy);
}
@media (min-width: 900px) { .dv-navbar { display: block; } }

.dv-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}
/* Items a altura completa de la franja: el activo se marca con una barra roja
   abajo. Un pill flotando dentro de la franja se ve suelto. */
.dv-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76);
    border-radius: 0;
    transition: color .18s ease-in-out, background .18s ease-in-out;
}
.dv-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: transparent;
    transition: background .18s ease-in-out;
}
.dv-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.dv-nav a:hover::after { background: rgba(255, 255, 255, .28); }
.dv-nav a.is-active { color: #fff; background: rgba(255, 255, 255, .05); }
.dv-nav a.is-active::after { background: var(--brand-red); }

.dv-cta-news {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--brand-navy);
    color: #fff !important;
    border: none;
    padding: 12px 20px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 16px -10px rgba(11, 23, 41, .7);
    transition: transform .18s ease-in-out, background .18s ease-in-out;
}
.dv-cta-news:hover { background: var(--brand-navy-700); transform: translateY(-1px); }
@media (min-width: 1100px) { .dv-cta-news { display: inline-flex; } }

.dv-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-pill);
    background: var(--brand-navy);
    color: #fff;
    border: none;
    transition: background .18s ease-in-out;
}
.dv-menu-toggle:hover { background: var(--brand-navy-700); }
@media (min-width: 900px) { .dv-menu-toggle { display: none; } }

.dv-mobile-nav {
    display: none;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.dv-mobile-nav.is-open { display: block; }
.dv-mobile-nav a {
    display: block;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}
.dv-mobile-nav a:hover, .dv-mobile-nav a.is-active { color: var(--brand-red); background: var(--brand-red-50); }

/* ============================================================
   Sections / Headings
   ============================================================ */

/* Solo padding vertical: en shorthand ("padding: 56px 0") el 0 horizontal pisaba
   el padding de .dv-container, que se combina con estas clases en el mismo nodo,
   y el contenido quedaba pegado al borde. */
.dv-section { padding-top: 56px; padding-bottom: 56px; }
.dv-section--tight { padding-top: 32px; padding-bottom: 32px; }

.dv-section-head { margin-bottom: 32px; }
.dv-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--brand-red-50);
    color: var(--brand-red);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.dv-section-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    color: var(--ink);
}
.dv-section-sub {
    margin: 12px 0 0;
    color: var(--ink-muted);
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================
   Feature strip (beneficios)
   ============================================================ */

.dv-feature-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .dv-feature-strip { grid-template-columns: repeat(4, 1fr); padding: 28px; gap: 28px; }
}
.dv-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.dv-feature-icon {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--brand-red-50);
    color: var(--brand-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.dv-feature-title { font-weight: 700; font-size: 14px; margin: 0 0 4px; letter-spacing: .02em; }
.dv-feature-text { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ============================================================
   Layout productos (sidebar + grid)
   ============================================================ */

.dv-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 1024px) {
    .dv-layout { grid-template-columns: 280px 1fr; gap: 36px; }
}
/* Sin esto los items de grilla no bajan de su min-content y una descripcion
   larga estira la columna, generando scroll horizontal en toda la pagina. */
.dv-layout > * { min-width: 0; }
/* En una columna la grilla va primero: si no, los resultados quedan abajo
   del listado completo de lineas. */
@media (max-width: 1023px) {
    .dv-layout > aside { order: 2; }
    .dv-layout > div { order: 1; }
}

.dv-sidebar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.dv-sidebar-head {
    background: var(--brand-navy);
    color: #fff;
    padding: 18px 22px;
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* 30 lineas en lista plana dominaban la pagina: se acota el alto y se
   deja scroll propio. El tope real lo calcula initAltoLineas() para que
   coincida con dos filas de tarjetas; 420px es el valor hasta que corre. */
.dv-line-list {
    list-style: none;
    padding: 8px;
    margin: 0;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
}
/* La barra del listado se mantiene invisible hasta que el puntero entra:
   dentro de una tarjeta blanca, una barra siempre visible parte el panel. */
.dv-line-list::-webkit-scrollbar { width: 8px; }
.dv-line-list::-webkit-scrollbar-track { background: transparent; }
.dv-line-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background .2s ease;
}
.dv-sidebar:hover .dv-line-list::-webkit-scrollbar-thumb,
.dv-line-list:focus-within::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    background-clip: content-box;
}
.dv-line-list::-webkit-scrollbar-thumb:hover {
    background: var(--ink-soft);
    background-clip: content-box;
}
/* Firefox no tiene el equivalente por pseudoelemento: queda fina y suave. */
.dv-line-list { scrollbar-color: var(--border-strong) transparent; }

/* El scroll del listado corta en seco arriba y abajo. Este degradado avisa
   que hay mas lineas fuera de la vista. */
.dv-sidebar { position: relative; }
.dv-sidebar::after {
    content: "";
    position: absolute;
    left: 1px; right: 1px; bottom: 1px;
    height: 34px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: linear-gradient(to top, #fff 25%, rgba(255, 255, 255, 0));
    pointer-events: none;
}
.dv-line-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    transition: background .15s ease-in-out, color .15s ease-in-out;
}
.dv-line-list a:hover .dv-line-count,
.dv-line-list a.is-active .dv-line-count {
    background: var(--brand-red);
    color: #fff;
}
.dv-line-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-muted);
    transition: background .15s ease, color .15s ease;
}
.dv-line-list a:hover, .dv-line-list a.is-active {
    background: var(--brand-red-50);
    color: var(--brand-red);
}
.dv-line-list a .fa { font-size: 12px; opacity: .7; }

/* ============================================================
   Banner del inicio
   Fijo: va siempre, haya ofertas cargadas o no. El carrusel de
   Pago x Día queda debajo y solo aparece si hay.
   ============================================================ */

.dv-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #D31427 0%, #A50F1F 55%, #7A0B17 100%);
    color: #fff;
    isolation: isolate;
}

/* Trama de % en SVG embebido: es una textura, no una imagen que cargar. */
.dv-hero-bg {
    position: absolute;
    inset: -10% -10% -10% -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ctext x='10' y='45' font-family='Arial,sans-serif' font-size='42' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%25%3C/text%3E%3Ctext x='68' y='102' font-family='Arial,sans-serif' font-size='42' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%25%3C/text%3E%3C/svg%3E");
    background-size: 120px 120px;
    /* Deriva lentísima: da sensación de vida sin distraer de la lectura. */
    animation: dv-hero-trama 90s linear infinite;
    z-index: -2;
}

@keyframes dv-hero-trama {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-120px, -120px, 0); }
}

/* Halo cálido: le saca al rojo plano el aire de volante impreso. */
.dv-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 78% 30%, rgba(245, 158, 11, .28) 0%, transparent 60%),
        radial-gradient(50% 60% at 12% 90%, rgba(0, 0, 0, .35) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}

/* ---- Portadas apiladas ----
   Las tres caen en la misma celda: el banner mide lo que la más alta y no
   pega un salto de alto cuando rota a una portada con menos texto. La que
   no está en pantalla va con visibility:hidden y no sólo con opacity, así
   sus botones quedan fuera del tabulador. */
.dv-hero-slides { display: grid; }

.dv-hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility 0s linear .55s;
}
.dv-hero-slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility 0s;
}

.dv-hero-inner {
    position: relative;
    display: grid;
    /* minmax(0, …) y no 1fr: si no, el ancho natural de las fotos estira la
       columna, el banner se va de la pantalla y el texto queda cortado. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    /* El alto lo fija la portada más larga. Sin esto, en una portada corta
       las filas se estiran para llenarlo y el texto queda colgado arriba
       con un pozo hasta la imagen: agrupadas al medio se lee como un bloque. */
    align-content: center;
    padding-top: 44px;
    padding-bottom: 44px;
}
@media (min-width: 900px) {
    .dv-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 40px;
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* ---- Texto ---- */

.dv-hero-txt { position: relative; z-index: 2; min-width: 0; }

/* Envío sin cargo: es el gancho del banner, así que va en amarillo pleno y no
   en la píldora traslúcida del resto. Tiene que ganar el primer vistazo. */
.dv-hero-envio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    margin-bottom: 18px;
    border-radius: var(--radius-pill);
    background: var(--brand-amber);
    color: #3D2200;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
}
.dv-hero-envio .fa { font-size: 16px; }

.dv-hero-tit {
    font-family: 'Anton', sans-serif;
    font-size: clamp(34px, 6.2vw, 64px);
    line-height: .94;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 20px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}
.dv-hero-tit em { font-style: normal; color: var(--brand-amber); }

.dv-hero-sub {
    max-width: 46ch;
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}
.dv-hero-sub strong { color: #fff; }

/* "Rosario y alrededores" no es una aclaración al pie: es el alcance del
   envío, o sea la mitad de esa portada. Va del tamaño de una bajada de
   revista, no del de una nota. */
.dv-hero-sub--grande {
    max-width: 22ch;
    font-size: clamp(19px, 2.6vw, 30px);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

/* Claims uno debajo del otro, como en el volante: cada línea es un
   argumento y se lee sola, sin bajada que la explique. */
.dv-hero-claims {
    display: grid;
    gap: 13px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}
.dv-hero-claims li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Anton', sans-serif;
    font-size: clamp(20px, 3.1vw, 36px);
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}
/* La parte que define cada beneficio, en ámbar: es el mismo recurso que el
   <em> del título de la primera portada, para que las tres se lean igual. */
.dv-hero-claims em { font-style: normal; color: var(--brand-amber); }

/* Tilde en ámbar adelante: marca que es una lista de lo que se da, no un
   título partido en tres renglones. */
.dv-hero-claims .fa {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    font-size: .42em;
    border-radius: 50%;
    background: var(--brand-amber);
    color: #3D2200;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6);
}

/* Cada renglón entra atrás del anterior, como la cascada del texto. */
.dv-hero-slide.is-on .dv-hero-claims li {
    animation: dv-hero-sube .55s cubic-bezier(.16, .84, .44, 1) both;
}
.dv-hero-slide.is-on .dv-hero-claims li:nth-child(1) { animation-delay: .26s; }
.dv-hero-slide.is-on .dv-hero-claims li:nth-child(2) { animation-delay: .36s; }
.dv-hero-slide.is-on .dv-hero-claims li:nth-child(3) { animation-delay: .46s; }

/* El número es el llamado a la acción de esa portada. Subrayado parecía
   texto; como botón verde de WhatsApp se entiende sin leer que se toca. */
.dv-hero-tel {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 30px;
    border-radius: var(--radius-pill);
    background: #25D366;
    color: #06331A;
    font-family: 'Anton', sans-serif;
    font-size: clamp(23px, 3.4vw, 36px);
    line-height: 1.05;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .65);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dv-hero-tel:hover,
.dv-hero-tel:focus {
    background: #1EBE5A;
    color: #06331A;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(0, 0, 0, .7);
}
.dv-hero-tel .fa { font-size: 1.05em; }
.dv-hero-tel:hover .fa { transform: scale(1.1); }

/* Mismo destello que la píldora de "envío sin cargo": el ojo vuelve solo. */
.dv-hero-tel::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -45%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    animation: dv-hero-brillo 5.4s ease-in-out 2s infinite;
    pointer-events: none;
}

.dv-hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.dv-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.dv-hero-btn--claro {
    background: #fff;
    color: var(--brand-red);
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
}
.dv-hero-btn--claro:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .6); }
.dv-hero-btn--wa {
    background: #25D366;
    color: #06331A;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
}
.dv-hero-btn--wa:hover { background: #1EBE5A; transform: translateY(-2px); }
.dv-hero-btn .fa { font-size: 15px; }

.dv-hero-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}
.dv-hero-tips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}
.dv-hero-tips .fa {
    font-size: 9px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

/* ---- Vida del banner ----
   La entrada es en cascada: primero el gancho, después el título, el precio
   y recién al final los botones. Es la lectura que queremos, hecha tiempo.
   Después de eso queda casi todo quieto: sólo respiran el halo y el brillo
   de la píldora, que son los dos puntos que tienen que llamar. Más
   movimiento que eso cansa y le saca seriedad. */

@keyframes dv-hero-sube {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Va atada a .is-on y no al texto suelto: así la cascada se rearma en cada
   portada que entra, en vez de correr una sola vez al cargar la página. */
.dv-hero-slide.is-on .dv-hero-txt > * {
    animation: dv-hero-sube .62s cubic-bezier(.16, .84, .44, 1) both;
}
.dv-hero-envio    { animation-delay: .05s; }
.dv-hero-tit      { animation-delay: .14s; }
.dv-hero-sub      { animation-delay: .23s; }
.dv-hero-claims   { animation-delay: .23s; }
.dv-hero-tel      { animation-delay: .32s; }
.dv-hero-acciones { animation-delay: .32s; }
.dv-hero-tips     { animation-delay: .40s; }

/* El halo se agranda y se achica muy de a poco: el fondo nunca queda
   del todo muerto, pero tampoco se nota que se mueve. */
.dv-hero-glow { animation: dv-hero-halo 16s ease-in-out infinite alternate; }
@keyframes dv-hero-halo {
    from { opacity: .82; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.06); }
}

/* Un destello cada tantos segundos sobre "Envío sin cargo", como el reflejo
   sobre un cartel. Va tapado por el propio borde de la píldora. */
.dv-hero-envio { position: relative; overflow: hidden; }
.dv-hero-envio::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -45%;
    width: 32%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: skewX(-18deg);
    animation: dv-hero-brillo 5.4s ease-in-out 1.4s infinite;
    pointer-events: none;
}
@keyframes dv-hero-brillo {
    0%, 62% { transform: translateX(0) skewX(-18deg); }
    100%    { transform: translateX(500%) skewX(-18deg); }
}

/* El camioncito arranca junto con el destello: un empujoncito y vuelve. */
.dv-hero-envio .fa { animation: dv-hero-camion 5.4s ease-in-out 1.4s infinite; }
@keyframes dv-hero-camion {
    0%, 58%, 100% { transform: translateX(0); }
    68%           { transform: translateX(3px); }
    82%           { transform: translateX(-1px); }
}

/* Los botones responden a la mano: la flecha se adelanta y por el claro
   pasa un reflejo. Es feedback, no adorno. */
.dv-hero-btn { position: relative; overflow: hidden; }
.dv-hero-btn .fa { transition: transform .2s ease; }
.dv-hero-btn--claro:hover .fa { transform: translateX(3px); }
.dv-hero-btn--wa:hover .fa    { transform: scale(1.12); }
.dv-hero-btn--claro::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -50%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(225, 29, 46, .16), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.dv-hero-btn--claro:hover::after {
    opacity: 1;
    animation: dv-hero-brillo-btn .7s ease-out;
}
@keyframes dv-hero-brillo-btn {
    from { transform: translateX(0) skewX(-18deg); }
    to   { transform: translateX(400%) skewX(-18deg); }
}

/* ---- Foto de productos ---- */

/* Cada portada trae una sola foto: el cruce lo hace el slide completo, no
   la imagen por su cuenta. El ancho máximo lo pone la vista con el ancho
   real del PNG, para que ninguna se estire más de lo que da. */
.dv-hero-fotos {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

.dv-hero-grupo {
    position: relative;
    width: 100%;
    /* No pasa del tamaño real del PNG (668px): estirada se ve blanda. */
    max-width: 660px;
    /* Entra una vez al cargar y después flota apenas, para que no quede
       pegada como una calcomanía sobre el rojo. */
}

/* Entra y flota sólo la portada que se está viendo. */
.dv-hero-slide.is-on .dv-hero-grupo {
    animation:
        dv-hero-entrar .7s cubic-bezier(.16, .84, .44, 1) both,
        dv-hero-flotar 7s ease-in-out .8s infinite;
}

@keyframes dv-hero-entrar {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dv-hero-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* La sombra de piso: una elipse difusa abajo de todo. Es lo que hace que
   el grupo se apoye en algo en vez de flotar sobre el rojo. */
.dv-hero-grupo::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: -3%;
    height: 14%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .28) 45%, transparent 72%);
    filter: blur(7px);
    z-index: 0;
    pointer-events: none;
}

/* El logo no se apoya en ningún piso: sin elipse y centrado, con una sombra
   corta que alcanza para despegarlo del rojo. */
.dv-hero-grupo--liso { align-self: center; }
.dv-hero-grupo--liso::after { display: none; }
.dv-hero-grupo--liso .dv-hero-img {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .34));
}

.dv-hero-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    /* Tres sombras encima: el apoyo cortito, la media y la ambiental. Van
       sobre la silueta y no sobre una caja blanca: los productos se apoyan
       sobre el rojo, sin tarjeta de por medio. */
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, .38))
        drop-shadow(0 8px 10px rgba(0, 0, 0, .42))
        drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
}

/* ---- Puntos del slide ----
   Antes eran adorno dentro de un bloque oculto al lector. Ahora mueven la
   portada entera, así que son botones: se clickean, se tabulan y avisan en
   cuál se está parado. Van debajo de las portadas, metidos en el aire que
   ya deja el padding del banner. */

.dv-hero-puntos {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: -20px;
    padding-bottom: 24px;
}
.dv-hero-punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}
.dv-hero-punto:hover { background: rgba(255, 255, 255, .7); }
.dv-hero-punto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* El punto de la portada que se está viendo: ámbar, como el resto de lo que
   marca posición en el banner. */
.dv-hero-punto.is-on {
    background: var(--brand-amber);
    transform: scale(1.35);
}

/* En el celular la foto va debajo del texto y a todo el ancho: la sombra
   grande a ese tamaño ensucia, así que se achica. */
@media (max-width: 899px) {
    .dv-hero-grupo { max-width: 520px; }
    .dv-hero-img {
        filter:
            drop-shadow(0 2px 3px rgba(0, 0, 0, .35))
            drop-shadow(0 12px 16px rgba(0, 0, 0, .42));
    }
}

/* Con el sistema en "menos movimiento" se apaga todo: queda el mismo
   banner, quieto. Nada depende de una animación para poder leerse. */
@media (prefers-reduced-motion: reduce) {
    .dv-hero-bg,
    .dv-hero-glow,
    .dv-hero-grupo,
    .dv-hero-slide.is-on .dv-hero-grupo,
    .dv-hero-slide.is-on .dv-hero-txt > *,
    .dv-hero-txt > *,
    .dv-hero-envio::after,
    .dv-hero-envio .fa,
    .dv-hero-slide.is-on .dv-hero-claims li,
    .dv-hero-tel::after,
    .dv-hero-btn--claro:hover::after {
        animation: none !important;
    }
    .dv-hero-slide.is-on .dv-hero-claims li { opacity: 1; transform: none; }
    .dv-hero-tel::after { display: none; }
    .dv-hero-slide.is-on .dv-hero-txt > *,
    .dv-hero-txt > * { opacity: 1; transform: none; }
    .dv-hero-envio::after { display: none; }
    /* El JS tampoco rota, pero por si acaso: la portada encendida se ve
       entera y sin cruce. */
    .dv-hero-slide { transition: none; }
}

/* ============================================================
   Ofertas del inicio (tarjetas grandes, hasta 3 por fila)
   ============================================================ */

/* Antes era un carrusel de un slide a la vez con el valor por día como
   protagonista. Ahora es un panel rojo con tarjetas blancas grandes: una
   oferta tiene que verse de lejos, no en miniatura. */
.dv-ofe {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    margin: 24px 0 40px;
    padding: 30px 18px 34px;
    background: linear-gradient(135deg, var(--brand-red) 0%, #C2101F 55%, #9F0009 100%);
    box-shadow: 0 18px 40px -18px rgba(225, 29, 46, .55);
}
@media (min-width: 900px) { .dv-ofe { padding: 44px 40px 48px; } }

/* Trama de % al fondo, como en un flyer de ofertas. */
.dv-ofe::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Ctext x='6' y='46' font-family='Arial,sans-serif' font-size='40' font-weight='bold' fill='rgba(255,255,255,0.075)'%3E%25%3C/text%3E%3Ctext x='74' y='112' font-family='Arial,sans-serif' font-size='40' font-weight='bold' fill='rgba(255,255,255,0.075)'%3E%25%3C/text%3E%3C/svg%3E");
    pointer-events: none;
}

.dv-ofe-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 26px;
}
.dv-ofe-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 12px;
}
.dv-ofe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-pill);
    background: var(--brand-amber);
    color: #1A1300;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}
.dv-ofe-tit {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: .01em;
}
.dv-ofe-sub {
    margin: 12px auto 0;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}
.dv-ofe-sub strong { color: #fff; }

/* 3 por fila es el tope: de ahí para arriba la tarjeta no crece más, se
   agregan filas. Con una o dos ofertas cargadas la fila se cierra pareja en
   vez de dejar el hueco del tercio vacío al costado. */
/* Flex y no grid: con 5 ofertas la segunda fila queda con 2 tarjetas y en
   flex quedan centradas, del mismo ancho que las de arriba. En grid se pegaban
   al borde izquierdo y dejaban un tercio de aire a la derecha. */
.dv-ofe-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
.dv-ofe-card { flex: 0 1 100%; min-width: 0; }
@media (min-width: 700px) {
    .dv-ofe-grid { gap: 20px; }
    .dv-ofe-card { flex-basis: calc(50% - 10px); }
}
@media (min-width: 1024px) {
    .dv-ofe-grid { gap: 24px; }
    /* Tres por fila es el tope: de acá para arriba no entra una cuarta, la
       tarjeta se ensancha con la pantalla. */
    .dv-ofe-card { flex-basis: calc(33.333% - 16px); }
    /* Con una o dos cargadas la tarjeta no se queda flaca en el medio del
       panel, pero tampoco se estira sin límite. */
    .dv-ofe-grid[data-cant="1"] > .dv-ofe-card { flex-basis: min(560px, 100%); }
    .dv-ofe-grid[data-cant="2"] > .dv-ofe-card { flex-basis: min(440px, calc(50% - 12px)); }
}

.dv-ofe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .45);
    transition: transform .22s ease-in-out, box-shadow .22s ease-in-out;
}
.dv-ofe-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .55);
}

/* Cinta en el vértice, igual que la de "nuevo ingreso" del catálogo pero en
   rojo: se lee de lejos y no tapa el producto. */
.dv-ofe-cinta {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    width: 116px; height: 116px;
    overflow: hidden;
    pointer-events: none;
}
.dv-ofe-cinta b {
    position: absolute;
    top: 22px; left: -34px;
    width: 150px;
    padding: 7px 0;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-700) 100%);
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 6px 14px -4px rgba(105, 6, 16, .55);
}

/* Las fotos son JPG con fondo blanco: la tarjeta también es blanca, así el
   fondo de la foto se lee intencional y no como un recorte roto. */
.dv-ofe-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 22px 22px 14px;
    background: #fff;
}
.dv-ofe-media img {
    max-height: 210px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease-in-out;
}
.dv-ofe-card:hover .dv-ofe-media img { transform: scale(1.04); }
@media (min-width: 1024px) {
    .dv-ofe-media { min-height: 260px; }
    .dv-ofe-media img { max-height: 240px; }
}

.dv-ofe-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--border);
}
.dv-ofe-brand {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-red);
    margin-bottom: 6px;
}
.dv-ofe-nom {
    font-family: 'Anton', sans-serif;
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.06;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 14px;
}
.dv-ofe-nom a { color: inherit; }
.dv-ofe-nom a:hover { color: var(--brand-red); }

.dv-ofe-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 7px;
}
.dv-ofe-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-muted);
}
.dv-ofe-list li .fa { color: var(--brand-red); margin-top: 3px; flex: 0 0 auto; }

/* Los botones quedan pegados al piso de la tarjeta: con descripciones de
   distinto largo, si no, cada tarjeta los mostraba a otra altura. */
.dv-ofe-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dv-ofe-wa,
.dv-ofe-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1 1 140px;
    padding: 13px 18px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .18s ease-in-out, background .18s ease-in-out;
}
.dv-ofe-wa {
    background: #25D366;
    color: #06331A !important;
    box-shadow: 0 12px 22px -12px rgba(6, 51, 26, .6);
}
.dv-ofe-wa:hover { transform: translateY(-2px); background: #1EBE5A; }
.dv-ofe-wa .fa { font-size: 17px; }
.dv-ofe-cta {
    background: var(--brand-red);
    color: #fff !important;
    box-shadow: 0 12px 22px -12px rgba(165, 15, 31, .7);
}
.dv-ofe-cta:hover { transform: translateY(-2px); background: var(--brand-red-700); }

@media (prefers-reduced-motion: reduce) {
    .dv-ofe-card,
    .dv-ofe-card:hover,
    .dv-ofe-media img,
    .dv-ofe-card:hover .dv-ofe-media img,
    .dv-ofe-wa:hover,
    .dv-ofe-cta:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Product grid + cards
   ============================================================ */

.dv-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.dv-grid-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(22px, 3.5vw, 32px);
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}
.dv-grid-meta { font-size: 13px; color: var(--ink-soft); }

.dv-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .dv-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
}
/* Home: los destacados son pocos (Va1_Pro = 1), asi que se fija la cantidad de
   columnas para que la fila cierre pareja en vez de dejar huerfanos. */
/* Los cortes salen de la medida real: en el home la grilla vale
   viewport - 380px (padding + sidebar + gap), y la tarjeta no baja de ~205px. */
/* Mobile: los destacados pasan a una fila que se arrastra al costado. El scroll
   queda dentro del carrusel, no en la pagina. */
@media (max-width: 767px) {
    .dv-product-grid--home {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }
    .dv-product-grid--home > .dv-card {
        flex: 0 0 66%;
        min-width: 0;
        scroll-snap-align: start;
    }
    .dv-product-grid--home::-webkit-scrollbar { height: 5px; }
    .dv-product-grid--home::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: var(--radius-pill);
    }
}
@media (min-width: 1024px) { .dv-product-grid--home { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .dv-product-grid--home { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .dv-product-grid--home { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1740px) { .dv-product-grid--home { grid-template-columns: repeat(6, 1fr); } }

.dv-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(128, 128, 128, .16);
    border-radius: 22px;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    transition: transform .22s ease-in-out, box-shadow .22s ease-in-out, border-color .22s ease-in-out;
    min-height: 100%;
    cursor: pointer;
}
.dv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 42, .22), 0 4px 8px -4px rgba(15, 23, 42, .08);
    border-color: rgba(225, 29, 46, .28);
}
/* La tarjeta ya no es un <article> con handler de ajax sino un <a>. */
a.dv-card { color: inherit; text-decoration: none; }
/* Recorta las puntas de la cinta que salen por el vértice. */
.dv-card { overflow: hidden; }

/* ---- Nuevo ingreso ----------------------------------------------
   Cinta en la esquina superior izquierda, no una pastilla apoyada
   sobre la foto: se apodera del vértice, se lee a distancia y no tapa
   el producto. Va en verde para no confundirse con una oferta. */

.dv-cinta {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    width: 116px; height: 116px;
    overflow: hidden;
    pointer-events: none;
}
.dv-cinta b {
    position: absolute;
    top: 22px; left: -34px;
    width: 150px;
    padding: 7px 0;
    /* Negativo: en la esquina izquierda la cinta baja hacia la derecha. */
    transform: rotate(-45deg);
    color: #04310F;
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 6px 14px -4px rgba(4, 49, 15, .55);
    /* Destello que la cruza cada tanto, sobre el degradado verde. */
    background-image:
        linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%),
        linear-gradient(135deg, var(--nuevo) 0%, var(--nuevo-700) 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 180% 0, 0 0;
    animation: dv-cinta-brillo 4.5s ease-in-out infinite;
}
/* Muescas en las puntas: sin esto la cinta parece pegada encima y no
   doblada sobre el borde de la tarjeta. */
.dv-cinta b::before,
.dv-cinta b::after {
    content: "";
    position: absolute;
    bottom: -5px;
    border: 3px solid var(--nuevo-900);
    border-bottom-color: transparent;
}
.dv-cinta b::before { left: 22px;  border-left-color: transparent; }
.dv-cinta b::after  { right: 22px; border-right-color: transparent; }

@keyframes dv-cinta-brillo {
    0%, 62%   { background-position: 180% 0, 0 0; }
    88%, 100% { background-position: -80% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dv-cinta b { animation: none; }
}

/* En la ficha hay lugar de sobra, así que el rótulo va entero. */
.dv-prd-image { position: relative; overflow: hidden; }
.dv-nuevo {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 10px 16px;
    /* Esquina inferior derecha redondeada: la etiqueta se apoya en el
       vértice del marco en vez de flotar suelta. */
    border-radius: 0 0 var(--radius-md) 0;
    background: linear-gradient(135deg, var(--nuevo) 0%, var(--nuevo-700) 100%);
    color: #04310F;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -8px rgba(4, 49, 15, .55);
}
.dv-nuevo .fa { font-size: 13px; }

/* ============================================================
   Miga de pan (ficha de producto)
   ============================================================ */

.dv-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--ink-soft);
}
.dv-breadcrumb a {
    color: var(--ink-soft);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    transition: background .15s ease, color .15s ease;
}
.dv-breadcrumb a:hover { background: var(--brand-red-50); color: var(--brand-red); }
.dv-breadcrumb > .fa { font-size: 10px; color: var(--border-strong); }
.dv-breadcrumb [aria-current] {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink);
    font-weight: 600;
    /* El nombre del producto puede ser largo: se recorta en vez de
       empujar la miga a una segunda linea. */
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Ficha: galeria y acciones
   ============================================================ */

.dv-prd-gallery { display: flex; flex-direction: column; gap: 12px; }

.dv-prd-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.dv-prd-thumb {
    aspect-ratio: 1 / 1;
    padding: 6px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.dv-prd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dv-prd-thumb:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.dv-prd-thumb.is-active { border-color: var(--brand-red); }

.dv-prd-nombre {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    line-height: 1.2;
    color: var(--ink);
}

/* Sello de oferta de la ficha. Antes era el valor por día en grande; sin ese
   dato lo que comunica es la marca de oferta y que el precio se consulta. */
.dv-prd-oferta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 4px;
    background: var(--brand-red-50);
    border-radius: var(--radius-md);
}
.dv-prd-oferta-sello {
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-red);
}
.dv-prd-oferta-txt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-red-700);
}

.dv-prd-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Link "ver todo el catalogo" del encabezado de grilla. */
.dv-grid-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: .02em;
}
.dv-grid-link .fa { font-size: 11px; transition: transform .15s ease; }
.dv-grid-link:hover .fa { transform: translateX(3px); }

/* ============================================================
   Carrusel de lineas (arriba del footer)
   ============================================================ */

.dv-lineas {
    background: #fff;
    border-top: 1px solid var(--border);
    /* El aire de arriba tiene que ir afuera de la franja: como el fondo de la
       franja es blanco, el padding solo estiraba blanco y la fila seguia
       leyendose pegada a la seccion anterior. Con margin se ve el gris de la
       pagina en el medio y la franja queda separada de verdad. */
    margin-top: 44px;
    padding: 24px 0 34px;
}
@media (max-width: 639px) {
    .dv-lineas { margin-top: 28px; padding: 18px 0 26px; }
}
.dv-lineas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dv-lineas-tit {
    font-family: 'Anton', sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0;
    line-height: 1;
}
.dv-lineas-todo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-red);
}
.dv-lineas-todo .fa { font-size: 11px; transition: transform .15s ease; }
.dv-lineas-todo:hover .fa { transform: translateX(3px); }

.dv-lineas-carrusel { position: relative; }

.dv-lineas-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Aire arriba y abajo para que el hover levante la tarjeta sin que la
       sombra quede cortada por el overflow. */
    padding: 6px 2px 10px;
    scrollbar-width: none;
    /* Se puede empujar con el mouse, y el cursor tiene que decirlo. */
    cursor: grab;
    /* Sin esto el scroll-snap pelea contra el avance continuo y la fila
       queda tironeando hacia la tarjeta mas cercana. */
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.dv-lineas-track::-webkit-scrollbar { display: none; }
/* Una sola linea con portada: la tarjeta va al centro, si no queda pegada al
   borde izquierdo de un riel vacio y parece un error de carga. */
.dv-lineas-track--uno { justify-content: center; cursor: default; }
.dv-lineas-track.is-arrastrando { cursor: grabbing; }
/* Mientras se arrastra no hay que seleccionar los nombres ni levantar las
   tarjetas con el hover. */
.dv-lineas-track.is-arrastrando { user-select: none; }
.dv-lineas-track.is-arrastrando .dv-linea-item { pointer-events: none; }
.dv-lineas-track img { -webkit-user-drag: none; user-select: none; }

.dv-linea-item {
    flex: 0 0 auto;
    width: 124px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 16px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dv-linea-item:hover {
    transform: translateY(-4px);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
.dv-linea-foto {
    width: 84px; height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-linea-foto img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.dv-linea-nom {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-muted);
    /* Dos lineas como maximo: "Colchones y Sommiers" no puede estirar la
       tarjeta y desalinear toda la fila. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.dv-linea-item:hover .dv-linea-nom { color: var(--brand-red); }

.dv-lineas-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-md);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dv-lineas-arrow:hover {
    background: var(--brand-red);
    color: #fff;
    border-color: transparent;
}
.dv-lineas-arrow[hidden] { display: none; }
.dv-lineas-arrow--prev { left: -8px; }
.dv-lineas-arrow--next { right: -8px; }

@media (min-width: 640px) {
    .dv-linea-item { width: 140px; }
    .dv-linea-foto { width: 100px; height: 100px; }
    .dv-lineas-track { gap: 14px; }
}
@media (max-width: 639px) {
    /* En el celular se arrastra con el dedo: las flechas solo tapan. */
    .dv-lineas-arrow { display: none; }
}
.dv-card-image {
    background: #fff;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dv-card-image img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 4%;
    transition: transform .25s ease-in-out;
}
.dv-card:hover .dv-card-image img { transform: scale(1.04); }

.dv-card-body {
    padding: 14px 4px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    text-align: left;
}
.dv-card-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
}
.dv-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Pie de la tarjeta: divisor + accion, como en la referencia. */
.dv-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
}
.dv-card-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* nowrap + padding holgado: a 6 columnas el texto quedaba a 1px de no entrar
       y se partia en dos lineas. */
    white-space: nowrap;
    gap: 7px;
    padding: 10px 14px;
    background: var(--brand-red);
    color: #fff !important;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 8px 14px -8px rgba(225, 29, 46, .55);
    transition: background .18s ease-in-out, transform .18s ease-in-out;
    border: none;
}
.dv-card-cta:hover { background: var(--brand-red-600); transform: translateY(-1px); }

/* ---- Resumen de búsqueda + estado vacío ---- */

.dv-search-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    padding: 8px 16px;
    background: var(--brand-red-50);
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 1.15;
    color: var(--brand-red-700);
}
.dv-search-summary strong { font-weight: 800; }

.dv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1.11px solid rgba(128, 128, 128, .16);
    border-radius: 25px;
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.dv-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-pill);
    background: var(--brand-red-50);
    color: var(--brand-red);
    font-size: 22px;
}
.dv-empty p {
    margin: 0;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.43;
    color: var(--ink-muted);
}

/* Placeholder cuando el thumbnail del producto no existe todavia. */
.dv-card-image.is-empty,
.dv-prd-image.is-empty { background: var(--surface-sunken); }
.dv-card-image.is-empty::after,
.dv-prd-image.is-empty::after {
    content: "\f03e";
    font-family: FontAwesome;
    font-size: 30px;
    color: var(--border-strong);
}

/* Backwards compat for AJAX-injected markup that still uses Bootstrap helpers */
.product-image-wrapper, .single-products { display: contents; }
.productinfo, .product-overlay { display: contents; }
.overlay-content { display: contents; }

/* ============================================================
   Pagination
   ============================================================ */

.dv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 32px 0 0;
    list-style: none;
    padding: 0;
}
.dv-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 14px;
    transition: all .15s ease;
}
.dv-pagination a:hover { border-color: var(--brand-red); color: var(--brand-red); }
.dv-pagination li.active a {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.dv-pagination { flex-wrap: wrap; }
.dv-pagination li.dv-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; height: 38px;
    color: var(--ink-soft);
    font-size: 14px;
}
.dv-pagination li.dv-page-nav a { padding: 0 10px; font-size: 16px; }
.dv-page-info {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.15;
    color: var(--ink-soft);
}

/* Compat shim — old .pagination used by AJAX views */
.pagination {
    display: flex; justify-content: center; gap: 6px; margin: 32px 0 0;
    list-style: none; padding: 0;
}
.pagination li a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: 10px; background: #fff; border: 1px solid var(--border);
    color: var(--ink-muted); font-weight: 600; font-size: 14px;
    transition: all .15s ease;
}
.pagination li a:hover { border-color: var(--brand-red); color: var(--brand-red); }
.pagination li.active a {
    background: var(--brand-red); border-color: var(--brand-red); color: #fff;
}

/* ============================================================
   Marcas
   ============================================================ */

.dv-brands {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
}
/* Las marcas usan el mismo riel arrastrable que las lineas (.dv-lineas-*):
   antes era una grilla escondida en mobile y en el celular no se veia ninguna
   marca. Aca solo va lo propio de la tarjeta, que es el logo suelto. */
.dv-marcas-carrusel .dv-lineas-track { padding: 4px 2px 8px; }

.dv-marca-item {
    flex: 0 0 auto;
    width: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
}
.dv-marca-item img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
    -webkit-user-drag: none;
    user-select: none;
}
.dv-marca-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}
/* Marca sin logo cargado: se muestra el nombre con el mismo peso visual
   que los logos (gris apagado, se enciende al pasar por encima). */
.dv-marca-texto {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-muted);
    opacity: .55;
    white-space: nowrap;
    transition: opacity .25s ease, color .25s ease, transform .25s ease;
    user-select: none;
}
.dv-marca-item:hover .dv-marca-texto {
    opacity: 1;
    color: var(--ink);
    transform: scale(1.05);
}

/* Arrastrando no hay hover que valga: los logos no tienen que iluminarse
   mientras se empuja la fila. */
.dv-lineas-track.is-arrastrando .dv-marca-item:hover img {
    filter: grayscale(100%);
    opacity: .55;
    transform: none;
}
.dv-lineas-track.is-arrastrando .dv-marca-item:hover .dv-marca-texto {
    opacity: .55;
    color: var(--ink-muted);
    transform: none;
}

@media (min-width: 640px) {
    .dv-marca-item { width: 168px; }
    .dv-marca-item img { max-height: 64px; }
    .dv-marca-texto { font-size: 20px; }
}
@media (max-width: 639px) {
    /* La tarjeta de marcas ocupa menos aire en el celular. */
    .dv-brands { padding: 18px 12px; }
}

/* ============================================================
   About / FAQ / Generic content
   ============================================================ */

.dv-prose {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    line-height: 1.7;
    color: var(--ink-muted);
    font-size: 16px;
}
.dv-prose img { border-radius: var(--radius-md); margin-top: 24px; }
.dv-prose strong { color: var(--ink); }
.dv-prose p { margin: 0 0 16px; }

.dv-faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
}
.dv-faq-q {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.dv-faq-q:hover { background: var(--surface-muted); }
.dv-faq-icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-red-50);
    color: var(--brand-red);
    font-weight: 800;
    transition: transform .2s ease, background .2s ease;
}
.dv-faq-q-text { flex: 1; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.dv-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 22px;
}
.dv-faq-a-inner {
    padding-bottom: 22px;
    color: var(--ink-muted);
    line-height: 1.65;
    font-size: 15px;
}
.dv-faq-item.is-open .dv-faq-a { max-height: 600px; }
.dv-faq-item.is-open .dv-faq-icon { background: var(--brand-red); color: #fff; transform: rotate(45deg); }

/* ============================================================
   Contacto
   ============================================================ */

.dv-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 900px) {
    .dv-contact-grid { grid-template-columns: 1.4fr .8fr; gap: 36px; }
}

.dv-card-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}
.dv-card-panel h3 {
    font-family: 'Anton', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    margin: 0 0 6px;
    letter-spacing: .03em;
}
.dv-card-panel .dv-card-panel-sub {
    color: var(--ink-soft); font-size: 14px; margin: 0 0 22px;
}

.dv-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dv-info-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: flex-start;
    color: var(--ink-muted);
    line-height: 1.4;
}
.dv-info-list li .dv-info-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--brand-red-50);
    color: var(--brand-red);
    display: inline-flex; align-items: center; justify-content: center;
}
.dv-info-list li strong { color: var(--ink); display: block; margin-bottom: 2px; }

/* ============================================================
   Forms
   ============================================================ */

.form-group { margin-bottom: 18px; position: relative; }
.form-group > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: .02em;
}

.form-control {
    width: 100%;
    padding: 13px 16px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    outline: none;
}
.form-control:focus {
    border-color: var(--brand-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(225, 29, 46, .12);
}
.form-control::placeholder { color: var(--ink-soft); }

textarea.form-control { resize: vertical; min-height: 120px; }

.form-group.has-error .form-control {
    border-color: var(--brand-red);
    background: var(--brand-red-50);
}

input[type="file"].form-control {
    padding: 10px 14px;
    background: var(--surface-muted);
    font-size: 13px;
    cursor: pointer;
}
/* El boton nativo de "Choose File" rompia la linea visual del formulario. */
input[type="file"].form-control::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand-navy);
    color: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease-in-out;
}
input[type="file"].form-control::file-selector-button:hover { background: var(--brand-navy-700); }

.dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.dv-btn--primary {
    background: var(--brand-red); color: #fff;
    box-shadow: 0 10px 24px -10px rgba(225, 29, 46, .65);
}
.dv-btn--primary:hover { background: var(--brand-red-600); transform: translateY(-1px); }
.dv-btn--wa {
    background: #25D366;
    color: #06331A;
    box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .65);
}
.dv-btn--wa:hover { background: #1EBE5A; color: #06331A; transform: translateY(-1px); }
.dv-btn--wa .fa { font-size: 17px; }
.dv-btn--ghost { background: transparent; color: var(--ink-muted); border: 1px solid var(--border); }
.dv-btn--ghost:hover { color: var(--brand-red); border-color: var(--brand-red); }
.dv-btn--dark { background: var(--brand-navy); color: #fff; }
.dv-btn--dark:hover { background: var(--brand-navy-700); }
.dv-btn--block { display: flex; width: 100%; }

.dv-alert {
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid;
    font-size: 14px;
}
.dv-alert--success {
    background: #ECFDF5; border-color: #A7F3D0; color: #065F46;
}
.dv-alert--error {
    background: var(--brand-red-50); border-color: #FCA5A5; color: var(--brand-red-700);
}

/* ============================================================
   Product detail (AJAX)
   ============================================================ */

.dv-prd-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
}
@media (min-width: 768px) {
    .dv-prd-detail { grid-template-columns: 1fr 1.2fr; padding: 36px; gap: 44px; }
}
.dv-prd-detail > * { min-width: 0; }
.dv-prd-image {
    background: #fff;
    border: 1px solid rgba(128, 128, 128, .14);
    border-radius: 18px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}
.dv-prd-image img { max-height: 100%; max-width: 100%; object-fit: contain; }
.dv-prd-info h2 {
    /* Inter bold en vez de Anton en versales: es el nombre de un producto, no
       un titulo de seccion. Deja el protagonismo a la foto. */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: none;
    margin: 0 0 8px;
    line-height: 1.2;
    color: var(--ink);
}
.dv-prd-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
/* El margen de la marca desalineaba el SKU: en un flex centrado, el margen
   entra en la caja y le corre el centro. El aire lo pone .dv-prd-meta. */
.dv-prd-meta > .dv-prd-brand { margin-bottom: 0; }
.dv-prd-sku {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-muted);
}
.dv-prd-sku > span {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.dv-prd-brand {
    display: inline-block;
    padding: 4px 12px;
    background: var(--brand-navy);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dv-prd-section-title {
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 24px 0 12px;
    display: flex; align-items: center; gap: 10px;
}
.dv-prd-section-title::before {
    content: "";
    width: 28px; height: 2px; background: var(--brand-red);
}
.dv-prd-features {
    color: var(--ink-muted);
    line-height: 1.7;
    font-size: 15px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ============================================================
   Contacto: WhatsApp destacado
   ============================================================ */

.dv-wa-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 5px solid #25D366;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 28px;
}

.dv-wa-main {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 24px;
}
@media (min-width: 820px) {
    .dv-wa-main { grid-template-columns: auto 1fr auto; padding: 28px 30px; gap: 22px; }
}

.dv-wa-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: var(--radius-pill);
    background: #25D366;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 12px 24px -10px rgba(37, 211, 102, .7);
}

.dv-wa-txt { min-width: 0; }
.dv-wa-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #128C4A;
    margin-bottom: 5px;
}
.dv-wa-txt h2 {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
}
.dv-wa-txt p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.dv-wa-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: var(--radius-pill);
    background: #25D366;
    color: #06331A !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 12px 26px -10px rgba(37, 211, 102, .75);
    transition: background .18s ease-in-out, transform .18s ease-in-out;
}
.dv-wa-cta:hover { background: #1EBE5A; transform: translateY(-2px); }
.dv-wa-cta .fa { font-size: 19px; }
@media (min-width: 820px) { .dv-wa-cta { grid-column: auto; } }

.dv-wa-atajos {
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}
@media (min-width: 820px) { .dv-wa-atajos { padding: 20px 30px 24px; } }

.dv-wa-atajos-tit {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.dv-wa-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) { .dv-wa-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dv-wa-chips { grid-template-columns: repeat(4, 1fr); } }

.dv-wa-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    transition: border-color .18s ease-in-out, transform .18s ease-in-out, box-shadow .18s ease-in-out;
}
.dv-wa-chip:hover {
    border-color: #25D366;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, .3);
}
.dv-wa-chip > .fa:first-child {
    flex: 0 0 auto;
    color: #128C4A;
    font-size: 15px;
}
.dv-wa-chip-fin {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--ink-soft);
    transition: transform .18s ease-in-out, color .18s ease-in-out;
}
.dv-wa-chip:hover .dv-wa-chip-fin { color: #128C4A; transform: translateX(3px); }

/* ============================================================
   Banda de newsletter (arriba del footer)
   ============================================================ */

.dv-news-band {
    background: linear-gradient(135deg, var(--brand-red) 0%, #C2101F 60%, #A50F1F 100%);
    padding: 26px 0;
    margin-top: 72px;
}
/* El footer trae margin-top propio: pegado a la banda dejaba un hueco blanco. */
.dv-news-band + .dv-footer { margin-top: 0; }

.dv-news-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 18px;
}
@media (min-width: 900px) {
    .dv-news-inner { grid-template-columns: auto minmax(0, 520px); justify-content: space-between; gap: 32px; }
}

.dv-news-txt { display: flex; align-items: center; gap: 14px; }
.dv-news-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 20px;
}
.dv-news-txt strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.01em;
}
/* Acotado al subtítulo: ".dv-news-txt span" tambien alcanzaba al span del
   icono y le pisaba el display:inline-flex, descentrandolo. */
.dv-news-txt > div > span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}

/* El aviso vive junto al campo, no del otro lado de la banda. */
.dv-news-lado { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }

.dv-news-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: #fff;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5);
}
.dv-news-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 16px;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
}
.dv-news-input::placeholder { color: var(--ink-soft); }
.dv-news-btn {
    flex: 0 0 auto;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand-navy);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .18s ease-in-out, transform .18s ease-in-out;
}
.dv-news-btn:hover { background: var(--brand-navy-700); transform: translateY(-1px); }

/* has-error de function.js sobre el campo de la banda */
.dv-news-form .form-group.has-error .dv-news-input { color: var(--brand-red-700); }
.dv-news-form .form-group.has-error { box-shadow: inset 0 0 0 2px var(--brand-red); border-radius: var(--radius-pill); }

.dv-news-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 10px 0 0;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.dv-news-ok[hidden] { display: none; }
/* Error dentro de la banda: fondo blanco para que se lea sobre el rojo. */
.dv-news-ok--error {
    background: #fff;
    color: var(--brand-red-700);
}

/* ============================================================
   Botones flotantes
   ============================================================ */

.dv-flotantes {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.dv-flot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 26px -10px rgba(15, 23, 42, .5);
    transition: transform .18s ease-in-out, background .18s ease-in-out, opacity .18s ease-in-out;
}
.dv-flot:hover { transform: translateY(-3px); }

.dv-flot--wa { background: #25D366; color: #fff !important; font-size: 27px; }
.dv-flot--wa:hover { background: #1EBE5A; }

.dv-flot--arriba {
    background: #fff;
    color: var(--ink-muted);
    font-size: 22px;
    border: 1px solid var(--border);
    opacity: 0;
    pointer-events: none;
}
.dv-flot--arriba.is-visible { opacity: 1; pointer-events: auto; }
.dv-flot--arriba:hover { color: var(--brand-red); }

@media (max-width: 480px) {
    .dv-flotantes { right: 14px; bottom: 14px; }
    .dv-flot { width: 48px; height: 48px; }
    .dv-flot--wa { font-size: 25px; }
}

/* ============================================================
   Footer
   ============================================================ */

.dv-footer {
    background: var(--brand-navy);
    color: #CBD5E1;
    padding: 64px 0 24px;
    margin-top: 80px;
    position: relative;
}
.dv-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-amber) 100%);
}
.dv-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .dv-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
}

/* Listas de enlaces del footer */
.dv-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.dv-footer-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    transition: color .15s ease-in-out;
}
.dv-footer-links a span {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.dv-footer-links a:hover span { background: var(--brand-red); color: #fff; }

.dv-social-link--wa:hover { background: #25D366; }
.dv-social-link--ig:hover {
    background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);
    color: #fff;
}
.dv-footer h4 {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: .03em;
}
.dv-footer p, .dv-footer a { font-size: 14px; line-height: 1.65; color: #94A3B8; }
.dv-footer a:hover { color: #fff; }
.dv-footer-brand img {
    height: 56px;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}
.dv-footer-info { display: grid; gap: 10px; }
.dv-footer-info-item { display: flex; align-items: flex-start; gap: 10px; }
.dv-footer-info-item .fa { color: var(--brand-amber); width: 18px; padding-top: 4px; }

/* Los flotantes viven pegados al borde derecho inferior: el pie se corre para
   no quedar debajo. En angosto la barra ya envuelve, asi que ahi va aire abajo. */
/* El margen derecho se mantiene en todo ancho: los dos botones apilados ocupan
   ~88px de ancho y ~132px de alto desde la esquina, y solo con padding-bottom
   no alcanzaba. */
.dv-footer-bottom { padding-right: 88px; padding-bottom: 8px; }
@media (max-width: 1100px) {
    .dv-footer-bottom { padding-bottom: 84px; }
}
.dv-footer-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: #64748B;
    letter-spacing: .02em;
}

/* ============================================================
   Modal (Bootstrap 3 JS compatibility shim)
   ============================================================ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow: auto;
    background: rgba(11, 23, 41, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
}
.modal.in { display: flex; align-items: center; justify-content: center; }
.modal.fade .modal-dialog { transform: translate(0, -16px); transition: transform .25s ease, opacity .25s ease; opacity: 0; }
.modal.fade.in .modal-dialog { transform: translate(0, 0); opacity: 1; }
.modal-dialog {
    width: 100%; max-width: 460px; margin: auto;
}
.modal-content {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, .45);
}
.modal-header {
    padding: 22px 26px;
    background: var(--brand-navy);
    color: #fff;
}
.modal-header strong {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: .03em;
}
.modal-body { padding: 24px 26px; }
.modal-footer {
    padding: 18px 26px 22px;
    background: var(--surface-muted);
    border-top: 1px solid var(--border);
}

/* ============================================================
   Tooltips de validación (showError de function.js)
   ============================================================ */

/* El sitio público carga bootstrap.min.js pero no su CSS, así que los tooltips
   que crea showError() salían como texto negro suelto empujando el layout.
   Son mensajes de error: van en rojo de marca. */
.tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    visibility: visible;
}
.tooltip.in { opacity: 1; }
.tooltip.bottom { padding: 6px 0; margin-top: 3px; }
.tooltip.top { padding: 6px 0; margin-top: -3px; }
.tooltip.left { padding: 0 6px; margin-left: -3px; }
.tooltip.right { padding: 0 6px; margin-left: 3px; }

.tooltip-inner {
    max-width: 260px;
    padding: 8px 13px;
    background: var(--brand-red);
    color: #fff;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 20px -10px rgba(15, 23, 42, .5);
}

.tooltip-arrow {
    position: absolute;
    width: 0; height: 0;
    border: solid transparent;
}
.tooltip.bottom .tooltip-arrow {
    top: 1px; left: 50%; margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: var(--brand-red);
}
.tooltip.top .tooltip-arrow {
    bottom: 1px; left: 50%; margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: var(--brand-red);
}
.tooltip.right .tooltip-arrow {
    top: 50%; left: 1px; margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: var(--brand-red);
}
.tooltip.left .tooltip-arrow {
    top: 50%; right: 1px; margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: var(--brand-red);
}

/* Bootstrap fade utility used by modal JS */
.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }
body.modal-open { overflow: hidden; }

/* ============================================================
   Carousel (Bootstrap 3 JS compatibility shim — used as fallback)
   ============================================================ */

.carousel { position: relative; }
.carousel-inner { position: relative; overflow: hidden; width: 100%; }
.carousel-inner > .item { display: none; position: relative; width: 100%; }
.carousel-inner > .item.active { display: block; }
.carousel-inner > .item.active.left,
.carousel-inner > .item.active.right,
.carousel-inner > .item.next,
.carousel-inner > .item.prev { display: block; }

/* navbar-collapse compat for jquery .collapse() */
.collapse { display: none; }
.collapse.in { display: block; }

/* ============================================================
   Mini animations (scroll reveal)
   ============================================================ */

.dv-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.dv-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* utility */
.dv-hidden { display: none !important; }
@media (max-width: 767px) { .dv-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .dv-show-mobile-only { display: none !important; } }

/* Spinner */
.dv-spinner {
    display: inline-block;
    width: 46px; height: 46px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-red);
    border-radius: 50%;
    animation: dvSpin .8s linear infinite;
}
@keyframes dvSpin { to { transform: rotate(360deg); } }

.dv-loader-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 56px 0;
}
.dv-loader-wrap span { font-size: 13px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; }

/* ============================================================
   Hero visuals (pure CSS / SVG — replace static portada images)
   ============================================================ */

.dv-hv {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) { .dv-hv { min-height: 380px; } }

.dv-hv-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 3;
}

/* Soft halo glow behind every stage */
.dv-hv-stage::before {
    content: "";
    position: absolute;
    inset: 8% 8%;
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .35) 0%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
}

.dv-hv-card {
    position: absolute;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .55), 0 6px 14px -6px rgba(0, 0, 0, .35);
    color: var(--ink);
    z-index: 1;
}

.dv-hv-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-red);
}
.dv-hv-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ===== Slide 1 — Plan de pago ===== */

.dv-hv-pay {
    top: 18%;
    left: 6%;
    right: 22%;
    padding: 22px 24px 24px;
    transform: rotate(-3deg);
    animation: hvFloatA 8s ease-in-out infinite;
}
.dv-hv-pay .row1 {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.dv-hv-amount {
    display: flex; align-items: baseline; gap: 4px;
    font-family: 'Anton', sans-serif;
    color: var(--ink);
}
.dv-hv-amount .currency { font-size: 22px; color: var(--brand-red); }
.dv-hv-amount .num { font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.dv-hv-amount .unit { font-size: 13px; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 600; }
.dv-hv-amount-label {
    font-size: 11px; color: var(--ink-soft); letter-spacing: .08em;
    text-transform: uppercase; margin-top: 4px;
}
.dv-hv-progress {
    margin-top: 18px;
    height: 8px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.dv-hv-progress > span {
    position: absolute; inset: 0 auto 0 0;
    width: 38%;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-amber) 100%);
    border-radius: 999px;
}
.dv-hv-progress-meta {
    margin-top: 10px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; color: var(--ink-soft); font-weight: 600;
}
.dv-hv-progress-meta strong { color: var(--ink); font-size: 13px; }

.dv-hv-chip-pct {
    top: 4%;
    right: 0;
    width: 130px;
    padding: 16px 14px;
    text-align: center;
    transform: rotate(7deg);
    animation: hvFloatB 7s ease-in-out infinite;
}
.dv-hv-chip-pct .pct {
    font-family: 'Anton', sans-serif;
    font-size: 44px;
    line-height: 1;
    color: var(--brand-red);
    display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.dv-hv-chip-pct .pct small { font-size: 18px; color: var(--brand-red); }
.dv-hv-chip-pct .lbl {
    margin-top: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-muted);
}

.dv-hv-chip-truck {
    bottom: 4%;
    right: 4%;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    transform: rotate(-4deg);
    animation: hvFloatC 9s ease-in-out infinite;
}
.dv-hv-chip-truck .ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand-navy);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.dv-hv-chip-truck .ico svg { width: 22px; height: 22px; }
.dv-hv-chip-truck .lbl { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; line-height: 1.2; }
.dv-hv-chip-truck .val { font-family: 'Anton', sans-serif; font-size: 17px; color: var(--ink); line-height: 1; text-transform: uppercase; }

.dv-hv-chip-firma {
    bottom: 18%;
    left: -2%;
    padding: 10px 16px;
    background: var(--brand-amber);
    color: #1A1300;
    border-radius: 999px;
    border: none;
    transform: rotate(-6deg);
    animation: hvFloatA 6.5s ease-in-out infinite;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 12px 24px -10px rgba(245, 158, 11, .8);
}
.dv-hv-chip-firma svg { width: 14px; height: 14px; }

/* ===== Slide 2 — Formas de pago (deck) ===== */

.dv-hv-deck {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-hv-pm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    aspect-ratio: 1.586 / 1; /* credit card ratio */
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .65), 0 6px 12px -6px rgba(0, 0, 0, .4);
    color: #fff;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.dv-hv-pm::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2) 0%, transparent 60%);
    pointer-events: none;
}
.dv-hv-pm-top {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; opacity: .85;
}
.dv-hv-pm-brand {
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1;
}
.dv-hv-pm-chip {
    width: 32px; height: 24px;
    border-radius: 5px;
    background: linear-gradient(135deg, #FCD34D 0%, #B45309 100%);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4);
    position: relative;
    flex-shrink: 0;
}
.dv-hv-pm-chip::before, .dv-hv-pm-chip::after {
    content: ""; position: absolute; left: 4px; right: 4px;
    height: 2px; background: rgba(0,0,0,.25);
}
.dv-hv-pm-chip::before { top: 8px; }
.dv-hv-pm-chip::after  { bottom: 8px; }

.dv-hv-pm-1 { /* Visa-like - back left */
    background: linear-gradient(135deg, #1A1F71 0%, #2E3A9B 100%);
    transform: translate(-78%, -65%) rotate(-14deg);
    z-index: 1;
    animation: hvFloatA 7s ease-in-out infinite;
}
.dv-hv-pm-2 { /* MasterCard-like - center top */
    background: linear-gradient(135deg, #B81527 0%, #F59E0B 110%);
    transform: translate(-50%, -75%) rotate(2deg);
    z-index: 3;
    animation: hvFloatB 8s ease-in-out infinite;
}
.dv-hv-pm-2 .dv-hv-pm-brand { font-style: italic; }
.dv-hv-pm-3 { /* MP-like - back right */
    background: linear-gradient(135deg, #00B1EA 0%, #009EE3 100%);
    transform: translate(-22%, -55%) rotate(16deg);
    z-index: 2;
    animation: hvFloatC 9s ease-in-out infinite;
}

.dv-hv-pm-pills {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 4;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.dv-hv-pm-pill {
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
    border: 1px solid rgba(255,255,255,.6);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.dv-hv-pm-pill .fa { color: var(--brand-red); }

/* ===== Slide 3 — Categorías de productos (2x2 grid en composición) ===== */

.dv-hv-cats {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    padding: 8px;
}
.dv-hv-cat {
    position: relative;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .55), 0 4px 10px -4px rgba(0, 0, 0, .3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ink);
    justify-content: flex-end;
    overflow: hidden;
}
.dv-hv-cat-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--brand-red-50);
    color: var(--brand-red);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: auto;
}
.dv-hv-cat-ico svg { width: 30px; height: 30px; }
.dv-hv-cat strong {
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ink);
}
.dv-hv-cat span {
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.dv-hv-cat-1 { transform: rotate(-3deg); animation: hvFloatA 7s ease-in-out infinite; }
.dv-hv-cat-2 { transform: rotate(2deg);  animation: hvFloatB 8s ease-in-out infinite; }
.dv-hv-cat-3 { transform: rotate(2deg);  animation: hvFloatC 9s ease-in-out infinite; }
.dv-hv-cat-4 { transform: rotate(-2deg); animation: hvFloatB 7.5s ease-in-out infinite; }

/* "+ N productos" badge — overlay centered (no overlap) */
.dv-hv-badge-num {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: var(--brand-amber);
    color: #1A1300;
    padding: 16px 22px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 16px 36px -8px rgba(245, 158, 11, .9), 0 0 0 6px rgba(255,255,255,.15);
    z-index: 3;
    animation: hvFloatC 6s ease-in-out infinite;
    min-width: 110px;
}
.dv-hv-badge-num strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 34px;
    line-height: 1;
}
.dv-hv-badge-num span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-top: 4px;
}

/* ===== Float animations (subtle, varied) ===== */

@keyframes hvFloatA {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}
@keyframes hvFloatB {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 8px; }
}
@keyframes hvFloatC {
    0%, 100% { translate: 0 0; }
    50% { translate: -4px -6px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dv-hv-pay, .dv-hv-chip-pct, .dv-hv-chip-truck, .dv-hv-chip-firma,
    .dv-hv-pm-1, .dv-hv-pm-2, .dv-hv-pm-3, .dv-hv-badge-num,
    .dv-hv-cat-1, .dv-hv-cat-2, .dv-hv-cat-3, .dv-hv-cat-4, .dv-hv-cat-5 {
        animation: none !important;
    }
}

/* On small screens, shrink the stage to keep visuals readable */
@media (max-width: 767px) {
    .dv-hv { min-height: 280px; }
    .dv-hv-stage, .dv-hv-cats { max-width: 360px; }
    .dv-hv-amount .num { font-size: 44px; }
}