/**
 * QUEMPANADA.ES — Custom CSS Premium
 * PrestaShop Child Classic Theme
 * Paleta: Negro #1A1A1A · Blanco #FFFFFF · Naranja #E07020
 * Font Awesome 6 · Sin emojis
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Poppins:wght@400;500;600&display=swap');

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */
:root {
    --q-orange:      #E07020;
    --q-orange-dark: #C05A10;
    --q-orange-light:#F28C40;
    --q-black:       #1A1A1A;
    --q-black-soft:  #242424;
    --q-black-mid:   #2D2D2D;
    --q-white:       #FFFFFF;
    --q-off-white:   #F5F5F5;
    --q-gray:        #6B6B6B;
    --q-gray-light:  #E2E2E2;
    --font-head: 'Montserrat', 'Segoe UI', sans-serif;
    --font-body: 'Poppins', 'Segoe UI', sans-serif;
    --s-xs:  8px;
    --s-sm:  16px;
    --s-md:  32px;
    --s-lg:  64px;
    --s-xl:  96px;
    --radius: 0px;
    --transition: 0.25s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: var(--font-body);
    background: var(--q-white);
    color: var(--q-black);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================================
   GLOBAL: Eliminar el "cajón" del Classic theme en TODAS las páginas
   ============================================================ */

/* Header siempre full-width — Classic theme a veces lo restringe */
#header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Wrapper global sin sombra ni restricción */
#wrapper {
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Content-wrapper global sin restricción */
#content-wrapper,
#content-wrapper.js-content-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* ============================================================
   TODAS las páginas CMS — full-width completo
   ============================================================ */

/* CRÍTICO: el body tiene clase page-cms en PS8 — forzar full-width */
body.page-cms {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;  /* permite el breakout */
}
/* html controla el scroll horizontal global */
html {
    overflow-x: hidden !important;
}

body.page-cms #wrapper,
body.page-cms #main,
body.page-cms section#main,
body.page-cms #content-wrapper,
body.page-cms #content-wrapper.js-content-wrapper,
body.page-cms #main > .container,
body.page-cms #content-wrapper > .container,
body.page-cms .js-content-wrapper > .container {
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;  /* clave para el breakout */
}
body.page-cms .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
body.page-cms #content,
body.page-cms #content.col-xs-12,
body.page-cms #content.col-sm-12,
body.page-cms #content.col-md-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex: 0 0 100% !important;
    overflow: visible !important;
}

/* Para páginas de cuenta, contacto, etc. */
body.page-customer-account #wrapper,
body.page-contact #wrapper,
body.page-search #wrapper,
body.page-order #wrapper,
body.page-cart #wrapper {
    box-shadow: none !important;
    max-width: 100% !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--q-black);
    line-height: 1.2;
    margin-bottom: var(--s-sm);
}
a { color: var(--q-orange); text-decoration: none; }
a:hover { color: var(--q-orange-dark); }
img { max-width: 100%; height: auto; }

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

/* — Fondo negro en toda la cabecera — */
#header,
#header .header-banner,
#header .header-nav,
#header .header-top,
#header nav,
#header nav.main-menu {
    background: var(--q-black) !important;
    color: var(--q-white) !important;
    border-bottom: none !important;
}
#header .header-top {
    border-bottom: 3px solid var(--q-orange) !important;
    padding: 12px 0 !important;
}

/* — BARRA NAV SUPERIOR (header-nav): idioma / login / carrito — */
#header .header-nav .container,
#header .header-nav > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    gap: 2px !important;
    min-height: 38px !important;
}
#header .header-nav .left-nav {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
    gap: 8px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
}
#header .header-nav .left-nav a {
    color: rgba(255,255,255,0.5) !important;
    font-size: 11px !important;
}
#header .header-nav .right-nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* — Idioma y moneda — */
#header .language-selector,
#header .currency-selector,
#header .language-selector-wrapper,
#header .currency-selector-wrapper,
#_desktop_language_selector,
#_desktop_currency_selector,
.js-language-selector,
.js-currency-selector {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
#header .language-selector a,
#header .currency-selector a,
#_desktop_language_selector a,
#_desktop_currency_selector a {
    color: rgba(255,255,255,0.6) !important;
    font-size: 11px !important;
    font-family: var(--font-body) !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* — Usuario / Iniciar sesión — */
#header .user-info,
#_desktop_user_info,
#_desktop_user_info .user-info {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
#header .user-info a,
#_desktop_user_info a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
#header .user-info a:hover,
#_desktop_user_info a:hover { color: var(--q-orange) !important; }

/* — CARRITO — cubre todos los selectores PS conocidos — */
#header .blockcart,
#_desktop_cart .blockcart,
#_desktop_cart .cart-preview,
#_desktop_cart .blockcart.inactive,
#_desktop_cart .cart-preview.inactive {
    background: var(--q-orange) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}
#header .blockcart a,
#_desktop_cart .blockcart a,
#_desktop_cart .cart-preview a,
#_desktop_cart .blockcart .shopping-cart,
#_desktop_cart a.cart-detailed-link,
.blockcart a.cart-detailed-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: var(--q-orange) !important;
    color: var(--q-white) !important;
    font-family: var(--font-head) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 0 !important;
    transition: background var(--transition) !important;
    text-decoration: none !important;
}
#header .blockcart a:hover,
#_desktop_cart .blockcart a:hover,
#_desktop_cart .cart-preview a:hover {
    background: var(--q-orange-dark) !important;
    color: var(--q-white) !important;
}
/* Icono carrito (material icons y font awesome) */
#_desktop_cart .material-icons,
#_desktop_cart i {
    color: var(--q-white) !important;
    font-size: 16px !important;
}
/* Contador de productos */
.cart-products-count,
#_desktop_cart .cart-products-count {
    background: var(--q-black) !important;
    color: var(--q-white) !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
}

/* — Links genéricos del header-nav — */
#header .header-nav a,
#header .header-banner a {
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    transition: color var(--transition) !important;
}
#header .header-nav a:hover,
#header .header-banner a:hover { color: var(--q-orange) !important; }

/* — HEADER PRINCIPAL: logo + búsqueda — */
#header .header-top .logo,
#header .header-top .logo img { filter: brightness(0) invert(1); }

/* Búsqueda — cubre selectores PS y desktop search widget */
#header .search-widget input,
#header .header-top .search-widget input,
#_desktop_search_widget input,
#search_widget input,
.search-widget form input[type="text"],
.search-widget form input[type="search"] {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--q-white) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
}
#header .search-widget input::placeholder,
#_desktop_search_widget input::placeholder,
#search_widget input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}
#header .search-widget button,
#header .header-top .search-widget button,
#_desktop_search_widget button,
#search_widget button,
.search-widget form button[type="submit"] {
    background: var(--q-orange) !important;
    border: none !important;
    color: var(--q-white) !important;
    border-radius: 0 !important;
}
#header .search-widget button:hover,
#_desktop_search_widget button:hover {
    background: var(--q-orange-dark) !important;
}
/* Icono lupa (Material Icons y FA) en botón búsqueda */
.search-widget button .material-icons,
.search-widget button i {
    color: var(--q-white) !important;
}
/* PS8 Classic usa <i class="material-icons search"> sin botón */
#search_widget i.material-icons,
#search_widget .material-icons,
.search-widgets i.material-icons,
.search-widgets .material-icons {
    color: var(--q-orange) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* ============================================================
   4. MENÚ PRINCIPAL DE CATEGORÍAS PS — OCULTAR
   El usuario usa q-nav-pages (en index.tpl / cms/page.tpl).
   El menú PS de categorías (EMPANADAS, KITS Y LOTES) se oculta.
   ============================================================ */
/* Solo ocultar el menú de categorías — NO ocultar nav.header-nav */
nav.main-menu,
#header nav.main-menu,
#header .main-menu,
#_desktop_top_menu,
.main-menu-wrapper,
#block-topmenu,
div[id="_desktop_top_menu"],
#top-menu,
.js-top-menu {
    display: none !important;
}

/* Mostrar explícitamente la barra de navegación superior (idioma/login/carrito) */
#header nav.header-nav,
nav.header-nav {
    display: block !important;
}

/* ============================================================
   5. BREADCRUMB
   ============================================================ */
.breadcrumb {
    display: block !important;
    background: var(--q-off-white) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--q-gray-light) !important;
}
.breadcrumb ol { margin: 0; padding: 0; }
.breadcrumb li a,
.breadcrumb .breadcrumb-item a {
    color: var(--q-gray) !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
}
.breadcrumb li.current span,
.breadcrumb .breadcrumb-item.current {
    color: var(--q-orange) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ============================================================
   6. BOTONES GLOBALES
   ============================================================ */
.btn-primary,
.btn-primary:link,
button[type="submit"].btn-primary,
.add-to-cart,
.ajax-add-to-cart-button {
    background: var(--q-orange) !important;
    border-color: var(--q-orange) !important;
    color: var(--q-white) !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: var(--radius) !important;
    padding: 13px 28px !important;
    transition: all var(--transition) !important;
    border: none !important;
}
.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.add-to-cart:hover,
.ajax-add-to-cart-button:hover {
    background: var(--q-orange-dark) !important;
    border-color: var(--q-orange-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(224,112,32,0.35) !important;
}
.btn-secondary,
.btn-default {
    background: transparent !important;
    border: 2px solid var(--q-black) !important;
    color: var(--q-black) !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: var(--radius) !important;
    padding: 12px 24px !important;
    transition: all var(--transition) !important;
}
.btn-secondary:hover,
.btn-default:hover {
    background: var(--q-black) !important;
    color: var(--q-white) !important;
}

/* ============================================================
   7. PÁGINAS CMS
   ============================================================ */
/* .page-cms es una clase del BODY en PS8 — NO poner max-width aquí o rompe el layout */
/* La restricción de 900px clipping se aplica si body.page-cms tiene max-width
   Ver: body.page-cms overrides en Section 2 */
.page-header h1,
.cms-page .page-header h1 {
    font-family: var(--font-head) !important;
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 900 !important;
    color: var(--q-black) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    border-left: 5px solid var(--q-orange) !important;
    padding-left: 16px !important;
    margin-bottom: var(--s-md) !important;
}
.page-cms h1 {
    font-family: var(--font-head);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 900;
    color: var(--q-black);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    border-left: 5px solid var(--q-orange);
    padding-left: 16px;
    margin-bottom: 24px;
    margin-top: 0;
}
.page-cms h2 {
    font-family: var(--font-head);
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 700;
    color: var(--q-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 48px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--q-orange);
    display: inline-block;
}
.page-cms h3 {
    font-family: var(--font-head);
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 700;
    color: var(--q-black);
    margin-top: 32px;
    margin-bottom: 10px;
    padding-left: 14px;
    border-left: 3px solid var(--q-orange);
}
.page-cms p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 18px;
}
.page-cms ul, .page-cms ol {
    padding-left: 0;
    list-style: none;
    margin-bottom: 24px;
}
.page-cms ul li {
    font-family: var(--font-body);
    font-size: 15px;
    color: #333;
    padding: 8px 0 8px 20px;
    border-bottom: 1px solid var(--q-gray-light);
    position: relative;
}
.page-cms ul li::before { content: '\203A'; position: absolute; left: 0; color: var(--q-orange); font-weight: 700; font-size: 18px; line-height: 1.4; }
.page-cms strong { color: var(--q-black); font-weight: 700; }
.page-cms a { color: var(--q-orange); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color var(--transition); }
.page-cms a:hover { border-bottom-color: var(--q-orange); }
.page-cms table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.page-cms table thead { background: var(--q-black); }
.page-cms table thead th { padding: 13px 16px; text-align: left; font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--q-white); }
.page-cms table tbody tr { border-bottom: 1px solid var(--q-gray-light); transition: background var(--transition); }
.page-cms table tbody tr:hover { background: var(--q-off-white); }
.page-cms table tbody td { padding: 13px 16px; font-size: 14px; color: var(--q-black); }
.page-cms table tbody td:first-child { font-weight: 600; }

/* CMS ID overrides */
body.cms-id-6 .page-cms { max-width: 960px; }
body.cms-id-7 .page-cms ul li { padding: 10px 0 10px 24px; font-size: 15px; }
body.cms-id-7 .page-cms h3 { margin-top: 24px; }
body.cms-id-8 .page-cms h3 { background: var(--q-off-white); border-left: 4px solid var(--q-orange); padding: 13px 18px; margin-top: 32px; }
body.cms-id-8 .page-cms h3::before { display: none; }

/* ============================================================
   11. LISTADO DE PRODUCTOS
   ============================================================ */
.category-header h1 {
    font-family: var(--font-head) !important;
    font-size: clamp(26px, 4vw, 42px) !important;
    font-weight: 900 !important;
    color: var(--q-black) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}
#products, .products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 40px 28px !important;
    padding: 48px 0 !important;
}
.product-miniature, article.product-miniature {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: transform 0.3s ease !important;
}
.product-miniature:hover { transform: translateY(-5px) !important; }
.product-miniature .thumbnail-container {
    background: var(--q-off-white) !important;
    border: none !important;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
}
.product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.45s ease !important; }
.product-miniature:hover .thumbnail-container img { transform: scale(1.05) !important; }
.product-miniature .product-title, .product-miniature h2.h3 {
    font-family: var(--font-head) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--q-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin: 16px 0 8px !important;
}
.product-miniature .product-title a { color: var(--q-black) !important; }
.product-miniature .product-title a:hover { color: var(--q-orange) !important; }
.product-miniature .price { font-family: var(--font-head) !important; font-size: 20px !important; font-weight: 900 !important; color: var(--q-orange) !important; }
.product-miniature .regular-price { color: var(--q-gray) !important; font-size: 14px !important; text-decoration: line-through !important; }
.product-miniature .add-to-cart { width: 100% !important; margin-top: 12px !important; padding: 12px !important; font-size: 11px !important; }

/* ============================================================
   13. FOOTER — selectores basados en HTML REAL de PS 8 Classic
   Estructura verificada con Chrome inspector:
   #footer > .container > .row > .block_newsletter.col-lg-8
   #footer > .footer-container > .container > .row > [columnas]
   Copyright: #footer p.text-sm-center > a
   ============================================================ */

/* ── BASE ── */
#footer, footer#footer, .js-footer {
    background: var(--q-black) !important;
    color: var(--q-white) !important;
    border-top: 3px solid var(--q-orange) !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════════
   FILA SUPERIOR: Newsletter (col-lg-8) + Social (col-lg-4)
   El top .container envuelve ambos bloques
   ══════════════════════════════════════════════════════ */

/* Top container: fondo oscuro especial */
#footer > .container {
    background: var(--q-black-soft) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 48px 40px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#footer > .container > .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    float: none !important;
}
#footer > .container > .row > [class*="col-"] {
    float: none !important;
}

/* ── NEWSLETTER (#blockEmailSubscription_displayFooterBefore) ── */
/* Verificado: es col-lg-8, clase block_newsletter */
#footer .block_newsletter,
#footer #blockEmailSubscription_displayFooterBefore {
    flex: 1 1 auto !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Flex interno: descripción izquierda, form derecha */
#footer .block_newsletter > .row {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
    float: none !important;
    margin: 0 !important;
}
#footer .block_newsletter > .row > [class*="col-"] {
    float: none !important;
    flex: 1 1 220px !important;
    padding: 0 !important;
}

/* Descripción/título newsletter: PS8 usa <p id="block-newsletter-label"> */
#footer p#block-newsletter-label,
#footer .block_newsletter > .row p {
    font-family: var(--font-head) !important;
    font-size: clamp(18px, 2.2vw, 26px) !important;
    font-weight: 900 !important;
    color: var(--q-white) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Form wrapper: flex para poner input+botón inline */
/* PS genera: .row > .col-xs-12 > [submit ANTES] + .input-wrapper > [email] */
#footer .block_newsletter form .col-xs-12,
#footer .block_newsletter form .row .col-xs-12 {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
}

/* Email input (dentro de .input-wrapper) */
#footer .block_newsletter .input-wrapper {
    flex: 1 1 200px !important;
    order: 1 !important;
    display: flex !important;
    min-width: 0 !important;
}
#footer .block_newsletter .input-wrapper input,
#footer .block_newsletter input[name="email"] {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-right: none !important;
    color: var(--q-white) !important;
    border-radius: 0 !important;
    padding: 13px 18px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}
#footer .block_newsletter .input-wrapper input::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* Botón submit — en HTML aparece ANTES del input (float-xs-right PS8) */
/* Con flex order, lo ponemos visualmente A LA DERECHA */
#footer input[name="submitNewsletter"],
#footer .block_newsletter input[type="submit"] {
    background: var(--q-orange) !important;
    border: none !important;
    color: var(--q-white) !important;
    font-family: var(--font-head) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 13px 28px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    float: none !important;
    order: 2 !important;
    transition: background var(--transition) !important;
}
#footer input[name="submitNewsletter"]:hover {
    background: var(--q-orange-dark) !important;
}
/* Ocultar el botón "OK" de móvil (hidden-sm-up = solo móvil) */
#footer input[name="submitNewsletter"].hidden-sm-up {
    display: none !important;
}

/* GDPR / condición */
#footer .block_newsletter .gdpr_fields,
#footer .block_newsletter .alert,
#footer .block_newsletter p.condition {
    color: rgba(255,255,255,0.25) !important;
    font-size: 10px !important;
    margin: 8px 0 0 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    order: 3 !important;
}

/* Social block — vacío, ocultar */
#footer .block-social {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER-CONTAINER: columnas de links + copyright
   Verificado: div.footer-container > .container > .row
   ══════════════════════════════════════════════════════ */
#footer .footer-container {
    background: var(--q-black) !important;
    width: 100% !important;
}
#footer .footer-container > .container {
    max-width: 100% !important;
    padding: 48px 40px 0 !important;
}
/* Fila de columnas */
#footer .footer-container > .container > .row:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0 !important;
    float: none !important;
}
#footer .footer-container > .container > .row:first-child > [class*="col-"] {
    float: none !important;
    flex: 1 1 180px !important;
    padding: 0 20px 40px !important;
    min-width: 0 !important;
}
/* .links contiene Products + Our Company juntos en una col-md-6 */
#footer .footer-container .links > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    float: none !important;
}
#footer .footer-container .links > .row > [class*="col-"] {
    float: none !important;
    flex: 1 1 160px !important;
    padding: 0 20px 0 0 !important;
    min-width: 0 !important;
}

/* Títulos de columnas — PS8 usa <p class="h3 hidden-sm-down"> */
#footer .footer-container p.h3,
#footer .footer-container p.h4,
#footer .footer-container p.block-contact-title,
#footer .footer-container p.myaccount-title {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--q-orange) !important;
    margin: 0 0 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    display: block !important;
    visibility: visible !important;
    line-height: 1.3 !important;
}

/* Listas de links — PS usa ul.collapse (acordeón mobile) */
#footer .footer-container ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Forzar visible en desktop (Bootstrap colapsa en mobile) */
@media (min-width: 768px) {
    #footer .footer-container ul.collapse {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }
}
#footer .footer-container li a,
#footer .footer-container a.cms-page-link {
    color: rgba(255,255,255,0.48) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 2.8 !important;
    display: block !important;
    text-decoration: none !important;
    transition: color var(--transition), padding-left var(--transition) !important;
}
#footer .footer-container li a:hover {
    color: var(--q-orange) !important;
    padding-left: 6px !important;
}

/* Info de la tienda */
#footer .footer-container .block-contact {
    padding-bottom: 40px !important;
}
#footer .footer-container #contact-infos,
#footer .footer-container .contact-rich {
    color: rgba(255,255,255,0.48) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* ── OCULTAR SU CUENTA ── */
#block_myaccount_infos,
#footer [id*="myaccount"] {
    display: none !important;
}

/* ── COPYRIGHT (PS8: p.text-sm-center > a dentro de footer-container) ── */
#footer p.text-sm-center {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    display: block !important;
}
#footer p.text-sm-center a,
#footer p.text-sm-center * {
    font-size: 0 !important;
    visibility: hidden !important;
    color: transparent !important;
    pointer-events: none !important;
}
/* Barra copyright */
#footer .footer-container > .container > .row:last-child {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(0,0,0,0.35) !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
#footer .col-md-12:has(p.text-sm-center) {
    padding: 18px 0 !important;
    text-align: center !important;
    position: relative !important;
}
/* Inyectar copyright nuevo */
#footer p.text-sm-center::after {
    content: '\00A9 2026 \2014 Navyx' !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.35) !important;
    font-family: 'Poppins', sans-serif !important;
    visibility: visible !important;
    display: block !important;
    text-align: center !important;
    padding: 18px 0 !important;
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
}

/* Ocultar el bloque accordion toggle (mobile) — span.h3 duplicado */
#footer .footer-container .title.clearfix {
    display: none !important;
}

/* ============================================================
   15. FORMULARIOS
   ============================================================ */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
    border: 1px solid var(--q-gray-light) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--q-black) !important;
    padding: 12px 16px !important;
    transition: border-color var(--transition) !important;
    background: var(--q-white) !important;
}
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus {
    border-color: var(--q-orange) !important;
    box-shadow: 0 0 0 3px rgba(224,112,32,0.1) !important;
    outline: none !important;
}
label {
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--q-black) !important;
    margin-bottom: 6px !important;
    display: block;
}
.login-form .btn-primary, .register-form .btn-primary { background: var(--q-black) !important; border-color: var(--q-black) !important; width: 100%; }
.login-form .btn-primary:hover, .register-form .btn-primary:hover { background: var(--q-orange) !important; border-color: var(--q-orange) !important; }

/* ============================================================
   16. OCULTAR MÓDULOS PS NO DESEADOS EN HOME
   ============================================================ */

/* ps_imageslider — muestra "SAMPLE 1" con Lorem ipsum demo */
body.page-index #index-carousel,
body.page-index .carousel.slide,
body.page-index #carousel,
body.page-index .ps-imageslider,
body.page-index [id*="imageslider"],
body.page-index [class*="imageslider"],
body.page-index .slick-slider,
body.page-index .slider-container,
body.page-index .ps-carousel {
    display: none !important;
}

/* ps_banner — "20% OFF ON CLOTHES" banner demo */
body.page-index a.banner,
body.page-index .banner,
a.banner {
    display: none !important;
}

/* ps_customtext — "CUSTOM TEXT BLOCK" Lorem ipsum demo */
body.page-index #custom-text,
body.page-index [id="custom-text"],
body.page-index .blockcmsinfo,
body.page-index [id*="customtext"],
body.page-index [class*="customtext"] {
    display: none !important;
}

/* Módulos de banner decorativos con olas / waves */
body.page-index [class*="waves"],
body.page-index .waves-container,
body.page-index .shape-divider,
body.page-index .wave-block {
    display: none !important;
}

/* ps_emailsubscription en home si no se quiere */
/* body.page-index #ps-emailsubscription { display: none !important; } */

/* ============================================================
   17-20. PAGINACIÓN · BADGES · ALERTAS · OCULTOS
   ============================================================ */
.pagination { display: flex !important; justify-content: center !important; gap: 3px !important; margin: 48px 0 !important; }
.pagination .page-link { border: 1px solid var(--q-gray-light) !important; color: var(--q-black) !important; font-family: var(--font-head) !important; font-weight: 600 !important; font-size: 12px !important; padding: 10px 16px !important; border-radius: 0 !important; transition: all var(--transition) !important; background: var(--q-white) !important; }
.pagination .page-link:hover, .pagination .active .page-link { background: var(--q-orange) !important; border-color: var(--q-orange) !important; color: var(--q-white) !important; }
.product-flags .product-flag { background: var(--q-orange) !important; color: var(--q-white) !important; font-family: var(--font-head) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 4px 10px !important; }
.product-flags .product-flag.new { background: var(--q-black) !important; }
.alert-success { background: rgba(34,160,80,0.07) !important; border: 1px solid rgba(34,160,80,0.25) !important; color: #1a7a3c !important; border-radius: 0 !important; }
.alert-danger, .alert-warning { background: rgba(224,112,32,0.07) !important; border: 1px solid rgba(224,112,32,0.25) !important; color: var(--q-orange-dark) !important; border-radius: 0 !important; }
.footer_content_links .footer_powered_by { display: none !important; }
.star-content { display: none !important; }
.product-compare-list { display: none !important; }

/* ============================================================
   21. RESPONSIVE GENERAL
   ============================================================ */
@media (max-width: 992px) { #products, .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (max-width: 768px) { #products, .products-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .page-cms { padding: 32px 16px; } }
@media (max-width: 480px) { .page-cms h1 { font-size: 20px !important; } .page-cms h2 { font-size: 15px !important; } }


/* ============================================================
   22. HOME PAGE — Barra de Navegación + Hero + Secciones
   ============================================================ */

/* --- CONTENEDOR GENÉRICO --- */
.q-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* ============================================================
   BARRA DE NAVEGACIÓN DE PÁGINAS
   ============================================================ */
.q-nav-pages {
    background: var(--q-black-soft);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.q-nav-pages-inner {
    display: flex;
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}
.q-nav-pages a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 18px;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    text-decoration: none !important;
    white-space: nowrap;
}
.q-nav-pages a i { font-size: 12px; }
.q-nav-pages a:hover,
.q-nav-pages a.q-nav-active {
    color: var(--q-white);
    border-bottom-color: var(--q-orange);
}
.q-nav-pages a.q-nav-cta {
    margin-left: auto;
    color: var(--q-orange);
    font-weight: 700;
    padding-right: 0;
}
.q-nav-pages a.q-nav-cta:hover {
    color: var(--q-orange-light);
    border-bottom-color: var(--q-orange);
}

/* --- HERO --- */
.q-hero {
    background: var(--q-black);
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 96px 48px;
    position: relative;
    overflow: hidden;
}
.q-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(224,112,32,0.08) 0%, transparent 55%),
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
    pointer-events: none;
}
.q-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}
.q-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(224,112,32,0.12);
    border: 1px solid rgba(224,112,32,0.3);
    color: var(--q-orange);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 7px 18px;
    margin-bottom: 28px;
}
.q-hero-h1 {
    font-family: var(--font-head) !important;
    font-size: clamp(42px, 7.5vw, 84px) !important;
    font-weight: 900 !important;
    color: var(--q-white) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    line-height: 0.9 !important;
    margin-bottom: 28px !important;
    border: none !important;
    padding-left: 0 !important;
}
.q-hero-h1 span { color: var(--q-orange); }
.q-hero-p {
    color: rgba(255,255,255,0.55) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 40px !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.q-hero-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.q-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--q-orange);
    color: var(--q-white) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 32px;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none !important;
}
.q-btn-primary:hover {
    background: var(--q-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(224,112,32,0.4);
    color: var(--q-white) !important;
}
.q-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 28px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none !important;
}
.q-btn-outline:hover {
    border-color: var(--q-orange);
    color: var(--q-orange) !important;
}
.q-btn-lg { padding: 17px 44px; font-size: 13px; }

/* --- STRIP BENEFICIOS --- */
.q-strip {
    background: var(--q-orange);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.q-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--q-white);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 17px 32px;
    border-right: 1px solid rgba(255,255,255,0.18);
}
.q-strip-item:last-child { border-right: none; }
.q-strip-icon { font-size: 15px; opacity: 0.95; }

/* --- ESTADÍSTICAS --- */
.q-stats {
    background: var(--q-black);
    padding: 72px 48px;
}
.q-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    max-width: 1280px;
    margin: 0 auto;
}
.q-stat-item {
    text-align: center;
    padding: 48px 24px;
    background: var(--q-black-soft);
    position: relative;
    border-top: 3px solid transparent;
    transition: border-top-color var(--transition);
}
.q-stat-item:hover { border-top-color: var(--q-orange); }
.q-stat-num {
    font-family: var(--font-head);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 900;
    color: var(--q-orange);
    line-height: 1;
    display: block;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.q-stat-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- PRODUCTOS DESTACADOS --- */
.q-home-products {
    padding: 96px 0;
    background: var(--q-off-white);
}
.q-section-title {
    font-family: var(--font-head);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--q-black);
    margin-bottom: 56px;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}
.q-section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 3px;
    background: var(--q-orange);
}
.q-section-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--q-gray);
    text-align: center;
    margin-top: -40px;
    margin-bottom: 56px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* --- PROCESO B2B --- */
.q-proceso {
    background: var(--q-white);
    padding: 96px 48px;
    border-top: 1px solid var(--q-gray-light);
}
.q-proceso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
}
.q-paso { text-align: center; position: relative; }
.q-paso:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    right: -28px;
    width: 16px;
    height: 2px;
    background: var(--q-orange);
    opacity: 0.5;
}
.q-paso-num {
    width: 64px; height: 64px;
    background: var(--q-black);
    color: var(--q-orange);
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    letter-spacing: -0.02em;
}
.q-paso-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--q-black);
    margin-bottom: 10px;
}
.q-paso-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    line-height: 1.65;
}

/* --- CARDS SECCIONES --- */
.q-cards-section {
    padding: 96px 48px;
    background: var(--q-black);
}
.q-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-width: 1280px;
    margin: 0 auto;
}
.q-card {
    display: block;
    background: var(--q-black-soft);
    padding: 52px 44px;
    color: var(--q-white);
    text-decoration: none !important;
    transition: background var(--transition), transform var(--transition);
    border-top: 3px solid transparent;
}
.q-card:hover {
    background: var(--q-black-mid);
    border-top-color: var(--q-orange);
    color: var(--q-white);
    transform: translateY(-4px);
}
.q-card-icon {
    width: 52px; height: 52px;
    background: var(--q-orange);
    color: var(--q-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 24px;
    transition: background var(--transition);
}
.q-card:hover .q-card-icon { background: var(--q-orange-dark); }
.q-card-title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--q-white);
    margin-bottom: 14px;
}
.q-card-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin-bottom: 28px;
}
.q-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--q-orange);
    transition: gap var(--transition);
}
.q-card:hover .q-card-cta { gap: 10px; }

/* --- VENTAJAS B2B --- */
.q-ventajas {
    background: var(--q-off-white);
    padding: 96px 48px;
}
.q-ventajas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 56px;
    max-width: 1280px;
    margin: 0 auto;
}
.q-ventaja {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.q-ventaja-icon-wrap {
    width: 48px; height: 48px;
    background: var(--q-orange);
    color: var(--q-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background var(--transition);
}
.q-ventaja:hover .q-ventaja-icon-wrap { background: var(--q-orange-dark); }
.q-ventaja-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--q-black);
    margin-bottom: 8px;
}
.q-ventaja-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    line-height: 1.7;
}

/* --- CTA BAR FINAL --- */
.q-cta-bar {
    background: var(--q-orange);
    padding: 64px 48px;
}
.q-cta-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
}
.q-cta-bar-text {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    max-width: 620px;
    line-height: 1.4;
}
.q-cta-bar-text strong {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--q-white);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.q-cta-bar .q-btn-primary {
    background: var(--q-black);
    color: var(--q-white) !important;
    padding: 18px 44px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.q-cta-bar .q-btn-primary:hover {
    background: var(--q-black-soft);
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}

/* --- RESPONSIVE HOME --- */
@media (max-width: 1100px) {
    .q-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .q-proceso-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .q-ventajas-grid { grid-template-columns: repeat(2, 1fr); }
    .q-paso:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
    .q-cards-grid { grid-template-columns: 1fr; }
    .q-nav-pages a span { display: none; }
    .q-nav-pages a { padding: 13px 14px; }
    .q-nav-pages a i { font-size: 14px; }
}
@media (max-width: 768px) {
    .q-container, .q-nav-pages-inner { padding: 0 20px; }
    .q-strip { flex-direction: column; }
    .q-strip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 13px 20px; font-size: 12px; }
    .q-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .q-proceso-grid { grid-template-columns: 1fr; gap: 24px; }
    .q-ventajas-grid { grid-template-columns: 1fr; gap: 32px; }
    .q-cta-bar-inner { flex-direction: column; text-align: center; }
    .q-cards-section, .q-proceso, .q-ventajas { padding: 64px 20px; }
    .q-home-products { padding: 64px 0; }
    .q-hero { padding: 72px 20px; }
}
@media (max-width: 560px) {
    .q-hero-h1 { font-size: 38px !important; }
    .q-hero-btns { flex-direction: column; align-items: center; }
    .q-stats { padding: 48px 20px; }
    .q-cta-bar { padding: 48px 20px; }
    .q-nav-pages-inner { padding: 0 8px; }
    .q-nav-pages a { padding: 12px 10px; }
}

/* ============================================================
   24. COMPONENTES DE PÁGINA — CMS, INTERIOR PAGES
   Clases reutilizables para todas las páginas interiores.
   Usadas en templates/cms/page.tpl y product-list.tpl
   ============================================================ */

/* ── HERO INTERIOR (más compacto que el home hero) ── */
.q-page-hero {
    background: var(--q-black);
    padding: 80px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.q-page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(224,112,32,0.06) 0%, transparent 50%),
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    pointer-events: none;
}
.q-page-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.q-page-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(224,112,32,0.1);
    border: 1px solid rgba(224,112,32,0.25);
    color: var(--q-orange);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 6px 16px;
    margin-bottom: 20px;
}
.q-page-hero-h1 {
    font-family: var(--font-head) !important;
    font-size: clamp(30px, 5vw, 56px) !important;
    font-weight: 900 !important;
    color: var(--q-white) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin-bottom: 16px !important;
    border: none !important;
    padding-left: 0 !important;
}
.q-page-hero-h1 span { color: var(--q-orange); }
.q-page-hero-sub {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    color: rgba(255,255,255,0.5) !important;
    line-height: 1.7 !important;
    max-width: 520px;
    margin: 0 auto !important;
}

/* ── BLOQUE GENÉRICO ── */
.q-block { padding: 88px 0; }
.q-block--cream { background: var(--q-off-white); }
.q-block--dark  { background: var(--q-black); }
.q-block--orange { background: var(--q-orange); }
.q-block--white { background: var(--q-white); }

/* ── CABECERA DE BLOQUE ── */
.q-block-head {
    text-align: center;
    margin-bottom: 64px;
}
.q-block-head__title {
    font-family: var(--font-head);
    font-size: clamp(22px, 3.5vw, 38px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--q-black);
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 20px;
}
.q-block-head__title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 3px;
    background: var(--q-orange);
}
.q-block-head__title--white { color: var(--q-white) !important; }
.q-block-head__title--white::after { background: var(--q-white); }
.q-block-head__sub {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--q-gray);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.75;
}
.q-block-head__sub--white { color: rgba(255,255,255,0.6) !important; }

/* ── TEXTO INTRO GRANDE ── */
.q-intro-text {
    font-family: var(--font-body);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.8;
    color: var(--q-black);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.q-intro-text strong { color: var(--q-orange); font-weight: 700; }

/* ── DOS COLUMNAS ── */
.q-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.q-two-col--60 { grid-template-columns: 3fr 2fr; }
.q-two-col--text h2 {
    font-family: var(--font-head);
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--q-black);
    margin-bottom: 20px;
    border-left: 4px solid var(--q-orange);
    padding-left: 16px;
}
.q-two-col--text p {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--q-gray);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* ── TRES COLUMNAS ── */
.q-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* ── CUATRO COLUMNAS ── */
.q-four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* ── ICON CARD ── */
.q-icard {
    background: var(--q-white);
    border: 1px solid var(--q-gray-light);
    padding: 40px 32px;
    transition: border-color var(--transition), transform var(--transition);
}
.q-icard:hover {
    border-color: var(--q-orange);
    transform: translateY(-4px);
}
.q-block--cream .q-icard { background: var(--q-white); }
.q-block--dark .q-icard  { background: var(--q-black-soft); border-color: rgba(255,255,255,0.07); }
.q-block--dark .q-icard:hover { border-color: var(--q-orange); }
.q-icard__icon {
    width: 52px; height: 52px;
    background: var(--q-orange);
    color: var(--q-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.q-icard__title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--q-black);
    margin-bottom: 12px;
}
.q-block--dark .q-icard__title { color: var(--q-white); }
.q-icard__text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    line-height: 1.75;
}
.q-block--dark .q-icard__text { color: rgba(255,255,255,0.45); }

/* ── NÚMEROS GRANDES (stats grid) ── */
.q-nums-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.q-num {
    background: var(--q-off-white);
    padding: 40px 24px;
    text-align: center;
    transition: border-top-color var(--transition);
    border-top: 3px solid transparent;
}
.q-num:hover { border-top-color: var(--q-orange); }
.q-num__n {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    color: var(--q-orange);
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.q-num__label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--q-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── PASOS (standalone, más grandes) ── */
.q-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
.q-step-big {
    background: var(--q-off-white);
    padding: 48px 32px;
    position: relative;
    border-top: 3px solid transparent;
    transition: border-color var(--transition);
}
.q-step-big:hover { border-top-color: var(--q-orange); }
.q-step-big__num {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 900;
    color: var(--q-orange);
    opacity: 0.18;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}
.q-step-big__title {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--q-black);
    margin-bottom: 14px;
}
.q-step-big__desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    line-height: 1.75;
}
.q-step-big__arrow {
    position: absolute;
    top: 52px; right: -14px;
    width: 28px; height: 28px;
    background: var(--q-orange);
    color: var(--q-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    z-index: 1;
}
.q-step-big:last-child .q-step-big__arrow { display: none; }

/* ── ZONAS DE REPARTO ── */
.q-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}
.q-zone {
    border: 1px solid var(--q-gray-light);
    padding: 48px 40px;
    position: relative;
    transition: all var(--transition);
}
.q-zone--primary { border-color: var(--q-orange); border-width: 2px; }
.q-zone:hover { transform: translateY(-4px); }
.q-zone__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--q-orange);
    color: var(--q-white);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 14px;
    margin-bottom: 20px;
}
.q-zone--primary .q-zone__tag { background: var(--q-black); }
.q-zone__title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--q-black);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.q-zone__sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-orange);
    font-weight: 600;
    margin-bottom: 24px;
}
.q-zone__list {
    list-style: none;
    padding: 0; margin: 0;
}
.q-zone__list li {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    padding: 9px 0;
    border-bottom: 1px solid var(--q-gray-light);
    display: flex;
    align-items: center;
    gap: 10px;
}
.q-zone__list li:last-child { border-bottom: none; }
.q-zone__list li i { color: var(--q-orange); font-size: 12px; width: 14px; }

/* ── TABLA CONDICIONES ── */
.q-table-wrap { overflow-x: auto; }
.q-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 13px;
}
.q-table thead tr { background: var(--q-black); }
.q-table thead th {
    padding: 14px 20px;
    text-align: left;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--q-white);
}
.q-table thead th:first-child { color: var(--q-orange); }
.q-table tbody tr { border-bottom: 1px solid var(--q-gray-light); transition: background var(--transition); }
.q-table tbody tr:hover { background: #fafafa; }
.q-table tbody td { padding: 14px 20px; color: var(--q-black); }
.q-table tbody td:first-child { font-weight: 700; }
.q-table .q-badge {
    display: inline-block;
    background: rgba(224,112,32,0.1);
    color: var(--q-orange);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    letter-spacing: 0.08em;
}

/* ── CADENA DE FRÍO (highlight dark) ── */
.q-cold-block {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.q-cold-temp {
    font-family: var(--font-head);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 900;
    color: var(--q-orange);
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}
.q-cold-text h3 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--q-white);
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}
.q-cold-text p {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin: 0;
}

/* ── FAQ ── */
.q-faq-list { max-width: 760px; margin: 0 auto; }
.q-faq {
    border-bottom: 1px solid var(--q-gray-light);
    padding: 24px 0;
}
.q-faq:first-child { border-top: 1px solid var(--q-gray-light); }
.q-faq__q {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--q-black);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.q-faq__q i { color: var(--q-orange); font-size: 12px; }
.q-faq__a {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--q-gray);
    line-height: 1.75;
    padding-left: 26px;
}

/* ── REQUISITOS / INFO BOX ── */
.q-info-box {
    border: 1px solid var(--q-gray-light);
    border-left: 4px solid var(--q-orange);
    padding: 32px;
    background: var(--q-white);
}
.q-info-box h3 {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--q-black);
    margin-bottom: 16px;
}
.q-info-box ul {
    list-style: none;
    padding: 0; margin: 0;
}
.q-info-box ul li {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--q-gray);
    padding: 7px 0;
    border-bottom: 1px solid var(--q-gray-light);
    display: flex;
    align-items: center;
    gap: 10px;
}
.q-info-box ul li:last-child { border-bottom: none; }
.q-info-box ul li i { color: var(--q-orange); font-size: 11px; }

/* ── CTA INLINE ── */
.q-cta-inline {
    text-align: center;
    padding: 40px 0 0;
}

/* ── RESPONSIVE CMS COMPONENTS ── */
@media (max-width: 1024px) {
    .q-four-col  { grid-template-columns: repeat(2, 1fr); }
    .q-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .q-block { padding: 56px 0; }
    .q-page-hero { padding: 56px 20px; }
    .q-two-col, .q-two-col--60 { grid-template-columns: 1fr; gap: 32px; }
    .q-three-col { grid-template-columns: 1fr; gap: 20px; }
    .q-four-col  { grid-template-columns: 1fr; }
    .q-steps-grid { grid-template-columns: 1fr; gap: 3px; }
    .q-zones-grid { grid-template-columns: 1fr; gap: 20px; }
    .q-nums-grid { grid-template-columns: repeat(2, 1fr); }
    .q-cold-block { flex-direction: column; gap: 24px; text-align: center; }
    .q-step-big__arrow { display: none; }
}
@media (max-width: 560px) {
    .q-nums-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   23. HOMEPAGE FULL-WIDTH — Romper el container Bootstrap
   Estrategia doble:
   A) Resetear max-width en todos los wrappers posibles
   B) Técnica breakout: sacar cada sección al 100vw
   ============================================================ */

/* — A) RESET WRAPPERS — */
body.page-index #wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;     /* Classic theme añade box-shadow */
    background: transparent !important;
}
body.page-index #content-wrapper,
body.page-index #content-wrapper.js-content-wrapper,
body.page-index #main,
body.page-index section#main,
body.page-index section#main.main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
body.page-index #main > .container,
body.page-index #content-wrapper > .container,
body.page-index .js-content-wrapper > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
}
body.page-index .row,
body.page-index #content-wrapper > .container > .row,
body.page-index #main > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
body.page-index #content,
body.page-index #content.col-xs-12,
body.page-index #content.col-md-12,
body.page-index #content.col-sm-12,
body.page-index section#content,
body.page-index .page-content.page-index {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex: 0 0 100% !important;
    overflow: visible !important;
}

/* — B) TÉCNICA BREAKOUT: cada sección rompe el container —
   Requiere html/body { overflow-x: hidden } ya presente arriba.
   Funciona aunque el .container tenga max-width residual.
   ---------------------------------------------------------- */
body.page-index .q-nav-pages,
body.page-index .q-hero,
body.page-index .q-strip,
body.page-index .q-stats,
body.page-index .q-home-products,
body.page-index .q-proceso,
body.page-index .q-cards-section,
body.page-index .q-ventajas,
body.page-index .q-cta-bar {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Ocultar breadcrumb en home (no tiene sentido en la landing) */
body.page-index .breadcrumb,
body.page-index #notifications,
body.page-index .alert {
    display: none !important;
}

/* ============================================================
   24. FULL-WIDTH TAMBIÉN EN CMS PAGES CON DISEÑO CUSTOM
   ============================================================ */

/* — A) RESET WRAPPERS CMS — */
body.cms-id-6 #wrapper,
body.cms-id-7 #wrapper,
body.cms-id-8 #wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body.cms-id-6 #content-wrapper,
body.cms-id-7 #content-wrapper,
body.cms-id-8 #content-wrapper,
body.cms-id-6 #content-wrapper.js-content-wrapper,
body.cms-id-7 #content-wrapper.js-content-wrapper,
body.cms-id-8 #content-wrapper.js-content-wrapper,
body.cms-id-6 #main,
body.cms-id-7 #main,
body.cms-id-8 #main,
body.cms-id-6 section#main,
body.cms-id-7 section#main,
body.cms-id-8 section#main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.cms-id-6 #content-wrapper > .container,
body.cms-id-7 #content-wrapper > .container,
body.cms-id-8 #content-wrapper > .container,
body.cms-id-6 .js-content-wrapper > .container,
body.cms-id-7 .js-content-wrapper > .container,
body.cms-id-8 .js-content-wrapper > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.cms-id-6 .row,
body.cms-id-7 .row,
body.cms-id-8 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
body.cms-id-6 #content,
body.cms-id-7 #content,
body.cms-id-8 #content {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex: 0 0 100% !important;
}
body.cms-id-6 .page-cms,
body.cms-id-7 .page-cms,
body.cms-id-8 .page-cms {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* — B) TÉCNICA BREAKOUT CMS (funciona para cualquier CMS con nuestro template) — */
body.page-cms .q-page-hero,
body.page-cms .q-block,
body.page-cms .q-cta-bar {
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Fallback específico por ID (redundante pero seguro) */
body.cms-id-6 .q-page-hero,
body.cms-id-7 .q-page-hero,
body.cms-id-8 .q-page-hero,
body.cms-id-6 .q-block,
body.cms-id-7 .q-block,
body.cms-id-8 .q-block,
body.cms-id-6 .q-cta-bar,
body.cms-id-7 .q-cta-bar,
body.cms-id-8 .q-cta-bar {
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* ============================================================
   25. AJUSTES DE COLOR EN SECCIONES OSCURAS
   ============================================================ */

/* Título de sección en fondo negro (q-cards-section) */
.q-cards-section .q-section-title {
    color: var(--q-white) !important;
}
.q-cards-section .q-section-title::after {
    background: var(--q-orange);
}

/* Block head title en secciones oscuras */
.q-block--dark .q-block-head__title {
    color: var(--q-white) !important;
}
.q-block--dark .q-block-head__title::after {
    background: var(--q-orange);
}
.q-block--dark .q-block-head__sub {
    color: rgba(255,255,255,0.55) !important;
}

/* Block head title en secciones naranja */
.q-block--orange .q-block-head__title {
    color: var(--q-white) !important;
}
.q-block--orange .q-block-head__sub {
    color: rgba(255,255,255,0.75) !important;
}

/* ============================================================
   26. BREADCRUMB — ocultar en páginas CMS con diseño custom
   ============================================================ */
body.cms-id-6 .breadcrumb,
body.cms-id-7 .breadcrumb,
body.cms-id-8 .breadcrumb {
    display: none !important;
}

/* ============================================================
   27. CATÁLOGO — mejoras visuales página de categoría
   ============================================================ */
body.page-category .category-header {
    padding: 48px 0 24px !important;
    border-bottom: 1px solid var(--q-gray-light);
    margin-bottom: 8px;
}
body.page-category .category-header h1 {
    margin-bottom: 8px !important;
}
body.page-category .category-description p {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    color: var(--q-gray) !important;
    margin: 0 !important;
}
/* Filtros de ordenación */
body.page-category .products-selection {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--q-gray-light) !important;
    margin-bottom: 32px !important;
}
body.page-category .products-selection .showing,
body.page-category .products-selection .total-products {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--q-gray) !important;
}
body.page-category .sort-by-row select,
body.page-category .products-selection select {
    border: 1px solid var(--q-gray-light) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    color: var(--q-black) !important;
    background: var(--q-white) !important;
}