/* ═══════════════════════════════════════════════════════════════
   BONGIORNO — Estética tomada de andrekevin.com.ar

   Se carga DESPUÉS de sommy-brand.css para poder ajustar sin tocar
   el resto del sistema. Sólo cambia la capa visual: no toca markup
   ni comportamiento, así todas las funcionalidades siguen igual.

   Claves del look de referencia:
     · Header negro sólido, siempre (nunca transparente)
     · Nav centrado, MAYÚSCULAS, letra chica y tracking amplio
     · Nada de bordes redondeados: todo recto salvo pills y badges
     · Cards de producto sobre gris muy claro, sin borde ni sombra
     · Nombre de producto en mayúsculas y precio en negrita, centrados
     · Botón negro tipo pill que aparece al pasar el mouse
     · Secciones de categorías sobre fondo negro con título centrado
   ═══════════════════════════════════════════════════════════════ */

/* ── Paleta: gris, blanco y rojo. Sin negro ────────────────────
   Las superficies oscuras son grafito, no negro; los textos son gris
   oscuro; el rojo queda para marca, botones y estados activos.
   La variable sigue llamándose --ak-negro para no reescribir las 60
   reglas que ya la usan: lo que cambió es su valor. */
:root {
    --ak-negro:      #3A3A3A;   /* grafito de las bandas: un paso más claro */
    --ak-grafito-2:  #464646;
    --ak-gris-card:  #FBFBFB;   /* casi blanco: la foto de producto respira */
    --ak-gris-linea: #E8E8E8;
    --ak-texto:      #333333;
    --ak-texto-2:    #5C5C5C;
}

/* Fondo blanco puro en todas las zonas claras */
body,
.main-content-ecommerce,
.main-content-ecommerce section { background: #FFFFFF !important; }

/* Los textos que el sistema base ponía en negro pasan a gris oscuro */
:root {
    --sm-ink:   #333333;
    --sm-ink-2: #4A4A4A;
    --sm-ink-3: #7A7A7A;
}

/* ── Sin scroll lateral ────────────────────────────────────────
   El corte lateral en mobile venía de elementos más anchos que la
   ventana. Se corta en html y body (el body solo no alcanza cuando
   quien desborda es el documento) y se anulan los anchos en vw. */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}
.main-content-ecommerce,
.ec-header,
.ec-footer,
.ak-hero,
.ak-reels { max-width: 100%; }

/* Bootstrap deja gutters negativos que asoman fuera de la pantalla */
.main-content-ecommerce .row { margin-left: 0; margin-right: 0; }
.main-content-ecommerce .container-fluid { padding-left: 16px; padding-right: 16px; }

@media (max-width: 767px) {
    .main-content-ecommerce .container-fluid { padding-left: 14px; padding-right: 14px; }
    .main-content-ecommerce section { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── Un solo fondo negro, continuo ─────────────────────────────
   Las líneas finas entre bandas venían de que cada sección pintaba
   su propio negro: aunque el color sea idéntico, en el borde entre
   dos capas el navegador redondea el subpíxel y deja una hairline.

   La solución es no pintar por sección: el negro se pone una sola
   vez en un envoltorio y las secciones van transparentes. Al haber
   una única superficie, no hay bordes que puedan asomar. */
/* Un solo degradado rojo sobre toda la zona oscura.
   Antes se intentó por sección y en cada unión aparecía una línea. Ahora
   que todo lo negro vive en este único envoltorio, el degradado se pinta
   de una sola vez: no hay bordes entre capas y queda homogéneo de punta
   a punta. Las paradas van de rojo a rojo transparente (nunca a
   `transparent` a secas, que interpola por gris y ensucia el medio). */
/* Toda la zona va en blanco, con un apenas de rojo para que no quede
   plana. Las opacidades son muy bajas: sobre blanco, un rojo al .16 ya
   se lee como rosa. */
.ak-bloque-negro {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(80% 55% at 12% 0%,   rgba(223, 31, 28, .045) 0%, rgba(223, 31, 28, 0) 68%),
        radial-gradient(70% 50% at 92% 42%,  rgba(127, 37, 39, .035) 0%, rgba(127, 37, 39, 0) 70%);
    background-repeat: no-repeat;
}
/* Estas van dentro del envoltorio: heredan su fondo, no lo pintan.
   Se listan después de la regla de "fondo blanco" para que el blanco
   no les gane y se coman el gris del bloque. */
.ak-bloque-negro .ak-hero,
.ak-bloque-negro .sommy-marcas-seccion,
.ak-bloque-negro .ak-reels,
.ak-hero,
.sommy-marcas-seccion,
.ak-reels,
#categorias {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Header y footer llevan su propia versión del degradado, en la misma
   familia, para que la página lea como una sola pieza. */
/* Nav blanco. La sombra va siempre puesta (no sólo al scrollear) para
   que se despegue del contenido y se lea como barra de navegación. */
.ec-header,
body.has-overlay-header .ec-header,
body.has-overlay-header .ec-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid #ECECEC !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .07) !important;
}
.ec-header.scrolled { box-shadow: 0 6px 26px rgba(0, 0, 0, .11) !important; }

/* Todo lo que vive dentro del header va sobre blanco: el contenedor, la
   zona de acciones y el menú desplegable de mobile. Sin esto quedaban
   parches grises de la etapa oscura detrás de "Panel" y del carrito. */
.ec-header-inner,
.ec-header .ec-actions,
.ec-header .ec-nav,
.ec-mobile-menu {
    background: #FFFFFF !important;
}
.ec-footer {
    background-color: #000000 !important;
    background-image:
        radial-gradient(75% 70% at 8% 0%,   rgba(223, 31, 28, .10) 0%, rgba(223, 31, 28, 0) 66%),
        radial-gradient(70% 80% at 95% 90%, rgba(127, 37, 39, .14) 0%, rgba(127, 37, 39, 0) 68%) !important;
    background-repeat: no-repeat !important;
}
/* La barra inferior, un punto por encima del negro para separarla */
.ec-footer-bottom { border-top: 1px solid rgba(255,255,255,.10) !important; }

/* ── Cielo estrellado sobre las bandas negras ──────────────────
   Mismo recurso que ya usaba el footer, extendido al resto. Son
   dos capas de puntitos con distinto tamaño y opacidad que titilan
   a distinto ritmo y desfasadas, así ninguna estrella parpadea al
   mismo tiempo que su vecina. Todo por CSS: cero peso extra.

   Van en ::before/::after de un contenedor .ak-estrellas para no
   pisar los pseudo-elementos que las secciones ya usan. */
.ak-estrellas { position: relative; }
.ak-estrellas > * { position: relative; z-index: 1; }

.ak-estrellas::before,
.ak-estrellas::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Capa 1: estrellas chicas, muchas, tenues */
.ak-estrellas::before {
    background-image:
        radial-gradient(1px 1px at 6% 18%,  rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 17% 62%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 24% 31%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 33% 78%, rgba(255,255,255,.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 41% 12%, rgba(255,255,255,.50) 50%, transparent 51%),
        radial-gradient(1px 1px at 49% 52%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 25%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 71%, rgba(255,255,255,.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 74% 15%, rgba(255,255,255,.50) 50%, transparent 51%),
        radial-gradient(1px 1px at 82% 58%, rgba(255,255,255,.32) 50%, transparent 51%),
        radial-gradient(1px 1px at 91% 35%, rgba(255,255,255,.48) 50%, transparent 51%),
        radial-gradient(1px 1px at 97% 82%, rgba(255,255,255,.30) 50%, transparent 51%);
    animation: akTitilar 7s ease-in-out infinite;
}

/* Capa 2: unas pocas más grandes y brillantes, a contratiempo */
.ak-estrellas::after {
    background-image:
        radial-gradient(1.8px 1.8px at 12% 44%, rgba(255,255,255,.85) 50%, transparent 51%),
        radial-gradient(2px   2px   at 29% 8%,  rgba(255,255,255,.75) 50%, transparent 51%),
        radial-gradient(1.7px 1.7px at 46% 88%, rgba(255,255,255,.70) 50%, transparent 51%),
        radial-gradient(2px   2px   at 63% 41%, rgba(255,255,255,.80) 50%, transparent 51%),
        radial-gradient(1.8px 1.8px at 79% 92%, rgba(255,255,255,.65) 50%, transparent 51%),
        radial-gradient(2.1px 2.1px at 88% 20%, rgba(255,255,255,.85) 50%, transparent 51%);
    animation: akTitilarFuerte 4.5s ease-in-out 1.4s infinite;
}

@keyframes akTitilar {
    0%, 100% { opacity: .85; }
    50%      { opacity: .35; }
}
@keyframes akTitilarFuerte {
    0%, 100% { opacity: 1; }
    45%      { opacity: .30; }
}

/* Quien prefiere menos movimiento ve el cielo quieto */
@media (prefers-reduced-motion: reduce) {
    .ak-estrellas::before,
    .ak-estrellas::after { animation: none; }
}

/* El fondo del header ya se define más arriba (blanco con sombra). */
/* El header usa todo el ancho de la ventana: venía topado en 1600px y en
   pantallas grandes quedaba el logo lejos del borde con aire muerto. */
.ec-header-inner {
    height: 78px !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    padding: 0 34px !important;
}
@media (max-width: 991px) {
    .ec-header-inner { height: 64px !important; padding: 0 16px !important; }
}

/* ── Todo lo que iba en blanco sobre oscuro pasa a oscuro sobre blanco ── */
.ec-logo .logo-color { display: none !important; }
.ec-logo .logo-blanco { display: block !important; filter: none !important; margin-top: 0 !important; }

/* Nav y acciones del header */
.ec-nav .ec-nav-link,
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link,
.ec-action-btn,
.ec-action-btn span,
.ec-action-btn i,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn span,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn i,
.ec-mobile-toggle,
.ec-mobile-toggle i {
    color: #1A1A1A !important;
}
.ec-nav .ec-nav-link:hover { opacity: 1; color: #DF1F1C !important; }
.ec-nav .ec-nav-link::after,
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link::after {
    background: #DF1F1C !important;
}
.ec-action-btn:hover,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn:hover {
    background: #F2F2F2 !important;
    color: #DF1F1C !important;
}
.ec-mobile-toggle { border-color: var(--ak-gris-linea) !important; }

/* Bandas del cuerpo: títulos y textos en oscuro */
.ak-reels-head h2,
#categorias h3 { color: var(--ak-texto) !important; }
.ak-reels-head p { color: var(--ak-texto-2) !important; }

/* Categorías de la cinta */
.ak-cat-cinta .n { color: var(--ak-texto) !important; }
.ak-cat-cinta:hover .n { color: #DF1F1C !important; }
/* El desvanecido de los extremos ahora funde a blanco */
.sommy-marcas::before { background: linear-gradient(90deg,  #FFFFFF 0%, rgba(255,255,255,0) 100%) !important; }
.sommy-marcas::after  { background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important; }

/* Botón a Instagram: sobre blanco va en oscuro */
.ak-btn-ig {
    background: var(--ak-texto);
    color: #ffffff !important;
    border-color: var(--ak-texto);
}
.ak-btn-ig:hover { background: #DF1F1C; border-color: #DF1F1C; color: #fff !important; }

/* El cielo estrellado sólo tiene sentido sobre fondo oscuro */
.ak-bloque-negro .ak-estrellas::before,
.ak-bloque-negro .ak-estrellas::after { display: none !important; }
.ec-logo img { height: 62px !important; }
@media (max-width: 991px) { .ec-logo img { height: 77px !important; } }

/* Nav: mayúsculas, chico, tracking amplio, en blanco.
   Ojo: sólo el nav de escritorio. El menú desplegable de mobile usa la
   misma clase .ec-nav-link pero va sobre panel blanco — si se le aplica
   este color, los links quedan invisibles. */
.ec-nav .ec-nav-link,
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link {
    color: #1A1A1A !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 13px !important;
}

/* Menú mobile: panel blanco, letra negra */
.ec-mobile-menu .ec-nav-link,
.ec-mobile-menu .ec-action-btn,
body.has-overlay-header .ec-header:not(.scrolled) .ec-mobile-menu .ec-nav-link,
body.has-overlay-header .ec-header:not(.scrolled) .ec-mobile-menu .ec-action-btn {
    color: #333333 !important;
    background: transparent !important;
    text-transform: none;
    letter-spacing: 0;
}
.ec-mobile-menu .ec-nav-link:hover,
.ec-mobile-menu .ec-action-btn:hover {
    color: #333333 !important;
    background: #FAFAFA !important;
}
.ec-mobile-menu .ec-mobile-sub { color: #555555 !important; }
.ec-nav .ec-nav-link:hover { color: #DF1F1C !important; opacity: 1; }
.ec-header .ec-nav .ec-nav-link.is-active,
.ec-header .ec-nav .ec-nav-link.is-active *,
body .ec-header .ec-nav a.ec-nav-link.is-active {
    color: #DF1F1C !important;
    opacity: 1 !important;
}
.ec-header .ec-nav .ec-nav-link.is-active::after { background: #DF1F1C !important; }

/* El link activo también en rojo con el scroll arriba de todo.
   `sommy-brand.css` lo pinta de blanco ahí (regla pensada para cuando el
   nav era transparente sobre el video). Hoy el header es blanco siempre,
   así que ese blanco deja "INICIO" invisible. Hay que repetir el selector
   completo: la regla de sommy-brand tiene más especificidad que las de
   arriba y, si no, gana el blanco. */
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link.is-active,
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link.is-active * {
    color: #DF1F1C !important;
    opacity: 1 !important;
}
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link.is-active::after {
    background: #DF1F1C !important;
}
/* Y el hover, que sommy-brand también manda a blanco */
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link:hover {
    color: #DF1F1C !important;
}
/* El subrayado del activo, fino y blanco */
.ec-nav .ec-nav-link::after,
body.has-overlay-header .ec-header:not(.scrolled) .ec-nav .ec-nav-link::after {
    background: #DF1F1C !important;
    height: 1.5px !important;
    bottom: 0 !important;
}

/* Acciones de la derecha: en negro sobre el header blanco */
.ec-action-btn,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn {
    color: #1A1A1A !important;
    background: transparent !important;
    padding: 7px 9px !important;
}
.ec-action-btn:hover,
body.has-overlay-header .ec-header:not(.scrolled) .ec-action-btn:hover {
    background: #F2F2F2 !important;
    color: #DF1F1C !important;
}
.ec-action-btn span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ec-cart-count { background: #DF1F1C !important; }
.ec-mobile-toggle { color: #1A1A1A !important; border-color: #E0E0E0 !important; }

/* Mega-menú: panel blanco recto, sin redondeos */
.ec-nav-drop-panel { border-radius: 0 !important; border: none !important; box-shadow: 0 14px 40px rgba(0,0,0,.18) !important; }
.ec-mega-rubro { letter-spacing: .1em; }

/* ── Titulares rotativos SOBRE el video ────────────────────────
   Se apilan en el mismo lugar y sólo se ve el activo: así el hero
   no cambia de alto ni salta al pasar de un titular a otro. */
.ak-hero-titulares { position: relative; width: 100%; }
.ak-hero-titular {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}
.ak-hero-titular.activo { opacity: 1; transform: none; pointer-events: auto; }
/* El primero queda en el flujo para que el contenedor tome alto */
.ak-hero-titular:first-child { position: relative; }

/* ── Flechas del carrusel de titulares ─────────────────────────
   Cuelgan del .carousel (no de .ak-hero-copy, que tiene los clicks
   desactivados para no bloquear el arrastre del banner de fondo). */
.ak-hero-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ak-hero-flecha.izq { left: 22px; }
.ak-hero-flecha.der { right: 22px; }
.ak-hero-flecha:hover {
    background: rgba(223, 31, 28, .85);
    border-color: rgba(255, 255, 255, .9);
}
.ak-hero-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Puntitos que indican en qué titular estamos */
.ak-hero-puntos {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 20px;
}
.ak-hero-puntos span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    transition: width .3s ease, background .3s ease;
}
.ak-hero-puntos span.activo { width: 24px; background: #fff; }
/* ── HERO: panel de banners con velo y titular centrado ───────── */
/* Pegado al nav y a lo ancho: se anula el padding de 4.5rem que
   sommy-brand le pone a TODA sección (con !important, por eso hace falta
   repetirlo acá). */
.ak-hero,
.main-content-ecommerce section.ak-hero {
    padding: 0 !important;   /* full width y pegado al nav */
}
@media (min-width: 1400px) { .ak-hero { padding: 0 !important; } }
.ak-hero .carousel { position: relative; }

.ak-hero-inner {
    /* Video full-screen: ocupa TODA la pantalla, de arriba a abajo. */
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    overflow: hidden;
}
.ak-hero .carousel { border-radius: 0; overflow: hidden; }
.ak-hero .carousel-item { height: 100%; }
.ak-hero-veil { border-radius: 0; }
.ak-hero-media {
    width: 100%;
    height: 100%;
    /* El recuadro ya tiene la proporción del video (2:1): cover calza exacto,
       sin recorte ni franjas. Se ve el video completo a todo el ancho. */
    object-fit: cover;
    object-position: center;
    display: block;
    /* Video a color; se baja apenas el brillo para que el texto blanco lea */
    filter: brightness(.72);
}
/* Una sola imagen según el ancho. En mobile los banners se reemplazan por
   el video vertical de marca (.ak-hero-video-movil), que va fijo detrás
   del carrusel para no reiniciarse con cada pase. */
.ak-hero .mobile-img { display: none; }
.ak-hero .ak-hero-video-movil { display: none; }
@media (max-width: 767px) {
    .ak-hero .desktop-img { display: none; }
    .ak-hero .mobile-img { display: none; }
    .ak-hero .ak-hero-video-movil {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1; /* debajo del velo (2) y del titular (3) */
    }
    /* Con el video fijo de fondo ya no hay banners que navegar */
    .ak-hero .ak-hero-dots { display: none; }
}

.ak-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
    z-index: 2;
}

.ak-hero-copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    pointer-events: none;   /* el carrusel sigue siendo arrastrable */
}
.ak-hero-copy h1 { margin: 0; color: #fff; }
.ak-hero-copy .l1,
.ak-hero-copy .l3 {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(26px, 4.4vw, 58px);
    line-height: 1.12;
    color: #ffffff;
}
.ak-hero-copy .l2 {
    display: block;
    font-weight: 300;
    font-size: clamp(15px, 2.1vw, 28px);
    line-height: 1.5;
    margin: 4px 0 2px;
    color: #ffffff;
}
.ak-hero-cta {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: auto;   /* los botones sí reciben clic */
}
.ak-btn-light, .ak-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 12px 28px;
    text-decoration: none !important;
    transition: background .2s, color .2s;
}
.ak-btn-light { background: #ffffff; color: var(--ak-negro) !important; }
.ak-btn-light:hover { background: #DF1F1C; color: #fff !important; }
.ak-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.6); }
.ak-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* ── Botonera del hero, ahora debajo de la placa ───────────────
   Los estilos de arriba están pensados para leerse SOBRE el video
   oscuro (blanco y borde translúcido). Acá el fondo es blanco, así
   que se invierten: el principal en rojo de marca y el secundario
   en contorno negro. */
.ak-hero-cta-abajo {
    margin-top: 18px;
    padding-bottom: 4px;
}
.ak-hero-cta-abajo .ak-btn-light {
    background: #DF1F1C;
    color: #ffffff !important;
    border: 1px solid #DF1F1C;
}
.ak-hero-cta-abajo .ak-btn-light:hover { background: #7F2527; border-color: #7F2527; }

.ak-hero-cta-abajo .ak-btn-ghost {
    background: transparent;
    color: #1A1A1A !important;
    border: 1px solid #D8D8D8;
}
.ak-hero-cta-abajo .ak-btn-ghost:hover {
    background: #FFF6F6;
    border-color: #DF1F1C;
    color: #DF1F1C !important;
}

/* Puntitos: el activo es una rayita larga, como en la referencia */
.ak-hero-dots {
    z-index: 4;
    margin-bottom: 18px;
    align-items: center;
    gap: 8px;
}
.ak-hero-dots button {
    width: 9px; height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.55) !important;
    border: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: width .25s ease, background .25s ease;
}
.ak-hero-dots button.active {
    width: 40px;
    background: #ffffff !important;
}

/* Como el hero ya no es a pantalla completa, el contenido no va debajo del header */
body.has-overlay-header .main-content-ecommerce { padding-top: 0 !important; }

/* ── Hero en mobile: placa apaisada, no pantalla completa ──────
   En la referencia el banner de celular es una tarjeta ancha y baja
   con esquinas redondeadas, separada del borde. Nada de 74vh, que
   obliga a scrollear sólo para pasar el hero. */
@media (max-width: 767px) {
    /* Bastante aire a los costados: la placa tiene que quedar despegada
       de los bordes de la pantalla, no pegada al vidrio.

       Va con el ancestro `.main-content-ecommerce` a propósito: más
       arriba hay un `section { padding: 0 !important }` para mobile y,
       con los dos `!important`, gana el de mayor especificidad. Sin el
       ancestro el hero volvía a quedar pegado al borde. */
    .main-content-ecommerce section.ak-hero,
    .ak-hero { padding: 16px 22px 12px !important; }
    .ak-hero-inner { height: 100dvh; border-radius: 0; overflow: hidden; }
    .ak-hero .carousel,
    .ak-hero-veil { border-radius: 18px; overflow: hidden; }
    .ak-hero-media { filter: brightness(.62); }

    .ak-hero-copy { padding: 0 40px; }   /* deja lugar a las flechas */
    .ak-hero-copy .l1,
    .ak-hero-copy .l3 { font-size: 17px; line-height: 1.15; }
    .ak-hero-copy .l2 { font-size: 11px; margin: 2px 0; }
    .ak-hero-cta { margin-top: 10px; gap: 8px; }
    .ak-btn-light, .ak-btn-ghost { padding: 8px 15px; font-size: 10.5px; }

    /* Flechas más chicas y pegadas al borde de la placa */
    .ak-hero-flecha { width: 32px; height: 32px; font-size: 12px; }
    .ak-hero-flecha.izq { left: 8px; }
    .ak-hero-flecha.der { right: 8px; }
    .ak-hero-puntos { margin-top: 12px; }
    .ak-hero-puntos span { width: 6px; height: 6px; }
    .ak-hero-puntos span.activo { width: 18px; }

    .ak-hero-dots { margin-bottom: 10px; }
    .ak-hero-dots button { width: 7px; height: 7px; }
    .ak-hero-dots button.active { width: 26px; }
}

/* ── Menos aire entre el nav y el contenido ────────────────────
   El tema base ponía 4.5rem arriba y abajo de cada sección; sumado
   al margen de los encabezados quedaba media pantalla en blanco
   antes de ver nada. */
.main-content-ecommerce section:not(.sommy-hero-video):not(.ak-hero) {
    padding-top: 1.6rem !important;
    padding-bottom: 2.2rem !important;
}
/* La primera sección de cada página arranca casi pegada al nav */
.main-content-ecommerce > section:first-child { padding-top: 1rem !important; }
/* ...salvo el hero: va pegado al nav, sin ningún espacio arriba */
.main-content-ecommerce > section.ak-hero:first-child { padding-top: 0 !important; }

/* Encabezados de sección: sin los márgenes gigantes del tema */
.main-content-ecommerce .tabs-header {
    margin-top: 0 !important;
    margin-bottom: 1.1rem !important;
}
.sommy-page-hero { padding-top: 1.6rem !important; }

/* ── TIPOGRAFÍA DE SECCIÓN ────────────────────────────────────── */
.main-content-ecommerce h2,
.section-title,
.sommy-section-heading {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400 !important;
}

/* ── BANDA DE CATEGORIAS: fondo blanco, letra oscura ── */
.sommy-marcas-seccion,
section:has(> .container-fluid > .sommy-marcas) {
    background: #FFFFFF !important;
}
.sommy-marcas-seccion p,
section:has(> .container-fluid > .sommy-marcas) > .container-fluid > p {
    color: var(--ak-texto-2) !important;
    opacity: 1;
}
.sommy-marcas,
.sommy-marcas-track { background: transparent !important; }

/* Sin título ni líneas: la banda es sólo los logos pasando */
.sommy-marcas-seccion,
.sommy-marcas-seccion .container-fluid,
.sommy-marcas,
.sommy-marcas-track {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.sommy-marcas-seccion > .container-fluid > p { display: none !important; }
.sommy-marcas-seccion hr { display: none !important; }

/* Las líneas horizontales arriba y abajo de la banda salían de la
   -webkit-mask-image que usa la marquesina para desvanecer los logos en
   los extremos: la máscara crea una capa de composición aparte y en su
   borde el negro compone distinto del negro de la sección.
   Se saca la máscara y el desvanecido se hace con dos degradados
   encima, del mismo negro de la sección: mismo efecto, sin capa. */
.sommy-marcas {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: hidden;
    position: relative;
}
.sommy-marcas::before,
.sommy-marcas::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 12%;
    z-index: 2;
    pointer-events: none;
}
.sommy-marcas::before {
    left: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
}
.sommy-marcas::after {
    right: 0;
    background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
    transform: none;
}
.sommy-marca-logo,
.sommy-marca-logo .n,
.sommy-marca-logo em,
.sommy-marca-logo i {
    color: var(--ak-texto) !important;
    opacity: .9;
    filter: none !important;
}
.sommy-marca-logo:hover,
.sommy-marca-logo:hover .n,
.sommy-marca-logo:hover i { color: #DF1F1C !important; opacity: 1; }
/* Los degradés laterales del carrusel tienen que fundir a negro, no a blanco */
.sommy-marcas::before,
.sommy-marcas::after {
    background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)) !important;
}
.sommy-marcas::after { transform: scaleX(-1); }

/* ── CARDS DE PRODUCTO ────────────────────────────────────────── */
.product-item {
    border: 1px solid var(--ak-gris-linea) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    text-align: center;
    padding: 14px 14px 18px !important;
    transition: border-color .2s ease;
}
.product-item:hover {
    border-color: #B8B8B8 !important;
    box-shadow: none !important;
}

/* Las categorías girando en la cinta */
.ak-cat-cinta {
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 25px;
    font-weight: 500;
    transition: opacity .2s;
}
.ak-cat-cinta .n { color: #1A1A1A !important; font-size: 25px; }
.ak-cat-cinta:hover { opacity: 1 !important; }
.ak-cat-cinta:hover .n { color: #DF1F1C !important; }

/* La cinta tarda más en dar la vuelta: se lee sin apuro.
   Son 26 categorías repetidas dos veces — con 28s pasaban de largo. */
.sommy-marcas-track { animation-duration: 95s !important; }

/* La foto vive sobre un gris muy claro, ocupando todo el ancho */
.product-item figure,
.product-item .card-img-top,
.product-item .image-holder {
    background: var(--ak-gris-card) !important;
    border-radius: 0 !important;
    margin: 0 0 12px !important;
    padding: 18px !important;
    position: relative;
    overflow: hidden;
}
.product-item figure img { mix-blend-mode: multiply; }

/* Nombre y precio centrados, el nombre en mayúsculas */
.product-item h3,
.product-item h4,
.product-item h5,
.product-item .card-title,
.product-item .product-title {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ak-negro) !important;
    margin: 0 0 5px !important;
    line-height: 1.45;
}
.product-item .price,
.product-item .fw-bold {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ak-negro) !important;
}
.price-container { justify-content: center; display: flex; gap: 8px; align-items: baseline; }

/* Botón "Ver detalle" que aparece sobre la foto */
.product-item .btn-add-prod,
.product-item .btn-add-prod-specific,
.product-item .btn-dark {
    background: var(--ak-negro) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    padding: 11px 26px !important;
    box-shadow: none !important;
}
.product-item .btn-add-prod:hover,
.product-item .btn-dark:hover { background: #DF1F1C !important; }

/* ── PRODUCTOS DESTACADOS: carrusel horizontal ────────────────── */
.ak-dest-wrap { position: relative; padding: 0 48px; }
.ak-dest-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.ak-dest-track::-webkit-scrollbar { display: none; }
/* Placa igual a la de la referencia: caja blanca redondeada con la foto
   grande adentro, y el nombre y el precio POR FUERA, debajo. El botón
   aparece sobre la foto al pasar el mouse. */
.ak-dest-item {
    flex: 0 0 auto;
    width: 340px;
    scroll-snap-align: start;
}
.ak-dest-item .product-item {
    height: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* La caja blanca contiene sólo la imagen */
.ak-dest-item figure {
    position: relative;
    background: #ffffff !important;
    border-radius: 16px !important;
    aspect-ratio: 1 / 1.06;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px !important;
    padding: 8px !important;
    overflow: hidden;
    transition: box-shadow .25s ease;
}
.ak-dest-item:hover figure { box-shadow: 0 10px 34px rgba(0,0,0,.10); }
/* La foto llena la caja. El scale compensa el margen blanco que casi
   siempre traen las fotos de producto recortadas sobre fondo blanco:
   sin él, el mueble se ve chico en el medio de un recuadro grande. */
.ak-dest-item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.28);
    transition: transform .35s ease;
    mix-blend-mode: normal;
}
.ak-dest-item:hover figure img { transform: scale(1.34); }

/* Menos aire entre el nombre y el precio */
.ak-dest-item .name-product { margin-bottom: 0 !important; }
.ak-dest-item .text-center.mb-2 { margin-bottom: 0 !important; }

/* El botón vive dentro de la caja y sube al pasar el mouse */
.ak-dest-item .div-button-cart {
    position: absolute;
    left: 18px; right: 18px; bottom: 18px;
    margin: 0 !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 2;
}
.ak-dest-item:hover .div-button-cart { opacity: 1; transform: translateY(0); }
.ak-dest-item .btn-add-prod {
    display: block;
    width: 100%;
    background: var(--ak-negro) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.ak-dest-item .btn-add-prod:hover { background: #DF1F1C !important; }

/* Nombre y precio, fuera de la caja */
.ak-dest-item .name-product h3 {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    color: var(--ak-negro) !important;
    margin: 0 0 6px !important;
    line-height: 1.5;
}
.ak-dest-item .fw-bold {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ak-negro) !important;
}
.ak-dest-item .badge { z-index: 3; }

/* En pantallas chicas el botón no va flotando sobre la foto: no hay hover
   y encima tapa la imagen. Vuelve al flujo normal, debajo del precio. */
@media (max-width: 991px) {
    .ak-dest-item .div-button-cart {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 10px !important;
    }
    .ak-dest-item .btn-add-prod { padding: 12px 18px !important; }
    .ak-dest-item figure { padding: 16px !important; }
}
/* En escritorio táctil (notebooks con pantalla táctil) sí se muestra */
@media (hover: none) and (min-width: 992px) {
    .ak-dest-item .div-button-cart { opacity: 1; transform: none; }
}

.ak-dest-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid var(--ak-gris-linea);
    background: #ffffff;
    color: #333333;
    font-size: 13px;
    cursor: pointer;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.ak-dest-nav:hover { background: #333333; color: #ffffff; border-color: #333333; }
.ak-dest-nav.prev { left: 4px; }
.ak-dest-nav.next { right: 4px; }

@media (max-width: 767px) {
    .ak-dest-wrap { padding: 0; }
    .ak-dest-item { width: 240px; }
    .ak-dest-nav { display: none; }
}

/* ── Checkout: destacar "Realizar pedido" al confirmar los datos ──
   Se llega hasta el botón con scroll y late un par de veces, para que
   quede claro que todavía falta ese paso. */
@keyframes akLatirBoton {
    0%, 100% { box-shadow: 0 0 0 0 rgba(223, 31, 28, .55); }
    50%      { box-shadow: 0 0 0 14px rgba(223, 31, 28, 0); }
}
.ak-resaltado {
    animation: akLatirBoton 1.3s ease-out 2;
    position: relative;
    z-index: 2;
}
/* El resumen queda pegado arriba al scrollear, así el botón es visible */
@media (min-width: 992px) {
    .section-content-order .order-summary,
    .section-content-order .card-summary { position: sticky; top: 90px; }
}

/* ── FICHA DE PRODUCTO: imagen principal más grande ────────────
   Venía topada en 440px de alto con `object-fit: cover`, que además
   recorta la foto. Se agranda y se pasa a `contain` para que el
   mueble entre entero. */
.content-product-item-main { min-height: 520px !important; }
.content-product-item-main .product-main-image {
    max-height: 620px !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 18px;
}
@media (max-width: 991px) {
    .content-product-item-main { min-height: 340px !important; }
    .content-product-item-main .product-main-image { max-height: 420px !important; }
}

/* ── TILES DE CATEGORÍA: banda negra, imágenes al ras ─────────── */
#categorias {
    background: var(--ak-negro);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
#categorias .tabs-header { border-bottom: none !important; justify-content: center !important; margin: 0 0 1.6rem !important; }
#categorias h3 {
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 300 !important;
    font-size: clamp(20px, 3vw, 30px);
    text-align: center;
    width: 100%;
}
.sommy-cat-grid { gap: 8px !important; }
.sommy-cat-tile { border-radius: 0 !important; }
.sommy-cat-tile .label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
    font-size: 14px;
    left: 18px;
    bottom: 16px;
    transform: none;
    text-align: left;
}
.sommy-cat-tile .veil { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%) !important; }
.sommy-cat-tile .go { display: none; }

/* ── REELS: carrusel horizontal de videos verticales ──────────── */
.ak-reels { background: var(--ak-negro); }

/* Poco aire arriba: la cinta de categorías ya trae el suyo y entre las dos
   secciones quedaba un blanco enorme.

   Va con los dos ancestros a propósito. Más arriba hay un
   `.main-content-ecommerce section:not(.sommy-hero-video):not(.ak-hero)`
   con `!important`; los `:not()` cuentan para la especificidad, así que
   un `.ak-reels` suelto perdía y el padding no cambiaba nunca. */
.main-content-ecommerce .ak-bloque-negro section.ak-reels,
.main-content-ecommerce section.ak-reels:not(.ak-hero) {
    padding-top: 0.6rem !important;
    padding-bottom: 2.6rem !important;
}
.ak-reels-head { text-align: center; margin-bottom: 1.4rem; padding: 0 20px; }
.ak-reels-head h2 {
    color: #ffffff !important;
    font-weight: 300 !important;
    font-size: clamp(20px, 3vw, 30px);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 6px;
}
.ak-reels-head p { color: rgba(255,255,255,.6); font-size: 13px; margin: 0; }

.ak-reels-wrap { position: relative; padding: 0 52px; }

.ak-reels-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;          /* la barra molesta sobre el negro */
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.ak-reels-track::-webkit-scrollbar { display: none; }

.ak-reel {
    position: relative;
    flex: 0 0 auto;
    width: 250px;                   /* base; en escritorio crece más abajo */
    aspect-ratio: 9 / 16;           /* formato reel */
    background: #464646;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* El degradado del pie también tiene que respetar la curva */
.ak-reel::after { border-radius: 0 0 16px 16px; }
.ak-reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.ak-reel-titulo {
    position: absolute;
    left: 14px; bottom: 13px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
    z-index: 2;
}
.ak-reel-play {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85);
    font-size: 26px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 1;
}
.ak-reel:hover .ak-reel-play { opacity: 1; }
/* Degradé inferior para que el título se lea sobre cualquier video */
.ak-reel::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
    pointer-events: none;
}

/* Flechas debajo del carrusel: en mobile las laterales están ocultas,
   así que estas son el único control para pasar los videos. */
.ak-reels-flechas {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
/* Van sobre fondo blanco: en oscuro, no en blanco (si no, invisibles) */
.ak-reels-flechas .ak-reels-nav {
    position: static;
    transform: none;
    display: flex !important;      /* le gana al display:none de mobile */
    background: transparent;
    border: 1px solid #C9C9C9;
    color: var(--ak-texto);
}
.ak-reels-flechas .ak-reels-nav:hover {
    background: var(--ak-texto);
    border-color: var(--ak-texto);
    color: #ffffff;
}

/* Botón a la cuenta de Instagram, bajo el carrusel */
.ak-reels-pie { text-align: center; margin-top: 22px; }
.ak-btn-ig {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ak-negro);
    color: #ffffff !important;
    border: 1px solid #ffffff;
    border-radius: 999px;
    padding: 12px 30px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .2s, color .2s;
}
.ak-btn-ig i { font-size: 15px; }
.ak-btn-ig:hover { background: #ffffff; color: var(--ak-negro) !important; }

/* Botón de sonido: los videos arrancan en silencio porque los navegadores
   no dejan reproducir con audio sin que el usuario lo pida. */
.ak-reel-sonido {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 32px; height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(0,0,0,.55);
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.ak-reel:hover .ak-reel-sonido,
.ak-reel-sonido.con-sonido { opacity: 1; }
.ak-reel-sonido:hover { background: rgba(0,0,0,.8); }
.ak-reel-sonido.con-sonido { background: #DF1F1C; }

/* En touch no hay hover: el botón se ve siempre */
@media (hover: none) {
    .ak-reel-sonido { opacity: 1; }
}

/* Placas vacías mientras no haya videos cargados */
.ak-reel--vacio {
    flex-direction: column;
    gap: 10px;
    border: 1px dashed rgba(255,255,255,.18);
    background: #454545;
}
.ak-reel--vacio .ak-reel-icono { color: rgba(255,255,255,.28); font-size: 30px; }
.ak-reel--vacio .ak-reel-titulo { position: static; color: rgba(255,255,255,.4); text-shadow: none; }
.ak-reel--vacio::after { display: none; }

/* Flechas */
.ak-reels-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.92);
    color: #2E2E2E;
    font-size: 14px;
    cursor: pointer;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.ak-reels-nav:hover { background: #ffffff; }
.ak-reels-nav.prev { left: 8px; }
.ak-reels-nav.next { right: 8px; }

.ak-reels-hint {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    text-align: center;
    margin: 18px auto 0;
    max-width: 640px;
    padding: 0 20px;
}
.ak-reels-hint strong { color: rgba(255,255,255,.8); }

/* En escritorio las placas van bien grandes, como en la referencia */
@media (min-width: 992px)  { .ak-reel { width: 320px; } }
@media (min-width: 1400px) { .ak-reel { width: 380px; } }

@media (max-width: 767px) {
    .ak-reels-wrap { padding: 0 14px; }
    .ak-reel { width: 200px; }
    .ak-reels-nav { display: none; }
}

/* ── BOTONES GENERALES: rectos o pill, nunca a medias ─────────── */
.btn-sommy-light, .btn-sommy-primary {
    border-radius: 999px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
}

/* ── FOOTER: negro plano, tipografía chica ────────────────────── */
.ec-footer { background: var(--ak-negro) !important; }
.ec-footer h6 { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px !important; }
.ec-footer-links a { font-size: 12.5px !important; }

@media (max-width: 991px) {
    .ec-header-inner { height: 58px !important; }
    .ec-logo img { height: 77px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CONSULTAR PRECIO POR WHATSAPP
   Reemplaza al precio en todas las tarjetas de producto y en la
   ficha. El catálogo no muestra importes.
   ══════════════════════════════════════════════════════════════ */
.ec-consultar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid #25D366;
    background: #fff;
    color: #128C4A;
    font-weight: 600;
    font-size: .93rem;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}
.ec-consultar i { font-size: 1.05rem; }

.ec-consultar:hover,
.ec-consultar:focus {
    background: #25D366;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* En la ficha del producto va a lo ancho y más grande */
.ec-consultar--bloque {
    width: 100%;
    padding: 15px 22px;
    font-size: 1.05rem;
    background: #25D366;
    color: #fff;
}
.ec-consultar--bloque:hover,
.ec-consultar--bloque:focus {
    background: #128C4A;
    border-color: #128C4A;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   BARRA SUPERIOR DE CONTACTO
   
   El header es position:fixed en top:0, así que la barra no puede
   ser estática: quedaría tapada por el header apenas carga la
   página. Va fija arriba de todo y el header baja su altura.
   ══════════════════════════════════════════════════════════════ */
:root { --ec-topbar-h: 36px; }

.ec-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1051;                /* por encima del header (1050) */
    height: var(--ec-topbar-h);
    background: #F4F1EF;
    border-bottom: 1px solid #E6E0DC;
    font-size: .82rem;
    color: #5B5B5B;
    display: flex;
    align-items: center;
}

.ec-topbar-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.ec-topbar i { color: #7F2527; margin-right: 5px; }
.ec-topbar-dir strong { color: #7F2527; font-weight: 700; }

.ec-topbar-derecha { display: flex; align-items: center; gap: 18px; }

.ec-topbar-redes { display: flex; align-items: center; gap: 12px; }
.ec-topbar-redes a { color: #5B5B5B; font-size: 1.05rem; line-height: 1; transition: color .15s; }
.ec-topbar-redes a:hover { color: #DF1F1C; }
.ec-topbar-redes a i { margin-right: 0; color: inherit; }
.ec-topbar-redes .ec-topbar-wa:hover { color: #25D366; }

/* El header arranca debajo de la barra */
.ec-header { top: var(--ec-topbar-h) !important; }

/* Y el contenido baja lo mismo, en los dos modos de header */
.main-content-ecommerce { padding-top: calc(var(--header-height) + var(--ec-topbar-h)); }
/* En modo overlay el hero arranca en el borde superior: TODO el header
   (topbar + nav) flota transparente sobre el video. */
body.has-overlay-header .main-content-ecommerce { padding-top: 0 !important; }

/* ── Mobile ────────────────────────────────────────────────────
   Los teléfonos no entran sin romper el renglón: quedan en el
   footer y en el botón flotante de WhatsApp. Se conservan la
   dirección y las redes, que es lo que se busca desde el celu. */
@media (max-width: 767.98px) {
    :root { --ec-topbar-h: 32px; }

    .ec-topbar { font-size: .72rem; }
    .ec-topbar-inner { padding: 0 12px; gap: 10px; }
    .ec-topbar-tel { display: none; }
    .ec-topbar-dir strong { display: none; }
    .ec-topbar-redes { gap: 14px; }
    .ec-topbar-redes a { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   HERO EN MOBILE — MÁS GRANDE

   La placa de 215px con texto de 17px quedaba diminuta: el hero es
   lo primero que se ve y no comunicaba nada. Se agranda a 380px y
   se sube toda la tipografía en proporción.

   Estas reglas van al final del archivo a propósito: repiten los
   mismos selectores de más arriba, así que ganan por orden de
   documento sin necesidad de inflar la especificidad.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Menos aire a los costados: el video gana ancho pero sigue
       despegado del borde, que era el pedido original. */
    .main-content-ecommerce section.ak-hero,
    .ak-hero { padding: 12px 14px 14px !important; }

    .ak-hero-inner { height: 100dvh; border-radius: 0; }
    .ak-hero .carousel,
    .ak-hero-veil { border-radius: 20px; }

    /* El velo un poco más claro: con la placa grande, tan oscuro
       tapaba la imagen en vez de dar contraste al texto. */
    .ak-hero-media { filter: brightness(.7); }

    .ak-hero-copy { padding: 0 46px; }
    .ak-hero-copy .l1,
    .ak-hero-copy .l3 { font-size: 27px; line-height: 1.12; }
    .ak-hero-copy .l2 { font-size: 15px; margin: 6px 0; }

    .ak-hero-cta { margin-top: 18px; gap: 10px; }
    .ak-btn-light,
    .ak-btn-ghost { padding: 12px 20px; font-size: 13px; }

    .ak-hero-flecha { width: 38px; height: 38px; font-size: 14px; }
    .ak-hero-flecha.izq { left: 6px; }
    .ak-hero-flecha.der { right: 6px; }

    .ak-hero-puntos { margin-top: 14px; }
    .ak-hero-puntos span { width: 7px; height: 7px; }
    .ak-hero-puntos span.activo { width: 22px; }
}

/* Pantallas muy angostas: bajar un escalón para que las frases
   largas no se corten en tres renglones. */
@media (max-width: 400px) {
    .ak-hero-inner { height: 100dvh; }
    .ak-hero-copy { padding: 0 40px; }
    .ak-hero-copy .l1,
    .ak-hero-copy .l3 { font-size: 23px; }
    .ak-hero-copy .l2 { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   LOGO Y ZÓCALO SUPERIOR MÁS GRANDES

   El logo quedaba en 42px en mobile y el zócalo en 32px: el
   wordmark casi no se leía y la barra de contacto pasaba
   desapercibida. Se suben los dos y el header crece para
   acompañar, si no el logo queda apretado contra los bordes.

   Van al final del archivo a propósito: repiten selectores que
   ya existen más arriba con !important, así que sólo pueden
   ganar por orden de documento.
   ══════════════════════════════════════════════════════════════ */

/* ── Zócalo ─────────────────────────────────────────────────── */
:root { --ec-topbar-h: 44px; }

.ec-topbar { font-size: .9rem; }
.ec-topbar-redes a { font-size: 1.2rem; }
.ec-topbar i { font-size: 1rem; }

/* ── Logo ───────────────────────────────────────────────────── */
.ec-logo img { height: 77px !important; }

@media (max-width: 991px) {
    :root { --ec-topbar-h: 40px; }

    .ec-header-inner { height: 78px !important; }
    .ec-logo img     { height: 77px !important; }

    .ec-topbar { font-size: .78rem; }
    .ec-topbar-redes a { font-size: 1.15rem; }
}

@media (max-width: 767.98px) {
    :root { --ec-topbar-h: 40px; }

    .ec-topbar { font-size: .76rem; }
    .ec-topbar-inner { padding: 0 14px; }
    .ec-topbar-redes { gap: 15px; }
    .ec-topbar-redes a { font-size: 1.15rem; }
}

/* Pantallas angostas: el logo baja un escalón para no chocar
   con el carrito y la hamburguesa. */
@media (max-width: 400px) {
    .ec-header-inner { height: 78px !important; }
    .ec-logo img     { height: 77px !important; }
    .ec-topbar { font-size: .71rem; }
}

/* ══════════════════════════════════════════════════════════════
   ORDEN DE CAPAS (z-index)

   El offcanvas de Bootstrap trae z-index 1045 y su fondo 1040.
   Como el zócalo de contacto quedó en 1051 y el header en 1050,
   el carrito se abría POR DEBAJO de los dos y se veía cortado.

   Se reordena todo acá, en un solo lugar, para no volver a pisarse:

     1040  contenido de la página
     1050  header
     1051  zócalo de contacto
     1100  desplegable de categorías del nav
     1200  botón flotante de WhatsApp
     1250  fondo oscuro del carrito / buscador
     1260  carrito y buscador (tapan todo, incluso el zócalo)
   ══════════════════════════════════════════════════════════════ */
.offcanvas,
.offcanvas-end,
.offcanvas-top,
.offcanvas-start,
.offcanvas-bottom { z-index: 1260 !important; }

.offcanvas-backdrop { z-index: 1250 !important; }

/* Con el carrito abierto, el botón de WhatsApp queda flotando
   encima del panel: se esconde mientras dure. */
body.offcanvas-abierto .sommy-wsp-flotante { display: none !important; }

/* ── Botones "Ver catálogo" / "Asesorate" más grandes en mobile ──
   Con 13px de letra y 12px de alto quedaban chicos para tocarlos
   con el pulgar. Se suben a un tamaño cómodo (≈48px de alto, que
   es el mínimo recomendado para un objetivo táctil). */
@media (max-width: 767px) {
    .ak-hero-cta-abajo { gap: 12px; margin-top: 18px; }

    .ak-hero-cta-abajo .ak-btn-light,
    .ak-hero-cta-abajo .ak-btn-ghost {
        padding: 15px 26px;
        font-size: 15px;
        letter-spacing: .04em;
    }
}

@media (max-width: 400px) {
    .ak-hero-cta-abajo { gap: 9px; }
    .ak-hero-cta-abajo .ak-btn-light,
    .ak-hero-cta-abajo .ak-btn-ghost { padding: 14px 18px; font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER OVERLAY (home con video) — AL FINAL para ganar por orden.

   Sin scroll (body sin .is-scrolled): topbar y nav TRANSPARENTES, se ve
   el video del hero detrás, textos e íconos en blanco, logo en blanco.
   Al scrollear (body.is-scrolled): todo vuelve a blanco sólido con los
   colores originales (dejan de aplicar estas reglas por el :not).
   El topbar está FUERA del <header>, por eso se apoya en body.is-scrolled.
   ═══════════════════════════════════════════════════════════════ */
body.has-overlay-header:not(.is-scrolled) .ec-header,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-header-inner,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-actions,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav,
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar .ec-topbar-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    /* Sin borde ni sombra: cualquiera de los dos dibuja la línea que se veía
       como un escalón entre la franja del topbar y la del nav. */
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Textos e íconos en blanco, con sombra para leerse sobre el video */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn span,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn i,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-mobile-toggle,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-mobile-toggle i,
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar * {
    color: #FFFFFF !important;
    /* Doble sombra: se lee tanto sobre partes oscuras como claras del video */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .6) !important;
}

/* Subrayado del menú y hover en el modo transparente */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link::after {
    background: #FFFFFF !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link:hover,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .16) !important;
}

/* Logo en blanco mientras el header es transparente */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-logo img {
    filter: brightness(0) invert(1) !important;
}

/* Velo oscuro degradado en la franja superior (solo modo overlay sin scroll):
   garantiza que el texto blanco del topbar y el nav se lea sobre CUALQUIER
   parte del video. Va por debajo del header (1050) y el topbar (1051) pero por
   encima del video, así el texto queda encima del velo. */
/* Sin velo: cortaba a los 120px y se notaba un escalón de tono entre la
   franja del topbar y la del nav. El contraste del texto lo da su sombra. */

/* ═══════════════════════════════════════════════════════════════
   VIDEO DE FONDO A PANTALLA COMPLETA (home con overlay)

   El video se fija al viewport y cubre TODO desde el pixel 0,0: es
   imposible que quede una franja arriba, sin importar márgenes o
   paddings del hero. El header transparente y el texto van encima;
   las secciones que siguen tienen su fondo y tapan el video al
   scrollear. Solo aplica en la home (body.has-overlay-header).
   ═══════════════════════════════════════════════════════════════ */
/* El hero es el marco del video: ocupa la pantalla completa desde arriba y
   se va con el scroll (el video NO continúa detrás del resto de la página). */
/* La cadena de contenedores del hero, sin padding ni margen: nada de
   franjas blancas alrededor del video. */
body.has-overlay-header .main-content-ecommerce,
body.has-overlay-header .ak-bloque-negro {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.has-overlay-header .ak-hero {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
}
/* Video FIJO al viewport: inset:0 calza EXACTO con el área visible (a
   diferencia de 100vw, que incluye la barra de scroll y dejaba bordes).
   Cubre el topbar, el nav y todo el hero, sin un solo borde.
   Al scrollear queda tapado por las secciones siguientes (z-index 1). */
body.has-overlay-header .ak-hero-media {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    z-index: 0 !important;
}
/* El hero es la ventana transparente por donde se ve el video fijo */
body.has-overlay-header .ak-bloque-negro,
body.has-overlay-header .ak-hero,
body.has-overlay-header .ak-hero .carousel,
body.has-overlay-header .ak-hero-inner,
body.has-overlay-header .ak-hero .carousel-item {
    background: transparent !important;
}
/* El texto y los controles del hero, por encima del video */
body.has-overlay-header .ak-hero-copy,
body.has-overlay-header .ak-hero-veil,
body.has-overlay-header .ak-hero-dots,
body.has-overlay-header .ak-hero-puntos { z-index: 3 !important; }
/* Las flechas van POR ENCIMA de .ak-hero-copy (z:3): el titular activo
   recibe clicks (pointer-events auto) y con el mismo z-index las tapaba,
   por eso no cambiaban de frase al tocarlas. */
body.has-overlay-header .ak-hero-flecha { z-index: 5 !important; }

/* El contenido que sigue al hero va por encima del video fijo (que es z:0),
   así lo tapa al scrollear. El hero (ak-bloque-negro) queda transparente. */
body.has-overlay-header .main-content-ecommerce > *:not(.ak-bloque-negro),
body.has-overlay-header .ec-footer {
    position: relative;
    z-index: 1;
}

/* Los CTA del hero quedaban cortados por el recorte del video: se anclan
   sobre el video, cerca del borde inferior y centrados. */
body.has-overlay-header .ak-hero-cta-abajo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 46px !important;
    margin: 0 !important;
    z-index: 4 !important;
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
}
@media (max-width: 767px) {
    body.has-overlay-header .ak-hero-cta-abajo { bottom: 28px !important; }
}

/* Las secciones que siguen al hero llevan fondo sólido: tapan por completo
   el video fijo (antes eran transparentes y se veía el video detrás). */
body.has-overlay-header .main-content-ecommerce > *:not(.ak-bloque-negro),
body.has-overlay-header .sommy-marcas-seccion,
body.has-overlay-header .ak-reels,
body.has-overlay-header #categorias,
body.has-overlay-header .ec-footer {
    position: relative;
    z-index: 1;
}
body.has-overlay-header .main-content-ecommerce > *:not(.ak-bloque-negro),
body.has-overlay-header .sommy-marcas-seccion,
body.has-overlay-header .ak-reels,
body.has-overlay-header #categorias {
    background: #FFFFFF !important;
}

/* El velo del hero se fija al viewport igual que el video y con oscurecido
   UNIFORME: antes empezaba debajo del topbar y con gradiente, por eso la
   franja de arriba tenía distinta sombra que la de abajo. */
body.has-overlay-header .ak-hero-veil {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .35) !important;
    z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO MINIMALISTA — todo lo que va sobre el video, más delicado:
   tipografía liviana con aire entre letras, botones finos y
   controles discretos. Menos peso visual, más elegancia.
   ═══════════════════════════════════════════════════════════════ */

/* Titulares: de negrita compacta a liviana y espaciada */
body.has-overlay-header .ak-hero-titular .l1,
body.has-overlay-header .ak-hero-copy .l1 {
    font-weight: 300 !important;
    letter-spacing: .10em !important;
    font-size: clamp(26px, 3.4vw, 46px) !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}
body.has-overlay-header .ak-hero-titular .l2,
body.has-overlay-header .ak-hero-copy .l2 {
    font-weight: 300 !important;
    letter-spacing: .06em !important;
    font-size: clamp(13px, 1.15vw, 17px) !important;
    opacity: .88 !important;
    margin: 14px 0 !important;
}
body.has-overlay-header .ak-hero-titular .l3,
body.has-overlay-header .ak-hero-copy .l3 {
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    font-size: clamp(20px, 2.4vw, 34px) !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}
/* Sombra suave y pareja para todo el texto del hero */
body.has-overlay-header .ak-hero-copy * {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35) !important;
}

/* Botones: finos, con borde delgado y letra espaciada */
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-light,
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-ghost {
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    font-size: 12.5px !important;
    text-transform: uppercase !important;
    padding: 13px 32px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: all .25s ease !important;
}
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-light {
    background: rgba(255, 255, 255, .95) !important;
    color: #2A2A2A !important;
    border: 1px solid transparent !important;
}
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-light:hover {
    background: #FFFFFF !important;
    color: #7F2527 !important;
}
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-ghost {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
}
body.has-overlay-header .ak-hero-cta-abajo .ak-btn-ghost:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: #FFFFFF !important;
}
body.has-overlay-header .ak-hero-cta-abajo { gap: 14px !important; }

/* Flechas: más chicas y sutiles */
body.has-overlay-header .ak-hero-flecha {
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition: all .25s ease !important;
}
body.has-overlay-header .ak-hero-flecha:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .75) !important;
    color: #FFFFFF !important;
}

/* Indicadores: puntitos discretos */
body.has-overlay-header .ak-hero-dots [data-bs-target],
body.has-overlay-header .ak-hero-puntos > * {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .45) !important;
    border: none !important;
    opacity: 1 !important;
    transition: all .25s ease !important;
}
body.has-overlay-header .ak-hero-dots [data-bs-target].active,
body.has-overlay-header .ak-hero-puntos > .activo {
    width: 22px !important;
    background: #FFFFFF !important;
}

/* Nav y topbar: letra más fina y espaciada sobre el video */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link {
    font-weight: 400 !important;
    letter-spacing: .13em !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar * {
    font-weight: 300 !important;
    letter-spacing: .02em !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55) !important;
}
/* Los iconos sólidos de Font Awesome viven en el peso 900: el 300 de
   arriba los tiraba a la variante regular, que no trae esos glifos en
   la versión free, y salían como cuadraditos rotos. */
body.has-overlay-header:not(.is-scrolled) .ec-topbar .fas,
body.has-overlay-header:not(.is-scrolled) .ec-topbar .fa-solid {
    font-weight: 900 !important;
}

/* Velo un punto más suave: el video respira y el texto igual se lee */
body.has-overlay-header .ak-hero-veil { background: rgba(0, 0, 0, .30) !important; }

/* Topbar sobre el video: letra más chica y discreta */
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar * {
    font-size: 15.5px !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-topbar-redes a i {
    font-size: 15.5px !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO MOBILE COMPACTO — sobre el video vertical los controles del
   carrusel de frases quedaban desparramados: flechas grandes a los
   bordes, mucho aire entre titular, puntitos y botones. Acá todo el
   grupo se achica y se junta. Va después del bloque minimalista y
   con !important porque pisa reglas que también lo llevan.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Titular: presencia de título pero con poco aire entre líneas,
       para que el grupo siga leyéndose como una sola pieza */
    body.has-overlay-header .ak-hero-titular .l1,
    body.has-overlay-header .ak-hero-copy .l1 { font-size: 26px !important; line-height: 1.2 !important; }
    body.has-overlay-header .ak-hero-titular .l2,
    body.has-overlay-header .ak-hero-copy .l2 { font-size: 14px !important; margin: 7px 0 !important; }
    body.has-overlay-header .ak-hero-titular .l3,
    body.has-overlay-header .ak-hero-copy .l3 { font-size: 19px !important; line-height: 1.25 !important; }

    /* Flechas: más chicas y metidas hacia el centro, a la altura
       del titular, para que el grupo se lea como una sola pieza */
    body.has-overlay-header .ak-hero-flecha {
        width: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
    }
    .ak-hero-flecha.izq { left: 10px; }
    .ak-hero-flecha.der { right: 10px; }

    /* Puntitos pegados al titular */
    body.has-overlay-header .ak-hero-puntos { margin-top: 10px !important; }
    body.has-overlay-header .ak-hero-puntos > * { width: 6px !important; height: 6px !important; }
    body.has-overlay-header .ak-hero-puntos > .activo { width: 18px !important; }

    /* Los <br> que separan el hero del header en el layout clásico acá
       solo corren la sección hacia abajo: el borde inferior (donde se
       anclan los botones) caía fuera de la pantalla y los cortaba */
    body.has-overlay-header .ak-bloque-negro > br { display: none !important; }

    /* Botones: finos y juntos, bien abajo pero sin cortarse */
    body.has-overlay-header .ak-hero-cta-abajo {
        bottom: 16px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        max-width: calc(100% - 24px) !important;
    }
    body.has-overlay-header .ak-hero-cta-abajo .ak-btn-light,
    body.has-overlay-header .ak-hero-cta-abajo .ak-btn-ghost {
        /* Lo justo para que la fila entera despeje la burbuja de
           WhatsApp que flota abajo a la derecha */
        padding: 10px 16px !important;
        font-size: 11.5px !important;
        letter-spacing: .07em !important;
        white-space: nowrap !important;
    }
}

/* Pantalla de carga: blanco sólido cubriendo TODA la ventana, por encima
   de todo (header, topbar y el video del hero). */
.preloader-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #FFFFFF !important;
    opacity: 1;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAV SIEMPRE SÓLIDO (17/08/2026)

   Antes, en la home con el video de fondo (body.has-overlay-header),
   el header y el topbar arrancaban TRANSPARENTES hasta scrollear.
   Se pidió que el nav no se vea transparente en ningún momento: acá
   se anula ese estado dejándolo siempre con fondo sólido y los
   colores normales, sin importar el scroll. Va al final para ganar
   por orden a las reglas del overlay.
   ═══════════════════════════════════════════════════════════════ */
body.has-overlay-header:not(.is-scrolled) .ec-header,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-header-inner,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-actions,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-header {
    border-bottom: 1px solid #ECECEC !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .07) !important;
}

/* Franja superior (topbar) también sólida, con su tono claro */
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar .ec-topbar-inner {
    background: #F4F1EF !important;
    background-color: #F4F1EF !important;
    background-image: none !important;
    border-bottom: 1px solid #E6E0DC !important;
    box-shadow: none !important;
}

/* Textos e íconos con sus colores normales (no blancos) y sin la
   sombra que se usaba para leerlos sobre el video */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link {
    color: #1A1A1A !important;
    text-shadow: none !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link:hover,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link.is-active,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link.is-active * {
    color: #DF1F1C !important;
    text-shadow: none !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn span,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-action-btn i,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-mobile-toggle,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-mobile-toggle i {
    color: #1A1A1A !important;
    text-shadow: none !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-topbar,
body.has-overlay-header:not(.is-scrolled) .ec-topbar * {
    color: #5B5B5B !important;
    text-shadow: none !important;
}
body.has-overlay-header:not(.is-scrolled) .ec-topbar i,
body.has-overlay-header:not(.is-scrolled) .ec-topbar-dir strong {
    color: #7F2527 !important;
}

/* Subrayado del menú en su color rojo, no blanco */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link::after,
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-nav .ec-nav-link.is-active::after {
    background: #DF1F1C !important;
}

/* Logo sin el filtro que lo pintaba de blanco (se ve tal cual la imagen) */
body.has-overlay-header:not(.is-scrolled) .ec-header .ec-logo img {
    filter: none !important;
}