/* ====== BASE ====== */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    /* CLAVES para el STICKY FOOTER (DEJAR ESTO INTACTO) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


main {
    flex-grow: 1;
}


/* ====== BARRAS SUPERIORES (Mantener al inicio del DOM si es necesario) ====== */
.barra-azul {
    width: 100%;
    height: 34px;
    background-color: #0C2852;
}

.barra-negra {
    width: 100%;
    height: 5px;
    background-color: #000;
}


/* --- SECCIÓN PRINCIPAL DEL HEADER --- */
.site-header {
    background-color: #FFCE2B;
    transition: all 0.3s ease;
    padding: 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header.hidden {
    /* Desplaza el header completamente hacia arriba */
    transform: translateY(-100%); 
}

.header-inner {
    display: flex;
    align-items: center; /* Centra verticalmente logo, menú y búsqueda */
    justify-content: space-between; /* Distribuye espacio entre logo, menú y búsqueda */
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 30px; 
    position: relative;
    /* Añadido para que el menú en hidden se reduzca un poco (Opcional) */
    transition: padding 0.3s ease;
}



/* ====== LOGO ====== */
.logo { 
    width: 180px; 
    height: auto;
    position: static; /* Aseguramos que no tenga posiciones extrañas */
}


/* ====== MENÚ HAMBURGUESA (Móvil) ====== */
.menu-toggle {
    display: none; /* Por defecto oculto en desktop */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: 0.3s;
}

/* OCULTAR EL MENÚ (NAV COMPLETO) cuando el header se esconde en desktop*/
.site-header.hidden .nav-header {
    /* Esto es lo que simula que solo queda la barra de búsqueda y el logo */
    display: none;
}


/* ====== ESTILO GENERAL DEL MENÚ (pantallas grandes) ====== */

.nav-header {
    /* CLAVE: Permite que el menú crezca y empuje la barra de búsqueda */
    flex-grow: 2.5;     
    display: flex; 
    justify-content: center;      
    }

.nav-header ul {
    font-family: 'Montserrat', sans-serif;
    list-style: none;
    display: flex;
    gap: 30px; /* Ajustado para dar más espacio */
    margin: 0;
    padding: 0; 
    position: static; 
    margin-left: 155px;
    margin-bottom: -13px;
}


.nav-header a {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #0E1F45; 
    font-weight: bold;
    font-size: 15px;
    
    /* 🚨 CLAVE: Añadir espacio en la parte inferior para la rayita */
    padding-bottom: 8px; /* Damos 8px de espacio en la parte inferior */
    
    position: relative;
    z-index: 10;
    transition: color 0.3s ease;
}

.nav-header img {
    width: 18px;
    height: 18px;
    margin-bottom: 3px;
}

.nav-header a::after {
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #0E1F45;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    z-index: 5;
}

/* 2. Activa la animación al pasar el cursor */
.nav-header a:hover {
    color: #0E1F45; /* Esto confirma que el hover funciona */
}

.nav-header a:hover span {
    color: #0E1F45; 
    color: #0E1F45; 
}

.nav-header a:hover::after {
    transform: scaleX(1);
}


/* ====== BÚSQUEDA ====== */
.search-bar {

    display: flex; 
    align-items: center;      
    background-color: white; 
    border-radius: 0px; 

    overflow: hidden;      
    width: 350px; 
    height: 40px;      
    
    position: static; 
    z-index: auto; 
    margin-left: auto; 

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.11);
}


.search-bar input {
    
    flex-grow: 1; 
    
    padding: 0 0 0 15px; 
    height: 100%; 
    margin-right: 112px;
    border: none; 
    outline: none; 
    background: none; 
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #333;

    box-shadow: none;
    border-radius: 0; 
}

.search-bar input::placeholder {
    color: #999;
}

.search-button {

    flex-shrink: 0;      
    width: 45px; 
    height: 100%;
    
    background-color: #FFC000; 
    border: none; 
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 0px;
}

.search-button .search-icon {
    width: 18px; /* Tamaño de la lupa */
    height: 18px;
    margin-right: 4px;
    /* Asegura que la imagen no tenga espacios extra */
}

.search-button:hover {
    background-color: #e6b000; /* Un amarillo un poco más oscuro al pasar el mouse */
}

/***MOVIL***/

.search-button.mobile-toggle {
    display: none; 
}

/* La barra de búsqueda que se desliza en móvil */
.search-bar-desplegable {
    display: none;
}




/* ====== SECCIÓN HERO ====== */

.hero {
    position: relative;
    width: 100%;
    height: 400px;
    background: url("img/hero.jpg") center / cover no-repeat;
    color: white;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
}

.hero .overlay { /* opacidad*/
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}


/*aca empiezan las letras*/
.hero-content {
    position: absolute; 
    top: 50%; /* Mueve el inicio a la mitad vertical del contenedor */
    left: 50%; /* Mueve el inicio a la mitad horizontal del contenedor */
    transform: translate(-50%, -50%); /* Lo regresa 50% de su propio tamaño para centrarlo perfectamente */
    width: 100%;    /* Permite que el margen automático funcione bien */
    max-width: 1000px; /* Mantiene tu límite de ancho */
    margin: 0 auto; /* Centra el bloque de 1000px dentro del 100% de la pantalla */
    z-index: 10;
    padding: 20px;
    text-align: center
}

/* El resto de estilos del h1 y p se mantienen */
.hero-content h1 {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 11px;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.289);

}

.hero-content p {
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: bold;
}


/* boton */
.btn-cta {
    background: #FFA500;
    color: #0E1F45;
    text-decoration: none;
    padding: 16px 26px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 20px;
    transition: all 0.3s ease;
    position: static; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

.btn-cta:hover {
    background: #FF5500;
    color: white;
}



/* ====== SLIDER (transición automática e interacción) ====== */

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); 
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

/* Flechas del slider */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease;
}

.prev:hover, .next:hover {
  background: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 15px;
  z-index: 11;
}

.next {
  right: 15px;
  z-index: 11;
}

/* ====== Puntos (las rayitas o indicadores debajo) ====== */
.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 11;
}

.dot {
  width: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #FFA500;
}



/* ======================================================= */
/* 1. ESTILOS BASE DE CATEGORÍAS (ESCRITORIO) */
/* ======================================================= */

.categorias {
    background-color: #F7F7F7;
    text-align: center;
    padding: 60px 0px;
    font-family: 'Montserrat', sans-serif;
}

.categorias h2 {
    font-size: 32px;
    color: #0C2852;
    margin-bottom: 10px;
}

.categorias .subtitulo {
    color: #303345;
    font-family: 'Montserrat', sans-serif; 
    font-size: 20px;
    margin-top: -5px; 
    margin-bottom: 70px; 
}

/*ancho de la cuadricula (Desktop: 3 en fila)*/
.categorias-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.categoria-card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 310px; /* ANCHO BASE DE ESCRITORIO */
    box-sizing: border-box;
    padding: 15px 20px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.categoria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.categoria-card img {
    width: 250px; 
    height: 250px; 
    object-fit: contain;
    margin: 0 auto; 
    display: block;
}

.categoria-card h3 {
    font-size: 19px;
    color: #0c033d;
    margin-bottom: 30px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
}

.btn-vermas {
    display: inline-block;
    background-color: #FFA500;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(252, 163, 17, 0.5);
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: -12px;
}

.btn-vermas:hover {
    background-color: #e59500;
    transform: scale(1.05);
}

/* Reglas específicas para imágenes de categorías */
.categorias-grid .categoria-card:nth-child(1) img {
    margin-top: 5px !important; 
    width: 230px !important;
    height: 230px !important;
}

.categorias-grid .categoria-card:nth-child(2) img {
    margin-top: 5px !important;
    width: 250px !important;
    height: 230px !important; 
}

.categorias-grid .categoria-card:nth-child(3) img {
    margin-top: 5px !important; 
    width: 230px !important; 
    height: 230px !important; 
}

.categorias-grid .categoria-card:nth-child(4) img {
    margin-top: 6px !important; 
    margin-bottom: 15px !important; 
    width: 220px !important;
    height: 230px !important;
}

.categorias-grid .categoria-card:nth-child(5) img {
    margin-top: 6px !important; 
    margin-bottom: 15px !important; 
    width: 220px !important;
    height: 200px !important;
}

.categorias-grid .categoria-card:nth-child(5) .btn-vermas {
    margin-top: 21px !important; 
}


/* ======================================================= */
/* 2. ESTILOS BASE DE PRODUCTOS DETALLADOS (ESCRITORIO) */
/* ======================================================= */

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    flex-wrap: wrap;
    justify-content: center;
    gap: 43px; 
    max-width: 1200px;
    margin: 40px auto 60px;
}

.producto-card {
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-bottom: 0;
    /* (Se recomienda un ancho base fijo aquí, por ejemplo 250px) */
    width: auto; 
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.producto-card img {
    width: 100%; 
    max-height: 250px; 
    object-fit: contain; 
    margin: 0 auto 15px; 
    display: block;
}

.producto-card h3 {
    font-size: 18px;
    color: #0C2852;
    margin-bottom: 10px;
}

.producto-card p {
    font-size: 20px;
    font-weight: bold;
    color: #E60000; 
    margin: 0;
}

/* Reglas de encabezado de productos */
.productos-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0 20px;
}

#productos-titulo {
    font-size: 38px;
    color: #0C2852;
    margin-top: 25px;
}

#btn-volver {
    background-color: #f55f08; 
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    font-size: 16px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.13);
}

#btn-volver.btn-volver:hover {
    background-color: #d12e11 !important;
}



/* ==== ANIMACIÓN SUAVE PARA LOS CUADROS DE HISTORIA/MISIÓN/VISIÓN ==== */
.fade-in {
    animation: aparecerSuave 0.5s ease forwards;
}

@keyframes aparecerSuave {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== SECCIÓN NOSOTROS - Misión/Visión/Historia ====== */

.nosotros-titulo {
    text-align: center;
    padding-top: 55px; /* Espacio antes del título */
}

.nosotros-titulo h2 {
    font-size: 39px;
    color: #0C2852;
    margin-bottom: 20px;
    /* 💥 FUERZA LA FUENTE Y EL PESO EN EL TÍTULO 💥 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 710;
}

.mision-vision-historia-fondo {
    background-color: #0E1F45; /* Fondo Azul Oscuro */
    padding: 40px 20px 80px 20px; /* Padding ajustado */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.subtitulo-nosotros {
    max-width: 800px;
    margin: 0 auto 50px auto;
    color: #fff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de los Iconos (Botones) --- */
.contenedor-iconos {
    display: flex;
    justify-content: center;
    gap: 74px; /* Espacio entre los 3 botones */
    max-width: 850px;
    margin: 0 auto;
    border-bottom: 2px solid #ffffff; 
    padding-bottom: 45px; /* Asegura espacio entre los botones y la línea */
}

.icono-item {
    cursor: pointer;
    text-align: center;
    color: #fff;
    transition: transform 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.icono-item:hover {
    transform: translateY(-5px); /* Efecto al pasar el mouse */
}

.icono-circulo {
    width: 120px;
    height: 120px;
    background-color: #FFCE2B; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    box-shadow: 0 9px 3px rgba(0, 0, 0, 0.5); 
    transition: background-color 0.3s ease; 
}


/* 🔽 Ajuste solo para el icono de HISTORIA (tercer círculo) */
.contenedor-iconos .icono-item:nth-child(3) .icono-circulo {
    margin-top: 1px;
}

/* El HOVER para el color azul */
.icono-item:hover > .icono-circulo {
    background-color: #FF9500 !important;
}


/* NUEVOS ESTILOS PARA LA IMAGEN DENTRO DEL CÍRCULO */
.img-icono {
    width: 58px; 
    height: auto;
}

.icono-item h3 {
    margin: 0;
    font-size: 22px;
    color: #fff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
}

/* --- Cuadro de Información Desplegable --- */
.info-desplegable {
    position: relative;
    margin: 20px auto 0 auto;
    max-width: 1150px;
    background-color: transparent;
    border-radius: 15px;
    box-shadow: none;
    text-align: left;
    min-height: 0px; 
    padding: 0;
    box-shadow: none;
    transition: all 0.4s ease; 
}

.info-content {
    font-family: 'Montserrat', sans-serif;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: #ffffff;
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: 0.4s ease, transform 0.3s ease;
    padding: 0 25px;
}

.info-content.activo {
    opacity: 1;
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 20px auto; 
    max-height: 600px;
}

.info-content h3 {
    color: #0C2852;
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.info-content p {
    color: #333;
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
}

/* ====== DISEÑO DE HISTORIA ====== */

.info-content#historia-info {
   max-width: 100%;
}


.info-content#historia-info.activo {
    display: block !important;
    /* Redefinimos el padding y margin solo para Historia, asegurando que se aplique */
    padding: 50px 40px; 
    max-width: 1100px;
    margin: 50px auto;
}


.info-content#historia-info .contenido-historia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: nowrap;
}

.info-content#historia-info .texto-historia {
    flex: 1 1 55%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-content#historia-info .texto-historia h3 {
    font-size: 2em;
    color: #0c0663;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 3px 3px rgba(150, 117, 27, 0.521); 
}


.info-content#historia-info .texto-historia p {
    margin-bottom: 14px;
    line-height: 1.7;
    color: #333;
    font-size: 1.05em;
    text-align: center;
}

.info-content#historia-info .imagenes-historia {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    width: 350px;
    margin: 0 auto;
}

.info-content#historia-info .imagenes-historia img:first-child {
    width: 250px;
    position: relative; 
    top: -15px; 
    left: 10px; 
    z-index: 2;
}

.info-content#historia-info .imagenes-historia img:last-child {
    width: 250px;
    position: relative;
    top: 5px;
    left: -50px; 
    z-index: 1;
    opacity: 0.95;
}


.info-content#historia-info .imagenes-historia img {
    width: 50%; 
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    object-fit: cover;
    width: 250px; 
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    object-fit: cover;
}



/* ========================================================= */
/* ====== DISEÑO UNIFICADO PARA MISIÓN Y VISIÓN (SIN IMÁGENES) ====== */
/* ========================================================= */

/* 1. ESTILO DEL CONTENEDOR PRINCIPAL (APLICA A MISIÓN Y VISIÓN) */
.info-content#mision-info,
.info-content#vision-info {
    max-width: 1100px;
    text-align: center;
}

.info-content#mision-info.activo,
.info-content#vision-info.activo {
    /* Redefinimos el padding para Misión/Visión, asegurando que el padding-top/bottom
       sobreescriba los 25px por defecto del .activo, pero el max-height sigue viniendo de JS */
    padding: 50px 80px;
    margin: 50px auto;
}

/* 2. ESTILO DEL TÍTULO DENTRO DEL CUADRO */
.info-content#mision-info h3,
.info-content#vision-info h3 {
    font-size: 2em;
    color: #0c0663;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 3px 3px rgba(150, 117, 27, 0.521);
}

/* 3. ESTILO DEL PÁRRAFO DENTRO DEL CUADRO */
.info-content#mision-info p,
.info-content#vision-info p {
    margin-bottom: 14px;
    line-height: 1.7;
    color: #333;
    font-size: 1.05em;
    text-align: center;
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}


/* ====== SECCIÓN CONTÁCTANOS ====== */

.contacto-seccion {
    background-color: #f9f9f9; /* Color de fondo gris claro (el mismo del body) */
    padding: 60px 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.contacto-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.contacto-seccion h2 {
    font-size: 35px;
    color: #0C2852; /* Azul oscuro */
    margin-bottom: 10px;
}

.contacto-subtitulo {
    font-size: 20px;
    color: #0C2852;
    margin-bottom: 15px;
}

.contacto-subtitulo .separador-subtitulo {
    display: block; /* Esto obliga a "Escríbenos..." a bajar a una nueva línea */
    margin-top: 18px; /* Sube o baja este valor (10px, 20px, etc.) a tu gusto */
}

/* ====== SECCIÓN CONTÁCTANOS ====== */

/* --- Estilos de la Caja con la Imagen de Fondo Opaca --- */
.contacto-caja-principal {
    position: relative;
    width: 100%;
    min-height: 193px; 
    background: url("img/fondocontacto.png") center center/cover no-repeat;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.contacto-caja-principal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8); /* Opacidad al 70% */
    z-index: 1;
}

/* Contenedor de los botones */
.contacto-contenido-botones {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 80px;
    padding: 30px;
    align-items: center; /* Centra los botones en el medio de la caja */
}

/* --- Estilos de los Botones de Redes Sociales --- */
.btn-red-social {
    display: flex;
    flex-direction: row; /* Ícono al lado del texto */
    align-items: center; /* Centra el ícono y el texto en la línea media */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size:  20px;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), /* Sombra blanca principal, alta opacidad */
                0 0 20px rgba(255, 255, 255, 0.3); 
                
    background: none;
    box-shadow: none;
    /* Reducimos el padding horizontal si es necesario */
    padding: 5px 10px; 
    border-bottom: none;
    transition: none;
}

/* 💥 ESTILO GENERAL DE LOS ÍCONOS (WhatsApp y base de Instagram) 💥 */
.btn-red-social img {
    /* Tamaño del círculo y la imagen */
    width: 75px;
    height: 75px;
    
    /* Separación y círculo blanco */
    margin-right: 25px; /* Más separación entre el ícono y el texto */
    margin-bottom: 0;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), /* Sombra blanca principal, alta opacidad */
                0 0 20px rgba(255, 255, 255, 0.2); 

} 

/* 💥 ESTILO ESPECÍFICO PARA INSTAGRAM 💥 */
.btn-red-social.instagram img {
    width: 75px; /* Tamaño de Instagram más grande */
    height: 75px;
}


/* 💥 BLOQUE FINAL: LA LÍNEA SÓLO EN EL TEXTO 💥 */
.btn-texto-enlace {
    padding-bottom: 5px;
    display: inline-block; /* CLAVE para que el borde funcione en texto */

    font-size: 20px;
    border-bottom: 2px solid transparent; 
    transition: border-bottom 0.3s ease;
}

.btn-red-social:hover .btn-texto-enlace {
    /* El borde visible con color aparece solo al pasar el mouse */
    border-bottom: 3px solid #FFFFFF;
}




/* ========================================================= */
/* ====== SECCIÓN NUESTRAS ALIANZAS (PROVEEDORES Y ALIÓN) ====== */
/* ========================================================= */
.seccion-alianzas {
    background-color: #f9f9f9; 
    padding: 65px 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.alianzas-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Raya divisoria SUPERIOR (La línea azul ancha al inicio de la sección) */
.linea-divisoria {
    width: 100%;
    height: 4px; 
    background-color: #0C2852; 
    margin: 0 auto 50px auto; 
}

/* Estilo para los títulos (h2) */
.seccion-alianzas h2 {
    font-size: 35px;
    color: #0C2852; 
    margin-top:-18px;
}

/* Estilo para los subtítulos (incluye el texto debajo de ALIÓN) */
.alianzas-subtitulo {
    font-size: 19px;
    color: #0C2852;
    margin-bottom: 50px; /* Separación después del subtítulo de ALIÓN */
}

/* --------------------------------------------------------- */
/* --- 1. ESTILOS DEL BANNER ALIÓN (Alianza Principal) --- */
/* --------------------------------------------------------- */

.alianza-principal {
    /* Separación del bloque ALIÓN de lo que sigue (el título de Proveedores) */
    margin-bottom: 30px; 
}

/* Esto es CLAVE para que la imagen de ALIÓN no se salga/mueva */
.alianza-principal .img-principal-alianza {
    max-width: 100%; 
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); 
    margin-bottom: 20px; 
}


/* --------------------------------------------------------- */
/* --- 2. ESTILOS DE LA CUADRÍCULA DE MARCAS (LAS BOLAS) --- */
/* --------------------------------------------------------- */

.alianzas-grid-marcas {
    max-width: 1000px;
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio ajustado para que quepan 4 marcas grandes */
    margin-bottom: 50px; /* Reducido para acercar al texto de cierre */

    flex-wrap: wrap; 
    padding: 0 11px;
    margin-left: auto;
    margin-right: auto;
}




.marca-item {
    text-align: center;
    width: calc(25% - 22.5px); 
    min-width:220px; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    min-width: 190px;
}

/* ENVOLTORIO (LA "BOLITA" con SOMBRA y ANIMACIÓN) */
.marca-logo-wrapper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden; /* 🔹 recorta solo dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* opcional: fondo blanco detrás del logo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
}

/* HOVER: EFECTO DE SALTO Y SOMBRA FUERTE */
.marca-item:hover .marca-logo-wrapper {
    transform: translateY(-10px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6); 
    transition: all 0.4s cubic-bezier(0.25, 1.25, 0.5, 1); 
}


/* IMAGEN dentro de la "bolita" */
.marca-item img {
    width: 105%;
    height: 100%;
    border-radius: 50%;      /* círculo perfecto */
    object-fit: contain;      /* 🔹 mantiene proporción original */
    background-color: transparent;    /* 🔹 sin fondo blanco */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); /* 🔹 sombra solo de la foto */
    padding: 10px;    
}

.marca-item .nombre-marca {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #0C2852;
    margin-bottom: -3px;
}


/* --------------------------------------------------------- */
/* --- 3. ESTILOS DEL TEXTO DE CIERRE Y LÍNEA FINAL --- */
/* --------------------------------------------------------- */
.texto-cierre-proveedores {
    text-align: center; /* ESTO CENTRA TODO EL TEXTO DENTRO DEL PÁRRAFO */
    font-size: 18px; 
    color: #333;
    line-height: 1.6;
    font-weight: 500; /* Asegura que el resto del texto no esté en negrilla */
    
    margin-top: 75px;
    margin-bottom: 30px;
    
    max-width: 700px; /* Limita el ancho del bloque de texto */
    margin-left: auto;
    margin-right: auto;
}

.texto-cierre-proveedores strong {
    font-weight: bold; /* El estilo de negrilla */
    color: #0C2852; /* Opcional: Usar tu color azul principal para que resalte más */
}

/* 🔶 Línea naranja inferior (debajo de proveedores) */
.linea-proveedores-divisoria {
    width: 100%;
    max-width: 910px; 
    height: 5px; 
    background-color: #ffb100; /* Color corporativo */
    margin: 0 auto 5px auto; /* ⬇️ Reducimos margen inferior para acercar el texto */
}


/***********************/

/* 🔵 Bloque del contacto final */
.seccion-cierre-contacto {
    max-width: 900px;
    margin: -5px auto 0 auto; /* ⬆️ Lo subimos un poco */
    text-align: center;
    padding-bottom: 105px; /* espacio antes del footer */
}

/* ✳️ Título “Contacto Directo” */
.seccion-cierre-contacto h3 {
    font-size: 35px; /* Más grande */
    color: #0C2852;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-top: 10px; /* Lo acercamos más a la línea naranja */
    margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(102, 100, 100, 0.3);
}

/* 📞 Texto descriptivo */
.seccion-cierre-contacto p {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #303345;
    margin-bottom: 20px;
}

/* 📱 Número de teléfono (botón) */
.numero-telefono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border: 2px solid #05166B;
    border-radius: 10px;
    text-decoration: none;
    font-size: 23px;
    font-weight: 705;
    color: #303345;
    margin-top: 25px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease; /* suave efecto al pasar el mouse */
}


/* Estilo para tu IMAGEN de teléfono */
.icono-llamada {
    width: 40px; 
    height: 40px; 
    margin-right: 12px; 
    object-fit: contain; 
    /* vertical-align puede ayudar a centrar la imagen si es necesario */
    vertical-align: middle; 
}

/* Efecto Hover */
.numero-telefono:hover {
    background-color: #0C1747;
    color: white;
    transform: translateY(-3px); /* pequeño levantamiento visual */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* Efecto Hover para la imagen (si es SVG o si el efecto de color invertido funciona) */
.numero-telefono:hover .icono-llamada {
    filter: invert(1) grayscale(100%) brightness(200%); 
}

/* ========================================================= */
/* --- 0. CLAVES para el STICKY FOOTER (DEJAR ESTO INTACTO) --- */
/* ========================================================= */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}



/*--------------------------------------------------------------------------------------------*/

/* --- NUEVO: Diseño en dos columnas para la sección de contacto --- */
.contacto-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contacto-info, 
.contacto-mapa {
  flex: 1;
  min-width: 300px;
}

/* Título del mapa */
.contacto-mapa h3 {
  font-size: 35px;
  color: #0C2852;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 10px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(85, 81, 81, 0.3);
    }

/* Link debajo del mapa */
.link-mapa {
  display: inline-block;
  margin-top: 10px;
  color: #0C2852;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #FFA500;
  transition: 0.3s ease;
}

.link-mapa:hover {
  color: #221072;
  border-color: #FF5500;
}





/* ========================================================= */
/* ====== NUEVA SECCIÓN: DETALLE DE PRODUCTOS POR CATEGORÍA ====== */
/* ========================================================= */

.productos-detalle {
    /* Fondo: Asegúrate que el fondo sea el mismo que el body para el efecto de "hoja limpia" */
    background-color: #f9f9f9; 
    padding: 60px 30px 80px 30px; /* Padding ajustado para verse limpio */
    max-width: 1010px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    /* transition: opacity 0.4s ease; (Opcional: Si quieres un fade-in al aparecer) */
}

/* --- Encabezado y Botón Volver --- */
.productos-header {
    display: flex;
    flex-direction: column; /* Apila el botón y el título */
    align-items: flex-start; /* Alinea todo a la izquierda */
    margin-bottom: 40px;
}

.productos-detalle h2 {
    font-size: 38px;
    color: #0C2852;
    font-weight: 700;
    margin-top: 15px; /* Separación después del botón */
    margin-bottom: 0;
}

.btn-volver {
    background-color: #0E1F45; /* Azul oscuro (como tu fondo de misión) */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre la flecha y el texto */
    /* Aseguramos que se vea arriba */
    z-index: 5;
}

.btn-volver:hover {
    background-color: #FFA500; /* Amarillo/Naranja de tu marca */
    transform: translateY(-2px);
}


/* --- Cuadrícula de Productos --- */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 45px;
}

.producto-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.producto-card img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 15px;
}

.producto-card h3 {
    text-align: center;
    font-size: 18px;
    color: #002855;
    margin-top: 10px;
    margin-bottom: 10px;
}

.producto-card p {
    font-size: 16px;
    color: #ff5500; /* Puedes usar un color que resalte para el precio */
    font-weight: bold;
    margin: 0;
}



/* ======= FOOTER ======= */

/* Línea amarilla */
.linea-footer-superior {
    width: 100%;
    height: 5px;
    background-color: #ffb100; /* amarillo/naranja corporativo */
    margin: 0;
    padding: 0;
}

/* Fondo azul y texto centrado */
footer.site-footer {
    background-color: #0C2852; /* azul oscuro corporativo */
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding: 15px 0;
    margin: 0;
    width: 100%;
}

footer.site-footer .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 10px;
}

/*--------------------------------------------------------------*/
/*ANIMACION DE WHATSAPP */

@keyframes bounce-saltico {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Posición normal */
    }
    40% {
        transform: translateY(-15px); /* Salta hacia arriba 15px */
    }
    60% {
        transform: translateY(-8px); /* Baja un poco y vuelve a subir */
    }
}


/*Burbuja flotante*/
.whatsapp-flotante {
    /* Posicionamiento Fijo (para que flote al hacer scroll) */
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 1000;
    background-color: #ffffff; 
    border-radius: 50%;
    border: 3px solid #70aa40;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: transform 0.3s ease;
 
}

.whatsapp-flotante:hover {
    transform: scale(1.1);
    animation: bounce-saltico 1s forwards;
}

.whatsapp-flotante img {
    width: 30px; 
    height: 30px;
    display: block;
}


/* ====== BOTÓN FLOTANTE DE INSTAGRAM ====== */
.instagram-flotante {
    position: fixed;
    bottom: 90px; /* Más arriba que el de WhatsApp */
    right: 20px;
    z-index: 1000;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #E1306C; /* Color del borde estilo Instagram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: transform 0.3s ease;
}

.instagram-flotante:hover {
    transform: scale(1.1);
    animation: bounce-saltico 1s forwards; /* Usa la misma animación de salto */
}

.instagram-flotante img {
    width: 30px;
    height: 30px;
    display: block;
}





/*------------------------------------------------------------------------------------*/
/* ====== CONTENEDOR PRINCIPAL DE ICONO SOLO ====== */
.boton-contacto-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* ====== BOTÓN PRINCIPAL ====== */
.boton-contacto {
    width: 45px;  
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #1f3477; /* color llamativo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.boton-contacto:hover {
    transform: scale(1.1);
}

.boton-contacto img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    
}

/* ====== BOTONES SECUNDARIOS (OCULTOS) ====== */
.botones-secundarios {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 70px;
    right: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    pointer-events: none;
}

/* ====== BOTÓN ACTIVO (DESPLEGADO) ====== */
.boton-contacto-container.activo .botones-secundarios {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ====== ESTILOS DE LOS BOTONES ====== */
.boton-secundario {
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: transform 0.3s ease;
}

.boton-secundario:hover {
    transform: scale(1.1);
}

/* BORDES PERSONALIZADOS */
.boton-secundario.whatsapp {
    border: 3px solid #70aa40;
}

.boton-secundario.instagram {
    border: 3px solid #E1306C;
}

/* ÍCONOS */
.boton-secundario img {
    width: 28px;
    height: 28px;
    display: block;
}



/* ======================================================= */
/* ESTILOS DE VENTANA EMERGENTE (MODAL) */
/* ======================================================= */

.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(8, 11, 29, 0.7); 
    transition: opacity 0.3s ease;
}

/* Contenido del Modal: La caja blanca de información */
.modal-content {
    background-color: #fefefe;
    margin: 8% auto;
    padding: 30px; 
    border-radius: 15px;
    width: 90%;
    max-width: 850px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* --- ESTRUCTURA DE DOS COLUMNAS --- */
.modal-grid-layout {
    display: grid;
    grid-template-columns: 35% 65%; 
    gap: 20px; 
    padding: 0;
}


#zoom-lens {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: none;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 200%;
    z-index: 10;
}



/* --- COLUMNA DE IMAGEN --- */
.modal-image-column {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #686161; 
    padding-right: 10px;

    position: relative; 
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
    cursor: crosshair
}


.modal-zoom-area {
    width: 100%;
    height: 100%;
    background-size: 200%; /* La imagen de fondo es 2 veces más grande */
    background-repeat: no-repeat;
    background-position: center center;
    cursor: crosshair;
}

.zoom-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200%;
    display: none;
    cursor: zoom-in;
}

/* Ajuste de imágenes uniformes dentro del Modal */
.modal-img {
    width: 100%; 
    max-height: 250px;
    object-fit: contain;
    margin: 0; 
    padding: 0;
    background-color: transparent; 
    display: block; 
    border-radius: 8px;
}


/* --- COLUMNA DE INFORMACIÓN --- */
.modal-info-column {
    padding-left: 20px;
    
}

/* Título del Producto */
.product-title {
    font-size: 32px;
    color: #0C2852; 
    font-weight: 800;
    margin-bottom: 25px;
    text-align: left; /* Título siempre alineado a la izquierda */
    text-transform: uppercase;
    line-height: 1.2;
}

/* Contenedor del Precio (Fondo azul oscuro) */
.price-container {
    background-color: #0C2852;
    display: block; 
    width: fit-content; 
    margin: 0 auto 25px auto; 
    padding: 8px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.price-tag {
    /* Estilos de fuente dentro del contenedor azul */
    background-color: transparent; 
    color: #fff;
    font-size: 26px; 
    font-weight: 800;
    padding: 0;
    margin: 0;
    text-shadow: none;
    box-shadow: none;
}

/* Título 'DESCRIPCIÓN' */
.description-title {
    font-size: 16px;
    color: #0C2852;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid #686161;
    padding-bottom: 5px;
    width: 250px;
    display: block;
    margin-left: 0;
}

/* Descripción del Texto (Justificado) */
.description-text {
    font-size: 14px;
    color: #000000;
    line-height: 1.6;
    text-align: justify;
    margin-left: -5px;
    margin-right: 38px;
}

/* Botón de cierre */
.close-btn {
    color: #1b1a1a;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #0C2852;
}





/***********************************************************************************/
@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    main {
   margin-top: 0 !important;
        padding-top: 0 !important
    }


    /* --- BARRAS SUPERIORES (Reducidas) --- */
.barra-negra { 
        height: 4px; 
        position: relative; 
        margin-top: 60px; 
        width: 100%;
        z-index: 999;
    } 

    /* --- 3. BARRA AZUL - Fija debajo de la Barra Negra --- */
    .barra-azul { 
        height: 25px; 
        position: static; 
        top: 63px; 
        left: 0;
        width: 100%;
        z-index: 999;
    }

    /* --- HEADER Y CONTENEDOR (Compactado) --- */
    .site-header {
       position: fixed; 
        top: 0; 
        left: 0;
        width: 100%; 
        z-index: 1000; 
        transition: none;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        background-color: #ffc72c;
    }
    
    .header-inner {
        display: flex;
        padding: 0 10px;
        flex-wrap: nowrap; /* Mantenemos una sola fila */
        align-items: center;
        justify-content: space-between; 
        max-width: 100%;
        position: relative;
        z-index: 1000;
    }

    
    /* Reducción visual cuando el header se esconde (sticky) */
    .site-header.hidden { transform: none !important;  }


   .site-header.menu-open { 
    min-height: auto; /* Ya no necesitamos estirar el header contenedor */
    align-items: center; 
    transform: none !important;
}

    div.linea-hero { /* Reemplaza 'linea-hero' por el nombre de la clase de tu primer contenedor dentro de main */
        padding-top: 88px !important;
    }


    /* === ORDEN DE LOS ELEMENTOS EN MÓVIL (Una fila) === */
    .brand { order: 2; width: 95px; flex-shrink: 0; }
    .menu-toggle { order: 1; display: flex; z-index: 1003; flex-shrink: 0; padding: 20px 0; width: 35px; }



    /* --- ESTADO NORMAL: El color de la raya en el fondo AMARILLO (Se ven AZULES) --- */
.menu-toggle span {
    background-color: #181818; /* Azul Oscuro (el color de tu texto) */
    transition: background-color 0.3s ease; /* Transición suave */
}

/* --- ESTADO AL ABRIR: El color de la raya en el fondo AZUL OSCURO (Se ven BLANCAS) --- */
/* Cuando el header tiene la clase 'menu-open', las rayas se ponen blancas. */
.site-header.menu-open .menu-toggle span {
    background-color: white; 
}


    .logo { width: 110px; } /* Mantenemos este para la imagen */

    /* === 2. BARRA DE BÚSQUEDA (Primera Fila, Centro y Ancha) === */
    .search-bar {
        display: none !important;
        
    }

    .search-bar input::placeholder { color: #999; }
    

    
    .search-button .search-icon {
        width: 22px; 
        height: 22px;
        margin-right: 0; /* Eliminamos el margen del ícono si lo hay */
    }
    
    /* Ocultamos los elementos de búsqueda antiguos que no se usan */
    .search-toggle { display: none; } 
    .search-floating { display: none !important; }



    /* Nuevo CSS fuera del @media o dentro, pero con !important */
.search-bar-desplegable {
    display: none; /* Para que el input y botón queden en línea */
    height: 0; /* Oculto por defecto */
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    background-color: #ffc72c; /* Color que elijas para la barra desplegada */
    padding: 0 15px;
    align-items: center;
    position: relative;
    z-index: 999;
    margin-left: 10px;
    margin-right: 13px;
    
}

.search-bar-desplegable.active {
    height: 50px; /* Altura visible */
    opacity: 1;
    padding: 10px 15px; /* Padding visible */
    display: block;
}

/* Estilos del input dentro de la barra desplegable */
.search-bar-desplegable input {
   width: 100%;
    height: 30px;
    border: none !important;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 

}

.search-bar-desplegable input:focus {
    outline: none !important;
  
}


.search-bar.active .search-button {
    display: none; /* Oculta la lupa cuando la barra está desplegada */
}

#search-bar-desplegable-mobile .search-button-mobile-action {
    display: none !important; 
}

.search-button-mobile-action {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
}


.search-button.mobile-toggle {
   order: 3; /* OK: Posicionamiento a la derecha */
    display: flex; /* OK: Asegura visibilidad y centrado */
    flex-shrink: 0;
    width: 45px; 
    height: 45px;
    background-color: transparent; /* OK: Transparente para que solo se vea la lupa */
    border: none; 
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 105; 
    padding: 0
}

.search-button.mobile-toggle .search-icon {
    width: 22px; 
    height: 22px;
    margin-right: 0;
    /* Ajusta el color si es necesario, e.g., filter: invert(30%); */
}



    /* === NAVEGACIÓN (Menú Desplegable) === */
    .nav-header {
   
  display: block;
    position: fixed; 
    top: 0; 
    right: auto !important; 
    left: 0 !important; /* <--- La tarjeta está anclada a la izquierda */
    width: 65%; 
    max-width: 250px;
    height: 100vh; 
    padding-top: 60px;
    background-color: #0E1F45; 
    box-shadow: none; 
    
    z-index: 1001; 
    overflow-y: auto; 
    transform: translateX(-100%) !important; 
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease;

    }



    /* ... el resto de estilos del menú y el hero se mantienen ... */
    
.nav-header.active { 
    display: block;
   transform: translateX(0) !important;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.7);

}

.nav-header ul {
 list-style: none;
    padding: 0; 
    margin: 0; 
    display: flex;
    flex-direction: column; 
    
    /* ¡CLAVE: REINTRODUCIR ESTA LÍNEA PARA CENTRAR HORIZONTALMENTE LOS LI! */
    align-items: center !important; 
    
    justify-content: flex-start;
    height: 100%; 
    padding-top: 20px; 
    box-sizing: border-box;
}


.nav-header li { 
    width: 100%; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;

    display: flex;
    justify-content: center; /* CLAVE: Centra horizontalmente el A (que ya no es 100% ancho) */
    align-items: center;
}

.nav-header a { 
    color: #ffd138;
    font-size: 18px; 
    padding: 10px 25px; 
    display: flex; 
    align-items: center; /* ESTO ES LO QUE ALINEA EL ÍCONO Y EL TEXTO VERTICALMENTE */
    width: auto; /* Ocupa todo el ancho */
    
    position: relative; 
    overflow: hidden;
    line-height: 1.5; /* Ayuda a la alineación vertical */
    white-space: nowrap;
}

.nav-header a img {
filter: brightness(0) invert(1);

}

.nav-header a::after {
   content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* CLAVE: Punto de anclaje para centrar */
    width: 50px; 
    height: 3px; 
    border-radius: 8px; 
    background-color: #ffd138;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.nav-header a.active::after {
    transform: translate(-50%, 0); /* Lo sube a su posición visible (bottom: 0) */
    opacity: 1;

}

.nav-header a:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; 

}


/*******************************/


.hero { 
    /* Volvemos a 50px de padding arriba para que no se pegue al borde. */
    height: 230px; 
    margin-top: auto; 
    padding-top: auto; 
    padding-bottom: 35px !important; /* Reducimos el padding de ABAJO */
    min-height: auto;
}

.hero-content { 
    margin: 0 auto; 
    max-width: 90%; 
    padding: 0 10px 0 10px; /* Reducimos el padding interno del contenido */
    text-align: center; 
}

.hero-content h1 { 
    font-size: 24px; 
    margin-bottom: 5px; /* Reducimos el espacio debajo del título principal */
}

.hero-content p { 
    font-size: 14px; 
    margin-bottom: 15px !important; 
    display: block; 
    font-weight: normal;
}

.btn-cta { 
   padding: 10px 15px; 
    font-size: 13px; 
    max-width: 220px; 
    display: inline-block !important; /* Hazlo inline-block para que se ajuste al contenido */
    margin-top: 0 !important; 
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-5px);
}

.prev, .next { 
    font-size: 11px; 
    padding: 5px; 
    background: rgba(73, 73, 73, 0.018); 
}
.prev { left: 3px; }
.next { right: 3px; }
.dot { width: 10px; 
    height: 2px; /* Asumiendo que la línea es delgada, ajusta la altura si es necesario */
    border-radius: 0; /* Asegura que no sea un círculo */
    position: relative;
    top: 9px; }


/* === ANIMACIONES PARA MÓVIL === */
@keyframes slideInDown {
    from { transform: translateY(-100%); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}


/***************************************************************************************************************************************/

/* --- BASE DE LA SECCIÓN DE CATEGORÍAS --- */
   
    .categorias-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; /* Reducimos el gap a 8px */
        padding: 0 15px; /* Padding lateral muy pequeño */
    }

    .categoria-card {
        margin: 0 auto;
        max-width: 150px;
        width: 100%;
        height: auto;
        justify-self: center;
        margin-top: 12px !important;
        overflow: hidden;
        border-radius: 10px; /* Bordes más pequeños */
        padding: 12px 8px; /* Padding interno más compacto */
        min-height: 180px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffffff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);/* Sombra más sutil */
    }


.categoria-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
}


    .categoria-card img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    min-height: 0;
    }

.categoria-img-wrapper {
    width: 100%;
    height: 90px; /* <--- ¡CLAVE! Damos una altura fija para todos los wrappers */
    display: flex;
    justify-content: center; /* Centra horizontalmente la imagen */
    align-items: center;   /* <--- ¡CLAVE! Centra verticalmente la imagen */
    overflow: hidden; /* Esto es bueno para evitar que la imagen se salga */
    margin-bottom: 5px;
}

.categoria-img-wrapper img {
    max-height: 80px; /* <--- Limita la altura máxima de la imagen dentro del wrapper */
    max-width: 90%;  /* <--- Asegura que no se salga horizontalmente */
    width: auto;     /* Mantiene la proporción */
    object-fit: contain;
}

/* Selecciona las tarjetas 2, 4 y 5 */
    .categorias-grid .categoria-card:nth-child(2) .categoria-img-wrapper img,
    .categorias-grid .categoria-card:nth-child(4) .categoria-img-wrapper img,
    .categorias-grid .categoria-card:nth-child(5) .categoria-img-wrapper img {
        
        /* Aumentamos el tamaño máximo para esas imágenes específicas */
        /* Prueba con estos valores y ajusta según tu gusto */
        max-height: 90px; /* <--- Aumenta la altura máxima (ejemplo: 100px) */
        max-width: 90%;    /* Asegura que no se desborde horizontalmente */
    }



.categorias h2 {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 5px;
    font-size: 25px; /* antes era gigante */
}

.categorias .subtitulo {
   font-size: 15px;
    line-height: 1.2;
    max-width: 260px;
    margin: 0 auto 20px !important;   /* <-- ESTE 14px ES EL ESPACIO ABAJO */
    padding: 0 9px;      


}
  .categoria-card h3 {
    font-size: 14px;
    font-weight: 600;
    min-height: 28px; /* <--- Asegura espacio para 1 o 2 líneas, si fuera necesario */
    margin: 5px 0;
    line-height: 1.1;
    }

    .btn-vermas {
        font-size: 12px; /* Fuente más pequeña */
        padding: 5px 10px; /* Botón súper compacto */
        border-radius: 12px;
        margin-top: auto !important;
        margin-bottom: 0;
    }
    
    
    .productos-header {
        max-width: 100%;
        padding: 0 10px;
    }

    #productos-titulo {
        font-size: 28px;
        margin-top: 15px;
    }

    #btn-volver {
        padding: 6px 12px;
        font-size: 14px;
        margin-top: 10px; /* Separación del botón Volver del borde superior */
    }




    /* --- CUADRÍCULA DE PRODUCTOS (Para mostrar 2 por fila) --- */
 
    .productos-detalle {
        padding: 40px 10px; /* Reducimos el padding general para que quepa más contenido */
    }

    .productos-grid {
        /* Fuerza a dos columnas IGUALES. (Esto se ve bien en las imágenes que quieres) */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; /* Reducimos el espacio entre tarjetas */
    }

    /* === 2. Uniformidad de la Tarjeta (LA CLAVE) === */
    .producto-card {
        padding: 5px 8px; /* Reducimos el padding interno */
        min-height: 180px; 
        background: #ffffff;
        display: flex;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);/* Sombra más sutil */
        flex-direction: column;
        justify-content: flex-start; /* Distribuye espacio entre imagen/título/precio */
    }


.producto-img-wrapper {
        width: 100%;
        height: 100px; /* Mantener la altura del wrapper si quieres imágenes pequeñas */
        display: flex;
        justify-content: center; /* Centrar horizontalmente (ya lo tienes) */
        align-items: center; 
        overflow: hidden;
        margin-bottom: 0px; 
    }


    /* === 3. Control de la Imagen (Hacerlas más pequeñas) === */
    .producto-card img {
       max-height: 90px; /* Ajustamos un poco la altura máxima de la imagen para darle más aire */
        max-width: 90%; /* Aseguramos que no se desborde horizontalmente */
        object-fit: contain; 
        margin-bottom: 0;
    }


    /* === 4. Control del Título === */
    .producto-card h3 {
        font-size: 11px; /* El tamaño de fuente debe ser más pequeño en móvil (13px se ve bien) */
        line-height: 1.2; /* Espacio entre líneas */
        min-height: 38px; /* Un poco más de espacio (3-4 líneas pequeñas) */
        display: flex;
        align-items: center; 
        text-align: center;
        margin-top: 0px;
        margin-bottom: 2px;
    }

    /* === 5. Control del Precio === */
    .producto-card p {
        font-size: 13px; /* El precio debe ser visible pero más pequeño */
        margin-top: 2px;
        margin-bottom: 2px;
    }


/*********************************************************************************/

    /* ========================================================= */
    /* ====== SECCIÓN NOSOTROS - ADAPTACIÓN MÓVIL (ICONOS) ====== */
    /* ========================================================= */

    .nosotros-titulo {
        padding-top: 10px; /* Reducimos el espacio superior */
    }

    .nosotros-titulo h2 {
        font-size: 29px; /* Reducimos el tamaño del título principal */
        margin-bottom: 15px;
    }

    .mision-vision-historia-fondo {
        padding: 25px 15px 40px 15px; /* Reducimos el padding general del fondo */
    }

    .subtitulo-nosotros {
        font-size: 14px; /* Hacemos el subtítulo más pequeño */
        margin: 0 auto 30px auto; /* Reducimos el margen inferior */
        line-height: 1.5;
    }

    /* --- Adaptación de los Iconos (Botones) --- */
    .contenedor-iconos {
      
        gap: 20px; /* Reducimos el espacio entre ellos en móvil */
        flex-wrap: nowrap; /* Mantenemos en una línea si es posible, pero reducimos el tamaño */
        /* Si quieres apilarlos uno sobre otro, usa: flex-direction: column; */
        
        border-bottom: none; /* Quitamos la línea separadora si no se ve bien */
        padding-bottom: 0; 
    }
    
    .icono-item {
     
        flex: 1 1 30%; /* Ocupan un tercio del espacio disponible */
    }

    .icono-circulo {
        width: 80px; /* ¡CLAVE! Reducimos el círculo de 120px a 80px */
        height: 80px;
        box-shadow: 0 5px 2px rgba(0, 0, 0, 0.4); /* Sombra más sutil y compacta */
        margin: 0 auto 10px auto;
    }

    .img-icono {
        width: 40px; /* Reducimos el icono interno de 58px a 40px */
    }


    .icono-item:hover > .icono-circulo {
        /* Usamos el color original del círculo en lugar del color de hover */
        background-color: #ffb224 !important; 
       
    }

    .icono-item:hover {
        transform: none; /* Anula el efecto translateY(-5px) */
    }


    .icono-item h3 {
        font-size: 16px; /* Reducimos el tamaño del texto Misión/Visión/Historia */
        font-weight: 600;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    }

    /* --- Cuadro de Información Desplegable --- */
    .info-content.activo {
        margin: 15px auto; /* Reducimos el margen superior/inferior del cuadro desplegado */
    }
    
    .info-content h3 {
        font-size: 20px; /* Título dentro del cuadro desplegable */
    }
    
    .info-content p {
        font-size: 14px; /* Párrafo dentro del cuadro desplegable */
    }

    /* ====== DISEÑO ESPECÍFICO DE HISTORIA PARA MÓVIL ====== */
    .info-content#historia-info.activo {
        padding: 20px 15px; /* Padding mucho más pequeño */
        max-width: 90%; 
        margin: 20px auto;
    }
    
    /* Forzamos que la imagen y el texto se APILEN en lugar de estar lado a lado */
    .info-content#historia-info .contenido-historia {
        flex-direction: column; /* Apilamos Texto y Fotos */
        gap: 15px;
    }
    
    /* Ocultamos o simplificamos el contenedor de imágenes en móvil */
    .info-content#historia-info .imagenes-historia {
        display: none; /* Ocultamos las imágenes complejas para ahorrar espacio */
        /* O si quieres mostrarlas, hazlas muy pequeñas y apiladas */
        /* width: 100%; display: block; */
    }

 
    
    .info-content#historia-info .texto-historia h3 {
        font-size: 22px;
        margin-bottom: 15px;
        margin-top: 10px;
        text-shadow: 2px 2px 4px rgba(102, 100, 100, 0.3);
    }
    
    .info-content#historia-info .texto-historia p {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 15px;
        margin-bottom: 12px;
        color: #000;
    }

/*---------------------*/

    .info-content#mision-info.activo {
            /* Reducimos el padding interno (ej: de 50px a 25px) */
            padding: 25px 20px; 
            /* Opcional: Reducimos el margen externo para que no se separe tanto de los iconos */
            margin: 15px auto; 
        }


         /* Opcional: Reducir el título 'Misión' si es necesario */
    .info-content#mision-info h3 {
        font-size: 24px; /* Un tamaño un poco más compacto que Historia */
    }
    
        .info-content#mision-info p {
        font-size: 12px; /* Reducimos la fuente del párrafo (ej: de 18px a 14px) */
        line-height: 1.4; /* Mantenemos una buena separación entre líneas */
        color: #000;
    }

   
.info-content#vision-info.activo {
        padding: 25px 20px; /* Padding interno más pequeño */
        margin: 15px auto; /* Margen externo más compacto */
    }

    /* AJUSTES ESPECÍFICOS PARA EL TEXTO DE VISIÓN */
    .info-content#vision-info h3 {
        font-size: 24px; /* Título un poco más compacto */
    }

    .info-content#vision-info p {
        font-size: 12px; /* Párrafo más pequeño */
        line-height: 1.4; 
        color: #000;

    }



/*_------------------------------------------------------------------------------------------*/


.contacto-seccion {
        padding: 40px 0; /* Reducimos el padding vertical */
    }

    .contacto-inner {
        padding: 0 15px; /* Reducimos el padding lateral para evitar que se pegue */
    }

    .contacto-seccion h2 {
        font-size: 30px; /* Reducimos el tamaño del título "Contáctanos" */
        margin-bottom: 8px;
    }

    .contacto-subtitulo {
        font-size: 17px; /* Reducimos el tamaño de "¿Tienes dudas...?" */
        margin-bottom: 10px;
    }
    
    .contacto-subtitulo .separador-subtitulo {
        /* Aseguramos que la segunda línea "Escríbenos..." esté bien espaciada */
        margin-top: 10px; /* Reducimos el margen superior de la segunda línea */
        font-size: 15px; /* Hacemos el texto del subtítulo más pequeño */
    }

    /* --- Caja con la Imagen de Fondo Opaca --- */
    .contacto-caja-principal {
        min-height: 120px; /* Reducimos la altura mínima de la caja */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    }

    /* Contenedor de los botones */
    .contacto-contenido-botones {
        flex-direction: column; 
        gap: 20px; /* Reducimos el espacio entre los botones apilados */
        padding: 20px 0;
        align-items: center;
    }

    /* --- Estilos de los Botones de Redes Sociales --- */
    .btn-red-social {
        /* En móvil, el ícono y el texto deberían seguir estando horizontal (row) */
        font-size: 18px; /* Reducimos el tamaño de la fuente del número/usuario */
        justify-content: center; /* Centramos todo el botón si el ancho no es 100% */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    }

    /* eTILO GENERAL DE LOS ÍCONOS (WhatsApp y base de Instagram) */
    .btn-red-social img {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 40px;  /* Tamaño del círculo/imagen */
        height: 40px;
        margin-right: 15px; /* Espacio entre ícono y texto */
        padding: 5px;
    } 

    .btn-red-social.instagram img {
        width: 40px;  /* Aseguramos que Instagram use el mismo tamaño */
        height: 40px;
    }


    /* Estilo para el texto del enlace (número y @usuario) */
    .btn-texto-enlace {
        font-size: 16px; /* Tamaño del número/usuario */
        border-bottom: none !important;
    }
    
    /* Opcional: Desactivamos el efecto hover/borde inferior en móvil */
    .btn-red-social:hover .btn-texto-enlace {
        border-bottom: none; 
    }

 
/**********************************************************************************/


.seccion-alianzas {
        padding: 40px 0; /* Reducimos el padding vertical */
    }

    /* Títulos y Subtítulos */
    .seccion-alianzas h2 {
        font-size: 26px; /* Hacemos más pequeño el título "Nuestros proveedores" */
        margin-top: -10px; /* Ajuste por el padding */
    }

    .alianzas-subtitulo {
        font-size: 16px; /* Hacemos más pequeño el texto "Trabajamos de la mano..." */
        margin-bottom: 60px; /* Reducimos el espacio después del subtítulo de ALIÓN */
        padding: 0 15px;
    }

    .linea-divisoria {
        margin: 0 auto 30px auto; /* Reducimos el margen antes del título */
    }

    /* --------------------------------------------------------- */
    /* --- 2. ESTILOS DE LA CUADRÍCULA DE MARCAS (LAS BOLAS) --- */
    /* --------------------------------------------------------- */
    
    /* Contenedor principal de marcas */
    .alianzas-grid-marcas {
        /* Eliminamos los márgenes laterales y padding extra */
        padding: 0 10px;
        gap: 20px 10px; /* Espacio vertical y horizontal reducido */
        justify-content: space-around; /* Asegura que se separen bien */
    }

    /* El contenedor de cada marca */
    .marca-item {
        /* CLAVE: Permitimos que quepan 2 elementos por fila */
        width: calc(50% - 15px); /* 50% menos la mitad del gap horizontal */
        min-width: unset; /* Quitamos el min-width que forzaba el tamaño en PC */
    }

    /* EL ENVOLTORIO DE LA BOLITA (REDUCCIÓN DEL TAMAÑO) */
    .marca-logo-wrapper {
        width: 110px; /* Reducción de 180px a 120px */
        height: 110px;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);  
    
    }

    /* IMAGEN dentro de la "bolita" */
    .marca-item img {
        padding: 5px; /* Reducimos el padding interno */
    }

    .marca-item .nombre-marca {
        font-size: 15px; /* Texto más pequeño debajo de la bolita */
    }

    /* --------------------------------------------------------- */
    /* --- 3. ESTILOS DEL TEXTO DE CIERRE Y LÍNEA FINAL --- */
    /* --------------------------------------------------------- */
    .texto-cierre-proveedores {
        font-size: 14px; 
        margin-top: 51px; /* Reducimos el margen superior */
        padding: 0 25px; /* Añadimos padding para que el texto no toque los bordes */
    }
    
    .linea-proveedores-divisoria {
        max-width: 100%; /* Aseguramos que ocupe todo el ancho */
    }
    
    /* Eliminamos el efecto hover en móvil para evitar el bug táctil */
    .marca-item:hover .marca-logo-wrapper {
        transform: none; 
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); 
    }



    /******************************************************************************************/

    .seccion-cierre-contacto {
        padding-bottom: 50px 15px; /* Reducimos el espacio antes del footer */
        margin-top: 20px;
    }
    
    /* 1. Contenedor de Flex (la clave del apilaje) */
    .contacto-container {
        /* Fuerza a que los elementos se apilen verticalmente */
        flex-direction: column; 
        /* Centramos el contenido cuando están apilados */
        align-items: center; 
        gap: 50px; /* Aumentamos el espacio entre "Contacto Directo" y "Ubícanos" */
        padding: 20px 15px; /* Ajustamos padding lateral */
    }

    /* 2. Bloques de Información y Mapa */
    .contacto-info, 
    .contacto-mapa {
        /* Aseguramos que cada bloque ocupe todo el ancho */
        width: 90%; 
        margin: 0 auto;
        min-width: unset; /* Deshabilitamos el min-width de PC */
        text-align: center; /* Aseguramos que el contenido interno se centre */
    }

    .contacto-mapa iframe,
    .contacto-mapa .map-embed { /* Usa la clase real de tu mapa */
        width: 100%; /* El mapa ocupa el 100% de su contenedor (90% de la pantalla) */
        height: 200px; /* <--- REDUCIMOS LA ALTURA AQUÍ (Ajusta este valor) */
        border-radius: 10px; /* Opcional: para que se vea más moderno */
    }



    /* 3. Estilos de Texto y Número */
    .seccion-cierre-contacto h3 {
        font-size: 28px; /* Reducimos el tamaño de los títulos */
        margin-top: 0;
    }

    .seccion-cierre-contacto p {
        font-size: 16px; /* Reducimos el texto descriptivo */
        padding: 0 10px;
    }
    
    /* 4. Número de Teléfono (Botón) */
    .numero-telefono {
        font-size: 20px;
        padding: 10px 15px;
        margin-top: 15px;
    }
    
    .icono-llamada {
        width: 30px; /* Ícono de llamada más pequeño */
        height: 30px; 
        margin-right: 8px; 
    }
    
    /* 5. Mapa (Título de Ubícanos y Link) */
    .contacto-mapa h3 {
        font-size: 28px; /* Mismo tamaño que el título de Contacto */
        margin-bottom: 10px;
    }

    .link-mapa {
        font-size: 15px;
    }
    
    /* Eliminamos efectos hover en móvil */
    .numero-telefono:hover {
        transform: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Revertimos la sombra */
    }

/***********************************************************************************************************/


/* Línea amarilla: se mantiene igual */
    .linea-footer-superior {
        height: 3px; /* Opcional: la hacemos un poco más delgada */
    }

    /* Fondo azul y texto */
    footer.site-footer {
        /* Reducimos el padding vertical para hacerlo más bajo */
        padding: 10px 0; /* <--- Ajuste CLAVE: de 15px a 10px */
        font-size: 13px; /* Reducimos el tamaño del texto para que se vea más pequeño */
    }

    /* El contenedor no necesita cambios, solo aseguramos el padding lateral */
    footer.site-footer .container {
        padding: 0 15px;

    }


/******************************************************************************************************/

    /* 1. CONTENEDOR PRINCIPAL */
    .boton-contacto-container {
        /* Se sugiere un ajuste de posición general para liberar espacio inferior */
        bottom: 15px; 
        right: 15px; 
    }
    
    /* 2. BOTÓN PRINCIPAL (Círculo Azul) */
    .boton-contacto {
        width: 40px; 
        height: 40px;
    }

    /* 3. ÍCONO DENTRO DEL BOTÓN PRINCIPAL */
    .boton-contacto img {
        width: 35px; /* Reducido de 40px */
        height: 35px;/* Reducido de 40px */
    }
    
    /* 4. BOTONES SECUNDARIOS (Whatsapp/Instagram) */
    .boton-secundario {
        padding: 8px; /* Reducido de 10px */
    }

    /* 5. ÍCONOS DENTRO DE BOTONES SECUNDARIOS */
    .boton-secundario img {
        width: 24px; /* Reducido de 28px */
        height: 24px;/* Reducido de 28px */
    }

    /* 6. AJUSTAR POSICIÓN DE DESPLIEGUE SECUNDARIO */
    .botones-secundarios {
        bottom: 55px; /* Ajustado por la reducción del botón principal */
        gap: 8px; /* Reducido de 10px */
    }


/**************************************************************************************************/

    /* === 1. Ajuste de la Ventana del Modal === */
    .modal-content {
        width: 90%; 
        margin: 10px auto; /* La subimos un poco para que no esté justo al centro */
        padding: 5px 8px; /* Reducimos el padding interno */
        max-height: 96vh; /* asegura que no se estireee */
        overflow-y: auto; /* Permite scroll solo en el contenido si es necesario */
        position: relative;
       
     }

    /* === 2. CLAVE: Forzar la Estructura Vertical (Apilar Contenido) === */
    .modal-grid-layout {

            grid-template-columns: 1fr; 
            gap: 10px;
            padding: 0; 
            margin: 0;
    }
    
    /* === 3. Columna de Imagen (Ajustes de tamaño y bordes) === */
    .modal-image-column {
        padding: 0; 
        display: flex; 
        text-align: center;
        border-right: none !important;
        height: 160px; /* Le damos 150px de altura para que la imagen pueda crecer */
        display: flex; /* Usamos flex para centrar */
        align-items: center; /* Centramos verticalmente */
        justify-content: center;
    }

    .modal-img {
       max-height: 150px !important; 
        max-width: 150px !important; 
        width: 100% !important; 
        height: 150px !important;
        
        margin: 0 auto 5px auto; 
        object-fit: contain;
    }

    /* === 4. Columna de Información (Texto Vertical) === */
    .modal-info-column {
        padding-left: 0; /* Quitamos el padding izquierdo que empujaba el texto */
        text-align: center; /* Centramos todo el contenido de texto */
        max-width: 95%;
        margin: 0 auto;
    }

    /* Título del Producto */
    .product-title {
        font-size: 16px; /* Reducimos el tamaño de fuente */
        margin-bottom: 5px;
        line-height: 1.2;
        text-align: center; /* El título debe estar centrado */
        margin-top: 0px !important;
    }

    /* Precio */
    .price-container {
        margin: 9px auto; 
    }
    .price-tag {
        font-size: 15px; /* Reducimos el tamaño del precio */
    }

    /* Título 'DESCRIPCIÓN' */
    .description-title {
        font-size: 14px;
        margin: 8px auto 5px auto; /* Centramos el título 'DESCRIPCIÓN' */
        width: 100%; /* Ocupa todo el ancho */
        border-bottom: 1px solid #686161; /* Borde más fino */
    }

    /* Descripción del Texto */
    .description-text {
        font-size: 12px;
        line-height: 1.5;
        text-align: left; /* Mantenemos justificado/izquierda para leer mejor */
        margin: 0 0 10px 0; /* Quitamos márgenes negativos y laterales */
    }

    /* Botón de cierre */
    .close-btn {
       position: absolute;
    top: 0px; /* Ajústalo para que esté en el borde superior */
    right: 5px; /* Ajústalo para que esté en el borde derecho */
    cursor: pointer;
    font-size: 28px;
    color: #333; /* Color oscuro para que contraste */
    font-weight: bold;
    z-index: 99999;
    }


    .close-btn:hover {
    color: #ff0000;
}

    
    /* Importante: Esos estilos de zoom y lupa no funcionan en móvil, asegúrate que estén ocultos */
    #zoom-lens, .zoom-area {
        display: none !important;
    }


/* Opcional: Centrar el contenido de la caja lightbox si es necesario */
#image-zoom-lightbox {
    display: flex; /* Esto es si quieres centrar con Flexbox */
    justify-content: center;
    align-items: center;
}


    #image-zoom-lightbox img { /* O el selector que uses para la imagen grande */
    display: block;
    margin: 50px auto; /* 50px de margen superior/inferior para separarla del borde */
    max-width: 90%; /* Máximo 90% del ancho del lightbox */
    max-height: 90vh; /* Máximo 90% del alto de la ventana (vh = viewport height) */
    
    object-fit: contain; /* Esto asegura que la imagen se vea completa sin cortar */
    background-color: white; /* Opcional: fondo blanco para contrastar con el azul */
    padding: 10px; /* Pequeño relleno para que no toque el borde */
    border-radius: 5px
}

}