/* ==========================================================================
   1. RESETEO GLOBAL (Asegura consistencia en todos los navegadores)
   ========================================================================== */
* {
    margin: 0;       /* Elimina márgenes exteriores heredados por defecto */
    padding: 0;      /* Elimina rellenos interiores heredados por defecto */
    box-sizing: border-box; /* Incluye rellenos y bordes dentro del tamaño total del elemento */
}

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* Tipografía limpia de lectura web */
    background-color: #f8f9fa;                  /* Fondo gris tenue para contrastar el encabezado */
    overflow-x: hidden;                         /* CLAVE: Evita scroll horizontal accidental en celulares */
}
/* ==========================================================================
   2. CONTENEDOR MAESTRO DEL ENCABEZADO (MÓVIL POR DEFECTO)
   ========================================================================== */
.encabezado-principal {
    position: fixed;                /* Desancla el menú y lo congela en la pantalla */
    top: 0;                         /* Lo pega exactamente al borde superior */
    left: 0;                        /* Lo alinea al extremo izquierdo */
    width: 100%;                    /* Fuerza a que abarque todo el ancho de la pantalla */
    display: flex;                  
    flex-direction: column;         /* ¡CORRECCIÓN MÓVIL! En celulares el logo va arriba y los links abajo */
    justify-content: center; 
    align-items: center;            
    background-color: rgba(255, 255, 255, 0.95); /* Blanco con 95% de opacidad */
    backdrop-filter: blur(10px);    /* Efecto esmerilado/cristal borroso */
    padding: 12px 15px;             /* ¡CORRECCIÓN MÓVIL! Margen reducido para evitar desbordamiento */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra para separarlo del contenido */
    z-index: 9999;                  /* Capa máxima: Asegura que el menú flote por encima de todo */
    gap: 10px;                      /* Espacio entre el logo y los enlaces en móviles */
}

/* ==========================================================================
   3. ESTILOS DE LA IDENTIDAD (Logo)
   ========================================================================== */
.logo-contenedor {
    display: flex;                  /* Alinea la imagen internamente */
    align-items: center;
    background: transparent; 
}

.logo-imagen {
    height: 40px;                   /* Altura un poco más compacta ideal para celulares */
    width: auto;                    /* Mantiene la proporción original */
    display: block;
}
/* ==========================================================================
   4. NAVEGACIÓN PRINCIPAL (Menú Adaptable)
   ========================================================================== */
.lista-enlaces {
    list-style: none;               /* Elimina las viñetas */
    display: flex;                  /* Distribución flexible */
    flex-wrap: wrap;                /* ¡CLAVE MÓVIL! Si los links no caben en pantallas mini, bajan de fila */
    justify-content: center;        /* Centra los enlaces en el espacio del móvil */
    gap: 5px;                       /* Distancia compacta para evitar que se desborden en celulares */
}
.enlace-menu {
    display: block;                 /* Expande el área clickeable */
    padding: 6px 10px;              /* Relleno balanceado para pantallas táctiles */
    color: #606161;                 /* Tono gris oscuro corporativo */
    text-decoration: none;          /* Remueve el subrayado */
    font-weight: 600;               /* Semi-negrita */
    font-size: 20px;                /* Fuente legible pero optimizada para celulares */
    transition: all 0.3s ease;      
}
.enlace-menu:hover {
    color: #007bff;                 /* Cambia a azul institucional */
}

.icono-flecha {
    font-size: 20px;
    margin-left: 2px;
    display: inline-block;
}
/* ==========================================================================
   5. MECANISMO INTERNO DEL MENÚ DESPLEGABLE
   ========================================================================== */
.item-desplegable {
    position: relative;             /* ANCLA: Base para el sub-menú flotante */
}

.sub-menu-desplegable {
    display: none;                  /* Estado inicial: Oculto */
    position: absolute;             
    top: 100%;                      
    left: 50%;                      /* ¡CORRECCIÓN MÓVIL! Centra el submenú respecto al enlace padre */
    transform: translateX(-50%);    /* Evita que el cuadro se desplace hacia la derecha de la pantalla */
    background-color: #ffffff;      
    min-width: 220px;               
    list-style: none;               
    border-radius: 6px;             
    padding: 6px 0;                 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); 

}

.enlace-sub-menu {
    display: block;
    padding: 10px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;            
    transition: background-color 0.2s ease;
}

.enlace-sub-menu:hover {
    background-color: #f1f3f5;      
    color: #007bff;                 
}

.item-desplegable:hover .sub-menu-desplegable {
    display: block;                 /* Vuelve visible el bloque en interacciones de escritorio */
}
/* ==========================================================================
   6. MEDIA QUERIES (TRANSFORMACIÓN A PANTALLAS GRANDES Y COMPUTADORAS)
   ========================================================================== */
/* Cuando la pantalla tiene un ancho mínimo de 768px, se activan estas reglas */
@media (min-width: 768px) {
    .encabezado-principal {
        flex-direction: row;            /* El menú regresa al formato horizontal de escritorio */
        justify-content: space-between; /* Distribuye: Logo izquierda, enlaces derecha */
        padding: 15px 50px;             /* Recupera tus espacios amplios originales */
        gap: 0;
    }

    .logo-imagen {
        height: 45px;                   /* El logo recupera sus 45px en pantallas grandes */
    }

    .lista-enlaces {
        gap: 20px;                      /* Mayor separación horizontal entre menús */
    }

    .enlace-menu {
        padding: 10px 18px;             /* Botones más grandes para interacción de mouse */
        font-size: 20px;                /* Texto original */
    }

    .sub-menu-desplegable {
        left: 0;                        /* En computadoras se alinea limpiamente al borde izquierdo */
        transform: none;                /* Quita el centrado forzado del móvil */
    }
}

/* ==========================================================================
   SECCIÓN DE BIENVENIDA (INICIO)
   ========================================================================== */
.seccion-bienvenida {
    padding: 100px 40px;            /* Espaciado interno generoso arriba y abajo */
    text-align: center;             /* Centra todos los textos de la sección */
    max-width: 950px;               /* Ancho máximo para una lectura cómoda en PC */
    margin: 90px auto 0 auto;       /* El margen superior evita que el menú fijo tape el texto */
    
    
}

/* Título Principal (H1) */
.titulo-bienvenida {
    color: #1a1a1a;                 /* Negro suave y elegante */
    margin-bottom: 24px;            /* Espacio de separación con el párrafo */
    font-size: 55px;                /* Tamaño imponente para pantallas grandes */
    line-height: 1.2;               /* Proporción para que las líneas no se encimen */
    font-weight: 800;               /* Letra gruesa de alto impacto visual */
    letter-spacing: -0.5px;         /* Compacta sutilmente las letras estilo premium */
    
}

/* Párrafo Descriptivo (P) */
.descripcion-bienvenida {
    color: #475569;                 /* Gris Slate moderno y muy legible */
    font-size: 22px;                /* Tamaño grande para lectura rápida */
    line-height: 1.7;               /* Interlineado amplio para dar aire al texto */
    font-weight: 400;               /* Grosor regular */
    max-width: 800px;               /* Contiene el párrafo para que no sea excesivamente largo */
    margin: 0 auto;                 /* Centra el bloque del párrafo */
}

/* ==========================================================================
   RESPONSIVO: Ajuste automático para Teléfonos Celulares
   ========================================================================== */
@media (max-width: 768px) {
    .seccion-bienvenida {
        padding: 60px 20px;         /* Reduce los espacios en pantallas pequeñas */
        margin-top: 120px;          /* Ajuste de margen por el menú móvil */
    }

    .titulo-bienvenida {
        font-size: 32px;            /* Reduce el título para que quepa bien en celular */
    }

    .descripcion-bienvenida {
        font-size: 17px;            /* Reduce el texto descriptivo para pantallas táctiles */
        line-height: 1.6;
    }
}




/* ==========================================================================
   7. SECCIÓN CON VIDEO DE FONDO DE PANTALLA COMPLETA
   ========================================================================== */
.seccion-nosotros-video {
    position: relative;             /* ANCLA: Necesario para fijar el video y la capa oscura dentro */
    overflow: hidden;               /* Evita que el video se salga de los márgenes de la sección */
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: stretch;
    min-height: 100vh;              /* OBLIGATORIO: Fuerza a la sección a medir toda la pantalla completa */
    padding: 60px;
    background-color: #000000;      /* Fondo negro de seguridad mientras carga el video */
}

/* --- CONFIGURACIÓN DEL VIDEO DE FONDO --- */
.video-fondo {
    position: absolute;             /* Lo independiza del flujo para que actúe como papel tapiz */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el video milimétricamente */
    width: 100%;
    height: 100%;
    object-fit: cover;              /* Estira y recorta el video para llenar toda la sección sin deformarse */
    z-index: 1;                     /* Capa más baja, va al fondo de todo */
}

/* Capa de tinte oscuro para dar contraste y legibilidad a las letras */
.capa-oscura-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* 55% de oscuridad sobre el video */
    z-index: 2;                     /* Se coloca justo encima del video */
}

/* --- COMPORTAMIENTO DEL TEXTO (Encima del video) --- */
.bloque-texto-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;                     /* Capa alta: Flota por encima de la capa oscura */
}

.subtitulo-grid {
    color: #3b9eff;                 /* Azul más claro y brillante para el fondo oscuro */
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.titulo-grid {
    font-size: 38px;
    color: #ffffff;                 /* Texto blanco para máxima legibilidad */
    margin-bottom: 20px;
}

.descripcion-grid {
    font-size: 20px;
    color: #e0e0e0;                 /* Gris muy claro para lectura cómoda sobre oscuro */
    line-height: 1.7;
    margin-bottom: 15px;
    text-align: justify;
    text-justify: inter-word;
}

.boton-grid {
    align-self: flex-start;
    margin-top: 15px;
    padding: 12px 28px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}


.boton-grid:hover {
  background-color: #0056b3; /* Oscurece el fondo */
  transform: translateY(-4px); /* Eleva el botón */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}
.boton-grid:active {
  transform: translateY(-1px); /* Baja ligeramente al presionar */
  
}


/* --- BLOQUE DE GALERÍA EXPANDIDA (Encima del video) --- */
.galeria-compacta {
    flex: 1.2;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0px;
    position: relative;
    z-index: 3;                     /* Capa alta: Se renderiza sobre el video */
}

.tarjeta-foto-grid {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Redondeado en las esquinas exteriores del bloque */
.tarjeta-foto-grid:first-child { border-top-left-radius: 8px; }
.tarjeta-foto-grid:nth-child(2) { border-top-right-radius: 8px; }
.tarjeta-foto-grid:nth-child(3) { border-bottom-left-radius: 8px; }
.tarjeta-foto-grid:last-child { border-bottom-right-radius: 8px; }

.imagen-zoom {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;                  /* ¡EFECTO COMPARTIDO!: Hace las imágenes ligeramente translúcidas */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* --- FILTRO DE ILUMINACIÓN AZUL CLARO --- */
.tarjeta-foto-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 123, 255, 0.25);
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: background-color 0.4s ease;
}

/* --- EFECTOS HOVER COMBINADOS --- */
.tarjeta-foto-grid:hover .imagen-zoom {
    transform: scale(1.12);
    opacity: 1;                     /* Al pasar el mouse, la imagen recupera el 100% de color tapando el video */
}

.tarjeta-foto-grid:hover::after {
    background-color: rgba(0, 123, 255, 0.4);
}

/* ==========================================================================
   --- SECCIÓN GENERAL DE PRODUCTOS ---
   ========================================================================== */
.seccion-productos {
    padding: 80px 20px;          /* Espaciado generoso arriba/abajo y a los lados */
    background-color: #f8fafc;   /* Fondo gris muy claro para resaltar las tarjetas blancas */
    display: flex;
    flex-direction: column;
    align-items: center;         /* Centra todo el contenido de la sección */
}




/* ==========================================================================
   --- CONTENEDOR DE TÍTULOS ---
   ========================================================================== */
.contenedor-productos-titulo {
    text-align: center;          /* Centra los textos */
    max-width: 600px;            /* Limita el ancho para mejorar la legibilidad */
    margin-bottom: 50px;         /* Separa el título del inicio de las tarjetas */
}

/* Subtítulo pequeño (Catálogo Oficial) */
.subtitulo-productos {
    display: block;              /* Obliga al span a comportarse como bloque */
    font-size: 14px;
    text-transform: uppercase;   /* Convierte el texto a mayúsculas */
    letter-spacing: 2px;         /* Separa las letras para un toque elegante */
    color: #007bff;              /* Azul principal de tu marca */
    font-weight: 700;
    margin-bottom: 10px;         /* Espacio respecto al título principal */
}

/* Título principal (Soluciones en Empaques) */
.titulo-productos-seccion {
    font-size: 36px;
    color: #1a1a1a;              /* Negro suave, menos agresivo que el puro */
    font-weight: 800;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;        /* Espacio para la línea decorativa inferior */
    margin: 0;
}

/* Línea decorativa debajo del título principal */
.titulo-productos-seccion::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centra la línea perfectamente */
    width: 60px;                 /* Ancho de la línea */
    height: 4px;                 /* Grosor de la línea */
    background-color: #007bff;   /* Color azul a juego */
    border-radius: 2px;          /* Bordes redondos para la línea */
}



/* ==========================================================================
   8. REJILLA DE PRODUCTOS (Configuración a 2 Columnas)
   ========================================================================== */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 35px;                  /* Incrementado sutilmente para dar más aire */
  max-width: 1200px;          /* Ampliado a 1200px para pantallas modernas */
  margin: 0 auto;             
  padding: 20px;              /* Evita que toque los bordes del navegador */
}


/* --- TARJETA DE PRODUCTO REDISEÑADA --- */
.tarjeta-producto {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;        /* Bordes más suaves y modernos estilo Apple */
  overflow: hidden;
  /* Sombra multicapa premium (más suave y realista) */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 
              0 10px 15px -3px rgba(0, 0, 0, 0.05),
              0 20px 25px -5px rgba(0, 0, 0, 0.03);
  
  display: flex;
  flex-direction: column;     /* Permite empujar los botones siempre al fondo */
  border: 1px solid #f1f5f9;  /* Borde gris milimétrico para separar del fondo */
  scroll-margin-top: 100px; 
  
  /* Transición fluida para el efecto Hover */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Efecto al pasar el cursor (Hover) */
.tarjeta-producto:hover {
  transform: translateY(-8px); /* Eleva la tarjeta suavemente */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- CONTENEDOR DE IMÁGENES --- */
.imagen-producto-contenedor {
  width: 100%;
  height: 280px;              /* Altura aumentada para mejor proporción 2 columnas */
  overflow: hidden;
  position: relative;
  background-color: #f8fafc;  /* Fondo neutro por si la imagen tarda en cargar */
}

.imagen-producto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Zoom elegante en la imagen al hacer hover en la tarjeta */
.tarjeta-producto:hover .imagen-producto {
  transform: scale(0.8);
}

/* --- CUERPO DE TEXTO INTERNO --- */
.contenido-producto {
  padding: 32px;              /* Más espacio interno para un look premium */
  display: flex;
  flex-direction: column;
  flex-grow: 1;               /* Distribuye el espacio de forma uniforme */
}

/* Estilos sugeridos para tus textos (añádelos si usas estas clases) */
.nombre-producto {
  font-size: 25px;
  font-weight: 700;
  color: #0f172a;             /* Azul marino muy oscuro, ultra profesional */
  margin-bottom: 12px;
  line-height: 1.3;
}

.descripcion-producto {
  font-size: 15px;
  color: #475569;             /* Gris suave y legible */
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Estilos sugeridos para botón de llamada a la acción */
.btn-detalles {
  margin-top: auto;           /* Empuja el botón al fondo si los textos miden distinto */
  padding: 14px 28px;
  background-color: #0284c7;  /* Azul corporativo moderno */
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  font-size: 15px;
  transition: background-color 0.2s ease;
}
.btn-detalles:hover {
  background-color: #0056b3; /* Oscurece el fondo */
  transform: translateY(-4px); /* Eleva el botón */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}
.btn-detalles:active {
  transform: translateY(-1px); /* Baja ligeramente al presionar */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Reduce la sombra */
}



/* ==========================================================================
   --- TARJETAS DE PRODUCTOS CON EFECTO HOVER PAGINA PRINCIPAL ---
   ========================================================================== */

/* 1. Estado inicial de la tarjeta */
.tarjeta-producto {
    background-color: #ffffff;
    border-radius: 12px;        /* Bordes redondeados elegantes */
    padding: 25px;
    box-sizing: border-box;
    
    /* Sombra inicial muy suave y sutil */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* 🌟 PROPIEDAD CLAVE: Hace que cualquier cambio (sombra o tamaño) sea suave y fluido */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    cursor: pointer;            /* Cambia el cursor a una mano para indicar que es clickeable */
}

/* 2. Estado cuando el usuario pasa el mouse por encima (Hover) */
.tarjeta-producto:hover {
    /* 🌟 EFECTO ACERCAMIENTO: Escala la tarjeta un 4% (1.04) */
    transform: scale(1.04); 
    
    /* 🌟 EFECTO RESALTE: La sombra se vuelve más grande y oscura para simular elevación */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}




/* ==========================================================================
                       ROLLOS DE TELA NO TEJIDA 
   ========================================================================== */
/* Restablecemos márgenes para evitar barras de desplazamiento no deseadas */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.seccion-tarjeta-tela {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
}

.tarjeta-1 {
  /* La tarjeta cubre el 80% del ancho de la pantalla */
  width: 90%;
  /* Max-width evita que sea gigante en pantallas muy grandes */
  max-width: 1200px; 
  /* Altura de la tarjeta, puedes ajustarla según tus necesidades */
  min-height: 450px; 
  
 /* AJUSTE DE IMAGEN PERFECTO (Sin deformar) */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagenes/imagen22.jpeg');
  background-position: center center; /* Centra el punto de enfoque de la foto */
  background-repeat: no-repeat;
  background-size: cover; /* Ajusta la imagen al tamaño de la tarjeta sin estirarla */
  
  
  /* Bordes redondeados y sombra para darle estilo */
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  
  /* Centrado del contenido dentro de la tarjeta */
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenido-tarjeta {
  text-align: center;
  color: #ffffff;
}

.contenido-tarjeta h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

.boton-mas-info {
  display: inline-block;
  padding: 12px 30px;
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.boton-mas-info:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

                 





/* ==========================================================================
   10. SECCIÓN GALERÍA ESTILO COLLAGE (SIN ESPACIOS Y ASIMÉTRICA)
   ========================================================================== */

/* Contenedor general de la sección de la galería */
#Galeria {
    width: 100%;                     /* Obliga a la sección a abarcar todo el ancho de la pantalla */
    margin-top: 80px;                /* Separa la galería 80px de la sección de productos de arriba */
    background-color: #ffffff;       /* Fondo blanco para unificar cualquier micro-borde del navegador */
}

/* Estilo del título principal de la galería */
.galeria-titulo {
    text-align: center;              /* Centra el texto del título en la pantalla */
    color: #0d10f1;                  /* Azul corporativo idéntico a tus botones y títulos */
    font-size: 2.5rem;               /* Tamaño de fuente grande y destacado */
    margin-bottom: 40px;             /* Separa el título de las imágenes */
}

/* Cuadrícula elástica del collage sin separaciones */
.galeria-grid {
    display: grid;                   /* Activa el motor de diseño CSS Grid Layout */
    /* Crea 4 columnas fijas de igual tamaño que abarcan el ancho completo de la pantalla */
    grid-template-columns: repeat(4, 1fr); 
    gap: 0;                          /* CLAVE: Elimina por completo los espacios entre las imágenes */
}

/* Caja contenedora individual para cada fotografía */
.galeria-item {
    height: 250px;                   /* Altura base para las imágenes normales del collage */
    overflow: hidden;                /* Oculta cualquier excedente de foto para mantener las líneas rectas */
    position: relative;              /* Punto de referencia para los efectos internos */
}

/* MODIFICADOR: Hace que una imagen específica sea el doble de ancha (ocupa 2 columnas) */
.galeria-item.ancho-doble {
    grid-column: span 2;             /* Se estira a lo ancho abarcando dos celdas */
}

/* MODIFICADOR: Hace que una imagen específica sea el doble de alta (ocupa 2 filas) */
.galeria-item.alto-doble {
    grid-row: span 2;                /* Se estira hacia abajo abarcando dos niveles */
    height: 500px;                   /* Duplica su altura para encajar perfectamente con la grilla (250px + 250px) */
}

/* Control absoluto de la imagen dentro del collage */
.galeria-item img {
    width: 100%;                     /* Obliga a la foto a expandirse en el ancho completo de su celda */
    height: 100%;                    /* Obliga a la foto a rellenar el alto total asignado a su bloque */
    object-fit: cover;               /* Mantiene las proporciones originales recortando los excesos sin deformar */
    transition: transform 0.5s ease; /* Suaviza el efecto de zoom cuando el usuario pasa el mouse */
}

/* Efecto visual interactivo al pasar el cursor sobre un cuadro del collage */
.galeria-item:hover img {
    transform: scale(1.05);          /* Realiza un zoom elegante del 5% hacia adentro de la fotografía */
    cursor: pointer;                 /* Modifica el cursor a tipo mano de interacción */
}

/* --- ADAPTACIÓN PARA MÓVILES (RESPONSIVE) --- */
@media (max-width: 768px) {
    /* Ajustes para que el collage no se vea miniaturizado en pantallas pequeñas */
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr); /* Reduce a solo 2 columnas en teléfonos móviles */
    }
    
    .galeria-item {
        height: 180px;               /* Reduce la altura base en celulares para optimizar espacio */
    }
    
    .galeria-item.ancho-doble {
        grid-column: span 2;         /* Mantiene el ancho doble cubriendo la pantalla del móvil de lado a lado */
    }
    
    .galeria-item.alto-doble {
        grid-row: span 2;            /* Mantiene la proporción de doble fila hacia abajo */
        height: 360px;               /* Ajusta el alto proporcional en celulares (180px + 180px) */
    }
}



/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE DETALLE DE PRODUCTO (productoS)
   ========================================================================== */

/* Variables de color para mantener la consistencia visual */
:root {
    --color-primario: #2563eb;   /*TITULO, TIPO DE EMBALAJE*/
    --color-primario-hover: #1dd83c;
    --color-oscuro: #3b1e35;   /*NOMBRE DE PRODUCTO*/
    --color-texto: #475569;   /*TEXTO DE DESCRIPCION DE FICHA*/
    --color-fondo-tabla: #f9f1f1;
    --color-borde: #e2e8f0;
}

/* Contenedor principal de la sección de detalles */
.detalle-producto-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   SOLUCCIÓN: CONTROL DE CAPAS Y VISIBILIDAD DEL BOTÓN REGRESAR
   ========================================================================== */

/* 1. Empuja el contenido hacia abajo para que no lo tape el Header flotante */
.con-margen-top {
    padding-top: 100px !important; /* Espacio de seguridad para librar el menú superior */
    display: block;
}

/* 2. Contenedor que asegura que el botón se mantenga visible y no se desplace */
.contenedor-regresar-bloque {
    width: 100%;
    display: block !important;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    position: relative;
    z-index: 999 !important; /* Capa super alta para evitar que lo tapen otros bloques */
}

/* 3. Botón con colores fijos para garantizar visibilidad inmediata */
.btn-regresar {
    display: inline-flex !important; /* Fuerza el comportamiento de caja */
    align-items: center;
    gap: 0.5rem;
    color: #2563eb !important; /* Color azul rey directo (ignora fallas de variables) */
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.2s ease;
}

.btn-regresar:hover {
    color: #1d4ed8 !important; /* Azul más oscuro al pasar el mouse */
    text-decoration: underline !important; /* Línea inferior interactiva */
}

/* Asegura que el icono interno del botón herede el color y tamaño correctamente */
.btn-regresar i {
    font-size: 0.95rem;
    color: inherit !important;
}

/* ==========================================================================
                     CONTENEDOR DE PRODUCTOS 
   ========================================================================== */


/* Bloque principal: Divide la pantalla en 2 columnas (Imagen | Contenido) */
.detalle-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Columna Izquierda: Contenedor y comportamiento de la imagen */
.detalle-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-borde);
}

.detalle-imagen img {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Efecto visual sutil al pasar el mouse por la imagen */
.detalle-imagen:hover img {
    transform: scale(1.02);
}

/* Columna Derecha: Estructura del texto informativo */
.detalle-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.producto-categoria {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-primario);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.detalle-info h1 {
    font-size: 2.25rem;
    color: var(--color-oscuro);
    margin: 0;
    line-height: 1.2;
}

.producto-precio {
    font-size: 1.35rem;
    font-weight: 700;
    color: #16a34a; /* Color verde comercial para destacar */
    margin: 0;
}

/* Subsecciones de información (Descripción y Especificaciones) */
.producto-descripcion-larga h3,
.producto-especificaciones h3,
.producto-tabla-medidas h3 {
    font-size: 1.15rem;
    color: var(--color-oscuro);
    margin: 0 0 0.75rem 0;
    border-bottom: 2px solid var(--color-borde);
    padding-bottom: 0.5rem;
}

.producto-descripcion-larga p {
    color: var(--color-texto);
    line-height: 1.6;
    margin: 0;
}

.producto-especificaciones ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.producto-especificaciones li {
    color: var(--color-texto);
}

.producto-especificaciones li strong {
    color: var(--color-oscuro);
}

/* Diseño responsivo y limpio para la Tabla de Medidas */
.producto-tabla-medidas {
    margin-top: 0.5rem;
    overflow-x: auto; /* Permite desplazamiento si la tabla es muy ancha en móviles */
}

.tabla-medidas-estandar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

.tabla-medidas-estandar th,
.tabla-medidas-estandar td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-medidas-estandar th {
    background-color: var(--color-fondo-tabla);
    color: var(--color-oscuro);
    font-weight: 600;
}

.tabla-medidas-estandar tr:hover {
    background-color: #f8fafc;
}

/* Botón de Cotización por WhatsApp */
.btn-cotizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    margin-top: 1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

.btn-cotizar:hover {
    background-color: #20ba5a;
    transform: translateY(-2px);
}

.btn-cotizar:active {
    transform: translateY(0);
}
/* ==========================================================================
   ADAPTACIÓN PARA DISPOSITIVOS MÓVILES (Media Queries)
   ========================================================================== */
@media (max-width: 768px) {
    .detalle-block {
        grid-template-columns: 1fr; /* Fuerza una sola columna */
        gap: 2rem;
        padding: 1.5rem;
    }

    .detalle-info h1 {
        font-size: 1.75rem;
    }
    
    .btn-cotizar {
        width: 100%; /* El botón ocupa todo el ancho disponible en celulares */
        box-sizing: border-box;
    }
}


/* ==========================================================================
                       ROLLOS DE TELA NO TEJIDA "APLICACIONES"  
   ========================================================================== */



.seccion-aplicaciones {
  width: 100%;
  /* CAMBIO: Aumentamos el ancho máximo de la sección para dar más espacio */
  max-width: 1400px; 
  margin: 0 auto;
  padding: 60px 20px;
}

.titulo-moderno {
  font-family: 'Poppins', 'Segoe UI', sans-serif; /* Tipografía limpia */
  font-size: 2.5rem;          /* Tamaño grande y legible */
  font-weight: 700;           /* Letra gruesa (Negrita) */
  letter-spacing: -0.5px;     /* Junta un poco las letras para verse más estético */
  text-align: center;         /* Centra el título */
  margin-bottom: 30px;        /* Separa el título del contenido de abajo */
  
  /* Efecto de color degradado en el texto */
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contenedor-apps {
  display: grid;
  /* CAMBIO: Subimos el tamaño mínimo de cada ficha de 250px a 300px */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px; /* Más espacio de separación entre fichas grandes */
}

.tarjeta-app {
  background-color: #ffffff;
  border-radius: 16px; /* Bordes ligeramente más redondeados para fichas grandes */
  /* CAMBIO: Más espacio interno para que el contenido respire */
  padding: 30px; 
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-app:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.imagen-app {
  width: 100%;
  /* CAMBIO: Aumentamos la altura de la imagen de 200px a 260px */
  height: 260px; 
  border-radius: 12px;
  overflow: hidden; 
  margin-bottom: 25px;
  background-color: #f4f4f9; 
}

.imagen-app img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 0.5s ease;
}

.tarjeta-app:hover .imagen-app img {
  transform: scale(1.08);
}

.tarjeta-app h3 {
  font-family: Arial, sans-serif;
  /* CAMBIO: Título más grande */
  font-size: 1.6rem; 
  color: #333333;
  margin-bottom: 15px;
}

.tarjeta-app p {
  font-family: Arial, sans-serif;
  /* CAMBIO: Texto descriptivo un poco más grande y legible */
  font-size: 1.05rem; 
  color: #666666;
  line-height: 1.6;
}

/* ==========================================================================
   9. RESPONSIVO: Fuerza 1 columna en teléfonos móviles
   ========================================================================== */
@media (max-width: 768px) {
  .rejilla-productos {
    grid-template-columns: 1fr; 
    gap: 24px;
    padding: 15px;
  }
  
  .imagen-producto-contenedor {
    height: 220px;            /* Imagen más baja en celulares para no saturar */
  }
  
  .contenido-producto {
    padding: 24px;            /* Menos padding en pantallas pequeñas */
  }
}





/* ==========================================================================
                               CONTACTO 
   ========================================================================== */

/* ========================================== */
/* SECCIÓN DE CONTACTO GENERAL                */
/* ========================================== */
.seccion-contacto {
    min-height: 500px;
    width: 100%;             /* Ocupa todo el ancho de la pantalla */
    padding: 180px 20px;
    scroll-margin-top: 100px;  /* Evita que el menú fijo cubra el título */
    box-sizing: border-box;
    
    /* Configuración de la Imagen de Fondo (Parallax) */

   background-image: url('/imagenes/porton.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

/* ========================================== */
/* BLOQUE 1: CABECERA Y UBICACIÓN CENTRADA    */
/* ========================================== */
.contenedor-contacto-cabecera {
    text-align: center; 
    max-width: 800px;
    margin: 0 auto 30px auto;
}

.subtitulo-contacto {
    text-align: center;
    display: block;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #faf8f8; /* Blanco brillante */
    font-weight: 700;
    margin-bottom: 10px;
}

.titulo-contacto-seccion {
    text-align: center;
    font-size: 36px;
    color: #f1f2f5; /* Gris claro */
    font-weight: 800;
    margin-bottom: 30px;
}

/* Ubicación Física Superior */
.contacto-ubicacion-superior {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
}

.dato-item-ubicacion {
    display: flex;
    align-items: center; 
    gap: 12px;
    color: #ffffff; 
    font-size: 16px;
    background: rgba(0, 0, 0, 0.3); /* Sutil fondo para mejorar lectura */
    padding: 15px 25px;
    border-radius: 50px;
}

.dato-item-ubicacion i {
    color: #0284c7; /* Azul original */
    font-size: 20px;
}

/* ========================================== */
/* BLOQUE 2 Y 3: DISTRIBUCIÓN EN 2 COLUMNAS   */
/* ========================================== */
.contacto-columnas-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px; /* Separación perfecta entre las columnas */
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap; /* Soporte para celulares */
}

/* Estilo de cada columna */
.columna-contacto {
    flex: 1;
    min-width: 280px; 
    max-width: 400px;
    background: rgba(255, 255, 255, 0.05); /* Tarjeta translúcida elegante */
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(4px); /* Suavizado de fondo */
    box-sizing: border-box;
}

.columna-contacto h3 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(2, 132, 199, 0.5); /* Línea azul estética */
    padding-bottom: 10px;
}

/* ========================================== */
/* LISTAS Y REDES SOCIALES                    */
/* ========================================== */
.lista-redes {
    list-style-type: none !important; 
    padding: 0;
    margin: 0;
}

.lista-redes li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #000000; 
}

.lista-redes li:last-child {
    margin-bottom: 0;
}

.lista-redes i {
    margin-right: 14px;
    font-size: 20px;
    width: 24px;
    text-align: center;
    display: inline-block;
}

/* Colores de marca exactos */
.lista-redes .fa-envelope { color: #cbd5e1 !important; }  
.lista-redes .fa-whatsapp { color: #25D366 !important; }  
.lista-redes .fa-facebook { color: #1877F2 !important; }  
.lista-redes .fa-instagram { color: #E1306C !important; } 
.lista-redes .fa-youtube { color: #FF0000 !important; }   

/* Título secundario decorativo (opcional) */
.titulo-contacto1 {
    font-family: 'Poppins', 'Segoe UI', sans-serif; 
    font-size: 36px;               
    font-weight: 800;               
    color: #ffffff; 
    text-align: center;             
    text-transform: uppercase;      
    letter-spacing: 2px;            
    margin-bottom: 20px;            
    position: relative;             
    padding-bottom: 15px;  
}



/* ==========================================================================
   ESTRUCTURA DE DOS COLUMNAS (FORMULARIO Y MAPA)
   ========================================================================== */
/* Estilos para el contenedor y texto */
        .titulo-contenedor {
            text-align: center;
            margin: 40px auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .titulo-principal {
            font-size: 3rem;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 10px;
            letter-spacing: -1px;
        }

        /* Línea decorativa debajo del título */
        .titulo-linea {
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            margin: 0 auto;
            border-radius: 2px;
        }



   .rejilla-contacto-contenido {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas idénticas */
    gap: 100px;
    max-width: 1800px;
    margin: 150px auto;
}

/* Estilos del Formulario */
.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-campo label {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
}

.grupo-campo input, .grupo-campo textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  /* CAMBIO: Borde gris claro visible en lugar de blanco */
  border: 1.5px solid #cbd5e1; 
  border-radius: 8px;
  background-color: #f8fafc;
  font-family: inherit;
  transition: all 0.3s ease;
}

/* Efecto de iluminación al hacer clic en los recuadros del formulario */
.grupo-campo input:focus, 
.grupo-campo textarea:focus {
    outline: none;
    border-color: #0284c7;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
}

/* Botón del Formulario */
.boton-enviar-formulario {
    padding: 14px;
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    transition: all 0.3s ease;
}

.boton-enviar-formulario:hover {
    background-color: #0369a1;
    box-shadow: 0 6px 18px rgba(3, 105, 161, 0.35);
    transform: translateY(-2px);
}

/* Estilos del Contenedor de Mapa */
.contenedor-mapa-estatico {
    width: 100%;
    height: 100%;
    min-height: 450px; /* Asegura altura si el formulario crece */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   RESPONSIVO: Adaptación para Celulares
   ========================================================================== */
@media (max-width: 968px) {
    .rejilla-contacto-contenido {
        grid-template-columns: 1fr; /* Pasa a 1 columna en pantallas medianas o chicas */
        gap: 30px;
    }
    
    .datos-rapidos-contacto {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .contenedor-mapa-estatico {
        min-height: 350px; /* Reduce un poco la altura en pantallas móviles */
    }
}


/* ==========================================================================
                 Reclutamiento (Estilo Modernizado)
   ========================================================================== */

/* Reseteo básico y tipografía */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f8fafc;
    color: #334155;
}

/* Contenedor principal de la sección */
.join-team-section {
    position: relative;
    background-image: url('imagenes/imagen-reclutar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Cambiar a 'fixed' si deseas efecto Parallax */
    padding: 60px 0;
    color: #ffffff; /* Cambia el texto general a blanco para resaltar */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Encabezado Principal */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.8rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.section-header p {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
    
    /* Efecto Cristal Esmerilado */
    background-color: rgba(255, 255, 255, 0.75); /* Blanco con 75% de opacidad */
    backdrop-filter: blur(12px);                 /* Desenfoca la imagen de fondo */
    -webkit-backdrop-filter: blur(12px);         /* Soporte para Safari */
    
    /* Estilizado del contenedor */
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);  /* Borde brillante sutil */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}


/*
  background-color: #ffffff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); /* Sombra suave y profunda 
    transition: transform 0.3s ease, box-shadow 0.3s ease;*/








/* Ajuste para pantallas grandes */
@media (min-width: 992px) {
    .grid-layout {
        grid-template-columns: 1.1fr 0.9fr; /* Columna de texto ligeramente más ancha */
    }
}

/* Columna de Beneficios */
.benefits-column h3 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
}

.benefits-column p {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Lista de Beneficios Estilizada */
.benefits-list {
    list-style: none;
}

.benefits-list li {
    position: relative;
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: #334155;
    padding-left: 35px; /* Espacio para el ícono */
    font-weight: 500;
}

/* Checkmark personalizado con CSS (Sustituye las viñetas aburridas) */
.benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-color: #e0f2fe; /* Azul suave de fondo */
    color: #0284c7;            /* Azul corporativo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Columna del Formulario (Estilo Tarjeta Premium) */
.form-column {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); /* Sombra suave y profunda */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto levitación al pasar el mouse por la tarjeta */
.form-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 50px rgba(15, 23, 42, 0.1);
}

.form-column h3 {
    font-size: 1.6rem;
    color: #0f172a;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
}

/* Elementos del Formulario */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #344054;
    font-size: 0.9rem;
}

/* Campos de Texto y Selects Modernizados */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font-size: 1rem;
    color: #1d2939;
    background-color: #fff;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Efecto de enfoque (Focus) con anillo exterior */
.form-group input:focus,
.form-group select:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15); /* Anillo azul translúcido */
}

/* Contenedor de Carga de Archivos Avanzado (Drag & Drop look) */
.form-group input[type="file"] {
    width: 100%;
    padding: 16px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #64748b;
    transition: all 0.3s ease;
}

.form-group input[type="file"]:hover {
    background: #f0fdf4; /* Se torna verde suave al pasar el archivo */
    border-color: #22c55e;
    color: #166534;
}

/* Botón de Envío Dinámico */
.submit-btn {
    width: 100%;
    padding: 16px;
    background-color: #0284c7; /* Azul a juego con tu sección de contacto */
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background-color: #0369a1;
    transform: translateY(-2px); /* Efecto de empuje hacia arriba */
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
}

.submit-btn:active {
    transform: translateY(0); /* Regresa a su estado original al clickear */
}







/* Estilos generales de la sección */
.seccion-vacantes {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    color: #333333;
}

.seccion-vacantes h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #1a1a1a;
}

/* Contenedor de la vacante */
.tarjeta-vacante {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Encabezado del puesto */
.encabezado-vacante {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.titulo-puesto {
    font-size: 1.4rem;
    margin: 0;
    color: #0056b3;
}

/* Etiquetas de información rápido */
.detalles-rapidos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.etiqueta {
    background-color: #f0f4f8;
    color: #4a5568;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.etiqueta.modalidad {
    background-color: #e6fffa;
    color: #234e52;
}

/* Descripción y requisitos */
.descripcion-vacante p {
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.lista-requisitos {
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
}

/* Botón de acción */
.enlace-postular {
    display: inline-block;
    align-self: flex-start;
    background-color: #0056b3;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.enlace-postular:hover {
    background-color: #004085;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 600px) {
    .encabezado-vacante {
        flex-direction: column;
    }
    .enlace-postular {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}




















/* ==========================================================================
                 Nosotros
   ========================================================================== */
.seccion-corporativa {
    max-width: 1200px;
    margin: 130px auto;
    padding: 20px;
    font-family: sans-serif;
    color: #333;

}


/* Nuevo contenedor: Ocupa todo el ancho de la pantalla */

 .fondo-completo {
  width: 100%;
  /* Capa negra con 60% de opacidad */
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('imagenes/imagen-nosotros.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Tu sección actual: Centra y limita el contenido textualmente */
.seccion-corporativa { 
  max-width: 1200px; 
  margin: 0 auto;        /* Cambiado a 0 auto para que el fondo no se corte */
  padding: 130px 20px;   /* Pasamos el margen de 130px a padding para dar espacio interno */
  font-family: sans-serif; 
  color: #333; 
}


.bloque-historia {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-seccion1 {
    font-size: 2rem;
    color: #faf9f9;
    margin-bottom: 15px;
    position: relative;
}

.texto-descripcion {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 50px auto; 
    text-align: justify;

    /* Fondo blanco con 80% de opacidad */
    background: rgba(255, 255, 255, 0.8); 
    
    /* Formato de caja para el texto */
    padding: 25px 35px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    color: #000;                           /* Forzamos el texto a negro puro para máxima legibilidad */
}


.contenedor-mision-vision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.tarjeta-corporativa {
    /* Fondo blanco con 80% de opacidad */
    background: rgba(255, 255, 255, 0.8); 
    
    /* Tu formato original intacto */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 4px solid #25d366; 
          
}



.icono-corporativo {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitulo-corporativo {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #222;
}

.texto-corto {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    text-align: justify;
}

.lista-valores {
    list-style: none;
    padding: 0;
    text-align: left;
    text-align: justify;
}

.lista-valores li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #666;
    text-align: justify;
}
h4{
    text-align: center;
    font-size: 40px;
}


 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
     
        }

/* ==========================================================================
   --- CONTENEDOR EXTERIOR (IMAGEN DE FONDO COMPLETA) ---
   ========================================================================== */
.contenedor-seccion {
  background-image: 
    linear-gradient(rgba(40, 40, 40, 0.6), rgba(40, 40, 40, 0.6)), 
    url('imagenes/imagen17.jpeg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
  width: 100%;             /* Cubre todo el ancho del navegador */
  min-height: 60vh;        /* Asegura una buena altura proporcional */
  padding: 80px 20px;      /* Espacio arriba y abajo para que respiren las tarjetas */
  box-sizing: border-box;  /* Protege el diseño de desbordamientos */
}

/* ==========================================================================
   --- CONTENEDOR INTERIOR (LIMITADOR DE CONTENIDO) ---
   ========================================================================== */
.contenedor-interno {
  max-width: 1500px;       /* Evita que las tarjetas se estiren infinitamente */
  margin: 0 auto;          /* Centra horizontalmente todo el bloque */
  text-align: center;
}

/* ==========================================================================
   --- ELEMENTOS INTERNOS Y REJILLA ---
   ========================================================================== */
.titulo-seccion {
    font-size: 2rem;
    color: #f8f7f7;        /* Blanco para contrastar con tu filtro oscuro de fondo */
    font-weight: 900;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
}

.cuadrilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas perfectas para tus 6 tarjetas (2 filas) */
    gap: 25px;                             /* Espaciado uniforme entre tarjetas */
}

.tarjeta {
    /* 🌟 CAMBIO CLAVE: Fondo negro con 65% de opacidad para que resalte el texto blanco */
    background: rgba(0, 0, 0, 0.65);
   
    color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    text-align: left;
    
    /* Ahora estas propiedades sí funcionarán correctamente */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



.tarjeta-subtitulo {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    font-weight: 900;
}

.tarjeta-texto {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* ==========================================================================
   --- RESPONSIVIDAD (ESTILO LISTA VERTICAL) ---
   ========================================================================== */
@media (max-width: 768px) {
    .cuadrilla-tarjetas {
        grid-template-columns: 1fr; /* Cambia a una sola columna/lista al reducir la pantalla */
        gap: 20px;
    }
    
    .contenedor-seccion {
        padding: 50px 15px; /* Optimiza espacios internos para pantallas de celulares */
    }
}



/* ==========================================================================
                 Carucel de imagenes 
   ========================================================================== */



/* 1. Forzar al cuerpo de la página a no dejar espacios en blanco */
html, body {
  margin: 0 !important; /* Elimina los márgenes por defecto del navegador de forma obligatoria */
  padding: 0 !important; /* Elimina el relleno por defecto del navegador de forma obligatoria */
  width: 100% !important; /* Fuerza a que la página ocupe el 100% del ancho de la pantalla */
  overflow-x: hidden; /* Oculta cualquier contenido que sobresalga a los lados para evitar el scroll horizontal */
}

/* 2. Contenedor romperá los límites del padre si está metido en un bloque centrado */
.carrusel-contenedor {
  position: relative; /* Establece un posicionamiento relativo para poder usar coordenadas de desplazamiento */
  left: 50%; /* Mueve el borde izquierdo del contenedor justo al centro de la pantalla */
  right: 50%; /* Mueve el borde derecho del contenedor justo al centro de la pantalla */
  margin-left: -50vw; /* Desplaza el contenedor hacia la izquierda la mitad del ancho total de la pantalla */
  margin-right: -50vw; /* Desplaza el contenedor hacia la derecha la mitad del ancho total de la pantalla */
  width: 100vw; /* Fuerza al contenedor a medir exactamente el 100% del ancho de la pantalla (Viewport Width) */
  
  overflow: hidden; /* Recorta y oculta las imágenes del carrusel que se salen de la pantalla */
  background-color: #f0f0f0; /* Aplica un color de fondo gris claro detrás del carrusel */
  padding: 100px 0; /* Agrega un espacio interno de 20 píxeles arriba y abajo, y 0 a los lados */
  box-sizing: border-box; /* Incluye el padding dentro del cálculo del alto total para que no crezca de más */
}

/* 3. El riel que contiene las imágenes */
.carrusel-track {
  display: flex; /* Alinea todas las imágenes en una fila horizontal continua */
  width: max-content; /* Hace que el riel sea tan largo como la suma de todas las imágenes juntas */
  animation: scroll 30s linear infinite; /* Aplica la animación llamada 'scroll', dura 30 segundos, va a velocidad constante y nunca se detiene */
}

/* 4. Tamaño de las imágenes */
.carrusel-item {
  width: 300px; /* Define un ancho fijo de 300 píxeles para cada tarjeta o bloque de imagen */
  padding: 0 10px; /* Agrega un espacio de 10 píxeles a la izquierda y derecha para separar las imágenes entre sí */
  flex-shrink: 0; /* Evita que las imágenes se aplasten o se encojan si el contenedor se reduce */
  box-sizing: border-box; /* Incluye el padding dentro de los 300 píxeles de ancho para mantener el tamaño exacto */
}

.carrusel-item img {
  width: 100%; /* Fuerza a la imagen interna a ocupar el 100% del ancho de su contenedor (.carrusel-item) */
  height: auto; /* Ajusta la altura automáticamente de forma proporcional para que la imagen no se deforme */
  border-radius: 8px; /* Redondea las esquinas de las imágenes con un radio de 8 píxeles */
  display: block; /* Elimina un pequeño espacio en blanco que los navegadores suelen dejar debajo de las imágenes */
}

/* 5. Animación infinita */
@keyframes scroll {
  0% {
    transform: translateX(0); /* Al iniciar la animación, el riel comienza en su posición original (0) */
  }
  100% {
    transform: translateX(-50%); /* Al terminar, se desplaza hacia la izquierda exactamente la mitad de su longitud total */
  }
}

/* Pausa al pasar el mouse */
.carrusel-contenedor:hover .carrusel-track {
  animation-play-state: paused; /* Congela la animación en su lugar actual cuando el usuario pone el cursor sobre el carrusel */
}



/* ==========================================================================
                 NUEVOS ICONOS DE REDES SOCIALES 
   ========================================================================== */



/* Reglas de estilo para el contenedor principal de la barra lateral */
.redes-flotantes {
    /* Desconecta el elemento del flujo normal y lo fija en la pantalla del navegador */
    position: fixed; 
    
    /* Pega el contenedor al borde derecho de la ventana del usuario */
    right: 0; 
    
    /* Baja el contenedor hasta el 50% de la altura de la ventana */
    top: 50%; 
    
    /* Mueve el contenedor hacia arriba un 50% de su propia altura para centrarlo verticalmente de forma perfecta */
    transform: translateY(-50%); 
    
    /* Activa el modelo de caja flexible para controlar la alineación de los hijos */
    display: flex; 
    
    /* Ordena los íconos de forma vertical (en columna), uno debajo del otro */
    flex-direction: column; 
    
    /* Capa de profundidad alta para asegurar que quede por encima de textos, imágenes y menús */
    z-index: 1000; 
}

/* Reglas de estilo generales aplicadas a cada uno de los enlaces de las redes sociales */
.redes-flotantes .icono-red {
    /* Activa flexbox dentro del botón para poder centrar el ícono de FontAwesome */
    display: flex; 
    
    /* Centra el ícono de manera horizontal dentro del botón */
    justify-content: center; 
    
    /* Centra el ícono de manera vertical dentro del botón */
    align-items: center; 
    
    /* Define un ancho fijo de 45 píxeles para el botón */
    width: 80px; 
    
    /* Define un alto fijo de 45 píxeles para el botón */
    height: 80px; 
    
    /* Establece el color blanco para el ícono de FontAwesome */
    color: #ffffff; 
    
    /* Quita el subrayado automático que tienen todos los enlaces de texto */
    text-decoration: none; 
    
    /* Establece el tamaño de fuente del ícono en 20 píxeles */
    font-size: 30px; 
    
    /* Agrega una transición suave de 0.3 segundos para cualquier cambio físico o de color (efecto hover) */
    transition: all 0.3s ease; 
    
    /* Espacio de separación de 2 píxeles en la parte inferior de cada botón */
    margin-bottom: 2px; 
    
    /* Redondea las esquinas del botón: superior-izquierda (5px), superior-derecha (0), inferior-derecha (0), inferior-izquierda (5px) */
    border-radius: 5px 0 0 5px; 
}

/* Asigna el color azul oficial de marca a la caja de Facebook */
.redes-flotantes .facebook { background-color: #3b5998; }

/* Asigna el color rosa/degradado oficial de marca a la caja de Instagram */
.redes-flotantes .instagram { background-color: #e1306c; }

/* Asigna el color rojo oficial de marca a la caja de YouTube */
.redes-flotantes .youtube { background-color: #ff0000; }

/* Asigna el color negro oficial de marca a la caja de TikTok */
.redes-flotantes .tiktok { background-color: #000000; }

/* Efecto que se ejecuta de forma automática cuando el usuario pasa el cursor sobre un botón */
.redes-flotantes .icono-red:hover {
    /* Incrementa el relleno derecho para hacer que el botón se estire levemente hacia la izquierda */
    padding-right: 35px; 
    
    /* Agranda el tamaño general del botón un 5% de su tamaño original */
    transform: scale(1.05); 
}

/* 1. ESTILO BASE DEL ÍCONO (Para que la animación de regreso sea suave) */
.redes-flotantes .icono-red i {
    /* Convierte el elemento inline en inline-block para que el navegador le permita rotar correctamente */
    display: inline-block; 
    
    /* Configura una transición de 0.4 segundos con una curva de velocidad acelerada-desacelerada */
    /* Esto controla la velocidad con la que el ícono regresa a su posición original al quitar el cursor */
    transition: transform 0.4s ease-in-out; 
}

/* 2. COMPORTAMIENTO AL PASAR EL CURSOR (Efecto Hover) */
/* Cuando el usuario pasa el mouse sobre el enlace (.icono-red), afectamos directamente al ícono interno (i) */
.redes-flotantes .icono-red:hover i {
    /* Aplica una rotación completa de 360 grados sobre su propio centro geométrico */
    /* Nota: Puedes cambiar 360deg por 180deg (medio giro) o -360deg (girar al revés) */
    transform: rotate(360deg); 
}
/* ==========================================================================
                 ADAPTACIÓN RESPONSIVA PARA PANTALLAS
   ========================================================================== */

/* Ajuste para Tabletas y pantallas medianas (Menos de 768px) */
@media (max-width: 768px) {
    .redes-flotantes .icono-red {
        width: 60px;       /* Reduce de 80px a 60px */
        height: 60px;      /* Reduce de 80px a 60px */
        font-size: 24px;   /* Reduce el tamaño del ícono */
    }
}

/* Ajuste para Celulares y pantallas pequeñas (Menos de 480px) */
@media (max-width: 480px) {
    .redes-flotantes .icono-red {
        width: 45px;       /* Tamaño ideal para que quepa el dedo en pantallas móviles */
        height: 45px;      
        font-size: 18px;   
    }

    /* En celulares el hover con desplazamiento suele fallar o verse mal, 
       por lo que reducimos la distancia para que no tape la pantalla */
    .redes-flotantes .icono-red:hover {
        padding-right: 15px; /* Reduce la expansión */
        transform: scale(1.02); /* Escala menor para evitar saltos bruscos */
    }
}







/* ==========================================
   ESTILOS GENERALES DEL PIE DE PÁGINA
   ========================================== */
.sitio-footer {
    background-color: #1a1a1a; /* Fondo gris oscuro/negro para contraste */
    color: #ffffff;            /* Texto completamente blanco */
    padding: 60px 20px 0 20px; /* Margen interno: 60px arriba, 20px lados, 0 abajo */
    font-family: sans-serif;   /* Tipografía limpia por defecto */
}

/* Contenedor flexible con rejilla (Grid) */
.footer-limite {
    max-width: 1200px;         /* Ancho máximo permitido para pantallas grandes */
    margin: 0 auto;            /* Centra el contenedor en el monitor */
    display: grid;             /* Activa el sistema de rejilla moderna */
    /* Crea columnas automáticas con un tamaño mínimo de 250px hasta ocupar el espacio libre */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 40px;                 /* Separación de 40px entre cada columna */
    padding-bottom: 40px;      /* Espacio antes de la línea de derechos de autor */
}

/* ==========================================
   ELEMENTOS DE LAS COLUMNAS (BLOQUES)
   ========================================== */
.footer-logo {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #3b5998;            /* Color de acento de tu marca corporativa */
}

.empresa-descripcion {
    font-size: 24px;
    line-height: 1.6;          /* Interlineado cómodo para lectura rápida */
    color: #cccccc;            /* Gris claro para diferenciarlo de los títulos */
}

.footer-titulo {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 20px;       /* Separación con la lista de abajo */
    position: relative;
}

/* Listas limpias sin viñetas por defecto */
.footer-enlaces, .contacto-lista {
   
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Espacio vertical constante entre cada renglón de la lista */
.footer-enlaces li, .contacto-lista li {
    margin-bottom: 12px;
    font-size: 18px;
}

/* ==========================================
   ESTILOS DE LOS ENLACES E HIPERVÍNCULOS
   ========================================== */
.footer-enlaces a {
    color: #b3b3b3;            /* Color gris medio por defecto */
    text-decoration: none;     /* Elimina el subrayado feo de los enlaces */
    transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

/* Cambio de color inmediato al pasar el mouse por encima del enlace */
.footer-enlaces a:hover {
    color: #ffffff;            /* El enlace brilla cambiando a blanco puro */
    padding-left: 5px;         /* Pequeño desplazamiento dinámico a la derecha */
}

/* Formato específico para la lista con íconos de contacto */
.contacto-lista li i {
    color: #3b5998;            /* Los íconos comparten el color de tu marca */
    width: 20px;               /* Ancho fijo para que los textos queden alineados verticalmente */
    margin-right: 10px;        /* Separación entre el ícono y el texto */
}

/* ==========================================
   BARRA INFERIOR DE DERECHOS DE AUTOR
   ========================================== */
.footer-creditos {
    border-top: 1px solid #333333; /* Línea divisoria muy sutil */
    padding: 20px 0;
    text-align: center;         /* Centra el texto de propiedad */
    font-size: 13px;
    color: #888888;            /* Texto gris oscuro discreto */
}

.creditos-limite {
    max-width: 1200px;
    margin: 0 auto;
}





/* ==========================================
NUEVO CONTENEDOR CON IMAGEN PARA PRODUCTOS 
   ========================================== */

.detalle-producto-hero-container {
    /* Fuerza a la sección a ocupar todo el ancho disponible del navegador */
    width: 100%;
    
    /* Altura mínima de la sección para garantizar espacio visual */
    min-height: 500px;
    
    /* CAMBIA AQUÍ: Coloca la ruta exacta de la imagen que quieres DE FONDO */
    /* Nota: El "linear-gradient" añade un filtro oscuro transparente para que el texto resalte */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('imagenes/imagen23\ \(2\).jpeg');
    
    /* Propiedad clave: Ajusta la imagen para cubrir el 100% del contenedor sin deformarse */
    background-size: cover;
    
    /* Centra el fondo horizontal y verticalmente */
    background-position: center center;
    
    /* Evita que la imagen se duplique si la pantalla es muy ancha */
    background-repeat: no-repeat;
    
    /* Centrado interno de los elementos de texto e imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* El resto de tus estilos del contenedor interno se mantienen iguales */
.hero-regresar-contenido {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-regresar-titulo {
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.hero-regresar-imagen-caja {
    max-width: 280px;
    width: 100%;
    margin-bottom: 30px;
}

.hero-regresar-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn-regresar-hero {
    display: inline-block;
    background-color: #3b5998;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.btn-regresar-hero:hover {
    background-color: #ffffff;
    color: #3b5998;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}








/* ==========================================
   ESTILOS DE LA TIRA DE LOGROS CORPORATIVOS
   ========================================== */

/* ==========================================================================
   TIRA DE LOGROS CON EFECTO DE FONDO FIJO (PARALLAX WINDOW)
   ========================================================================== */

.tira-logros-empresa {
    width: 100%;
    min-height: 200px; 
    
    /* Imagen de fondo con el filtro oscuro translúcido para mantener el contraste */
    background-image: linear-gradient(rgba(30, 30, 30, 0.75), rgba(30, 30, 30, 0.75)), url('imagenes/imagen23\ \(1\).jpeg');
    
    /* 🌟 PROPIEDAD CLAVE: Fija la imagen al fondo de la pantalla del navegador. 
       Esto crea el efecto de "ventana" que va mostrando la imagen poco a poco al hacer scroll. */
    background-attachment: fixed; 
    
    /* Centra la imagen para que el efecto se desplace equilibradamente */
    background-position: center center;
    
    /* Hace que la imagen cubra todo el ancho y alto del contenedor */
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Centrado interno de las 4 columnas de texto */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; 
    box-sizing: border-box;
}

/* Nota: Los estilos de ".tira-logros-contenedor", ".logro-columna" y tu JavaScript 
   se quedan exactamente igual a como los configuramos anteriormente. */


/* Contenedor que alinea los 4 apartados en horizontal */
.tira-logros-contenedor {
    max-width: 1200px; /* Ancho máximo centrado idéntico al resto de tu web */
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribuye las 4 columnas de forma equitativa */
    align-items: center;
    flex-wrap: wrap; /* Permite que salten de línea en pantallas pequeñas */
    gap: 30px; /* Espacio de seguridad entre columnas */
}

/* Estilo individual para cada una de las 4 columnas */
.logro-columna {
    flex: 1; /* Hace que todas las columnas midan exactamente lo mismo */
    min-width: 200px; /* Evita que las columnas se aplasten demasiado */
    text-align: center; /* Centra el contenido de cada bloque */
    color: #ffffff; /* Texto completamente blanco */
}

/* Formato para los números o datos principales (Grandes y destacados) */
.logro-numero {
    font-size: 42px; /* Tamaño gigante para llamar la atención del usuario */
    font-weight: 800; /* Letra muy gruesa */
    color: #0284c7; /* Azul corporativo brillante, puedes cambiarlo a tu color oficial (#3b5998) */
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Le da profundidad al número */
    letter-spacing: -1px;
}

/* Formato para las etiquetas de texto descriptivo */
.logro-texto {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4; /* Interlineado suave para los textos con saltos de línea */
    color: #e2e8f0; /* Blanco grisáceo muy elegante */
    text-transform: uppercase; /* Convierte los textos de soporte a mayúsculas */
    letter-spacing: 0.5px;
}

/* ==========================================
   ADAPTABILIDAD PARA DISPOSITIVOS MÓVILES (Celulares)
   ========================================== */
@media (max-width: 992px) {
    .tira-logros-contenedor {
        /* En celulares los cambia a formato lista (uno abajo del otro) */
        flex-direction: column; 
        justify-content: center;
        gap: 45px;
    }
    
    .logro-columna {
        width: 100%;
    }
}













/* ==========================================
   POR QUÉ RC UNIDOS SRL DE CV

   ========================================== */


/* Configuración general de la sección */
.features-section {
  max-width: 80%;
  margin: 0 auto;
  padding: 80px 40px;
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #ffffff; /* Fondo blanco */
}

/* Título principal */
.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #111111;
  margin-bottom: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Rejilla controlada por filas y columnas */
.features-grid {
  display: grid;
  /* Por defecto en pantallas grandes: 3 columnas fijas (lo que genera 2 filas si tienes 6 tarjetas) */
  grid-template-columns: repeat(3, 1fr); 
  gap: 40px 30px; 
}

/* Tarjeta individual */
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

/* Contenedor del icono */
.feature-card .icon {
  font-size: 60px; /* Tamaño si usas emojis/fuentes de iconos */
  margin-bottom: 15px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Si usas imágenes (PNG/SVG) para los iconos, descomenta esto:
.feature-card .icon img {
  width: 50px;
  height: auto;
}
*/

/* Títulos de los beneficios */
.feature-card h3 {
  font-size: 18px;
  color: #222222;
  margin: 0 0 12px 0;
  font-weight: 600;
}

/* Textos descriptivos */
.feature-card p {
    
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin: 0;
  max-width: 90%; /* Evita que las líneas sean demasiado largas */
}
/* Control de responsividad para pantallas medianas y pequeñas */
@media (max-width: 992px) {
  .features-grid {
    /* En tabletas pasa a 2 columnas (se adapta el flujo de filas automáticamente) */
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .features-grid {
    /* En celulares pasa a 1 sola columna vertical */
    grid-template-columns: 1fr;
  }