@font-face {
    font-family: 'Impact';
    src: url('../fonts/impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
  --bg-color: rgb(254 254 254 / 0%) ;
  --bg-color-white: rgb(255 255 255 / 100%);
  --white-color: #f1f1f1;
  --main-color: #d37c25;
  --secondary-color: #7a8274;
  --font-default: 'Montserrat', serif;
}

html, body {
    font-family: var(--font-default);
}

/* ============================================================
   Barra superior de avisos (envios + redes) - Grupo 930.
   43px, teal #335e68, esquinas inferiores redondeadas, en el flujo.
   ============================================================ */
.hs-topbar {
    position: fixed;             /* fija arriba; se oculta al bajar y aparece al subir (JS) */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    min-height: 43px;
    box-sizing: border-box;
    /* Antes esto era teal al 70% + `backdrop-filter: blur(28px) brightness(2)`. El resultado
       en pantalla es EXACTAMENTE este color (medido: la diferencia era menor del 1%), pero el
       desenfoque obligaba al navegador a recalcular toda la franja en cada fotograma mientras
       se desplaza la pagina, y por eso la barra iba a tirones. Color plano: se ve igual y va fina. */
    background: #708E95;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;          /* centrado vertical (1 o 2 lineas) */
    justify-content: center;
    padding: 5px 60px;
    /* capa propia en la GPU: la barra no se vuelve a pintar con el resto de la pagina */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.28s ease;
}
.hs-topbar--hidden { transform: translate3d(0, -100%, 0); }
.hs-topbar__text {
    margin: 0;
    min-width: 0;                 /* deja envolver el texto en movil real */
    overflow-wrap: break-word;
    text-align: center;
    font-family: 'Lora', Georgia, serif;
    font-size: 14px;
    letter-spacing: 0.07em;
    color: #ffffff;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    line-height: 1.25;
}
.hs-topbar__social {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
}
.hs-topbar__social .social-icons-wrapper {
    gap: 1.1rem;
    justify-content: flex-end;
    margin: 0;
}
.hs-topbar__social .social-link {
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    transition: opacity 0.15s ease;
}
.hs-topbar__social .social-link:hover { opacity: 0.75; }

@media (max-width: 991.98px) {
    .hs-topbar { padding: 5px 20px; }
    .hs-topbar__text { font-size: 12.5px; }
    .hs-topbar__social { right: 3%; }
    .hs-topbar__social .social-link { font-size: 14px; }
}
@media (max-width: 575.98px) {
    .hs-topbar { padding: 6px 14px; border-radius: 0 0 14px 14px; }
    .hs-topbar__text { font-size: 11px; letter-spacing: 0.04em; }
    .hs-topbar__social { display: none; }   /* movil: prioriza el texto de envios */
}

header{
    margin: 4% 0 0;

    .store-menu{
       .current-menu-item a {
            color: var(--main-color) !important;
        }

        .navbar-nav::-webkit-scrollbar {
            display: none;
        }
        .navbar-nav {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .navbar-nav .menu-item a {
            font-family: 'Montserrat', Arial, sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            color: var(--secondary-color);
            text-decoration: none;
            padding: 4px 8px;
        }
    }

    .main-navigation {
        background-color: var(--bg-color) !important;
    }
    .logo img {
        max-width: 194px;      /* escritorio: 194px de ancho (movil escala solo con img-fluid) */
    }

    /* Escritorio: separaciones del menu horizontal (80px del logo, 45px al contenido).
       Se anula el margen superior del contenido para que el hueco lo de solo el header.
       Nota: .my-5 lleva !important, hace falta especificidad (main.my-5, .row.my-5). */
    @media (min-width: 992px) {
        margin-bottom: 45px;
        .store-menu { margin-top: 64px; }                       /* 16px existentes + 64 = 80px del logo */
        /* el hueco de 45px lo da SOLO el header: se anula el margen superior del contenido,
           tanto del main (archivo/simple/evento) como de su primer bloque (fila, hero...) */
        & + main.my-5,
        & + main.hs-event { margin-top: 0 !important; }
        & + main > *:first-child { margin-top: 0 !important; }
    }

    /* Forzar que la hamburguesa sea siempre visible */
    .main-navigation .navbar-toggler {
        display: block !important;
    }
    .main-navigation .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }

    /* (El desplegable del menu .custom-dropdown-menu se estila a nivel superior
       al final del archivo, porque el panel se mueve al <body> via JS para
       poder centrarlo sobre el viewport, igual que el buscador.) */

    .search-wrapper {
        position: relative;
    }
    .search-result-item {
        img{
           width:55px; 
           height:55px; 
           object-fit:cover; 
        }
        h6{
           font-size: 14px; 
        }
        small, a{
           font-size: 11px; 
        }
        a{
            border-radius: 1rem;
        }
    }


    .widget_shopping_cart_content .cart_list {
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 350px;
        overflow-y: auto;
    }

    .widget_shopping_cart_content .cart_list li {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid var(--white-color);
        position: relative;
        font-size: 14px;
    }

    .widget_shopping_cart_content .cart_list li img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        margin-right: 15px;
        border-radius: 8px;
        order: -1;
    }

    .widget_shopping_cart_content .cart_list li a.remove {
        position: absolute;
        right: 0;
        top: 10px;
        color: #dc3545 !important; /* Rojo Bootstrap */
        font-size: 18px;
        text-decoration: none;
    }

    .widget_shopping_cart_content .total {
        padding: 15px 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border-top: 2px solid var(--white-color);
    }

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

    .widget_shopping_cart_content .buttons a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
    }

    .widget_shopping_cart_content .buttons a.checkout {
        background-color: #198754;
        color: var(--white-color);
    }

    .widget_shopping_cart_content .buttons a:not(.checkout) {
        background-color: #f8f9fa;
        color: #333;
        border: 1px solid var(--white-color);
    }

    .mini-cart {
        z-index: 9999;
    }

    @media (min-width: 992px) {
        .custom-nav-wrapper {
            flex-direction: row-reverse !important;
        }
        .search-wrapper {
            max-width: 30rem; 
            margin-left: 20px !important;
            margin-right: 0 !important;
        }

        .navbar-collapse {
            flex-grow: 1;
        }

        #store-navbar li {
            margin-left: 0;
            margin-right: 20px; 
            flex: 0 0 auto;
        }
        #ajax-search-results {
           display: none; 
           max-height: 400px; 
           overflow-y: auto;
           width: 100%;
        }
    }
}

.product-page{
    .woocommerce-product-gallery {
        position: relative;
    }

    .woocommerce-product-gallery .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
        list-style: none;
        justify-content: center;
    }

    .woocommerce-product-gallery .flex-control-thumbs li {
        flex: 0 0 100px; 
        max-width: 100px;
        cursor: pointer;
    }

    .woocommerce-product-gallery .flex-control-thumbs img {
        width: 100px !important;
        height: 100px !important;
        opacity: 0.5;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        border-radius: 8px;
        object-fit: cover;
        aspect-ratio: 1/1;
    }

    .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
    .woocommerce-product-gallery .flex-control-thumbs img:hover {
        opacity: 1;
        border-color: var(--brand-color, #0d6efd);
    }

    .flex-direction-nav {
        list-style: none;
        padding: 0;
    }

    .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
        max-width: 300px;
        height: 300px !important;
        min-height: 300px;
        object-fit: contain;
        margin: 0 auto;
        display: block;
    }

    .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img[src$=".svg"] {
        width: 100% !important; 
        height: 300px !important;
        min-height: 300px;
        object-fit: contain;
    }
}

main{
    .section-title {
        font-family: 'Impact', sans-serif;
        font-weight: 400;                 /* Impact Regular (antes 900 = negrita forzada) */
        text-transform: uppercase;
        letter-spacing: 0.071em;          /* AV 71 (Illustrator/Photoshop = 71/1000 em) */
        color: #1a1a1a;
        margin: 0;
        line-height: 1.1;
    }
    .section-title span {
        position: relative;
        display: inline-block;
        padding-bottom: 12px;
    }
    .section-title span::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--main-color);
    }

    /* Cabecera de seccion con herramientas a la derecha (titulo "Nuevos Productos" + boton
       de Filtros). El titulo NO se mueve: sigue centrado en la fila. */
    .hs-section-head {
        position: relative;
    }
    /* movil y tablet: el boton cae justo debajo del titulo, centrado */
    .hs-section-head__tools {
        display: flex;
        justify-content: center;
        margin: 0 0 0.5rem;
    }
    /* escritorio: pegado a la derecha y a la altura del texto del titulo. El alto util
       es el del bloque menos los 12px que el <span> reserva para el subrayado. */
    @media (min-width: 992px) {
        .hs-section-head__tools {
            position: absolute;
            top: 0;
            right: 0;
            height: calc(100% - 12px);
            margin: 0;
            align-items: center;
        }
    }

    .custom-product-card {
        border: 1px solid #eef1f5 !important;
        border-radius: 26px !important;
        /* Sombra de marca (teal #335E68, Y 8, desenfoque 12), como el carrusel de categorias
           de Warhammer pero un punto mas suave: alli va al 30%, aqui al 22%. */
        box-shadow: 0 8px 12px rgba(51, 94, 104, 0.22) !important;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    /* Al pasar el raton NO crece: misma huella, solo mas intensa. Si crece se sale del hueco
       del carril del home y se corta (paso con 0 12px 18px -> 30px de sombra en 24px de hueco). */
    .custom-product-card:hover {
        box-shadow: 0 8px 12px rgba(51, 94, 104, 0.38) !important;
    }
    .product-card-img-wrapper {
        padding: 15px 15px 0 15px;
        text-align: center;
    }
    .product-card-img-wrapper img {
        border-radius: 18px;
        object-fit: contain;
    }
    .product-card-title {
        /* tamaño/peso original (antes de tocar hoy), color oscuro */
        font-size: 0.95rem !important;
        font-weight: 600;
        color: #2d3748;
        line-height: 1.4;
        margin: 0;
        /* Limitador de líneas por si el título es muy largo */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card-price span.woocommerce-Price-amount {
        /* tamaño original + color teal (apariencia actual) */
        color: #335e68 !important;
        font-weight: 700;
        font-size: 1.1rem;
    }
    .product-card-price del span.woocommerce-Price-amount {
        font-size: 0.85rem;
        color: #a0aec0 !important;
        font-weight: 400;
    }
    .btn-add-to-cart-circle {
        background-color: #d28712 !important;   /* naranja del diseño Grupo 927 */
        color: #ffffff !important;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        padding: 0 !important;
        border: none !important;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    .btn-add-to-cart-circle i {
        font-size: 1.5rem;
    }
    /* icono carrito+"+" del diseño (Grupo 927) */
    .btn-add-to-cart-circle .hs-cart-svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .btn-add-to-cart-circle:hover {
        background-color: var(--main-color) !important;
    }
    .btn-add-to-cart-circle.disabled-out-stock {
        background-color: #cbd5e1 !important;
        color: #94a3b8 !important;
        cursor: not-allowed;
    }
    .category-slider-item {
        a.btn-see-all-pill {
            display: inline-block;
            text-decoration: none;
            text-transform: uppercase;
            font-family: 'Lora', Georgia, serif;
            font-weight: 700;
            font-size: 13px !important;
            color: #1a1a1a !important;
            letter-spacing: 0.07em;
            padding: 5px 26px !important;
            border-radius: 999px !important;
            background: #dbdbdb !important;
            border: none !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14),
                    0 1px 2px rgba(0, 0, 0, 0.10) !important;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            &:hover {
                color: #000 !important;
                background: #d0d0d0 !important;
            }
            &:active {
                background: #cfcfcf !important;
                box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2) !important;
            }
        }
    }
    .featured-slider-wrapper {
        /* Ancho COMPLETO: el carrusel rompe el container y llega al borde de la pantalla */
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 0;

        /* Flechas: circulos grises pequenos (mismo gris que los numeros de la barra de
           paginacion) y separados del borde de la pantalla, no pegados. */
        .slider-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background: #9e9a9a;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
            z-index: 10;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        /* chevron en SVG: los dashicons NO se cargan en el front, el circulo salia vacio */
        .slider-control .hs-slider-chevron {
            width: 9px;
            height: 15px;
            display: block;
        }
        .slider-control:hover {
            background: #d28712;
            color: #ffffff;
        }

        /* +15px extra por el desbordamiento del wrapper (empieza en -15) -> separacion real */
        .slider-control.prev { left: clamp(26px, 2.4vw, 46px); }
        .slider-control.next { right: clamp(26px, 2.4vw, 46px); }
        .custom-product-slider {
            /* centrado cuando los items caben; scroll normal cuando no (evita que se fijen a la izquierda) */
            justify-content: safe center;
            padding: 0 clamp(28px, 4vw, 64px);   /* min 28px: en movil la 1a/ultima tarjeta no toca el borde */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .custom-product-slider::-webkit-scrollbar { display: none; }

        /* El carril recorta lo que se sale y el padding de arriba estaba a 0 -> la sombra se
           cortaba por arriba. Abajo manda el pb-4 del HTML (24px, lleva !important y gana).
           OJO: el carrusel de LOGOS del home usa este mismo carril y NO lleva tarjetas ni
           sombra, asi que se queda exactamente como estaba. */
        .custom-product-slider:not(.hs-logo-slider) {
            padding-top: 12px;
        }
        .card-title.h6 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;

            min-height: 2.8em; 
            line-height: 1.4;
            margin-bottom: 0.5rem !important;
        }
        .card-img-top {
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
    }
    .hobbyshop-portal-section {
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        /* Capa degradada: ABAJO negro con transparencia -> ARRIBA transparente */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(to top,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.92) 24%,
                rgba(0, 0, 0, 0.6) 52%,
                rgba(0, 0, 0, 0.2) 80%,
                rgba(0, 0, 0, 0) 100%);
        }

    /* Estilos para la columna del Logo y Eslogan */
        .portal-logo-wrapper {
            flex: 0 0 auto;
            transition: transform 0.3s ease;

            .portal-main-logo {
                width: 118px;
                height: auto;
                /* sin resplandor: lineas nitidas, fieles al SVG */
            }
        }
        /* separador vertical entre logo y eslogan (mitad de alto, un poco mas grueso) */
        .portal-divider {
            width: 2px;
            flex: 0 0 auto;
            min-height: 45px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 2px;
        }

        .portal-slogan {
            p {
                font-family: 'Lora', Georgia, serif;
                font-weight: 400;
                font-size: 0.9rem;
                line-height: 1.5;
                letter-spacing: 0.3px;
                color: #fff !important;
            }
        }

        .portal-feature-card {
            background: rgba(8, 9, 11, 0.30);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 14px;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            min-height: 155px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            .feature-card-title {
                font-family: 'Lora', Georgia, serif;
                font-size: 1.05rem;
                font-weight: 700;
                letter-spacing: 1px;
                color: #fff !important;
                transition: color 0.3s ease;
            }
            .feature-card-desc {
                font-family: 'Montserrat', Arial, sans-serif;
                font-size: 0.85rem;
                line-height: 1.5;
                color: rgba(255, 255, 255, 0.82) !important;
                display: -webkit-box;
                -webkit-line-clamp: 3; /* Limita visualmente a 3 líneas por si acaso */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            &:hover {
                background: rgba(20, 20, 24, 0.45);
                border-color: rgba(211, 124, 37, 0.45);
                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
                .feature-card-title {
                    color: var(--main-color);
                }
            }
        }
    }
    .custom-main-slider {
        /* sin flechas: se arrastra con el raton (ver main.js) */
        cursor: grab;
        &:active { cursor: grabbing; }
        .main-slider-link, .main-slider-bg, .main-slider-bg-mobile, img {
            -webkit-user-drag: none;
            user-select: none;
        }
        .carousel-inner {
            border-radius: 1rem;
        }
        .main-slider-link {
            aspect-ratio: 1820 / 695;
            overflow: hidden;
            text-decoration: none !important;
        }
        .main-slider-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            z-index: 1;
            transition: transform 10s linear;
            background-repeat: no-repeat;
        }
        .main-slider-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
        }
        .slider-content-box h2 {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        @media (max-width: 768px) {
            .text-end, .text-start { text-align: center !important; }
            .justify-content-end, .justify-content-start { justify-content: center !important; }
        }
    }
    .cart-action-wrapper{
        .single_add_to_cart_button {
            background-color: #007bff !important;
            color: #fff !important;
            padding: 10px 30px !important;
            border-radius: 5px !important;
            font-weight: bold !important;
            transition: all 0.3s ease;
        }
        .single_add_to_cart_button:hover {
            background-color: #0056b3 !important;
            transform: translateY(-2px);
        }
        .quantity input.qty {
            border: 2px solid #dee2e6 !important;
            border-radius: 5px !important;
            height: 45px !important;
            margin-right: 10px !important;
        }
    }
    .cart-collaterals {
        .cart_totals table {
            width: 100%;
            border-collapse: collapse;
        }

        .cart_totals th, .cart_totals td {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .checkout-button {
            background-color: #000 !important;
            color: #fff !important;
            text-transform: uppercase;
            font-weight: bold;
        }
    }
    .woocommerce-checkout-review-order-table {
        width: 100% !important;
        margin-bottom: 1rem;
        color: #212529;
        vertical-align: top;
        border-color: #dee2e6;
    }
    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }
    .custom-shop-pagination-bar-wrapper {
        background: linear-gradient(to bottom, #eaeaea 0%, #dcdcdc 100%) !important;
        border: 1px solid #bcbcbc !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    
        padding: 14px 20px;
        border-radius: 30px !important;
    }

    @media (min-width: 768px) {
        .custom-shop-pagination-bar-wrapper {
            border-radius: 50px !important;
            padding: 10px 30px;
        }
    }
    .pagination-info-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 11px;
        color: #333333;
        letter-spacing: 0.5px;
        line-height: 1.4;
    }
    .pagination-info-text .highlight-color {
        color: var(--main-color) !important;
        font-weight: 800;
    }
    .shop-pagination-nav {
        ul.pagination-circular {
            list-style: none;
            padding: 0;
            margin: 0;
            li.page-item {
                margin: 0;
                padding: 0;
                .page-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-width: 32px;
                    height: 32px;
                    font-size: 12px;
                    border-radius: 50% !important;
                    background-color: #999999 !important;
                    border: 2px solid transparent !important;
                    color: #ffffff !important;
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                    transition: all 0.2s ease-in-out;

                    &:hover:not(.disabled) {
                        background-color: #888888 !important;
                    }
                }
                &.active {
                    .page-link {
                        background-color: var(--main-color) !important;
                        color: #ffffff !important;
                    }
                }
                @media (min-width: 576px) {
                    .page-link {
                        min-width: 38px;
                        height: 38px;
                        font-size: 14px;
                    }
                }
                &:has(.prev), &:has(.next) {
                    .page-link {
                        min-width: auto;
                        height: auto;
                        border-radius: 8px !important;
                        background-color: transparent !important;
                        color: #333333 !important;
                        border: none !important;
                        box-shadow: none !important;
                        font-size: 12px;
                        font-weight: 700;
                        padding: 4px 6px;

                        @media (min-width: 576px) {
                            font-size: 13px;
                            padding: 4px 10px;
                        }

                        &:hover {
                            color: var(--main-color) !important;
                        }
                    }
                }
                &.disabled {
                    .page-link {
                        background-color: transparent !important;
                        border: none !important;
                        color: #a0aec0 !important;
                        cursor: default;
                        box-shadow: none;
                    }
                }
            }
        }
    }
    /* ============================================================
       Barra de paginacion de tienda (rediseño calcomania del SVG):
       pildora blanca a todo el ancho, textos Lora, circulos de pagina.
       Medidas exactas del SVG: barra 48/rx24, circulos 31 (hueco 8),
       activo #d28712, inactivo #9e9a9a, numeros Lora 20 blancos.
       Movil: SIEMPRE una sola fila (no se parte en dos).
       ============================================================ */
    .hs-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 16px;
        width: 100%;
        min-height: 48px;
        padding: 0 clamp(16px, 2vw, 30px);
        border-radius: 24px;
        background: #dbdbdb;
        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .hs-pagination__info {
        margin: 0;
        min-width: 0;                       /* deja que se recorte antes que romper a 2 filas */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #333333;
    }
    .hs-pagination__count { color: #d28712; }

    .hs-pagination__nav {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;                     /* nunca se encoge -> una sola fila */
    }
    .hs-pg__nums { display: flex; align-items: center; gap: 8px; }

    .hs-pg__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #9e9a9a;
        color: #ffffff;
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0;
        text-decoration: none;
        transition: background 0.15s ease;
    }
    a.hs-pg__num:hover { background: #8a8686; }
    .hs-pg__num.is-active { background: #d28712; }

    .hs-pg__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 31px;
        flex: 0 0 auto;
        color: #9e9a9a;
        text-decoration: none;
        transition: color 0.15s ease;
    }
    a.hs-pg__arrow:hover { color: #d28712; }
    .hs-pg__arrow.is-disabled { color: #d8d5d5; pointer-events: none; }
    .hs-pg__chevron { width: 12px; height: 20px; display: block; }

    .hs-pg__next {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 4px;
        flex: 0 0 auto;
        text-decoration: none;
        color: #333333;
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.5px;
        transition: color 0.15s ease;
    }
    .hs-pg__next .hs-pg__chevron { color: #9e9a9a; transition: color 0.15s ease; }
    a.hs-pg__next:hover,
    a.hs-pg__next:hover .hs-pg__chevron { color: #d28712; }
    .hs-pg__next.is-disabled { color: #b9b6b6; pointer-events: none; }
    .hs-pg__next.is-disabled .hs-pg__chevron { color: #d8d5d5; }

    /* Movil: se mantiene en UNA fila -> solo se encogen tamaños/huecos y se oculta la palabra
       "Siguiente" (queda la flecha). La info se recorta con puntos suspensivos, no salta abajo. */
    @media (max-width: 575.98px) {
        .hs-pagination { min-height: 44px; padding: 0 14px; gap: 10px; }
        .hs-pagination__info { font-size: 12px; letter-spacing: 0.04em; }
        .hs-pagination__nav { gap: 6px; }
        .hs-pg__nums { gap: 6px; }
        .hs-pg__num { width: 28px; height: 28px; font-size: 14px; }
        .hs-pg__arrow { width: 20px; height: 28px; }
        .hs-pg__next { margin-left: 2px; }
        .hs-pg__next .hs-pg__nextlabel { display: none; }
    }

    .custom-filters-floating-menu{
        min-width: 250px;

        .custom-filter-list{
            max-height: 350px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 10px;
            scrollbar-width: thin;
            scrollbar-color: #bcbcbc transparent;
            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-track {                
                background: transparent;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #bcbcbc;
                border-radius: 10px;
            }
            &::-webkit-scrollbar-thumb:hover {
                background-color: #a3a3a3;
            }
        }
    }
    .btn-toolbar-filters {
        background: linear-gradient(to bottom, #fdfdfd 0%, #cecece 100%) !important;
        border-color: #aeaeae !important;
        color: #2b2b2b !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
        transition: all 0.15s ease-in-out;
        &:hover {
            background: linear-gradient(to bottom, #ffffff 0%, #d8d8d8 100%) !important;
            border-color: #9c9c9c !important;
        }
        &:active, &.show {
            background: linear-gradient(to bottom, #d5d5d5 0%, #e6e6e6 100%) !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
                        0 1px 0 rgba(255, 255, 255, 0.5) !important;
        }
        i.bi-sliders {
            width: 28px;
            height: 28px;
            color: #2b2b2b;
            font-size: 14px;
        }
    }
    .btn-toolbar-filters.dropdown-toggle::after {
        display: none !important;
    }
    .hobbyshop-brand-header {
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        border-radius: 24px;
        color: var(--secondary-color);
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.5px;

        /* movil: menos separacion debajo de la cabecera (el mb-5 dejaba un hueco enorme) */
        @media (max-width: 767.98px) {
            &.mb-5 { margin-bottom: 1.25rem !important; padding-bottom: 0.75rem !important; }
        }

        .brand-main-logo {
            max-width: 280px;
            height: auto;
            object-fit: contain;
        }
        /* logo de TCG: es el SVG vectorial (degradado + contorno teal) con mezcla "diferencia",
           igual que el objeto del diseno */
        &.hs-brand-header--tcg .brand-main-logo {
            mix-blend-mode: difference;
            width: 100%;
            max-width: 200px;
        }

        .brand-title, .brand-subtitle{
            color: #FFFFFF;
        }

        .brand-subcategories-slider-container {
            /* el CARRIL llega a los bordes de la pantalla: al estrechar, las casillas
               entran/salen desde el extremo de la web (el gap de 50px no se toca) */
            width: 100vw;
            margin-left: 50%;
            transform: translateX(-50%);
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
        }

        .brand-subcategories-slider-track {
            display: flex;
            flex-wrap: nowrap;
            gap: 50px;                       /* separacion FIJA de 50px entre casillas, no se deforma */
            /* 28px a los lados: la 1a/ultima no tocan el borde. Son 28 y no 20 porque el carril
               mide 100vw (incluye la barra de scroll) y se descentra ~7px respecto a lo que se
               ve; con 28 el hueco visible nunca baja de ~20px. */
            padding: 32px 28px 24px 28px;
            /* ancho segun contenido + margenes automaticos: si caben quedan centradas (como el
               'safe center' de antes) y si no caben el carril empieza a la izquierda Y el padding
               final SI cuenta al desplazar (con width:auto se perdia y la ultima quedaba pegada) */
            width: max-content;
            margin-inline: auto;
        }
        /* hueco extra abajo SOLO si hay imagen activa agrandada (asi las paginas sin activa
           -Warhammer/TCG padre- no dejan un margen enorme, sobre todo en movil) */
        .brand-subcategories-slider-track:has(.brand-slider-item--active) {
            padding-bottom: 54px;
        }

        .brand-slider-item {
            flex: 0 0 auto;          /* ancho FIJO (no proporcional) -> no se deforma ni se separan */
            width: 165px;
            max-width: 165px;
        }

        .brand-child-card-link {
            text-decoration: none;
            &:hover {
                .brand-child-img-wrapper {
                    transform: translateY(-5px);
                }
            }
        }

        .brand-child-img-wrapper {
            position: relative;
            display: inline-block;
            transition: transform 0.2s ease-in-out;
            filter: drop-shadow(0 8px 12px rgba(51, 94, 104, 0.3));   /* teal #335E68 al 30%, pos Y 8, desenfoque 12 (suave, no se corta) */
        }

        /* Categoria en la que estas: su imagen del carrusel sale ligeramente agrandada
           (en la misma posicion, sin mover a las demas -> es transform) */
        .brand-slider-item--active .brand-child-img-wrapper {
            transform: scale(1.1);
            filter: drop-shadow(0 8px 13px rgba(51, 94, 104, 0.45));
        }
        .brand-slider-item--active .brand-child-card-link:hover .brand-child-img-wrapper {
            transform: scale(1.1) translateY(-5px);
        }

        .brand-child-img {
            max-height: 250px;
            width: auto;
            object-fit: contain;
            display: block;
        }
    }
    .position-relative.z-2 {
        z-index: 2 !important;
    }
}

/* ============================================================
   SECCIÓN "FACCIONES" (pagina de categoria Warhammer 40k).
   Reproduce el SVG (lienzo 1820x926) con unidades de contenedor
   (cqw = 1% del ancho de la seccion) -> escala fiel a cualquier ancho.
   ============================================================ */
.hs-factions {
    container-type: inline-size;
    width: 100%;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}
.hs-factions__inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 26.3cqw 4.9cqw 5.5cqw;      /* hueco arriba para la cabecera; abajo para las filas */
    min-height: 50.9cqw;                 /* alto del diseño (1 fila); crece si hay 2 filas */
    border-radius: 2.75cqw;              /* 50px */
    overflow: hidden;
    isolation: isolate;
    background: #0b0c0e;
    font-family: 'Lora', Georgia, serif;
    color: #fff;
}
/* fondo: imagen oscurecida/desaturada + velo degradado (como en el SVG) */
.hs-factions__inner::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: var(--hs-fac-bg) center/cover no-repeat;   /* cada categoria define su fondo en el HTML */
    background-color: #0b0c0e;
}
.hs-factions__inner::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(9,10,12,0.55) 0%, rgba(9,10,12,0.12) 45%, rgba(9,10,12,0.45) 100%);
}

/* Título (Impact) — posiciones exactas del SVG */
.hs-factions__title {
    position: absolute; z-index: 2; left: 4.9cqw; top: 8.45cqw; margin: 0;
    font-family: 'Impact', 'Haettenschweiler', sans-serif;
    font-weight: 400; line-height: 1.184;   /* interlineado EXACTO del SVG: 65px entre FACCIONES (70) y WARHAMMER (50) */
    letter-spacing: 0.1em; text-transform: uppercase;
}
.hs-factions__title b   { display: block; font-weight: 400; font-size: 3.85cqw; }  /* FACCIONES 70px */
.hs-factions__title span{ display: block; font-weight: 400; font-size: 2.75cqw; }  /* nombre 50px */

/* Subtítulo (Lora, naranja) */
.hs-factions__subtitle {
    position: absolute; z-index: 2; left: 4.9cqw; top: 17.35cqw; margin: 0; max-width: 34cqw;
    font-size: 1.65cqw; line-height: 1.267;   /* interlineado EXACTO del SVG: 38px con fuente de 30 */
    letter-spacing: 0.06em; color: #d28712;
}

/* Pestañas (arriba-derecha) con iconos */
.hs-factions__tabs {
    position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 20cqw;
    pointer-events: none;               /* solo capturan clic las pestañas */
}
.hs-fac-tab {
    position: absolute; top: 12.47cqw; transform: translateX(-50%); pointer-events: auto;
    background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 0.6cqw;
    opacity: 0.85; transition: opacity .15s ease;
}
.hs-fac-tab:hover, .hs-fac-tab.is-active { opacity: 1; }
.hs-fac-tab__icon { height: 2.58cqw; display: flex; align-items: flex-end; justify-content: center; }   /* iconos alineados por abajo */
.hs-fac-tab__icon img { height: auto; width: auto; display: block; }
.hs-fac-tab__label {
    font-size: 0.88cqw; font-weight: 500; letter-spacing: 0.07em; white-space: nowrap;
    padding-bottom: 0.55cqw; border-bottom: 0.11cqw solid transparent;
}
.hs-fac-tab.is-active .hs-fac-tab__label { border-bottom-color: #d28712; }
/* centro X y ancho de icono EXACTOS por pestaña, calcados de cada SVG de diseño */
/* --- Warhammer 40.000 --- */
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(1) { left: 56.3cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(2) { left: 67.9cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(3) { left: 78.4cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(4) { left: 87.1cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(1) .hs-fac-tab__icon img { width: 4.71cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(2) .hs-fac-tab__icon img { width: 4.02cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(3) .hs-fac-tab__icon img { width: 2.57cqw; }
.hs-factions--warhammer-40-000 .hs-fac-tab:nth-child(4) .hs-fac-tab__icon img { width: 2.18cqw; }
/* --- Warhammer Age of Sigmar (iconos mas altos: contenedor y top propios) --- */
.hs-factions--warhammer-aos .hs-fac-tab      { top: 12.23cqw; }
.hs-factions--warhammer-aos .hs-fac-tab__icon { height: 3.11cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(1) { left: 59.6cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(2) { left: 69cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(3) { left: 78.4cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(4) { left: 86.2cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(1) .hs-fac-tab__icon img { width: 2.9cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(2) .hs-fac-tab__icon img { width: 2.07cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(3) .hs-fac-tab__icon img { width: 3.05cqw; }
.hs-factions--warhammer-aos .hs-fac-tab:nth-child(4) .hs-fac-tab__icon img { width: 2.54cqw; }
/* --- Warhammer The Horus Heresy (etiquetas largas -> fuente 12 en el diseño) --- */
.hs-factions--the-horus-heresy .hs-factions__inner::before {
    filter: grayscale(0.85) brightness(0.42) contrast(1.05);   /* este fondo viene en color: se oscurece como el diseño */
}
.hs-factions--the-horus-heresy .hs-fac-tab       { top: 12.04cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab__icon { height: 2.69cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab__label { font-size: 0.66cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(1) { left: 59.65cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(2) { left: 68.21cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(3) { left: 76.17cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(4) { left: 85.65cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(1) .hs-fac-tab__icon img { width: 4.02cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(2) .hs-fac-tab__icon img { width: 3.19cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(3) .hs-fac-tab__icon img { width: 2.69cqw; }
.hs-factions--the-horus-heresy .hs-fac-tab:nth-child(4) .hs-fac-tab__icon img { width: 4.72cqw; }
/* --- Sin pestañas (The Old World / Middle-earth): cabecera CENTRADA, como en sus SVG --- */
.hs-factions--the-old-world .hs-factions__title,
.hs-factions--the-old-world .hs-factions__subtitle,
.hs-factions--middle-earth-strategy-battle-game .hs-factions__title,
.hs-factions--middle-earth-strategy-battle-game .hs-factions__subtitle {
    left: 0; right: 0; max-width: none; text-align: center;
}

/* Mazo de tarjetas: en flujo (da altura) y en FILAS DE 6 (la 7ª baja) */
.hs-fac-deck {
    position: relative; z-index: 2;
    display: none; flex-wrap: wrap; justify-content: center;
    gap: 2.45cqw; max-width: 81.5cqw; margin: 0 auto;
}
.hs-fac-deck.is-active { display: flex; }

/* Tarjeta estandarte: SOLO la imagen recortada (sin marco ni texto encima) */
.hs-fac-card {
    position: relative; width: 11.48cqw; aspect-ratio: 209 / 261.75; flex: 0 0 auto;
    clip-path: polygon(0 0, 100% 0, 100% 86.4%, 82.3% 100%, 17.7% 100%, 0 86.4%);
    background: #17181b; overflow: hidden;
    text-decoration: none; color: #fff;
    /* sombra paralela negra (drop-shadow, no box-shadow: el clip-path la recortaria) */
    filter: drop-shadow(0 0.5cqw 0.85cqw rgba(0, 0, 0, 0.55));
    transition: transform .18s ease, filter .18s ease;
}
.hs-fac-card:hover {
    transform: translateY(-0.4cqw);
    filter: drop-shadow(0 0.9cqw 1.2cqw rgba(0, 0, 0, 0.6));
}
.hs-fac-card__art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* ===================== MÓVIL (seccion estrecha): layout apilado ===================== */
@container (max-width: 600px) {
    .hs-factions__inner { padding: 14cqw 6cqw; min-height: 0; }
    .hs-factions__inner::after { background: linear-gradient(180deg, rgba(9,10,12,0.4) 0%, rgba(9,10,12,0.12) 32%, rgba(9,10,12,0.6) 100%); }
    .hs-factions__title { position: relative; z-index: 2; top: auto; left: auto; text-align: center; }
    .hs-factions__title b    { font-size: 8.6cqw; }
    .hs-factions__title span { font-size: 4.8cqw; }
    .hs-factions__subtitle { position: relative; z-index: 2; top: auto; left: auto; max-width: none; margin: 5.5cqw 0 0; font-size: 3.7cqw; text-align: center; }
    /* pestañas = carrusel horizontal */
    .hs-factions__tabs {
        position: relative; z-index: 2; top: auto; left: auto; right: auto; height: auto; pointer-events: auto; margin: 12cqw 0 0;
        display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 7cqw;
        overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
    }
    .hs-factions__tabs::-webkit-scrollbar { display: none; }
    .hs-fac-tab { position: relative !important; transform: none !important; left: auto !important; top: auto !important; gap: 2cqw; flex: 0 0 auto; scroll-snap-align: center; }
    .hs-fac-tab__icon { height: 6cqw !important; }   /* gana a las alturas por-categoria del escritorio */
    .hs-fac-tab__icon img { height: auto !important; width: auto !important; max-height: 5.5cqw; max-width: 8.5cqw; }   /* tope de tamaño: ningun icono domina */
    .hs-fac-tab__label { font-size: 2.6cqw !important; padding-bottom: 1.4cqw; border-bottom-width: 0.45cqw; }   /* gana a los tamaños por-categoria */
    /* tarjetas = carrusel horizontal de borde a borde */
    .hs-fac-deck {
        margin: 12cqw -6cqw 0; padding: 0 6cqw 4cqw; max-width: none;
        flex-wrap: nowrap; justify-content: safe center; gap: 4cqw;
        overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
    }
    .hs-fac-deck::-webkit-scrollbar { display: none; }
    .hs-fac-card { width: 40cqw; scroll-snap-align: start; }
}

/* ============================================================
   "OTROS JUEGOS DE WARHAMMER 40.000" — dos tarjetas-filtro (Kill Team / Necromunda).
   Calcomania del SVG (lienzo 1820x693): cards 888x520 rx50, hueco 44,
   logos centrados abajo, degradado inferior, texto Lora 13 tracking 0.1em.
   Cada card es su propio contenedor -> los cqw escalan con el ancho de la card.
   ============================================================ */
.hs-otros-juegos { width: 100%; container-type: inline-size; margin-top: 120px; }   /* 120px encima del titulo */
.hs-otros-juegos .row { margin-top: 0; margin-bottom: 0; }                          /* quita el my-4 de Bootstrap */
.hs-otros-juegos .section-title { margin-bottom: 120px; }                           /* 120px entre titulo y tarjetas */
@media (max-width: 767.98px) {
    .hs-otros-juegos { margin-top: 90px; }
    .hs-otros-juegos .section-title { margin-bottom: 90px; }
}
.hs-otros-juegos__grid {
    display: flex;
    flex-wrap: wrap;                  /* N tarjetas: se envuelven de 2 en 2 */
    justify-content: center;          /* las sobrantes (3a, 5a...) quedan centradas */
    gap: 26px 2.42%;                  /* fila 26px / columna 44/1820 */
    align-items: stretch;
}
.hs-oj-card {
    container-type: inline-size;
    position: relative;
    flex: 0 0 48.79%;                 /* 2 por fila: (100 - 2.42) / 2 */
    display: block;
    aspect-ratio: 888 / 520;
    /* rx 50 del SVG. cqw relativo a la SECCION (50/1820), no a la card, que resolvia mal (81px) */
    border-radius: 2.75cqw;
    overflow: hidden;
    background-size: cover;
    background-position: var(--oj-bg-pos, center);   /* cada tarjeta puede fijar su encuadre */
    background-repeat: no-repeat;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hs-oj-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.30); }
.hs-oj-card::after {                  /* banda inferior ESMERILADA: art desenfocado + degradado a negro */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 44%;
    background: linear-gradient(180deg, rgba(9, 9, 11, 0) 0%, rgba(9, 9, 11, 0.42) 42%, rgba(9, 9, 11, 0.84) 100%);
    -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%);  /* el blur entra de forma gradual, sin corte duro */
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%);
    pointer-events: none;
    z-index: 1;
}
.hs-oj-card__logo {
    position: absolute;
    left: 50%;
    top: 66.5%;
    transform: translate(-50%, -50%);
    z-index: 2;
    line-height: 0;
}
.hs-oj-card__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.hs-oj-card__logo { width: var(--oj-logo-w, 24cqw); }   /* ancho del logo por tarjeta (variable inline) */
.hs-oj-card__desc {
    position: absolute;
    left: 0; right: 0;
    top: 78%;
    z-index: 2;
    margin: 0;
    padding: 0 6%;
    text-align: center;
    color: #ffffff;
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 1.46cqw;               /* 13/888 */
    line-height: 1.31;                /* 17/13 */
    letter-spacing: 0.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Dos columnas SOLO en escritorio ancho (>=1200), donde cada card es grande y se respeta
   el diseño exacto del SVG. Por debajo -> UNA columna a todo el ancho (nunca slivers). */
@media (max-width: 1199.98px) {
    .hs-otros-juegos__grid { flex-direction: column; flex-wrap: nowrap; gap: 22px; }
    .hs-oj-card { flex: none; width: 100%; }   /* una columna: ancho 100% -> la altura sale del aspect-ratio */
    /* card grande en una columna: logo/texto proporcionados y legibles (con suelo de px) */
    .hs-oj-card__logo { top: 64%; width: calc(var(--oj-logo-w, 24cqw) * 0.82); }
    .hs-oj-card__desc { top: 75%; font-size: clamp(11px, 1.9cqw, 16px); }
}
/* En una columna (movil/tablet) cada tarjeta puede fijar su posicion de fondo (--oj-bg-pos-m).
   P.ej. Warcry se ancla abajo para que se vea la parte buena del arte al recortar. */
@media (max-width: 767.98px) {
    .hs-oj-card { background-position: var(--oj-bg-pos-m, var(--oj-bg-pos, center)); }
}
/* Moviles: card mas alta (cabe bien logo + texto), banda esmerilada mayor y todo mas grande */
@media (max-width: 575.98px) {
    .hs-oj-card { aspect-ratio: 4 / 3; }
    .hs-oj-card::after { height: 58%; }
    .hs-oj-card__logo { top: 52%; width: calc(var(--oj-logo-w, 24cqw) * 1.85); }
    .hs-oj-card__desc { top: 63%; font-size: clamp(12px, 3.4cqw, 17px); padding: 0 8%; }
}

/* ============================================================
   "CONECTA CON NOSOTROS" — mini seccion de redes (home).
   Calcada del SVG (lienzo 391x89.45): Montserrat SemiBold 20px,
   tracking 0.3em, #d28712 + #b7b7b7, iconos ~33px separados 37px.
   ============================================================ */
.hs-connect {
    margin: 150px 0;               /* separacion superior e inferior */
    text-align: center;
}
.hs-connect__title {
    margin: 0 0 32px;              /* hasta los iconos: 37px de baseline a baseline en el SVG */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;              /* SemiBold */
    font-size: 20px;
    letter-spacing: 0.3em;
    text-indent: 0.3em;            /* compensa el tracking sobrante al centrar */
    line-height: 1;
    color: #b7b7b7;                /* "CON NOSOTROS" */
    text-transform: uppercase;
}
.hs-connect__title span { color: #d28712; }   /* "CONECTA" */
.hs-connect__icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 37px;
}
.hs-connect__icons a {
    display: inline-flex;
    color: #b7b7b7;
    font-size: 30px;
    line-height: 1;
    transition: color 0.15s ease;
}
.hs-connect__icons a:hover { color: #d28712; }
/* movil: el titulo a 20px + 0.3em mide ~391px y no cabe */
@media (max-width: 575.98px) {
    .hs-connect { margin: 90px 0; }
    .hs-connect__title { font-size: 15px; letter-spacing: 0.22em; text-indent: 0.22em; margin-bottom: 26px; }
    .hs-connect__icons { gap: 26px; }
    .hs-connect__icons a { font-size: 26px; }
}

/* ============================================================
   FICHA DE EVENTO (rediseno): hero oscuro + prosa + panel lateral.
   Mismo lenguaje que page.php y la ficha de producto (radio 28, Impact,
   Lora, naranja #d28712 / teal #335e68). Los carteles son PNG
   transparentes -> van sobre el hero oscuro y SIN marco.
   La entrada es un producto normal: cobra Redsys y genera pedido/factura.
   ============================================================ */

/* --- Desactivar la caja del plugin en la ficha (el ancho lo manda .container) --- */
.single-tribe_events #tribe-events-pg-template { max-width: none; padding: 0; margin: 0; }
/* el desplegable "Anadir al calendario" heredaba la caja blanca del CALENDARIO: aqui no */
.single-tribe_events .tribe-events {
    background: transparent; border: 0; border-radius: 0;
    padding: 0; box-shadow: none; margin: 0;
}

.hs-event { margin-top: 3rem; margin-bottom: 3rem; }
/* escritorio: la ficha de evento va envuelta por el plugin, asi que el hueco de 45px bajo el
   menu lo da el header y aqui solo se quita el margen superior para no duplicarlo */
@media (min-width: 992px) { .hs-event { margin-top: 0; } }

/* --- Volver --- */
.hs-event-back { margin: 0 0 1.4rem; font-family: 'Montserrat', Arial, sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hs-event-back a { color: #7a7f85; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.hs-event-back a:hover { color: #d28712; }

/* --- HERO --- */
.hs-event-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    padding: clamp(24px, 3.2vw, 52px);
    color: #fff;
    background-color: #0b0c0e;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
/* oscurecido + tinte de marca: MISMOS valores que .hs-page-hero::before, porque la ficha
   del evento es ya lo mismo que el hero de las paginas -> solo tipografia sobre el fondo */
.hs-event-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(51,94,104,0.35) 0%, rgba(18,22,26,0) 55%),
        linear-gradient(180deg, rgba(18,22,26,0.55) 0%, rgba(18,22,26,0.82) 100%);
}
/* Sin logo: una sola columna centrada (el logo se usa en lista/calendario y en el home) */
.hs-event-hero__grid {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto;
    padding: clamp(8px, 1.6vw, 24px) 0;
    text-align: center;
}

.hs-event-hero__eyebrow {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.78rem;
    color: #f0a642;
    margin: 0 0 0.85rem;
}
.hs-event-hero__title {
    margin: 0;
    font-family: 'Impact', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.02;
    /* mas contenido que antes (ya no compite con el logo), pero sin pasarse:
       los titulos de los eventos son larguisimos */
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    color: #ffffff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.5);
}
.hs-event-hero__title::after {           /* subrayado naranja de marca, centrado como en las paginas */
    content: "";
    display: block;
    width: 84px;
    height: 4px;
    margin: 1.15rem auto 0;
    background: #d28712;
    border-radius: 2px;
}

/* datos rapidos: fecha / hora / lugar */
.hs-event-facts {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;      /* hero centrado */
    gap: 0.7rem;
}
.hs-event-facts li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-align: left;         /* si una linea rompe, que no baile */
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.4;
    color: #e8eaec;
}
.hs-event-facts i { color: #d28712; font-size: 1.05rem; line-height: 1.32; flex: 0 0 auto; }
.hs-event-facts time::first-letter { text-transform: uppercase; }   /* "viernes" -> "Viernes" */

/* --- Llamada a la accion --- */
.hs-event-cta {
    display: flex;
    align-items: center;
    justify-content: center;   /* hero centrado */
    flex-wrap: wrap;
    gap: 1rem 1.3rem;
    margin-top: 2rem;
}
.hs-event-cta__btn {
    display: inline-block;
    padding: 0.85rem 2.4rem;
    border-radius: 999px;
    background: #d28712;
    color: #ffffff !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(210, 135, 18, 0.30);
    transition: background 0.15s ease, transform 0.15s ease;
}
.hs-event-cta__btn:hover { background: #b8740f; transform: translateY(-1px); }
.hs-event-cta__btn--off {
    background: rgba(255, 255, 255, 0.14);
    color: #c9cdd2 !important;
    box-shadow: none;
    cursor: default;
}
.hs-event-cta__btn--ghost {                /* secundario: contorno, no compite con el naranja */
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: none;
    padding: 0.8rem 1.9rem;
}
.hs-event-cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: #ffffff; }
.hs-event-cta__price {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #ffffff;
    line-height: 1.1;
}
.hs-event-cta__price del { color: rgba(255,255,255,0.5); font-weight: 400; font-size: 0.95rem; margin-right: 0.3rem; }
.hs-event-cta__price--solo { font-size: 1.6rem; }
.hs-event-cta__note {
    flex: 1 0 100%;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.86rem;
    color: #aeb4ba;
}
.hs-event-cta__note.is-low { color: #f0a642; font-weight: 600; }
.hs-event-cta__note.is-low i { margin-right: 0.25rem; }
.hs-event-cta__note a { color: #f0a642; text-decoration: underline; text-underline-offset: 2px; }

/* --- Cuerpo: prosa + panel lateral --- */
.hs-event-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: clamp(28px, 3.4vw, 56px);
    align-items: start;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
.hs-event-desc { max-width: none; margin: 0; padding: 0; }   /* dentro del grid manda la rejilla */
.hs-event-aside {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* tarjetas del panel (mismo acabado que la caja del calendario) */
.hs-event-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow: 0 12px 34px rgba(28, 28, 28, 0.07);
}
.hs-event-card__title {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1c1c1c;
    font-size: 20px;
    margin: 0 0 1.3rem;
}
.hs-event-card__title::after {
    content: "";
    display: block;
    width: 160px;
    max-width: 100%;
    height: 2px;
    background: #d28712;
    border-radius: 2px;
    margin-top: 0.7rem;
}

.hs-event-dl { margin: 0; font-family: 'Montserrat', Arial, sans-serif; }
.hs-event-dl dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9aa0a6;
    margin: 0 0 0.22rem;
}
.hs-event-dl dd {
    margin: 0 0 1.05rem;
    font-size: 0.98rem;
    line-height: 1.45;
    color: #3c4147;
    font-weight: 500;
}
.hs-event-dl dd:last-child { margin-bottom: 0; }
.hs-event-dl dd::first-letter { text-transform: uppercase; }
.hs-event-dl a { color: #c9770f; text-decoration: underline; text-underline-offset: 2px; }
.hs-event-dl a:hover { color: #a9660d; }

/* "Anadir al calendario" (lo pinta el plugin) */
.hs-event-calendar { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid #efefef; }
.hs-event-calendar .tribe-events-c-subscribe-dropdown__container { justify-content: flex-start; padding: 0; }

/* --- Recinto + mapa --- */
.hs-event-venue__name {
    margin: 0 0 0.45rem;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1c1c1c;
}
.hs-event-venue__addr {
    margin: 0 0 1.2rem;
    font-style: normal;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #6b7176;
}
.hs-event-map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    margin-bottom: 1.1rem;
    line-height: 0;
}
.hs-event-map > div,
.hs-event-map iframe {
    width: 100% !important;
    height: 230px !important;
    border: 0 !important;
    display: block;
    margin: 0 !important;
}
.hs-event-maplink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #335e68;
    text-decoration: none;
    border: 1px solid #335e68;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.hs-event-maplink:hover { background: #335e68; color: #ffffff; }

/* --- Organizador --- */
.hs-event-orglist {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.hs-event-orglist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.92rem;
    color: #3c4147;
    word-break: break-word;
}
.hs-event-orglist i { color: #d28712; flex: 0 0 auto; }
.hs-event-orglist a { color: #3c4147; text-decoration: none; }
.hs-event-orglist a:hover { color: #c9770f; }

/* --- Compartir --- */
.hs-event-share { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-event-share__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f5;
    color: #5b6167;
    font-size: 1.1rem;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.hs-event-share__btn:hover { background: #d28712; color: #ffffff; transform: translateY(-2px); }
.hs-event-share__copy.is-copied { background: #335e68; color: #ffffff; }

/* --- Anterior / siguiente --- */
.hs-event-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.6rem;
    border-top: 1px solid #ececec;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.88rem;
}
/* los titulos de los eventos llevan dentro fecha/hora/emojis: se recortan a 2 lineas */
.hs-event-nav__prev,
.hs-event-nav__next { flex: 0 1 47%; min-width: 0; }
.hs-event-nav a {
    color: #335e68;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.45;
}
.hs-event-nav a i { margin: 0 0.3rem; }
.hs-event-nav a:hover { color: #d28712; }
.hs-event-nav__next { text-align: right; margin-left: auto; }

/* --- Barra fija de compra (solo movil) --- */
.hs-event-stickybar { display: none; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .hs-event-body { grid-template-columns: minmax(0, 1fr); }
    .hs-event-aside { position: static; }
}
@media (max-width: 767.98px) {
    .hs-event-cta__note { text-align: center; }
    .hs-event-nav { flex-direction: column; align-items: stretch; gap: 0.9rem; }
    .hs-event-nav__next { text-align: left; margin-left: 0; }

    .hs-event-stickybar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(20, 22, 25, 0.96);
        backdrop-filter: blur(8px);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
    }
    .hs-event-stickybar__label {
        display: block;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #9aa0a6;
    }
    .hs-event-stickybar__price {
        font-family: 'Montserrat', Arial, sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: #ffffff;
    }
    .hs-event-stickybar .hs-event-cta__btn { padding: 0.7rem 1.5rem; font-size: 0.8rem; box-shadow: none; }
    body.single-tribe_events { padding-bottom: 74px; }
}



footer {
    margin-top: 4rem;
    border-radius: 2rem 2rem 0 0;
    background-color: #1c1c1c;              /* base por si la imagen no cubre */
    /* TU imagen de fondo pero SIN el borde oscuro de 1px (recortada) */
    /* capa oscura por encima de la foto: el texto se lee mejor */
    background-image: linear-gradient(rgba(10, 12, 14, 0.42), rgba(10, 12, 14, 0.42)), url('../images/bg-footer.jpg');
    background-repeat: no-repeat;
    /* estirar para rellenar justo el footer: al ser degradado suave no se nota,
       y asi NO recorta (adios linea) ni se agranda/pixela a ningun ancho */
    background-size: 100% 100%;
    background-position: center center;
    color: var(--white-color);

    a {
        color: inherit;                     /* que manden las reglas del footer nuevo */
    }
    a:hover {
        color: var(--main-color);
    }

    .menu-place{
        margin-bottom: 1rem;
    }
    .schedule{
        .title{
            color: var(--white-color);
            text-transform: uppercase;
        }
        ul{
            padding: 0px;
        }
        .day{
            color: var(--main-color);
        }
    }
    .map-container{
        width: 100%; 
        height: 250px; 
        position: relative; 
        overflow: hidden; 
        border-radius: 8px; 
        border: 1px solid var(--white-color);

        iframe{
            width: 100%; 
            height: 100%; 
            border:0;
        }
    }
}

/* ============================================================
   FiboSearch - aspecto coherente con la marca (#d37c25 / Montserrat) + movil
   ============================================================ */

/* Tipografia coherente en todo el buscador */
.dgwt-wcas-search-wrapp,
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp,
.dgwt-wcas-overlay-mobile {
    font-family: var(--font-default), Arial, sans-serif !important;
}

/* ----- Barra de busqueda (pildora blanca, foco en naranja de marca) ----- */
.search-ajax-container .dgwt-wcas-search-wrapp,
.search-ajax-container .dgwt-wcas-search-form {
    max-width: 100% !important;
    width: 100% !important;
}
/* Buscador segun el diseño (Grupo 921 movil / 922 escritorio):
   pastilla blanca, borde naranja #d28712, lupa a la DERECHA, sombra sutil */
.search-ajax-container input.dgwt-wcas-search-input {
    border: 1px solid #d28712 !important;
    border-radius: 50rem !important;
    background-color: #fff !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 42px 0 18px !important;   /* hueco a la derecha para la lupa */
    font-family: var(--font-default), Arial, sans-serif !important;
}
.search-ajax-container input.dgwt-wcas-search-input:focus {
    border-color: #d28712 !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 124, 37, 0.18) !important;
}
/* Lupa: color de marca y a la DERECHA (por defecto solaris la pone a la izq) */
.dgwt-wcas-ico-magnifier {
    fill: #d28712 !important;
}
.search-ajax-container .dgwt-wcas-ico-magnifier {
    left: auto !important;
    right: 15px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ----- Resultados: estructura/margenes como Warhammer + tipografia de la web ----- */
/* Contenedor desplegable: redondeado y con sombra suave (como las tarjetas) */
.dgwt-wcas-suggestions-wrapp {
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 6px 10px 0 !important;          /* hueco a la derecha para la barra */
    scrollbar-width: thin !important;             /* Firefox: barra fina */
    scrollbar-color: #cbd5e1 transparent !important;
    overflow-x: hidden !important;                /* sin scroll horizontal */
}
/* Barra de desplazamiento fina y discreta (Chrome/Edge/Safari) */
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar {
    width: 8px !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 10px 0 !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 8px !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0 !important;
}
/* (El ancho del desplegable en escritorio se controla por JS en fibo-addtocart.js,
   porque FiboSearch lo anade a <body> y fija el ancho por JavaScript.) */
/* Base de cada fila (incluye "ver todos"): margen lateral + esquinas */
.dgwt-wcas-suggestion {
    margin: 2px 10px !important;
    border-radius: 12px !important;
}
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-hovered,
.dgwt-wcas-suggestion:hover {
    background-color: rgba(211, 124, 37, 0.08) !important;
}
/* Fila de producto: imagen | (titulo sobre precio) | boton, con aire */
a.dgwt-wcas-suggestion-product {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 72px 14px 18px !important;
}
/* Imagen: SIN marco, fundida con el fondo blanco */
.dgwt-wcas-si {
    flex: 0 0 auto !important;
    width: 56px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
.dgwt-wcas-si img,
a.dgwt-wcas-suggestion-product img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 8px !important;
}
/* Bloque de texto: titulo ARRIBA y precio DEBAJO (apilados, a la izquierda) */
.dgwt-wcas-content-wrapp {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    padding-left: 0 !important;
}
.dgwt-wcas-st,
.dgwt-wcas-meta {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dgwt-wcas-st-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    line-height: 1.35 !important;
}
/* Precio REAL (.dgwt-wcas-sp): debajo del titulo, a la izquierda, azul de producto */
.dgwt-wcas-sp,
.dgwt-wcas-sp ins,
.dgwt-wcas-sp .woocommerce-Price-amount {
    color: #1a4f6e !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    text-align: left !important;
    padding-left: 0 !important;
}
.dgwt-wcas-sp del,
.dgwt-wcas-sp del .woocommerce-Price-amount {
    color: #a0aec0 !important;
    font-weight: 400 !important;
    font-size: 0.82em !important;
}
.dgwt-wcas-st-more {
    color: var(--main-color) !important;
    font-weight: 600 !important;
}

/* ----- Panel de detalles (al pasar el raton) ----- */
.dgwt-wcas-details-wrapp {
    border-radius: 8px !important;
}
.dgwt-wcas-details-product-title {
    font-weight: 700 !important;
    color: #222 !important;
}
/* Boton "Anadir al carrito": naranja de marca, como los de la web */
.dgwt-wcas-pd-addtc .button,
.dgwt-wcas-pd-addtc a.button,
.dgwt-wcas-pd-addtc-form button,
.dgwt-wcas-pd-addtc-form .button {
    background-color: var(--main-color) !important;
    border: 1px solid var(--main-color) !important;
    color: #fff !important;
    border-radius: 50rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: filter .15s ease !important;
}
.dgwt-wcas-pd-addtc .button:hover,
.dgwt-wcas-pd-addtc-form button:hover {
    filter: brightness(0.92) !important;
}

/* ===== PANEL DE BUSQUEDA (overlay) - igual en escritorio y movil =====
   La barra de busqueda va DENTRO del panel (arriba) y los resultados debajo. */

/* Fondo atenuado detras (se ve la web por detras, oscurecida) */
html.dgwt-wcas-overlay-mobile-on::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 99999999990;
}

/* Tarjeta flotante centrada, ajustada al contenido */
.dgwt-wcas-overlay-mobile {
    position: fixed !important;
    top: 84px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
}

/* Barra superior: boton volver + buscador, y debajo (al envolver) los resultados */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background-color: #fff !important;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-return {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
}
.dgwt-wcas-om-return svg {
    fill: var(--main-color) !important;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp {
    flex: 1 1 180px !important;
    width: auto !important;
    min-width: 0 !important;
}
.dgwt-wcas-overlay-mobile input.dgwt-wcas-search-input {
    border-radius: 50rem !important;
}

/* Resultados: ocupan toda la fila, debajo de la barra, con scroll y ajustados al contenido */
.dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 210px) !important;
    margin: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid #eef1f5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 6px 8px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* En movil, la lupa de la cabecera alineada a la derecha con carrito/cuenta */
@media (max-width: 1199.98px) {
    .search-ajax-container .dgwt-wcas-search-wrapp {
        display: flex !important;
        justify-content: flex-end !important;
    }
}

/* ----- Boton "Anadir al carrito" por fila (identico al de los productos) ----- */
.hs-search-atc {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    border: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    z-index: 6;
}
.hs-search-atc i {
    color: #fff !important;
    font-size: 1.25rem;
}
.hs-search-atc:hover {
    filter: brightness(0.93);
}
.hs-search-atc:active {
    transform: translateY(-50%) scale(0.92);
}
.hs-search-atc.loading {
    opacity: .6;
    pointer-events: none;
}
.hs-search-atc.added {
    background-color: #4caf50;
}

/* ============================================================
   Badge de OFERTA (% de descuento) - estilo de la marca
   ============================================================ */
.product-card-img-wrapper { position: relative; }
/* en la ficha, el badge se posiciona sobre la columna de la imagen */
.single-product div.product .col-md-4 { position: relative; }

.hs-sale-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    background-color: #d37c25 !important;
    color: #fff !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
/* Ocultar el badge ANTIGUO (snippet del tema "hobbyshop-sale-badge"),
   asi en la ficha solo se ve el nuevo, igual que en las tarjetas */
.hobbyshop-sale-badge {
    display: none !important;
}

/* ============================================================
   FICHA DE PRODUCTO (rediseño): hero oscuro + galeria + resumen
   ============================================================ */
.hs-product-page { margin: 10px 0 0; }

.hs-prod-hero {
    position: relative;
    border-radius: 28px;
    padding: clamp(20px, 3vw, 46px);
    overflow: hidden;
    color: #fff;
    background-color: #0b0c0e;
    background-image:
        linear-gradient(90deg, rgba(8, 9, 11, 0.80) 0%, rgba(8, 9, 11, 0.48) 42%, rgba(8, 9, 11, 0.72) 100%),
        url('../images/product-hero-bg.webp');
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.hs-prod-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
}

/* ---- Galeria ---- */
.hs-prod-gallery {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.hs-prod-thumbs {
    flex: 0 0 auto;
    max-height: 520px;        /* tope; el JS lo iguala a la altura de la imagen */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    padding: 3px;
    user-select: none;
    touch-action: none;       /* el arrastre lo controla el JS (puntero) */
}
.hs-prod-thumbs::-webkit-scrollbar { display: none; }
.hs-prod-thumbs.is-dragging { cursor: grabbing; }
.hs-prod-thumbs__track {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hs-prod-thumb {
    width: 64px;
    height: 64px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, transform .15s ease;
}
.hs-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hs-prod-thumb:hover { transform: translateY(-2px); }
.hs-prod-thumb.is-active { border-color: var(--main-color); }

.hs-prod-main {
    position: relative;
    flex: 1 1 auto;
    background: #fff;
    border-radius: 22px;
    padding: clamp(16px, 2vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.hs-prod-main__img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
}

/* Producto de entrada de evento: imagen SIN fondo blanco (para PNGs transparentes) */
.hs-ticket-product .hs-prod-main { background: transparent; }
.hs-ticket-product .hs-prod-thumb { background: transparent; }
/* fondo con degradado a negro desde abajo (como el hero de eventos/facciones).
   El fondo sale del campo del editor (--hs-ticket-bg); si no hay, el epico por defecto. */
.hs-ticket-product .hs-prod-hero {
    background-image:
        linear-gradient(180deg, rgba(8, 9, 11, 0.15) 0%, rgba(8, 9, 11, 0.55) 55%, rgba(8, 9, 11, 0.96) 100%),
        var(--hs-ticket-bg, url('../images/product-hero-bg.webp'));
}

/* ---- Resumen (derecha) ---- */
.hs-prod-summary { min-width: 0; }
.hs-prod-title {
    font-family: 'Impact', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.1vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: 0.5px;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 2px solid var(--main-color);
}
.hs-prod-short {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.96rem;
    line-height: 1.65;
    color: #e6e6e6;
    text-align: justify;
    display: block;
    width: 100%;
    box-sizing: border-box;
    max-height: calc(1.65em * 7); /* maximo 7 lineas */
    overflow: hidden;
    overflow-wrap: break-word;
}
.hs-prod-short p { margin: 0; }

.hs-prod-readmore {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    padding: 7px 22px;
    border-radius: 999px;
    background: #ededed;
    color: #1a1a1a !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.hs-prod-summary { text-align: left; }
.hs-prod-readmore-wrap { text-align: center; }
.hs-prod-readmore:hover { background: #fff; transform: translateY(-1px); }

/* ---- Compra ---- */
.hs-prod-buy { margin-top: 26px; }
.hs-prod-buy__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.hs-qty {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 12px;
    background: #d2d2d2;
    height: 44px;
    padding: 4px;
    gap: 2px;
}
.hs-qty__btn {
    width: 30px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #3a3a3a;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hs-qty__btn:hover { color: #000; }
.hs-qty .quantity { margin: 0 !important; display: flex; height: 100%; }
.hs-qty .quantity label { display: none !important; }
.hs-qty__input {
    width: 40px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #1c1c1c;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0;
    -moz-appearance: textfield;
}
.hs-qty__input::-webkit-outer-spin-button,
.hs-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hs-prod-price { text-align: right; line-height: 1.2; }
.hs-prod-price--block { text-align: left; margin: 18px 0 0; }
.hs-prod-price__now {
    display: inline-block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    color: #fff;
}
.hs-prod-price__now .woocommerce-Price-amount { color: #fff; }
.hs-prod-price__tax {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.78rem;
    color: #b9b9b9;
}
.hs-prod-price__pvp {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.92rem;
    color: #9a9a9a;
    text-decoration: line-through;
}
.hs-prod-price__pvp .woocommerce-Price-amount { color: #9a9a9a; }

.hs-prod-stock {
    margin: 12px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #d6d6d6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hs-prod-stock::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hs-dot, #6ec06e);
    flex: 0 0 auto;
}
.hs-prod-stock.is-instock    { --hs-dot: #6ec06e; }
.hs-prod-stock.is-backorder  { --hs-dot: #e0a44a; }
.hs-prod-stock.is-outofstock { --hs-dot: #e36b6b; color: #e89a9a; }

.hs-prod-addcart {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 13px 56px;
    border: 0;
    border-radius: 999px;
    background: var(--main-color);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(211, 124, 37, 0.3);
    transition: filter .15s ease, transform .15s ease;
}
.hs-prod-addcart:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hs-prod-addcart:active { transform: translateY(0); }

.hs-prod-shipping {
    margin: 18px 0 0;
    text-align: center;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.hs-prod-buy--std .cart { margin-top: 8px; }

/* ---- Descripcion completa (abajo) ---- */
.hs-prod-fulldesc {
    margin: 34px 0 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: clamp(22px, 3vw, 44px);
    scroll-margin-top: 20px;
}
.hs-prod-fulldesc__title {
    font-family: 'Impact', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 0.5px;
    color: #1c1c1c;
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--main-color);
}
.hs-prod-fulldesc__body {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #2c2c2c;
    margin-top: 18px;
}
.hs-prod-fulldesc__body p { margin: 0 0 1.1em; }
.hs-prod-fulldesc__body strong { color: #1c1c1c; }
.hs-prod-fulldesc__body h2,
.hs-prod-fulldesc__body h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.4em 0 0.5em;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    /* tablet + movil: 1 columna, centrado, miniaturas horizontales */
    .hs-prod-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hs-prod-gallery {
        flex-direction: column-reverse;
        max-width: 440px;
        margin: 0 auto;
    }
    .hs-prod-thumbs {
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        touch-action: pan-y;       /* arrastre horizontal por JS, vertical = scroll de pagina */
    }
    .hs-prod-thumbs__track {
        flex-direction: row;
        width: max-content;
        margin: 0 auto;            /* centra si caben; si sobran, se desplaza desde el inicio */
    }
    .hs-prod-thumbs::-webkit-scrollbar { display: none; }
    .hs-prod-main__img { max-height: 400px; }
    .hs-prod-title { font-size: clamp(1.6rem, 4vw, 2.05rem); }
    .hs-prod-summary { text-align: center; max-width: 580px; margin: 0 auto; }
    .hs-prod-short { text-align: center; }
    .hs-prod-readmore { margin-left: auto; margin-right: auto; }
    .hs-prod-buy { display: flex; flex-direction: column; align-items: center; }
    .hs-prod-buy__row { justify-content: center; width: 100%; }
    .hs-prod-price { text-align: center; }
    .hs-prod-stock { text-align: center; }
}
@media (max-width: 575.98px) {
    .hs-prod-hero { border-radius: 20px; }
    .hs-prod-buy__row { flex-direction: column; align-items: center; gap: 14px; }
}

/* ===== Lightbox de imagen de producto (sobre el fondo de la web) ===== */
.hs-img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    background: rgba(8, 9, 11, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: zoom-out;
}
.hs-img-lightbox.is-open { display: flex; }
.hs-img-lightbox__img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
    cursor: default;
}
.hs-img-lightbox__close {
    position: absolute;
    top: 18px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.hs-img-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.hs-img-lightbox__close .hs-close-x { width: 18px; height: 19px; }
body.hs-lightbox-open { overflow: hidden; }

/* ============================================================
   PROCESO DE COMPRA (carrito / checkout / avisos) - estilo de marca
   ============================================================ */

/* ---- Botones de accion PRINCIPALES -> pildora naranja ---- */
#place_order,
.wc-proceed-to-checkout .btn,
.wc-proceed-to-checkout a.button,
.woocommerce a.checkout-button,
.woocommerce .checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce-cart .actions .button.alt {
    background: var(--main-color) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 16px rgba(211, 124, 37, 0.28) !important;
    transition: filter .15s ease, transform .15s ease !important;
}
#place_order:hover,
.wc-proceed-to-checkout .btn:hover,
.woocommerce a.checkout-button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
}

/* ---- Botones SECUNDARIOS (cupon "Aplicar", "Actualizar carrito") ---- */
.woocommerce-cart .coupon .button,
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions .button:not(.alt) {
    background: #2a2d33 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 11px 22px !important;
}
.woocommerce-cart .coupon .button:hover { filter: brightness(1.2) !important; }

/* ---- Total en naranja de marca (no amarillo Bootstrap) ---- */
.cart_totals .order-total td,
.cart_totals .order-total td .woocommerce-Price-amount,
#order_review .order-total td,
#order_review .order-total td .woocommerce-Price-amount,
.order-total .text-warning {
    color: var(--main-color) !important;
}

/* ---- Campos de formulario (checkout / cupon / envio) ---- */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout #order_comments,
body.woocommerce-cart .coupon input[type="text"],
.shipping-calculator-form input.input-text,
.shipping-calculator-form select {
    border: 1px solid #d7d7d7 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.95rem !important;
    color: #222 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-cart .coupon input[type="text"]:focus {
    border-color: var(--main-color) !important;
    box-shadow: 0 0 0 3px rgba(211, 124, 37, 0.15) !important;
    outline: none !important;
}
.select2-container--default .select2-selection--single {
    height: 46px !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
body.woocommerce-checkout .form-row label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

/* ---- Avisos / mensajes (anadido al carrito, info, error) ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border: 1px solid #eadfce !important;
    border-left: 4px solid var(--main-color) !important;
    border-radius: 12px !important;
    background: #fff8f1 !important;
    color: #3a3a3a !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    padding: 14px 18px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .04) !important;
    list-style: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--main-color) !important; }
.woocommerce-error {
    border-left-color: #d9534f !important;
    background: #fdf2f2 !important;
}
.woocommerce-message a.button,
.woocommerce-message a,
.woocommerce-info a {
    color: var(--main-color) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---- Tarjetas de totales / resumen del pedido ---- */
.cart_totals,
.woocommerce-checkout #order_review {
    background: #fbfbfb !important;
    border: 1px solid #ececec !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05) !important;
}
.cart_totals h2,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#ship-to-different-address {
    font-family: 'Impact', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    color: #1c1c1c !important;
}

/* ---- Cupon (carrito): input + boton en fila ---- */
.woocommerce-cart .coupon { display: flex; gap: 8px; align-items: stretch; }
.woocommerce-cart .coupon input[type="text"] { flex: 1 1 auto; }

/* ---- Pedido recibido (gracias) + detalles del pedido + Mi cuenta ---- */
.woocommerce-thankyou-order-received {
    font-family: 'Impact', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    color: #1c1c1c !important;
    font-size: 1.6rem;
    margin-bottom: 18px;
}
ul.woocommerce-order-overview.order_details {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 26px !important;
    padding: 18px 24px !important;
    background: #fbfbfb !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
ul.woocommerce-order-overview.order_details li {
    border: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: #8a8a8a;
}
ul.woocommerce-order-overview.order_details li strong {
    display: block;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--main-color);
    margin-top: 3px;
}

.woocommerce-order .shop_table,
.shop_table.order_details,
.woocommerce-table--order-details,
.woocommerce-orders-table,
.woocommerce-table--customer-details {
    width: 100%;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif !important;
    background: #fff;
}
.woocommerce-order .shop_table thead th,
.woocommerce-table--order-details thead th,
.woocommerce-orders-table thead th {
    background: #f4f4f4 !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: #444;
    padding: 14px 16px !important;
    border: 0 !important;
}
.woocommerce-order .shop_table td,
.woocommerce-order .shop_table th,
.woocommerce-table--order-details td,
.woocommerce-table--order-details th,
.woocommerce-orders-table td,
.woocommerce-orders-table th {
    padding: 13px 16px !important;
    border: 0 !important;
    border-top: 1px solid #f0f0f0 !important;
}
.woocommerce-order .shop_table tfoot th,
.woocommerce-table--order-details tfoot th { color: #1a1a1a; }
.woocommerce-order .shop_table tfoot .order-total td,
.woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--main-color) !important;
    font-weight: 800;
}
.woocommerce-customer-details address {
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    background: #fbfbfb;
}
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
    font-family: 'Impact', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    color: #1c1c1c !important;
}
.woocommerce-orders-table .woocommerce-button.button {
    background: var(--main-color) !important;
    color: #fff !important;
    border-radius: 999px !important;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 16px !important;
}

/* ============================================================
   Migas de pan (breadcrumbs) - estilo de marca + subrayado naranja al pasar
   ============================================================ */
.breadcrumb {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0.6rem;
}
.breadcrumb .breadcrumb-item a {
    color: var(--secondary-color);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    transition: color .15s ease;
}
.breadcrumb .breadcrumb-item a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--main-color);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
}
.breadcrumb .breadcrumb-item a:hover { color: var(--main-color); }
.breadcrumb .breadcrumb-item a:hover::after { transform: scaleX(1); }
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item:last-child {
    color: #1c1c1c;
    font-weight: 700;
}
.breadcrumb .text-secondary { color: #c6c6c6 !important; }

/* ============================================================
   Evitar SCROLL HORIZONTAL en movil (elementos que se salen -> el
   contenido parecia descolocado a la derecha)
   ============================================================ */
/* OJO con el `overflow-x` del BODY: con `hidden`, el navegador convierte el body en una
   caja con scroll propio (el overflow-y pasa a `auto` solo). Entonces la pagina se desplaza
   por dentro del body mientras que la barra superior, que es `position: fixed`, se ancla a la
   ventana. Son dos referencias distintas y la barra no sabe donde ponerse: va a tirones y da
   saltos al desplazarse. `clip` recorta igual pero NO crea esa caja con scroll. */
html { overflow-x: hidden !important; max-width: 100% !important; }
body { overflow-x: clip !important; max-width: 100% !important; }

/* El menu del footer (item "Aviso legal..." muy largo) hacia la pagina mas
   ancha que la pantalla -> forzamos que SE AJUSTE (wrap) en vez de estirarse */
#store-navbar {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: hidden !important;
}
#store-navbar .menu-item {
    max-width: 100% !important;
}
#store-navbar .menu-item a,
.navbar-nav .menu-item a,
li.menu-item > a {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center;
}
/* cualquier menu que sea flex, que envuelva y no se estire */
ul.navbar-nav { flex-wrap: wrap !important; max-width: 100% !important; }

@media (max-width: 1199.98px) {
    /* la galeria y sus partes nunca mas anchas que su hueco */
    .hs-prod-gallery { min-width: 0 !important; max-width: 100% !important; }
    .hs-prod-main { min-width: 0 !important; max-width: 100% !important; }
    .hs-prod-main__img { min-width: 0 !important; max-width: 100% !important; }
    .hs-prod-thumbs { max-width: 100% !important; }
    .hs-prod-hero { max-width: 100% !important; }
    .hs-product-page { max-width: 100% !important; overflow-x: hidden; }
}

/* ============================================================
   Slider del home: version MOVIL/TABLET vertical (imagen propia por slide)
   ============================================================ */
.custom-main-slider .main-slider-bg-mobile { display: none; }
@media (max-width: 1199.98px) {
    /* slides CON imagen movil: ALTURA UNIFORME (proporcion vertical fija 521/695)
       para que NO salte el alto al cambiar de slide ni mientras carga la imagen */
    .custom-main-slider .carousel-item:has(.main-slider-bg-mobile) .main-slider-link {
        aspect-ratio: 521 / 695 !important;
        height: auto !important;
    }
    .custom-main-slider .carousel-item:has(.main-slider-bg-mobile) .main-slider-bg { display: none !important; }
    .custom-main-slider .main-slider-bg-mobile {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 1;
        border-radius: 1rem;
    }
}

/* ============================================================
   Hamburguesa de marca + overlay del menu (centrado, fondo
   oscurecido y cierre al pinchar fuera, como el buscador)
   ============================================================ */
/* Panel del menu: overlay CENTRADO sobre el viewport (el JS lo mueve al <body>).
   Oculto por defecto; se muestra con body.hs-menu-open. */
.custom-dropdown-menu {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 100001;
    width: calc(100% - 28px);
    max-width: 380px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.custom-dropdown-menu .hs-menu-heading {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--main-color);
    padding: 6px 14px 4px;
}
.custom-dropdown-menu .hs-menu-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.custom-dropdown-menu .hs-menu-list .menu-item { width: 100%; max-width: 100% !important; }
.custom-dropdown-menu .hs-menu-list .menu-item a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    text-align: left !important;
    text-decoration: none;
    color: var(--secondary-color) !important;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}
.custom-dropdown-menu .hs-menu-list .menu-item a:hover,
.custom-dropdown-menu .hs-menu-list .current-menu-item > a {
    background-color: rgba(211, 124, 37, 0.08);
    color: var(--main-color) !important;
}
.custom-dropdown-menu .hs-menu-list--primary .menu-item a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.custom-dropdown-menu .hs-menu-list--secondary {
    margin-top: 6px;
    padding-top: 6px;
}
.custom-dropdown-menu .hs-menu-list--secondary .menu-item a {
    font-size: 0.85rem;
    font-weight: 500;
}
/* Hamburguesa segun el diseño (Grupo 830): 3 barras naranjas gruesas,
   la del medio mas corta, sin caja. Se convierte en X al abrir. */
.hs-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.hs-hamburger span {
    display: block;
    height: 4px;
    width: 30px;
    border-radius: 2px;
    background: #d28712;
    transition: transform .25s ease, opacity .2s ease, width .25s ease, background .2s ease;
}
.hs-hamburger span:nth-child(2) { width: 24px; }   /* barra central mas corta */
.hs-hamburger:hover span { background: #b8730f; }
/* estado ABIERTO: las barras forman una X */
.hs-hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); width: 30px; }
.hs-hamburger.is-open span:nth-child(2) { opacity: 0; }
.hs-hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); width: 30px; }

/* Iconos del header (carrito, cuenta) segun el diseño.
   TAMAÑO FIJO + flex-shrink:0 para que NO se encojan ni deformen al
   reducir la ventana (van en un flex junto al buscador). */
.hs-icon { display: block; flex-shrink: 0; }
.hs-icon-cart {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
}
.hs-icon-account {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
}
/* que los contenedores de los iconos tampoco se encojan */
#mini-cart-dropdown,
#user-profile-menu,
#mini-cart-dropdown .cart-contents,
#user-profile-menu > a {
    flex-shrink: 0 !important;
}
.hs-hamburger { flex-shrink: 0; }
/* El buscador SI debe poder encogerse (min-width:0) para no montarse
   sobre los iconos al estrechar la ventana. Ademas un huequito de separacion. */
.search-wrapper { gap: 6px; }
.search-ajax-container {
    min-width: 0 !important;
    flex: 1 1 auto;
}
.search-ajax-container .dgwt-wcas-search-wrapp,
.search-ajax-container .dgwt-wcas-search-form,
.search-ajax-container input.dgwt-wcas-search-input {
    min-width: 0 !important;
}
/* Punto verde de "sesion iniciada" sobre el icono de cuenta */
#user-profile-menu { position: relative; }
.hs-account-check {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2e9e5b;
    border: 2px solid #fff;
}

/* Fondo oscurecido detras (se ve la web por detras, atenuada) */
body.hs-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100000;
    animation: hsMenuFade .2s ease;
}
@keyframes hsMenuFade { from { opacity: 0; } to { opacity: 1; } }

/* Panel del menu ABIERTO: visible y centrado */
body.hs-menu-open .custom-dropdown-menu:not(.hs-filters-panel) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* evita el scroll del fondo cuando el menu esta abierto */
body.hs-menu-open { overflow: hidden; }

/* ============================================================
   PANEL DE FILTROS de la tienda: se abre exactamente igual que el
   menu de la hamburguesa (reutiliza .custom-dropdown-menu) y las
   categorias van plegadas para que la lista no sea infinita.
   ============================================================ */
body.hs-filters-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100000;
    animation: hsMenuFade .2s ease;
}
body.hs-filters-open .hs-filters-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
body.hs-filters-open { overflow: hidden; }

/* buscador dentro del panel */
.hs-filters-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 0 4px;
}
.hs-filters-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f7f7f8;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--secondary-color);
}
.hs-filters-search__input:focus {
    outline: none;
    border-color: #d28712;
    background: #fff;
}
.hs-filters-search__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #d28712;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.hs-filters-search__btn:hover { background: #b8730f; }

/* arbol de categorias */
.hs-fcat {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hs-fcat--sub {
    margin-left: 18px;
    padding-left: 8px;
    border-left: 2px solid rgba(211, 124, 37, 0.16);
}
.hs-fcat__row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.hs-fcat__link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--secondary-color) !important;
    transition: background-color .15s ease, color .15s ease;
}
.hs-fcat__link:hover { background-color: rgba(211, 124, 37, 0.08); color: var(--main-color) !important; }
.hs-fcat__name { overflow: hidden; text-overflow: ellipsis; }
.hs-fcat__count {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9e9a9a;
}
.hs-fcat--sub .hs-fcat__link { font-size: 0.8rem; }
.hs-fcat__toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9e9a9a;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.hs-fcat__toggle:hover { background-color: rgba(211, 124, 37, 0.08); color: var(--main-color); }
.hs-fcat__toggle svg { width: 12px; height: 8px; display: block; transition: transform .2s ease; }
.hs-fcat__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hs-fcat__toggle[aria-expanded="true"] { color: var(--main-color); }
.hs-fcat__children[hidden] { display: none; }

/* ============================================================
   ACCESORIOS DE JUEGO: tres ARCOS OJIVALES (la catedral del logotipo).
   Fondo claro a proposito, para no encadenar otro bloque oscuro detras
   de los juegos de especialista, y con la silueta gotica muy tenue.
   ============================================================ */
.hs-acc {
    position: relative;
    container-type: inline-size;
    /* abajo casi nada: el hueco grande ya lo pone el "¿Tienes dudas?" del footer */
    margin: clamp(3.5rem, 7vw, 6.5rem) 0 0;
    padding-bottom: 0;
}
.hs-acc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hs-acc__lead {
    max-width: 720px;
    margin: 1.4rem auto 1.6rem;
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: #335e68;
    text-align: center;
}
/* silueta gotica de fondo, tenue: da el aire sin oscurecer la pagina */
.hs-acc__skyline {
    position: absolute;
    left: 50%;
    bottom: 104px;                  /* las agujas nacen justo en la base de los arcos */
    z-index: 0;
    width: 100vw;
    height: 92px;
    transform: translateX(-50%);
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 92px;
    opacity: 0.13;
    pointer-events: none;
    /* la base de las agujas se funde: si no, deja una banda gris de lado a lado */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0) 100%);
}
.hs-acc__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3.2cqw, 48px);
    align-items: start;
}
.hs-acc__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* Contenedor gotico (Recurso 2.svg): la piedra clara integra pinaculos, contrafuertes
   y el arco; dentro va la imagen recortada. Al pasar el raton la piedra se pone naranja. */
.hs-acc__cont {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition: transform .25s ease;
}
.hs-acc__cont-fill,
.hs-acc__cont-orn {
    fill: #d0c6b4;                 /* mismo tono piedra que el SVG del cliente */
    transition: fill .25s ease;
}
/* la imagen de fondo se agranda al pasar por encima; la estructura NO se mueve.
   El zoom es en la propia imagen (transform-box con su centro), sin tocar la piedra. */
.hs-acc__cont image {
    transform-box: fill-box;
    transform-origin: center center;
    transition: transform .45s ease;
    will-change: transform;
}
.hs-acc__tile:hover .hs-acc__cont image { transform: scale(1.12); }

/* ademas, todo el arco se eleva un poco (como las otras secciones) */
.hs-acc__tile:hover .hs-acc__cont,
.hs-acc__tile:focus-visible .hs-acc__cont { transform: translateY(-8px); }

.hs-acc__tile:hover .hs-acc__cont-fill,
.hs-acc__tile:hover .hs-acc__cont-orn,
.hs-acc__tile:focus-visible .hs-acc__cont-fill,
.hs-acc__tile:focus-visible .hs-acc__cont-orn { fill: #d28712; }

/* roseton del logotipo entre dos filetes */
.hs-acc__rose {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem);
    color: #d28712;
}
.hs-acc__rose-svg { width: 26px; height: 26px; flex: 0 0 auto; }
.hs-acc__rose-line {
    display: block;
    width: clamp(40px, 9vw, 120px);
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 135, 18, 0) 0%, rgba(210, 135, 18, 0.75) 100%);
}
.hs-acc__rose-line:last-child { background: linear-gradient(90deg, rgba(210, 135, 18, 0.75) 0%, rgba(210, 135, 18, 0) 100%); }

.hs-acc__label {
    display: block;
    margin-top: 18px;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: clamp(0.72rem, 1.05cqw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1c1c1c;
    transition: color .2s ease;
}
.hs-acc__label::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: #d28712;
    transition: width .25s ease;
}
.hs-acc__tile:hover .hs-acc__label { color: #b8730f; }
.hs-acc__tile:hover .hs-acc__label::after { width: 66px; }

/* Cuando la pagina termina con los arcos, el "¿Tienes dudas?" sube: si no, entre las
   etiquetas y ese bloque quedaban casi 200px de vacio. */
body:has(.hs-acc) .hs-help { padding-top: 3.5rem; }
@media (max-width: 767.98px) {
    body:has(.hs-acc) .hs-help { padding-top: 2.5rem; }
}

@media (max-width: 767.98px) {
    .hs-acc__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 340px; margin: 0 auto; }
    .hs-acc__skyline { bottom: auto; top: 40%; opacity: 0.05; }
}

/* ============================================================
   GLOBO del calendario de eventos (vista de mes).
   1) Se ANULA por completo la caja del plugin (fondo, borde, sombra y
      relleno), que era la que dejaba ese marco doble alrededor.
   2) La tarjeta es .hs-evtip, con las mismas medidas, tipografias y
      colores que las tarjetas de la web.
   ============================================================ */
.tooltipster-base.tribe-events-tooltip-theme:has(.hs-evtip),
.tribe-events-tooltip-theme .tooltipster-box:has(.hs-evtip),
.tribe-events-tooltip-theme .tooltipster-content:has(.hs-evtip) {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    filter: none !important;
}
.tribe-events-tooltip-theme .tooltipster-base:has(.hs-evtip) .tooltipster-arrow,
.tooltipster-base.tribe-events-tooltip-theme:has(.hs-evtip) .tooltipster-arrow { display: none !important; }

/* separacion respecto al enlace: el globo NUNCA se pone encima del titulo */
.tooltipster-base.tribe-events-tooltip-theme.tooltipster-top:has(.hs-evtip) { margin-top: -12px !important; }
.tooltipster-base.tribe-events-tooltip-theme.tooltipster-bottom { margin-top: 12px !important; }
.tooltipster-base.tribe-events-tooltip-theme.tooltipster-left:has(.hs-evtip) { margin-left: -12px !important; }
.tooltipster-base.tribe-events-tooltip-theme.tooltipster-right:has(.hs-evtip) { margin-left: 12px !important; }

/* --- la tarjeta --- */
.hs-evtip {
    box-sizing: border-box;
    width: 300px;
    max-width: 88vw;
    padding: 18px 0 16px !important;    /* sin imagen: el aire de arriba lo pone el relleno */
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
    text-align: left !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
}
.hs-evtip > * { box-sizing: border-box; max-width: 100%; }

/* el globo va SIN imagen (por si el plugin la colara por algun otro sitio) */
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper { display: none !important; }

/* fecha: versalitas naranjas, como los antetitulos de la web */
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-datetime {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px !important;
    margin: 0 0 8px !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    color: #d28712 !important;
}
.hs-evtip .tribe-common-c-svgicon--featured,
.hs-evtip .tribe-common-c-svgicon--featured * {
    width: 11px !important;
    height: 13px !important;
    color: #d28712 !important;
    fill: #d28712 !important;
}

/* titulo en Lora, igual que las tarjetas de producto y del blog */
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-title {
    padding: 0 16px !important;
    margin: 0 0 8px !important;
}
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-title-link {
    display: block;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    color: #1c1c1c !important;
    text-decoration: none !important;
    border: 0 !important;
}
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover { color: #b8730f !important; }

/* descripcion: 3 lineas y fuera */
.tribe-events-tooltip-theme .hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description,
.tribe-events-tooltip-theme .hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description *,
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description,
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description * {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #3c4147 !important;
}
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description {
    padding: 0 16px !important;
    margin: 0 0 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 6;              /* mas texto -> la ficha queda mas alargada */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-description p:last-child { margin-bottom: 0 !important; }

/* precio: teal de la marca, como los subtitulos */
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-cost {
    padding: 0 16px !important;
    margin: 0 0 14px !important;
    background: none !important;
    border: 0 !important;
}
.hs-evtip .tribe-events-calendar-month__calendar-event-tooltip-cost .tribe-events-c-small-cta__price {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #335e68 !important;
}

/* boton gris: MISMO acabado que el boton FILTROS de la tienda, a todo el ancho util.
   Va con selector reforzado porque ".tribe-common a" del plugin le ganaba y lo dejaba
   sin fondo ni relleno (de ahi que se saliera y se viera como una barra rara). */
.hs-evtip a.hs-evtip__btn,
a.hs-evtip__btn {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100% - 32px) !important;
    min-height: 38px !important;
    margin: 0 16px !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    background: linear-gradient(to bottom, #fdfdfd 0%, #cecece 100%) !important;
    border: 1px solid #aeaeae !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #2b2b2b !important;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.hs-evtip a.hs-evtip__btn:hover,
a.hs-evtip__btn:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #d8d8d8 100%) !important;
    border-color: #9c9c9c !important;
}
.hs-evtip a.hs-evtip__btn svg { width: 15px !important; height: 10px !important; flex: 0 0 auto; }

/* ============================================================
   Boton VOLVER ARRIBA (Sustraccion 5): abajo a la derecha, con un
   margen -derecho e inferior- igual a lo que mide el propio boton.
   Aparece al bajar y se esconde arriba del todo.
   ============================================================ */
.hs-totop {
    position: fixed;
    right: 67px;                 /* mismo hueco que su ancho */
    bottom: 66px;                /* mismo hueco que su alto */
    z-index: 1040;
    width: 67px;
    height: 66px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: transform .2s ease;
}
.hs-totop img { width: 100%; height: 100%; display: block; }
.hs-totop:hover { transform: translateY(-3px); }
.hs-totop:focus-visible { outline: 2px solid #d28712; outline-offset: 4px; border-radius: 50%; }

/* pantallas bajas o estrechas: el hueco de 66px se come media pantalla */
@media (max-width: 575.98px), (max-height: 620px) {
    .hs-totop { right: 20px; bottom: 20px; }
}

/* ============================================================
   Popup de confirmacion "añadido al carrito" (estilo de la web:
   fondo oscurecido + tarjeta blanca redondeada centrada)
   ============================================================ */
.hs-cart-popup {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
.hs-cart-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.hs-cart-popup__box {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    padding: 40px 34px 30px;
    text-align: center;
    transform: translateY(14px) scale(.97);
    transition: transform .25s ease;
}
.hs-cart-popup.is-open .hs-cart-popup__box { transform: translateY(0) scale(1); }
.hs-cart-popup__close {
    position: absolute;
    top: 8px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 50%;
    color: #d28712;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hs-cart-popup__close:hover { background: rgba(211, 124, 37, 0.10); color: #b8730f; }
/* Icono X de cerrar (marca) - tamaño base */
.hs-close-x { width: 15px; height: 16px; display: block; }
.hs-cart-popup__check {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(191, 113, 49, 0.10);
    border: 2px solid #bf7131;
    color: #bf7131;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hs-cart-popup__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.92rem;
    color: #2b2b2b;
    margin: 0 0 8px;
}
.hs-cart-popup__name {
    font-family: 'Lora', Georgia, serif;
    color: #7a7f87;
    font-size: 1rem;
    font-style: italic;
    margin: 0 0 22px;
}
.hs-cart-popup__name:empty { display: none; }
.hs-cart-popup__actions {
    display: flex;
    flex-direction: row-reverse;   /* VER CARRITO a la izquierda, SEGUIR a la derecha */
    gap: 12px;
    margin-top: 10px;
}
/* Botones de ALTO FIJO (ratio ~4,15:1 como el diseño): el texto se
   centra y, si es largo, cae a 2 lineas SIN deformar el boton. */
.hs-cart-popup__btn {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.1;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, color .15s ease;
}
.hs-cart-popup__btn--solid { background: #bf7131; color: #fff; border: 2px solid #bf7131; }
.hs-cart-popup__btn--solid:hover { filter: brightness(1.08); color: #fff; }
.hs-cart-popup__btn--ghost { background: transparent; color: #bf7131; border: 2px solid #e28605; }
.hs-cart-popup__btn--ghost:hover { background: rgba(226, 134, 5, 0.10); }

/* ---- Feedback (spinner) en los botones de "añadir al carrito" ---- */
.single_add_to_cart_button.loading,
.hs-prod-addcart.loading,
.add_to_cart_button.loading,
.btn-add-to-cart-circle.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: .9;
}
.single_add_to_cart_button.loading::after,
.hs-prod-addcart.loading::after,
.add_to_cart_button.loading::after,
.btn-add-to-cart-circle.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hsSpin .6s linear infinite;
}
@keyframes hsSpin { to { transform: rotate(360deg); } }

/* ============================================================
   MI CUENTA (WooCommerce) - estetica de la marca
   (los botones eran azul/verde de Bootstrap; iconos/avatar azules)
   ============================================================ */
/* Titulos de seccion (Acceder / Registrarse / Hola...) */
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-dashboard-bootstrap h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--secondary-color);
}

/* Campos de formulario: redondeados y foco naranja (como el checkout) */
.woocommerce-account .form-control,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select {
    border-radius: 10px !important;
    border: 1px solid #ced4da;
    padding: .65rem .9rem;
}
.woocommerce-account .form-control:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus {
    border-color: var(--main-color) !important;
    box-shadow: 0 0 0 .2rem rgba(211, 124, 37, 0.18) !important;
}

/* Botones (login / registrar / guardar) -> naranja de marca */
.woocommerce-account .btn-primary,
.woocommerce-account .btn-success,
.woocommerce-account button[type="submit"],
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .button {
    background-color: var(--main-color) !important;
    border: 2px solid var(--main-color) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .85rem;
    padding: .55rem 1.8rem !important;
    transition: filter .15s ease;
}
.woocommerce-account .btn-primary:hover,
.woocommerce-account .btn-success:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover {
    filter: brightness(1.08);
    color: #fff !important;
}

/* Avatar e iconos azules -> naranja */
.woocommerce-account .bg-primary { background-color: var(--main-color) !important; }
.woocommerce-account .text-primary { color: var(--main-color) !important; }

/* Enlaces de contenido en naranja al pasar */
.woocommerce-account .woocommerce-MyAccount-content a:hover,
.woocommerce-account .woocommerce-dashboard-bootstrap a:not(.card):hover,
.woocommerce-account .lost_password a:hover { color: var(--main-color); }

/* ----- Navegacion (pestañas) ----- */
.woocommerce-MyAccount-navigation .nav-tabs {
    border-bottom: 2px solid #ececec !important;
    background: transparent !important;
    border-radius: 0 !important;
    gap: .15rem;
}
.woocommerce-MyAccount-navigation .nav-link {
    color: var(--secondary-color) !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 10px 10px 0 0 !important;
}
.woocommerce-MyAccount-navigation .nav-link:hover {
    color: var(--main-color) !important;
    background: rgba(211, 124, 37, 0.06);
}
.woocommerce-MyAccount-navigation .nav-link.active {
    color: var(--main-color) !important;
    border-bottom: 3px solid var(--main-color) !important;
    background: transparent !important;
}
.woocommerce-MyAccount-navigation .nav-link.text-danger { color: #c0392b !important; }
.woocommerce-MyAccount-navigation .nav-link.text-danger:hover { color: #a5281b !important; background: rgba(192, 57, 43, 0.06); }

/* ----- Tarjetas del dashboard ----- */
.woocommerce-account .card { border-radius: 14px; }
.woocommerce-account .card-hover-effect { transition: transform .15s ease, box-shadow .15s ease; }
.woocommerce-account .card-hover-effect:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10); }

/* Formularios de login/registro en tarjeta sutil */
.woocommerce-account .hs-login-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

/* ============================================================
   Margenes laterales de la web: 10% a cada lado (contenido al 80%)
   en tablet y escritorio. En movil (<768) se mantiene casi a ancho
   completo (margenes pequeños de Bootstrap).
   ============================================================ */
@media (min-width: 768px) {
    .container { max-width: 80% !important; }
}

/* Carrusel de LOGOS del home: mas separacion + logos mas pequeños y uniformes */
.hs-logo-slider { gap: clamp(3.5rem, 5.5vw, 5rem) !important; }   /* separacion al doble (el usuario los queria mas separados) */
.custom-category-logo { max-height: 96px; width: auto; object-fit: contain; }   /* logos un poco mas grandes (antes 72px) */

/* ============================================================
   Rejilla de tienda/categoria: tarjetas de TAMAÑO CONSISTENTE que NO se
   deforman ni cambian de tamaño; el nº de columnas se adapta solo al ancho.
   ============================================================ */
.products.hs-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;                  /* un tercio mas que antes (era 1.5rem); vale para vertical y horizontal */
    /* tope de ancho = MAXIMO 5 columnas; centrada. En movil = 1 columna */
    max-width: 1550px;
    margin: 0 auto !important;
}
/* neutraliza el comportamiento de .col en las celdas (ahora son celdas de grid) */
.products.hs-product-grid > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tarjetas UNIFORMES (misma altura) con el ESPACIADO COMPACTO de siempre:
   imagen cuadrada arriba, titulo debajo, precio+boton al fondo (mt-auto).
   El estilo visual (bordes, sombra, precio teal, imagen redondeada) es el actual. */
.products .product-card-img-wrapper img,
.products .card-img-top {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
/* Titulo reserva 2 lineas -> todas las tarjetas igualadas */
.products .product-card-title {
    min-height: 2.8em;
}
/* Fila precio+boton: misma altura con o sin oferta */
.custom-product-card .card-body > .d-flex.justify-content-between {
    min-height: 52px;
    align-items: center;
}
.custom-product-card .card-body > .d-flex.justify-content-between .product-card-price {
    display: flex;
    flex-direction: row;             /* precio nuevo y tachado EN LINEA (antes en columna) -> gana una linea de alto */
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    line-height: 1.2;
}

/* Estado del producto en la tarjeta (En stock / Disponible bajo reserva / Agotado) */
.product-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -0.35rem 0 0.5rem;       /* mas compacto; NO altera la fila precio/boton (mt-auto) */
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.62rem;              /* mas pequeño (antes 0.72rem) para no alargar la tarjeta */
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
}
.product-card-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.product-card-status--instock     { color: #1c8a4e; }   /* verde: En stock */
.product-card-status--onbackorder { color: #c9770f; }   /* ambar: Disponible bajo reserva */
.product-card-status--outofstock  { color: #cf3b3b; }   /* rojo: Agotado */

/* ============================================================
   Calendario de eventos (The Events Calendar) con estilo HobbyShop:
   TODO redondeado (sin angulos rectos) + colores de marca (naranja/teal)
   + tipografias propias (Montserrat / Lora).
   ============================================================ */
.tribe-common {
    --tec-color-accent-primary: #335e68;              /* TEAL de marca como acento principal (menos amarillo) */
    --tec-color-accent-primary-hover: #2a4e57;
    --tec-color-accent-primary-active: #24444c;
    --tec-color-accent-primary-multiday: rgba(51, 94, 104, 0.16);
    --tec-color-accent-primary-multiday-hover: rgba(51, 94, 104, 0.28);
    --tec-color-accent-primary-background: rgba(51, 94, 104, 0.08);
    --tec-color-link-accent: #335e68;
    --tec-color-link-accent-hover: #24444c;
    --tec-font-family-sans-serif: 'Montserrat', Arial, sans-serif;
    --tec-font-family-base: 'Montserrat', Arial, sans-serif;
}
/* caja del calendario */
.tribe-events {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 28px;
    padding: clamp(1rem, 2.4vw, 2rem);
    box-shadow: 0 12px 34px rgba(28, 28, 28, 0.07);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* el hueco de abajo (ultimo boton -> borde del contenedor) = mismo que arriba */
.tribe-events > *:last-child { margin-bottom: 0 !important; }
/* quitar el RECTANGULO con borde gris de la barra superior (search + filtros) */
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar--border {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* tabla del mes: separate + spacing (gaps entre dias) */
.tribe-events .tribe-events-calendar-month {
    border-collapse: separate !important;
    border-spacing: 8px !important;
    border: none !important;
}
/* contenedor del calendario MAS ANCHO (reducir margen lateral) */
body .tribe-common-l-container { max-width: 1460px !important; }
/* --- buscador: pastilla con borde e icono naranja (como el diseño), sin boton --- */
.tribe-events .tribe-events-c-search__input-control {
    border-radius: 999px !important;
    border: 1.5px solid #e3a63f !important;
    background: #ffffff !important;
    padding-left: 6px;
}
.tribe-events .tribe-events-c-search__input {
    border: none !important;
    background: transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.tribe-events .tribe-events-c-search__input-control-icon-svg { color: #d28712 !important; }
.tribe-events .tribe-events-c-search__button { display: none !important; }   /* el diseño no tiene boton; se busca con Enter */
/* --- selector de vista (Lista/Mes/Dia): la activa con SUBRAYADO, como los titulos de la web (sin pastilla) --- */
.tribe-events .tribe-events-c-view-selector__list-item-link {
    border-radius: 0 !important;
    padding: 6px 6px !important;
    background: transparent !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #555 !important;
    position: relative;
}
.tribe-events .tribe-events-c-view-selector__list-item-link::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -4px;
    height: 3px;
    background: transparent;
    border-radius: 3px;
}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link span {
    background: transparent !important;
    color: #d28712 !important;        /* MES en naranja, como el diseño */
    font-weight: 700;
    box-shadow: none !important;
}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
    background: #1c1c1c !important;   /* subrayado negro, como el diseño */
}
/* --- barra superior: mes en Lora, botones redondeados --- */
.tribe-events .tribe-events-c-top-bar__datepicker-button {
    font-family: 'Lora', Georgia, serif !important;
    font-weight: 600;
    color: #1c1c1c !important;
    border-radius: 999px !important;
    font-size: 1.4rem;
    text-transform: capitalize !important;      /* "Julio 2026" */
}
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-events .tribe-events-c-nav__today {
    border-radius: 999px !important;
    color: #335e68 !important;
    border-color: #335e68 !important;
    text-transform: uppercase !important;        /* "ESTE MES" */
    letter-spacing: 0.06em;
    font-weight: 700;
}
.tribe-events .tribe-events-c-top-bar__nav-link,
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next { border-radius: 50% !important; }
.tribe-events .tribe-events-c-top-bar__nav-link:hover { background: rgba(51, 94, 104, 0.12) !important; }
/* --- cabecera de dias de la semana: letras teal --- */
.tribe-events .tribe-events-calendar-month__header-column {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 12px !important;
    vertical-align: middle !important;
}
.tribe-events .tribe-events-calendar-month__header-column-title {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    color: #335e68 !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
/* --- celdas SIN fondo: solo se ven los numeros y la tarjeta del evento --- */
.tribe-events .tribe-events-calendar-month__day {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tribe-events .tribe-events-calendar-month__day:hover { background: transparent !important; }
.tribe-events .tribe-events-calendar-month__day--current {
    background: transparent !important;
    box-shadow: none !important;
}
.tribe-events .tribe-events-calendar-month__day-cell { background: transparent !important; }
.tribe-events .tribe-events-calendar-month__day-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #444;
}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
    color: #335e68 !important;
    font-weight: 800;
}
/* --- eventos: tarjetita blanca redondeada SIN linea/barra de color --- */
.tribe-events .tribe-events-calendar-month__calendar-event {
    border: none !important;
    border-radius: 12px;
    background: #ffffff;
    padding: 6px 8px;
    box-shadow: 0 2px 8px rgba(28, 28, 28, 0.07);
}
.tribe-events .tribe-events-calendar-month__calendar-event::before,
.tribe-events .tribe-events-calendar-month__calendar-event::after,
.tribe-events .tribe-events-calendar-month__calendar-event-details::before { display: none !important; }
.tribe-events .tribe-events-calendar-month__calendar-event-featured-image-wrapper,
.tribe-events .tribe-events-calendar-month__calendar-event-featured-image { border-radius: 9px !important; }
.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
    font-family: 'Montserrat', sans-serif;
    color: #1c1c1c;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover { color: #335e68; }
.tribe-events a:hover { color: #24444c; }

/* --- focus del buscador LIMPIO (adios recuadro negro) --- */
.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-events-c-search__input:focus,
.tribe-events .tribe-events-c-search__input:focus-visible { outline: none !important; box-shadow: none !important; }
.tribe-events .tribe-events-c-search__input-control:focus-within {
    border-color: #d28712 !important;
    box-shadow: 0 0 0 3px rgba(210, 135, 18, 0.15) !important;
}
.tribe-events .tribe-events-c-events-bar__search-button { display: none !important; }
/* EL "SOLIDO AZUL": es el outline nativo del navegador que el plugin activa con
   `outline:auto` en :focus del input (regla .tribe-common-form-control-text__input:focus).
   Se elimina en el propio campo, que es donde aparece. */
.tribe-events .tribe-common-form-control-text__input,
.tribe-events .tribe-common-form-control-text__input:focus,
.tribe-events .tribe-common-form-control-text__input:focus-visible,
.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-events-c-search__input:focus,
.tribe-events .tribe-events-c-search__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background-color: transparent !important;
}
/* contenedores del buscador sin fondo (por si --tec-color-background-events-bar pinta algo) */
.tribe-common,
.tribe-events { --tec-color-background-events-bar: transparent !important; }
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar__search,
.tribe-events .tribe-events-c-events-bar__search-container,
.tribe-events .tribe-events-c-events-bar__search-form,
.tribe-events .tribe-events-c-search,
.tribe-events .tribe-events-c-search__input-group,
.tribe-events .tribe-events-c-events-bar:focus-within,
.tribe-events .tribe-events-c-search:focus-within,
.tribe-events .tribe-events-c-search__input-group:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* la pastilla del campo mantiene su borde naranja */
.tribe-events .tribe-events-c-search__input-control {
    background: #ffffff !important;
    border: 1.5px solid #e3a63f !important;
    border-radius: 999px !important;
}
.tribe-events .tribe-events-c-search__input-control:focus-within { border-color: #d28712 !important; }
/* red de seguridad: quitar el fondo azul de autocompletado de Chrome en el campo */
.tribe-events .tribe-events-c-search__input:-webkit-autofill,
.tribe-events .tribe-events-c-search__input:-webkit-autofill:hover,
.tribe-events .tribe-events-c-search__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #2d3748 !important;
}

/* --- boton "Suscribirse al calendario": pastilla teal (no azul, no cuadrado) --- */
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-common-c-btn-border {
    border-radius: 999px !important;
    border: 2px solid #335e68 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tribe-events .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-c-subscribe-dropdown__button-icon { color: #335e68 !important; }
.tribe-events .tribe-events-c-subscribe-dropdown__button-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tribe-events .tribe-events-c-subscribe-dropdown:hover .tribe-events-c-subscribe-dropdown__button { background: #335e68 !important; }
.tribe-events .tribe-events-c-subscribe-dropdown:hover .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-c-subscribe-dropdown:hover .tribe-events-c-subscribe-dropdown__button-icon { color: #ffffff !important; }

/* --- resultados EN VIVO del buscador de eventos: IDENTICO al desplegable del buscador principal (FiboSearch) --- */
.tribe-events .tribe-events-c-search__input-group { position: relative; }
.hs-evt-search-results {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;          /* = .dgwt-wcas-suggestions-wrapp */
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
    padding: 10px 6px !important;
    max-height: 380px;
    overflow-y: auto;
    display: none;
}
.hs-evt-search-results.is-open { display: block !important; }
.hs-evt-search-results::-webkit-scrollbar { width: 8px; }
.hs-evt-search-results::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.hs-evt-search-results::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 8px; }
.hs-evt-search-results::-webkit-scrollbar-thumb:hover { background-color: #a0aec0; }
.hs-evt-search-item {
    display: block !important;
    margin: 4px 10px !important;                   /* separacion entre filas */
    padding: 14px 18px !important;                 /* = padding real de la fila del buscador principal (con aire) */
    border-radius: 12px !important;
    border: none !important;
    text-decoration: none !important;
    background: transparent !important;
}
.hs-evt-search-item:hover { background-color: rgba(211, 124, 37, 0.08) !important; }   /* hover naranja como el principal */
.hs-evt-search-item__title {
    display: block !important;
    font-family: var(--font-default), 'Montserrat', Arial, sans-serif !important;
    font-size: 0.95rem !important;                 /* = .dgwt-wcas-st-title */
    font-weight: 600 !important;
    color: #2d3748 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-evt-search-item__date {
    display: block !important;
    font-family: var(--font-default), 'Montserrat', Arial, sans-serif !important;
    font-size: 0.8rem !important;
    color: #718096 !important;
    margin: 5px 0 0 !important;
}
.hs-evt-search-empty {
    padding: 14px;
    text-align: center;
    color: #8a8f95;
    font-family: var(--font-default), 'Montserrat', Arial, sans-serif;
    font-size: 0.85rem;
}

/* ============================================================
   Carteles de los eventos (lista / dia / mes): MISMO sistema que las
   tarjetas de producto -> caja blanca, borde redondeado y cartel
   centrado y contenido. Sin esto cada cartel salia a un tamano
   distinto y descuadraba las filas.
   Valores copiados de .custom-product-card / .product-card-img-wrapper.
   ============================================================ */
/* OJO: el cartel NO va dentro de un <a>, cuelga directo del wrapper -> la caja es el wrapper.
   La caja va OSCURA: los logos de los eventos son letras blancas sin fondo y sobre blanco se
   lavan. Colores tomados del panel oscuro de la vitrina 3D (.hs-3d-showcase), que ya existe en
   la web justo para eso: que una imagen casi blanca resalte. La FORMA es la de la tarjeta de
   producto (radio 26, relleno 15). */
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-events .tribe-events-calendar-day__event-featured-image-wrapper,
.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-featured-image-wrapper {
    box-sizing: border-box;
    align-self: start;               /* que la caja no se estire con la fila */
    background: #ffffff;             /* caja blanca (como las tarjetas de producto), sin fondo oscuro */
    border: 1px solid #eef1f5;
    border-radius: 26px;
    box-shadow: 0 8px 12px rgba(51, 94, 104, 0.22);
    padding: 15px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper:hover,
.tribe-events .tribe-events-calendar-day__event-featured-image-wrapper:hover {
    box-shadow: 0 8px 12px rgba(51, 94, 104, 0.38);
}
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper a,
.tribe-events .tribe-events-calendar-day__event-featured-image-wrapper a { display: block; }
/* el cartel: cuadrado y contenido, como la imagen de producto */
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-day__event-featured-image,
.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-featured-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 18px;
}
/* globo del mes: misma idea pero en pequeno (el globo ya es una caja) */
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper img,
.tribe-events .tribe-events-calendar-month__calendar-event-featured-image-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 12px;
}

/* ============================================================
   Menu legal del footer (Aviso Legal, Privacidad, Condiciones, Cookies)
   ============================================================ */
.hs-footer-legal {
    margin-top: 0.5rem;
}
.hs-footer-legal-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
}
.hs-footer-legal-menu li { margin: 0; }
.hs-footer-legal-menu a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.hs-footer-legal-menu a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ============================================================
   FOOTER (Grupo 928) — MEDIDAS EXACTAS del diseño (viewBox 1920x734).
   Margenes 13% (250/1920). Columnas 5/5/2 (x=250/838/1434).
   Titulos 20px Lora #d8d8d8 + subrayado 160px naranja.
   Cuerpo 14px Montserrat #d8d8d8, letter-spacing 0.068em.
   Naranja #d28712, enlace privacidad #00edff, placeholder #335e68.
   ============================================================ */
footer > .container {
    max-width: 100% !important;
    padding-left: 6%;     /* margen lateral del CONTENIDO (el fondo sigue a tope) */
    padding-right: 6%;
    padding-top: 2.8rem;
    padding-bottom: 2.6rem;
}

/* 1) Menu principal CENTRADO + linea centrada (~992px) debajo */
.hs-footer-main { text-align: center; }
.hs-footer-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 2.6rem;
}
.hs-footer-main-menu li { margin: 0; }
.hs-footer-main-menu a {
    color: #d8d8d8;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.068em;
    text-decoration: none;
    transition: color 0.15s ease;
}
.hs-footer-main-menu a:hover,
.hs-footer-main-menu .current-menu-item > a,
.hs-footer-main-menu .current_page_item > a { color: #d28712; }
.hs-footer-main::after {
    content: "";
    display: block;
    width: 70%;
    max-width: 992px;
    height: 2px;
    background: rgba(216, 216, 216, 0.65);
    border-radius: 2px;
    margin: 0.9rem auto 0;
}

/* 2) Redes sociales (gris #b7b7b7, centradas) */
footer .social-icons-wrapper {
    justify-content: center;
    gap: 2.6rem;                 /* iconos mas separados */
    margin: 1.7rem 0 1.5rem;     /* mitad de hueco (3rem -> 1.5rem) hasta las columnas */
}
footer .social-icons-wrapper .social-link {
    color: #b7b7b7;
    font-size: 1.3rem;
    line-height: 1;
    transition: color 0.15s ease, transform 0.1s ease;
}
footer .social-icons-wrapper .social-link:hover { color: #d28712; transform: translateY(-2px); }

/* ============================================================
   Seccion "¿Tienes dudas?" (ayuda/contacto) ENCIMA del footer, todas las paginas.
   Medidas del SVG: titulo 59px, subtitulo 44px, cuerpo 20px, linea 534x3 naranja.
   ============================================================ */
.hs-help {
    background: #ffffff;
    padding: 8rem 0 3.15rem;    /* margen superior DOBLE (4rem -> 8rem); resto compactado -30% */
}
@media (max-width: 767.98px) {
    .hs-help { padding-top: 4rem; }   /* movil: la mitad del margen superior */
}
.hs-help__inner {
    text-align: left;           /* el ancho/margenes laterales los da .container (como las demas secciones) */
}
.hs-help__title {
    margin: 0;
    color: #1c1c1c;
    letter-spacing: 0.071em;
    line-height: 1.08;
}
.hs-help__title-impact,
.hs-help__title-lora {
    display: block;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.64vw, 41px);   /* -30% */
}
.hs-help__title-impact { font-family: 'Impact', 'Montserrat', sans-serif; }
.hs-help__title-lora   { font-family: 'Lora', Georgia, serif; }
.hs-help__line {
    display: block;
    width: 374px;               /* 534 -30% */
    max-width: 90%;
    height: 3px;
    background: #d28712;
    border-radius: 2px;
    margin: 1.54rem 0 1.82rem;  /* -30% */
}
.hs-help__subtitle {
    margin: 0 0 1.12rem;        /* -30% */
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 2.38vw, 31px);  /* -30% */
    letter-spacing: 0.1em;
    color: #335e68;
}
.hs-help__text {
    margin: 0 0 0.77rem;        /* -30% */
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 1.19vw, 14px);  /* -30% */
    letter-spacing: 0.068em;
    line-height: 1.55;
    color: #335e68;
}
.hs-help__btn {
    display: inline-block;
    margin-top: 0.98rem;        /* -30% */
    padding: 7px 18px;          /* -30% */
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.07em;
    color: #1c1c1c;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
    border: none;
    border-radius: 999px;
    box-shadow: 0 3px 6px rgba(210, 135, 18, 0.31), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: filter 0.15s ease;
}
.hs-help__btn:hover { filter: brightness(0.97); }

/* ============================================================
   Plantilla de PAGINAS simples (Servicios, Impresion 3D, politicas,
   Nosotros, Contacto...): hero oscuro coherente + prosa legible.
   ============================================================ */
.hs-page-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: clamp(230px, 30vw, 350px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: #1c1c1c;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hs-page-hero::before {                 /* oscurecido + tinte de marca para legibilidad */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(51,94,104,0.35) 0%, rgba(18,22,26,0) 55%),
        linear-gradient(180deg, rgba(18,22,26,0.55) 0%, rgba(18,22,26,0.82) 100%);
}
.hs-page-hero__inner { position: relative; z-index: 1; padding: 2.5rem 1.5rem; }
.hs-page-hero__eyebrow {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.78rem;
    color: #f0a642;
    margin: 0 0 0.85rem;
}
.hs-page-hero__title {
    margin: 0;
    font-family: 'Impact', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.02;
    font-size: clamp(2.3rem, 5.4vw, 4.4rem);
    color: #ffffff;
    text-shadow: 0 3px 16px rgba(0,0,0,0.5);
}
.hs-page-hero__title::after {           /* subrayado naranja de marca */
    content: "";
    display: block;
    width: 84px;
    height: 4px;
    margin: 1.15rem auto 0;
    background: #d28712;
    border-radius: 2px;
}

/* --- Prosa del contenido --- */
.hs-prose {
    max-width: 1120px;                   /* mas ancho: llena mas la pagina (antes 880, se veia estrecho) */
    margin: 0 auto;
    padding: 0 0 1.5rem;
    color: #3c4147;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.06rem;
    line-height: 1.8;
}
.hs-prose > h2,
.hs-prose .wp-block-heading {           /* SUBTITULOS EN LORA */
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    line-height: 1.28;
    color: #1c1c1c;
    margin: 2.7rem 0 0.9rem;
    padding-left: 16px;
    border-left: 4px solid #d28712;     /* acento de marca (menos plano) */
}
.hs-prose h3 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    color: #1c1c1c;
    margin: 1.9rem 0 0.6rem;
}
.hs-prose p { margin: 0 0 1.15rem; }
.hs-prose a { color: #c9770f; text-decoration: underline; text-underline-offset: 2px; }
.hs-prose a:hover { color: #a9660d; }
.hs-prose strong { color: #1c1c1c; font-weight: 700; }
.hs-prose ul, .hs-prose ol { margin: 0 0 1.35rem; padding-left: 1.45rem; }
/* style.css hace un reset global "ul,ol{list-style:none}" para menus y carruseles;
   en la prosa (eventos, paginas, blog) las vinetas SI se quieren, asi que se recuperan aqui. */
.hs-prose ul { list-style: disc; }
.hs-prose ol { list-style: decimal; }
.hs-prose li { margin: 0 0 0.5rem; }
.hs-prose ul li::marker { color: #d28712; }
.hs-prose hr,
.hs-prose .wp-block-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 50%, rgba(0,0,0,0) 100%);
    margin: 2.5rem 0;
}
.hs-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.hs-prose figure { margin: 1.7rem auto; text-align: center; }
.hs-prose figure figcaption { font-size: 0.9rem; color: #7a7f85; margin-top: 0.5rem; }
.hs-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.98rem; }
.hs-prose th, .hs-prose td { border: 1px solid #e6e6e6; padding: 10px 12px; text-align: left; vertical-align: top; }
.hs-prose th { background: #f6f6f6; font-family: 'Lora', Georgia, serif; color: #1c1c1c; }
.hs-prose::after { content: ""; display: block; clear: both; }   /* contiene el float de la vitrina */

/* Vitrina 3D: panel oscuro flotante para el render (imagen casi blanca -> resalta sobre oscuro) */
.hs-prose .hs-3d-showcase {              /* .hs-prose delante para GANAR a ".hs-prose figure" (que ponia margin:auto) */
    float: right;
    width: min(44%, 360px);
    margin: 0.6rem 0 2rem 3.4rem;        /* 3.4rem de aire real entre la imagen y el texto (izq) */
    padding: 16px 16px 20px;
    background: radial-gradient(130% 120% at 50% 22%, #313742 0%, #15181d 78%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    box-shadow: 0 20px 44px rgba(18,22,26,0.30);
    text-align: center;
}
.hs-prose .hs-3d-showcase img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 0; }
.hs-prose .hs-3d-showcase .hs-3d-cta {   /* BOTON GRIS (estilo de los "VER TODO") */
    display: inline-block;
    margin-top: 16px;
    padding: 11px 22px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #dbdbdb;
    border-radius: 999px;
    text-decoration: none;                /* sin subrayado (lo pisaba .hs-prose a) */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.10);
    text-shadow: 0 1px 1px rgba(255,255,255,0.55);
    transition: background-color 0.2s ease;
}
.hs-prose .hs-3d-showcase .hs-3d-cta:hover { background: #d0d0d0; color: #000; text-decoration: none; }
@media (max-width: 767.98px) {
    .hs-prose .hs-3d-showcase { float: none; width: 100%; max-width: 420px; margin: 0.5rem auto 1.8rem; }
}

@media (max-width: 575.98px) {
    .hs-prose > h2, .hs-prose .wp-block-heading { padding-left: 12px; border-left-width: 3px; }
}

/* ============================================================
   Mas aire SOLO en las 3 uniones de abajo del home (>= el doble):
   portal->destacados, destacados->nuevos, nuevos->eventos.
   Los hijos 4,5,6 de main son: destacados(.row), nuevos(.row), eventos(.row).
   !important porque el my-5 de Bootstrap TAMBIEN es !important.
   ============================================================ */
.hs-home-main > .row:nth-child(n+4) {
    margin-top: clamp(5rem, 8vw, 7rem) !important;   /* antes 3rem -> ahora ~7rem entre esas secciones */
}

/* ============================================================
   Slider "PRÓXIMOS EVENTOS" del home (Grupo 936) — lee The Events Calendar.
   ============================================================ */
.hs-events {
    position: relative;
    container-type: inline-size;             /* cqw = 1% del ancho del banner: TODO escala como el SVG */
    aspect-ratio: 1820 / 790;                /* ratio EXACTO del SVG (Grupo 936) */
    border-radius: 1.92cqw;                  /* 35px */
    overflow: hidden;
    background-size: cover;                   /* cubre TODO el contenedor (sin linea negra a la derecha), sin deformar */
    background-position: left center;         /* fondo pegado a la IZQUIERDA; al reducir recorta por la derecha */
    background-repeat: no-repeat;
    background-color: #1c1c1c;
    display: flex;
}
.hs-events::before {                 /* solo oscurece la IZQUIERDA para leer el texto; la derecha deja ver la ilustracion */
    content: "";
    position: absolute;
    inset: 0;
    /* Exacto del SVG que paso el usuario: negro 63% abajo -> transparente arriba (mucho mas suave) */
    background: linear-gradient(to top, rgba(0,0,0,0.631) 0%, rgba(84,84,84,0) 100%);
    z-index: 0;
}
.hs-events__inner {                  /* SIN z-index: el mix-blend del titulo se mezcla con el fondo */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.hs-events__left {                   /* columna izq 0..43.85%; contenido centrado en el eje x=24.1% del SVG */
    flex: 0 0 43.85%;
    max-width: 43.85%;
    padding-left: 4.4cqw;            /* desplaza el centro del contenido de 21.9% a 24.1% (eje del titulo/boton del SVG) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* SIN z-index: si se aisla, el mix-blend del titulo/boton NO se mezcla con la imagen de fondo */
}
.hs-events__title {
    margin: 0;
    font-family: 'Impact', 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.02;
    font-size: 5.85cqw;              /* ~106px @1820 (medido: "PRÓXIMOS" ocupa 470px de ancho) */
    color: #ffffff;                  /* BLANCO, sin sobreexposicion */
    text-shadow: 0.16cqw 0.22cqw 0.45cqw rgba(0,0,0,0.55);   /* sombra paralela (drop shadow) */
}
.hs-events__lead {
    margin: 2.2cqw 0 0;             /* titulo->lead ~30px (medido y395->y425) */
    font-family: 'Lora', Georgia, serif;
    font-size: 2.2cqw;              /* 40px */
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: 0 0.12cqw 0.7cqw rgba(0,0,0,0.9), 0 0 0.3cqw rgba(0,0,0,0.6);
}
.hs-events__sub {
    margin: 0.7cqw 0 0;            /* lead->sub ~10px */
    font-family: 'Lora', Georgia, serif;
    font-size: 1.37cqw;            /* 25px */
    letter-spacing: 0.04em;
    line-height: 1.35;
    color: #ffffff;
    text-shadow: 0 0.12cqw 0.6cqw rgba(0,0,0,0.9), 0 0 0.3cqw rgba(0,0,0,0.6);
}
.hs-events__btn {
    margin-top: 1.7cqw;            /* sub->boton ~26px */
    display: inline-block;
    padding: 0.75cqw 2.4cqw;       /* boton ~217x53 */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1cqw;             /* 20px */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1a1a;                /* GRIS como los botones "VER TODO" de las categorias */
    background: #dbdbdb;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.10);
    text-shadow: 0 1px 1px rgba(255,255,255,0.55);
    transition: all 0.2s ease;
}
.hs-events__btn:hover { background: #d0d0d0; color: #000; }
.hs-events__right {                  /* cuadro: left 43.85%, ancho 48.57%, alto 50.38%, margen der 7.58% */
    position: relative;
    flex: 0 0 48.57%;
    max-width: 48.57%;
    height: 50.38%;                  /* 398/790 */
    z-index: 1;
}
.hs-events__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3.4cqw;           /* 62px */
}
.hs-events__track { display: flex; height: 100%; transition: transform 0.4s ease; }
.hs-events__card {
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* logo arriba (16%) / nombre-fecha centro / boton abajo (84%), como el SVG */
    align-items: center;
    gap: 0.6cqw;
    padding: 3.4cqw 2.6cqw;          /* 3.4cqw ~= 16% del alto del cuadro (margen sup/inf del contenido en el SVG) */
    text-align: center;
    background: rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(0.9cqw);
    backdrop-filter: blur(0.9cqw);
    border: 2px solid rgba(255,255,255,0.42);   /* borde blanco +1px de grosor */
    border-radius: 3.4cqw;           /* 62px */
    color: #fff;
}
.hs-events__logo {
    display: block;
    max-width: 13cqw;
    height: 6cqw;                    /* slot de logo fijo para que el reparto sea igual haya logo o no */
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}
.hs-events__logo--empty { width: 1px; }   /* reserva el hueco del logo cuando el evento no tiene */
.hs-events__cardmid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6cqw;
    width: 100%;
}
.hs-events__name {
    margin: 0;
    width: 100%;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.37cqw;              /* 25px */
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #ffffff;
}
.hs-events__date {
    margin: 0;
    width: 100%;
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: 0.88cqw;              /* 16px */
    letter-spacing: 0.05em;
    color: #ffffff;
}
.hs-events__cardbtn {
    display: inline-block;
    padding: 0.55cqw 1.7cqw;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72cqw;              /* 13px */
    letter-spacing: 0.06em;
    color: #1c1c1c;
    background: #dbdbdb;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.hs-events__cardbtn:hover { background: #cfcfcf; color: #1c1c1c; }
.hs-events__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 2.91cqw;                  /* 53px (Grupo 937) */
    height: 2.91cqw;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1c1c1c;             /* circulo solido como el SVG */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}
.hs-events__arrow:hover { background: #000; }
.hs-events__chevron { width: 100%; height: 100%; display: block; }   /* chevron blanco (trazo 5, puntas redondas) */
.hs-events__arrow--prev { left: 0; transform: translate(-50%, -50%); }   /* centro EXACTO en el borde izq del cuadro */
.hs-events__arrow--next { right: 0; transform: translate(50%, -50%); }   /* centro EXACTO en el borde der del cuadro */

@media (max-width: 991.98px) {
    .hs-events { aspect-ratio: auto; border-radius: 18px; min-height: 0; }
    .hs-events__inner { flex-direction: column; height: auto; align-items: center; padding: 2rem 1.25rem; gap: 1.6rem; }
    .hs-events__left { flex: none; max-width: none; width: 100%; padding-left: 0; }
    .hs-events__title { font-size: clamp(2.4rem, 12vw, 3.6rem); letter-spacing: 0.04em; }
    .hs-events__lead  { font-size: clamp(1.3rem, 6vw, 2rem); margin-top: 1rem; }
    .hs-events__sub   { font-size: clamp(0.95rem, 4vw, 1.2rem); margin-top: 0.5rem; }
    .hs-events__btn   { font-size: 0.9rem; padding: 0.7rem 1.9rem; margin-top: 1.2rem; }
    .hs-events__right { flex: none; max-width: none; width: 100%; height: auto; }
    .hs-events__viewport { border-radius: 20px; }
    .hs-events__card  { height: auto; min-height: 300px; justify-content: center; gap: 1rem; padding: 1.9rem 1.5rem; border-radius: 20px; }
    .hs-events__cardmid { gap: 0.5rem; }
    .hs-events__logo  { height: auto; max-width: 45%; max-height: 66px; }
    .hs-events__logo--empty { display: none; }
    .hs-events__name  { font-size: 1.2rem; }
    .hs-events__date  { font-size: 0.9rem; }
    .hs-events__cardbtn { font-size: 0.78rem; padding: 0.55rem 1.4rem; }
    .hs-events__arrow { width: 38px; height: 38px; }
    .hs-events__arrow--prev { left: 0; transform: translate(-50%, -50%); }   /* SIEMPRE a mitad del marco (mitad dentro/mitad fuera), como en escritorio */
    .hs-events__arrow--next { right: 0; transform: translate(50%, -50%); }
}

/* 3) Columnas: pequeño padding lateral -> siempre hay distancia entre ellas */
.hs-footer-cols { margin: 0; }
.hs-footer-col { padding: 0 1.25rem; }
.hs-footer-suscribir { padding-left: 0; }    /* la 1ª pegada al margen izq como el diseño */
@media (min-width: 1200px) {
    /* TRES COLUMNAS EQUILIBRADAS: mismo ancho las tres, la del medio centrada en la
       pagina y la ultima pegada al margen derecho, para que los huecos laterales
       contra el borde de la web sean iguales. */
    .hs-footer-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
    .hs-footer-cols > .hs-footer-col {
        width: 100%;
        max-width: none;
        flex: none;
        padding: 0;
    }
    /* el bloque de suscribir, un tercio mas estrecho que su columna */
    .hs-footer-cols > .hs-footer-suscribir > * { max-width: 82%; }
    /* contacto: su contenido centrado dentro de la columna central */
    .hs-footer-cols > .hs-footer-contacto {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* horario: alineado al final, asi cierra contra el borde derecho */
    .hs-footer-cols > .hs-footer-horario {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .hs-footer-cols > .hs-footer-horario > * { text-align: left; }
}
.hs-footer-horario { padding: 0; }           /* la 3ª usa todo su ancho (horas en 1 linea) */

/* Titulos de columna: 20px Lora regular #d8d8d8 + subrayado naranja 160px */
.hs-footer-heading,
.hs-footer-horario .schedule .title {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8d8d8;
    font-size: 20px;
    margin: 0;
}
.hs-footer-heading::after,
.hs-footer-horario .schedule .title::after {
    content: "";
    display: block;
    width: 160px;
    max-width: 100%;
    height: 2px;
    background: #d28712;
    border-radius: 2px;
    margin-top: 0.7rem;
}

/* Cuerpo comun: 14px Montserrat #d8d8d8 */
.hs-footer-suscribir p,
.hs-contact-list li,
.hs-footer-horario .schedule li,
.hs-footer-horario .schedule li p {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.068em;
    line-height: 1.43;
    color: #d8d8d8;
}
.hs-footer-suscribir p { margin: 0 0 20px; }
.hs-footer-suscribir .hs-footer-lead { margin-top: 2.6rem; }
.hs-footer-consent a { color: #00edff; text-decoration: none; font-size: 14px; }
.hs-footer-consent a:hover { text-decoration: underline; }

/* Pildora del email SIN boton (427x37, blanca, borde gris, sombra naranja) */
/* Campo del correo: solo una linea fina gris abajo; se escribe encima, sin caja */
.hs-newsletter {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    box-shadow: none;
    width: 427px;
    max-width: 100%;
    height: 40px;
    margin-top: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.hs-newsletter:focus-within {
    border-bottom-color: #d28712;
}
.hs-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 2px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.07em;
    color: #ffffff;
    text-align: left;
}
.hs-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;              /* mas fino */
    font-size: 10px;               /* mas pequeno */
    letter-spacing: 0.12em;
    opacity: 1;
}
/* Consentimiento (casilla) + boton gris "Suscribirme" (estilo botones grises) */
.hs-newsletter-form { margin-top: 1.6rem; }
.hs-news-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.068em;
    line-height: 1.43;
    color: #d8d8d8;
}
.hs-news-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #d28712;
    cursor: pointer;
}
.hs-news-submit {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 9px 30px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #dbdbdb;
    border: none;
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.10);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.hs-news-submit:hover { background: #cfcfcf; }
.hs-news-submit:active { transform: translateY(1px); }
.hs-news-msg {
    margin: 0.7rem 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.03em;
}
.hs-news-msg.is-ok { color: #7fd88a; }
.hs-news-msg.is-error { color: #ff9b7a; }

/* CONTACTO: iconos naranjas + mapa (sin marco raro) */
.hs-contact-list { list-style: none; margin: 1.4rem 0 1.5rem; padding: 0; }
.hs-contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; margin: 0 0 14px; }
.hs-contact-list li > span,
.hs-contact-list li > a { min-width: 0; overflow-wrap: anywhere; }
.hs-contact-list a { color: inherit; text-decoration: none; font-size: 14px; }
.hs-contact-list a:hover { color: #fff; text-decoration: underline; }
.hs-contact-ico { color: #d28712; font-size: 1rem; line-height: 1.25; flex: 0 0 auto; }
.hs-footer-contacto .google-map-wrapper { margin: 0.3rem 0 0; }
.hs-footer-contacto .map-container {
    width: 245px;
    max-width: 100%;
    height: 160px;
    border: 1px solid rgba(216, 216, 216, 0.6);
    border-radius: 10px;
    overflow: hidden;
}
.hs-footer-contacto .map-container iframe { width: 100%; height: 100%; border: 0; display: block; }

/* HORARIO: dias naranja, horas gris, apiladas */
.hs-footer-horario .schedule .list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.hs-footer-horario .schedule li {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 0 6px;
}
.hs-footer-horario .schedule .day { color: #d28712 !important; font-weight: 400; }
.hs-footer-horario .schedule li p { margin: 0; }
.hs-footer-horario .schedule li p:not(.day) { color: #d8d8d8; white-space: nowrap; }

/* 4) Politicas abajo: linea centrada (~992px) encima + menu centrado 14px */
.hs-footer-legal--bottom {
    text-align: center;
    border: none;
    padding-top: 0;
    margin-top: 2.6rem;
}
.hs-footer-legal--bottom::before {
    content: "";
    display: block;
    width: 70%;
    max-width: 992px;
    height: 2px;
    background: rgba(216, 216, 216, 0.65);
    border-radius: 2px;
    margin: 0 auto 1.7rem;
}
.hs-footer-legal--bottom .hs-footer-legal-menu {
    justify-content: center;
    gap: 0.4rem 2.6rem;
}
.hs-footer-legal--bottom .hs-footer-legal-menu a {
    color: #d8d8d8;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.068em;
}

/* Responsive: por debajo de lg, apilar y centrar (sin deformar) */
@media (max-width: 1199.98px) {
    footer > .container { padding-left: 7%; padding-right: 7%; }
    .hs-footer-col { text-align: center; }
    .hs-footer-heading::after,
    .hs-footer-horario .schedule .title::after { margin-left: auto; margin-right: auto; }
    .hs-newsletter { margin-left: auto; margin-right: auto; }
    .hs-contact-list li,
    .hs-footer-horario .schedule li { justify-content: center; align-items: center !important; text-align: center; }
    .hs-footer-contacto .map-container { margin: 0 auto; }
}

/* Menus del footer como HAMBURGUESA en movil (el de arriba y el de abajo) */
.hs-footer-menu-toggle { display: none; }
@media (max-width: 767.98px) {
    .hs-footer-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 32px;
        margin: 0.1rem auto 0;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .hs-footer-menu-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        margin: 0 auto;
        background: #d8d8d8;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    /* menus ocultos por defecto en movil; se despliegan al tocar */
    .hs-footer-main .hs-footer-main-menu,
    .hs-footer-legal--bottom .hs-footer-legal-menu {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
    }
    .hs-footer-main.is-open .hs-footer-main-menu,
    .hs-footer-legal--bottom.is-open .hs-footer-legal-menu {
        display: flex;
        margin-top: 1rem;
    }
    /* hamburguesa -> X al abrir */
    .is-open .hs-footer-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .is-open .hs-footer-menu-toggle span:nth-child(2) { opacity: 0; }
    .is-open .hs-footer-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   Banner de cookies (RGPD) — estilo HobbyShop
   ============================================================ */
.hs-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    padding: 16px;
    pointer-events: none;            /* solo la caja captura clicks */
}
.hs-cookie-banner[hidden] { display: none; }
.hs-cookie-banner__box {
    pointer-events: auto;
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
    gap: 20px 28px;
    background: #ffffff;
    border: 1px solid #f0e2cf;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(28, 28, 28, 0.22);
    padding: 20px 24px;
    transform: translateY(150%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}
.hs-cookie-banner.is-visible .hs-cookie-banner__box {
    transform: translateY(0);
    opacity: 1;
}
.hs-cookie-banner__text { flex: 1 1 auto; min-width: 0; }
.hs-cookie-banner__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 1.02rem;
    color: #1c1c1c;
}
.hs-cookie-banner__ico { color: #d28712; display: inline-flex; }
.hs-cookie-banner__desc {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #5b6470;
}
.hs-cookie-banner__desc a {
    color: #d28712;
    font-weight: 600;
    text-decoration: underline;
}
.hs-cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}
.hs-cookie-btn {
    border: none;
    border-radius: 999px;
    padding: 0 24px;
    height: 42px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.hs-cookie-btn:active { transform: translateY(1px); }
.hs-cookie-btn--solid { background: #d28712; color: #ffffff; }
.hs-cookie-btn--solid:hover { background: #b9760d; }
.hs-cookie-btn--ghost {
    background: transparent;
    color: #d28712;
    border: 1.5px solid #d28712;
}
.hs-cookie-btn--ghost:hover { background: rgba(210, 135, 18, 0.08); }

@media (max-width: 640px) {
    .hs-cookie-banner { padding: 10px; }
    .hs-cookie-banner__box {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        border-radius: 16px;
    }
    .hs-cookie-banner__actions { justify-content: stretch; }
    .hs-cookie-btn { flex: 1 1 0; }
}