/* ============================================================
   HAZTE PRO - CSS COMPLETO CONSOLIDADO
   Plataforma: WordPress + Astra + Elementor + HFE plugin

   Pegar TODO en: Apariencia > Personalizar > CSS adicional
   (sustituyendo lo que tengas ahora)

   ESTRUCTURA:
   - Sección 0: CSS personal previo (cookies, footer, cuenta)
   - Sección 1: Header amarillo suavizado
   - Sección 2: Botón Hazte PRO
   - Sección 3: Vídeo hero
   - Sección 4: Productos WooCommerce
   - Sección 5: Botones flotantes FAB (Telegram/WhatsApp)
   - Sección 6: Tipografía general
   - Sección 7: Responsive tablet
   - Sección 8: Responsive móvil
   - Sección 9: Anti-hover en táctil

   Si algo se rompe, comenta esa sección envolviéndola con
   barra-asterisco al principio y asterisco-barra al final.
   ============================================================ */


/* ============================================================
   0. CSS PERSONAL EXISTENTE (no tocar - ya funcionaba)
   ============================================================ */

/* COOKIES */
div[data-cky-tag="detail-powered-by"] a {
    display: none !important;
}

div[data-cky-tag="detail-powered-by"]:after {
    content: " pokebank";
    padding: 0px 10px;
    font-weight: 600;
}

/* BOTÓN COOKIES */
.logo-pie {
    margin-top: 50px;
    margin-bottom: 150px;
}

.boton-cookies {
    background-color: #FF6600;
    padding: 20px;
    color: #fff !important;
    border: solid 0px #555;
    border-radius: 15px;
}

a.boton-cookies {
    text-decoration: none !important;
}

.boton-cookies:hover {
    background-color: #3BAFCA;
    color: #fff !important;
}

.ast-cart-menu-wrap .count,
.ast-cart-menu-wrap .count:after {
    border-color: #aaaaaa;
    color: #aaaaaa;
}

.woocommerce-MyAccount-navigation-link--payment-methods {
    display: none !important;
}


/* ============================================================
   1. HEADER AMARILLO - suavizado y reducido
   Cubre Astra + HFE plugin + Elementor
   ============================================================ */

html body .ast-primary-header-bar,
html body .main-header-bar,
html body header#masthead,
html body .ast-above-header,
html body .ast-below-header-bar,
html body .hfe-header,
html body .hfe-site-header,
html body #hfe-header,
html body .elementor-location-header,
html body .elementor-location-header > div,
html body .elementor-location-header .elementor-section,
html body .elementor-location-header .elementor-section-wrap,
html body .elementor-location-header .elementor-container,
html body .elementor-location-header section[data-element_type="section"],
html body .elementor-location-header .elementor-element.elementor-section,
html body .elementor-location-header .elementor-top-section {
    background-color: #FFD60A !important;
    background-image: none !important;
}

/* Fuerza bruta - elementos con amarillo inline */
html body .elementor-location-header [style*="background-color: #FFEB"],
html body .elementor-location-header [style*="background-color:#FFEB"],
html body .elementor-location-header [style*="background: #FFEB"],
html body .elementor-location-header [style*="background:#FFEB"],
html body .hfe-header [style*="FFEB00"],
html body .hfe-header [style*="ffeb00"] {
    background-color: #FFD60A !important;
    background-image: none !important;
}

/* Reducir altura del header */
html body .ast-primary-header-bar .ast-primary-header-bar-wrap,
html body .main-header-bar-wrap,
html body .elementor-location-header .elementor-section,
html body .elementor-location-header .elementor-top-section,
html body .hfe-header .elementor-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
    border-bottom: none !important;
}

html body .elementor-location-header .elementor-container {
    min-height: 0 !important;
}

/* Logo más pequeño */
html body .ast-site-identity img,
html body .site-logo-img img,
html body .custom-logo-link img,
html body .elementor-location-header img,
html body .hfe-header img,
html body .elementor-location-header .elementor-widget-image img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
}

/* Menú navegación más limpio */
html body .main-header-menu a,
html body .ast-primary-header .main-header-menu a,
html body .main-header-menu .menu-item > a,
html body .elementor-location-header .elementor-nav-menu a,
html body .elementor-location-header .hfe-nav-menu a,
html body .elementor-location-header .menu-item a {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

/* Header sticky al hacer scroll */
html body header#masthead,
html body .site-header,
html body .elementor-location-header,
html body .hfe-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}


/* ============================================================
   2. BOTÓN "HAZTE PRO" del hero
   ============================================================ */

html body a.elementor-button[href*="hazte-pro"],
html body .elementor-button-wrapper a[href*="hazte-pro"],
html body a[href*="hazte-pro"].elementor-button-link,
html body .elementor-widget-button a[href*="hazte-pro"] {
    background-color: #1a1a1a !important;
    background-image: none !important;
    color: #FFD60A !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

html body a.elementor-button[href*="hazte-pro"]:hover,
html body .elementor-button-wrapper a[href*="hazte-pro"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
    background-color: #000 !important;
    color: #FFD60A !important;
}


/* ============================================================
   3. VÍDEO HERO - bordes redondeados y sombra
   ============================================================ */

html body .elementor-widget-video .elementor-widget-container,
html body .elementor-widget-video iframe,
html body .elementor-video {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}


/* ============================================================
   4. PRODUCTOS WOOCOMMERCE
   ============================================================ */

html body.woocommerce ul.products li.product,
html body .woocommerce ul.products li.product,
html body .ast-woocommerce-container ul.products li.product,
html body ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    padding: 16px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

html body.woocommerce ul.products li.product:hover,
html body .woocommerce ul.products li.product:hover,
html body .ast-woocommerce-container ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    border-color: #FFD60A !important;
}

/* Imagen producto */
html body.woocommerce ul.products li.product img,
html body .woocommerce ul.products li.product img,
html body ul.products li.product .attachment-woocommerce_thumbnail {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

/* Título */
html body.woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product h2,
html body ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    min-height: 40px !important;
    padding: 8px 0 4px !important;
}

/* Precio */
html body.woocommerce ul.products li.product .price,
html body .woocommerce ul.products li.product .price {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

html body.woocommerce ul.products li.product .price ins,
html body .woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    background: transparent !important;
}

/* "Precio PRO" sin subrayado */
html body ul.products li.product a[href*="precio"],
html body ul.products li.product .precio-pro,
html body ul.products li.product .price-pro {
    text-decoration: none !important;
    color: #c0392b !important;
}

/* Botón "Añadir al carrito" */
html body.woocommerce ul.products li.product a.button,
html body .woocommerce ul.products li.product .button,
html body .woocommerce ul.products li.product a.add_to_cart_button,
html body ul.products li.product a.button.product_type_simple {
    background-color: #1a1a1a !important;
    background-image: none !important;
    color: #FFD60A !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    text-align: center !important;
    border: none !important;
    display: inline-block !important;
}

html body.woocommerce ul.products li.product a.button:hover,
html body .woocommerce ul.products li.product .button:hover,
html body .woocommerce ul.products li.product a.add_to_cart_button:hover {
    background-color: #FFD60A !important;
    color: #1a1a1a !important;
}

/* Etiquetas de idioma */
html body ul.products li.product .idioma-label,
html body ul.products li.product .language-tag,
html body .product-language {
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    background-color: #FFD60A !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    text-transform: none !important;
}


/* ============================================================
   5. BOTONES FLOTANTES TELEGRAM / WHATSAPP
   PASOS:
   - Ocultar banners viejos: editar sección Elementor y
     poner CSS ID = "ofertas-redes"
   - Añadir widget HTML con el código (mira el HTML aparte)
   ============================================================ */

html body section#ofertas-redes,
html body .ofertas-banners,
html body .elementor-section.ofertas-banners {
    display: none !important;
}

.fab-social {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 9999 !important;
}

.fab-social .fab-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-decoration: none !important;
}

.fab-social .fab-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
}

.fab-social .fab-whatsapp { background-color: #25D366 !important; }
.fab-social .fab-telegram { background-color: #0088cc !important; }


/* ============================================================
   6. TIPOGRAFÍA GENERAL
   ============================================================ */

html body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

html body h1,
html body h2,
html body h3 {
    letter-spacing: -0.01em !important;
}


/* ============================================================
   7. RESPONSIVE - TABLET (768px - 1024px)
   ============================================================ */

@media (max-width: 1024px) {

    html body .elementor-location-header .elementor-section,
    html body .hfe-header .elementor-section {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    html body .woocommerce ul.products,
    html body ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ============================================================
   8. RESPONSIVE - MÓVIL (hasta 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* HEADER móvil */
    html body .elementor-location-header .elementor-section,
    html body .hfe-header .elementor-section,
    html body .elementor-location-header .elementor-top-section {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    html body .ast-site-identity img,
    html body .custom-logo-link img,
    html body .elementor-location-header img,
    html body .hfe-header img {
        max-height: 38px !important;
    }

    /* Hamburguesa táctil-friendly */
    html body .elementor-menu-toggle,
    html body .hfe-nav-menu__toggle {
        font-size: 24px !important;
        padding: 8px !important;
    }

    /* HERO móvil */
    html body .elementor-widget-heading h1,
    html body .elementor-widget-heading h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    html body .elementor-widget-video,
    html body .elementor-widget-video .elementor-widget-container {
        max-height: none !important;
        width: 100% !important;
    }

    html body a.elementor-button[href*="hazte-pro"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
        width: auto !important;
    }

    /* PRODUCTOS móvil - 2 columnas */
    html body.woocommerce ul.products,
    html body .woocommerce ul.products,
    html body ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    html body.woocommerce ul.products li.product,
    html body .woocommerce ul.products li.product {
        padding: 10px !important;
    }

    /* Quitar hover pegajoso */
    html body.woocommerce ul.products li.product:hover,
    html body .woocommerce ul.products li.product:hover {
        transform: none !important;
    }

    html body.woocommerce ul.products li.product .woocommerce-loop-product__title,
    html body ul.products li.product h2 {
        font-size: 12px !important;
        min-height: 36px !important;
        padding: 6px 0 2px !important;
    }

    html body.woocommerce ul.products li.product .price {
        font-size: 14px !important;
    }

    html body.woocommerce ul.products li.product a.button {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    html body ul.products li.product .idioma-label,
    html body ul.products li.product .product-language {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    /* FAB móvil - más arriba para no tapar el "Añadir" */
    .fab-social {
        bottom: 80px !important;
        right: 12px !important;
        gap: 10px !important;
    }

    .fab-social .fab-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .fab-social .fab-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}


/* ============================================================
   MÓVIL PEQUEÑO (hasta 480px)
   ============================================================ */

@media (max-width: 480px) {

    html body .woocommerce ul.products,
    html body ul.products {
        gap: 8px !important;
    }

    html body.woocommerce ul.products li.product {
        padding: 8px !important;
    }
}


/* ============================================================
   9. ANTI-HOVER en dispositivos táctiles (todas las pantallas)
   Detecta tablets y móviles sin importar el ancho
   ============================================================ */

@media (hover: none) {

    html body.woocommerce ul.products li.product:hover,
    html body .woocommerce ul.products li.product:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
        border-color: #ececec !important;
    }

    .fab-social .fab-btn:hover {
        transform: none !important;
    }

    html body a.elementor-button[href*="hazte-pro"]:hover {
        transform: none !important;
    }
}

/* ============================================================
   PARCHE 3 - Arreglar menú roto + mejorar tarjetas
   AÑADIR AL FINAL del CSS actual
   ============================================================ */


/* ============================================================
   A. ARREGLO MENÚ - dar aire al header y alinear elementos
   ============================================================ */

/* Más padding vertical para que respire el menú */
html body .elementor-location-header .elementor-section,
html body .elementor-location-header .elementor-top-section,
html body .hfe-header .elementor-section {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 70px !important;
}

/* Asegurar que el contenedor centra verticalmente sus hijos */
html body .elementor-location-header .elementor-container,
html body .elementor-location-header .elementor-row {
    align-items: center !important;
    min-height: 60px !important;
}

/* Columnas internas del header alineadas verticalmente */
html body .elementor-location-header .elementor-column,
html body .elementor-location-header .elementor-top-column {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
}

/* Que cada widget interior se centre */
html body .elementor-location-header .elementor-widget-wrap {
    align-content: center !important;
    align-items: center !important;
}

/* Logo bien dimensionado y visible */
html body .elementor-location-header .elementor-widget-image img,
html body .hfe-header .elementor-widget-image img {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
}

/* Carrito - asegurar que no queda cortado */
html body .elementor-location-header .elementor-menu-cart__toggle,
html body .elementor-location-header .elementor-button-wrapper,
html body .elementor-location-header [class*="cart"] {
    align-self: center !important;
}


/* ============================================================
   B. TARJETAS DE PRODUCTO - bordes más visibles + detalle pro
   ============================================================ */

/* Borde más visible pero sutil + sombra interna muy suave */
html body.woocommerce ul.products li.product,
html body .woocommerce ul.products li.product,
html body .ast-woocommerce-container ul.products li.product,
html body ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Línea de color sutil arriba (detalle pro que apenas se ve pero da carácter) */
html body.woocommerce ul.products li.product::before,
html body .woocommerce ul.products li.product::before,
html body ul.products li.product::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #FFD60A 0%, #FFD60A 50%, transparent 50%, transparent 100%) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;
    transition: background-position 0.4s ease !important;
    z-index: 2 !important;
}

/* En hover, la línea amarilla "barre" de derecha a izquierda */
html body.woocommerce ul.products li.product:hover::before,
html body .woocommerce ul.products li.product:hover::before,
html body ul.products li.product:hover::before {
    background-position: 0 0 !important;
}

/* Hover de la tarjeta más pronunciado */
html body.woocommerce ul.products li.product:hover,
html body .woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.06),
        0 8px 24px rgba(0,0,0,0.1) !important;
    border-color: #d0d0d0 !important;
}


/* ============================================================
   C. RESPONSIVE - ajustes a los nuevos cambios
   ============================================================ */

@media (max-width: 768px) {

    /* Header móvil con más aire también */
    html body .elementor-location-header .elementor-section,
    html body .hfe-header .elementor-section,
    html body .elementor-location-header .elementor-top-section {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 60px !important;
    }

    html body .elementor-location-header .elementor-widget-image img,
    html body .hfe-header .elementor-widget-image img {
        max-height: 38px !important;
    }
}


/* ============================================================
   D. ANTI-HOVER táctil - sobrescribir nuevos hovers
   ============================================================ */

@media (hover: none) {

    html body.woocommerce ul.products li.product:hover::before,
    html body ul.products li.product:hover::before {
        background-position: 100% 0 !important;
    }

    html body.woocommerce ul.products li.product:hover,
    html body .woocommerce ul.products li.product:hover {
        transform: none !important;
        box-shadow:
            0 1px 2px rgba(0,0,0,0.04),
            0 1px 3px rgba(0,0,0,0.06) !important;
        border-color: #e0e0e0 !important;
    }
}
/* ============================================================
   FOOTER - igualar color amarillo al header (#FFD60A)
   ============================================================ */

html body .site-footer,
html body footer#colophon,
html body .footer-bar,
html body .ast-footer-overlay,
html body .footer-widget-area,
html body .footer-primary-area,
html body .ast-above-footer,
html body .ast-below-footer,
html body .elementor-location-footer,
html body .elementor-location-footer > div,
html body .elementor-location-footer .elementor-section,
html body .elementor-location-footer .elementor-section-wrap,
html body .elementor-location-footer .elementor-container,
html body .elementor-location-footer section[data-element_type="section"],
html body .elementor-location-footer .elementor-element.elementor-section,
html body .elementor-location-footer .elementor-top-section,
html body .hfe-footer,
html body #hfe-footer {
    background-color: #FFD60A !important;
    background-image: none !important;
}

/* Fuerza bruta - estilos inline amarillo saturado */
html body .elementor-location-footer [style*="background-color: #FF"],
html body .elementor-location-footer [style*="background-color:#FF"],
html body .elementor-location-footer [style*="background: #FF"],
html body .elementor-location-footer [style*="background:#FF"],
html body .elementor-location-footer [style*="FFFF00"],
html body .elementor-location-footer [style*="ffff00"] {
    background-color: #FFD60A !important;
    background-image: none !important;
}
/* ============================================================
   FOOTER - igualar TODAS las capas al amarillo del header
   ============================================================ */

/* Capa exterior (amarillo chillón de fondo) */
html body .site-footer,
html body footer#colophon,
html body .ast-footer-overlay,
html body .footer-widget-area,
html body .footer-primary-area,
html body .ast-above-footer,
html body .ast-below-footer,
html body .elementor-location-footer,
html body .elementor-location-footer > div,
html body .elementor-location-footer .elementor-section,
html body .elementor-location-footer .elementor-section-wrap,
html body .elementor-location-footer .elementor-container,
html body .elementor-location-footer section[data-element_type="section"],
html body .elementor-location-footer .elementor-element.elementor-section,
html body .elementor-location-footer .elementor-top-section,
html body .elementor-location-footer .elementor-inner-section,
html body .elementor-location-footer .elementor-column,
html body .elementor-location-footer .elementor-top-column,
html body .elementor-location-footer .elementor-col-100,
html body .elementor-location-footer .elementor-col-50,
html body .elementor-location-footer .elementor-col-33,
html body .elementor-location-footer [class*="elementor-col-"],
html body .hfe-footer,
html body #hfe-footer,
/* Barra de copyright (franja más oscura abajo) */
html body .footer-bar,
html body .ast-footer-copyright,
html body .footer-copyright-bar {
    background-color: #FFD60A !important;
    background-image: none !important;
}

/* Fuerza bruta para estilos inline de Elementor */
html body .elementor-location-footer [style*="background"],
html body footer [style*="background"] {
    background-color: #FFD60A !important;
    background-image: none !important;
}