/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Description:  Tema hijo para mis personalizaciones de PHP y SCF.
 Version:      3.0
*/

@layer fuentes{
    /* merriweather-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fuentes-mp-2026/merriweather-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('/wp-content/uploads/fuentes-mp-2026/merriweather-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/uploads/fuentes-mp-2026/merriweather-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/uploads/fuentes-mp-2026/merriweather-v33-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fuentes-mp-2026/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('/wp-content/uploads/fuentes-mp-2026/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/uploads/fuentes-mp-2026/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/uploads/fuentes-mp-2026/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

}
@layer global {
*, *::before, *::after {box-sizing:border-box}

body {margin:0;
    font-family: 'Montserrat', sans-serif;
    position: relative;}

img {max-width:100%;
height: auto;}

h1,h2,h3{margin:0; line-height: 1.2; font-family: 'Merriweather', serif;}
p{line-height: 1.3;}

a {text-decoration: none;}

header ul{margin:0; padding:0;
li {list-style-type: none;}}
}
@layer layout{
    .wrapper {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;    }
    .section-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
@layer colores{
    :root{
        --mp-azul: #224070;
        --mp-azul-o: #0F1732;
        --mp-amarillo: #ffbf00;
        --mp-texto: #030303;
        --mp-texto-2: #484848;
        --mp-fondo-claro:rgba(245, 245, 245, 0.5);

         /* Definimos los tonos del oro */
            --gold-light: #f9d976;
            --gold-mid: #f39c12;
            --gold-dark: #b8860b;
    
        /* Guardamos el gradiente completo en una variable */
        --gold-gradient: linear-gradient(45deg, var(--gold-dark), var(--gold-mid), var(--gold-light), var(--gold-mid), var(--gold-dark));
    }
}
@layer efectos{
    :root{
        --hover-color: all 0.3s ease;
        --mp-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    /* Clase base que prepara el elemento */
.hover-float {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block; /* Importante para que el transform funcione bien */
}

/* El efecto al pasar el mouse */
.hover-float:hover {
    transform: translateY(-5px); /* Flota 5 píxeles hacia arriba */
}

/* El efecto al hacer clic (opcional pero recomendado) */
.hover-float:active {
    transform: translateY(-2px); /* Baja un poquito al presionar */
}
}
@layer header{

.top-header {
    background-color: var(--mp-azul);   
}
.top-header-container {
    display: flex;
    justify-content: center;
    padding: 10px 10px;
}
.top-header-container span {
    color: white;
    font-size: 1rem;
}
.header {background-color: white;
position: sticky;
top: 0;
z-index: 100;}

.header-container {
    display: flex;         
    align-items: center;   
    justify-content: space-between; 
    padding: 10px 0;
    height: auto;
    gap: 1rem;
}

.header-logo-container {width: 150px;}

.header-menu{
    flex-grow: 1;
    display: flex;   /* Nos permite alinear lo que hay dentro */
    justify-content: center; /* Centra el menú (ul) dentro del espacio ganado */
    align-items: center;}

.header-menu-container {
    width: 100%;
    display: flex;
    list-style: none;      /* Quita los puntos de la lista */
    gap: 20px;             /* Separa los links entre sí */
    justify-content: center;
}

.header-menu-link,.menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.header-menu-link a, 
.menu-cta a
{
    color: var(--mp-azul);
    font-size: 15px;
    font-weight: 600;
    padding: 1rem;
    transition: var(--hover-color);
}

.header-menu-link a:hover {
    /* orden: [tipo] [color] [grosor] */
    text-decoration: underline var(--mp-azul) 1px;
    text-underline-offset: 5px;
}

.menu-cta a{
background-color: var(--mp-azul);
padding:  0.5rem 1rem 0.5rem;
border-radius: 8px;
color: var(--mp-amarillo) !important;
}
.menu-cta a:hover {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul) !important;
    text-decoration: none !important;
}

.header-menu-iconos-container {
    display: flex;
    flex-wrap: wrap;
    
    gap:20px;
    position: relative;
    z-index: 9999;
}

.header-menu-icon-link {
    transition: var(--hover-color);
    padding: 0.5rem;
    border-radius: 8px;
    fill: var(--mp-azul);
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
}

.header-menu-icon-link:hover {
    background-color: var(--mp-azul);
}

.header-menu-icon-link:hover svg {fill: var(--mp-amarillo);}


/*burbuja para cantidad de woocomerce*/
.cart-contents-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--mp-amarillo); /* Tu variable de color */
    color: var(--mp-azul);        /* Tu variable de color */
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(30%, -30%); /* Ajuste fino de posición */
}
/*fin burbuja cantidad woocomerce*/


.header-hamburguesa {
    display:none;
    border-radius: 8px;
    border:none;
    background-color: transparent;
    fill: var(--mp-azul);
}

/*Buscador de productos*/
.buscador-productos-container {
    position: relative; /* Para que el flotante se alinee con el botón */
}
.buscador-productos-florante {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px; /* O el ancho que prefieras */
    z-index: 9999;
    background: #fff;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 4px;
}
.buscador-productos-container.is-active .buscador-productos-florante {
    display: block;
}
.buscador-productos-container.is-active .seach-product {
    background-color: var(--mp-azul); /* Tu estilo de active/hover */
    fill: var(--mp-amarillo); /* Si quieres cambiar el color del SVG */
}


@media (max-width: 768px) {
.top-header-container {padding: 10px 0 10px;}
.header-menu {display:none;}
.header-logo-container {width: 180px;}
.header-hamburguesa {display:block;}
#icono-contacto {display:none;}
.header-container {height: 80px;}
.header-menu-iconos-container {gap: 2px;}
.header-menu-iconos-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;}
}


}
@layer hero-para-cat{

.cat-hero{
    min-height: 300px;
    background-image: 
        linear-gradient(#48484880, #48484880),
        url("/wp-content/uploads/2023/02/62f1797d8677d80018ee69ea.webp");
    background-position: 0px -125px;
    background-size: cover;
}

.cat-hero-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.hero-cat-titulo{
    color:white;
    text-align: center;
    font-size: 40px;
}

.cat-hero-logo {
    max-width: 400px;
}

@media (max-width: 768px) {
    .cat-hero {
        min-height: 100px;
        background-position: 0px 0px;
        padding: 1rem 0 1rem;
    }
    .cat-hero-logo {
        max-width: 70%;
    }
}

}
@layer huincha-hero{
.huincha-hero {
    background-color: var(--mp-amarillo);   
}
.huincha-hero-container {
    display: flex;
    justify-content: center;
    padding: 10px 10px;
    font-family: 'Merriweather', serif;
}
.huincha-hero-container span,
.huincha-hero-container h2 {
    color: var(--ecot-texto);
    font-size: clamp(1rem, 2.5vw + 0.5rem, 1.3rem);
    text-align: center;
    display: inline;
}

.huincha-hero-container a{
    color: var(--ecot-texto);
    text-decoration: underline;
}

.huincha-hero-container a:hover {
    text-decoration: none;
}
}
@layer productos-cat{
.cat-productos {
    background-color: var(--mp-fondo-claro);
}

.cat-productos-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.grid-products {
  --min: 25ch;
  --gap: 1.2rem;

  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

.product-card-1 {
    border-radius: 15px;
    background-color: white;
    overflow: hidden;
    padding: 1rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;

    box-shadow: var(--mp-shadow-soft);
}

.product-card-1-img-container{
    position: relative;
    overflow: hidden;
    height: 300px;
}

.product-card-1-img-container a{
        display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
}

.product-card-1-img-container img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Contenedor de las etiquetas (arriba a la izquierda) */
.product-labels {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

/* Estilo base de los labels */
.product-labels span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

    display: flex;
    justify-content: center;
    gap: 5px;
}

/* Etiqueta de Oferta - Un color que llame la atención */
.label-sale {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul);

    svg{fill: var(--mp-azul); }
}



/* Etiqueta de Destacado - Usando tus azules */
.label-featured {
    background-color: var(--mp-azul-o);
    color: var(--mp-amarillo);
}

.product-card-1-title{
    color: var(--mp-azul-o);
    font-size: 20px;
    flex-grow: 1;
}


.product-card-1-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.product-card-1-cta{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 0 1rem;
    border-radius: 5px;
    transition: var(--hover-color);
}

.product-card-1-cta:hover {
    background-color: var(--mp-azul-o);
}

.product-card-1-price{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* 1. ESTILO PARA EL PRECIO TACHADO (Antiguo) */
.product-card-1-price del {
    color: #888;
    text-decoration: line-through;
    font-size: 0.9em;
    font-weight: 400;
}

/* 2. ESTILO PARA EL PRECIO ACTUAL (Oferta o Normal) */
.product-card-1-price ins, 
.product-card-1-price > .woocommerce-Price-amount {
    color: #224070;
    text-decoration: none; 
    font-weight: 700;
    font-size: 1.2em;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.filtros-orden select {
    font-size: 1.2rem;
    border: none;
    padding: 0.5rem 1rem;
    background-color: white;
    box-shadow: var(--mp-shadow-soft);
    border-radius: 5px;
}  

/*breadcrumb*/

.bc-cat {
    position: relative;

    border-radius: 100px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.woocommerce-breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce-breadcrumb li {
    display: inline;
}

.breadcrumb-separator {

    margin: 0 4px;
}

.woocommerce-breadcrumb a{
    color: var(--ecot-verde-o);
    text-decoration: underline;
}

.woocommerce-breadcrumb a:hover{
    text-decoration: none;
}


}
@layer footer{

footer {
    background: linear-gradient(to bottom, #224070, #0F1732);    color: white;
    padding: 70px 0 70px;
}

footer a{
    color: white;
    text-decoration: underline;
}

footer a:hover{
    text-decoration: none;
}

.footer-container{
    display: flex;
    flex-direction: row;
}

.footer-container > * {
    flex: 1;
}

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.footer-links-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1rem 0 1rem;
}

.footer-links ul{
    list-style: none;
    padding-left: 0;
}

.footer-link{
    padding-bottom: 1rem;
}

.footer-text {
    max-width: 40ch;
}

.footer-icons-container{
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-bottom: 2rem;
}

.footer-icon{padding: 0.5rem; transition: var(--hover-color);}
.footer-icon:hover svg{
fill: var(--mp-amarillo);
}

@media (max-width: 768px) {
    .footer-container, .footer-links-container {
        flex-direction: column;
    }
    .footer-text {text-align: center;}
    .footer-main {align-items: center;}
}

.footer-bottom {
    background-color: white;
    padding: 1rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom span{
    text-align: center;
}

}
@layer menus-submenus {

/* 1. Posicionamiento del padre */
.header-menu-link.menu-item-has-children {
    position: relative; /* Necesario para que el submenú se alinee respecto a este link */
}

/* 2. Estilo del sub-menú (oculto por defecto) */
.sub-menu {
    position: absolute;
    top: 100%; /* Aparece justo debajo del link */
    left: 0;
    background-color: #ffffff;
    min-width: 200px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    border-radius: 4px;
    
    /* Efecto de aparición suave */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

/* 3. El Hover: Mostrar el sub-menú */
.header-menu-link:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 4. Estilos de los links dentro del sub-menú */
.sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--mp-texto);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.sub-menu li a:hover {
    background-color: #f5f5f5;
    color: var(--mp-azul);
}

/* Bonus: Truco del "puente invisible" para que no se cierre al bajar el mouse */
.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px; /* Espacio que rellena el hueco entre el link y el menú */
}

/* 1. Seleccionamos solo los que tienen hijos */
.menu-item-has-children > a::after {
    content: " ▾"; /* Tu flechita o caracter ASCII */
    font-size: 12px;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    vertical-align: middle;
}

/* 2. El color cambia automáticamente con el hover del link */
.header-menu-link:hover > a::after {
    transform: rotate(180deg); /* Opcional: la flechita gira al abrirse */
}

/* 3. Para los sub-menús laterales (Nivel 2) */
/* Queremos que la flechita apunte a la derecha para indicar que abre hacia allá */
.sub-menu .menu-item-has-children > a::after {
    content: " ▸"; 
    float: right; /* La mandamos al final del texto */
}

.sub-menu .menu-item-has-children:hover > a::after {
    transform: rotate(0deg) translateX(3px); /* Pequeño empuje a la derecha */
}
}
@layer menu-mobile-modal{

/* ==========================================================================
   MODAL MOCHILAS PREMIUM - SISTEMA DE NAVEGACIÓN MOBILE (APP STYLE)
   ========================================================================== */

@media (max-width: 991px) {
    /* 1. Contenedor Principal (Dialog) */
    .c-modal {
        border: none;
        padding: 0;
        margin: 0;
        width: 300px;
        max-width: 85vw;
        height: 100dvh;
        min-height: 100dvh;
        max-height: none;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        background-color: var(--mp-azul); 
        color: #ffffff;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out, display 0.4s allow-discrete, overlay 0.4s allow-discrete;
        z-index: 9999;
    }

    .c-modal[open] { transform: translateX(0); }
    
    @starting-style {
        .c-modal[open] { transform: translateX(100%); }
    }
    
    /* 2. Cabecera del Modal */
    .c-modal__content {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: transparent;
    }
    
    .c-modal__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        flex-shrink: 0;
    }
    
    .c-modal__header img { max-width: 140px; height: auto; }
    
    .c-modal__close {
        background: transparent;
        border: none;
        font-size: 2.2rem;
        color: white;
        line-height: 1;
        cursor: pointer;
        padding: 0 0.5rem;
    }

    /* 3. Cuerpo del Modal y Grid de Menú */
    .c-modal__body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem; /* Espaciado interno para que los botones no toquen los bordes */
        -webkit-overflow-scrolling: touch;
    }

    .c-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Regla general: Todos los items ocupan el ancho completo */
    .c-menu-list li {
        grid-column: span 2;
        list-style: none;
    }

    /* Excepción: botones de una fila*/
    .menu-link-1 {
        grid-column: span 1 !important;
    }

    /* Estilo base de los botones/links */
    .c-menu-list li a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.9rem 0.5rem;
        color: var(--mp-amarillo);
        font-weight: 600;
        text-decoration: none;
        font-size: 0.95rem;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        text-align: center;
        transition: all 0.3s ease;
    }

    /* 4. Estilos Específicos (Clases de WP) */

    /* Botón WhatsApp */
    .menu-wsp a {
        background-color: #25D366 !important; /* Verde WhatsApp */
        color: var(--mp-azul) !important;
        font-weight: 700;
        border: none;
    }


    /* Hover/Feedback táctil */
    .c-menu-list li a:active {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(0.97);
    }
}

/* 5. Desktop Hide */
@media (min-width: 992px) {
    .c-modal { display: none !important; }
}
}
@layer modulo-seo{
.modulo-seo {
    background-color: var(--mp-azul);
    height: auto;
}

.modulo-seo-titulo, .modulo-seo-p, .modulo-seo-subtitulo {
    color: white;
}

.modulo-seo-container {
    padding: 2rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.modulo-seo-titulo {
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

/* --- Estilos Base (Escritorio / Tablet grande) --- */
.modulo-seo-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 2rem;
    align-items: start;
}



.modulo-seo-p {
    margin-bottom: 20px;
    line-height: 1.6;
    text-wrap: pretty;
    overflow-wrap: break-word; /* La opción moderna y recomendada */
}

.modulo-seo-subtitulo {
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: center;
}

.modulo-seo-imagen {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

/* --- Media Query para Mobile (Responsive) --- */
@media (max-width: 768px) {
    .modulo-seo-contenido {
        /* Pasamos a una sola columna */
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .modulo-seo-titulo {
        font-size: 1.8rem;
        text-align: center;
    }

    /* Opcional: Centrar la imagen en móviles */
    .modulo-seo-contenedor-imagen {
        text-align: center;
    }
}

}
@layer euristica-cat{
   /* Contenedor principal */
.euristica-cat {
    padding: 1.5rem 0; /* Un poco más de aire */
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem; /* Espaciado más compacto y moderno */
    justify-content: space-between;
}

/* Estilo de los botones */
.euristica-cat-link {
    padding: 0.8rem 1.2rem;
    background-color: var(--mp-amarillo);
    color: var(--mp-azul);
    border-radius: 50px; /* Bordes redondeados tipo "pill" se ven mejor para esto */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Transiciones suaves */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Para que el feedback en mobile sea perfecto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mp-amarillo); /* Evita saltos de layout al hacer hover */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Quita el cuadro azul feo de Android al tocar */
}

/* Efecto Hover (Escritorio) */
.euristica-cat-link:hover {
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
    border-color: var(--mp-azul);
    transform: translateY(-2px); /* Pequeño salto hacia arriba */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Efecto Active (Feedback al apretar en Mobile) */
.euristica-cat-link:active {
    transform: scale(0.95); /* Se encoge un poquito al presionarlo, simulando un botón real */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ajuste opcional para móviles muy pequeños */
@media (max-width: 480px) {
    .euristica-cat {
        justify-content: center; /* Centramos los botones en pantallas muy chicas */
    }
    .euristica-cat-link {
        flex: 1 1 auto; /* Los botones crecen para llenar el ancho si es necesario */
        text-align: center;
    }
}
}
@layer producto-single {
.contenedor-producto {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 3rem;
    overflow: hidden;
}


@media (min-width: 768px) {
    .contenedor-producto {
        grid-template-columns: 1fr 1fr;
    }
}

.producto-breadcrumb {
    padding: 2rem 0 1rem 0;
    a {
        color: var(--mp-azul-o);
        text-decoration: underline;
    }

    a:hover{ text-decoration: none;}
}


/* ==========================================================================
   GALERÍA DE PRODUCTO (SOLUCIÓN LIGERA)
   ========================================================================== */

/* 1. Contenedor Principal */
.producto-imagenes {
    width: 100%;
    position: relative;
}

.producto-imagen-main {
    width: 100%;
    margin-bottom: 15px;
    box-shadow: var(--mp-shadow-soft);
}

.producto-imagen-main img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 15px;
}

/* 2. Grid de Miniaturas */
.producto-thumbnails {
    display: grid;
    /* Usamos auto-fill y un tamaño fijo (80px) para que NO se estiren */
    grid-template-columns: repeat(auto-fill, 80px); 
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

/* 3. Elementos de la lista (li) */
.producto-thumbnails li {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid #ddd; /* Borde gris suave por defecto */
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

/* 4. Imágenes dentro de las miniaturas */
.producto-thumbnails li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 5. Estado Activo (Marco Negro) */
.producto-thumbnails li.thumb-active {
    border-color: #000; /* Marco negro intenso */
    opacity: 1;
}

.producto-thumbnails li:hover {
    border-color: #999;
}

/* Ajuste para móviles: si la pantalla es muy pequeña, que las minis bajen un poco de tamaño */
@media (max-width: 480px) {
    .producto-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    }
}

/*final estilo de fotos*/

/*product labels para producto*/

.product-labels-2 {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    gap: 1rem;
}

.product-labels-2 span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

    display: flex;
    justify-content: center;
    gap: 5px;
}

/*final product labels para producto*/


    .columna-info {
        display: flex;
        flex-direction: column;
        
        gap: 1rem;
        justify-content: flex-start;
    }

    .producto-acciones-h {
    display: flex;
    flex-direction: column;
    gap: 1rem;
        }


    .producto-h1 {font-size: clamp(25px, 0.5vw + 28px, 30px); color: var(--mp-azul);}
    
    .producto-descargables {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0 1rem;
    justify-content: space-around;
}

.producto-descargables a{
    color: var(--mp-azul-o);
    font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.125rem);
    border: solid 1px var(--mp-azul-o);
    border-radius: 8px;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: background 0.3s, opacity 0.3s;
}

.producto-descargables a:hover{
    background-color: var(--mp-amarillo);
    border-color: var(--mp-amarillo);
}

.producto-descargables svg{
    height: 20px;
    width: auto; /* Para que mantenga la proporción */
    display: inline-block;
    vertical-align: middle; /* Para que alinee bien con el texto */
}

.producto-descargables svg path:not([fill="#fff"]):not([fill="red"]) {
    fill: currentColor;
}

/* Contenedor principal de los precios */
.producto-precio {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el precio tachado y el nuevo */
    font-size: clamp(1.5rem, 0.8rem + 0.5vw, 2rem);
    font-weight: 600;
}

/* Estilo para el precio original (Tachado) */
.producto-precio del {
    color: #999; 
    font-size: 0.7em; 
    font-weight: 400;
    text-decoration: line-through;
}

/* Estilo para el precio de oferta (Destacado) */
.producto-precio ins {
    color: var(--mp-azul); 
    text-decoration: none;
    font-weight: 700;
}

/* Limpieza para los símbolos de moneda y montos dentro de bdi */
.producto-precio bdi {
    color: inherit;
}

/*Formulario de agregar al carrito*/

/* CONTENEDOR PRINCIPAL */
.producto-agregar-carrito {
    font-family: inherit;
}

/* TABLA DE VARIACIONES (Limpieza) */
.producto-agregar-carrito table.variations {
    width: 100%;
    border: none;
}

.producto-agregar-carrito table.variations th, 
.producto-agregar-carrito table.variations td {
    display: block; /* Apilamos etiqueta y selector */
    width: 100%;
    padding: 0;
    border: none;
    text-align: left;
    background: transparent;
}

.variations tbody{
    display: flex;
    flex-direction: column;
    gap:10px;}

.producto-agregar-carrito table.variations th.label {
    margin-bottom: 8px;
}

.producto-agregar-carrito table.variations th.label label {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #333;
}

/* SELECTORES (Drop-downs) */
.producto-agregar-carrito table.variations td.value select {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
}

.producto-agregar-carrito table.variations td.value select:focus {
    border-color: #000; /* O el color de tu marca */
}


/* BOTÓN DE LIMPIAR VARIACIONES */
.reset_variations {
    font-size: 12px;
    color: red;
    text-decoration: underline;
    margin-top: -10px;
    display: inline-block;
}

.woocommerce-variation.single_variation {
    background: #fdfdfd;
    padding: 10px;
    border-left: 3px solid #000; /* Una línea elegante al lado */
    margin-bottom: 15px;
}

/* CONTENEDOR DE CANTIDAD Y BOTÓN */
.woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}
/*contenedor de añadir al carrito*/
.producto-agregar-carrito .cart{
    display:flex;
    gap: 1rem;
}

/* INPUT DE CANTIDAD */
.producto-agregar-carrito .quantity input.qty {
    width: 70px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* BOTÓN AÑADIR AL CARRITO */
.producto-agregar-carrito .single_add_to_cart_button {
    flex-grow: 1; /* Que ocupe el resto del ancho */
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
    border: none;
    border-radius: 8px;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.3s, opacity 0.3s;
}

.producto-agregar-carrito .single_add_to_cart_button:hover {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul-o);
}

.producto-agregar-carrito .single_add_to_cart_button.disabled {
    background-color: #465772;
    cursor: not-allowed;
    opacity: 0.7;
}

/* MENSAJE DE VARIACIÓN (Precio que aparece dinámicamente) */
.woocommerce-variation.single_variation {
    margin-bottom: 15px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 4px;
    font-weight: 600;
}

.producto-agregar-carrito .screen-reader-text{
    display:none;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .woocommerce-variation-add-to-cart {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .producto-agregar-carrito .quantity input.qty,
    .producto-agregar-carrito .single_add_to_cart_button {
        width: 100%;
    }
}

/*sección comprar en wsp - dejé apagada en display none por mientras, debería ser display flex*/


 .compra-wsp {
        padding: 1rem;
        display: none;
        flex-direction: column;
        gap: 1rem;
        border-radius: 9px;
        background-color: var(--ecot-verde-o);
    }

    .compra-wsp span{
        font-size: 1rem;
        color: white;
    }

    .compra-wsp svg{
        fill: currentColor;
        width: 32px;
        height: 32px;
    }

     .wsp-cta-2 {
        background-color: #25D366;
        color: var(--ecot-verde-o);
        font-weight: 800;
        font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.2rem);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem;
        border-radius: 100px;
        transition: var(--hover-color);
    }

    .wsp-cta-2:hover{
        background-color: #128c7e;
        color: white;
    }

.producto-tarjetas {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;

    span {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        width: 100%; 
        text-align: center;
        gap: 15px; 
        font-weight: 600;
        color: #484848;
    }

    /* Línea antes del texto */
    span::before {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--mp-azul-o);
    }

    /* Línea después del texto */
    span::after {
        content: "";
        flex: 1; 
        height: 1px; 
        background-color: var(--mp-azul-o); 
    }
    img {max-width: 300px;}

}

/*caja de aviso wc*/
.woocommerce-notices-wrapper {margin-bottom: 1rem;}
.woocommerce-notices-wrapper .woocommerce-message{
    background-color: var(--mp-azul);
    padding: 1rem;
    color: white;
    border-radius: 8px;

    a{
        color: white;
        text-decoration: underline;
        font-weight: 600;
    }

    a:hover{
        text-decoration: none;
    }
}

/*Descripción de producto*/

.descripcion-producto{
    margin-top: 2rem;
}

.descripcion-producto-container {
    background-color: white;
    border-radius: 30px;
    border: solid;
    border-width: 1px;
    padding: clamp(1.5rem, 0.8rem + 0.5vw, 3rem);
    border-color: #484848;
    margin: 1rem 0 1rem;
}

.descripcion-producto-container h2,
.descripcion-producto-container h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--mp-azul);
}

.descripcion-producto-container h2 {font-size: 1.7rem;}
.descripcion-producto-container h3 {font-size: 1.5rem;}

.descripcion-producto-container p,
.descripcion-producto-container li {
    margin-bottom: 1rem;
    color: var(--mp-texto);
    line-height: 1.6;
    font-size: 1.1rem;
}

.descripcion-producto-container ul{
    padding-left: 20px;
}

.interlinking-mp {
    background-color: #f4f8f3;
    border-left: 4px solid var(--mp-amarillo);
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    font-family: sans-serif;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #333;
}

    .interlinking-mp p {
        margin-bottom: 15px;
        font-size: 16px;
    }

    .interlinking-mp ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .interlinking-mp li {
        margin-bottom: 8px;
        position: relative;
        padding-left: 20px;
    }

    /* Viñeta personalizada con el verde de la marca */
    .interlinking-mp li::before {
        content: "•";
        color: #266D22;
        font-weight: bold;
        position: absolute;
        left: 0;
    }

    /* Estilo de los links con el Action Color */
    .interlinking-mp a {
        color: #FF6A00;
        text-decoration: underline;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    /* Efecto Hover: Desaparece el subrayado */
    .interlinking-mp a:hover {
        text-decoration: none;
        color: #e65f00; /* Un tono apenas más oscuro para el feedback visual */
    }


}
@layer productos-relacionados{
    .productos-relacionados-info {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;

        h2 {color: var(--mp-azul);
            font-size: 1.2 rem;
            text-decoration: underline;
        }
    }
}
@layer carrito-flotante{

/***carrito flotante***/

/* 1. Posicionamiento del padre (Ancla) */
.cart-anchor {
    position: relative; /* Clave para alinear el desplegable */
    display: flex;
    align-items: center;
}

/* 2. Estilo de la div desplegable (Oculta por defecto) */
.carrito-flotante {
    position: absolute;
    top: 100%; /* Justo debajo del icono */
    right: 0;   /* Alineado a la derecha del icono */
    background-color: #ffffff;
    min-width: 260px; /* Un poco más ancho para el carrito */
    padding: 20px;
    margin: 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    border-radius: 8px;
    
    /* Efecto de aparición suave (Copiado de tu sub-menu) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

/* 3. El Hover: Mostrar solo al pasar por .cart-anchor */
.cart-anchor:hover .carrito-flotante {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 4. El "Puente Invisible" para que no se cierre */
.cart-anchor::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 20px; /* Rellena el hueco para que el mouse pueda bajar */
}

/* Estilos internos rápidos para la prueba */
.carrito-flotante span {
    font-weight: bold;
    color: var(--mp-azul);
    margin-bottom: 10px;
}

.mp-button {
    background: var(--mp-azul);
    color: white;
    border: none;
    padding: 8px 15px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

/* Contenedor de la lista */
.mini-cart-items {
    max-height: 300px; /* Por si llevan muchos productos, que salga scroll */
    overflow-y: auto;
    margin-bottom: 15px;
}

/* Item individual */
.mini-cart-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mini-cart-img {
    flex: 0 0 30%; /* No crece, no se encoge, ocupa exactamente el 30% */
    max-width: 30%;
}

.mini-cart-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.mini-cart-name {
    display: block;
    font-size: 0.85rem;
    color: var(--mp-texto);
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 4px;
    font-weight: 500;
}

.mini-cart-name:hover {
    color: var(--mp-azul);
}

.mini-cart-quantity {
    font-size: 0.8rem;
    color: #777;
    display: flex;       /* Alinea los hijos en línea */
    align-items: center; /* Centra verticalmente el texto con el precio */
    gap: 5px;            /* Espacio pequeño entre el "3 x" y el precio */
    white-space: nowrap; /* Evita que el precio salte a la línea de abajo */
    font-size: 0.85rem;
}

/* Por si acaso el bdi o el span interno tienen márgenes raros */
.mini-cart-quantity bdi, 
.mini-cart-quantity .amount {
    display: inline; 
    margin: 0;
}

/* Total y Botones */
.mini-cart-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 1rem;
    border-top: 2px solid #eee;
}

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

.mp-button.secondary {
    background: #f4f4f4;
    color: var(--mp-azul);
    border: 1px solid #ddd;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    display: block;
}

.mini-cart-buttons .mp-button {
    text-align: center;
    text-decoration: none;
}

.cart-empty-msg {
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 0.9rem;
}

}
@layer contenedor-video-yt-1 {

.video-producto-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Truco para mantener la proporción 16:9 */
.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Relación 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px; /* Opcional: bordes redondeados como tu diseño */
    box-shadow: var(--mp-shadow-soft);
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}
@layer parches{
/*este es un parche para eliminar uno elementos que aparecían al final*/
#photoswipe-fullscreen-dialog {display:none}

/*parche para arreglar emojis*/
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
}
@layer hero-1{

.hero-1{
        background: linear-gradient(to bottom, #0F1732, #224070);        
        background-size: cover;
        padding-top: clamp(2rem, 8vw + 0.5rem, 6rem);
        padding-bottom: clamp(2rem, 8vw + 0.5rem, 6rem);
        position: relative;
        overflow: hidden;
        height: 90vh;
    }
.hero-1-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; /* Añade un poco de espacio entre la info y la foto */
    align-items: center; /* Centra verticalmente el contenido */
}

.hero-1-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.hero-1-info h1{
    color: white;
    font-size: 1rem;
}

.hero-1-info h2{
    font-size: clamp(2.3rem, 5vw + 1rem, 4rem);
    font-weight: 400;
    color: white;
    text-shadow: 2px 2px 0px #FFBF00, 2px 2px 0px rgba(0,0,0,0.2);

}

.hero-1-info span {
    color: white;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
}

.hero-cta-container {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0;
    gap: 1rem
}

.hero-cta {
    display: inline-flex;     
    align-items: center;      
    gap: 0.5rem;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
              
    
    background-image: var(--gold-gradient);
    color: var(--mp-azul);
    padding: 0.8rem 1.5rem;   
    font-weight: 600;
    border-radius: 100px;
    border: solid var(--mp-amarillo) 0px;
}

.hero-cta-2 {
    display: inline-flex;     
    align-items: center;      
    gap: 0.5rem;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
    

    background-color: transparent;
    color: var(--mp-amarillo);
    padding: 1rem;
    font-weight: 600;
    border-radius: 100px;
    border: solid var(--mp-amarillo) 1px;
}

.cta-icon {
    width: 1.2rem;            
    height: 1.2rem;
    fill: currentColor;      
}

.hero-1-foto-container{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .hero-1{height: auto;}
    .hero-1-container{
        padding-top:2rem;
        gap: 1rem;
    }

    .hero-1-info {align-items: center;}
    
    .hero-1-info h2 {
        text-align: center;
    }

    .hero-cta-container{
        justify-content: center;
    }
}
}
@layer marcas-home {

.home-marcas {
    background-color: var(--mp-azul);
    height: 60vh;
    overflow: hidden;
    padding-bottom: 4rem;  
}

.home-marcas-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;

    padding: 2rem 0;
     
}

.card-marca-1 {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 05.rem;
    padding: 2.5rem 1rem;
    position: relative;
    border-radius: 16px;
    z-index: 20;
}

.card-marca-1-logo{
    max-width: 200px;
}

.card-marca-1 p{
    text-align: center;
    text-wrap: pretty;
}

.card-marca-1 a{
    background-color: transparent;
    color: white;
    padding: 1rem;
    font-weight: 600;
    border-radius: 100px;
    border: solid white 1px;

}

.card-marca-1-imagen {
    position: absolute;
    top: 80%;
    width: 200px;
}

.fondo-thule{
    background-image: linear-gradient(180deg, #2F8992 0%, #0D3032 100%);
}

.fondo-targus{
    background-image: linear-gradient(180deg, #641AB6 0%, #3F115FFA 100%);
}

.fondo-ublox{
    background-image: linear-gradient(180deg, #A8181F 0%, #2B0608 100%);    
}

@media (max-width: 768px) {
    .home-marcas {
    height: auto;
    padding-bottom:1rem;
}

    .card-marca-1 img{
        top: 40%;
        right: -10%;
    }

    .card-marca-1 {
        align-items: flex-start;
    }

    .card-marca-1 p {
        text-align: left;
        z-index: 10;
    }

}
}
@layer ventajas {

.home-ventajas-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2.2rem, 5vw + 1rem, 4rem) 0;
}

.home-ventajas-1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-ventajas-titulo {
    font-size: clamp(2.4rem, 5vw + 1rem, 3rem);
    color: var(--mp-texto-2);
    text-align: center;
}

.home-ventajas-titulo span{
    background: var(--gold-gradient);
    -webkit-background-clip: text; /* Recorta el fondo al texto */
    -webkit-text-fill-color: transparent; /* Hace el texto transparente para ver el fondo */
    
    /* Luego la versión estándar (para el futuro y cumplimiento de reglas) */
    background-clip: text;

}

.home-ventajas-1 p{
    font-size: 1rem;
    max-width: 40ch;
    text-align: center;
    color: var(--mp-texto);
}

.home-ventajas-2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    
    gap: 2rem;       /* Espacio entre columnas y filas */
    width: 100%;     /* Ocupa todo el ancho disponible */
    padding: 1rem;
}

.home-ventajas-imagen{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;

}

.home-ventajas-imagen img{max-height: 400px;}

.link-cta-2{
background-color: var(--mp-azul);
padding:  1rem 2rem;
border-radius: 5px;
color: white;
font-weight: 600;
}
.link-cta-2:hover {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul);
    text-decoration: none;
}

.home-ventajas-lista{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.home-ventaja-card{
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
    color: var(--mp-texto-2);
}

.ventajas-icon {
    width: 2.5rem;            
    height: 2.5rem;
    fill: currentColor;      
}

.home-ventaja-card h3{
    font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
    line-height: 1;
}

.home-ventajas-lista img{
    max-width: 300px;
    margin: auto;
}
}
@layer regalos {

.home-regalos {
    background-color: rgb(205 205 205 / 50%);
}

.home-regalos-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2.2rem, 5vw + 1rem, 4rem) 0;
    align-items: center;
}

.home-regalos-container h2{
    font-size: clamp(1rem, 4vw + 0.5rem, 3rem);
    text-align: center;
    color: var(--mp-texto-2);
}
}
@layer productos-home{

.home-productos{
    background-color: var(--mp-fondo-claro);
}

.home-productos-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2.2rem, 5vw + 1rem, 4rem) 0;
    align-items: center;
}

.home-productos-titulo {
     font-size: clamp(1rem, 4vw + 0.5rem, 3rem);
    text-align: center;
    color: var(--mp-texto-2);
}

}
@layer slider-marcas{

/* Definimos las variables arriba para que sea fácil editar */
:root {
    --animationSpeed: 40s;
    --slideWidth: 250px;
    --totalSlides: 14;
    --visibleSlides: 7;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(var(--slideWidth) * var(--visibleSlides) * -1)); }
}

.slider {
    background: white;
    height: 160px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%; /* Lo hacemos responsivo */
}

/* Los degradados laterales (el Mixin traducido) */
.slider::before,
.slider::after {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 150px; /* Ajustado para que no tape tanto */
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
    height: 100%;
}

.slider::before {
    left: 0;
    top: 0;
    height: 100%
}

.slide-track {
    display: flex;
    /* Calculamos el ancho total: 250px * 14 */
    width: calc(var(--slideWidth) * var(--totalSlides));
    animation: scroll var(--animationSpeed) linear infinite;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.slide {
    height: 60px;
    width: var(--slideWidth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Añadimos un "aire" lateral entre logos */
    box-sizing: border-box; /* Para que el padding no rompa el ancho de 250px */
}

.slide img {
    /* Forzamos a que el logo ocupe el espacio sin deformarse */
    width: 100%;
    height: 100%;
    
    /* LA CLAVE: 'contain' mantiene la proporción y no corta el logo */
    object-fit: contain; 
    
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05); /* Un pequeño plus visual */
}
}
@layer hero-carrusel{
    .hero-carrusel {
    width: 500px;
    height: 500px;
    overflow: hidden; /* Esconde las imágenes que no están activas */
    position: relative;
    border-radius: 12px; /* Opcional: bordes redondeados para que se vea premium */
    margin: auto;
    z-index: 10;
}

/* El contenedor que se desliza */
.hero-carrusel-wrapper {
    display: flex;
    width: calc(500px * 9); /* Ancho total: 300px x 9 imágenes */
    animation: slide-show 27s infinite ease-in-out;
}

.hero-carrusel-imagen {
    width: 500px;
    height: 500px;
    flex-shrink: 0;
}

.hero-carrusel-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Para que el logo no se deforme */
    padding: 20px; /* Aire interno para que el logo no toque los bordes */
    box-sizing: border-box;
}

/* Animación: 9 imágenes. 100% / 9 = aprox 11% por cada paso */
@keyframes slide-show {
   0%, 9%   { transform: translateX(0); }
    11%, 20% { transform: translateX(-500px); }  /* 1 * 500 */
    22%, 31% { transform: translateX(-1000px); } /* 2 * 500 */
    33%, 42% { transform: translateX(-1500px); } /* 3 * 500 */
    44%, 53% { transform: translateX(-2000px); } /* 4 * 500 */
    55%, 64% { transform: translateX(-2500px); } /* 5 * 500 */
    66%, 75% { transform: translateX(-3000px); } /* 6 * 500 */
    77%, 86% { transform: translateX(-3500px); } /* 7 * 500 */
    88%, 97% { transform: translateX(-4000px); } /* 8 * 500 */
    100%     { transform: translateX(0); }       /* Regreso al inicio */
}

@media (max-width: 600px) {
    /* 1. La ventana ahora se ajusta al ancho del celular */
    .hero-carrusel {
        width: 100%;
        height: auto; /* Permite que la altura sea proporcional */
        aspect-ratio: 1 / 1; /* Mantiene el formato cuadrado de 500x500 */
        position: relative;
    }

    /* 2. El wrapper debe calcularse basado en el 100% del ancho */
    .hero-carrusel-wrapper {
        width: calc(100% * 9); 
    }

    /* 3. Cada imagen ocupará exactamente el ancho de la pantalla */
    .hero-carrusel-imagen {
        width: calc(100vw - 40px); /* Restamos un poco si tu contenedor tiene padding lateral */
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* 4. RE-CALCULAMOS LA ANIMACIÓN PARA MOBILE */
    /* En mobile no sabemos si el 100% son 320px o 414px, 
       así que usamos porcentajes de desplazamiento */
    @keyframes slide-show {
        0%, 9%   { transform: translateX(0); }
        11%, 20% { transform: translateX(calc(-100% / 9 * 1)); }
        22%, 31% { transform: translateX(calc(-100% / 9 * 2)); }
        33%, 42% { transform: translateX(calc(-100% / 9 * 3)); }
        44%, 53% { transform: translateX(calc(-100% / 9 * 4)); }
        55%, 64% { transform: translateX(calc(-100% / 9 * 5)); }
        66%, 75% { transform: translateX(calc(-100% / 9 * 6)); }
        77%, 86% { transform: translateX(calc(-100% / 9 * 7)); }
        88%, 97% { transform: translateX(calc(-100% / 9 * 8)); }
        100%     { transform: translateX(0); }
    }
}

}
@layer adornos-hero{

.blob-hero{
    position: absolute;
    right: -4%;
    top: -2%;
    width: 850px;
    z-index: 5;
    display:none;
}

.blob-hero-3{
    position: absolute;
    right: 0%;
    top: 1%;
    width: 850px;
    z-index: 6;
    display:none;
}


.badge-rebajas {
    width: 200px; /* Un poco más ancha para esta forma */
    height: 200px;
    background-color: #224070;
    color: white;
    
    /* APLICAMOS EL SVG */
    clip-path: url(#shape-badge-premium);
    
    /* Centrado de texto */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Ahora sí centramos verticalmente */
    text-align: center;
    
    padding: 20px;
    box-sizing: border-box;
    
    /* La sombra debe ser drop-shadow para que respete la forma del SVG */
    filter: drop-shadow(8px 8px 0px #FFBF00);
    
    position: absolute;
    z-index: 12;
    top: 40%;
    right: 15%;
    transform: rotate(8deg);
}

/* Textos Pequeños (Arriba y Abajo) */
.badge-txt-top,
.badge-txt-bottom {
    font-size: 11px;
    text-transform: uppercase; /* Todo en mayúsculas para elegancia */
    letter-spacing: 1px; /* Espaciado entre letras premium */
    font-weight: 600; /* Peso ligero */
    opacity: 0.9;
    line-height: 1.2;
}

.badge-txt-top {
    margin-bottom: -5px; /* Acerca el texto al número */
}

/* El Número Grande (El protagonista) */
.badge-numero {
    font-size: 60px;
    font-weight: 600;
    color: #c49a1b;
    line-height: 1;
    margin: 5px 0;
    display: flex;
    align-items: flex-start;
    
    /* SOMBRA SÓLIDA AMARILLA */
    /* x | y | blur | color */
    text-shadow: 3px 3px 0px #FFBF00, 5px 5px 0px rgba(0,0,0,0.2);
}

/* El símbolo % (más pequeño que el número) */
.badge-porcentaje {
    font-size: 24px;
    font-weight: 800;
    margin-left: 2px;
    margin-top: 8px; /* Lo sube un poquito */
}

@media (max-width: 768px) {
    .blob-hero{
        display:none;
    position: absolute;
    right: 0%;
    top: 10%;
    width: 150px;
    z-index: 5;
}

.blob-hero-3{
    position: absolute;
    right: 1%;
    top: 60%;
    width: 350px;
    z-index: 6;
}

.badge-rebajas{
    display:none;
}

}
}
@layer carrito{
.carrito {background-color: var(--mp-fondo-claro);}

.carrito-container .woocommerce {
    display: grid;
    /* Definimos dos columnas iguales */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 2rem; /* Espacio entre la tabla y los totales */
    
    /* Dibujamos el mapa */
    grid-template-areas: 
        "notices notices notices"
        "form form collaterals";

    padding-bottom: 2rem;

    min-height: 50vh;
}

/* Asignamos cada elemento a su zona del mapa */

.carrito-container .woocommerce-notices-wrapper {
    grid-area: notices;
}

.carrito-container .woocommerce-cart-form {
    grid-area: form;
}

.carrito-container .cart-collaterals {
    grid-area: collaterals;
    /* Opcional: para que los totales no se peguen arriba si la tabla es muy larga */
    align-self: start; 
}

.shop_table tr, .cart-collaterals {
    background-color: white;
    border-radius: 15px;
    padding: 1rem;
}

.cart-collaterals {height: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);}

.woocommerce-cart-form__cart-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    
    img {width: 150px;}
}


/* Ocultamos la cabecera de la tabla */
.carrito-container .woocommerce-cart-form thead {
    display: none;
}

/* Transformamos el cuerpo de la tabla en un contenedor Flex */
.carrito-container .woocommerce-cart-form tbody {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Ajuste opcional para las filas (tr) */
/* Al poner el tbody en flex, es recomendable asegurar que los tr ocupen todo el ancho */
.carrito-container .woocommerce-cart-form .cart_item {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Ajuste para la fila de acciones (cupón y actualizar) */
.carrito-container .woocommerce-cart-form tr:last-child {
    display: block; /* Para que no herede el comportamiento de card de arriba */
    padding: 1rem;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.carrito-container .woocommerce-cart-form td.actions {
    display: block;
    width: 100%;
    
}

.cart_totals {
    display:flex;
    flex-direction: column;
    gap: 1rem;
}

.coupon{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.coupon label{display:none;}

.coupon input{
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 5px;
}

.product-name a{
    color: var(--mp-azul-o);
    text-decoration: underline;
}
.product-name a:hover{
    text-decoration: none;
}

.product-remove a{
    color: red;
    font-size: 2rem;
}

/*Botones y ctas*/

.actions button{
    border: solid 2px var(--mp-azul-o);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mp-azul-o);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    transition: var(--hover-color);
}

.actions button:hover {
    color: white;
    background-color: var(--mp-azul-o);
}

.coupon button{
    border: solid 2px var(--mp-texto);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: var(--mp-texto);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--hover-color);
}

.coupon button:hover{
    background-color: var(--mp-texto);
    color: white;
}   

.wc-proceed-to-checkout a{
    border: solid 2px var(--mp-amarillo);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mp-azul);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--mp-amarillo);
    transition: var(--hover-color);
}

.wc-proceed-to-checkout a:hover{
    background-color: var(--mp-azul);
    border-color: var(--mp-azul);
    color: white;
}

.quantity .screen-reader-text {display:none;}

/* IMPORTANTE: Ajuste para móviles */
@media (max-width: 992px) {
    .carrito-container .woocommerce {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "notices"
            "form"
            "collaterals";
    }
    .woocommerce-cart-form__cart-item {flex-wrap: wrap;}

    .coupon {
        flex-direction: column;
        align-items: start;

    }

    .carrito-container .woocommerce-cart-form .cart_item {
        display: grid;
        grid-template-columns: 80px 1fr 30px; /* Imagen | Info | Botón Eliminar */
        grid-template-areas: 
            "thumb name remove"
            "thumb price remove"
            "qty subtotal subtotal";
        gap: 10px;
        padding: 15px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* La sombra que pediste */
        position: relative;
    }

    /* Asignamos cada celda a su área del mapa */
    .product-thumbnail { grid-area: thumb; }
    .product-name { grid-area: name; align-self: center; }
    .product-remove { grid-area: remove; text-align: right; }
    .product-price { grid-area: price; font-size: 0.9rem; color: #666; }
    .product-quantity { grid-area: qty; padding-top: 10px; border-top: 1px dashed #eee; }
    .product-subtotal { grid-area: subtotal; padding-top: 10px; border-top: 1px dashed #eee; text-align: right; }

    /* 1. Obligamos al contenedor de WC y al input a ser elásticos */
.product-quantity .quantity,
.product-quantity .quantity input.qty {
    width: 100% !important; /* Ocupa todo el ancho de la columna 'qty' */
    max-width: 100%;        /* Evita que se desborde */
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
}

/* 2. Ajuste fino para que no se vea gigante verticalmente */
.product-quantity .quantity input.qty {
    padding: 8px 5px;
    text-align: center;
    min-height: 40px; /* Tamaño cómodo para el dedo en mobile */
}
}

.wc-empty-cart-message {font-size: 2rem;}
.return-to-shop a {
    background-color: var(--mp-azul);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

.return-to-shop a:hover{
    background-color: var(--mp-amarillo);
    color: var(--mp-azul);
}


}
@layer checkout{

.checkout-custom {background-color: var(--mp-fondo-claro);}


/* Definición de las Cajitas Bento */
.woocommerce-billing-fields,
.col-2,
.shop_table.woocommerce-checkout-review-order-table,
#payment {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Tu sombra suave */
}

.shop_table.woocommerce-checkout-review-order-table { 
    margin: 0 !important; /* Quitar márgenes de tabla por defecto */
}

/* Estilo de los encabezados dentro de las cajas */
.checkout-custom-container h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 10px;
}

/* Ajustes de la tabla de resumen para que no parezca tabla */
.shop_table.woocommerce-checkout-review-order-table thead {
    display: none;
}

.shop_table.woocommerce-checkout-review-order-table tr {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 2px solid #f1f1f1;
    border-radius: 0;
}


/*parches de cosas que borré*/
.woocommerce-form-coupon-toggle {display:none}
#order_review_heading {display: none;}


/*Estilos del área de facturación*/
.woocommerce-billing-fields__field-wrapper .form-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 !important;
}

.woocommerce-billing-fields__field-wrapper .form-row input, 
.woocommerce-billing-fields__field-wrapper .form-row select{
    width: 100%;
    background-color: var(--mp-fondo-claro);
    border: none;
    padding: 1rem 1rem;
    border-radius: 8px;
}   

.woocommerce-billing-fields__field-wrapper .form-row label{
    font-size: 0.8rem;
}

.woocommerce-billing-fields__field-wrapper .form-row .required {
    color: red;
    font-size: 1rem;
}

#billing_country_field {display:none;}
#billing_address_2_field label {display:none;}

.woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 2rem;
    grid-template-areas: 
        "nombre apellido"
        "telefono email"
        "region comuna"
        "direccion direccion"
        "dpto dpto"
        "pais pais";
}

#billing_first_name_field { grid-area: nombre; }
#billing_last_name_field { grid-area: apellido; }
#billing_phone_field      { grid-area: telefono; }
#billing_email_field      { grid-area: email; }
#billing_state_field      { grid-area: region; }
#billing_city_field       { grid-area: comuna; }
#billing_address_1_field  { grid-area: direccion; }
#billing_address_2_field  { grid-area: dpto; }
#billing_country_field    { grid-area: pais; }

@media (max-width: 600px) {
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "nombre"
            "apellido"
            "telefono"
            "email"
            "region"
            "comuna"
            "direccion"
            "dpto"
            "pais";
    }
}

/*estilos para área de resumen*/

.shop_table .cart_item .product-name {
    width: 50%;
}

.shop_table .cart_item .product-total {
    display:flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.product-total {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/*estilos para área de información adicional*/
.checkout .col-2 .form-row{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout .col-2 textarea{
    min-width: 100%;
    min-height: 100%;
    background-color: var(--mp-fondo-claro);
    border: none;
    padding: 1rem 1rem;
    border-radius: 8px;
}

/*estilos del área de pago*/

.payment_box {
    padding: 0.5rem 1rem;
    background-color: var(--ecot-fondo-claro);
    font-size: 15px;
}

.woocommerce-checkout-payment button {
    border: solid 2px var(--mp-amarillo);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mp-azul);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--mp-amarillo);
    transition: var(--hover-color);
}

.woocommerce-checkout-payment button:hover {
    background-color: var(--mp-azul);
    border-color: var(--mp-azul);
    color: var(--mp-amarillo);
}

.woocommerce-checkout-payment a{ 
    color: var(--ecot-naranjo);
    text-decoration: underline;
    }
.woocommerce-checkout-payment a:hover {text-decoration: none;}

/*layout*/
/* 1. Grid Bento Principal */
.checkout-custom-container .woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "facturacion resumen"
        "adicional   pagos"
        "adicional   pagos";
    gap: 1.5rem;
    align-items: start;
    padding: 2rem 0;
}

/* 2. "Aplanado" de contenedores para que los hijos suban al grid */
.col2-set, 
#customer_details, 
.woocommerce-checkout-review-order {
    display: contents;
}

/* 3. Asignación de las 4 cajas al Bento */
.woocommerce-billing-fields { 
    grid-area: facturacion;
    align-self: stretch; 
}

.col-2 { 
    grid-area: adicional; 
}

.shop_table.woocommerce-checkout-review-order-table { 
    grid-area: resumen;
    height: 100%; 
}

.woocommerce-checkout-payment { 
    grid-area: pagos; 
}

/* 4. Layout Responsive */
@media (max-width: 992px) {
    .checkout-custom-container .woocommerce-checkout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "facturacion"
            "adicional"
            "resumen"
            "pagos";
    }
}

}
@layer mi-cuenta{

/* ==========================================
   MI CUENTA - ESTILOS UNIFICADOS (BENTO TABS)
   ========================================== */

/* Contenedor General */
.mi-cuenta { background-color: var(--mp-fondo-claro); }
.mi-cuenta-container { padding: 2rem 0; }

/* 1. NAVEGACIÓN (Tabs Layout) */
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap; 
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    background: transparent; /* Importante para que luzcan como piezas separadas */
    border: none;
    box-shadow: none;
}

.woocommerce-MyAccount-navigation-link {
    flex: 1 1 auto;
    border: none !important; /* Limpieza de estilos de lista anteriores */
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    background: #ffffff;
    padding: 0.8rem 1.5rem !important;
    color: var(--mp-texto);
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Estado: Hover */
.woocommerce-MyAccount-navigation-link:not(.is-active):hover a {
    background-color: var(--mp-fondo-claro);
    border-color: var(--mp-azul);
    color: var(--mp-azul);
    transform: translateY(-2px);
}

/* Estado: Activo (Pestaña resaltada) */
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--mp-azul) !important;
    color: #ffffff !important;
    border-color: var(--mp-azul);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Estilo especial para el link de Salir */
.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #e74c3c;
}

/* 2. CONTENIDO (Caja Bento) */
.woocommerce-MyAccount-content {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    color: var(--mp-texto);
    line-height: 1.6;
}

/* Enlaces dentro del contenido */
.woocommerce-MyAccount-content a {
    color: var(--mp-azul);
    text-decoration: underline;
    font-weight: 600;
}

.woocommerce-MyAccount-content a:hover {
    color: var(--mp-amarillo);
    text-decoration: none;
}

/* Resaltado de nombres y botones internos */
.woocommerce-MyAccount-content strong { color: var(--ecot-verde-o); }

.woocommerce-MyAccount-content .button {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul) !important;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    border: none;
}

.woocommerce-MyAccount-content .button:hover {
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
}

/* 3. RESPONSIVE (Scroll horizontal en móviles) */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
        margin: 0 -15px; /* Para que el scroll llegue al borde de la pantalla */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .woocommerce-MyAccount-navigation ul {
        flex-wrap: nowrap;
        width: max-content;
    }

    .woocommerce-MyAccount-content {
        padding: 1.5rem;
    }
}
}
@layer contacto{

.contacto {
    background: url(/wp-content/themes/hello-theme-child-master/wave-haikei.svg);
    background-size: cover;
    background-position: center 1%;
    background-repeat: no-repeat;
}
.contacto-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    padding: 3rem 0;
    gap: 2rem;
}

.contacto-form {
    height: auto;
    background-color: #cfcfcf;
    color: var(--mp-azul);
    border-radius: 18px;
    padding: 2.3rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  
}

.mp-cta-1 {
    display: inline-flex;     
    align-items: center;      
    gap: 0.5rem;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
    
    background-color: var(--mp-amarillo);
    color: var(--mp-azul);
    padding: 0.8rem 1.5rem;   
    font-weight: 600;
    border-radius: 100px;
    border: solid var(--mp-amarillo) 0px;

    cursor:pointer;
    transition: var(--hover-color);
}

.mp-cta-1:hover {
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
}

.contacto-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
   
    color: var(--mp-texto);
}

.contacto-container h1 {color: var(--mp-azul);}
.contacto-container h2 {color: var(--mp-azul-o);}
.contacto-container a {color: var(--mp-azul); text-decoration: underline;}
.contacto-container a:hover {text-decoration: none;}

/*Estilos del form*/
.ff-t-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

}

.contacto-form .frm-fluent-form fieldset{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--ecot-verde-o);
    
    input {width: 100%; font-size: 1rem; border-radius: 5px; border:none; padding: 0.5rem;}
    textarea {width: 100%; border-radius: 5px; border:none; font-size: 1.3rem; padding: 0.5rem;}
}
}
@layer modulo-faq{

    /* --- SECCIÓN FAQ --- */
.modulo-seo-faq {
    padding: 60px 0;
    background-color: #f9f9f9; /* Fondo sutil para dar contraste a las tarjetas blancas */
    color: var(--mp-texto);
}

.modulo-seo-faq-cabecera {
    text-align: center;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.modulo-seo-faq-titulo {
    font-size: 2rem;
    color: var(--mp-azul);
    margin-bottom: 15px;
    font-weight: 700;
}

.modulo-seo-faq-cabecera p {
    color: var(--mp-texto-2);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Grilla de preguntas */
.modulo-seo-faq-preguntas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: start;
}

/* Tarjetas Individuales */
.faq-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 5px solid var(--mp-amarillo); /* Detalle elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.faq-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.faq-card-titulo {
    font-size: 1.2rem;
    color: var(--mp-azul-o);
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.faq-card p {
    color: var(--mp-texto-2);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Estilos para los links dentro del FAQ */
.faq-card a {
    color: var(--mp-azul);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border 0.3s ease;
}

.faq-card a:hover {
    border-bottom: 1px solid var(--mp-azul);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .modulo-seo-faq {
        padding: 40px 0;
    }
    
    .modulo-seo-faq-titulo {
        font-size: 1.7rem;
    }

    .modulo-seo-faq-preguntas {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 20px;
    }

    .faq-card {
        padding: 20px;
    }
}
    
}
@layer nosotros{
    .hero-2 {
        min-width: 100%;
        border-radius: 15px;
        height: 250px;
        position:relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 3rem;
        background-image: url(/wp-content/uploads/2026/04/targus-banner-1.webp);
        background-size: cover;
    }

    .hero-2 span {
        max-width: 50%;
        color: white;
        font-size: 1.3rem;
        z-index: 10;
    }

    @media (max-width: 768px) {

        .hero-2 span {font-size: 1rem;    }
        .hero-2 {background-position: -100% center;}

    }
}

@layer legales{
.legales {
    background-color: var(--mp-fondo-claro);
    padding: 2rem 0;
}
.legales-container {
    background-color: white;
    border-radius: 20px;
    padding: clamp(1rem, 2vw + 0.5rem, 2rem);
    font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
}

}