/*
Theme Name: tema-hijo-kadence
Template: kadence
*/

/* 🟢🟢 Todo el estilo del menu del header sticky 🟢🟢 */

/* reset temporal para pruebas (se eliminará en WordPress) */
/* *{
margin:0;
padding:0;
box-sizing:border-box;
} */

/* 👉 variables CSS */
:root {
    /* --- ESTADO INICIAL (GRANDE) --- */
    --alto-despacho-grande: 35px;
    --alto-main-grande: 80px;
    --alto-logo-grande: 61px;
    --posicion-menu-lateral-grande: 115px; /* 👈 Ajusta este hasta que pegue */

    /* --- ESTADO SCROLL (CHICO) --- */
    --alto-main-chico: 60px;
    --alto-logo-chico: 45px;
    --posicion-menu-lateral-chico: 60px;   /* 👈 Ajusta este hasta que pegue */

    /* --- COLORES --- */
    --color-titulo-producto: black;
    --color-main: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(194, 62, 183, 1) 42%, rgba(161, 13, 146, 1) 100%);
    --color-titulo-menu-celular: white;
    --color-links-menu-celular: white;
    --color-links-menu-pc: white;
    --color-fondo-menu-lateral: black;
    --color-fondo-fila-despacho: black;
    --color-letra-fila-despacho: white;
    --color-icono-hamburguesa: rgb(214, 207, 207);
    --color-icono-lupa: rgb(214, 207, 207);
    --color-borde-bajo-menu-lateral: white;
    --color-footer-fondo: purple;
    --color-footer-titulo: white;
    --color-footer-links: white;

    /* --- TAMAÑOS TEXTO --- */
}


/* Paginas creadas en wordpres como Ej: politica de privacidad (clase nativa de wordpress) */
/* margen a los costados */
@media (max-width: 768px) {

    .entry-content-wrap {
        padding-left: 12px;
        padding-right: 12px; 
    }

}

/* 🟢🟢Evita que el header se agrande con la etiqueta <a>🟢🟢 */
.logo a.logo-link {
    display: flex;         /* Cambiamos inline-block por flex */
    padding: 0 !important; /* Matamos el padding de 10px 15px que tienes arriba */
    margin: 0;
    line-height: 0;        /* Elimina espacio de texto fantasma */
    align-items: center;
}

.logo img {
    /* Mantenemos tu transición y display block */
    display: block;
    width: auto;
    /* El alto ya lo controlas con tus reglas de .header-scrolled */
}

/* Aseguramos que el contenedor del logo no tenga alturas raras */
.logo {
    display: flex;
    align-items: center;
    height: auto;
}
/* 🔴🔴Evita que el header se agrande con la etiqueta <a>🔴🔴 */

/* 🟢🟢capa overlay del menu disparador🟢🟢 */
/* La capa negra transparente */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color negro con 50% transparencia */
    z-index: 998; /* Un nivel debajo del menú lateral */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* Cuando el menú está activo, mostramos el overlay */
.menu-overlay.activo {
    opacity: 1;
    visibility: visible;
}

/* IMPORTANTE: Asegúrate que tu .menu-lateral tenga un z-index mayor */
.menu-lateral {
    /* ... tus otros estilos ... */
    z-index: 999; /* Mayor que el overlay */
}
/* 🔴🔴capa overlay del menu disparador🔴🔴 */

/* 👉 Menú Sticky con Fila Superior Contraíble, evitando parpadeo en la transision de chico a grande */
.fb-header-custom, 
.fb-header-main, 
.logo img, 
.menu-fila-arriba {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* 👉 Ajustando margenes del contenedor de los titulos */
.entry-hero.page-hero-section .entry-header {
    min-height: 30px;
    /* margin-bottom: 100px; */
}

/* 🟢🟢 Pagina Contactenos 🟢🟢 */
/* 👉 altura o height del contenido. Solo para la página de Contacto (ID 19) */
body.page-id-19 #wrapper {
    min-height: 400px !important;
}

/*  
👉Contenedor del texto contacto@mitienda.cl
.page-id-22 = afecta solo la página con ID 22 
.content-area = el contenedor al que quieres aplicar el margin
*/
.page-id-19 .content-area{
    margin-top: 100px;
}
/* 🔴🔴 Pagina Contactenos 🔴🔴 */

/* 👉 Ocultar hero o contenedor de solo titulo de pagina de TIENDA */
.post-type-archive-product .entry-hero {
    display:none;
}

/* 👉 Eliminar migas de pan Kadence (todos los casos) ejemplo: inicio/tienda/..... */
.kadence-breadcrumbs {
    display: none !important;
}


/* 👉 HEADER */
.fb-header-custom{
    position:sticky;
    top:0;
    width:100%;
    background: var(--color-main); /* 🔧 color del menu fijo  */
    z-index:9999;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}


.fb-header-custom a {  
    text-transform: none; /* O 'uppercase' si quieres que todo sea mayúscula */
    padding: 10px 15px;
    display: inline-block;
}

/* 🔧 barra superior */
.menu-fila-arriba{
    background: var(--color-fondo-fila-despacho);
    color: var(--color-letra-fila-despacho);
    font-family: "Poppins", sans-serif;
    text-align:center;
    font-size:15px;
    /* padding:10px 10px; */ /* 🔧 1er parametro Controla el Arriba y Abajo (Top & Bottom). 2do parametro Controla la Izquierda y Derecha (Left & Right).*/
    transition:0.3s; 
    /* Variables */
    height: var(--alto-despacho-grande);
    line-height: var(--alto-despacho-grande);
}



/* 👉 Quitar el margen del párrafo para no tener errores en navegadores que ponen margenes personalizados a P por defecto */
.menu-fila-arriba p {
    margin: 0; 
    padding: 0;
}


/* barra principal */
.fb-header-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
   padding-left: 15px;
    padding-right: 15px;
    transition: all 0.3s ease;
    /* Variables */
    height: var(--alto-main-grande);
}


/* 🟢🟢 MENU LATERAL DISPARADOR 🟢🟢 */
.menu-lateral {
    position: fixed;
    left: -120%;
    width: 70%;
    background: var(--color-fondo-menu-lateral);
    z-index: 9998;
    transition: 0.3s ease; /* Esto hace que el menú "suba" suave cuando achicas el header */
    box-shadow: 3px 0 10px rgba(0,0,0,0.2);
    /* padding: 25px; */
    padding: 20px 20px 0px 20px;
     /* Variables de posición manual */
    top: var(--posicion-menu-lateral-grande);
    height: calc(100vh - var(--posicion-menu-lateral-grande));
}


/* ESTADO SCROLL: Header Chico */
/* El símbolo ~ busca al hermano ".menu-lateral" cuando el header cambia de clase */
.header-scrolled ~ .menu-lateral {
    /* Variables de posición manual en scroll */
    top: var(--posicion-menu-lateral-chico);
    height: calc(100vh - var(--posicion-menu-lateral-chico));
}

/* menu abierto */
.menu-lateral.activo {
    left: 0;
}

/* 🔴🔴 MENU LATERAL DISPARADOR 🔴🔴 */

/* 🟢🟢Estilo de LINKS y Titulo de menu lateral 🟢🟢 */

/* titulo del disparador */
.menu-titulo{
    font-family: "Poppins", sans-serif; 
    font-size:22px;
    font-weight:600;
    color: var(--color-titulo-menu-celular);
    padding-bottom: 10px;
    margin-bottom:18px;
    /* padding-bottom:10px; */
    border-bottom:1px solid;
    border-color: var(--color-borde-bajo-menu-lateral);     
}

.menu-contenido{
    display:flex;
    flex-direction:column;
    
}

.menu-contenido a{
    text-decoration:none;
    font-family: "Poppins", sans-serif; 
    font-size: 20px;
    font-weight: 400;
    /* border-bottom:1px solid; */
    /* border-color: var(--color-borde-bajo-menu-lateral); */
    padding-bottom:4px;
    padding-top: 4px;
    margin-bottom: 5px;
    /* margin-bottom: 12px; */
    color: var(--color-links-menu-celular);
      
    
}

/* 🔴🔴Estilo de LINKS y Titulo de menu lateral 🔴🔴 */

/* 🟢🟢 Estilo Icono Hamburguesa a X 🟢🟢 */
.menu-icono {
  width: 30px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icono span {
  width: 100%;
  height: 3px;
  background-color: var(--color-icono-hamburguesa);
  transition: all 0.3s ease; /* Animación suave */
}

.menu-icono:hover span{ 
    /* background-color:  rgb(173, 52, 52) !important; */ /* 🔧 color al pasar el mouse en la hamburguesa */
    transform: scale(1.1); /* Un pequeño aumento para dar feedback */
}


/* Transformación a X cuando está activo */
.menu-icono.activo .linea-1 {
  transform: translateY(8px) rotate(45deg);
}

.menu-icono.activo .linea-2 {
  opacity: 0; /* Oculta la línea central */
}

.menu-icono.activo .linea-3 {
  transform: translateY(-9px) rotate(-45deg);
}

/* 🔴🔴 Estilo Icono Hamburguesa a X 🔴🔴 */

.loren{
    font-size: 45px;
}

/* 🟢🟢 Menú Sticky con Fila Superior Contraíble 🟢🟢 */
/* Estado inicial de tu fila superior */
.menu-fila-arriba {
  max-height: 100px; /* Un valor mayor al alto real para que se vea todo */
  opacity: 1;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

/* Cuando el scroll activa la clase en el contenedor padre */
.header-scrolled .menu-fila-arriba {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* 🔴🔴 Menú Sticky con Fila Superior Contraíble 🔴🔴 */

/* 🟢🟢 texto animado de izquierda a derecha 🟢🟢 */

.menu-fila-arriba {
    width: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    /* padding: 10px 0; */
}

.marquee-wrapper {
    display: flex;
    width: max-content;
    will-change: transform;
     /* Esto ayuda a que en móviles no se vea saltado */
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden;
}

.marquee-wrapper span {
    padding-right: 20px; /* Espacio entre frases */
    flex-shrink: 0;
    white-space: nowrap;
}

/* 🔴🔴 texto animado de izquierda a derecha 🔴🔴 */

/* 🟢🟢 Al hacer scroll se agranda y achica la fila principal y el logo 🟢🟢 */
/* Altura reducida de la fila principal cuando haces scroll */
.header-scrolled .fb-header-main {
  height: var(--alto-main-chico);
}


/* Estado inicial del logo (cuando estás arriba) */
.logo img {
  height: 55px;/* Ajusta este valor al tamaño "grande" que quieras */
    display: block;
    transition: height 0.3s ease-in-out;/* La clave para que no salte de golpe */
    /* Variables */
    height: var(--alto-logo-grande);
}

/* Estado cuando haces scroll */
.header-scrolled .logo img {
  height: var(--alto-logo-chico);
}

/* 🔴🔴 Al hacer scroll se agranda y achica la fila principal y el logo 🔴🔴 */

/* 🟢🟢 Estilo Lupa 🟢🟢 */
/* Limpiamos el botón para que solo se vea el icono */
.icon-search-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icono-lupa); /* 🔧 Color icono lupa */
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Estilo del SVG */
.lupa-svg {
    width: 30px;  /* Ajusta este tamaño para que combine con tu hamburguesa */
    height: 30px;
}

/* Efecto hover (al pasar el mouse) */
.icon-search-btn:hover {
    /* color: rgb(173, 52, 52); */ /* 🔧 Cambia a este color al pasar el mouse por la lupa */
    transform: scale(1.1); /* Un pequeño aumento para dar feedback */
}

/* Efecto cuando el header se contrae ( sticky ) */
/* .header-scrolled .icon-search-btn { */
    /* color: red; */ /* 🔧 cambia a este color la lupa, cuando el menu fijo esta chico */
/* } */
/* 🔴🔴 Estilo Lupa 🔴🔴 */

/* 👉 congelar el scroll del body al estar abierto el menu disparador */
body.no-scroll {
    overflow: hidden;
}

/* 🟢🟢 SOLO PARA MODO PC 🟢🟢 */
@media (min-width: 1024px) {
    /* 1. Ocultamos la hamburguesa */
    .menu-icono {
        display: none !important;
    }
    /* 2. Tiramos logo y links a la izquierda */
    .fb-header-main {
        justify-content: flex-start !important; /* Todo a la izquierda */
        gap: 30px; /* Espacio entre logo y links */
    }
    /* 3. Tiramos la lupa a la derecha */
    .icon-search-btn {
        margin-left: auto; /* Esto empuja la lupa al final derecho */
    }
    /* 4. Estilo de los links de PC */

    .menu-pc {
        display: flex !important;
        gap: 20px;
    }
    .menu-pc a { /* 🔧 color links PC */
        text-decoration: none;
        color: var(--color-links-menu-pc);
        font-family: "Poppins", sans-serif; 
        font-size: 18px;
        font-weight: 600;
    }

}
/* 🔴🔴 SOLO PARA MODO PC 🔴🔴 */

/* 🟢🟢 SOLO PARA MODO MÓVIL 🟢🟢 */

@media (max-width: 1023px) {
    .menu-pc {
        display: none !important; /* Escondemos los links sueltos en el celu */
    }
}

/* 🔴🔴 SOLO PARA MODO MÓVIL 🔴🔴 */

/* 🟢 buscador overlay css 🟢 */
.search-overlay-wrapper {
    position: fixed;
    top: 0;           
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10001;
    /* NUEVO: Estado oculto elegante */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.search-overlay-wrapper.activo {
    opacity: 1;
    visibility: visible;
}

.search-black-box {
    position: relative; /* 🔧 color de fondo del buscador */
    background: #000;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    z-index: 1;
    /* NUEVO: La caja negra empieza "escondida" arriba */
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Un toque más elástico */
}

/* CAMBIO: Cuando el padre está activo, la caja baja */
.search-overlay-wrapper.activo .search-black-box {
    transform: translateY(0);
}

.search-inner-content {
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-form-overlay {
    flex-grow: 1;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

#fullSearchInput {
    width: 100%;
    background: transparent;
    border: 4px solid #fff; /* Borde blanco de 4px */
    padding: 12px 50px 12px 20px;
    color: #fff;
    font-size: 20px;
    outline: none;
}

#fullSearchInput::placeholder {
    color: rgba(255,255,255,0.7);
}

.lupa-input-svg {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
}

.close-search-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    line-height: 1;
    line-height: 0.8;  /* 🔧 ESTO: Reduce el espacio vertical invisible de la letra */
    padding: 0 5px;   /* 🔧 ESTO: Quitamos cualquier margen lateral extra */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;   /* 🚀 CLAVE: Le dice al botón "no te achiques ni empujes" */
}

.search-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.15);
    z-index: -1;
    cursor: pointer;
}

/* 2. Ajuste para Móvil (pantallas menores a 1024px) */
@media (max-width: 1023px) {
    .search-black-box {
        height: 120px; /* 🔧 Alto del div buscador para celulares */
    }

    #fullSearchInput {
        font-size: 16px; /* Achicamos un pelo la letra para que quepa bien en los 100px */
        padding: 8px 45px 8px 15px;
        border-width: 3px; /* Bajamos el borde a 3px en celu para que no se vea tan tosco */
    }

    .close-search-btn {
        font-size: 35px; /* La X un poco más chica en el celu */
    }

}
/* 🔴 buscador overlay css 🔴 */

/* 🔴🔴Todo el estilo del menu del header sticky🔴🔴 */

/* 🟢🟢 CSS Footer Hecho por mi 🟢🟢 */
.footer-tienda{
    background: var(--color-footer-fondo);
    padding:40px 20px;
    padding-bottom: 110px;
    display:flex;
    justify-content:center;
}

.footer-contenido{
    max-width:300px;
    text-align:left;
}

.footer-titulo{
    color: var(--color-footer-titulo);
    font-size:18px;
    margin-bottom:20px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a{
    color: var(--color-footer-links);
    text-decoration:none;
    font-size:16px;
}

.footer-links a:hover{
    color:#fff;
}

.footer-links a.active {
    text-decoration: underline;
    font-weight: bold;
}
/* 🔴🔴 CSS Footer Hecho por mi 🔴🔴 */