/*
 Theme Name:   Fantasy Store Child
 Template:     woostify
 Description:  Tema hijo de Woostify para Fantasy Store. Incluye el CSS Maestro de marca v3.
 Author:       Fantasy Store
 Version:      3.0.2
 Text Domain:  fantasy-store-child
*/

/* ============================================================
   FANTASY STORE - CSS MAESTRO v3.0
   Tema hijo Woostify | Manual de Marca v1.0
   Paleta completa + utilidades fs-* + componentes
   ============================================================ */

/* --- 0. VARIABLES DE MARCA (paleta completa del manual) --- */
:root {
    --fs-azul: #06245C;
    --fs-turquesa: #25D7E8;
    --fs-amarillo: #F5C31A;
    --fs-naranja: #F78A1D;
    --fs-morado: #A25AE7;
    --fs-rosa: #F04F98;
    --fs-verde: #A8D51B;
    --fs-azul-claro: #3E95FF;
    --fs-blanco: #FFFFFF;
    --fs-radio: 12px;
    --fs-radio-lg: 20px;
}

/* ============================================================
   1. TIPOGRAFÍA (Raleway - selectores acotados, sin universal)
   ============================================================ */
body {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--fs-azul);
}

p, li, td, th, label, input, textarea, select, button,
.woocommerce-product-details__short-description,
#tab-description p, #tab-description li {
    font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-summary h1.product_title {
    font-family: 'Raleway', sans-serif;
    color: var(--fs-azul);
}

h1, .elementor-heading-title.h1 { font-weight: 800; font-size: 48px; line-height: 56px; letter-spacing: -0.5px; }
h2, .elementor-heading-title.h2 { font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -0.25px; }
h3 { font-weight: 600; font-size: 20px; line-height: 28px; }

/* Excepciones: nunca tocar fuentes de iconos */
.dashicons, .dashicons-before:before, .e-font-icon-svg,
.woostify-svg-icon, .elementor-icon svg, .tinvwl-webfont {
    font-family: inherit;
}

/* ============================================================
   2. UTILIDADES DE MARCA (clases para Elementor > Avanzado > Clases CSS)
   ============================================================ */

/* 2a. Tarjetas de categoría con color de marca */
.fs-cat-cuidado { --cat: var(--fs-turquesa); }
.fs-cat-belleza { --cat: var(--fs-rosa); }
.fs-cat-mascotas { --cat: var(--fs-naranja); }
.fs-cat-limpieza { --cat: var(--fs-verde); }
.fs-cat-ofertas  { --cat: var(--fs-rosa); }

.fs-cat-cuidado, .fs-cat-belleza, .fs-cat-mascotas,
.fs-cat-limpieza, .fs-cat-ofertas {
    background-color: var(--cat) !important;
    border-radius: var(--fs-radio-lg) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.fs-cat-cuidado:hover, .fs-cat-belleza:hover, .fs-cat-mascotas:hover,
.fs-cat-limpieza:hover, .fs-cat-ofertas:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(6, 36, 92, 0.18);
}
.fs-cat-cuidado .elementor-heading-title, .fs-cat-cuidado .elementor-icon-box-title,
.fs-cat-cuidado .elementor-icon-box-description, .fs-cat-cuidado p, .fs-cat-cuidado a,
.fs-cat-belleza .elementor-heading-title, .fs-cat-belleza .elementor-icon-box-title,
.fs-cat-belleza .elementor-icon-box-description, .fs-cat-belleza p, .fs-cat-belleza a,
.fs-cat-mascotas .elementor-heading-title, .fs-cat-mascotas .elementor-icon-box-title,
.fs-cat-mascotas .elementor-icon-box-description, .fs-cat-mascotas p, .fs-cat-mascotas a,
.fs-cat-limpieza .elementor-heading-title, .fs-cat-limpieza .elementor-icon-box-title,
.fs-cat-limpieza .elementor-icon-box-description, .fs-cat-limpieza p, .fs-cat-limpieza a,
.fs-cat-ofertas .elementor-heading-title, .fs-cat-ofertas .elementor-icon-box-title,
.fs-cat-ofertas .elementor-icon-box-description, .fs-cat-ofertas p, .fs-cat-ofertas a {
    color: var(--fs-blanco) !important;
}
.fs-cat-cuidado .elementor-button, .fs-cat-belleza .elementor-button,
.fs-cat-mascotas .elementor-button, .fs-cat-limpieza .elementor-button,
.fs-cat-ofertas .elementor-button {
    background-color: var(--fs-blanco) !important;
    color: var(--cat) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}
.fs-cat-cuidado .elementor-button:hover, .fs-cat-belleza .elementor-button:hover,
.fs-cat-mascotas .elementor-button:hover, .fs-cat-limpieza .elementor-button:hover,
.fs-cat-ofertas .elementor-button:hover {
    background-color: var(--fs-azul) !important;
    color: var(--fs-blanco) !important;
}

/* 2b. Etiquetas pill */
.fs-tag {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fs-blanco);
}
.fs-tag-turquesa { background-color: var(--fs-turquesa); }
.fs-tag-rosa     { background-color: var(--fs-rosa); }
.fs-tag-naranja  { background-color: var(--fs-naranja); }
.fs-tag-verde    { background-color: var(--fs-verde); }
.fs-tag-morado   { background-color: var(--fs-morado); }
.fs-tag-amarillo { background-color: var(--fs-amarillo); color: var(--fs-azul); }

/* 2c. Fondos: tintas suaves */
.fs-bg-turquesa-suave { background-color: #E9FBFD !important; }
.fs-bg-rosa-suave     { background-color: #FDE9F3 !important; }
.fs-bg-amarillo-suave { background-color: #FEF7E2 !important; }
.fs-bg-verde-suave    { background-color: #F3F9E4 !important; }
.fs-bg-morado-suave   { background-color: #F3E9FD !important; }
.fs-bg-azul-suave     { background-color: #E8F1FE !important; }

/* 2d. Fondos sólidos y gradientes vivos */
.fs-bg-navy     { background-color: var(--fs-azul) !important; }
.fs-bg-turquesa { background-color: var(--fs-turquesa) !important; }
.fs-bg-rosa     { background-color: var(--fs-rosa) !important; }
.fs-bg-naranja  { background-color: var(--fs-naranja) !important; }

.fs-grad-turquesa-azul  { background: linear-gradient(120deg, #25D7E8 0%, #3E95FF 100%) !important; }
.fs-grad-rosa-naranja   { background: linear-gradient(120deg, #F04F98 0%, #F78A1D 100%) !important; }
.fs-grad-morado-rosa    { background: linear-gradient(120deg, #A25AE7 0%, #F04F98 100%) !important; }
.fs-grad-turquesa-verde { background: linear-gradient(120deg, #25D7E8 0%, #A8D51B 100%) !important; }
.fs-grad-navy           { background: linear-gradient(135deg, #06245C 0%, #0B3585 60%, #1346AF 100%) !important; }

/* 2e. Textos sobre fondos oscuros */
.fs-bg-navy h1, .fs-bg-navy h2, .fs-bg-navy h3,
.fs-bg-navy .elementor-heading-title, .fs-bg-navy p, .fs-bg-navy .elementor-icon-list-text,
.fs-grad-navy h1, .fs-grad-navy h2, .fs-grad-navy h3,
.fs-grad-navy .elementor-heading-title, .fs-grad-navy p, .fs-grad-navy .elementor-icon-list-text {
    color: #FFFFFF !important;
}
.fs-texto-amarillo  { color: #F5C31A !important; }
.fs-texto-turquesa  { color: #25D7E8 !important; }

/* 2f. Textos sobre gradientes vivos */
.fs-grad-turquesa-azul h1, .fs-grad-turquesa-azul h2, .fs-grad-turquesa-azul h3,
.fs-grad-turquesa-azul .elementor-heading-title, .fs-grad-turquesa-azul p,
.fs-grad-rosa-naranja h1, .fs-grad-rosa-naranja h2, .fs-grad-rosa-naranja h3,
.fs-grad-rosa-naranja .elementor-heading-title, .fs-grad-rosa-naranja p,
.fs-grad-morado-rosa h1, .fs-grad-morado-rosa h2, .fs-grad-morado-rosa h3,
.fs-grad-morado-rosa .elementor-heading-title, .fs-grad-morado-rosa p,
.fs-grad-turquesa-verde h1, .fs-grad-turquesa-verde h2, .fs-grad-turquesa-verde h3,
.fs-grad-turquesa-verde .elementor-heading-title, .fs-grad-turquesa-verde p {
    color: #FFFFFF !important;
}

/* 2g. Botones especiales */
.fs-btn-rosa .elementor-button {
    background-color: var(--fs-rosa) !important;
    color: var(--fs-blanco) !important;
    box-shadow: 0 4px 12px rgba(240, 79, 152, 0.35) !important;
}
.fs-btn-rosa .elementor-button:hover {
    background-color: var(--fs-morado) !important;
}
.fs-bg-navy .elementor-button, .fs-grad-navy .elementor-button, .fs-btn-claro .elementor-button {
    background-color: #F5C31A !important;
    color: #06245C !important;
    box-shadow: 0 4px 14px rgba(245, 195, 26, 0.4) !important;
}
.fs-bg-navy .elementor-button:hover, .fs-grad-navy .elementor-button:hover, .fs-btn-claro .elementor-button:hover {
    background-color: #25D7E8 !important;
    color: #06245C !important;
}
.fs-grad-turquesa-azul .elementor-button, .fs-grad-rosa-naranja .elementor-button,
.fs-grad-morado-rosa .elementor-button, .fs-grad-turquesa-verde .elementor-button {
    background-color: #FFFFFF !important;
    color: #06245C !important;
    box-shadow: 0 4px 14px rgba(6, 36, 92, 0.25) !important;
}
.fs-grad-turquesa-azul .elementor-button:hover, .fs-grad-rosa-naranja .elementor-button:hover,
.fs-grad-morado-rosa .elementor-button:hover, .fs-grad-turquesa-verde .elementor-button:hover {
    background-color: #06245C !important;
    color: #FFFFFF !important;
}

/* 2h. Tramas decorativas (del manual: puntos y estrellas) */
.fs-dots {
    background-image: radial-gradient(rgba(6, 36, 92, 0.07) 2px, transparent 2px) !important;
    background-size: 24px 24px !important;
}
.fs-dots-claro {
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 2px, transparent 2px) !important;
    background-size: 26px 26px !important;
}
.fs-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E") !important;
    background-size: 120px 120px !important;
}
.fs-estrellas-navy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M24 18l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L24 30.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(6,36,92,0.06)'/%3E%3Ccircle cx='100' cy='80' r='4' fill='rgba(6,36,92,0.05)'/%3E%3C/svg%3E") !important;
    background-size: 140px 140px !important;
}

/* 2i. Burbujas de esquinas + secciones redondeadas (look app moderna) */
.fs-burbujas { position: relative; overflow: hidden; }
.fs-burbujas::before {
    content: ''; position: absolute; width: 280px; height: 280px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.10);
    top: -90px; right: -70px;
}
.fs-burbujas::after {
    content: ''; position: absolute; width: 180px; height: 180px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.08);
    bottom: -70px; left: -50px;
}
.fs-seccion-redonda {
    border-radius: 28px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

/* ============================================================
   3. HEADER (fondo blanco, logo a color)
   ============================================================ */
.site-header, .woostify-header-section, .site-header-inner {
    background-color: var(--fs-blanco) !important;
}
.site-header .custom-logo, .woostify-logo-image-widget img {
    max-height: 80px;
    width: auto;
}
.primary-navigation > li > a, .primary-navigation .sub-menu a, .vertical-navigation > li > a {
    color: var(--fs-azul) !important;
    font-weight: 600 !important;
}
.primary-navigation > li > a:hover, .primary-navigation .sub-menu a:hover,
.vertical-navigation > li > a:hover {
    color: var(--fs-turquesa) !important;
}
.primary-navigation > li > a::after {
    content: ''; display: block; height: 3px; border-radius: 3px;
    background-color: var(--fs-turquesa);
    transform: scaleX(0); transition: transform 0.25s ease;
}
.primary-navigation > li > a:hover::after { transform: scaleX(1); }

.site-tools .tools-icon, .site-tools .tools-icon svg,
.header-search-icon svg, .my-account-icon svg, .shopping-bag-button svg,
.header-wishlist-icon svg, .search-form-icon svg, .vertical-menu-button svg {
    fill: var(--fs-azul) !important;
    color: var(--fs-azul) !important;
}
.site-tools .shop-cart-count, .site-tools .wishlist-item-count {
    background-color: var(--fs-rosa) !important;
    color: var(--fs-blanco) !important;
}
.woostify-search-form-widget .search-field, .woocommerce-product-search .search-field {
    background-color: var(--fs-blanco) !important;
    color: var(--fs-azul) !important;
    border-radius: 999px !important;
    border: 2px solid #e3e9f2 !important;
    padding: 10px 20px !important;
}
.woostify-search-form-widget .search-field:focus { border-color: var(--fs-turquesa) !important; }
.woostify-search-form-widget .search-field::placeholder { color: var(--fs-azul); opacity: 0.5; }

.topbar { background-color: var(--fs-azul) !important; }
.topbar * { color: var(--fs-blanco) !important; }

.vertical-menu-button {
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* ============================================================
   4. MENÚ MÓVIL
   ============================================================ */
.sidebar-menu, .woostify-nav-menu-drawer, .elementor-nav-menu--dropdown {
    background-color: var(--fs-blanco) !important;
}
.sidebar-menu a, .sidebar-menu .primary-navigation > li > a,
.sidebar-menu .primary-navigation .sub-menu a, .woostify-nav-menu-drawer a,
.elementor-nav-menu--dropdown a {
    color: var(--fs-azul) !important;
    font-weight: 600 !important;
}
.sidebar-menu a:hover, .woostify-nav-menu-drawer a:hover, .elementor-nav-menu--dropdown a:hover {
    color: var(--fs-turquesa) !important;
}
.sidebar-menu .menu-item-arrow svg path, .woostify-close-nav-menu-button svg path {
    fill: var(--fs-azul) !important;
}
.toggle-sidebar-menu-btn.woostify-icon-bar span,
.woostify-toggle-nav-menu-button.woostify-icon-bar span, .woostify-icon-bar span {
    background-color: var(--fs-azul) !important;
}

/* ============================================================
   5. BOTONES (turquesa/azul marino, hover naranja/blanco)
   ============================================================ */
.button, .elementor-button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.product-loop-wrapper .button, .product-loop-meta.no-transform .button,
.loop-add-to-cart-btn, .single_add_to_cart_button,
.woocommerce-cart-form__contents .actions .coupon button,
.woostify-slide-button, .checkout-button {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.3px !important;
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
    border: none !important;
    border-radius: var(--fs-radio) !important;
    text-transform: none !important;
    padding: 13px 28px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(37, 215, 232, 0.35) !important;
}
.button:hover, .elementor-button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .product-loop-wrapper .button:hover,
.loop-add-to-cart-btn:hover, .single_add_to_cart_button:hover,
.woostify-slide-button:hover, .checkout-button:hover {
    background-color: var(--fs-naranja) !important;
    color: var(--fs-blanco) !important;
    box-shadow: 0 6px 16px rgba(247, 138, 29, 0.4) !important;
    transform: translateY(-2px);
}

/* ============================================================
   6. TARJETAS DE PRODUCTO + PRECIOS + BADGES
   ============================================================ */
.product-loop-wrapper {
    border-radius: var(--fs-radio-lg) !important;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-loop-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(6, 36, 92, 0.14);
}
.product-loop-image-wrapper img { border-radius: var(--fs-radio-lg) var(--fs-radio-lg) 0 0; }
.woocommerce-loop-product__title { font-weight: 600 !important; color: var(--fs-azul) !important; }

.price .woocommerce-Price-amount, .price ins .woocommerce-Price-amount {
    color: var(--fs-naranja) !important;
    font-weight: 800 !important;
}
.price del .woocommerce-Price-amount { color: #9aa5b5 !important; opacity: 0.8; }

.onsale, .woostify-tag-on-sale {
    background: linear-gradient(135deg, var(--fs-naranja), var(--fs-rosa)) !important;
    color: var(--fs-blanco) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 8px rgba(240, 79, 152, 0.4);
}
.woostify-product-new-label, .woostify-product-featured-label {
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
}
.stars a, .star-rating span::before, .woocommerce .star-rating::before { color: var(--fs-amarillo) !important; }

/* ============================================================
   7. ENLACES
   ============================================================ */
a { color: var(--fs-azul-claro); transition: color 0.25s ease; }
a:hover { color: var(--fs-naranja); }

/* ============================================================
   8. HEADER DE PÁGINAS INTERNAS (gris -> azul marino)
   ============================================================ */
.page-header {
    background-color: var(--fs-azul) !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.page-header .entry-title, .page-header .woostify-breadcrumb,
.page-header .woostify-breadcrumb a { color: var(--fs-blanco) !important; }

/* ============================================================
   9. FOOTER (azul marino)
   ============================================================ */
.site-footer {
    background-color: var(--fs-azul) !important;
    color: var(--fs-blanco) !important;
    margin-top: 80px !important;
}
.site-footer *, .site-footer a, .site-footer .widget-title { color: var(--fs-blanco) !important; }
.site-footer a:hover { color: var(--fs-turquesa) !important; }
.site-footer .widget-title::after {
    content: ''; display: block; width: 40px; height: 3px;
    margin-top: 8px; border-radius: 3px; background-color: var(--fs-turquesa);
}
.woostify-footer-social-icon a, .elementor-social-icon {
    background-color: var(--fs-blanco) !important;
    color: var(--fs-azul) !important;
    border-color: var(--fs-blanco) !important;
    border-radius: 50% !important;
}
.woostify-footer-social-icon a:hover, .elementor-social-icon:hover {
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
}

/* ============================================================
   10. FORMULARIOS
   ============================================================ */
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], textarea, select, .woocommerce input.input-text {
    font-family: 'Raleway', sans-serif;
    border: 2px solid #e3e9f2 !important;
    border-radius: 10px !important;
    padding: 11px 16px !important;
    color: var(--fs-azul) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--fs-turquesa) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 215, 232, 0.15) !important;
}

/* ============================================================
   11. WOOCOMMERCE (tabs, avisos, paginación, carrito lateral)
   ============================================================ */
.woocommerce-tabs .tabs li a { color: var(--fs-azul) !important; font-weight: 600 !important; }
.woocommerce-tabs .tabs li.active a {
    color: var(--fs-turquesa) !important;
    border-bottom: 3px solid var(--fs-turquesa) !important;
}
.woocommerce-message {
    border-top-color: var(--fs-turquesa) !important;
    background-color: #e0f9fc !important; color: var(--fs-azul) !important;
    border-radius: var(--fs-radio) !important;
}
.woocommerce-info {
    border-top-color: var(--fs-azul-claro) !important;
    background-color: #e8f1fe !important; color: var(--fs-azul) !important;
    border-radius: var(--fs-radio) !important;
}
.woocommerce-error {
    border-top-color: var(--fs-rosa) !important;
    background-color: #fde8f2 !important;
    border-radius: var(--fs-radio) !important;
}
.woocommerce-pagination .page-numbers.current, .pagination .page-numbers.current {
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
    border-color: var(--fs-turquesa) !important;
    border-radius: 8px !important;
}
.woocommerce-pagination .page-numbers:hover, .pagination .page-numbers:hover {
    background-color: var(--fs-naranja) !important;
    color: var(--fs-blanco) !important;
}
.cart-sidebar-head { background-color: var(--fs-azul) !important; color: var(--fs-blanco) !important; }

/* ============================================================
   12. COUNTDOWN / SCROLL TO TOP / SIDEBAR
   ============================================================ */
.woostify-countdown-item {
    background-color: var(--fs-azul) !important;
    border-radius: 12px !important;
    min-width: 64px;
}
.woostify-countdown-item .wdcd-time { color: var(--fs-amarillo) !important; font-weight: 800 !important; }
.woostify-countdown-item .wdcd-text { color: var(--fs-blanco) !important; }

#scroll-to-top {
    background-color: var(--fs-turquesa) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(6, 36, 92, 0.25);
}
#scroll-to-top svg { fill: var(--fs-azul) !important; }
#scroll-to-top:hover { background-color: var(--fs-naranja) !important; }
#scroll-to-top:hover svg { fill: var(--fs-blanco) !important; }

#secondary h4.wp-block-heading, .w-product-filter .widget-title {
    font-weight: 800 !important; color: var(--fs-azul) !important;
}
#secondary .widget_tag_cloud .wp-block-tag-cloud a {
    border: 2px solid var(--fs-turquesa);
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--fs-azul) !important;
    font-weight: 600 !important;
}
#secondary .widget_tag_cloud .wp-block-tag-cloud a:hover {
    background-color: var(--fs-turquesa) !important;
    color: var(--fs-azul) !important;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    h1, .elementor-heading-title.h1 { font-size: 36px !important; line-height: 44px !important; }
    h2, .elementor-heading-title.h2 { font-size: 28px !important; line-height: 36px !important; }
    .site-header .custom-logo, .woostify-logo-image-widget img { max-height: 60px; }
}
@media (max-width: 768px) {
    h1, .elementor-heading-title.h1 { font-size: 28px !important; line-height: 36px !important; }
    h2, .elementor-heading-title.h2 { font-size: 24px !important; line-height: 32px !important; }
    .button, .elementor-button { font-size: 14px !important; padding: 11px 22px !important; }
}

/* ============================================================
   14. FIX: icono hamburguesa pegado al borde (botón categorías)
   El span del icono no tenía separación respecto al texto.
   ============================================================ */
.vertical-menu-button.toggle-vertical-menu-button,
button.vertical-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 26px !important;
    line-height: 1 !important;
}
.vertical-menu-button .woostify-svg-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 0 !important;
}
.vertical-menu-button .woostify-svg-icon svg {
    display: block;
}

/* ============================================================
   15. CLASES COMBINADAS: gradiente + estrellas (una sola capa)
   REGLA: nunca combines fs-estrellas o fs-dots DIRECTAMENTE con
   un fs-grad en el mismo contenedor: el background-image se
   pisan. Usa estas clases combinadas, o anida (textura en hijo).
   ============================================================ */
.fs-grad-turquesa-azul-estrellas,
.fs-grad-rosa-naranja-estrellas,
.fs-grad-morado-rosa-estrellas,
.fs-grad-turquesa-verde-estrellas,
.fs-grad-navy-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"), linear-gradient(120deg, #25D7E8 0%, #3E95FF 100%) !important;
    background-size: 120px 120px, cover !important;
}
.fs-grad-rosa-naranja-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"), linear-gradient(120deg, #F04F98 0%, #F78A1D 100%) !important;
}
.fs-grad-morado-rosa-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"), linear-gradient(120deg, #A25AE7 0%, #F04F98 100%) !important;
}
.fs-grad-turquesa-verde-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"), linear-gradient(120deg, #25D7E8 0%, #A8D51B 100%) !important;
}
.fs-grad-navy-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 14l2.2 5.6 5.8.5-4.4 3.8 1.4 5.7L20 26.2l-5 3.4 1.4-5.7-4.4-3.8 5.8-.5z' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M92 68l1.8 4.5 4.7.4-3.6 3.1 1.1 4.6L92 77.8l-4 2.8 1.1-4.6-3.6-3.1 4.7-.4z' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='60' cy='40' r='3' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"), linear-gradient(135deg, #06245C 0%, #0B3585 60%, #1346AF 100%) !important;
}

/* ============================================================
   16. MANTENER IMAGEN DE FONDO + FIRMA DE MARCA (overlay)
   Si quieres conservar una foto de producto Y el color de marca,
   aplica esta clase al contenedor: oscurece la imagen con velo
   navy para que el texto blanco lea bien. Compatible con
   fs-burbujas (usa ::after, no choca con su ::before).
   ============================================================ */
.fs-overlay-navy {
    position: relative;
}
.fs-overlay-navy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(6, 36, 92, 0.72) 0%, rgba(6, 36, 92, 0.35) 100%);
    z-index: 0;
}
.fs-overlay-navy > .e-con-inner,
.fs-overlay-navy > .elementor-container,
.fs-overlay-navy > .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}
.fs-overlay-navy h1, .fs-overlay-navy h2, .fs-overlay-navy h3,
.fs-overlay-navy .elementor-heading-title, .fs-overlay-navy p {
    color: #FFFFFF !important;
}