/* ==========================================================================
   SOUL SPA — Rediseño visual 2026
   Hoja de sobrescritura: se carga después de styles.min.css, responsive.css
   y color.php. No altera estructura HTML ni funcionalidades.
   Paleta de marca (4 colores oficiales del cliente):
     1. #241B17  Principal  (marrón oscuro casi negro — estructura, hovers, enlaces)
     2. #F3EBE0  Secundario (crema cálido — insignias y detalles sobre fondos oscuros)
     3. #F5F5F5  Neutro     (blanco hueso — fondo base del sitio y secciones claras)
     4. #4E0000  Acento     (vino/burdeos — SOLO botones/CTAs importantes)
   ========================================================================== */

:root {
    --eq-primary: #241B17;
    --eq-primary-dark: #16100d;
    --eq-primary-soft: #F3EBE0;
    --eq-accent: #4E0000;
    --eq-accent-dark: #350000;
    --eq-accent-soft: #F3EBE0;
    --eq-secondary: #F3EBE0;
    --eq-black: #0e1725;
    --eq-gray-900: #241B17;
    --eq-gray-700: #4a3f39;
    --eq-gray-500: #7a6f68;
    --eq-gray-300: #d8c9ae;
    --eq-gray-100: #e7dac1;
    --eq-gray-50: #F3EBE0;
    --eq-white: #ffffff;
    --eq-radius-sm: 10px;
    --eq-radius: 12px;
    --eq-radius-lg: 16px;
    --eq-shadow-sm: 0 1px 3px rgba(20, 24, 29, .06), 0 1px 2px rgba(20, 24, 29, .04);
    --eq-shadow: 0 8px 24px rgba(20, 24, 29, .08);
    --eq-shadow-lg: 0 16px 40px rgba(20, 24, 29, .14);
    --eq-shadow-primary: 0 8px 20px rgba(27, 42, 65, .22);
    --eq-shadow-accent: 0 8px 20px rgba(200, 16, 46, .25);
    --eq-transition: all .3s cubic-bezier(.25, .65, .35, 1);
}

/* ==========================================================================
   1. TIPOGRAFÍA GLOBAL — Raleway (elegante y delgada)
   ========================================================================== */

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea,
.btn, .navi-link, .product-title, .widget-title, .section-title h2 {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif !important;
}

/* Refuerzo: el header trae markup/estilos heredados del script original
   (nav, botones, dropdowns) que en algunos casos no quedaban cubiertos por
   la lista de arriba — se fuerza Raleway en TODO lo que hay dentro del header,
   EXCEPTO los <i> (ahí van los íconos de Font Awesome / feather, que
   necesitan su propia fuente de glifos o dejan de verse). */
.site-header,
.site-header *:not(i) {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif !important;
}

/* Título principal del banner: usa la misma tipografía de marca que el resto del sitio */
.eq-hero-title {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
}

html {
    overflow-x: hidden;
    /* El header quedó "position: fixed" y flota encima del contenido; sin esto,
       cualquier salto a un ancla dentro de la página (ej. "Leer más" -> #details)
       deja esa sección tapada justo debajo del header. */
    scroll-padding-top: 110px;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 80px;
    }
}

body {
    color: var(--eq-gray-700);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    background: var(--eq-gray-50);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--eq-gray-900);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.25;
}

a {
    transition: var(--eq-transition);
}

::selection {
    background: var(--eq-primary);
    color: #fff;
}

/* Scrollbar sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--eq-gray-100); }
::-webkit-scrollbar-thumb { background: #c2c7cf; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--eq-primary); }

/* ==========================================================================
   2. PRELOADER
   ========================================================================== */

#preloader {
    background: var(--eq-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

#preloader img {
    max-width: 110px;
}

/* Loader tipo mandala (reemplaza el extintor animado, acorde a un spa de bienestar) */
.eq-spa-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.eq-spa-mandala {
    width: 84px;
    height: 84px;
}

.eq-spa-ring {
    fill: none;
    stroke: var(--eq-accent);
    stroke-width: 1.5;
    opacity: .55;
    transform-origin: 60px 60px;
}

.eq-spa-ring-1 {
    animation: eqSpaPulse 2.4s ease-in-out infinite;
}

.eq-spa-ring-2 {
    stroke: var(--eq-primary);
    animation: eqSpaPulse 2.4s ease-in-out infinite .4s;
}

.eq-spa-dot {
    fill: var(--eq-accent);
    animation: eqSpaBreathe 2.4s ease-in-out infinite;
    transform-origin: 60px 60px;
}

.eq-spa-wordmark {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eq-gray-500);
}

@keyframes eqSpaPulse {
    0%, 100% { transform: scale(.85); opacity: .3; }
    50% { transform: scale(1); opacity: .8; }
}

@keyframes eqSpaBreathe {
    0%, 100% { transform: scale(.9); opacity: .7; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .eq-spa-ring,
    .eq-spa-dot {
        animation: none !important;
    }
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

/* --- 3.1 Barra superior (roja, generada por color.php) --- */
.menu-top-area {
    background: linear-gradient(90deg, var(--eq-primary-dark) 0%, var(--eq-primary) 100%) !important;
    padding: 3px 0;
}

.menu-top-area a.track-order-link,
.menu-top-area .t-h-dropdown .main-link,
.menu-top-area .login-register a,
.menu-top-area .t-h-dropdown .main-link i {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
}

.menu-top-area a.track-order-link:hover,
.menu-top-area .t-h-dropdown:hover .main-link,
.menu-top-area .login-register a:hover {
    color: var(--eq-secondary) !important;
}

/* Dropdowns del header */
.t-h-dropdown .t-h-dropdown-menu {
    border-top: 3px solid var(--eq-primary);
    border-radius: 0 0 var(--eq-radius-sm) var(--eq-radius-sm);
    box-shadow: var(--eq-shadow-lg);
    overflow: hidden;
}

.t-h-dropdown .t-h-dropdown-menu a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--eq-gray-700);
    transition: var(--eq-transition);
}

.t-h-dropdown .t-h-dropdown-menu a:hover {
    background: var(--eq-primary-soft);
    padding-left: 22px;
}

/* --- 3.2 Header "isla" de doble fila: flota separado del borde, una sola
   tarjeta redondeada que agrupa la franja de contacto (fila 1, oscura) y la
   barra principal (fila 2, clara con blur) --- */
.eq-header-island {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 1000;
    width: calc(100% - 32px);
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: none;
    transition: var(--eq-transition);
}

.navbar-stuck.eq-header-island,
.navbar-stuck .eq-header-island {
    background: var(--eq-white);
    box-shadow: 0 10px 32px rgba(36, 27, 23, .16);
}

/* Páginas SIN hero (todo menos el inicio): la isla nunca es transparente,
   no hay foto oscura detrás que sostenga texto blanco */
body:not(.eq-home) .eq-header-island,
body:not(.eq-home) .eq-header-island .topbar {
    background: var(--eq-white) !important;
}

/* El resto del sitio empuja el contenido hacia abajo para no quedar tapado
   por el header, que ahora está fuera del flujo (position:fixed). En el
   inicio NO se aplica: el hero está pensado para llegar hasta arriba y el
   header flota transparente encima de la foto.
   !important es necesario: el script de scroll heredado del tema (pensado
   para un header que NO era fixed) le pone un padding-top inline al body
   en cada scroll (a veces 0), y eso pisa cualquier regla normal de CSS. */
body:not(.eq-home) {
    padding-top: 96px !important;
}

@media (max-width: 991.98px) {
    body:not(.eq-home) {
        padding-top: 66px !important;
    }
}

/* En el inicio el mismo script también mete padding-top inline al hacer
   scroll; se anula para que el hero siga manejando su propio espacio */
body.eq-home {
    padding-top: 0 !important;
}

.eq-header-island .eq-top-strip {
    padding: 7px 22px;
    background: rgba(36, 27, 23, .92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.eq-header-island .topbar {
    padding: 6px 14px;
    background: transparent;
    border-bottom: none;
    transition: var(--eq-transition);
}

.navbar-stuck .eq-header-island .topbar,
body:not(.eq-home) .eq-header-island .topbar {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Header transparente sobre la foto del hero: textos claros hasta que se
   haga scroll (.navbar-stuck) o en páginas sin hero (forzado más abajo) */
.eq-home .eq-header-island:not(.navbar-stuck) .eq-inline-nav a,
.eq-home .eq-header-island:not(.navbar-stuck) .eq-header-phone,
.eq-home .eq-header-island:not(.navbar-stuck) .eq-wordmark-text,
.eq-home .eq-header-island:not(.navbar-stuck) .mobile-menu-toggle {
    color: #fff;
}

.eq-home .eq-header-island:not(.navbar-stuck) .eq-header-phone i {
    color: var(--eq-secondary);
}

.eq-home .eq-header-island:not(.navbar-stuck) .eq-wordmark-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.eq-home .eq-header-island:not(.navbar-stuck) .eq-inline-nav a::after {
    background: #fff;
}

.eq-home .eq-header-island:not(.navbar-stuck) .toolbar-item i,
.eq-home .eq-header-island:not(.navbar-stuck) .toolbar-item .text-label {
    color: #fff !important;
}

.eq-header-island .topbar .container {
    max-width: none;
    padding: 0 10px;
}

/* Estado "pegado" del script base: se neutraliza el fixed/position que
   traía de fábrica, la isla ya se mantiene arriba sola vía position:sticky */
.navbar-stuck .topbar {
    position: static;
    width: auto;
}

.navbar-stuck.eq-header-island,
.navbar-stuck .eq-header-island {
    box-shadow: 0 16px 38px rgba(36, 27, 23, .2);
}

.navbar-stuck .eq-header-island .topbar {
    background: var(--eq-white);
}

.eq-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    color: var(--eq-gray-700);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--eq-transition);
}

.eq-header-phone i {
    font-size: 14px;
    color: var(--eq-accent);
}

.eq-header-phone:hover {
    color: var(--eq-primary);
}

@media (max-width: 991.98px) {
    .eq-header-island {
        top: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }
}

/* --- 3.2 Zona del logo y buscador --- */
.topbar {
    background: var(--eq-white);
    border-bottom: 1px solid var(--eq-gray-100);
    padding: 2px 0;
}

/* El tema fija width:100% sobre el logo; se anula para conservar la proporción */
.site-header .site-branding .site-logo > img {
    width: auto !important;
    height: 44px !important;
    max-height: none;
    object-fit: contain;
    transition: var(--eq-transition);
}

/* El logo "sobresale" por encima/debajo de la fila sin aumentar la altura del header:
   92px de alto real, compensado con margen negativo para que la barra mida lo mismo que antes (44px) */
.eq-header-compact .site-branding .site-logo > img {
    height: 92px !important;
    margin: -24px 0;
}

.site-logo:hover > img {
    transform: scale(1.04);
}

/* Logo real (negro) del cliente: se invierte a blanco cuando el header
   flota transparente sobre la foto del hero (inicio, antes de scrollear) */
.eq-home .eq-header-island:not(.navbar-stuck) .eq-real-logo {
    filter: brightness(0) invert(1);
}

/* En el footer (fondo oscuro) el logo siempre va en blanco */
.eq-footer-logo-img {
    filter: brightness(0) invert(1);
}

/* --- Navegación en línea junto al logo (Inicio / Servicios / Nosotros / Contacto) ---
   Sustituye a la antigua barra .eq-main-nav (fila aparte, look de tienda).
   Al ir en la misma fila que el logo, el header queda en dos franjas en vez
   de tres: más minimalista. */
.eq-inline-nav {
    align-items: center;
    gap: 30px;
    margin: 0 auto 0 40px;
}

.eq-inline-nav a {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--eq-gray-700);
    text-transform: none;
    transition: var(--eq-transition);
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
}

.eq-inline-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--eq-accent);
    transition: var(--eq-transition);
}

.eq-inline-nav a:hover,
.eq-inline-nav a.active {
    color: var(--eq-primary);
}

.eq-inline-nav a:hover::after,
.eq-inline-nav a.active::after {
    right: 0;
}

/* Buscador tipo píldora. overflow:visible es necesario para que el
   panel de sugerencias (posicionado absolute más abajo) no quede
   recortado por las esquinas redondeadas de este contenedor. */
.site-header .search-box-wrap .search-box {
    background: var(--eq-gray-100);
    border: 2px solid transparent;
    border-radius: var(--eq-radius);
    overflow: visible;
    transition: var(--eq-transition);
}

.site-header .search-box-wrap .search-box:focus-within {
    background: var(--eq-white);
    border-color: var(--eq-primary);
    box-shadow: 0 0 0 4px rgba(27, 42, 65, .08);
}

.site-header .search-box-wrap .search-box .categoris,
.site-header .search-box-wrap .search-box .form-control {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 14px;
}

.site-header .search-box-wrap .input-group .input-group-btn button {
    background: var(--eq-primary) !important;
    color: #fff !important;
    border: 0;
    border-radius: var(--eq-radius-sm);
    margin: 4px;
    width: 44px;
    transition: var(--eq-transition);
}

.site-header .search-box-wrap .input-group .input-group-btn button:hover {
    background: var(--eq-primary-dark) !important;
}

/* Sugerencias de búsqueda — panel flotante tipo Falabella/Amazon */
.site-header .search-box-wrap .input-group {
    position: relative;
}

.site-header .search-box-wrap .input-group .serch-result {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--eq-white);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    border: 1px solid var(--eq-gray-100);
    overflow: hidden;
    z-index: 1050;
}

.eq-search-suggest {
    max-height: 400px;
    overflow-y: auto;
    padding: 6px;
}

.eq-search-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--eq-radius-sm);
    transition: var(--eq-transition);
}

.eq-search-suggest-item:hover {
    background: var(--eq-gray-50);
}

.eq-search-suggest-thumb {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-sm);
    overflow: hidden;
}

.eq-search-suggest-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.eq-search-suggest-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.eq-search-suggest-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eq-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eq-search-suggest-cat {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--eq-gray-500);
}

.eq-search-suggest-item i {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--eq-gray-300);
    transition: var(--eq-transition);
}

.eq-search-suggest-item:hover i {
    color: var(--eq-primary);
    transform: translateX(2px);
}

.eq-search-suggest-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--eq-gray-500);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.eq-search-suggest-empty i {
    font-size: 22px;
    color: var(--eq-gray-300);
}

.site-header .search-box-wrap .input-group .serch-result .bottom-area {
    border-top: 1px solid var(--eq-gray-100);
}

.site-header .search-box-wrap .input-group .serch-result .bottom-area a {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--eq-primary);
    transition: var(--eq-transition);
}

.site-header .search-box-wrap .input-group .serch-result .bottom-area a:hover {
    background: var(--eq-primary-soft);
}

/* Iconos de herramientas: comparar, wishlist, carrito */
.site-header .toolbar .toolbar-item > a > div {
    transition: var(--eq-transition);
}

.site-header .toolbar .toolbar-item > a > div > i,
.site-header .toolbar .toolbar-item .compare-icon i,
.site-header .toolbar .toolbar-item .cart-icon i {
    color: var(--eq-gray-900);
    transition: var(--eq-transition);
}

.site-header .toolbar .toolbar-item > a:hover > div > i,
.site-header .toolbar .toolbar-item > a:hover .compare-icon i,
.site-header .toolbar .toolbar-item > a:hover .cart-icon i {
    color: var(--eq-primary);
    transform: translateY(-2px);
}

.site-header .toolbar .toolbar-item .text-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--eq-gray-500);
}

.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label,
.site-header .toolbar .toolbar-item > a > div > .cart-icon > .count-label {
    background: var(--eq-secondary) !important;
    color: var(--eq-black) !important;
    font-weight: 700;
    box-shadow: var(--eq-shadow-sm);
}

/* Mini-carrito desplegable */
.toolbar-dropdown {
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    border: 1px solid var(--eq-gray-100);
}

/* --- 3.3 Barra de navegación principal --- */
.site-header .navbar {
    background: var(--eq-white);
    box-shadow: 0 4px 16px rgba(20, 24, 29, .06);
}

.site-header .site-menu > ul > li > a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--eq-gray-900);
    position: relative;
}

.site-header .site-menu > ul > li > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--eq-secondary);
    transform: translateX(-50%);
    transition: var(--eq-transition);
}

.site-header .site-menu > ul > li:hover > a::after,
.site-header .site-menu > ul > li.active > a::after {
    width: 55%;
}

/* Panel de categorías (columna izquierda).
   Ojo: .category-list es un desplegable posicionado en absolute,
   no usar overflow:hidden en el contenedor o queda recortado. */
.left-category-area {
    position: relative;
    border-radius: var(--eq-radius);
    overflow: visible;
}

.left-category-area .category-header {
    background: var(--eq-primary) !important;
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-sm);
    cursor: pointer;
    transition: var(--eq-transition);
}

.left-category-area .category-header:hover {
    background: var(--eq-primary-dark) !important;
}

.left-category-area .category-list {
    border-radius: var(--eq-radius) !important;
    border: 1px solid var(--eq-gray-100);
    box-shadow: var(--eq-shadow-lg);
    z-index: 1050;
    margin-top: 6px;
}

.left-category-area .category-header h4 {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Ítems del desplegable de categorías */
.left-category-area .category-list .navi-link {
    align-items: center;
    padding: 9px 16px;
    font-size: 14px;
    transition: var(--eq-transition);
}

.left-category-area .category-list .navi-link img {
    height: 34px;
    width: 34px;
    border-radius: 9px;
    border: 1px solid var(--eq-gray-100);
    background: var(--eq-gray-50);
    margin-right: 12px;
}

.left-category-area .category-list .navi-link span.text-gray-dark {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .01em;
    color: var(--eq-gray-700);
    align-self: center;
    transition: var(--eq-transition);
}

.left-category-area .category-list .navi-link i.icon-chevron-right {
    margin-left: auto;
    align-self: center;
    font-size: 13px;
    color: var(--eq-gray-300);
    transition: var(--eq-transition);
}

.left-category-area .category-list .navi-link:hover {
    background: var(--eq-primary-soft);
}

.left-category-area .category-list .navi-link:hover span.text-gray-dark {
    color: var(--eq-primary) !important;
}

.left-category-area .category-list .navi-link:hover i.icon-chevron-right {
    color: var(--eq-primary);
    transform: translateX(3px);
}

/* Submenú flotante (subcategorías y categorías hijas) */
.left-category-area .category-list .sub-c-box {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    padding: 8px 0;
}

.left-category-area .category-list .sub-c-box .title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eq-gray-700);
    line-height: 1.45;
    padding: 9px 18px;
}

.left-category-area .category-list .sub-c-box .title:hover {
    background: var(--eq-primary-soft);
}

.left-category-area .category-list .sub-c-box .child-category a {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--eq-gray-500);
    padding: 6px 18px;
    transition: var(--eq-transition);
}

.left-category-area .category-list .sub-c-box .child-category a:hover {
    color: var(--eq-primary) !important;
    background: var(--eq-primary-soft);
    padding-left: 23px;
}

/* Enlace final "Todas las Categorías" */
.left-category-area .category-list .view-all-category {
    border-top: 1px solid var(--eq-gray-100);
    margin-top: 6px;
}

.left-category-area .category-list .view-all-category span.text-gray-dark {
    color: var(--eq-primary) !important;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Menú móvil deslizable */
.mobile-menu {
    border-radius: 0 var(--eq-radius-lg) var(--eq-radius-lg) 0;
}

.mm-heading-area {
    background: var(--eq-primary) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 15px !important;
}

.eq-mm-logo {
    display: flex;
    align-items: center;
}

.eq-mm-logo img {
    height: 52px;
    width: auto;
    max-width: 100%;
    /* Logo negro invertido a blanco para que se lea sobre el fondo oscuro del menú */
    filter: brightness(0) invert(1);
}

.eq-mm-logo .eq-wordmark-text {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

.eq-mm-social {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: var(--eq-primary);
}

.eq-mm-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--eq-transition);
}

.eq-mm-social a:hover {
    background: var(--eq-accent);
}

.mobile-menu .nav-tabs .nav-item span {
    font-weight: 600;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */

.btn {
    background: var(--eq-primary) !important;
    border: 0;
    border-radius: var(--eq-radius) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    padding: 12px 26px;
    transition: var(--eq-transition) !important;
    box-shadow: none;
}

.btn:hover,
.btn:focus {
    background: var(--eq-primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--eq-shadow-primary);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--eq-primary) !important;
}

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

.btn-outline-primary {
    border: 2px solid var(--eq-primary);
    background: transparent !important;
    color: var(--eq-primary) !important;
    border-radius: var(--eq-radius) !important;
}

.btn-outline-primary:hover {
    background: var(--eq-primary) !important;
    color: #fff !important;
    box-shadow: var(--eq-shadow-primary);
}

.btn-sm, .btn-group-sm > .btn {
    padding: 8px 18px;
    border-radius: var(--eq-radius-sm) !important;
}

/* ==========================================================================
   5. HERO / SLIDER PRINCIPAL
   ========================================================================== */

.slider-area-wrapper {
    padding-top: 22px;
}

.hero-slider,
.hero-slider .owl-carousel .item {
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
}

.hero-slider .owl-carousel .item {
    background-size: cover !important;
    background-position: center !important;
}

.hero-slider .item .item-inner .title {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.hero-slider .item .item-inner .subtitle {
    font-weight: 400;
    opacity: .92;
}

/* Flechas del slider */
.hero-slider .owl-carousel .owl-nav div {
    background: rgba(255, 255, 255, .92) !important;
    color: var(--eq-gray-900) !important;
    border-radius: 50%;
    box-shadow: var(--eq-shadow);
    transition: var(--eq-transition);
}

.hero-slider .owl-carousel .owl-nav div:hover {
    background: var(--eq-primary) !important;
    color: #fff !important;
}

/* Puntos del slider */
.hero-slider > .owl-carousel.dots-inside .owl-dots .owl-dot {
    background-color: rgba(255, 255, 255, .55) !important;
    border-radius: 8px;
    transition: var(--eq-transition);
}

.hero-slider > .owl-carousel.dots-inside .owl-dots .owl-dot.active {
    background-color: var(--eq-secondary) !important;
    width: 26px;
}

/* Banners laterales del hero */
.sright-image {
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    display: block;
    position: relative;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.sright-image img {
    transition: transform .6s cubic-bezier(.25, .65, .35, 1);
}

.sright-image:hover {
    box-shadow: var(--eq-shadow-lg);
}

.sright-image:hover img {
    transform: scale(1.06);
}

.sright-image .inner-content h4 {
    font-weight: 700;
}

/* ==========================================================================
   6. SECCIÓN DE SERVICIOS (beneficios bajo el hero)
   ========================================================================== */

.service-section {
    padding: 40px 0 10px;
}

.single-service {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-sm);
    padding: 22px 18px;
    height: 100%;
    transition: var(--eq-transition);
}

.single-service:hover {
    transform: translateY(-5px);
    box-shadow: var(--eq-shadow);
    border-color: rgba(27, 42, 65, .18);
}

.single-service img {
    max-height: 48px;
    transition: var(--eq-transition);
}

.single-service:hover img {
    transform: scale(1.1);
}

.single-service .content h6 {
    font-weight: 700;
    font-size: 15px;
}

/* ==========================================================================
   7. TÍTULOS DE SECCIÓN
   ========================================================================== */

.section-title {
    margin-bottom: 26px;
}

.section-title h2 {
    font-weight: 800;
    letter-spacing: -.02em;
    position: relative;
}

.section-title h2::before {
    background: var(--eq-primary) !important;
    border-radius: 4px;
    width: 42px;
    height: 4px;
}

/* Pestañas de filtrado dentro de títulos */
.section-title .links a {
    font-weight: 600;
    font-size: 14px;
    color: var(--eq-gray-500);
    border-radius: 999px;
    padding: 7px 16px;
    transition: var(--eq-transition);
}

.section-title .links a::before {
    display: none !important;
}

.section-title .links a:hover,
.section-title .links a.active {
    color: var(--eq-primary) !important;
    background: var(--eq-primary-soft);
}

.section-title .right_link {
    font-weight: 600;
    color: var(--eq-gray-700);
}

.section-title .right_link:hover {
    color: var(--eq-primary) !important;
}

/* ==========================================================================
   8. TARJETAS DE PRODUCTO
   ========================================================================== */

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100) !important;
    border-radius: var(--eq-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(27, 42, 65, .22) !important;
    box-shadow: var(--eq-shadow-lg);
}

.product-card .product-thumb {
    background: var(--eq-white);
    overflow: hidden;
}

.product-card .product-thumb img {
    transition: transform .55s cubic-bezier(.25, .65, .35, 1);
}

.product-card:hover .product-thumb img {
    transform: scale(1.07);
}

/* Insignias: agotado / descuento */
.product-badge {
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 12px;
    box-shadow: var(--eq-shadow-sm);
    border: 0 !important;
}

.product-badge.product-badge2,
.product-badge.bg-info {
    background: var(--eq-secondary) !important;
    color: var(--eq-black) !important;
}

.product-badge.bg-secondary {
    background: var(--eq-gray-900) !important;
    color: #fff !important;
}

/* Botones flotantes: wishlist, comparar, carrito */
.product-card .product-button-group .product-button {
    background: var(--eq-white) !important;
    color: var(--eq-gray-900) !important;
    border-radius: 50% !important;
    box-shadow: var(--eq-shadow);
    transition: var(--eq-transition) !important;
}

.product-card .product-button-group .product-button:hover {
    background: var(--eq-primary) !important;
    color: #fff !important;
    transform: translateY(-3px);
}

/* Cuerpo de la tarjeta: columna flexible para que el título de cualquier
   largo no descuadre la posición de las estrellas ni del botón inferior */
.product-card .product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.product-card .product-category > a {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--eq-gray-500);
}

/* Alto fijo reservado para 2 líneas: si el nombre es corto queda con
   espacio en blanco debajo, si es largo se recorta con puntos
   suspensivos — nunca empuja a las estrellas ni al botón de más abajo */
.product-card .product-title {
    font-size: 15px;
    min-height: 42px;
    margin-bottom: 6px;
}

.product-card .product-title > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    color: var(--eq-gray-900);
    line-height: 1.4;
}

.product-card .rating-stars {
    margin-top: 0;
}

.product-card .eq-card-quote-btn {
    margin-top: auto;
}

.product-card .product-title > a:hover {
    color: var(--eq-primary) !important;
}

.product-card .product-price {
    color: var(--eq-primary) !important;
    font-weight: 800;
    font-size: 17px;
}

.product-card .product-price del {
    color: var(--eq-gray-300);
    font-weight: 500;
    font-size: 13.5px;
}

/* Estrellas de valoración */
.rating-stars i,
.rating-stars .fa-star {
    color: var(--eq-gray-300);
    font-size: 12.5px;
}

.rating-stars i.filled,
.rating-stars .fa-star.filled {
    color: #f5b301;
}

/* Cuenta regresiva (ofertas flash / campañas) */
.product-card .countdown span,
.deal-of-day-section .countdown,
.details-page-top-right-content .countdown span {
    background: var(--eq-primary) !important;
    border-radius: 8px !important;
    font-weight: 700;
}

.countdown.countdown-alt span {
    border-radius: 8px;
}

/* ==========================================================================
   9. BANNERS PROMOCIONALES
   ========================================================================== */

.genius-banner {
    border-radius: var(--eq-radius-lg) !important;
    overflow: hidden;
    display: block;
    position: relative;
    border: 0 !important;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.genius-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 24, 29, .28) 0%, transparent 55%);
    opacity: 0;
    transition: var(--eq-transition);
    pointer-events: none;
}

.genius-banner:hover {
    box-shadow: var(--eq-shadow-lg);
    transform: translateY(-4px);
}

.genius-banner:hover::after {
    opacity: 1;
}

.genius-banner img {
    transition: transform .6s cubic-bezier(.25, .65, .35, 1);
    width: 100%;
}

.genius-banner:hover img {
    transform: scale(1.06);
}

.genius-banner .inner-content {
    z-index: 2;
}

.genius-banner .inner-content p {
    color: var(--eq-secondary) !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

.genius-banner .inner-content h4 {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ==========================================================================
   10. CARRUSELES (flechas y puntos genéricos)
   ========================================================================== */

.owl-carousel .owl-nav div {
    border-radius: 50% !important;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition) !important;
}

.owl-carousel .owl-nav div:hover {
    box-shadow: var(--eq-shadow-primary);
}

.brand-slider .slider-item a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 150px;
    border-radius: var(--eq-radius) !important;
    border: 1px solid var(--eq-gray-100) !important;
    background: var(--eq-white);
    padding: 18px;
    filter: grayscale(.35);
    opacity: .85;
    transition: var(--eq-transition);
}

.brand-slider .slider-item a img {
    height: auto !important;
    max-height: 100px;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
}

.brand-slider .slider-item a:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: rgba(27, 42, 65, .2) !important;
    box-shadow: var(--eq-shadow);
}

/* ==========================================================================
   11. BLOG
   ========================================================================== */

.blog-post {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    box-shadow: var(--eq-shadow-sm);
    display: block;
    transition: var(--eq-transition);
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--eq-shadow-lg);
}

.blog-post .post-thumb {
    overflow: hidden;
}

.blog-post .post-thumb img {
    transition: transform .6s cubic-bezier(.25, .65, .35, 1);
}

.blog-post:hover .post-thumb img {
    transform: scale(1.06);
}

.blog-post .post-body {
    padding: 20px 22px 22px;
}

.post-title {
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.4;
}

.blog-post:hover .post-title {
    color: var(--eq-primary);
}

.post-meta > li,
.post-meta > li > a {
    font-size: 12.5px;
    color: var(--eq-gray-500);
}

.post-meta > li > i {
    color: var(--eq-primary);
}

/* ==========================================================================
   12. FORMULARIOS
   ========================================================================== */

.form-control {
    border: 1.5px solid var(--eq-gray-300);
    border-radius: var(--eq-radius-sm) !important;
    padding: 11px 16px;
    font-size: 14px;
    color: var(--eq-gray-900);
    transition: var(--eq-transition);
    box-shadow: none;
}

.form-control::placeholder {
    color: #9aa1ab;
}

.form-control:focus {
    border-color: var(--eq-primary) !important;
    box-shadow: 0 0 0 4px rgba(27, 42, 65, .09) !important;
}

textarea.form-control {
    border-radius: var(--eq-radius) !important;
}

label, .form-label {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--eq-gray-700);
}

select.form-control,
.custom-select {
    border-radius: var(--eq-radius-sm) !important;
}

/* Checkbox / radio personalizados */
.custom-control .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--eq-primary) !important;
    background-color: var(--eq-primary) !important;
}

/* ==========================================================================
   13. PÁGINAS INTERNAS: catálogo, producto, checkout, cuenta
   ========================================================================== */

/* Migas de pan */
.breadcrumbs > li,
.breadcrumbs > li > a {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

.breadcrumbs > li {
    padding: 0 !important;
}

.breadcrumbs > li > a:hover {
    color: var(--eq-primary) !important;
}

/* Sidebar de filtros / widgets */
.widget {
    border-radius: var(--eq-radius);
}

.widget-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

.widget-title::after {
    background-color: var(--eq-primary) !important;
    border-radius: 3px;
    height: 3px;
}

.widget-categories ul > li > a,
.widget-links ul > li > a {
    font-size: 14px;
    transition: var(--eq-transition);
}

/* Paginación */
.pagination li a,
.pagination li span {
    border-radius: var(--eq-radius-sm) !important;
    font-weight: 600;
    transition: var(--eq-transition);
}

.pagination li.active span,
.pagination li.active a,
.pagination li a:hover,
.pagination li span:hover {
    background: var(--eq-primary) !important;
    box-shadow: var(--eq-shadow-primary);
}

/* Vista de tienda (grid/list) */
.shop-view > a {
    border-radius: 8px !important;
    transition: var(--eq-transition);
}

/* Pestañas (descripción producto, etc.) */
.nav-tabs .nav-link {
    font-weight: 600;
    border-radius: var(--eq-radius-sm) var(--eq-radius-sm) 0 0 !important;
    transition: var(--eq-transition);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: var(--eq-primary) !important;
    color: #fff !important;
    border-radius: var(--eq-radius-sm) !important;
}

/* Galería del producto */
.product-gallery {
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
}

.product-gallery .product-thumbnails > li > a {
    border-radius: var(--eq-radius-sm) !important;
    overflow: hidden;
    transition: var(--eq-transition);
}

.product-gallery .product-thumbnails > li.active > a {
    border-color: var(--eq-primary) !important;
    box-shadow: var(--eq-shadow-sm);
}

/* Precio en página de detalle */
.details-page-top-right-content .price-area .main-price {
    font-weight: 800;
}

/* Tablas: carrito, wishlist, pedidos, comparador */
.table,
.shopping-cart,
.wishlist-table,
.order-table,
.comparison-table {
    border-radius: var(--eq-radius);
    overflow: hidden;
}

.table thead th,
.shopping-cart thead th,
.wishlist-table thead th,
.order-table thead th {
    background: var(--eq-gray-900) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 0 !important;
}

.table tbody td,
.shopping-cart tbody td {
    vertical-align: middle;
}

/* Pasos del checkout */
.steps .step {
    border-radius: var(--eq-radius-sm);
    transition: var(--eq-transition);
}

.steps .step.active {
    border-color: var(--eq-primary) !important;
}

.steps .step.active .step-title,
.steps .step.active > i {
    color: var(--eq-primary) !important;
    font-weight: 700;
}

/* Tarjetas genéricas / cajas FAQ */
.card {
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius) !important;
    box-shadow: var(--eq-shadow-sm);
}

.faq-box {
    border-radius: var(--eq-radius) !important;
    border: 1px solid var(--eq-gray-100);
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.faq-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--eq-shadow);
}

/* Panel de usuario */
.list-group-item {
    border-radius: 0 !important;
    font-weight: 500;
    transition: var(--eq-transition);
}

.list-group {
    border-radius: var(--eq-radius);
    overflow: hidden;
    box-shadow: var(--eq-shadow-sm);
}

/* Alertas */
.alert {
    border-radius: var(--eq-radius);
    border: 0;
    box-shadow: var(--eq-shadow-sm);
}

/* Modales / popups */
.white-popup,
.modal-content {
    border-radius: var(--eq-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--eq-shadow-lg);
    border: 0;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
    background: linear-gradient(160deg, var(--eq-primary) 0%, var(--eq-primary-dark) 100%) !important;
    color: #c9c0ba;
    padding-top: 30px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.site-footer .row {
    position: relative;
}

.site-footer .row > [class*="col-"] {
    padding-top: 2px;
    padding-bottom: 4px;
}

@media (max-width: 991.98px) {
    .site-footer .row > [class*="col-"]:not(:last-child) {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

.site-footer .widget-title {
    color: var(--eq-secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    margin-bottom: 10px;
}

.site-footer .widget-title::after {
    background-color: var(--eq-secondary) !important;
    height: 2px !important;
    width: 28px !important;
    border-radius: 2px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.eq-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.eq-footer-contact-item i {
    color: var(--eq-secondary);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.site-footer p,
.site-footer li,
.site-footer span {
    color: rgba(243, 235, 224, .72);
    font-size: 13px;
    line-height: 1.5;
}

.site-footer strong {
    color: var(--eq-secondary);
    font-weight: 600;
}

.site-footer .widget-links ul > li {
    padding: 3px 0;
}

.site-footer .widget-links ul > li > a {
    color: #b9c0c9;
    position: relative;
    transition: var(--eq-transition);
    display: inline-flex;
    align-items: center;
}

.site-footer .widget-links ul > li > a:hover {
    color: #fff !important;
    padding-left: 6px;
}

.footer-social-links {
    margin-top: 10px;
}

.footer-social-links a {
    background: rgba(255, 255, 255, .08) !important;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--eq-transition);
}

.footer-social-links a:hover {
    background: var(--eq-accent) !important;
    transform: translateY(-2px);
}

.footer-social-links a span i {
    color: #fff;
    font-size: 13px;
}

.eq-footer-map {
    border-radius: var(--eq-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    filter: grayscale(.3) contrast(1.05);
}

.eq-footer-map iframe {
    width: 100%;
    height: 110px;
    border: 0;
    display: block;
}

.eq-claim-book-badge {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: var(--eq-radius-sm);
    padding: 10px 16px;
    transition: var(--eq-transition);
}

.eq-claim-book-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.eq-claim-book-icon {
    width: 190px;
    max-width: 100%;
    height: auto;
    display: block;
}

.eq-claim-book-note {
    margin-top: 8px;
    font-size: 11.5px;
    color: #8d95a0;
}

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, .09);
    margin-top: 18px;
    padding: 12px 0;
    color: rgba(243, 235, 224, .5);
    font-size: 12px;
    text-align: center;
    letter-spacing: .02em;
}

/* ==========================================================================
   15. BOTÓN VOLVER ARRIBA
   ========================================================================== */

.scroll-to-top-btn {
    background: var(--eq-white);
    color: var(--eq-primary);
    border-radius: 12px !important;
    box-shadow: var(--eq-shadow);
    border: 1px solid var(--eq-gray-100);
    transition: var(--eq-transition) !important;
}

.scroll-to-top-btn:hover {
    background-color: var(--eq-primary) !important;
    transform: translateY(-4px);
    box-shadow: var(--eq-shadow-primary);
}

/* ==========================================================================
   16. COOKIES Y ANUNCIOS
   ========================================================================== */

.js-cookie-consent {
    border-radius: var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-lg);
}

.js-cookie-consent-agree {
    background: var(--eq-primary) !important;
    border-radius: var(--eq-radius-sm) !important;
    font-weight: 600;
    transition: var(--eq-transition);
}

.js-cookie-consent-agree:hover {
    background: var(--eq-primary-dark) !important;
}

.announcement-with-content {
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
}

/* ==========================================================================
   17. ANIMACIONES SUAVES DE ENTRADA
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .hero-slider .item .item-inner .from-bottom > * {
        animation: eqFadeUp .7s cubic-bezier(.25, .65, .35, 1) both;
    }

    .hero-slider .item .item-inner .from-bottom > *:nth-child(2) { animation-delay: .12s; }
    .hero-slider .item .item-inner .from-bottom > *:nth-child(3) { animation-delay: .24s; }

    @keyframes eqFadeUp {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ==========================================================================
   18. HOME EXTINTORES QUISPE (secciones del diseño corporativo)
   ========================================================================== */

/* --- 18.1 Hero principal --- */
.eq-hero {
    position: relative;
    overflow: hidden;
}

/* Rotación sincronizada del banner principal con los banners pequeños de abajo */
.eq-hero-bg,
.eq-promo-card {
    transition: var(--eq-transition), opacity .42s ease, transform .42s ease;
}

.eq-hero-bg.eq-rotate-out,
.eq-promo-card.eq-rotate-out {
    opacity: 0;
    transform: translateY(-10px);
}

.eq-hero-slider.owl-carousel {
    display: block;
}

.eq-hero-slider .owl-stage-outer,
.eq-hero-slider .owl-stage,
.eq-hero-slider .owl-item {
    height: 100%;
}

/* Imagen de fondo completa de cada slide del Hero (subida desde Admin > Sliders) */
.eq-hero-bg {
    width: 100%;
    background-color: #1c2024;
    background-image: var(--eq-hero-bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 340px;
    aspect-ratio: 2.6 / 1;
    max-height: 460px;
    padding: 48px 0 36px;
    display: flex;
    align-items: center;
    position: relative;
}

.eq-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 19, 32, .92) 0%, rgba(11, 19, 32, .78) 38%, rgba(11, 19, 32, .38) 68%, rgba(11, 19, 32, .12) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Flechas y puntos del carrusel */
.eq-hero-slider .owl-nav div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    transition: var(--eq-transition);
}

.eq-hero-slider .owl-nav .owl-prev { left: 18px; }
.eq-hero-slider .owl-nav .owl-next { right: 18px; }

.eq-hero-slider .owl-nav div:hover {
    background: var(--eq-primary);
}

/* Botones de navegación manual del banner principal (no dependen de owl-carousel).
   Se anclan abajo (no al centro vertical) porque el centro puede coincidir con
   el texto cuando el título/subtítulo ocupa 2 líneas; abajo siempre queda el
   espacio libre que deja el contenido centrado dentro del banner. */
.eq-hero-manual-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 4;
    cursor: pointer;
    transition: var(--eq-transition);
}

.eq-hero-manual-nav:hover,
.eq-hero-manual-nav:focus-visible {
    background: var(--eq-primary);
    color: #fff;
}

.eq-hero-manual-prev { left: 18px; }
.eq-hero-manual-next { right: 18px; }

@media (max-width: 767.98px) {
    .eq-hero-manual-nav {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

.eq-hero-slider .owl-dots {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.eq-hero-slider .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    transition: var(--eq-transition);
}

.eq-hero-slider .owl-dot.active span {
    background: var(--eq-secondary);
    width: 22px;
}

@media (max-width: 767.98px) {
    .eq-hero-bg {
        background-image: var(--eq-hero-bg-mobile);
        /* La imagen subida es cuadrada (1254x1254). En vez de recortarla con
           una caja panorámica (aspect-ratio del desktop), en móvil la caja
           usa una proporción un poco más alta que el cuadrado (se recorta
           levemente a los costados con background-size:cover, pero se ve
           completa de arriba a abajo); el texto queda arriba con
           align-items:flex-start + el degradado. */
        aspect-ratio: 5 / 6;
        max-height: none;
        /* Sin min-height fijo: si el texto necesita más espacio que el
           cuadrado, la caja crece (el contenido nunca se recorta), pero
           por defecto toma la proporción 1:1 y se ve la foto completa. */
        align-items: flex-start;
        padding: 32px 0 24px;
    }

    .eq-hero-overlay {
        /* El texto ahora vive arriba (imagen cuadrada completa debajo), así
           que el degradado se oscurece arriba para dar legibilidad y se
           aclara hacia abajo para que la foto se vea completa y nítida.
           Se apoya además en text-shadow (ver .eq-hero-title/.eq-hero-subtitle). */
        background: linear-gradient(180deg, rgba(11, 19, 32, .78) 0%, rgba(11, 19, 32, .5) 30%, rgba(11, 19, 32, .12) 55%, rgba(11, 19, 32, 0) 70%);
    }

    .eq-hero-slider .owl-nav div {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

.eq-hero .container {
    position: relative;
    z-index: 2;
}

.eq-hero-label {
    display: inline-block;
    color: var(--eq-secondary);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 16px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.eq-hero-title {
    color: #fff;
    font-size: 68px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.05;
    margin-bottom: 18px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.eq-hero-title span {
    color: var(--eq-secondary);
}

.eq-hero-subtitle {
    color: rgba(255, 255, 255, .82);
    font-size: 20px;
    max-width: 480px;
    margin-bottom: 30px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.eq-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.eq-btn i,
.eq-promo-btn i {
    margin-left: 8px;
    vertical-align: middle;
}

.eq-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px;
    font-size: 16.5px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: var(--eq-radius);
    color: #fff;
    font-weight: 600;
    transition: var(--eq-transition);
}

.eq-hero-buttons .eq-btn,
#eqHeroLink.eq-btn {
    font-size: 16.5px;
    background-color: var(--eq-accent) !important;
    border-color: var(--eq-accent) !important;
    color: #fff !important;
}

/* El tema base añade un barrido negro (::before) al pasar el cursor sobre
   .btn.btn-primary, pensado para botones con el texto envuelto en <span>.
   Este botón no usa ese marcado, así que el barrido tapaba el texto. */
.eq-hero-buttons .eq-btn::before,
#eqHeroLink.eq-btn::before {
    display: none !important;
}

.eq-hero-buttons .eq-btn:hover,
.eq-hero-buttons .eq-btn:focus,
#eqHeroLink.eq-btn:hover,
#eqHeroLink.eq-btn:focus {
    background-color: var(--eq-accent-dark) !important;
    border-color: var(--eq-accent-dark) !important;
    box-shadow: 0 8px 20px rgba(200, 16, 46, .35) !important;
    color: #fff !important;
}

.eq-prevention .eq-btn {
    background-color: var(--eq-accent) !important;
    border-color: var(--eq-accent) !important;
    color: #fff !important;
}

.eq-prevention .eq-btn::before {
    display: none !important;
}

.eq-prevention .eq-btn:hover,
.eq-prevention .eq-btn:focus {
    background-color: var(--eq-accent-dark) !important;
    border-color: var(--eq-accent-dark) !important;
    box-shadow: 0 8px 20px rgba(200, 16, 46, .35) !important;
    color: #fff !important;
}

.eq-btn-ghost:hover {
    border-color: #25d366;
    background: #25d366;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, .3);
}

.eq-btn-ghost .fa-whatsapp {
    font-size: 17px;
}

.eq-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eq-hero-trust li {
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-hero-trust li i {
    color: var(--eq-secondary);
    font-size: 17px;
}

.eq-hero-media img {
    width: 100%;
    height: auto;
    border-radius: var(--eq-radius-lg);
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
}

/* --- 18.2 Tarjetas promocionales --- */
.eq-promos {
    padding: 18px 0 8px;
}

.eq-promo-card {
    position: relative;
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    min-height: 190px;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.eq-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--eq-shadow-lg);
}

.eq-promo-red {
    background: linear-gradient(115deg, var(--eq-accent) 0%, var(--eq-accent-dark) 100%);
}

.eq-promo-dark {
    background: linear-gradient(115deg, #141d2b 0%, var(--eq-primary) 100%);
}

.eq-promo-photo {
    background: linear-gradient(115deg, #23272d 0%, #3a4046 100%);
}

.eq-promo-body {
    position: relative;
    z-index: 2;
    padding: 16px 22px;
    max-width: 72%;
}

.eq-promo-label {
    display: inline-block;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 8px;
}

.eq-promo-label.eq-label-yellow {
    background: var(--eq-secondary);
    color: var(--eq-black);
}

.eq-promo-card h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 1px 14px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eq-promo-card p {
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    margin-bottom: 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eq-promo-price {
    color: var(--eq-secondary);
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
}

.eq-promo-price strong {
    font-size: 30px;
    letter-spacing: -.02em;
}

.eq-promo-price.eq-price-big {
    color: #fff;
}

.eq-promo-price.eq-price-big strong {
    font-size: 38px;
}

.eq-promo-price.eq-price-big sup {
    font-size: 16px;
    font-weight: 700;
}

.eq-promo-btn {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--eq-gray-900);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: var(--eq-radius-sm);
    padding: 7px 16px;
    transition: var(--eq-transition);
}

.eq-promo-btn:hover {
    background: var(--eq-primary-soft);
    color: var(--eq-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.eq-promo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform .6s cubic-bezier(.25, .65, .35, 1);
}

.eq-promo-card:hover .eq-promo-img {
    transform: scale(1.05);
}

/* Mismo degradado del banner principal (.eq-hero-overlay), para que las
   tarjetas pequeñas tengan el mismo tratamiento visual sobre su foto. */
.eq-promo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(11, 19, 32, .92) 0%, rgba(11, 19, 32, .78) 38%, rgba(11, 19, 32, .38) 68%, rgba(11, 19, 32, .12) 100%);
    z-index: 1;
    pointer-events: none;
}

/* --- 18.3 Nuestras categorías --- */
.eq-categories {
    padding: 64px 0 16px;
}

/* Título de sección alineado a la izquierda, como .section-title del tema */
.eq-section-head {
    text-align: left;
    margin-bottom: 22px;
}

.eq-section-head h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.eq-section-head h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--eq-primary);
}

.eq-section-head p {
    color: var(--eq-gray-500);
    font-size: 13.5px;
    margin: 6px 0 0;
}

/* Tarjeta editorial: foto a pantalla completa + degradado inferior + texto superpuesto */
.eq-category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

/* Línea de acento superior que se despliega al pasar el cursor */
.eq-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--eq-accent), #e2263f);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.25, .65, .35, 1);
    z-index: 3;
}

.eq-category-card:hover::before {
    transform: scaleX(1);
}

.eq-category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(27, 42, 65, .22);
    box-shadow: var(--eq-shadow-lg);
}

.eq-category-thumb {
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--eq-gray-50) 100%);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    overflow: hidden;
    border-bottom: 1px solid var(--eq-gray-100);
}

.eq-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .55s cubic-bezier(.25, .65, .35, 1);
}

.eq-category-card:hover .eq-category-thumb img {
    transform: scale(1.09) translateY(-3px);
}

.eq-category-body {
    padding: 0 12px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

/* Icono flotante que solapa la imagen y el cuerpo de la tarjeta */
.eq-category-icon {
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-bottom: 8px;
    border-radius: 11px;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    color: var(--eq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--eq-shadow);
    position: relative;
    z-index: 2;
    transition: var(--eq-transition);
}

.eq-category-card:hover .eq-category-icon {
    background: var(--eq-primary);
    border-color: var(--eq-primary);
    color: #fff;
    transform: translateY(-4px) rotate(-6deg);
    box-shadow: var(--eq-shadow-primary);
}

.eq-category-body h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eq-gray-900);
    margin-bottom: 8px;
    flex-grow: 1;
    transition: var(--eq-transition);
}

.eq-category-card:hover .eq-category-body h3 {
    color: var(--eq-primary);
}

.eq-category-link {
    display: inline-flex;
    align-items: center;
    color: var(--eq-primary);
    font-size: 11.5px;
    font-weight: 700;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 5px 12px;
    background: var(--eq-primary-soft);
    transition: var(--eq-transition);
}

.eq-category-card:hover .eq-category-link {
    background: var(--eq-primary);
    color: #fff;
    box-shadow: var(--eq-shadow-primary);
}

.eq-category-link i {
    font-size: 11px;
    margin-left: 4px;
    transition: var(--eq-transition);
}

.eq-category-card:hover .eq-category-link i {
    margin-left: 8px;
}

/* Carrusel de categorías */
.eq-category-slider {
    position: relative;
}

.eq-category-slider .owl-stage {
    display: flex;
}

.eq-category-slider .owl-item {
    display: flex;
    height: auto;
}

.eq-category-slider .owl-item .eq-category-card {
    width: 100%;
    margin: 6px 0 14px;
}

.eq-category-slider .owl-nav div {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: var(--eq-white) !important;
    border: 1px solid var(--eq-gray-100);
    color: var(--eq-gray-900) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--eq-shadow);
    transition: var(--eq-transition) !important;
    z-index: 5;
}

.eq-category-slider .owl-nav .owl-prev {
    left: -14px;
}

.eq-category-slider .owl-nav .owl-next {
    right: -14px;
}

.eq-category-slider .owl-nav div:hover {
    background: var(--eq-primary) !important;
    border-color: var(--eq-primary);
    color: #fff !important;
    box-shadow: var(--eq-shadow-primary);
}

/* --- 18.4 Banner prevención --- */
.eq-prevention {
    padding: 56px 0 8px;
}

.eq-prevention-banner {
    position: relative;
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    background-image: var(--eq-prev-bg-desktop);
    background-size: cover;
    background-position: center right;
    padding: 52px 54px;
    box-shadow: var(--eq-shadow);
}

.eq-prevention-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 19, 32, .93) 0%, rgba(11, 19, 32, .72) 42%, rgba(11, 19, 32, .18) 78%, rgba(11, 19, 32, .05) 100%);
}

.eq-prevention-content {
    position: relative;
    z-index: 2;
    max-width: 460px;
}

.eq-prevention-content h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 12px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.eq-prevention-content p {
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    margin-bottom: 22px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* --- 18.5 Beneficios --- */
.eq-benefits {
    padding: 52px 0 24px;
}

.eq-benefit {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    height: 100%;
}

.eq-benefit-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--eq-primary);
    color: var(--eq-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: var(--eq-transition);
}

.eq-benefit:hover .eq-benefit-icon {
    background: var(--eq-accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--eq-shadow-accent);
}

.eq-benefit h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.eq-benefit p {
    font-size: 13px;
    color: var(--eq-gray-500);
    margin: 0;
}

/* --- 18.55 Galería de la tienda --- */
.eq-store-gallery {
    padding: 28px 0 8px;
}

.eq-store-gallery-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 44px;
    gap: 14px;
}

.eq-store-gallery-tile {
    position: relative;
    display: block;
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    box-shadow: var(--eq-shadow-sm);
    transition: box-shadow .3s ease;
}

/* "Pared de marcos": cada foto entra en una casilla de proporción fija
   (cuadrada, vertical, horizontal, tipo A3...), sin adaptarse al
   contenido de la imagen — igual que un cuadro de tamaños de marco.
   El patrón se repite cada 7 fotos; grid-auto-flow:dense acomoda todo
   sin dejar huecos, en cualquier ancho de pantalla. */
.eq-store-gallery-tile:nth-child(7n+1) {
    grid-column: span 3;
    grid-row: span 3;
}

.eq-store-gallery-tile:nth-child(7n+2) {
    grid-column: span 4;
    grid-row: span 3;
}

.eq-store-gallery-tile:nth-child(7n+3) {
    grid-column: span 5;
    grid-row: span 6;
}

.eq-store-gallery-tile:nth-child(7n+4) {
    grid-column: span 4;
    grid-row: span 4;
}

.eq-store-gallery-tile:nth-child(7n+5) {
    grid-column: span 3;
    grid-row: span 4;
}

.eq-store-gallery-tile:nth-child(7n+6) {
    grid-column: span 6;
    grid-row: span 3;
}

.eq-store-gallery-tile:nth-child(7n+7) {
    grid-column: span 3;
    grid-row: span 3;
}

.eq-store-gallery-tile:hover {
    box-shadow: var(--eq-shadow-lg);
}

.eq-store-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.25, .65, .35, 1);
}

.eq-store-gallery-tile:hover img {
    transform: scale(1.07);
}

.eq-store-gallery-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(11, 19, 32, .5) 0%, rgba(11, 19, 32, 0) 45%);
    opacity: 0;
    transition: var(--eq-transition);
}

.eq-store-gallery-tile:hover::after {
    opacity: 1;
}

.eq-store-gallery-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    color: var(--eq-gray-900);
    border-radius: 50%;
    font-size: 15px;
    opacity: 0;
    transform: translateY(-6px);
    transition: var(--eq-transition);
    z-index: 2;
}

.eq-store-gallery-tile:hover .eq-store-gallery-zoom {
    opacity: 1;
    transform: translateY(0);
}

.eq-store-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px;
    background: linear-gradient(0deg, rgba(11, 19, 32, .82) 0%, rgba(11, 19, 32, 0) 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .eq-store-gallery {
        padding: 20px 0 4px;
    }

    .eq-store-gallery-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 26px;
        gap: 10px;
    }
}

/* --- 18.6 CTA asesoría empresas --- */
.eq-cta {
    padding: 16px 0 44px;
}

.eq-cta-inner {
    background: linear-gradient(115deg, var(--eq-primary-dark) 0%, #22374f 100%);
    border-radius: var(--eq-radius-lg);
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    box-shadow: var(--eq-shadow-primary);
    position: relative;
    overflow: hidden;
}

.eq-cta-inner::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.eq-cta-text h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.eq-cta-text p {
    color: rgba(255, 255, 255, .85);
    font-size: 14.5px;
    margin: 0;
}

.eq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--eq-primary);
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--eq-radius);
    padding: 14px 30px;
    white-space: nowrap;
    transition: var(--eq-transition);
    position: relative;
    z-index: 2;
}

.eq-cta-btn:hover {
    background: var(--eq-primary-soft);
    color: var(--eq-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.eq-cta-btn .fa-whatsapp {
    font-size: 18px;
}

/* --- 18.7 Nosotros (home) --- */
.eq-about-us {
    padding: 56px 0;
}

.eq-section-head-left {
    text-align: left;
    margin-bottom: 16px;
}

.eq-section-head-left h2 {
    margin: 0;
}

.eq-section-head-left h2::after {
    left: 0;
    transform: none;
    margin: 14px 0 0;
}

/* La foto viene recortada en arco con fondo transparente: se apoya sobre
   una sola tarjeta lisa (mismo radio que el arco) en vez de una caja
   rectangular, para que se vea tan ordenada como la columna de texto */
.eq-about-photo {
    position: relative;
    padding: 22px;
    background: var(--eq-primary-soft);
    border-radius: 50% 50% var(--eq-radius-lg) var(--eq-radius-lg) / 30% 30% var(--eq-radius-lg) var(--eq-radius-lg);
}

.eq-about-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(36, 27, 23, .22));
}

.eq-about-text {
    color: var(--eq-gray-700);
    line-height: 1.75;
    margin-bottom: 20px;
}

/* --- 18.8 Contacto (home) --- */
.eq-contact-home {
    padding: 16px 0 60px;
}

.eq-contact-info-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eq-contact-info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.eq-contact-info-list a {
    color: #fff;
}

.eq-contact-info-list i {
    color: var(--eq-secondary);
}

/* ==========================================================================
   19. REFINAMIENTO PROFESIONAL
   ========================================================================== */

/* --- 19.1 Bandas de fondo alternadas para separar secciones --- */
.deal-of-day-section,
.popular-category-sec,
.flash-sell-new-section {
    background: var(--eq-gray-50);
    padding: 32px 0 36px;
    border-top: none;
    border-bottom: none;
}

.deal-of-day-section.mt-50,
.popular-category-sec.mt-50,
.flash-sell-new-section.mt-50 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.eq-categories {
    padding: 28px 0 32px;
}

.eq-prevention {
    padding: 36px 0;
}

.brand-section {
    padding: 8px 0 24px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 19.2 Títulos de sección refinados --- */
.section-title {
    margin-bottom: 30px;
}

.section-title h2 {
    font-size: 26px;
}

.section-title .right_link {
    border: 1.5px solid var(--eq-gray-300);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    transition: var(--eq-transition);
}

.section-title .right_link:hover {
    border-color: var(--eq-primary);
    background: var(--eq-primary-soft);
}

/* --- 19.3 Cuenta regresiva premium --- */
.deal-of-day-section .countdown {
    background: var(--eq-gray-900) !important;
    border-radius: 10px;
}

.product-card .countdown span {
    background: var(--eq-gray-900) !important;
}

/* --- 19.4 Hero: textura y chips de confianza --- */
.eq-hero-bg {
    padding: 32px 0 24px;
}

.eq-hero-title {
    font-size: 62px;
}

.eq-hero-subtitle {
    margin-bottom: 22px;
}

.eq-hero-buttons {
    margin-bottom: 26px;
}

.eq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.eq-hero-trust li {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    padding: 8px 15px;
}

.eq-hero-media img {
    border: 1px solid rgba(255, 255, 255, .12);
}

.eq-btn {
    padding: 13px 28px;
}

.btn:focus-visible,
.eq-btn-ghost:focus-visible,
.eq-cta-btn:focus-visible {
    outline: 3px solid rgba(27, 42, 65, .35);
    outline-offset: 2px;
}

/* --- 19.5 Tarjetas promocionales --- */
.eq-promo-card {
    min-height: 150px;
}

.eq-promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    pointer-events: none;
    z-index: 3;
}

.eq-promo-card h3 {
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1.2;
}

.eq-promo-card p {
    font-size: 12.5px;
    margin-bottom: 8px;
    line-height: 1.45;
}

.eq-promo-body {
    padding: 18px 22px;
}

.eq-promo-label {
    margin-bottom: 8px;
    font-size: 10px;
    padding: 4px 10px;
}

.eq-promo-price {
    margin-bottom: 10px;
    font-size: 13px;
}

.eq-promo-price strong {
    font-size: 24px;
}

.eq-promo-price.eq-price-big strong {
    font-size: 28px;
}

.eq-promo-btn {
    padding: 7px 14px;
    font-size: 12px;
}

/* --- 19.7 Banner prevención --- */
.eq-prevention-banner {
    padding: 64px 60px;
}

.eq-prevention-content h2 {
    font-size: 38px;
}

/* --- 19.8 Beneficios como tarjetas --- */
.eq-benefits {
    padding: 56px 0 24px;
}

.eq-benefit {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    padding: 22px 20px;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.eq-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--eq-shadow);
    border-color: rgba(27, 42, 65, .16);
}

/* --- 19.9 Marcas y CTA --- */
.brand-slider .slider-item a {
    padding: 20px 24px;
}

.eq-cta-inner::before {
    content: '';
    position: absolute;
    left: -50px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    pointer-events: none;
}

/* --- 19.10 Pulido de tarjetas de producto --- */
.product-card .product-thumb {
    border-bottom: 1px solid var(--eq-gray-100);
}

.product-card .product-card-body {
    padding: 16px 18px 20px;
}

.rating-stars {
    margin: 4px 0 6px;
}

/* --- 19.11 Header compacto --- */
.menu-top-area {
    padding: 2px 0;
}

.menu-top-area a.track-order-link,
.menu-top-area .t-h-dropdown .main-link,
.menu-top-area .login-register a {
    font-size: 12px;
    line-height: 1.5;
}

.site-header .search-box-wrap .search-box .form-control {
    padding-top: 7px;
    padding-bottom: 7px;
    height: 40px;
}

.site-header .search-box-wrap .search-box .categoris {
    height: 40px;
}

.site-header .search-box-wrap .input-group .input-group-btn button {
    width: 38px;
    margin: 3px;
}

.site-header .toolbar .toolbar-item > a > div {
    padding-top: 0;
    padding-bottom: 0;
}

.site-header .toolbar .toolbar-item .text-label {
    font-size: 10.5px;
    line-height: 1.4;
}

.site-header .toolbar .toolbar-item i {
    font-size: 18px;
}

.site-header .navbar {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.site-header .navbar .row {
    align-items: center;
}

.site-header .site-menu > ul > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.3;
}

.site-header .site-menu > ul > li > a::after {
    bottom: 3px;
}

.left-category-area .category-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.left-category-area .category-header h4 {
    margin: 0;
    padding: 6px 0 !important;
    font-size: 14.5px;
    line-height: 1.3;
}

.topbar .toolbar-item,
.topbar .toolbar-item > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.topbar .search-box-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.topbar .site-branding,
.topbar .search-box-wrap,
.topbar .toolbar {
    align-items: center;
}

.site-header .topbar {
    padding: 2px 0 !important;
}

.site-header .topbar .site-branding,
.site-header .topbar .site-logo {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 19.12 Animación de entrada al hacer scroll --- */
.eq-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.25, .65, .35, 1), transform .7s cubic-bezier(.25, .65, .35, 1);
    will-change: opacity, transform;
}

.eq-reveal.eq-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .eq-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .site-header .site-branding .site-logo > img {
        height: 40px !important;
    }

}

@media (max-width: 991.98px) {
    body {
        font-size: 14.5px;
    }

    .eq-hero {
        padding: 32px 0 28px;
    }

    .eq-hero-title {
        font-size: 46px;
    }

    .eq-prevention-banner {
        padding: 40px 34px;
    }

    .eq-prevention-content h2 {
        font-size: 27px;
    }

    .eq-section-head h2 {
        font-size: 25px;
    }

    .hero-slider,
    .hero-slider .owl-carousel .item {
        border-radius: var(--eq-radius);
    }

    .section-title h2 {
        font-size: 22px;
    }

    .service-section {
        padding: 28px 0 4px;
    }
}

@media (max-width: 767.98px) {
    .site-header .site-branding .site-logo > img {
        height: 36px !important;
    }

    .slider-area-wrapper {
        padding-top: 14px;
    }

    .section-title {
        margin-bottom: 18px;
    }

    .section-title h2 {
        font-size: 19px;
    }

    .section-title .links a {
        padding: 6px 12px;
        font-size: 13px;
    }

    .product-card .product-card-body {
        padding: 12px 14px 14px;
    }

    .product-card:hover {
        transform: none;
    }

    .genius-banner:hover,
    .blog-post:hover,
    .single-service:hover {
        transform: none;
    }

    .btn {
        padding: 11px 20px;
    }

    .site-footer {
        padding-top: 44px;
        text-align: left;
    }

    .footer-copyright {
        margin-top: 26px;
    }

    .eq-hero {
        padding: 40px 0 34px;
    }

    .eq-hero-title {
        font-size: 40px;
    }

    .eq-hero-subtitle {
        font-size: 17px;
    }

    .eq-hero-trust {
        gap: 8px 10px;
    }

    .eq-hero-trust li {
        padding: 6px 12px;
        font-size: 13px;
    }

    .eq-promo-card:hover,
    .eq-category-card:hover {
        transform: none;
    }

    .eq-promo-body {
        max-width: 60%;
        padding: 22px 20px;
    }

    .eq-categories {
        padding: 24px 0 10px;
    }

    /* 2 columnas en móvil: la tarjeta queda más angosta, así que se
       reduce el alto de la miniatura para que no se vea desproporcionada. */
    .eq-category-thumb {
        height: 120px;
    }

    .eq-category-body {
        padding: 0 8px 12px;
    }

    .eq-prevention {
        padding: 24px 0 4px;
    }

    .eq-prevention-banner {
        /* Diseño "apilado" en móvil: arriba la foto queda 100% limpia (sin
           degradado encima) y el texto vive abajo, sobre un panel sólido.
           Así el texto nunca se superpone a la imagen. Usa una imagen propia
           para móvil (Admin > Home Page > "2 column banner") si se configuró;
           si no, cae de vuelta a la misma imagen de escritorio.
           La foto se pinta en ::after (no como background del propio
           elemento) con background-size:contain para que se vea COMPLETA,
           sin recortar nada, dentro de los primeros 300px. */
        background-image: none;
        padding: 300px 22px 26px;
    }

    .eq-prevention-banner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background-image: var(--eq-prev-bg-mobile);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #10161f;
    }

    .eq-prevention-banner::before {
        top: 288px;
        right: 0;
        bottom: 0;
        left: 0;
        background: #10161f;
    }

    .eq-prevention-content h2 {
        font-size: 23px;
    }

    .eq-benefits {
        padding: 38px 0 14px;
    }

    .eq-cta {
        padding: 14px 0 46px;
    }

    .eq-cta-inner {
        padding: 30px 26px;
        text-align: center;
        justify-content: center;
    }

    .eq-cta-text h2 {
        font-size: 21px;
    }
}

@media (max-width: 575.98px) {
    .menu-top-area a.track-order-link,
    .menu-top-area .t-h-dropdown .main-link {
        font-size: 12px;
    }

    .section-title h2 {
        font-size: 17.5px;
    }

    .product-card .product-title {
        font-size: 14px;
    }

    .product-card .product-price {
        font-size: 15.5px;
    }

    /* Banner principal en pantallas muy angostas: los textos se reducen un poco
       más para que quepan cómodamente sin recortarse. */
    .eq-hero-bg {
        /* Texto pegado arriba para dejar ver más foto (cuadrada) debajo. */
        padding-top: 14px;
    }

    .eq-hero-label {
        margin-bottom: 8px;
    }

    .eq-hero-title {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .eq-hero-subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .eq-hero-buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    .eq-hero-buttons .eq-btn,
    .eq-btn-ghost {
        font-size: 12.5px;
        padding: 8px 14px;
    }
}

/* ==========================================================================
   21. PÁGINA DE PRODUCTO — estilo tienda premium (tipo Falabella)
   ========================================================================== */

/* --- 21.1 Migas de pan --- */
.page-title {
    background: var(--eq-gray-50);
    padding: 4px 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid var(--eq-gray-100);
    margin-bottom: 0 !important;
}

.page-title .breadcrumbs {
    margin: 0 !important;
    line-height: 1.4;
}

.eq-product-top-row {
    align-items: flex-start !important;
    margin-top: 18px !important;
}

/* --- 21.2 Galería de producto --- */
.eq-gallery-card {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    padding: 22px;
    box-shadow: var(--eq-shadow-sm);
}

.eq-pd-badge {
    top: 14px;
    left: 14px;
    z-index: 4;
}

.eq-gallery-card .product-thumbnails.insize {
    border-radius: var(--eq-radius);
    overflow: hidden;
    background: var(--eq-white);
}

.eq-gallery-card .product-details-slider .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 560px;
    overflow: hidden;
    background: var(--eq-white);
}

.eq-gallery-card .product-details-slider .item a.eq-zoom-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.eq-gallery-card .product-details-slider .item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Pista visual de que la imagen se puede ampliar con un clic.
   Lupa dibujada en CSS puro para no depender de un glifo de
   icon-font sin verificar. Visible en todos los tamaños de
   pantalla porque el clic funciona igual en desktop y móvil. */
.eq-gallery-card .product-details-slider .item::before,
.eq-gallery-card .product-details-slider .item::after {
    opacity: .9;
    transition: var(--eq-transition);
    pointer-events: none;
    z-index: 2;
}

.eq-gallery-card .product-details-slider .item::before {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--eq-shadow-sm);
}

.eq-gallery-card .product-details-slider .item::after {
    content: '';
    right: 26px;
    bottom: 26px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--eq-gray-700);
    border-radius: 50%;
    box-shadow: 5px 5px 0 -3px var(--eq-gray-700);
    position: absolute;
}

.eq-gallery-card .product-details-slider .item:hover::before,
.eq-gallery-card .product-details-slider .item:hover::after {
    opacity: 1;
    transform: scale(1.08);
}

/* Miniaturas generadas por el plugin owl.thumbs */
.eq-gallery-card .owl-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 0 2px;
}

.eq-gallery-card .owl-thumb-item {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-sm);
    overflow: hidden;
    background: var(--eq-white);
    opacity: 1;
    transition: var(--eq-transition);
    cursor: pointer;
}

.eq-gallery-card .owl-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eq-gallery-card .owl-thumb-item:hover {
    border-color: rgba(27, 42, 65, .3);
}

.eq-gallery-card .owl-thumb-item.active {
    border-color: var(--eq-primary);
    box-shadow: 0 0 0 3px rgba(27, 42, 65, .12);
}

/* --- 21.3 Buy box (título, precio, acciones) --- */
.eq-buybox {
    align-items: flex-start !important;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    padding: 32px 34px;
    box-shadow: var(--eq-shadow-sm);
    position: relative;
}

.eq-pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eq-primary);
    margin-bottom: 10px;
}

.eq-pd-eyebrow::before {
    content: '';
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--eq-accent);
}

.p-title-main {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eq-gray-900);
    letter-spacing: -.01em;
    margin-bottom: 14px !important;
}

.eq-stock-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--eq-gray-100);
}

.eq-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 6px 12px;
    border-radius: 999px;
}

.eq-stock-pill i {
    font-size: 13px;
}

.eq-stock-pill.eq-stock-in {
    background: #eaf6ee;
    color: #1a7a42;
}

.eq-stock-pill.eq-stock-out {
    background: var(--eq-accent-soft);
    color: var(--eq-accent);
}

/* Precio destacado */
.price-area {
    background: var(--eq-gray-50);
    border: 1px dashed var(--eq-gray-300);
    border-radius: var(--eq-radius);
    padding: 14px 18px;
    margin: 4px 0 14px;
}

.price-area del {
    color: var(--eq-gray-500);
    font-size: 15px;
    font-weight: 500;
}

.price-area .main-price {
    color: var(--eq-primary) !important;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -.01em;
}

/* Sellos de confianza — compactos, bajo el botón de cotización */
.eq-trust-badges {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0;
    margin: 22px 0 0;
}

.eq-trust-badges li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: var(--eq-gray-50);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius);
    padding: 16px 8px;
    transition: var(--eq-transition);
}

.eq-trust-badges li:hover {
    background: var(--eq-white);
    border-color: rgba(27, 42, 65, .18);
    box-shadow: var(--eq-shadow-sm);
    transform: translateY(-2px);
}

.eq-trust-badges li i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--eq-primary-soft);
    color: var(--eq-primary);
    font-size: 16px;
    transition: var(--eq-transition);
}

.eq-trust-badges li:hover i {
    background: var(--eq-primary);
    color: #fff;
}

.eq-trust-badges li span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
    color: var(--eq-gray-700);
}

@media (max-width: 575.98px) {
    .eq-trust-badges li span {
        font-size: 11px;
    }
}

/* Atributos del producto (talla, color, presentación...) como botones,
   en vez del <select> nativo */
.eq-attr-field label:not(.eq-attr-btn) {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eq-gray-700);
    margin-bottom: 8px;
}

.eq-attr-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eq-attr-btn {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.eq-attr-btn input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.eq-attr-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 16px;
    background: var(--eq-white);
    border: 1.5px solid var(--eq-gray-300);
    border-radius: var(--eq-radius-sm);
    color: var(--eq-gray-700);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: var(--eq-transition);
}

.eq-attr-btn:hover span {
    border-color: var(--eq-primary);
    color: var(--eq-primary);
}

.eq-attr-btn input:checked + span {
    background: var(--eq-primary);
    border-color: var(--eq-primary);
    color: #fff;
    box-shadow: var(--eq-shadow-primary);
}

.eq-attr-btn input:focus-visible + span {
    outline: 3px solid rgba(27, 42, 65, .35);
    outline-offset: 2px;
}

/* Selector de cantidad */
.eq-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--eq-gray-300);
    border-radius: var(--eq-radius-sm);
    overflow: hidden;
    margin-right: 12px;
    vertical-align: middle;
}

.eq-qty span {
    width: 38px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--eq-gray-700);
    transition: var(--eq-transition);
}

.eq-qty span:hover {
    background: var(--eq-primary-soft);
    color: var(--eq-primary);
}

.eq-qty .qtyValue {
    width: 46px;
    height: 42px;
    border: 0;
    border-left: 1.5px solid var(--eq-gray-300);
    border-right: 1.5px solid var(--eq-gray-300);
    text-align: center;
    font-weight: 700;
    color: var(--eq-gray-900);
}

.eq-buy-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 18px !important;
}

.p-action-button {
    display: inline-flex;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    vertical-align: middle;
}

.p-action-button .btn {
    min-width: 168px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 700;
}

.p-action-button .btn#but_to_cart {
    background: var(--eq-gray-900) !important;
}

.p-action-button .btn#but_to_cart:hover {
    background: #000 !important;
}

/* Meta info: marca, categorías, tags, SKU */
.eq-meta-block {
    border-top: 1px solid var(--eq-gray-100);
    margin-top: 20px;
    padding-top: 20px;
}

.t-c-b-area {
    background: var(--eq-gray-50);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius);
    padding: 14px 18px;
}

.t-c-b-area > div {
    font-size: 12.5px;
    color: var(--eq-gray-500);
    padding: 3px 0;
}

.t-c-b-area .text-medium {
    color: var(--eq-gray-900);
    font-weight: 700;
    min-width: 90px;
    display: inline-block;
}

.t-c-b-area a {
    color: var(--eq-gray-700);
    font-weight: 500;
    transition: var(--eq-transition);
}

.t-c-b-area a:hover {
    color: var(--eq-primary);
}

.p-d-f-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    border-top: 1px solid var(--eq-gray-100);
    padding-top: 20px;
}

.p-d-f-area .btn-sm {
    background: transparent !important;
    border: 1.5px solid var(--eq-gray-300) !important;
    color: var(--eq-gray-700) !important;
    border-radius: var(--eq-radius-sm) !important;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none !important;
    transition: var(--eq-transition);
}

.p-d-f-area .btn-sm:hover {
    border-color: var(--eq-primary) !important;
    color: var(--eq-primary) !important;
}

.p-d-f-area .btn-sm span {
    color: var(--eq-gray-700) !important;
}

.p-d-f-area .btn-sm:hover span {
    color: var(--eq-primary) !important;
}

.p-d-f-area .a2a_kit a {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    background: var(--eq-gray-50);
    color: var(--eq-gray-600);
}

.p-d-f-area .a2a_kit a:hover {
    background: var(--eq-primary);
    color: #fff;
}

/* --- 21.4 Pestañas de descripción / especificaciones --- */
.eq-product-tabs .nav-tabs {
    border-bottom: 0;
    gap: 10px;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

.eq-product-tabs .nav-tabs .nav-link {
    border: 1px solid var(--eq-gray-100);
    border-bottom: 0;
    background: var(--eq-gray-50);
    color: var(--eq-gray-700);
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px 24px;
}

.eq-product-tabs .nav-tabs .nav-link.active {
    background: var(--eq-white) !important;
    color: var(--eq-primary) !important;
    border-color: var(--eq-gray-100);
}

.eq-product-tabs .tab-content.card {
    border: 1px solid var(--eq-gray-100);
    border-radius: 0 var(--eq-radius-lg) var(--eq-radius-lg) var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-sm);
    padding: 28px 30px;
}

.eq-product-tabs .comparison-table table {
    margin-bottom: 0;
}

.eq-product-tabs .comparison-table th {
    background: var(--eq-gray-50) !important;
    color: var(--eq-gray-900);
    font-weight: 700;
    width: 32%;
}

.eq-product-tabs .comparison-table tr:nth-child(even) td,
.eq-product-tabs .comparison-table tr:nth-child(even) th {
    background: var(--eq-gray-50);
}

/* --- 21.5 Reseñas --- */
.review-area .section-title {
    margin-bottom: 22px;
}

.review-area .single-review {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--eq-shadow-sm);
}

.review-area .comment {
    display: flex;
    gap: 16px;
}

.review-area .comment-author-ava img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.review-area .comment-title {
    font-size: 15px;
    font-weight: 700;
}

.review-area .comment-text {
    color: var(--eq-gray-700);
    font-size: 14px;
}

.eq-review-summary {
    border: 1px solid var(--eq-gray-100);
    box-shadow: var(--eq-shadow-sm);
    position: sticky;
    top: 90px;
}

.eq-review-summary .display-3 {
    font-weight: 800;
    color: var(--eq-gray-900);
    font-size: 42px;
}

.eq-review-summary .progress {
    border-radius: 999px;
    background: var(--eq-gray-100);
}

.eq-review-summary .progress-bar {
    background: var(--eq-secondary) !important;
}

.eq-review-summary label {
    font-size: 12.5px;
}

.eq-review-summary .btn-block {
    border-radius: var(--eq-radius-sm) !important;
    font-weight: 700;
}

/* --- 21.6 Compresión de altura del detalle de producto --- */
.eq-buybox p.text-muted.eq-pd-summary {
    font-size: 13.5px;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--eq-gray-700);
}

.eq-buybox p.text-muted.eq-pd-summary .scroll-to {
    font-weight: 700;
    color: var(--eq-primary);
    white-space: nowrap;
}

.eq-buybox p.text-muted.eq-pd-summary .scroll-to:hover {
    color: var(--eq-accent);
}

.eq-buybox .row.margin-top-1x {
    margin-top: 6px !important;
}

.eq-product-tabs {
    padding-top: 20px !important;
    margin-bottom: 8px !important;
}

.eq-product-tabs .nav-tabs .nav-link {
    padding: 9px 20px;
}

.eq-product-tabs .tab-content.card {
    padding: 18px 20px;
}

.review-area {
    padding-bottom: 20px !important;
}

.review-area .section-title {
    margin-bottom: 14px;
}

.review-area .single-review {
    padding: 14px 16px;
    margin-bottom: 10px;
}

.relatedproduct-section {
    padding-bottom: 20px !important;
}

/* --- 21.6 Responsive --- */
@media (max-width: 991.98px) {
    .eq-buybox {
        margin-top: 24px;
        padding: 22px;
    }

    .price-area .main-price {
        font-size: 27px;
    }

    .eq-review-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .p-title-main {
        font-size: 18px;
    }

    .price-area .main-price {
        font-size: 24px;
    }

    .p-action-button .btn {
        min-width: 0;
        flex: 1 1 auto;
    }

    .eq-gallery-card {
        padding: 14px;
    }

    .eq-gallery-card .owl-thumb-item {
        width: 58px;
        height: 58px;
    }
}

/* ==========================================================================
   22. MODO CATÁLOGO / COTIZACIÓN — sin precios, con solicitud vía WhatsApp
   ========================================================================== */

/* Oculta cualquier rastro de precio que pueda quedar en páginas secundarias
   (carrito, checkout, pedidos) ya que el flujo de compra fue reemplazado
   por cotización directa en todo el catálogo. */
.product-price,
.price-area,
.main-price,
.product-badge2,
.shopping-cart .price-col,
.wishlist-table .text-lg,
.order-table .price-col {
    display: none !important;
}

/* Botón de cotización dentro de las tarjetas de producto (product-button-group) */
.eq-quote-btn {
    background: var(--eq-accent) !important;
    color: #fff !important;
}

.eq-quote-btn:hover {
    background: #25d366 !important;
    color: #fff !important;
}

.eq-quote-btn .fa-whatsapp {
    font-size: 16px;
}

/* CTA grande de cotización en la página de detalle de producto */
.eq-quote-cta {
    position: relative;
    background: linear-gradient(115deg, var(--eq-accent) 0%, var(--eq-accent-dark) 100%) !important;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 320px;
    justify-content: center;
    border-radius: var(--eq-radius) !important;
    padding: 14px 26px !important;
    box-shadow: var(--eq-shadow-accent);
    transition: var(--eq-transition);
    overflow: hidden;
}

.eq-quote-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .3) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}

.eq-quote-cta:hover::after {
    left: 130%;
}

.eq-quote-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(200, 16, 46, .34);
}

.eq-quote-cta:active {
    transform: translateY(0);
}

.eq-quote-cta-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.eq-quote-cta-icon i {
    font-size: 19px;
    color: #fff;
}

.eq-quote-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.25;
}

.eq-quote-cta-text strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

.eq-quote-cta-text small {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 575.98px) {
    .eq-quote-cta {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   23. HEADER COMPACTO ESTILO TIENDA GRANDE (Falabella-like)
   ========================================================================== */

/* --- 23.1 Fila principal: logo + categorías + buscador + cuenta --- */
.eq-header-compact .topbar {
    padding: 2px 0;
}

.eq-header-compact .topbar .d-flex.justify-content-between {
    align-items: center;
    gap: 8px;
}

@media (min-width: 992px) {
    .eq-header-compact .topbar .d-flex.justify-content-between {
        gap: 10px;
    }
}

.eq-header-compact .site-branding {
    flex: 0 0 auto;
    overflow: visible;
}

.eq-header-compact .topbar .d-flex.justify-content-between {
    min-height: 46px;
    overflow: visible;
}

/* Botón "Categorías" (equivalente al "☰ Menú" de Falabella, en grande) */
.eq-categories-trigger {
    flex: 0 0 auto;
    align-self: center;
}

.eq-categories-trigger .left-category-area {
    min-width: 0;
}

.eq-categories-trigger .category-header {
    background: var(--eq-white) !important;
    border: 0;
    box-shadow: none;
    padding: 6px 4px;
}

.eq-categories-trigger .category-header h4 {
    color: var(--eq-gray-900) !important;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.eq-categories-trigger .category-header h4 i {
    color: var(--eq-gray-900);
    font-size: 15px;
}

.eq-categories-trigger .category-header h4 i.icon-chevron-down {
    font-size: 11px;
}

.eq-categories-trigger .category-header:hover {
    background: var(--eq-gray-50) !important;
}

/* Panel desplegable: grilla de tarjetas con imagen, look "mega menú" (compacto) */
.eq-categories-trigger .category-list {
    width: 500px;
    left: 0;
    right: auto;
    padding: 12px 12px 8px;
    margin-top: 10px;
    border-radius: var(--eq-radius-lg) !important;
    border-top: 3px solid var(--eq-accent);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.eq-categories-trigger .category-list .c-item {
    position: relative;
}

.eq-categories-trigger .category-list .navi-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 10px 4px;
    border-radius: var(--eq-radius-sm);
    border-left: none;
}

.eq-categories-trigger .category-list .navi-link img {
    height: 64px;
    width: 64px;
    border-radius: 14px;
    object-fit: cover;
    margin: 0 0 8px;
}

.eq-categories-trigger .category-list .navi-link span.text-gray-dark {
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.25;
}

.eq-categories-trigger .category-list .navi-link i.icon-chevron-right {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    opacity: .45;
}

.eq-categories-trigger .category-list .navi-link:hover {
    background: var(--eq-primary-soft);
    padding-left: 4px;
}

.eq-categories-trigger .category-list .navi-link:hover img {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--eq-shadow);
}

.eq-categories-trigger .category-list .navi-link:hover span.text-gray-dark {
    color: var(--eq-primary) !important;
}

/* Flyout de subcategorías: centrado bajo la tarjeta, no pegado al borde */
.eq-categories-trigger .category-list .sub-c-box {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 230px;
    margin-top: 4px;
    z-index: 30;
}

.eq-categories-trigger .category-list .view-all-category {
    display: flex !important;
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid var(--eq-gray-100);
    margin-top: 6px;
    padding: 10px 20px !important;
}

.eq-categories-trigger .category-list .view-all-category img {
    height: 28px;
    width: 28px;
    border-radius: 8px;
    margin: 0 10px 0 0;
}

.eq-categories-trigger .category-list .view-all-category span.text-gray-dark {
    font-size: 12px;
}

/* Buscador: ocupa el espacio disponible, como en las grandes tiendas
   (el contenedor del header mantiene el mismo ancho que el resto del sitio) */
.eq-header-compact .search-box-wrap {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .eq-header-compact .search-box-wrap {
        max-width: 340px;
    }
}

.eq-header-compact .search-box-wrap .search-box {
    width: 100%;
}

/* Se quita el selector de categorías dentro del buscador (queda solo el input) */
.eq-header-compact .search-box-wrap .search-box .categoris {
    display: none !important;
}

.eq-header-compact .search-box-wrap .search-box .form-control {
    border-radius: var(--eq-radius) !important;
    height: 38px !important;
    font-size: 14px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.eq-header-compact .search-box-wrap .input-group .input-group-btn button {
    width: 38px !important;
    height: 32px;
}

.eq-header-compact .search-box-wrap .input-group .input-group-btn button i {
    font-size: 17px;
}

/* Cuenta / Ingresar */
.eq-account-item {
    display: flex;
    align-items: center;
}

.eq-account-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--eq-gray-900);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}

.eq-account-link i {
    font-size: 17px;
    color: var(--eq-gray-900);
}

.eq-account-item .t-h-dropdown-menu {
    left: auto;
    right: 0;
}

/* Íconos superiores solo-icono: cuenta, wishlist, carrito — alineados y sin texto */
.eq-header-compact .topbar .toolbar {
    align-items: center;
    gap: 4px;
}

.eq-header-compact .topbar .toolbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 40px;
    margin-left: 0 !important;
}

.eq-header-compact .topbar .toolbar-item > a {
    position: static;
    width: auto;
    height: auto;
    padding: 6px;
}

.eq-header-compact .topbar .toolbar-item > a > div {
    position: static;
    width: auto;
    transform: none;
}

.eq-header-compact .topbar .toolbar-item > a,
.eq-header-compact .topbar .toolbar-item > a > div,
.eq-header-compact .topbar .eq-account-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eq-header-compact .topbar .toolbar-item .text-label {
    display: none !important;
}

.eq-header-compact .topbar .toolbar-item i,
.eq-header-compact .topbar .eq-account-link i {
    font-size: 19px;
    color: var(--eq-gray-900);
    margin: 0;
}

/* "Mi cuenta" con texto visible, estilo Falabella, y separador antes de wishlist/carrito */
.eq-header-compact .topbar .eq-account-item {
    width: auto;
}

.eq-header-compact .topbar .eq-account-link {
    flex-direction: row;
    gap: 7px;
    white-space: normal;
    line-height: 1.15;
    text-align: left;
}

.eq-header-compact .topbar .eq-account-link i {
    font-size: 18px;
}

.eq-header-compact .topbar .eq-account-link .text-label {
    display: block !important;
    font-size: 12.5px;
    font-weight: 700;
    max-width: 62px;
}

.eq-header-compact .topbar .toolbar-item .compare-icon,
.eq-header-compact .topbar .toolbar-item .cart-icon {
    position: relative;
    display: inline-flex;
}

.eq-header-compact .topbar .toolbar-item .count-label {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--eq-secondary);
    color: var(--eq-black);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.eq-header-compact .topbar .toolbar-item > a:hover i,
.eq-header-compact .topbar .eq-account-link:hover i {
    color: var(--eq-primary);
}

/* Único CTA del header (reemplaza login/buscador/categorías del script original) */
.eq-header-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--eq-accent);
    color: var(--eq-white) !important;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: var(--eq-transition);
}

.eq-header-wa-btn i {
    font-size: 16px;
    color: var(--eq-white) !important;
}

.eq-header-wa-btn:hover {
    background: var(--eq-accent-dark);
    transform: translateY(-1px);
}

/* --- 23.3 Responsive --- */
@media (max-width: 1199.98px) {
    .eq-categories-trigger .category-header h4 span.eq-cat-label {
        display: none;
    }

    .eq-categories-trigger .category-list {
        width: 340px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .eq-header-compact .topbar {
        padding: 4px 0;
    }
}

/* ==========================================================================
   24. FRANJA SUPERIOR DE CONTACTO
   ========================================================================== */

.eq-top-strip {
    background: var(--eq-primary);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.eq-top-strip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 34px;
}

/* Grupo informativo (teléfono · envíos · horario) con separadores sutiles */
.eq-top-strip-group {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.eq-top-strip-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .16);
    flex-shrink: 0;
}

.eq-top-strip-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.3;
    white-space: nowrap;
}

.eq-top-strip-item i {
    font-size: 13px;
    color: var(--eq-secondary);
    flex-shrink: 0;
}

.eq-top-strip-item a {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.eq-top-strip-item a:hover {
    color: var(--eq-secondary);
}

/* Acción de WhatsApp como píldora discreta a la derecha */
.eq-top-strip-wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px;
    margin: 4px 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--eq-transition);
}

.eq-top-strip-wa i {
    font-size: 14px;
    color: #25d366;
    transition: var(--eq-transition);
}

.eq-top-strip-wa:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.eq-top-strip-wa:hover i {
    color: #fff;
}

.eq-top-strip-wa:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .4);
    outline-offset: 2px;
}

/* En pantallas laptop justas, el horario cede antes que el resto */
@media (max-width: 1199.98px) {
    .eq-top-strip-item:nth-of-type(3),
    .eq-top-strip-group .eq-top-strip-sep:nth-of-type(2) {
        display: none;
    }
}

/* ==========================================================================
   25. BOTÓN "VER PRODUCTO" VISIBLE EN LA TARJETA
   ========================================================================== */

.eq-card-quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 5px 10px;
    background: var(--eq-accent);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--eq-radius-sm);
    transition: var(--eq-transition);
}

.eq-card-quote-btn:hover {
    background: var(--eq-accent-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--eq-shadow-accent);
}

.eq-card-quote-btn i {
    font-size: 13px;
    transition: var(--eq-transition);
}

.eq-card-quote-btn:hover i {
    transform: translateX(3px);
}

/* ==========================================================================
   26. BOTONES FLOTANTES DE REDES SOCIALES
   ========================================================================== */

.eq-float-social {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eq-float-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 21px;
    box-shadow: var(--eq-shadow-lg);
    transition: var(--eq-transition);
}

.eq-float-btn:hover {
    color: #fff;
    transform: scale(1.08);
}

.eq-float-whatsapp {
    background: #25d366;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
    animation: eqWaPulse 2.4s ease-in-out infinite;
}

.eq-float-whatsapp:hover {
    background: #1ebd5a;
}

/* Degradado oficial de Instagram (no el azul de Facebook que traía antes) */
.eq-float-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    font-size: 17px;
    box-shadow: 0 6px 20px rgba(214, 36, 159, .45);
}

.eq-float-instagram:hover {
    filter: brightness(1.08);
}

.eq-float-tiktok {
    background: #010101;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.eq-float-tiktok:hover {
    background: #232323;
}

.eq-float-tiktok-icon {
    width: 16px;
    height: 16px;
}

@keyframes eqWaPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, .45); }
    50% { box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 8px rgba(37, 211, 102, .18); }
}

@media (prefers-reduced-motion: reduce) {
    .eq-float-whatsapp {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .eq-float-social {
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .eq-float-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .eq-float-instagram {
        font-size: 15px;
    }

    .eq-float-tiktok-icon {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   27. BANNER 2 — variante chata (más baja) del banner de prevención
   ========================================================================== */

.eq-banner2 {
    padding-top: 8px;
}

.eq-banner2-inner {
    padding: 30px 44px;
    background-position: center;
}

.eq-banner2-inner .eq-prevention-content h2 {
    font-size: 26px;
    margin-bottom: 6px;
}

.eq-banner2-inner .eq-prevention-content p {
    margin-bottom: 16px;
}

.eq-banner2-inner .eq-hero-label {
    margin-bottom: 6px;
}

@media (max-width: 991.98px) {
    .eq-banner2-inner {
        padding: 26px 30px;
    }

    .eq-banner2-inner .eq-prevention-content h2 {
        font-size: 22px;
    }
}

@media (max-width: 767.98px) {
    /* El "padding: 26px 30px" del bloque de 991.98px de arriba también
       aplica en este rango (991.98 incluye a 767.98) y pisaba el
       padding-top del diseño "apilado" (sección 20). Se repone aquí,
       después en el orden del archivo, para que gane la cascada. */
    .eq-banner2-inner {
        padding-top: 300px;
    }
}

@media (max-width: 575.98px) {
    .eq-banner2-inner {
        /* Conserva el padding-top del diseño "apilado" (foto arriba, texto
           abajo en panel sólido) definido en la sección 20; solo se ajustan
           los laterales/abajo para pantallas muy angostas. */
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 22px;
    }

    .eq-banner2-inner .eq-prevention-content h2 {
        font-size: 19px;
    }
}

/* --- 28. Tamaño uniforme de imágenes en carruseles de productos --- */
.product-card .product-thumb {
    position: relative;
    height: 198px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 575.98px) {
    .product-card .product-thumb {
        height: 153px;
    }
}

/* ==========================================================================
   29. PALETA CORPORATIVA 2026 — refinamientos finales
   ========================================================================== */

/* --- 29.1 Estados de botón completos --- */
.btn:disabled,
.btn.disabled,
button[disabled].btn {
    opacity: .55;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Estado de carga: añadir la clase .eq-loading al botón desde JS existente */
.btn.eq-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.btn.eq-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eqBtnSpin .7s linear infinite;
}

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

/* --- 29.2 Accesibilidad: foco visible en navegación por teclado --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(27, 42, 65, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

.eq-quote-cta:focus-visible,
.eq-quote-btn:focus-visible,
.eq-card-quote-btn:focus-visible {
    outline-color: rgba(200, 16, 46, .45);
}

/* --- 29.3 Enlaces de acento puntuales --- */
.eq-category-link {
    color: var(--eq-primary);
    background: var(--eq-primary-soft);
}

.eq-category-icon {
    color: var(--eq-primary);
}

/* La insignia del contador sobre iconos gana contraste corporativo */
.eq-header-compact .topbar .toolbar-item .count-label {
    background: var(--eq-accent);
    color: #fff;
}

.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label,
.site-header .toolbar .toolbar-item > a > div > .cart-icon > .count-label {
    background: var(--eq-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   30. LIBRO DE RECLAMACIONES
   ========================================================================== */

.eq-claimbook-intro {
    background: var(--eq-primary-soft);
    border-radius: var(--eq-radius);
    padding: 22px 26px;
    margin-bottom: 22px;
}

.eq-claimbook-success {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ecfdf3;
    border: 1px solid #a6e9c5;
    border-radius: var(--eq-radius);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.eq-claimbook-success i {
    color: #12875a;
    font-size: 26px;
    margin-top: 2px;
}

.eq-claimbook-code {
    display: inline-block;
    background: var(--eq-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 4px;
}

.eq-claimbook-form {
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-sm);
    padding: 30px;
}

.eq-claimbook-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--eq-gray-100);
}

.eq-claimbook-section:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.eq-claimbook-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--eq-primary);
    margin-bottom: 16px;
}

.eq-claimbook-type-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.eq-claimbook-type-option {
    flex: 1 1 240px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 2px solid var(--eq-gray-100);
    border-radius: var(--eq-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--eq-transition);
    margin-bottom: 0;
}

.eq-claimbook-type-option:has(input:checked) {
    border-color: var(--eq-accent);
    background: var(--eq-accent-soft);
}

.eq-claimbook-type-option input {
    margin-top: 4px;
}

.eq-claimbook-type-option small {
    display: block;
    color: var(--eq-gray-500);
    font-size: 12.5px;
    margin-top: 2px;
}

/* Wordmark temporal mientras el cliente no sube su logo real desde el panel */
.eq-wordmark-logo .eq-wordmark-text {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--eq-accent);
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================================
   SOBRESCRITURA DEL AZUL DE FÁBRICA DEL TEMA BASE (#377dff)
   styles.min.css trae el color "primary" de Bootstrap cableado directo en
   decenas de selectores (botones, enlaces, tabs activos, precio de la
   ficha, subrayado de títulos de sección...). Ese azul NO pasa por
   $setting->primary_color ni por las variables de arriba, así que aunque
   la paleta esté bien configurada, la home se seguía viendo con acentos
   azules. Se sobrescribe aquí, selector por selector, con la paleta real.
   ========================================================================== */
a,
.wishlist-table .product-item .product-title > a:hover {
    color: var(--eq-primary);
}

a:hover {
    color: var(--eq-accent);
}

.slideable-menu .menu li.active > a,
.slideable-menu .menu li.active > span > a {
    border-left-color: var(--eq-accent);
    color: var(--eq-accent);
}

.sb-email:focus,
.sb-email:hover,
.text-primary {
    color: var(--eq-accent) !important;
}

.bg-primary {
    background-color: var(--eq-accent) !important;
}

.border-primary {
    border-color: var(--eq-accent) !important;
}

.form-control:focus,
.was-validated .form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--eq-accent) !important;
}

.custom-control .custom-control-input:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
    border-color: var(--eq-accent);
    background-color: var(--eq-accent);
}

.badge.badge-primary,
.btn-primary,
.btn-primary:hover {
    background-color: var(--eq-accent);
    border-color: var(--eq-accent);
}

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

.btn-outline-primary:hover {
    background-color: var(--eq-accent);
    color: var(--eq-white);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--eq-white);
    background: var(--eq-accent);
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
    border-color: var(--eq-accent);
    background-color: var(--eq-accent) !important;
}

.pagination li a:hover,
.pagination li span:hover,
.pagination li.active span,
.pagination li.active a,
.popular-category-slider.owl-carousel .owl-nav div:hover,
.toprated-slider.owl-carousel .owl-nav div:hover,
.flash-deal-slider.owl-carousel .owl-nav div:hover,
.features-slider.owl-carousel .owl-nav div:hover,
.newproduct-slider.owl-carousel .owl-nav div:hover,
.bestseller-slider.owl-carousel .owl-nav div:hover {
    background: var(--eq-accent);
}

.dropdown-menu .dropdown-item::before,
.list-group-item-action::before,
a.list-group-item::before {
    background-color: var(--eq-accent);
}

a.list-group-item:focus,
a.list-group-item:hover {
    color: var(--eq-accent);
}

.alert-primary {
    background-color: rgba(78, 0, 0, .08);
    color: var(--eq-accent);
}

.progress-bar {
    background-color: var(--eq-accent);
}

.tag.active,
.widget-light-skin .tag.active,
.shop-view > a.active {
    border-color: var(--eq-accent);
    background-color: var(--eq-accent);
}

.steps .step.active,
.product-gallery .product-thumbnails > li.active > a {
    border-color: var(--eq-accent);
}

.site-header .navbar .nav-inner .right-info i,
.genius-banner .inner-content p {
    color: var(--eq-accent);
}

.left-category-area .category-header h4,
.u-d-d i,
.details-page-top-right-content .countdown span,
.product-card .countdown span {
    background: var(--eq-accent);
}

.t-h-dropdown .t-h-dropdown-menu {
    border-top-color: var(--eq-accent);
}

.widget-title::after,
.section-title h2::before {
    background: var(--eq-accent);
}

.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label {
    background-color: var(--eq-accent);
}

/* Precio del servicio en las tarjetas del catálogo/home: el más visible de todos */
.product-card .product-price {
    color: var(--eq-accent);
}

/* ==========================================================================
   HOME "TAL CUAL" — rediseño solicitado por el cliente a partir del
   mockup de referencia. Header de una sola fila, hero estático, tabs de
   servicios, "Así te atendemos" (con disclaimer), franja oscura de
   Paquetes & Promociones, Nosotros y CTA final de 3 segmentos.
   ========================================================================== */

/* --- Header de una sola fila --- */
.eq-header-single .topbar {
    padding: 10px 0;
}

.eq-wordmark-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.eq-wordmark-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--eq-primary-soft);
    color: var(--eq-accent);
    font-size: 17px;
    flex-shrink: 0;
}

.eq-inline-nav-center {
    justify-content: center;
    flex: 1 1 auto;
}

.eq-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.eq-nav-dropdown > a i {
    font-size: 10px;
    margin-left: 4px;
    vertical-align: middle;
    transition: var(--eq-transition);
}

.eq-nav-dropdown:hover > a i {
    transform: rotate(180deg);
}

.eq-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: var(--eq-white);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: var(--eq-transition);
    z-index: 60;
}

.eq-nav-dropdown:hover .eq-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.eq-nav-dropdown-menu a {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--eq-gray-700);
    white-space: nowrap;
}

.eq-nav-dropdown-menu a::after {
    display: none;
}

.eq-nav-dropdown-menu a:hover {
    background: var(--eq-primary-soft);
    color: var(--eq-primary);
}

.eq-header-cta-group {
    gap: 10px;
}

/* Se cualifica con .eq-header-compact .topbar para pesar más que la regla
   vieja ".eq-header-compact .topbar .toolbar-item > a" (padding:6px, etc.)
   que si no, le gana por especificidad y aplasta el botón CTA */
.eq-header-compact .topbar .eq-header-pill-btn,
.eq-header-pill-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--eq-accent) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 11px 22px !important;
    border-radius: 100px;
    white-space: nowrap;
    transition: var(--eq-transition);
}

/* Ícono de WhatsApp dentro del propio botón: claro, sin fondo ni círculo propio */
.eq-header-pill-btn i {
    font-size: 16px;
    color: #fff !important;
}

.eq-header-compact .topbar .eq-header-pill-btn:hover,
.eq-header-pill-btn:hover {
    background: var(--eq-accent-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--eq-shadow-accent);
}

/* --- Encabezados de sección centrados, con eyebrow --- */
.eq-eyebrow {
    display: inline-block;
    color: var(--eq-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.eq-section-head-center {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 40px;
}

.eq-section-head-center h2 {
    display: block;
    padding-bottom: 14px;
}

.eq-section-head-center h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.eq-section-head-center p {
    font-size: 15px;
}

/* --- Hero estático --- */
.eq-hero2 {
    position: relative;
    min-height: 640px;
    padding-top: 100px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .eq-hero2 {
        padding-top: 76px;
    }
}

.eq-hero2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 16, 13, .55) 0%, rgba(22, 16, 13, .78) 60%, rgba(22, 16, 13, .92) 100%);
}

.eq-hero2 .container {
    position: relative;
    z-index: 2;
}

.eq-hero2-content {
    max-width: 620px;
}

.eq-hero2-icons {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    margin-top: 54px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.eq-hero2-icons::-webkit-scrollbar {
    display: none;
}

.eq-hero2-icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.eq-hero2-icon-item .eq-benefit-icon {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 16px;
    flex-shrink: 0;
}

.eq-hero2-icon-item span {
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    font-weight: 600;
    max-width: 95px;
    line-height: 1.25;
    white-space: normal;
}

.eq-hero2-promo-card {
    position: absolute;
    right: 90px;
    bottom: 40px;
    z-index: 3;
    overflow: hidden;
    background: linear-gradient(155deg, var(--eq-accent) 0%, var(--eq-accent-dark) 100%);
    color: #fff;
    border: 1px solid rgba(243, 235, 224, .3);
    border-radius: 6px;
    padding: 20px 40px;
    box-shadow: var(--eq-shadow-accent);
    text-align: center;
    min-width: 270px;
}

/* Motivo decorativo de hojas, apenas insinuado detrás del texto */
.eq-hero2-promo-leaf {
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 130px;
    height: 130px;
    fill: var(--eq-secondary);
    opacity: .22;
    pointer-events: none;
}

.eq-hero2-promo-card .eq-hero2-promo-label {
    position: relative;
    display: block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .85;
    margin-bottom: 8px;
}

.eq-hero2-promo-card .eq-hero2-promo-value {
    position: relative;
    display: block;
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 8px;
}

.eq-hero2-promo-card .eq-hero2-promo-sub {
    position: relative;
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
}

@media (max-width: 991.98px) {
    .eq-hero2 {
        min-height: 0;
        padding-bottom: 40px;
    }

    /* En mobile/tablet no cabe flotando encima del contenido sin taparlo:
       pasa a formar parte del flujo normal, debajo de todo lo demás.
       Sigue "position: relative" (no "static") para que la hoja decorativa
       de adentro (position: absolute) se siga anclando a la tarjeta. */
    .eq-hero2-promo-card {
        position: relative;
        display: table;
        margin: 28px auto 0;
        right: auto;
        bottom: auto;
        transform: none;
    }
}

/* --- Nuestros Servicios: tabs + grid --- */
.eq-services2 {
    padding: 64px 0;
    background-color: var(--eq-primary-dark);
    background-image: url('../../../core/public/storage/images/soulspa-fondo-promos.png');
    background-size: cover;
    background-position: center;
}

.eq-services2 .eq-eyebrow {
    color: var(--eq-secondary);
}

.eq-services2 .eq-section-head-center h2 {
    color: #fff;
}

.eq-services2 .eq-section-head-center h2::after {
    background: var(--eq-secondary);
}

.eq-services2 .eq-section-head-center p {
    color: rgba(255, 255, 255, .7);
}

.eq-services2-tab {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}

.eq-services2-tab:hover {
    border-color: var(--eq-secondary) !important;
    color: var(--eq-secondary) !important;
}

.eq-services2-tab.active {
    background: var(--eq-secondary) !important;
    border-color: var(--eq-secondary) !important;
    color: var(--eq-primary) !important;
}

.eq-service-empty-card:not(.has-photo) {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .8);
}

/* Tarjetas de servicio translúcidas, mismo tratamiento que las de
   "Paquetes & Promociones" (fondo vino con cristal esmerilado) */
.eq-services2 .product-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
    position: relative;
    overflow: hidden;
}

/* Línea de acento arriba al pasar el cursor, igual que las tarjetas de paquetes */
.eq-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--eq-secondary), var(--eq-white));
    opacity: 0;
    transition: var(--eq-transition);
    z-index: 2;
}

.eq-service-card:hover::before {
    opacity: 1;
}

.eq-service-card:hover {
    transform: translateY(-6px);
}

/* Insignia de duración sobre la foto */
.eq-service-card-duration {
    position: absolute;
    z-index: 1;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 16, 13, .72);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 100px;
}

.eq-service-card-duration i {
    color: var(--eq-secondary);
    font-size: 12px;
}

/* Precio grande + botón de reserva, en vez del link de texto chico */
.eq-service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.eq-service-card-price {
    font-size: 19px;
    font-weight: 700;
    color: var(--eq-secondary);
    white-space: nowrap;
}

.eq-service-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--eq-secondary);
    color: var(--eq-primary) !important;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 100px;
    white-space: nowrap;
    transition: var(--eq-transition);
}

.eq-service-card-btn:hover {
    background: #fff;
    transform: translateX(2px);
}

/* Tarjeta más compacta: menos aire en la foto, el cuerpo y el pie */
.eq-services2 .product-thumb {
    height: 150px !important;
}

.eq-services2 .product-card-body {
    padding: 12px 16px 14px;
}

.eq-services2 .product-card .product-title {
    font-size: 19px;
    min-height: auto;
    margin-bottom: 2px;
}

.eq-services2 .product-card .text-muted {
    font-size: 12.5px;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eq-services2 .eq-service-card-footer {
    margin-top: 8px;
    padding-top: 8px;
}

@media (max-width: 575.98px) {
    .eq-services2 .product-thumb {
        height: 130px !important;
    }
}

.eq-services2 .product-card .product-title a {
    color: #fff;
}

.eq-services2 .product-card .product-title a:hover {
    color: var(--eq-secondary);
}

.eq-services2 .product-card .product-category a {
    color: var(--eq-secondary);
}

.eq-services2 .product-card .text-muted {
    color: rgba(255, 255, 255, .68) !important;
}

.eq-services2 .eq-service-card-meta {
    color: rgba(255, 255, 255, .7);
}

.eq-services2 .eq-service-card-meta i {
    color: var(--eq-secondary);
}

.eq-services2 .eq-card-book-link {
    color: var(--eq-secondary);
}

.eq-services2 .eq-card-book-link:hover {
    color: #fff;
}

.eq-services2 .eq-service-empty-card i {
    color: var(--eq-secondary);
}

.eq-services2 .eq-service-empty-card h4 {
    color: #fff;
}


.eq-services2-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.eq-services2-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: var(--eq-transition);
}

.eq-service-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 10px;
    font-size: 12.5px;
    color: var(--eq-gray-500);
    font-weight: 600;
}

.eq-service-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.eq-service-card-meta i {
    color: var(--eq-accent);
}

.eq-card-book-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--eq-accent);
    margin-top: 4px;
}

.eq-card-book-link:hover {
    color: var(--eq-primary);
}

.eq-service-empty-card {
    text-align: center;
    padding: 50px 20px;
    background: var(--eq-gray-50);
    border: 1px dashed var(--eq-gray-300);
    border-radius: var(--eq-radius-lg);
    color: var(--eq-gray-500);
}

.eq-service-empty-card i {
    font-size: 26px;
    color: var(--eq-accent);
    margin-bottom: 10px;
    display: inline-block;
}

.eq-service-empty-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--eq-gray-700);
    margin-bottom: 4px;
}

/* Variante con foto de ambientación real (categoría sin servicios cargados aún) */
.eq-service-empty-card.has-photo {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border: none;
    color: var(--eq-white);
}

.eq-service-empty-card.has-photo i,
.eq-service-empty-card.has-photo h4 {
    color: var(--eq-white);
}

.eq-service-empty-card.has-photo p {
    color: rgba(255, 255, 255, .85);
}

.eq-services2-loadmore {
    text-align: center;
    margin-top: 30px;
}

/* Mismo diseño que "Ver más paquetes y promociones": píldora con borde,
   sin usar .btn/.btn-primary (así se evita pelear con esas reglas globales) */
.eq-services2-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--eq-secondary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 26px;
    border: 1px solid rgba(243, 235, 224, .35);
    border-radius: 100px;
    cursor: pointer;
    transition: var(--eq-transition);
}

.eq-services2-loadmore-btn:hover,
.eq-services2-loadmore-btn:focus,
.eq-services2-loadmore-btn:active {
    color: var(--eq-primary);
    background: var(--eq-secondary);
    border-color: var(--eq-secondary);
    outline: none;
}

/* --- Así te atendemos --- */
.eq-care {
    padding: 22px 0;
    background-color: var(--eq-primary-dark);
    background-image: url('../../../core/public/storage/images/soulspa-fondo-promos.png');
    background-size: cover;
    background-position: center;
}

.eq-care .eq-eyebrow {
    color: var(--eq-secondary);
}

.eq-care .eq-section-head-center h2 {
    color: #fff;
}

.eq-care .eq-section-head-center h2::after {
    background: var(--eq-secondary);
}

/* Todo (título + tarjetas + aviso) va dentro de un único contenedor: se ve
   más ordenado, sobre todo en móvil, en vez de piezas sueltas flotando */
.eq-care-box {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--eq-radius-lg);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
    padding: 20px 22px;
}

@media (max-width: 575.98px) {
    .eq-care-box {
        padding: 16px 14px;
    }
}

.eq-care .eq-section-head {
    margin-bottom: 14px;
}

.eq-care .eq-section-head h2 {
    margin-bottom: 0;
}

/* Tarjetas centradas, más livianas ahora que están dentro de la caja grande */
/* Diseño horizontal: ícono circular grande a la izquierda, texto a la
   derecha, sin tarjeta propia — separadas por una línea vertical fina */
.eq-care .eq-benefit-row {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 18px;
    transition: var(--eq-transition);
}

.eq-care .eq-benefit-row:hover {
    transform: none;
    box-shadow: none;
}

@media (min-width: 992px) {
    .eq-care [class*="col-lg-4"]:not(:last-child) .eq-benefit-row {
        border-right: 1px solid rgba(255, 255, 255, .16);
    }
}

.eq-care .eq-benefit-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 24px;
    margin-bottom: 0;
    flex-shrink: 0;
    background: var(--eq-secondary);
    color: var(--eq-accent);
}

.eq-care .eq-benefit h4 {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: 4px;
    color: #fff;
}

.eq-care .eq-benefit p {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .68);
    margin-bottom: 2px;
}

.eq-care .eq-benefit-highlight {
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--eq-secondary) !important;
}

.eq-care .eq-benefit-note {
    font-size: 11.5px;
    font-style: italic;
    margin-top: 2px;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 767.98px) {
    .eq-care .eq-benefit-row {
        padding: 10px 8px;
    }

    .eq-care .eq-benefit-icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }
}

/* En móvil, las 3 tarjetas pasan a ser un carrusel que se desliza solo
   (ver script en theme1.blade.php) en vez de apilarse una debajo de otra */
@media (max-width: 767.98px) {
    #eqCareCards {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 -4px;
    }

    #eqCareCards::-webkit-scrollbar {
        display: none;
    }

    #eqCareCards > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        padding: 0 4px;
    }
}

/* Flechas del carrusel de "Así te atendemos" (solo visibles en móvil, d-lg-none) */
.eq-care-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.eq-care-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--eq-gray-100);
    background: var(--eq-white);
    color: var(--eq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--eq-transition);
}

.eq-care-arrow:hover,
.eq-care-arrow:active {
    background: var(--eq-accent);
    border-color: var(--eq-accent);
    color: #fff;
}

.eq-care-disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    background: var(--eq-primary-soft);
    border-left: 3px solid var(--eq-accent);
    border-radius: var(--eq-radius);
    padding: 10px 16px;
}

.eq-care-disclaimer i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--eq-white);
    font-size: 13px;
    color: var(--eq-accent);
}

.eq-care-disclaimer p {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--eq-primary);
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .eq-care-disclaimer {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Paquetes & Promociones: franja oscura --- */
.eq-promos-dark {
    position: relative;
    padding: 70px 0;
    background-color: var(--eq-primary-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Resplandores decorativos en las esquinas para que el fondo no se sienta plano */
.eq-promos-dark::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    bottom: -240px;
    right: -160px;
    background: radial-gradient(circle, rgba(243, 235, 224, .08) 0%, rgba(243, 235, 224, 0) 70%);
}

.eq-promos-dark .container {
    position: relative;
    z-index: 1;
}

.eq-promos-dark .eq-eyebrow {
    color: var(--eq-secondary);
    padding: 5px 16px;
    border: 1px solid rgba(243, 235, 224, .35);
    border-radius: 100px;
}

.eq-promos-dark .eq-section-head-center h2 {
    color: #fff;
}

.eq-promos-dark .eq-section-head-center h2::after {
    background: var(--eq-accent);
    height: 3px !important;
    width: 46px !important;
}

.eq-promos-dark .eq-section-head-center p {
    color: rgba(255, 255, 255, .68);
}

.eq-promo2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    transition: var(--eq-transition);
}

.eq-promo2-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--eq-accent), var(--eq-secondary));
    opacity: 0;
    transition: var(--eq-transition);
}

.eq-promo2-card:hover {
    transform: translateY(-6px);
    border-color: rgba(243, 235, 224, .3);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(243, 235, 224, .08);
}

.eq-promo2-card:hover::before {
    opacity: 1;
}

.eq-promo2-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.eq-promo2-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 16, 13, 0) 55%, rgba(22, 16, 13, .55) 100%);
}

.eq-promo2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25, .65, .35, 1);
}

.eq-promo2-card:hover .eq-promo2-thumb img {
    transform: scale(1.08);
}

.eq-promo2-badge {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    background: var(--eq-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.eq-promo2-body {
    padding: 22px 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.eq-promo2-body h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 10px;
}

.eq-promo2-bullets {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eq-promo2-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.5;
}

.eq-promo2-bullets li i {
    color: var(--eq-secondary);
    font-size: 12px;
    margin-top: 4px;
    flex-shrink: 0;
}

.eq-promo2-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: auto 0 18px;
}

.eq-promo2-price {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.eq-promo2-price-prev {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    text-decoration: line-through;
}

.eq-promo2-card .eq-btn {
    background-color: var(--eq-secondary) !important;
    border-color: var(--eq-secondary) !important;
    color: var(--eq-primary) !important;
    width: 100%;
    justify-content: center;
}

.eq-promo2-card .eq-btn::before {
    display: none !important;
}

.eq-promo2-card .eq-btn:hover {
    background-color: #fff !important;
    border-color: #fff !important;
}

.eq-promos-dark-more {
    text-align: center;
    margin-top: 34px;
}

.eq-promos-dark-more a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--eq-secondary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 26px;
    border: 1px solid rgba(243, 235, 224, .35);
    border-radius: 100px;
    transition: var(--eq-transition);
}

.eq-promos-dark-more a:hover {
    color: var(--eq-primary);
    background: var(--eq-secondary);
    border-color: var(--eq-secondary);
}

/* --- Nosotros: datos rápidos --- */
.eq-about-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 26px;
}

.eq-about-facts .eq-benefit {
    flex: 1 1 160px;
}

/* En móvil, 3 tarjetas con flex-wrap dejan la última "huérfana" estirada a
   todo el ancho en su propia fila (se ve desalineada); se apilan en una
   sola columna, todas del mismo ancho */
@media (max-width: 575.98px) {
    .eq-about-facts {
        flex-direction: column;
        gap: 14px;
    }

    .eq-about-facts .eq-benefit {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* --- CTA final: 3 segmentos --- */
.eq-cta-strip3 {
    padding: 0;
}

.eq-cta-strip3-inner {
    background: var(--eq-primary-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 22px 30px;
}

.eq-cta-strip3-seg {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--eq-primary);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    line-height: 1.4;
    transition: var(--eq-transition);
}

a.eq-cta-strip3-seg:hover {
    color: var(--eq-accent);
}

a.eq-cta-strip3-seg:hover .eq-cta-strip3-icon {
    transform: scale(1.08);
}

.eq-cta-strip3-seg strong {
    color: var(--eq-primary);
    font-weight: 700;
    font-size: 14.5px;
}

.eq-cta-strip3-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: var(--eq-transition);
}

.eq-cta-strip3-icon-fill {
    background: var(--eq-primary);
    color: var(--eq-secondary);
}

.eq-cta-strip3-icon-outline {
    background: transparent;
    border: 2px solid var(--eq-primary);
    color: var(--eq-primary);
}

.eq-cta-strip3-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--eq-primary);
    color: #fff !important;
    padding: 15px 28px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: var(--eq-transition);
}

.eq-cta-strip3-btn:hover {
    background: var(--eq-accent);
    transform: translateY(-2px);
    box-shadow: var(--eq-shadow-accent);
}

.eq-cta-strip3-wa {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eq-white);
    color: var(--eq-primary);
    font-size: 21px;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.eq-cta-strip3-wa:hover {
    background: #25d366;
    color: #fff;
    transform: translateY(-2px) scale(1.05);
}

@media (max-width: 767.98px) {
    .eq-cta-strip3-inner {
        justify-content: center;
        text-align: center;
    }

    .eq-cta-strip3-seg {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- Footer: columnas ampliadas --- */
.eq-footer-col-title {
    color: var(--eq-secondary);
}

.eq-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.eq-footer-links a {
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    transition: var(--eq-transition);
}

.eq-footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.eq-footer-about-text {
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.7;
    margin: 12px 0 16px;
}

.eq-footer-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.eq-footer-logo-row .eq-wordmark-icon {
    background: rgba(255, 255, 255, .1);
    color: var(--eq-secondary);
}

.eq-footer-logo-row .eq-wordmark-text {
    color: #fff;
    font-family: 'Raleway', 'Inter', 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* ==========================================================================
   CATÁLOGO DE SERVICIOS — cabecera + grilla vertical de 2 columnas
   (tarjetas horizontales: imagen a la izquierda, info a la derecha)
   ========================================================================== */
.eq-catalog-hero {
    padding: 40px 0 30px;
    background: var(--eq-gray-50);
}

.eq-catalog-hero .eq-section-head h1 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 10px;
}

.eq-catalog-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    overflow: hidden;
    transition: var(--eq-transition);
}

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

.eq-catalog-card-thumb {
    position: relative;
    flex: 0 0 42%;
    max-width: 42%;
    overflow: hidden;
}

.eq-catalog-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    object-position: center;
    transition: transform .55s cubic-bezier(.25, .65, .35, 1);
}

.eq-catalog-card:hover .eq-catalog-card-thumb img {
    transform: scale(1.06);
}

.eq-catalog-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--eq-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
}

.eq-catalog-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    min-width: 0;
}

.eq-catalog-card-body .product-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.eq-catalog-card-body p.text-muted {
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eq-catalog-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.eq-catalog-card-more {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--eq-gray-500);
}

.eq-catalog-card-more:hover {
    color: var(--eq-primary);
}

@media (max-width: 575.98px) {
    .eq-catalog-card {
        flex-direction: column;
    }

    .eq-catalog-card-thumb {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .eq-catalog-card-thumb img {
        min-height: 170px;
    }
}

/* Aviso de posicionamiento en la página de Contacto (mismo patrón que el del inicio) */
.eq-contact-disclaimer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    background: var(--eq-primary-soft);
    border-left: 3px solid var(--eq-accent);
    border-radius: var(--eq-radius);
    padding: 16px 20px;
}

.eq-contact-disclaimer i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--eq-white);
    font-size: 16px;
    color: var(--eq-accent);
}

.eq-contact-disclaimer p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eq-primary);
    line-height: 1.5;
}

/* ==========================================================================
   TESTIMONIOS — contenido de EJEMPLO, ver nota en el bloque del blade.
   ========================================================================== */
.eq-testimonials {
    position: relative;
    padding: 56px 60px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.eq-testimonials .container {
    position: relative;
    z-index: 1;
}

.eq-testimonials-note {
    font-size: 12.5px;
    font-style: italic;
    color: var(--eq-gray-500);
}

.eq-testimonials-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--eq-gray-300);
    background: var(--eq-white);
    color: var(--eq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--eq-shadow-sm);
    transition: var(--eq-transition);
}

.eq-testimonials-arrow:hover {
    background: var(--eq-accent);
    border-color: var(--eq-accent);
    color: #fff;
}

.eq-testimonials-prev {
    left: 14px;
}

.eq-testimonials-next {
    right: 14px;
}

.eq-testimonials-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    margin-top: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.eq-testimonials-track::-webkit-scrollbar {
    display: none;
}

.eq-testimonials-col {
    flex: 0 0 calc(33.333% - 15px);
    max-width: calc(33.333% - 15px);
    scroll-snap-align: start;
}

@media (max-width: 767.98px) {
    .eq-testimonials {
        padding: 44px 46px;
    }

    .eq-testimonials-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.eq-testimonial-card {
    height: 100%;
    background: var(--eq-white);
    border: 1px solid var(--eq-gray-100);
    border-radius: var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-sm);
    padding: 26px 24px;
    text-align: center;
}

.eq-testimonial-stars {
    color: var(--eq-accent);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.eq-testimonial-text {
    font-size: 13.5px;
    color: var(--eq-gray-700);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 18px;
}

.eq-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--eq-primary);
}

.eq-testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eq-primary-soft);
    color: var(--eq-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.eq-testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.eq-testimonials-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--eq-gray-300);
    transition: var(--eq-transition);
    cursor: pointer;
}

.eq-testimonials-dot.active {
    background: var(--eq-accent);
    width: 20px;
    border-radius: 4px;
}

/* Precio grande y visible en la ficha de servicio (antes no existía, solo
   aparecía chico dentro del texto de la descripción) */
.eq-pd-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 6px 0 14px;
}

.eq-pd-price {
    font-size: 34px;
    font-weight: 700;
    color: var(--eq-accent);
    line-height: 1;
}

.eq-pd-price-prev {
    font-size: 18px;
    color: var(--eq-gray-500);
    text-decoration: line-through;
}

.eq-pd-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eq-gray-500);
}

.eq-pd-duration i {
    color: var(--eq-accent);
}