/*
 Theme Name:   Astra Child FDIHA
 Description:  FDIHA BRUTALISM - V57 (RESTAURACIÓN TOTAL ESFERAS + ZIGZAG + ESCALA)
 Version:      10000.0.57
*/

:root { --fdiha-orange: #ff8c00; }

/* ================================================================
   1. BASE Y SELLADO (Común)
   ================================================================ */
html, body, #page, .site, #contenedor-unico-fdiha { 
    background-color: #fff !important; margin: 0 !important; padding: 0 !important; 
    width: 100% !important; overflow-x: hidden !important;
}

#contenedor-unico-fdiha .fdiha-shortcode-wrap {
    width: 100vw !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important;
}
   
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button { 
    font-family: 'Courier New', Courier, monospace !important; 
    font-weight: 900 !important; font-style: oblique !important; color: #000 !important;
}

/* ================================================================
   PROYECTOS V61: RESTAURACIÓN DE FONDO + ICONO BOTÓN + ZIGZAG
   ================================================================ */

/* 1. SECCIÓN: Recuperamos el fondo de letras grises */
#seccion-proyectos {
    display: block !important;
    position: relative !important;
    min-height: 1100px !important;
    background-color: #fff !important; /* Base blanca */
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* El PNG de las letras (Capa de fondo) */
#seccion-proyectos .proyectos-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image: url('https://fdiha.org/wp-content/uploads/2026/05/CLARO-DEKTOP.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
}

/* 2. TÍTULO: Centrado arriba */
.proyectos-title-wrap {
    width: 100% !important;
    text-align: center !important;
    padding: 60px 0 20px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 3. TRACK: El raíl para el zigzag */
#proyectos-track {
    position: relative !important;
    width: 100% !important;
    height: 800px !important;
    z-index: 20 !important;
}

/* 4. SLIDES: Configuración para el JS */
.proyecto-slide {
    position: absolute !important;
    width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 5. BOLAS: Cristal + Imagen */
.esfera-img {
    width: 280px !important;
    height: 280px !important;
    position: relative !important;
    margin-bottom: 25px !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* La imagen del proyecto (ACF) - LA SUBIMOS DE CAPA */
.esfera-img img {
    position: relative !important;
    z-index: 45 !important; /* Por encima de todo para que se vea clara */
    width: 72% !important;  /* Ajustamos tamaño para que encaje en el centro */
    height: 72% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    display: block !important;
}

/* La bola de cristal (El efecto de brillo) - LA PONEMOS DE FONDO */
.esfera-img::before {
    content: "" !important;
    position: absolute !important;
    inset: -10% !important; /* Que sobresalga un poco para hacer el marco */
    background: url('https://fdiha.org/wp-content/uploads/2026/03/bola.png') no-repeat center/contain !important;
    z-index: 40 !important; /* Justo debajo de la imagen del proyecto */
    pointer-events: none !important;
}

/* 6. TEXTO: Columna estrecha idéntica al wireframe */
.proyecto-texto-cage {
    width: 160px !important;
    max-width: 160px !important;
    text-align: center !important;
}

.proyecto-titulo { font-size: 1.3rem !important; margin-bottom: 10px !important; text-transform: uppercase !important; }
.proyecto-desc { font-size: 1rem !important; line-height: 1.3 !important; font-weight: 900 !important; }

/* 7. EL BOTÓN "VER MÁS": Restauración de la imagen del círculo */
.proyectos-cta {
    position: absolute !important;
    bottom: 30Px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 150 !important;
}
/* 2. SI EL BOTÓN SE CORTA O QUIERES QUE BAJE AÚN MÁS, AUMENTA ESTO: */
#seccion-proyectos {
    display: block !important;
    position: relative !important;
    min-height: 1200px !important; /* Sube de 1100 a 1200 o más para darle más espacio por abajo */
    background-color: #fff !important; 
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Forzamos el icono del pincel/círculo en el botón */
#seccion-proyectos .boton-fdiha-nuevo {
    padding-left: 58px !important;
}

#seccion-proyectos .boton-fdiha-nuevo::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 46px !important;
    width: 46px !important;
    background: #000 url('https://fdiha.org/wp-content/uploads/2026/04/BotonCircularSinTexto.png') no-repeat center / 46px 46px !important;
    border-radius: 100px !important;
    transition: width 0.6s ease-in-out !important;
}

#seccion-proyectos .boton-fdiha-nuevo:hover::before {
    width: 100% !important;
}
/* =========================================================
   AÑADE ESTO: LA IMAGEN DE LA FLECHA AL PASAR EL RATÓN
   ========================================================= */
#seccion-proyectos .boton-fdiha-nuevo::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* ↓ PON AQUÍ EL ENLACE DE TU NUEVA IMAGEN ↓ */
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    border-radius: 100px !important;
    opacity: 0 !important;
    z-index: 3 !important;
    pointer-events: none;
    transition: opacity 0.3s ease !important;
    transition-delay: 0.2s !important; /* Espera a que el círculo se expanda para aparecer */
}

#seccion-proyectos .boton-fdiha-nuevo:hover::after {
    opacity: 1 !important;
}
/* ================================================================
   3. SELLADO DE HUECOS ELEMENTOR
   ================================================================ */
.elementor-widget-shortcode, .fdiha-shortcode-wrap, .proyectos-section {
    margin: 0 !important; padding: 0 !important; background: transparent !important;
}

/* ================================================================
   4. RESTO DE SECCIONES (Aliades, Fashion, etc.)
   ================================================================ */
.aliades-wrapper { min-height: 750px; position: relative; overflow: hidden; }
.sm-wrap { min-height: 870px; position: relative; }
.fashion-wrap { min-height: 846px; position: relative; }
.nw-wrap { min-height: 500px; border-top: 2px solid #000; position: relative; }

/* ================================================================
   BOTÓN FDIHA: EFECTO RASTRO SÓLIDO (V63 - SIN FLECHAS)
   ================================================================ */
html body a.boton-fdiha-nuevo {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important; /* Espacio inicial para el círculo */
    border-radius: 100px !important;
    z-index: 100 !important;
    text-decoration: none !important;
    overflow: hidden !important; /* Crucial para que el rastro se quede dentro */
    background-color: transparent !important;
    transition: all 0.3s ease;
}

/* El texto: pasa de negro a blanco cuando lo pisa el rastro */
html body a.boton-fdiha-nuevo span {
    position: relative !important;
    z-index: 10 !important;
    color: #000 !important;
    transition: color 0.3s ease;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 900 !important;
}

html body a.boton-fdiha-nuevo:hover span {
    color: #fff !important; 
}

/* CAPA 1: EL RASTRO NEGRO (Se desliza desde la izquierda) */
html body a.boton-fdiha-nuevo::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    top: 0;
    height: 100%;
    width: 46px; /* Tamaño del círculo inicial */
    background: #000 url('https://fdiha.org/wp-content/uploads/2026/04/BotonCircularSinTexto.png') no-repeat right center / 46px 46px !important;
    border-radius: 100px !important;
    z-index: 2 !important;
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important; /* Movimiento de cortina sólido */
}

html body a.boton-fdiha-nuevo:hover::before {
    width: 100% !important; /* El negro inunda todo el botón */
}

/* CAPA 2: LA IMAGEN DE HOVER (Aparece tras el rastro) */
html body a.boton-fdiha-nuevo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    border-radius: 100px !important; /* Mantenemos el borde redondeado */
    opacity: 0 !important;
    z-index: 3 !important;
    pointer-events: none;
    transform: scale(1) !important; /* Estado inicial */
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    transition-delay: 0.4s !important; /* Retraso para que el rastro negro pase primero */
}

html body a.boton-fdiha-nuevo:hover::after {
    opacity: 1 !important;
    transform: scale(1.08) !important; /* Aumentamos 8% para cubrir mejor el negro */
}

html body a.boton-fdiha-nuevo::selection { background: transparent; }
html body a.boton-fdiha-nuevo i, 
html body a.boton-fdiha-nuevo svg { display: none !important; }


/* ================================================================
   5. MUNDO MÓVIL
   ================================================================ */
@media (max-width: 768px) {
    #seccion-proyectos .proyectos-track {
        display: grid !important; 
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 50px 0 !important; 
        height: auto !important; 
        position: relative !important;
        justify-items: center !important;
    }
    
    /* ← AÑADE ESTO: FONDO MÓVIL */
    #seccion-proyectos .proyectos-bg {
        background-image: url('https://fdiha.org/wp-content/uploads/2026/05/CLARO-MOVIL.png') !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    
    .proyecto-slide { 
        position: relative !important; 
        width: 100% !important; 
        max-width: 300px !important;
        left: auto !important; 
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .esfera-img { 
        width: 220px !important; 
        height: 220px !important; 
    }
    
    .proyecto-texto-cage { 
        width: 100% !important;
        max-width: 260px !important;
        text-align: center !important;
    }
    
    .proyecto-titulo,
    .proyecto-subtitulo,
    .proyecto-desc {
        text-align: center !important;
    }
}
/* ELIMINAR ESPACIO BLANCO SUPERIOR EN HOME */
.home .site-content {
    padding: 0 !important;
    margin: 0 !important;
}

.home #fdh-wrap {
    margin-top: -111px !important; /* Muerde el espacio del header para que la foto empiece arriba del todo */
    padding-top: 111px !important; /* Pero empuja el contenido hacia abajo para que no lo tape el menú */
}

@media (max-width: 768px) {
    .home #fdh-wrap { margin-top: -65px !important; padding-top: 65px !important; }
}

/* ================================================================
   SELLADO DE HUECOS (MANTIENE DISEÑO V61)
   ================================================================ */

/* 1. Reset de contenedores de Elementor para eliminar el blanco entre secciones */
.elementor-section, 
.elementor-container, 
.elementor-column-wrap, 
.elementor-widget-container,
.e-con, 
.e-con-inner,
.elementor-widget-shortcode {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

/* 2. Sellar juntas entre shortcodes específicos */
.fdiha-shortcode-wrap, 
#seccion-proyectos, 
.aliades-wrapper, 
.sm-wrap, 
.fashion-wrap, 
.nw-wrap, 
#fk-wrap, 
#fd-wrap,
#cascada-wrap {
    margin-top: -1px !important; /* Muerde 1px para evitar líneas blancas de renderizado */
    margin-bottom: 0 !important;
}

/* 3. Eliminar espacios fantasma de WordPress */
#contenedor-unico-fdiha p:empty,
.entry-content p:empty {
    display: none !important;
}

.site-content {
    padding-bottom: 0 !important;
}
/* ================================================================
   SELLADO Y ALTURAS ESPECÍFICAS: QUE-ES-FDIHA
   ================================================================ */

/* 1. Reset general de secciones para evitar saltos blancos */
.elementor-section, .e-con, .elementor-widget-shortcode, .fdiha-shortcode-wrap {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: none !important;
}

/* 2. Sellar las juntas (el truco del -1px) */
[id*="wrap"], .vfv-wrap, .cascada-wrap, .aliades-wrapper, .sm-wrap, .fashion-wrap, .nw-wrap {
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 10;
}

/* 3. ALTURAS SEGÚN DISEÑO (Ajusta estos px si quieres más o menos aire) */

/* AJUSTE EXACTO PARA TEXTO CASCADA */
#cascada-wrap {
    height: 770px !important; /* Altura exacta según tu tabla de medidas */
    min-height: 770px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-top: -1px !important;
}
/* Ajuste de escala para que el texto no se vea demasiado pequeño en los 770px */
.cascada-item {
    transform-origin: center center;
    margin-bottom: 20px; /* Añade espacio entre bloques de texto */
}

/* [videofondoverde] */
.vfv-wrap {
    height: 100vh !important; /* El video siempre ocupa la pantalla completa */
    min-height: 700px;
}

/* [Fdihat_Kleo] y [fdihatdona] (Secciones de personajes) */
#fk-wrap, #fd-wrap {
    height: 850px !important; 
    overflow: hidden;
}

/* [socies_mosaico] */
.sm-wrap {
    min-height: 870px !important;
}

/* [fdiha_fashion] */
.fashion-wrap {
    min-height: 846px !important;
}

/* [newsletter_fdiha] */
.nw-wrap {
    min-height: 500px !important;
    background-color: #fff !important;
}

/* 4. Fix para móviles: Reducimos alturas para que no queden vacíos enormes */
@media (max-width: 768px) {
    #cascada-wrap { height: 400px !important; }
    #fk-wrap, #fd-wrap { height: auto !important; min-height: 600px; }
    .vfv-wrap { height: 60vh !important; }
}
/* ================================================================
   SELLADO TOTAL Y MEDIDAS "QUE ES FDIHA" (V62)
   ================================================================ */

/* 1. RESET DE ELEMENTOR: Mata márgenes y rellenos de los bloques duplicados */
.elementor-section, 
.elementor-container, 
.e-con, 
.e-con-inner,
.elementor-widget-shortcode {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    border: none !important;
}

/* 2. CLASE MAESTRA: Sella las juntas mordiendo 1px hacia arriba */
.fdiha-shortcode-wrap {
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    width: 100vw !important;
    position: relative;
    z-index: 10;
}

/* 3. ALTURAS ESPECÍFICAS SEGÚN TU PANTALLAZO */

/* [videofondoverde] */
.vfv-wrap, .vfv-seccion {
    height: 100vh !important;
    min-height: 700px !important;
}

/* [Fdihat_Kleo] y [fdihatdona] */
#fk-wrap, #fd-wrap {
    height: 850px !important;
    overflow: hidden !important;
}

/* [fdiha_texto_cascada] */
#cascada-wrap {
    height: 600px !important;
}

/* [socies_mosaico] */
.sm-wrap {
    min-height: 870px !important;
}

/* [fdiha_fashion] */
.fashion-wrap {
    min-height: 846px !important;
}

/* [newsletter_fdiha] */
.nw-wrap {
    min-height: 500px !important;
}

/* 4. LIMPIEZA DE PÁRRAFOS VACÍOS (Fantasmas de WordPress) */
#contenedor-unico-fdiha p:empty,
.elementor-widget-shortcode p {
    display: none !important;
    margin: 0 !important;
}

/* ================================================================
   SECCIÓN TODOS LOS PROYECTOS (ESTILO MAPA VISUAL)
   ================================================================ */

#todos-proyectos-wrap {
    position: relative;
    width: 100vw;
    background-color: #000; /* Fondo negro como la imagen */
    overflow: hidden;
    min-height: 1800px; /* Ajusta según el largo del PNG */
    display: flex;
    justify-content: center;
}

/* Fondo de letras proyectos */
.tp-bg-letras {
    position: absolute;
    inset: 0;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/fondoproyectosletras.png') center top / cover no-repeat;
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}

.tp-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1000px; /* Ancho del diseño del PNG */
    margin: 0 auto;
}

.tp-main-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Enlaces invisibles */
.tp-link {
    position: absolute;
    display: block;
    z-index: 10;
    /* background: rgba(255,0,0,0.2); /* Descomenta para ver las cajas mientras ajustas */
    cursor: pointer;
}

/* POSICIONAMIENTO DE LOS CLICS (Ajustes aproximados basados en tu imagen) */
.tp-fdiha    { top: 2%;  right: 5%;  width: 45%; height: 10%; }
.tp-shamiat  { top: 8%;  left: 5%;   width: 45%; height: 12%; }
.tp-seda     { top: 25%; right: 5%;  width: 45%; height: 10%; }
.tp-halal    { top: 40%; left: 5%;   width: 45%; height: 12%; }
.tp-congreso { top: 52%; right: 5%;  width: 55%; height: 8%;  }
.tp-manfa    { top: 62%; left: 5%;   width: 90%; height: 15%; }
.tp-podcast  { top: 82%; left: 5%;   width: 45%; height: 12%; }
.tp-archivo  { top: 82%; right: 5%;  width: 45%; height: 12%; }

/* Efecto al pasar el ratón */
.tp-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    #todos-proyectos-wrap { min-height: 1200px; }
}
/* AJUSTE PARA QUE EL HEADER NO TAPE LA IMAGEN */
.tp-header-spacer {
    height: 111px !important; /* Altura exacta de tu header fijo */
    width: 100%;
    display: block;
    background: #000; /* Fondo negro para que no haya salto blanco */
}

#todos-proyectos-wrap {
    background-color: #000 !important;
    margin-top: 0 !important; /* El spacer ya hace el trabajo */
}

/* Reajuste del fondo para que empiece después del header */
.tp-bg-letras {
    top: 111px !important;
    height: calc(100% - 111px) !important;
}

/* En móvil el header suele ser más pequeño (Astra suele usar 65px/80px) */
@media (max-width: 768px) {
    .tp-header-spacer {
        height: 80px !important; 
    }
    .tp-bg-letras {
        top: 80px !important;
    }
}
/* ================================================================
   FIX: VISIBILIDAD DE LETRAS DE FONDO (V69)
   ================================================================ */

#todos-proyectos-wrap {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background-color: #ffffff !important; /* Fondo de la web blanco */
    padding-top: 111px !important;
    min-height: 2000px;
    overflow: hidden;
}

/* El fondo de letras grises (Aumentamos opacidad para que se vea) */
.tp-bg-letras {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/fondoproyectosletras.png') center top / repeat !important;
    opacity: 0.4 !important; /* Subido de 0.15 a 0.4 para que sea visible */
    z-index: 1 !important;
    pointer-events: none !important;
}

.tp-container {
    position: relative !important;
    z-index: 5 !important; /* Asegura que la imagen esté sobre las letras */
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.tp-main-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* ESTA LÍNEA ES LA CLAVE: */
    mix-blend-mode: multiply !important; 
}
@media (max-width: 768px) {
    #todos-proyectos-wrap { padding-top: 80px !important; }
}
/* ================================================================
   ZIGZAG PERFECTO: MISMA DISTANCIA Y ALTURAS AJUSTADAS
   ================================================================ */

/* 1. DISTANCIA HORIZONTAL IGUAL PARA TODOS (A partir del segundo) */
.proyecto-slide {
    margin-left: -120px !important; /* Ajusta este valor (-100px, -150px) para separarlos o juntarlos más */
}

/* El primero se queda en 0 para no salirse de la pantalla por la izquierda */
.proyecto-slide:first-child {
    margin-left: 0 !important;
}

/* 2. PARES (ARRIBA): Suben 200px extra (-215px en total) */
.proyecto-slide:nth-child(even) {
    margin-top: -215px !important; 
    position: relative;
    z-index: 10;
}

/* 3. IMPARES (ABAJO): Suben 200px extra y mantienen el encaje al 50% (-60px) */
.proyecto-slide:nth-child(odd) {
    margin-top: -60px !important; 
    position: relative;
    z-index: 5;
}

/* 3. Ajuste del track para que no se corten los textos al subir */
#proyectos-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* Reducimos la altura total del contenedor ya que ahora están más juntas */
    height: 750px !important; 
    padding-bottom: 100px !important;
}

/* 4. Fix de espaciado lateral para que no se peguen entre ellas */
.proyecto-slide {
    margin-right: -40px !important; /* Muerde un poco de espacio para compactar el zigzag */
}

/* 5. Aseguramos que los textos no se tapen */
.proyecto-texto-cage {
    background: rgba(255,255,255,0.8) !important; /* Un poco de fondo para legibilidad si se solapan */
    padding: 10px !important;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .proyecto-slide:nth-child(even) {
        transform: none !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    .proyecto-slide { margin-right: 0 !important; }
}

/* ================================================================
   FIX DEFINITIVO: IMÁGENES MÁS GRANDES DENTRO DE ESFERAS (V70)
   ================================================================ */

/* Contenedor principal de la esfera: relativo para hijos absolutos */
.esfera-img {
    width: 280px !important;
    height: 280px !important;
    position: relative !important;
    margin-bottom: 25px !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* Crucial: nada sale del círculo */
}

/* 1. LA IMAGEN DEL PROYECTO (Sublime): Posicionamiento absoluto y centrado total */
.esfera-img img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important; /* CAPA MEDIA: Justo debajo del brillo */
    
    /* TAMAÑO MÁS GRANDE PERO SEGURO (V70) */
    width: 130% !important;  
    height: 130% !important;
    
    object-fit: contain !important; /* Mantiene proporción, no recorta */
    border-radius: 50% !important;
    display: block !important;
}

/* 2. EL EFECTO DE BOLA DE CRISTAL (Brillo): Lo ponemos POR ENCIMA */
.esfera-img::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important; /* Cubre todo el contenedor */
    background: url('https://fdiha.org/wp-content/uploads/2026/03/bola.png') no-repeat center/contain !important;
    
    z-index: 50 !important; /* CAPA SUPERIOR: Brillo por encima de la imagen */
    
    pointer-events: none !important;
    background-size: 105% 105% !important; /* Asegura cobertura total del brillo */
}
/* ESTILO BRUTALISTA PARA LAS BOLITAS DE COLOR (WPClever) */
.woosq-product .woosq-swatches,
.variations_form .woovr-swatches {
    gap: 8px !important;
}
.woovr-swatch-color {
    border: 1px solid #000 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
}
.woovr-swatch-color.woovr-swatch-active {
    border: 3px solid #000 !important; /* Borde gordo al seleccionar */
    transform: scale(1.1) !important;
}
/* ============================================================
   FDIHA WOOCOMMERCE - MASTER CSS (CLEAN VERSION)
   ============================================================ */

/* 1. ESTILO GLOBAL (Courier) */
.woocommerce, .woocommerce-page, .woocommerce * {
    font-family: 'Courier New', Courier, monospace !important;
}

/* 2. TIENDA (GRID DE PRODUCTOS) */
.woocommerce ul.products li.product {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 80px 0 !important; /* Espacio para precio y botón */
    border: none !important;
    background: transparent !important;
}

/* Título en la tienda */
.fdiha-titulo-forzado {
    display: block !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1.25rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin: 15px 0 5px 0 !important;
}

/* Precio en la tienda (Izquierda) */
.woocommerce ul.products li.product .price {
    position: absolute !important;
    bottom: 25px !important;
    left: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
}

/* --- BOTÓN TIENDA (Centrado y Círculo a la Izquierda) --- */
.boton-merch-wireframe {
    all: unset !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important; /* Lo empuja al medio */
    transform: translateX(-50%) !important; /* Lo centra de forma matemática perfecta */
    display: flex !important;
    flex-direction: row-reverse !important; /* Cambia el orden: pone el círculo a la izquierda y el texto a la derecha */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    width: max-content !important; /* Evita que el botón se aplaste o salte de línea */
}
.boton-merch-wireframe .texto-añadir {
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: lowercase !important;
}
.boton-merch-wireframe .icono-flecha {
    width: 34px !important;
    height: 34px !important;
    background: #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. PRODUCTO INDIVIDUAL (SINGLE PRODUCT) */

/* Ocultar lo innecesario */
.single-product .product_title, 
.single-product .woocommerce-product-details__short-description,
.single-product .product_meta,
.single-product .quantity,
.single-product .variations .label {
    display: none !important;
}

/* Contenedor de la derecha (Colores y Botón) */
.single-product div.product .summary {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* EL BOTÓN NEGRO (Single Product) - Corregido con Texto Blanco */
.single-product .single_add_to_cart_button.button {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important; /* Texto Blanco */
    padding: 18px 35px !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1rem !important;
    text-transform: lowercase !important;
    border-radius: 0 !important;
    border: none !important;
    min-width: 220px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.single-product .single_add_to_cart_button.button:hover {
    background-color: #333 !important;
}

/* Swatches de colores grandes */
.single-product .wpcvs-term-color {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #000 !important;
}

/* 4. HEADER TIENDA (FULL WIDTH) */
.fdiha-header-tienda-container {
    width: 100vw !important;
    height: 455px !important;
    margin-top: 100px !important;
    margin-bottom: 60px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-size: cover !important;
    background-position: center !important;
}
/* --- SINGLE PRODUCT: ESTÉTICA Y FUNCIONALIDAD --- */

/* 1. Columna derecha: Mostrar solo Colores y Botón */
.single-product div.product .summary {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 25px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultamos lo que no quieres (Título, Precio, Meta) */
.single-product .product_title, 
.single-product .price, 
.single-product .woocommerce-product-details__short-description,
.single-product .product_meta,
.single-product .variations .label,
.single-product .quantity {
    display: none !important;
}

/* 2. Mostrar FORMULARIO de colores (Swatches) */
.single-product .variations_form, 
.single-product .variations {
    display: block !important;
    visibility: visible !important;
}

/* 3. BOTÓN AÑADIR AL CARRITO: Negro con texto blanco */
.single-product .single_add_to_cart_button.button {
    display: block !important;
    visibility: visible !important;
    background-color: #000000 !important;
    color: #ffffff !important; /* TEXTO BLANCO */
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: lowercase !important;
    padding: 15px 40px !important;
    border-radius: 0 !important;
    border: none !important;
    width: fit-content !important;
    cursor: pointer !important;
}

/* 4. Swatches de colores (Círculos) */
.single-product .wpcvs-term-color {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #000 !important;
}
/* ============================================================
   FDIHA WOOCOMMERCE — SINGLE PRODUCT (FICHA INDIVIDUAL)
   ============================================================ */

/* ── TABLA DE VARIACIONES ── */
.single-product .variations_form table.variations {
    border: none !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

.single-product .variations_form .variations td,
.single-product .variations_form .variations th {
    border: none !important;
    padding: 8px 0 !important;
    vertical-align: top !important;
}

.single-product .variations_form .variations .label {
    display: none !important; /* Ocultamos el label "Color:" */
}

/* ── SWATCHES DE COLOR (WPC Variation Swatches) ── */
.single-product .wpcvs-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .wpcvs-terms {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Círculos de color */
.single-product .wpcvs-terms .wpcvs-term-color,
.single-product .wpcvs-terms .wpcvs-term[data-type="color"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #ccc !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.single-product .wpcvs-terms .wpcvs-term-color span {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 50% !important;
}

/* Estado activo */
.single-product .wpcvs-terms .wpcvs-term-color.wpcvs-term-active {
    border: 3px solid #000 !important;
    transform: scale(1.1) !important;
}

.single-product .wpcvs-terms .wpcvs-term-color:hover {
    border-color: #000 !important;
    transform: scale(1.05) !important;
}

/* Tallas (si las hay) */
.single-product .wpcvs-terms .wpcvs-term {
    border: 1px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
}

.single-product .wpcvs-terms .wpcvs-term:hover {
    background: #000 !important;
    color: #fff !important;
}

.single-product .wpcvs-terms .wpcvs-term.wpcvs-term-active {
    background: #000 !important;
    color: #fff !important;
}

/* ── CANTIDAD ── */
.single-product .quantity {
    margin: 20px 0 !important;
}

.single-product .quantity input.qty {
    width: 60px !important;
    padding: 8px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* ── BOTÓN AÑADIR (CUSTOM) ── */
.single-product .fdiha-custom-add-to-cart {
    margin-top: 20px !important;
}

/* ── MENSAJE "AGOTADO" ── */
.single-product .stock.out-of-stock {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #999 !important;
    font-size: 1rem !important;
    margin: 12px 0 !important;
}

/* ── LIMPIAR BASURA DE ASTRA ── */
.single-product .ast-onsale-card {
    display: none !important;
}

.single-product .product_meta {
    font-family: 'Courier New', monospace !important;
    font-size: 0.85rem !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
}
/* ============================================================
   TIENDA: OCULTAR ELEMENTOS INFORMATIVOS SUPERIORES
   ============================================================ */

/* 1. Ocultar Breadcrumbs (Inicio / Tienda) */
.woocommerce-breadcrumb, 
.ast-breadcrumbs-wrapper {
    display: none !important;
}

/* 2. Ocultar Título de la página (FDIHA Merchandising) */
.woocommerce-products-header__title.page-title {
    display: none !important;
}

/* 3. Ocultar Contador de resultados (Mostrando los 3 resultados) */
.woocommerce-result-count {
    display: none !important;
}

/* 4. Ocultar Desplegable de Ordenación (Orden predeterminado) */
.woocommerce-ordering {
    display: none !important;
}

/* 5. Ajuste de margen superior para compensar el hueco que dejan */
.archive.woocommerce ul.products {
    margin-top: 0px !important;
}
/* ============================================================
   FIX FINAL: SEPARACIÓN DE ESTILOS TIENDA VS SINGLE
   ============================================================ */

/* --- 1. TIENDA (Grid de productos): Círculo a la derecha --- */
.woocommerce ul.products li.product .boton-merch-wireframe {
    all: unset !important;
    position: absolute !important;
    bottom: 20px !important;
    right: 0 !important; /* Clavado a la derecha */
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .boton-merch-wireframe .texto-añadir {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: #000 !important;
    text-transform: lowercase !important;
}

/* El círculo negro de la tienda (SOLO flecha, sin cara) */
.woocommerce ul.products li.product .boton-merch-wireframe .icono-flecha {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    background-color: #000 !important;
    background-image: none !important; /* Limpiamos cualquier imagen previa */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

/* Hover tienda: solo escala el círculo */
.woocommerce ul.products li.product .boton-merch-wireframe:hover .icono-flecha {
    transform: scale(1.15) !important;
}


/* ============================================================
   BOTONES FDIHA: EFECTO WEB TOTAL (TIENDA Y SINGLE)
   ============================================================ */

/* --- 1. TIENDA: CENTRADO + EFECTO --- */
.woocommerce ul.products li.product .boton-merch-wireframe {
    all: unset !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    isolation: isolate !important; /* SEGURO DE CAPAS: Mantiene el texto arriba */
    z-index: 10 !important;
}

/* --- 2. SINGLE PRODUCT: BOTÓN FUNCIONAL + EFECTO --- */
.single-product button.single_add_to_cart_button.button {
    all: unset !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 60px !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    isolation: isolate !important; /* SEGURO DE CAPAS: Mantiene el texto arriba */
    z-index: 10 !important;
    margin: 20px 0 !important;
}

/* --- 3. EL TEXTO (Para ambos botones) --- */
.boton-merch-wireframe .texto-añadir,
.single-product button.single_add_to_cart_button.button {
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: #000 !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease !important;
    z-index: 10 !important; /* Fuerza la letra al frente */
}

/* --- 4. EL RASTRO NEGRO (La expansión) --- */
.boton-merch-wireframe .icono-flecha,
.single-product button.single_add_to_cart_button.button::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 46px !important;
    background: #000 url('https://fdiha.org/wp-content/uploads/2026/04/BotonCircularSinTexto.png') no-repeat center / 46px !important;
    border-radius: 100px !important;
    z-index: -1 !important; /* VA DETRÁS DEL TEXTO */
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

/* Flecha SVG de la tienda (ajuste para que no se mueva) */
.boton-merch-wireframe .icono-flecha svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #fff !important;
    position: absolute !important;
    left: 14px !important;
}

/* --- 5. LA PINCELADA (Efecto final de la web) --- */
.boton-merch-wireframe::after,
.single-product button.single_add_to_cart_button.button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    opacity: 0 !important;
    z-index: -1 !important; /* DETRÁS DEL TEXTO TAMBIÉN */
    transition: opacity 0.3s ease 0.4s !important;
    pointer-events: none !important;
}

/* --- 6. ESTADOS HOVER (TIENDA Y SINGLE) --- */

.boton-merch-wireframe:hover .icono-flecha,
.single-product button.single_add_to_cart_button.button:hover::before {
    width: 100% !important; /* El círculo inunda el botón */
}

.boton-merch-wireframe:hover .texto-añadir,
.single-product button.single_add_to_cart_button.button:hover {
    color: #fff !important; /* Letra blanca sobre fondo negro */
}

.boton-merch-wireframe:hover::after,
.single-product button.single_add_to_cart_button.button:hover::after {
    opacity: 1 !important; /* Aparece el rastro de pincelada */
}

/* ============================================================
   BOTÓN SINGLE PRODUCT - Círculo expansivo
   ============================================================ */
.single-product button.single_add_to_cart_button {
    /* Estructura */
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important;
    margin: 20px 0 0 0 !important;
    border-radius: 100px !important;
    
    /* Position */
    position: relative !important;
    isolation: isolate !important;
    
    /* Reset */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Texto */
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1rem !important;
    color: #000 !important;
    text-transform: lowercase !important;
    
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.single-product button.single_add_to_cart_button:hover {
    color: #fff !important;
}

/* Círculo negro */
.single-product button.single_add_to_cart_button::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 46px !important;
    background: #000 url('https://fdiha.org/wp-content/uploads/2026/04/BotonCircularSinTexto.png') no-repeat right center / 46px 46px !important;
    border-radius: 100px !important;
    z-index: -1 !important;
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

.single-product button.single_add_to_cart_button:hover::before {
    width: 100% !important;
}

/* Imagen hover */
.single-product button.single_add_to_cart_button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    border-radius: 100px !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease 0.4s !important;
}

.single-product button.single_add_to_cart_button:hover::after {
    opacity: 1 !important;
}
/* ============================================================
   FORZAR VISIBILIDAD DE LOS BOTONES
   ============================================================ */
/* En la tienda */
.woocommerce ul.products li.product .boton-merch-wireframe {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* En el Single Product (asegura que el formulario no esté oculto) */
.single-product .cart,
.single-product .variations_form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.single-product button.single_add_to_cart_button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ============================================================
   BOTONES FDIHA: CSS PURO (SIN ICONOS BASURA NI IMÁGENES ROTAS)
   ============================================================ */

/* 1. RESET Y ESTRUCTURA BASE PARA AMBOS BOTONES */
body.woocommerce ul.products li.product a.boton-merch-wireframe,
body.woocommerce div.product form.cart button.single_add_to_cart_button {
    all: unset !important;
    position: relative !important;
    isolation: isolate !important; /* EL TRUCO: Mantiene el fondo por detrás pero la letra visible */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important; /* El hueco exacto a la izquierda para el círculo */
    border-radius: 100px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    background: transparent !important;
    
    /* Tipografía */
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: #000 !important; /* Texto negro inicial */
    text-transform: lowercase !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

/* 2. POSICIÓN EN LA TIENDA (Centrado abajo) */
body.woocommerce ul.products li.product a.boton-merch-wireframe {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
}

/* 3. POSICIÓN EN EL SINGLE PRODUCT */
body.woocommerce div.product form.cart button.single_add_to_cart_button {
    margin: 20px 0 !important;
    width: fit-content !important;
}

/* 4. EL CÍRCULO NEGRO CON LA FLECHA BLANCA (Capa ::before) */
body.woocommerce ul.products li.product a.boton-merch-wireframe::before,
body.woocommerce div.product form.cart button.single_add_to_cart_button::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 46px !important; /* Empieza como un círculo cerrado */
    background-color: #000 !important; /* Fondo negro sólido (Adiós caras raras) */
    
    /* Dibuja tu flecha oficial con SVG puro (Adiós iconos de Astra) */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left 11px center !important; /* Clavado en el centro del círculo inicial */
    background-size: 24px !important;
    
    border-radius: 100px !important;
    z-index: -1 !important; /* Se esconde debajo del texto */
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    display: block !important;
}

/* 5. EL RASTRO PINCELADA EN HOVER (Capa ::after) */
body.woocommerce ul.products li.product a.boton-merch-wireframe::after,
body.woocommerce div.product form.cart button.single_add_to_cart_button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease 0.4s !important;
    pointer-events: none !important;
}

/* 6. EFECTOS AL PASAR EL RATÓN (La Magia) */
/* El círculo inunda el botón */
body.woocommerce ul.products li.product a.boton-merch-wireframe:hover::before,
body.woocommerce div.product form.cart button.single_add_to_cart_button:hover::before {
    width: 100% !important;
}

/* El texto cambia a blanco para leerse */
body.woocommerce ul.products li.product a.boton-merch-wireframe:hover,
body.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    color: #fff !important;
}

/* Aparece la textura de pincel */
body.woocommerce ul.products li.product a.boton-merch-wireframe:hover::after,
body.woocommerce div.product form.cart button.single_add_to_cart_button:hover::after {
    opacity: 1 !important;
}

/* 7. MATAMOS CUALQUIER ICONO FANTASMA RESIDUAL */
body.woocommerce ul.products li.product a.boton-merch-wireframe i,
body.woocommerce ul.products li.product a.boton-merch-wireframe span.icono-flecha,
body.woocommerce div.product form.cart button.single_add_to_cart_button i {
    display: none !important;
}
/* ============================================================
   REPARACIÓN EXCLUSIVA: BOTÓN SINGLE PRODUCT
   ============================================================ */

/* 1. Asegurar que el botón tenga el hueco y la estructura correcta */
.single-product button.single_add_to_cart_button.button {
    all: unset !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 46px !important;
    padding: 0 24px 0 60px !important; /* Hueco para el círculo */
    margin: 20px 0 !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    isolation: isolate !important; /* Mantiene las capas en orden */
    background: transparent !important;
    
    /* Texto */
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: #000 !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease !important;
}

/* 2. DIBUJAR EL CÍRCULO NEGRO (Obligamos a que aparezca) */
.single-product button.single_add_to_cart_button.button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 46px !important; /* Círculo inicial */
    background-color: #000 !important;
    
    /* Metemos la flecha blanca directamente por código */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px !important;
    
    border-radius: 100px !important;
    z-index: -1 !important; /* Detrás del texto */
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

/* 3. EFECTO HOVER: Expansión y cambio de color */
.single-product button.single_add_to_cart_button.button:hover::before {
    width: 100% !important; /* El negro llena el botón */
}

.single-product button.single_add_to_cart_button.button:hover {
    color: #fff !important; /* Texto blanco sobre negro */
}

/* 4. LA PINCELADA (Opcional, si quieres el rastro de la web) */
.single-product button.single_add_to_cart_button.button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/04/hoverboton.png') no-repeat center / cover !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease 0.4s !important;
    pointer-events: none !important;
}

.single-product button.single_add_to_cart_button.button:hover::after {
    opacity: 1 !important;
}
/* 1. Header (Manténlo como lo tenías, funciona bien) */
.marquee-img {
    height: 35px !important;
    width: auto !important;
    margin: 0 40px !important;
    object-fit: contain !important;
    max-width: none !important;
    display: inline-block !important;
}

/* 2. Marquesina Fashion 2 (Método Fondo Infinito) */
.f2-marquee-infinite {
    width: 100% !important;
    height: 40px !important;
    overflow: hidden !important;
    position: relative !important;
    
    /* Imagen y patrón */
  background-image: url('https://fdiha.org/wp-content/uploads/2026/05/marquesinaletras.png') !important;
    background-repeat: repeat-x !important;
    background-size: contain !important; /* CAMBIO: Evita que el navegador estire el píxel */
    image-rendering: pixelated !important; /* FUERZA: Mantiene los bordes definidos */
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    
    /* Animación: ajusta los 120s para la velocidad */
    animation: fdiha-bucle-infinito 40s linear infinite !important;
}

/* 3. La clave: mover el fondo exactamente el ancho de tu imagen (1729px) */
@keyframes fdiha-bucle-infinito {
    0% { background-position: 0 0; }
    100% { background-position: -1729px 0; } 
}

/* Previene el scroll horizontal */
body { overflow-x: hidden !important; }
/* ============================================================
   FORZAR VISIBILIDAD DEL BOTÓN DONA EN SINGLE PRODUCT
   ============================================================ */

/* 1. Asegurar que el botón dona siempre sea visible */
.single-product .header-right .boton-fdiha-nuevo {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Si el header-right está colapsado, darle espacio */
.single-product .fdiha-header .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 20px !important;
}

/* 3. Ajustar el margen del botón dona en single product */
.single-product .header-right .boton-fdiha-nuevo {
    margin-left: 0 !important;
}

/* ============================================================
   SELLAR HUECOS BLANCOS: CARRITO Y CHECKOUT
   ============================================================ */

/* === CARRITO === */
.woocommerce-cart {
    padding-top: 100px !important;
}

.woocommerce-cart #primary,
.woocommerce-cart .content-area,
.woocommerce-cart .site-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Header pegado arriba */
.woocommerce-cart .fdiha-header-tienda-container {
    margin-bottom: -2px !important;
}

/* Contenido del carrito sin gap */
.woocommerce-cart .woocommerce-cart-form {
    margin-top: -2px !important;
}

/* Shortcodes pegados */
.woocommerce-cart .fdiha-after-cart-sections {
    margin-top: -3px !important;
    margin-bottom: 0 !important;
}

/* === CHECKOUT === */
.woocommerce-checkout {
    padding-top: 100px !important;
}

.woocommerce-checkout #primary,
.woocommerce-checkout .content-area,
.woocommerce-checkout .site-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Header pegado */
.woocommerce-checkout .fdiha-header-tienda-container {
    margin-bottom: -2px !important;
}

/* Formulario sin gap */
.woocommerce-checkout .woocommerce-checkout-form {
    margin-top: -2px !important;
}

/* Shortcodes pegados */
.woocommerce-checkout .fdiha-after-checkout-sections {
    margin-top: -3px !important;
    margin-bottom: 0 !important;
}

/* === AMBOS === */
.woocommerce-cart .ast-container,
.woocommerce-checkout .ast-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* ============================================================
   OCULTAR TÍTULOS "CARRITO" Y "FINALIZAR COMPRA"
   ============================================================ */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title {
    display: none !important;
}
/* ============================================================
   ELIMINAR HUECO DEL TÍTULO EN CHECKOUT
   ============================================================ */

/* Ocultar el contenedor del título */
.woocommerce-checkout .entry-header,
.woocommerce-checkout header.entry-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Asegurar que no quede margen superior */
.woocommerce-checkout .woocommerce {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Formulario pegado arriba */
.woocommerce-checkout form.checkout {
    margin-top: -2px !important;
}
/* ============================================================
   CHECKOUT: PEGAR HEADER ARRIBA DEL TODO
   ============================================================ */

/* 1. Quitar padding superior del body en checkout */
.woocommerce-checkout .site,
.woocommerce-checkout #page {
    padding-top: 0 !important;
}

/* 2. El header pegado al tope */
.woocommerce-checkout .fdiha-header-tienda-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Contenedor principal sin espacio arriba */
.woocommerce-checkout .site-content {
    margin-top: 0 !important;
    padding-top: 100px !important; /* Solo espacio para el header sticky */
}

/* 4. Primary sin margen */
.woocommerce-checkout #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 5. Article sin margen */
.woocommerce-checkout article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ============================================================
   CARRITO Y CHECKOUT: PEGAR HEADER ARRIBA
   ============================================================ */

/* 1. Quitar padding superior en ambas páginas */
.woocommerce-cart .site,
.woocommerce-checkout .site,
.woocommerce-cart #page,
.woocommerce-checkout #page {
    padding-top: 0 !important;
}

/* 2. Contenedor principal con espacio para header sticky */
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content {
    margin-top: 0 !important;
    padding-top: 100px !important; /* Espacio para el header fijo */
}

/* 3. Header pegado arriba */
.woocommerce-cart .fdiha-header-tienda-container,
.woocommerce-checkout .fdiha-header-tienda-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* 4. Primary sin margen */
.woocommerce-cart #primary,
.woocommerce-checkout #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 5. Contenido pegado al header */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    margin-top: -2px !important;
}

/* 6. Shortcodes pegados abajo */
.woocommerce-cart .fdiha-after-cart-sections,
.woocommerce-checkout .fdiha-after-checkout-sections {
    margin-top: -3px !important;
}
.fdiha-header-tienda-container {
    background-size: 100% 100% !important; /* Ajuste exacto al contenedor */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}


/* ============================================================
   FIX MARQUESINAS: ANIMACIONES COMPLETAS CON NOMBRES CORRECTOS
   ============================================================ */

/* La pista del header */
.fdiha-header .marquee-text {
    animation: fdiha-scroll 60s linear infinite !important;
}

/* La pista de Fashion/Kontakt */
.fk-marquee-inner {
    animation: fk-scroll 200s linear infinite !important;
}
/* La pista de Fashion Details */
.fd-marquee-inner {
    animation: fd-scroll 200s linear infinite !important;
}

/* La pista fd2 */
.fd2-marquee-inner {
    animation: fd2-scroll 200s linear infinite !important;
}

/* La pista f2 */
.f2-marquee-track {
    animation: f2-scroll 60s linear infinite !important;
}

/* La pista solo */
.mq-solo-track {
    animation: mq-solo-scroll 60s linear infinite !important;
}

/* Imágenes de las marquesinas - Calidad nativa */
.fk-marquee-img,
.fd-marquee-img,
.fd2-marquee-img,
.fdiha-header .marquee-img,
.f2-img-nativa {
    max-width: none !important; 
    width: auto !important;
    height: 44px !important; /* ALTURA ORIGINAL */
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 10px !important;
    image-rendering: auto !important; 
    image-rendering: high-quality !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    transform: translate3d(0, 0, 0) scale(1.0001) !important; /* Truco: escala microscópica fuerza re-render nítido */
    backface-visibility: hidden !important;
}

/* Alturas específicas */
.fdiha-header .marquee-img,
.f2-img-nativa {
    height: 50px !important;
}

@media (max-width: 900px) {
    .fdiha-header .marquee-text {
        animation: fdiha-scroll 80s linear infinite !important;
    }
    .fk-marquee-inner {
        animation: fk-scroll 100s linear infinite !important;
    }
    .fd-marquee-inner {
        animation: fd-scroll 200s linear infinite !important;
    }
    .fd2-marquee-inner {
        animation: fd2-scroll 80s linear infinite !important;
    }
    .f2-marquee-track {
        animation: f2-scroll 80s linear infinite !important;
    }
    .mq-solo-track {
        animation: mq-solo-scroll 80s linear infinite !important;
    }
}

/* ============================================================
   2. FIX: ELIMINAR HUECOS EN PRODUCTO, CARRITO Y FINALIZAR COMPRA
   ============================================================ */

/* Limpieza de márgenes en PC para todas las páginas de tienda */
body.single-product .ht-wrap,
body.single-product .fdiha-header-tienda-container,
body.single-product #content.site-content,
body.single-product #primary,
body.single-product .ast-container,
.woocommerce-cart .ht-wrap,
.woocommerce-checkout .ht-wrap,
.woocommerce-cart .fdiha-header-tienda-container,
.woocommerce-checkout .fdiha-header-tienda-container,
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-cart .ast-container,
.woocommerce-checkout .ast-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.woocommerce-cart, 
body.woocommerce-checkout {
    padding-top: 100px !important; 
}

/* Ajustes de 80px para Móvil (Tapando huecos) */
@media (max-width: 900px) {
    body.single-product,
    body.woocommerce-cart, 
    body.woocommerce-checkout {
        padding-top: 80px !important; 
    }
    
    body.single-product .ht-wrap,
    body.single-product .fdiha-header-tienda-container,
    body.single-product div#content.site-content,
    body.single-product #primary,
    body.single-product .ast-container,
    .woocommerce-cart .site-content,
    .woocommerce-checkout .site-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* ============================================================
   REEMPLAZAR TEXTO "CARRITO" POR ICONO (VERSIÓN FUERTE)
   ============================================================ */

.fdiha-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 50px !important; /* Espacio fijo para el icono */
    height: 50px !important;
    overflow: hidden !important;
    text-indent: -9999px !important; /* Empuja el texto fuera de la vista */
    color: transparent !important; /* Hace el texto invisible */
    font-size: 0 !important;
}

/* La imagen del carrito */
.fdiha-cart-link::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/05/iconocarrito.png') no-repeat center / contain !important;
    text-indent: 0 !important; /* Resetea para que la imagen se vea */
}

/* Ocultar cualquier texto hijo */
.fdiha-cart-link span,
.fdiha-cart-link .cart-count {
    display: none !important;
}
/* ============================================================
   CENTRAR ICONO CARRITO ENTRE BOTONES (DESKTOP)
   ============================================================ */

@media (min-width: 769px) {
    .fdiha-cart-link {
        margin: 0 20px !important; /* Espacio igual a izquierda y derecha */
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* Si necesitas más separación, aumenta estos valores */
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important; /* Espacio uniforme entre todos los elementos */
    }
}

/* ============================================================
   COLOR BOTONES: CARRITO Y CHECKOUT (Amarillo verdoso)
   ============================================================ */

/* Botones del carrito */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .checkout-button,
.woocommerce-cart input[type="submit"],
.woocommerce-cart button[type="submit"] {
    background-color: rgba(239, 255, 190, 1) !important;
    color: #000 !important; /* Texto negro para contraste */
    border: 1px solid #000 !important;
}

/* Botones del checkout */
.woocommerce-checkout button[type="submit"],
.woocommerce-checkout input[type="submit"],
.woocommerce-checkout #place_order {
    background-color: rgba(239, 255, 190, 1) !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

/* Hover (opcional - un poco más oscuro) */
.woocommerce-cart button:hover,
.woocommerce-checkout button:hover {
    background-color: rgba(220, 240, 160, 1) !important;
}
/* ============================================================
   LES FDIHA'T - IMÁGENES GRANDES CENTRADAS CON FONDO
   ============================================================ */

/* Estilo común para todas las secciones */
.lesfdihat-section {
    position: relative !important;
    width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/05/fondoletraslesfdihat-scaled.png') repeat !important;
    background-size: cover !important;
}

/* Imágenes de personajes */
.lesfdihat-character {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
    display: block !important;
    z-index: 10 !important;
}

/* Kleo (1600px) */
#lesfdihat-kleo-wrap {
    height: 1600px !important;
}

/* Bad (1300px) */
#lesfdihat-bad-wrap {
    height: 1300px !important;
}

/* Zubia (1300px) */
#lesfdihat-zubia-wrap {
    height: 1300px !important;
}

/* Spacer de 300px */
.lesfdihat-spacer {
    height: 300px !important;
    width: 100% !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/05/fondoletraslesfdihat-scaled.png') repeat !important;
    background-size: cover !important;
}

/* Móvil */
@media (max-width: 768px) {
    #lesfdihat-kleo-wrap { height: 800px !important; }
    #lesfdihat-bad-wrap { height: 700px !important; }
    #lesfdihat-zubia-wrap { height: 700px !important; }
    .lesfdihat-spacer { height: 100px !important; }
}
/* ============================================================
   LES FDIHA'T - RESPONSIVE TOTAL
   ============================================================ */

/* Estilo común para todas las secciones */
.lesfdihat-section {
    position: relative !important;
    width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/05/fondoletraslesfdihat-scaled.png') repeat !important;
    background-size: cover !important;
}

/* Imágenes de personajes */
.lesfdihat-character {
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    z-index: 10 !important;
}

/* === DESKTOP (Por defecto) === */
#lesfdihat-kleo-wrap {
    height: 1600px !important;
}

#lesfdihat-bad-wrap {
    height: 1300px !important;
}

#lesfdihat-zubia-wrap {
    height: 1300px !important;
}

.lesfdihat-spacer {
    height: 300px !important;
    width: 100% !important;
    background: url('https://fdiha.org/wp-content/uploads/2026/05/fondoletraslesfdihat-scaled.png') repeat !important;
    background-size: cover !important;
}

/* === TABLETS (768px - 1024px) === */
@media (max-width: 1024px) {
    #lesfdihat-kleo-wrap {
        height: 1200px !important;
    }

    #lesfdihat-bad-wrap {
        height: 1000px !important;
    }

    #lesfdihat-zubia-wrap {
        height: 1000px !important;
    }

    .lesfdihat-spacer {
        height: 200px !important;
    }

    .lesfdihat-character {
        max-width: 85% !important;
        max-height: 85% !important;
    }
}

/* === MÓVIL GRANDE (481px - 768px) === */
@media (max-width: 768px) {
    #lesfdihat-kleo-wrap {
        height: 900px !important;
    }

    #lesfdihat-bad-wrap {
        height: 750px !important;
    }

    #lesfdihat-zubia-wrap {
        height: 750px !important;
    }

    .lesfdihat-spacer {
        height: 150px !important;
    }

    .lesfdihat-character {
        max-width: 95% !important;
        max-height: 95% !important;
    }
}

/* === MÓVIL PEQUEÑO (hasta 480px) === */
@media (max-width: 480px) {
    #lesfdihat-kleo-wrap {
        height: 600px !important;
    }

    #lesfdihat-bad-wrap {
        height: 500px !important;
    }

    #lesfdihat-zubia-wrap {
        height: 500px !important;
    }

    .lesfdihat-spacer {
        height: 80px !important;
    }

    .lesfdihat-character {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}
/* ============================================================
   HEADER MÓVIL - MARQUESINA OCUPA TODO (VERSIÓN NUCLEAR)
   ============================================================ */

@media (max-width: 768px) {
    
    /* DESTRUIR COMPLETAMENTE EL HEADER-RIGHT */
    .fdiha-header .header-right,
    header.fdiha-header .header-right,
    .fdiha-header .header-right * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* MARQUESINA MÁS PEQUEÑA */
    .fdiha-header .marquee-img,
    .fdiha-header .marquee-text img {
        height: 28px !important;
    }
    
    /* LA MARQUESINA OCUPA TODO EL ESPACIO DISPONIBLE */
    .fdiha-header .header-center,
    header.fdiha-header .header-center {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-right: none !important;
        border-left: none !important;
    }
    
    .marquee-text-container {
        width: 100% !important;
    }
    
    /* EL HEADER SOLO TIENE 2 COLUMNAS EN MÓVIL */
    header.fdiha-header,
    .fdiha-header {
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    /* ============================================================
       IDIOMAS Y CARRITO EN EL MENÚ MÓVIL
       ============================================================ */
    
    .menu-idiomas-mobile-only {
        display: flex !important;
        flex-direction: column !important;
        border-top: 3px solid #000 !important;
        margin-top: auto !important;
        padding-top: 0 !important;
    }
    
    .menu-idiomas-mobile-only a {
        font-size: 1.1rem !important;
        min-height: 45px !important;
    }
    
    .fdiha-menu-panel .menu-cart-mobile {
        background: rgba(239, 255, 190, 0.3) !important;
        font-weight: 900 !important;
    }
}

/* OCULTAR IDIOMAS/CARRITO DEL MENÚ EN DESKTOP */
@media (min-width: 769px) {
    .menu-idiomas-mobile-only {
        display: none !important;
    }
}
/* ============================================================
   TIENDA MÓVIL: UNA SOLA COLUMNA (Productos uno encima del otro)
   ============================================================ */

@media (max-width: 768px) {
    
    /* Forzar grid de 1 columna */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 40px 0 !important; /* Espacio vertical entre productos */
        width: 100% !important;
        padding: 0 15px !important; /* Margen lateral */
    }
    
    /* Cada producto ocupa el 100% del ancho */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding-bottom: 80px !important; /* Espacio para precio y botón */
    }
    
    /* Imagen del producto centrada */
    .woocommerce ul.products li.product .woocommerce-loop-product__link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .woocommerce ul.products li.product img {
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    /* Título centrado */
    .woocommerce ul.products li.product .fdiha-titulo-forzado,
    .woocommerce ul.products li.product h2 {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Precio centrado debajo */
    .woocommerce ul.products li.product .price {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        text-align: center !important;
        width: 100% !important;
        margin: 10px 0 15px 0 !important;
    }
    
    /* Botón centrado */
    .woocommerce ul.products li.product .boton-merch-wireframe {
        position: relative !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        margin-top: 15px !important;
    }
}

/* Tablets (hasta 1024px) - 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

/* ============================================================
   FIX SAFARI: Optimizaciones de rendering
   ============================================================ */

/* Ayudar a Safari con las transformaciones */
#proyectos-track,
.proyecto-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Prevenir reflows en Safari móvil */
@supports (-webkit-touch-callout: none) {
    /* Solo Safari */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Estabilizar height en Safari iOS */
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}
/* ============================================================
   ANIQUILADOR DE FONDO GRIS - PLUGIN DRAW ATTENTION (KLEO)
   ============================================================ */
#lesfdihat-kleo-wrap .leaflet-container,
#lesfdihat-kleo-wrap .hotspots-container,
#lesfdihat-kleo-wrap .hotspots-image-container,
#lesfdihat-kleo-wrap .da-image-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}
/* FIX: KLEO - ESPACIO PARA EL HEADER */
#lesfdihat-kleo-wrap {
    padding-top: 100px !important;
    height: 1700px !important; /* 1600 + 100 para compensar el padding */
    box-sizing: border-box !important;
}

/* El contenedor interno del plugin también baja */
#lesfdihat-kleo-wrap .da-image-wrapper,
#lesfdihat-kleo-wrap .hotspots-image-container {
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
}

@media (max-width: 768px) {
    #lesfdihat-kleo-wrap {
        padding-top: 65px !important;
        height: auto !important;
        min-height: 900px !important;
    }
}
/* ============================================================
   FIX LESFDIHAT: KLEO VISIBLE + ESPACIADO
   ============================================================ */

#lesfdihat-kleo-wrap {
    height: 1600px !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

.hotspot-tooltip {
    display: none !important;
    visibility: hidden !important;
}
/* Draw Attention - ocultar tooltips en las 3 secciones */
#lesfdihat-kleo-wrap .da-tooltip,
#lesfdihat-bad-wrap .da-tooltip,
#lesfdihat-zubia-wrap .da-tooltip,
#lesfdihat-kleo-wrap .da-spot-tooltip,
#lesfdihat-bad-wrap .da-spot-tooltip,
#lesfdihat-zubia-wrap .da-spot-tooltip,
#lesfdihat-kleo-wrap .da-hotspot-content,
#lesfdihat-bad-wrap .da-hotspot-content,
#lesfdihat-zubia-wrap .da-hotspot-content,
#lesfdihat-kleo-wrap .da-description,
#lesfdihat-bad-wrap .da-description,
#lesfdihat-zubia-wrap .da-description,
#lesfdihat-kleo-wrap [class*="tooltip"],
#lesfdihat-bad-wrap [class*="tooltip"],
#lesfdihat-zubia-wrap [class*="tooltip"],
#lesfdihat-kleo-wrap .leaflet-popup,
#lesfdihat-bad-wrap .leaflet-popup,
#lesfdihat-zubia-wrap .leaflet-popup,
#lesfdihat-kleo-wrap .leaflet-popup-content-wrapper,
#lesfdihat-bad-wrap .leaflet-popup-content-wrapper,
#lesfdihat-zubia-wrap .leaflet-popup-content-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* TÍTULO DENTRO DE LA SECCIÓN */
#lesfdihat-kleo-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#lesfdihat-titulo-img {
    position: relative !important;
    z-index: 50 !important;
    width: 60% !important;
    max-width: 700px !important;
    height: auto !important;
    margin: 40px auto 20px auto !important;
    display: block !important;
}

@media (max-width: 768px) {
    #lesfdihat-titulo-img {
        width: 85% !important;
    }
}
#lesfdihat-titulo-img {
    width: 35% !important;
    max-width: 400px !important;
}
#lesfdihat-kleo-wrap {
    height: 1800px !important;
    min-height: 1800px !important;
}

@media (max-width: 768px) {
    #lesfdihat-kleo-wrap {
        height: auto !important;
        min-height: 900px !important;
    }
}
#lesfdihat-kleo-wrap {
    height: 1800px !important;
    min-height: 1800px !important;
    padding-bottom: 80px !important;
}
#lesfdihat-kleo-wrap .da-wrap,
#lesfdihat-kleo-wrap .da-image-wrap,
#lesfdihat-kleo-wrap [class*="da-"],
#lesfdihat-kleo-wrap > div:not(#lesfdihat-titulo-img) {
    flex: 1 !important;
    width: 100% !important;
    min-height: 800px !important;
}
@media (min-width: 769px) {
    #lesfdihat-kleo-wrap {
        padding-bottom: 80px !important;
    }
}

@media (max-width: 768px) {
    #lesfdihat-kleo-wrap {
        padding-bottom: 0 !important;
    }
}
/* ============================================================
   LES FDIHA'T - RELLENO INTERNO (DENTRO DEL FONDO)
   ============================================================ */
#lesfdihat-kleo-wrap {
    height: 2300px !important;  /* 1800 + 250 arriba + 250 abajo */
    min-height: 2300px !important;
}

#lesfdihat-bad-wrap {
    height: 1800px !important;  /* 1300 + 250 arriba + 250 abajo */
    min-height: 1800px !important;
}

#lesfdihat-zubia-wrap {
    height: 1800px !important;  /* 1300 + 250 arriba + 250 abajo */
    min-height: 1800px !important;
}
/* ============================================================
   TIENDA: SIN ESPACIOS ENTRE PRODUCTOS
   ============================================================ */
.woocommerce ul.products {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    border: 1px solid #000 !important;
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        margin: 0 !important;
    }
}

/* ============================================================
   SWATCHES: FUNCIONALES, CERO EFECTOS VISUALES
   ============================================================ */

/* Contenedor de opciones */
.wpcvs-terms,
.single-product .wpcvs-terms {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}

/* CÍRCULOS DE COLOR — solo el color, sin nada más */
.wpcvs-term-color,
.single-product .wpcvs-term-color {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid #000 !important;
    cursor: pointer !important;
    display: inline-block !important;
    /* Sin ningún efecto */
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Seleccionado: solo un borde más grueso */
.wpcvs-term-color.wpcvs-term-active,
.single-product .wpcvs-term-color.wpcvs-term-active {
    border: 3px solid #000 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Hover: nada */
.wpcvs-term-color:hover,
.single-product .wpcvs-term-color:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* TALLAS — caja plana sin efectos */
.wpcvs-term:not(.wpcvs-term-color),
.single-product .wpcvs-term:not(.wpcvs-term-color) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    /* Sin efectos */
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Seleccionada: negro con texto blanco, sin animación */
.wpcvs-term:not(.wpcvs-term-color).wpcvs-term-active,
.single-product .wpcvs-term:not(.wpcvs-term-color).wpcvs-term-active {
    background: #000 !important;
    color: #fff !important;
    transform: none !important;
}

/* Hover talla: nada */
.wpcvs-term:not(.wpcvs-term-color):hover,
.single-product .wpcvs-term:not(.wpcvs-term-color):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* QUITAR TOOLTIPS FLOTANTES */
.tippy-box,
.tippy-content,
.wpcvs-tippy-tooltip,
[class*="tippy"],
[data-tippy-content] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ocultar el texto interno del span dentro del círculo */
.wpcvs-term-color > span {
    display: none !important;
}
/* ============================================================
   SWATCHES VISIBLES — SIN CUADROS, DESPLAZADOS 30PX
   ============================================================ */
.wpcvs-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin-left: 30px !important;
}

.wpcvs-terms {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.wpcvs-term {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Círculos de color — sin cambios */
.wpcvs-term-color {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid #000 !important;
    cursor: pointer !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.wpcvs-term-color.wpcvs-term-active {
    border: 3px solid #000 !important;
}

/* Tallas — SIN cuadro, solo texto */
.wpcvs-term:not(.wpcvs-term-color) {
    padding: 4px 8px !important;
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: none !important;
}

/* Talla seleccionada — solo subrayado, sin caja */
.wpcvs-term:not(.wpcvs-term-color).wpcvs-term-active {
    background: transparent !important;
    color: #000 !important;
    text-decoration: underline !important;
}

[class*="tippy"] {
    display: none !important;
}

.wpcvs-tippy-tooltip {
    display: none !important;
}
/* QUITAR HUECO BLANCO TIENDA */
.woocommerce-page #primary,
.woocommerce-page .site-content,
.woocommerce-page #content,
.woocommerce-page .ast-container,
.woocommerce-page .entry-content {
    background-color: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.woocommerce-page ul.products {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ht-wrap {
    margin-bottom: 0 !important;
}
.woocommerce-page {
    background-color: #fff !important;
}

.woocommerce-page .ast-plain-container {
    background-color: #fff !important;
    padding-top: 0 !important;
}
.woocommerce-page main#main.site-main {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-page .ast-woocommerce-container {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-page .woocommerce-products-header {
    display: none !important;
}

.woocommerce-page .woocommerce-notices-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
main#main {
    margin: 0 !important;
    padding: 0 !important;
}

#main.site-main {
    margin: 0 !important;
    padding: 0 !important;
}

.site-main {
    margin: 0 !important;
    padding: 0 !important;
}
.ht-wrap + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hfeed {
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-element-905609a {
    margin-top: -55px !important;
}
/* FIX BOTÓN PÍDELO EN SHORTCODE [products] */
.woocommerce .boton-merch-wireframe {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    isolation: isolate !important;
}
/* ============================================================
   FIX PÍDELO EN SHORTCODE — CÍRCULO NEGRO DIRECTO
   ============================================================ */
a.boton-merch-wireframe {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 24px 0 58px !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900 !important;
    font-style: italic !important;
    transition: color 0.3s ease !important;
}

a.boton-merch-wireframe::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 46px !important;
    background-color: #000 !important;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px !important;
    border-radius: 100px !important;
    z-index: -1 !important;
    transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

a.boton-merch-wireframe:hover::before {
    width: 100% !important;
}

a.boton-merch-wireframe:hover {
    color: #fff !important;
}
/* CONTENIDO PRODUCTO: DESPLAZADO A LA DERECHA */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .fdiha-titulo-forzado,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .wpcvs-wrapper,
.woocommerce ul.products li.product .boton-merch-wireframe {
    margin-left: 30px !important;
}
.woocommerce ul.products li.product .wpcvs-terms,
.woocommerce ul.products li.product .wpcvs-term,
.woocommerce ul.products li.product .variations_form,
.woocommerce ul.products li.product .wpcvs-wrapper {
    margin-left: 30px !important;
    padding-left: 0 !important;
}
/* FOTO PEGADA AL BORDE, TEXTO DESPLAZADO */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* TÍTULO: 10px más a la derecha */
.woocommerce ul.products li.product .fdiha-titulo-forzado {
    margin-left: 40px !important;
}

/* PRECIO, TALLAS, COLORES Y BOTÓN: 10px a la izquierda */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .wpcvs-wrapper,
.woocommerce ul.products li.product .wpcvs-terms,
.woocommerce ul.products li.product .variations_form,
.woocommerce ul.products li.product .boton-merch-wireframe {
    margin-left: 20px !important;
}
/* MOSTRAR PRECIO EN LA TIENDA */
.woocommerce ul.products li.product .price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin: 10px 0 10px 40px !important;
}
.woocommerce ul.products li.product .wpcvs-wrapper,
.woocommerce ul.products li.product .wpcvs-terms,
.woocommerce ul.products li.product .variations_form {
    margin-left: 10px !important;
}
@media (max-width: 768px) {
    .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* HOVER PRODUCTO TIENDA — FONDO AMARILLO */
.woocommerce ul.products li.product {
    transition: background-color 0.3s ease !important;
}

.woocommerce ul.products li.product:hover {
    background-color: #efffbd !important;
}
.woocommerce ul.products {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

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

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}
.ast-archive-entry-banner {
    display: none !important;
}
@media (max-width: 768px) {
    /* QUITAR HUECO ENTRE SECCIONES */
    #lesfdihat-bad-wrap,
    #lesfdihat-zubia-wrap,
    #lesfdihat-kleo-wrap {
        margin: 40px 0 !important;
    }

    /* CUADRADOS AMARILLOS MÁS GRANDES Y VISIBLES */
    .lesfdihat-ig-bad {
        width: 15% !important;
        height: 8% !important;
        background: rgba(239, 255, 0, 0.8) !important;
    }

    .lesfdihat-ig-zubia {
        width: 12% !important;
        height: 7% !important;
        background: rgba(239, 255, 0, 0.8) !important;
    }
}