/* 
=========================================
   ESTILOS GENERALES
   ========================================= */







/* 1. Efecto de desplazamiento suave (Smooth Scroll) para el botón Contacto */


html {
    scroll-behavior: smooth;
}


html, body {
    /* overflow-x controla el eje horizontal (izquierda a derecha) */
    /* hidden oculta lo que se desborde, eliminando la franja blanca */
    overflow-x: hidden;
    
    /* Aseguramos que la página ocupe el 100% y ni un píxel más */
    width: 100%;
    margin: 0;
    padding: 0;
}
/*sin margen*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Clase que usa JavaScript para bloquear el scroll cuando el menú está abierto */
/* Candado estricto para bloquear el scroll en celulares */
.overflow-hidden {
    overflow: hidden !important;
    height: 100vh !important; /* Obliga a que la página no mida más que la pantalla actual */
    touch-action: none; /* Desactiva físicamente el gesto de arrastrar el dedo para hacer scroll */
}
/* =========================================
   ENCABEZADO (HEADER STICKY & GLASSMORPHISM)
   ========================================= */
.header {
    position: fixed; /* Esto hace que se quede pegado arriba */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que flote SIEMPRE por encima de todo */
    
    /* EFECTO GLASSMORPHISM (Premium Industrial) */
    background: rgb(253, 253, 253); /* Color Charcoal semitransparente */
    backdrop-filter: blur(12px); /* Crea el efecto de vidrio borroso */
    -webkit-backdrop-filter: blur(12px); /* Soporte para Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea inferior muy sutil */
}
/* 2. Distribución del Logo (Izquierda) y Menú (Derecha) */
.navbar {
  display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
    height: 90px; /* Damos una altura fija para mantener la proporción */
}

/* 3. Menú horizontal */

.nav-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 35px; /* Espacio entre botones */
    margin-top: 30px; /* Sube o baja este número (ej. 20px, 25px) hasta que queden a tu gusto */
     
}



/* =========================================
   ESTRUCTURA Y CONTENEDORES
   ========================================= */

/* 1. Contenedor principal: centra el contenido y evita que toque los bordes */
.container {
    max-width: 1200px;
    margin: 0 auto; 
    padding: 0 20px; 
}

/* 2. Espaciado interno (arriba y abajo) para las secciones y el footer */
.about-section, .footer {
    padding: 60px 0;
}

/* 3. Darle un respiro a los títulos e introducciones */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-intro {
    text-align: center;
    margin-bottom: 40px;
}

/* =========================================
   AJUSTES DEL LOGO
   ========================================= */

/* Apuntamos a la etiqueta <img> que está dentro de la clase .logo */
.logo img {
    max-height: 110px; /* Define la altura máxima del logo. Puedes subir a 80px o bajar a 50px según tu gusto */
    width: auto;      /* 'auto' asegura que el logo no se deforme ni se estire, manteniendo su proporción original */
    display: block;   /* Elimina un pequeño espacio en blanco que a veces aparece debajo de las imágenes */
    position: relative;
    top: -10px; /*subimos un poco el logo para que quede alineado con los botones del menú*/
    margin-bottom: -20px; /* Ajusta este valor para eliminar el tacho blanco de abajo */
}
.logo {
    margin: 0;
}
.logo a {
    /* Nos aseguramos de que el enlace no tome más espacio del necesario */
    display: inline-block;
}

/* Opcional: Si quieres que el logo sea un poco más pequeño en celulares para ahorrar espacio */
@media (max-width: 768px) {
    .logo img {
        max-height: 45px; 
    }
}

/* Contenedor del menú */
.nav-menu {
    margin-left: auto; /*pegar al margen*/ /* Distancia entre el logo y el menú */
}



/* Enlaces */
.nav-link {
    
    position: relative;
    top: -20px;

    text-decoration: none;   /* Quita el subrayado */
    color: #333;             /* Color del texto */
    font-size: 18px;         /* Tamaño de la letra */
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    transition: color 0.3s ease;
     letter-spacing: 0.3px;         /* Ligero espaciado entre letras */
      text-transform: uppercase; /* Convierte a MAYÚSCULAS */
}

/* Efecto al pasar el mouse */
.nav-link:hover {
    color: #FFC300;
}

/*HEADES*/
/* =========================================
   HERO (Sección principal de bienvenida) */

.hero {
 min-height: 100vh; 
  
    /* LA MAGIA: Agregamos un linear-gradient negro semitransparente justo antes de tu url */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../images/gravas-logo.png");
    /* MAGIA PURA: El gradiente cubre toda la pantalla (100% 100%), la foto solo el 70% */
    background-size: 100% 100%, 70%;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
}

/* =========================================
   CONTENIDO DEL HERO
   ========================================= */

.hero-content {
  /* CAMBIO 1: Cambiamos el color base de blanco a negro */
    color: #FFFFFF; 
    
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2%;
    text-align: left;
     margin-top: 200px;
}

.hero-content h1 {
    /* FORZAMOS LA FUENTE MODERNA */
    font-family: 'Montserrat', sans-serif;
    
    text-transform: uppercase;
    
    /* CAMBIO 2: Lo hacemos más pequeño (bajamos de 4.5rem a 3rem) */
    font-size: 3rem; 
    
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 550px;
}

.hero-content p {
   /* Aplicamos la misma fuente al párrafo secundario */
    font-family: 'Montserrat', sans-serif; 
    
    /* Achicamos también un poco el párrafo para que guarde proporción */
    font-size: 1.2rem; 
    
    line-height: 1.6;
    font-weight: 400;
    max-width: 600px;
}
/* =========================================
   BOTÓN HERO (Diseño Base para PC)
   ========================================= */
.hero-cta {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el botón y las flechas */
    margin-top: 30px; /* Separación con el texto de arriba */
}

.btn-materiales {
    background-color: #D3C5B7; /* Color arena/beige exacto de tu imagen */
    color: #3B4B5A; /* Color gris azulado oscuro de las letras */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 6px; /* Bordes ligeramente redondeados */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efecto al pasar el mouse en PC */
.btn-materiales:hover {
    background-color: #C2B4A5; /* Se oscurece un poco la arena */
    transform: translateY(-2px); /* Se levanta un poquito */
}

/* Tamaño de las flechas en PC */
.flechas-cta {
    width: 85px;
    height: 24px;
}

/* =========================================
   QUIÉNES SOMOS - DISEÑO DIVIDIDO (SPLIT LAYOUT)
   ========================================= */

/* 1. El contenedor padre DEBE ser relativo */
.split-container {
    display: flex;
    position: relative; 
    width: 100%; /* NUEVO: Fuerza a ocupar toda la pantalla de orilla a orilla */
    margin: 0 0 60px 0; /* MODIFICADO: Quitamos el 'auto' que lo centraba */
    background-color: #FFFFFF;
}

/* La mitad amarilla (Modificada para ser más alta) */
.yellow-box {
    background-color: #FFC300;
    width: 50%;
    min-height: 800px; /* NUEVO: Ajusta este número (ej. 500px, 600px) si las quieres aún más altas */
    /* Orden: Arriba | Derecha (Hacia la máquina) | Abajo | Izquierda */
    padding: 250px 220px 60px 40px; /* Aumentar el 100px empujará el texto más a la izquierda */
    display: flex;
   align-items: flex-start; 
     justify-content: flex-end;
}

/* La mitad blanca (Modificada para ser más alta) */
.white-box {
    background-color: #FFFFFF;
    width: 50%;
    min-height: 800px; /* NUEVO: Debe tener el mismo min-height que la amarilla */
  /* Orden: Arriba | Derecha | Abajo | Izquierda (Hacia la máquina) */
    padding: 115px 80px 60px 330px; /* Aumentar el 100px empujará el texto más a la derecha */

    display: flex;
   align-items: flex-start; 
     justify-content: flex-end;

}

/* 3. EL TRUCO PARA CENTRAR LA IMAGEN PNG */
.center-machine {
    position: absolute;
    top: 75%; /* La empuja a la mitad de la altura */
    left: 42%; /* La empuja a la mitad del ancho */
    transform: translate(-50%, -50%); /* Cálculo matemático para que el centro de la imagen sea el centro exacto */
    width: 1850px; /* Ajusta este tamaño dependiendo de qué tan grande sea tu PNG */
    z-index: 10; /* Fuerza a la imagen a estar por encima de las dos cajas */
}

.yellow-box h2 {
    font-family: 'Montserrat', sans-serif; /* Llama a la fuente que importamos */
    font-weight: 900; /* El nivel de grosor (900 es el más masivo, igual al de tu foto) */
    font-size: 5rem; /* El tamaño de la letra. Sube o baja este número (ej. 4rem o 6rem) */
    color: #333333; /* El color gris oscuro/carbón de tu imagen */
    line-height: 1.1; /* Controla qué tan pegada está la palabra de arriba con la de abajo */
    margin: 0; /* Quita márgenes extra para que tengas control total */
}

/* Título de la caja blanca */
.white-box h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Extra grueso para el título */
    font-size: 2.2rem;
    color: #3A3A3A; /* Un gris muy oscuro, casi negro */
    margin-top: 0;
    margin-bottom: 25px; /* Separación entre el título y el primer párrafo */
    text-align: center;
    position: relative;
    left: -40px;
}

/* Párrafos de la caja blanca (Estilo del texto descriptivo) */
.white-box p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300; /* NUEVO: Peso "Light" para lograr ese aspecto limpio y elegante */
    font-size: 1.15rem; /* Un tamaño cómodo para la lectura */
    color: #4A4A4A; /* Un gris un poco más suave que el del título */
    line-height: 1.6; /* El espaciado entre las líneas, clave para que se vea como en tu imagen */
    margin-top: 0;
    margin-bottom: 20px; /* Separación entre un párrafo y el siguiente */
}

/* EL CONTENEDOR OSCURO */
.products-showcase {
   background-color: #1F1F1F; 
    padding-top: 230px;    /* Esto es lo que empuja los íconos hacia abajo */
    padding-bottom: 235px; /* Esto da espacio al final para que no pegue con la siguiente sección */
    padding-left: 5%;
    padding-right: 5%;
    
}

/* TÍTULO PRINCIPAL DE LA SECCIÓN OSCURA */
.showcase-title {
   font-family: 'Montserrat', sans-serif;
    color: #FFFFFF; 
    text-align: left; /* <-- CAMBIO CLAVE: Lo empuja a la izquierda */
    font-size: 2.8rem;
    font-weight: 900; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    
    /* ALINEACIÓN PERFECTA CON TUS ÍCONOS */
   /* NUEVAS MEDIDAS DE EXPANSIÓN */
    max-width: 1400px; /* Aumentamos el límite de 1200px a 1400px */
    width: 97%; /* Ocupará el 90% de la pantalla disponible */
    margin: 0 auto 60px auto;
    /* TOQUE VISUAL PREMIUM */
    line-height: 1.1;
}

/* LA CUADRÍCULA FLEXIBLE */
.showcase-container {
    display: flex;
    justify-content: space-between; /* Reparte los iconos uniformemente */
    gap: 30px;
  /* NUEVAS MEDIDAS DE EXPANSIÓN (Iguales al título) */
    max-width: 1400px; 
    width: 97%; 
    margin: 0 auto;
}

/* CADA ÍTEM INDIVIDUAL */
.showcase-item {
    flex: 1; /* Todos los bloques ocupan el mismo ancho */
    text-align: center;
    text-decoration: none; /* Quita la línea de "enlace" por defecto */
    color: #FFFFFF; /* Texto blanco para contrastar con el fondo oscuro */
    transition: transform 0.3s ease; /* Prepara la animación suave */
}

/* EL EFECTO PREMIUM AL PASAR EL RATÓN (HOVER) */
.showcase-item:hover {
    transform: translateY(-10px); /* Hace que el bloque "flote" hacia arriba */
}

/* EL ESPACIO DEL ÍCONO */
.icon-placeholder {
    display: flex;
    justify-content: center; /* Centra el ícono perfectamente */
    margin-bottom: 20px;
    color: #FFC300; /* El SVG tomará este color automáticamente */
}

/* CONTROL DE TAMAÑO Y ESTILO DEL SVG */
.icon-placeholder svg {
    width: 100px;  /* Modifica esto si los quieres más grandes o pequeños */
    height: 100px;
    stroke-width: 1.5; /* Controla qué tan gruesa es la línea del dibujo */
    transition: transform 0.3s ease; /* Prepara el ícono para animaciones */
}

/* EFECTO HOVER EXTRA PARA EL ÍCONO (Opcional) */
.showcase-item:hover .icon-placeholder svg {
    transform: scale(1.1); /* Hace que el ícono crezca un 10% al pasar el ratón */
}

/* TÍTULOS DE LOS PRODUCTOS */
.showcase-item h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 1px; /* Separa un poco las letras para mayor legibilidad */
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

/* DESCRIPCIÓN CORTA */
.showcase-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
    color: #A0A0A0; /* Un gris claro para que no compita con el título */
    line-height: 1.5;
    margin: 0;
}

/* EFECTO HOVER EN EL TEXTO */
.showcase-item:hover h4 {
    color: #FFC300; /* El título se pinta de amarillo al pasar el cursor */
}



   /*SECCIÓN QUIENES SOMOS 
   ---------------------/*
/* Contenedor principal: le damos un fondo casi blanco para separarlo de la caja anterior */
.history-block {
    background-color: #F8F9FA; /* Un gris sumamente claro y elegante */
  padding: 180px 20px; 
    
    display: flex;
    justify-content: center;
}

/* El bloque de texto: limitamos su ancho para que sea fácil de leer */
.history-content {
    max-width: 1000px; /* Evita que el texto se estire de orilla a orilla del monitor */
    text-align: center;
}

/* El título: Le damos la misma fuerza que a "PROTERSA" pero centrado */
.history-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 3.2rem;
    color: #3A3A3A;
    margin-top: 0;
    margin-bottom: 30px;
    position: relative;
}

/* EL DETALLE PREMIUM: Una pequeña línea amarilla debajo del título */
.history-content h3::after {
    content: '';
    display: block;
    width: 60px; /* El ancho de la línea */
    height: 5px; /* El grosor de la línea */
    background-color: #FFC300; /* Tu amarillo corporativo */
    margin: 15px auto 0 auto; /* La separa del texto y la centra */
}

/* El párrafo: Usamos la versión ligera de la fuente para máxima elegancia */
.history-content p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.8; /* Excelente separación entre líneas */
    color: #555555;
    margin: 0;
}

/* Resaltamos cualquier texto para darle el toque amarillo de la marca */
.highlight-text {
    font-weight: 900;
    color: #FFC300; 
}


/* EL CONTENEDOR ZIG-ZAG */
.zigzag-row {
    display: flex;
    align-items: center; /* Centra verticalmente la foto y el texto */
    justify-content: space-between;
    padding: 80px 10%; /* Mucho aire arriba/abajo y márgenes laterales del 10% */
    gap: 60px; /* Crea una separación elegante entre la imagen y el texto */
}

/* EL FONDO GRIS */
.bg-gray {
    background-color: #EFEFEF; /* Un gris sutilmente más oscuro que el de Historia para crear contraste entre secciones */
}

/* LAS MITADES (50% y 50%) */
.zigzag-img, .zigzag-text {
    flex: 1; /* Le dice al navegador que ambas cajas deben ocupar exactamente el mismo ancho */
}

/* ESTILOS DEL TÍTULO (Manteniendo la fuerza de Montserrat) */
.zigzag-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    color: #3A3A3A;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ESTILOS DEL PÁRRAFO (Lectura limpia y profesional) */
.zigzag-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555555;
    margin: 0;
}

/* ESTILO TEMPORAL PARA TU PLACEHOLDER DE IMAGEN */
/* ESTILOS PARA LA FOTO DE PERSONAL (y cualquier imagen en las filas zig-zag) */
.zigzag-img img {
    width: 100%; /* Obliga a la foto a tomar el ancho de su lado */
    height: 400px; /* La misma altura que tenía tu cuadro gris */
    object-fit: cover; /* MAGIA CSS: Hace que la foto llene el espacio sin estirarse ni deformarse */
    border-radius: 8px; /* Le regresamos los bordes curvos y modernos */
    display: block; /* Elimina un pequeño espacio blanco que suele aparecer debajo de las fotos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Una sombra muy elegante para que resalte sobre el fondo gris */
}




/* =========================================
   PIE DE PÁGINA (FOOTER)
   ========================================= */
/* =========================================
   PIE DE PÁGINA PROFESIONAL (FOOTER)
   ========================================= */

/* ESTILOS GLOBALES DE LA SECCIÓN */
.footer {
    background-color: #1F1F1F; /* Un gris muy oscuro, más premium que #333 */
    color: #FFFFFF;
    /* CAMBIO: Quitamos el 5% de los lados y lo dejamos en 0 */
    padding: 100px 0 0 0;
    font-family: 'Montserrat', sans-serif; /* Asegurando fuente */
}

/* LA CUADRÍCULA PROFESIONAL (GRID) */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; /* 4 columnas de diferente ancho */
    gap: 50px; /* Separación generosa */
    max-width: 1400px; /* Igual que el escaparate para alineación */
    margin: 0 auto; /* Centrado */
    padding-bottom: 70px; /* Espacio antes de la barra inferior */
    /* CAMBIO: Le pasamos el 5% lateral aquí para que tus 
       columnas no peguen con el borde en celulares */
    padding-left: 5%;
    padding-right: 5%;
}

/* ESTILOS COMUNES DE COLUMNA */
.footer-col h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFC300; /* Amarillo corporativo para títulos */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

/* COLUMNA 1: LOGO Y ESlogan */
.footer-logo {
    max-width: 200px; /* Ajusta según tu logo */
    margin-bottom: 0px;
    display: block;
}
.footer-branding {
    /* El margen negativo jala toda la columna (logo y texto) hacia arriba */
    margin-top: -40px; /* <-- Ve ajustando este número (-20px, -50px...) hasta que quede a la altura perfecta */
}

.footer-tagline {
    font-size: 0.95rem;
    color: #A0A0A0; /* Un gris medio para descripción */
    line-height: 1.6;
    font-weight: 300;
   margin-top: -35px;
}

/* ESTILOS DE LISTAS DE ENLACES (Navegación y Productos) */
.footer-links ul,
.footer-products ul {
    list-style: none; /* Quitamos viñetas */
    padding: 0;
    margin: 0;
}

.footer-links li,
.footer-products li {
    margin-bottom: 12px; /* Espacio entre enlaces */
}

.footer-links a,
.footer-products a {
    text-decoration: none;
    color: #e0e0e0; /* Blanco apagado */
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.3s ease; /* Transición suave para el hover */
}

.footer-links a:hover,
.footer-products a:hover {
    color: #FFC300; /* Brilla en amarillo al pasar el mouse */
    padding-left: 5px; /* Un pequeño "empujoncito" al hover */
}

/* COLUMNA 4: CONTACTO TÉCNICO E ICONOS */
.contact-item {
    display: flex;
    /* CAMBIO CLAVE: Alinea el icono al inicio (arriba) en lugar del centro */
    align-items: flex-start; 
    font-size: 0.95rem;
    color: #e0e0e0;
    margin-bottom: 25px; /* Un poquito más de espacio debajo de todo el bloque */
    font-weight: 400;
}

.contact-icon {
    width: 22px; 
    height: 22px;
    color: #FFC300; 
    margin-right: 15px; 
    flex-shrink: 0; 
    /* Truco: Baja el icono unos milímetros para que quede perfectamente alineado con la primera línea de texto */
    margin-top: 2px; 
}

/* =========================================
   NUEVOS ESTILOS PARA LOS TEXTOS DE CONTACTO
   ========================================= */
.contact-text-group {
    display: flex;
    flex-direction: column; /* Apila las direcciones una debajo de la otra */
    gap: 12px; /* MAGIA: Esto crea el espacio perfecto entre "Oficinas" y "Cantera" */
    line-height: 1.6; /* Hace que el texto no esté apretado */
}

.highlight-label {
    color: #FFC300; /* Pinta las palabras "Oficinas:" y "Cantera:" de amarillo corporativo */
    font-weight: 600; /* Las hace un poco más gruesas */
}

/* BARRA INFERIOR DE DERECHOS RESERVADOS */
.footer-bottom {
    background-color: #1A1A1A; /* Un gris aún más oscuro para separar */
    width: 100%;
    border-top: 1px solid #333333; /* Línea de separación sutil */
    padding: 30px 5%;
}

.footer-bottom-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Copyright a la izq, legales a la der */
    align-items: center;
}

.footer-bottom p {
    font-size: 0.9rem;
    color: #999999; /* Texto más discreto */
    margin: 0;
}

/* ENLACES LEGALES */
.footer-legal-links {
    display: flex;
    gap: 25px;
}

.footer-legal-links a {
    text-decoration: none;
    color: #999999;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

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



/* =========================================
   ESTRUCTURA BASE (PC)
   ========================================= */

/* Regla normal para PC (Tarjetas Lado a lado) */
.about-grid {
   display: flex;
    flex-direction: row; 
    gap: 30px; /* Crea un espacio uniforme entre las tarjetas */
}

/* Estilo básico para que las tarjetas se vean ordenadas */
.about-card {
    flex: 1; /* Hace que todas las tarjetas midan exactamente lo mismo */
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

/* =========================================
   BOTÓN DE HAMBURGUESA (Diseño visual)
   ========================================= */

/* Ocultamos el contenedor del botón en la versión de computadora */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Le damos forma, color y tamaño a las 3 rayitas (los span) para que sean visibles */
.hamburger span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #333333; /* Color gris oscuro para que resalte. Puedes cambiarlo a tu gusto */
    margin-bottom: 6px;
    border-radius: 2px;
}

/* Evitamos margen debajo de la última rayita */
.hamburger span:last-child {
    margin-bottom: 0;
}

/* Ocultar el encabezado del menú móvil cuando estemos en Computadora */
.menu-mobile-header {
    display: none;
}
/* =========================================
   ADAPTACIÓN PARA CELULARES (Todo en un solo bloque)
   ========================================= */

@media (max-width: 768px) {
    

      .hamburger {
        display: block; 
    }

    .about-grid {
        flex-direction: column; 
    }
    /* =====================================
       NUEVO: BARRA TRANSPARENTE SOBRE EL HERO
       ===================================== */


    /* 1. Bajar el logo y la hamburguesa */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        /* Aumentamos el primer número (espacio arriba) para empujar los elementos hacia abajo */
        padding: 10px 15px 5px 15px; 
    }

    /* 2. Agrandar el logo en celular */
    .logo img {
        /* Subimos la altura máxima (puedes ajustar este número entre 60px y 90px a tu gusto) */
        max-height: 100px; 
    }

    .header {
    position: absolute; 
        top: 0;             
        left: 0;
        width: 100%;
       
        backdrop-filter: none !important; /* Quita el efecto borroso si existía */
       
        z-index: 999;
        /* Tus otras reglas se mantienen iguales... */
        background-color: transparent !important; 
        
        /* 🔥 ESTO ELIMINA LA LÍNEA BLANCA */
        border-bottom: none !important; 
        box-shadow: none !important;
    }

    .hamburger {
      display: flex;
        flex-direction: column;
        gap: 8px; /* Separación de las 2 líneas */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
    /* Como el fondo ahora es la foto oscura, pasamos la hamburguesa a blanco */
    .hamburger span {
       display: block;
        width: 32px; /* Líneas un poco más largas para ese look premium */
        height: 1.5px; /* Líneas muy delgadas */
        background-color: #ffffff; /* Color blanco */
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    /*  APAGAMOS CUALQUIER LÍNEA FANTASMA CREADA CON CSS VIEJO */
    .hamburger::before, 
    .hamburger::after {
        display: none !important; 
    }

    /*  POR SI EL HTML NO SE ACTUALIZÓ, OCULTAMOS LA TERCERA LÍNEA */
    .hamburger span:nth-child(3) {
        display: none !important;
    }

    /* FORZAMOS EL ESTILO DE LAS DOS PRIMERAS LÍNEAS */
    .hamburger span:nth-child(1),
    .hamburger span:nth-child(2) {
        display: block !important;
        opacity: 1 !important; /* Quita la transparencia de la primera línea */
        width: 32px; 
        height: 1.5px;
        background-color: #ffffff !important; /* Fuerza el blanco sólido */
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* =====================================
       TEXTO DEL HERO (Abajo a la izquierda)
       ===================================== */
    
 /* 2. Controlamos el texto en sí */
    .hero-content {
        text-align: left; 
        width: 100%;
        box-sizing: border-box; 
        
        /* CAMBIO 1: Reducimos el padding de 25px a 15px. 
           Esto nos regala 20 pixeles extra de ancho total para que quepa la palabra. */
        padding-left: 15px;  
        padding-right: 15px;  
        padding-bottom: 105px; 
    }

    /* 3. Ajustamos el título con un tamaño dinámico para celulares */
    .hero-content h1 {
        /* CAMBIO 2: Bajamos el tamaño mínimo de 1.4rem a 1.15rem y el porcentaje a 7.5vw.
           Así le damos permiso de hacerse un poco más pequeña en celulares muy delgados. */
        font-size: clamp(1.15rem, 7.5vw, 1.8rem); 
        
        line-height: 1.2;  
        margin-bottom: 10px;
        
        word-break: normal;
        overflow-wrap: normal;
        word-wrap: normal;
    }

    /* 3. Ajustamos un poco el tamaño de la letra para que luzca bien en esa esquina */
    .hero-content h1 {
        font-size: 2.2rem; /* Puedes subir o bajar este número */
        line-height: 1.1;  /* Junta las líneas de texto para que se vea más compacto */
        margin-bottom: 10px;
    }

    /* =====================================
       AJUSTES DEL BOTÓN HERO EN CELULARES
       ===================================== */
    .hero-cta {
        margin-top: 20px; /* Un poco menos de espacio arriba en celular */
    }

    .btn-materiales {
        font-size: 0.95rem; /* Letra un poquito más pequeña */
        padding: 12px 24px; /* Botón un poco más compacto */
    }

    .flechas-cta {
        width: 65px; /* Flechas más cortas para que quepan en la pantalla */
    }
    
    /* =====================================
       MENÚ A PANTALLA COMPLETA (Estilo App)
       ===================================== */
    .nav-menu {
        position: fixed; /* Se fija a la pantalla del celular, no a la página */
        top: 0;
        left: -100%; /* Empieza escondido totalmente hacia la izquierda */
        width: 100%;
        height: 100vh; /* 100vh = Toma el 100% de la altura de la pantalla */
        background-color: #333333; /* El fondo gris oscuro de tu imagen */
        z-index: 9999; /* Un número muy alto para tapar absolutamente todo el sitio */
        display: flex;
        flex-direction: column; /* Apila el encabezado y los enlaces uno debajo del otro */
        transition: left 0.4s ease; /* Efecto de deslizamiento suave */
    }
    /* 1. Aseguramos que el contenedor de la lista tome todo el ancho */
    .nav-menu li {
        width: 100%;
    }

    /* 2. Actualizamos los estilos del enlace */
    .nav-menu li a {
        color: #FFFFFF;
        font-family: 'Montserrat', sans-serif;
        font-size: 2.2rem;
        font-weight: 900;
        text-decoration: none;
        
        /* LA SOLUCIÓN: */
        display: block;       /* Convierte el enlace en un bloque contenedor */
        width: 100%;          /* Lo estira de lado a lado de la pantalla */
        text-align: center;   /* Centra obligatoriamente todas las líneas de texto */
        line-height: 1.1;     /* Reduce el espacio entre "ACERCA DE" y "NOSOTROS" para que se vea más unido y elegante */
    }

    /* Clase que Javascript activará para meter el menú a la pantalla */
    .nav-menu.active {
        left: 0; 
    }

    /* 1. ESTILOS DEL ENCABEZADO MÓVIL (Logo y X) */
    .menu-mobile-header {
        display: flex; /* Activa flexbox */
        justify-content: space-between; /* Empuja el logo a la izquierda y la X a la derecha */
        align-items: center; /* Los centra a la misma altura */
        padding: 20px 25px; /* Espacio respirable a los lados y arriba */
    }

    .menu-mobile-header img {
        max-height: 100px; /* Tamaño del logo dentro del menú oscuro */
    }

    .close-menu {
        background: none;
        border: none;
        color: #FFFFFF; /* X en color blanco */
        font-size: 3.5rem; /* Tamaño muy grande para la X */
        font-weight: 100; /* La hace delgada y elegante */
        cursor: pointer;
        line-height: 1; /* Evita que la X empuje la caja hacia abajo */
    }

    /* 2. ESTILOS DE LA LISTA DE ENLACES */
    .nav-menu ul {
        flex: 1; /* Le dice a la lista que tome todo el espacio sobrante debajo del logo */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra los enlaces verticalmente en la pantalla */
        align-items: center; /* Centra los enlaces horizontalmente */
        gap: 35px; /* Crea un espacio amplio entre cada enlace */
        padding-bottom: 80px; /* Los sube un poquito para que visualmente queden perfectos al centro */
        margin: 0;
        padding-left: 0; /* Quita viñetas o espacios raros de las listas HTML */
    }

    /* 3. ESTILOS DE LAS LETRAS (Idénticas a la imagen) */
    .nav-menu li a {
        color: #FFFFFF; /* Texto Blanco */
        font-family: 'Montserrat', sans-serif;
        font-size: 1.8rem; /* Letras gigantes */
        font-weight: 900; /* Máximo grosor (Extrabold/Black) */
        text-decoration: none;
        text-align: center;
    }



    /* =====================================
       ADAPTACIÓN DEL YELLOW BOX Y WHITE BOX
       ===================================== */

    /* 1. Contenedor principal: Apilamos en columna (uno debajo de otro) */
    .split-container {
        flex-direction: column;
        margin-bottom: 30px; /* Reducimos un poco el margen inferior */
    }

    /* 2. Caja Amarilla: Ocupa todo el ancho y reducimos paddings */
    .yellow-box {
        width: 100%;
        min-height: 40vh;
        padding: 80px 20px 100px 20px; /* Un padding normal. El 100px abajo le hace espacio a la excavadora */
        justify-content: center;
        align-items: center;
    }

    /* Reducimos el tamaño de la letra para celular y la centramos */
    .yellow-box h2 {
        font-size: 3rem; 
        text-align: center;
    }

    /* 3. La Máquina: Le quitamos la posición absoluta para que fluya en medio */
    .center-machine {
      display: none; /* La ocultamos en celular para que no tape el texto */
    }

    /* 4. Caja Blanca: Ocupa todo el ancho y reseteamos alineaciones */
    .white-box {
       
        width: 100%;
        min-height: auto; /* Anulamos los 800px */
        padding: 40px 25px 60px 25px; /* Padding cómodo para lectura */
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Apila el título y los párrafos verticalmente */
    }

    /* Limpiamos el desplazamiento (-40px) que tenía en PC */
    .white-box h3 {
        left: 0; 
        font-size: 2rem;
        text-align: center;
    }

    /* Ajustamos el tamaño del texto para celular */
    .white-box p {
        font-size: 1.05rem;
        text-align: center; /* En móviles apilados, el texto centrado luce más ordenado */
        margin-bottom: 15px;
    }


    /* =====================================
       ADAPTACIÓN DEL ESCAPARATE DE PRODUCTOS
       ===================================== */

       .products-showcase {
        padding-top: 140px; 
        padding-bottom: 140px;
        overflow: hidden; /* MAGIA: Oculta los materiales que se salen de la pantalla */
    }

    .showcase-title {
        text-align: center; /* Centramos el título en celular */
        font-size: 2.2rem;
        margin-bottom: 40px;
    }

    /* Convertimos el contenedor en un riel largo */
    .showcase-container {
        display: flex;
        flex-wrap: nowrap; /* Fuerza a que todos estén en una sola línea horizontal */
        gap: 0; /* Quitamos el espacio entre cajas para que el cálculo del 100% sea exacto */
        width: 100%;
        transition: transform 0.5s ease-in-out; /* Esto hace que el deslizamiento sea suave */
    }

    /* Cada material ocupa exactamente el ancho total de la pantalla del celular */
    .showcase-item {
        min-width: 100%; 
        padding: 0 20px; /* Un pequeño margen interno para que no peguen a los bordes de la pantalla */
        box-sizing: border-box; /* Asegura que el padding no deforme el 100% del ancho */
    }
    /* 1. Apilamos los elementos verticalmente */
    .zigzag-row {
        flex-direction: column; /* Esto rompe la fila y los pone en columna */
        padding: 60px 5%; /* Reducimos el espacio vacío a los lados y arriba/abajo */
        gap: 30px; /* Acortamos la distancia entre la foto y el texto */
    }

    /* 2. Ajustamos el tamaño de la foto */
    .zigzag-img img {
        height: 280px; /* Bajamos de 400px a 280px para que se vea bien en celular */
        width: 100%;
    }

    /* 3. Centramos el texto para que luzca más armónico en móvil */
    .zigzag-text h3, 
    .zigzag-text p {
        text-align: center; 
    }







    /* =====================================
       ADAPTACIÓN DEL FOOTER
       ===================================== */
    .footer-grid {
        display: flex;
        flex-direction: column; /* Apila las 4 columnas una debajo de la otra */
        gap: 40px;
        text-align: center; /* Centramos el texto para que luzca ordenado en celular */
    }

    /* Centramos los iconos de contacto con su texto */
    .footer-contact .contact-item {
        justify-content: center; 
    }

    /* Hacemos que la barra legal de abajo también se apile */
    .footer-bottom-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-logo {
        display: block;
        margin: 0 auto; 
    }
    
  

   
    
 

       }   
    
   




/* =========================================
   PÁGINA DE PRODUCTOS (ZIG-ZAG LAYOUT)
   ========================================= */

/* Espacio superior para que el menú Sticky no tape el título */
/* =========================================
   ENCABEZADO DE PÁGINA (Computadora)
   ========================================= */
.page-header-bg {
    padding-top: 250px; 
    padding-bottom: 180px; 
    text-align: center; 
    background: linear-gradient(rgba(26, 26, 26, 0.75), rgba(26, 26, 26, 0.75)), url('../images/materiales.png');
    background-size: cover;
    background-position: center;
    /* Agregamos esto de seguridad para que el texto nunca choque con los bordes */
    padding-left: 20px;
    padding-right: 20px;
}

.page-header-bg h1 {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900; 
    font-size: 3.5rem; 
    color: #FFFFFF; 
    margin-bottom: 15px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
}

.page-header-bg p {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 300; 
    font-size: 1.2rem; 
    color: #F0F0F0; 
    max-width: 600px; 
    margin: 0 auto;
}

/* Contenedor principal alineado a tus 1400px globales */
.zigzag-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 5%;
}

/* Estructura de cada fila (Imagen y Texto) */
.product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 100px; /* Separación amplia entre productos */
}

/* MAGIA PURA: Invierte la dirección en los productos 2 y 4 */
.product-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* Mitad para imagen y mitad para texto */
.product-image {
    width: 48%;
}

.product-info {
    width: 45%;
}

.product-image img {
    width: 100%;
    height: 450px; /* Mantenemos la altura que tenías pensada */
    object-fit: cover; /* Evita que la foto de la grava o arena se deforme */
    border-radius: 12px;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
}

/* Textos e información técnica */
.product-info h2 {
    font-size: 2.2rem;
    color: #1A1A1A;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.product-info p {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 25px;
}

.product-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.product-info ul li {
    font-size: 1.05rem;
    color: #333333;
    margin-bottom: 12px;
    border-left: 3px solid #FFC300; /* Detalle estético amarillo */
    padding-left: 15px;
}

/* Botón de Cotizar */
.btn-cotizar {
    display: inline-block;
    background-color: #FFC300;
    color: #1A1A1A;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cotizar:hover {
    background-color: #1A1A1A;
    color: #FFC300;
}
/* Color para resaltar texto clave (Amarillo de la marca) */
.text-highlight {
    color: #FFC300; 
    font-weight: 800;
}

/* BOTÓN DE COTIZACIÓN (ESTILO INDUSTRIAL) */
/* BOTÓN DE COTIZACIÓN (ESTILO INDUSTRIAL CON ÍCONO) */
.btn-cotizar {
    display: inline-flex; /* Flexbox para alinear ícono y texto */
    align-items: center; /* Los centra verticalmente */
    gap: 10px; /* Separación de 10px entre el ícono de WA y las letras */
    background-color: #FFC300; 
    color: #1A1A1A; 
    padding: 12px 28px;
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cotizar:hover {
    background-color: #1A1A1A;
    color: #FFC300; 
}
/* RESPONSIVIDAD (Para celulares) */
@media (max-width: 900px) {
    .product-row, 
    .product-row:nth-child(even) {
        flex-direction: column; /* Apila todo hacia abajo */
        margin-bottom: 70px;
    }

    .product-image, 
    .product-info {
        width: 100%;
    }

    .product-image {
        margin-bottom: 30px;
    }
  /* =====================================
       ENCABEZADO DE PÁGINA (Celulares)
       ===================================== */
    .page-header-bg {
        /* CAMBIO: Restauramos los valores originales de altura para que se vea imponente */
        padding-top: 280px; 
        padding-bottom: 210px; 
        
        /* Mantenemos el margen de seguridad lateral */
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-header-bg h1 {
        /* Mantenemos la letra ajustada para que NO se corte como en la primera imagen */
        font-size: 2.4rem; 
        letter-spacing: 0px; 
    }

    .page-header-bg p {
        font-size: 1rem; 
    }
}
/* RESPONSIVIDAD PARA EL ZIG-ZAG (Acomoda en celulares) */
@media (max-width: 900px) {
    .zigzag-row {
        flex-direction: column; /* Pone una cosa debajo de otra */
        padding: 60px 5%; /* Reduce los márgenes laterales en celular */
        gap: 30px;
    }
    
    /* Para que en las filas pares (donde el texto está primero), 
       la imagen siempre pase arriba en versión celular */
    .zigzag-row.bg-gray {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .zigzag-img, .zigzag-text {
        width: 100%; /* Toma todo el ancho de la pantalla */
        text-align: center; /* Opcional: centra el texto en el móvil */
    }
}

/* ESTILOS PARA LAS FOTOS REALES DE LOS MATERIALES */
.product-image img {
    width: 100%;
    height: 450px; /* Mantenemos la altura que tenías pensada */
    object-fit: cover; /* Evita que la foto de la grava o arena se deforme */
    border-radius: 12px;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
}

/* =========================================
   RESPONSIVIDAD PARA PRODUCTOS (CELULARES)
   ========================================= */
@media (max-width: 900px) {
    /* 1. Apilamos los elementos verticalmente */
    .product-row {
        flex-direction: column; /* Pone foto arriba, texto abajo */
        gap: 30px; /* Espacio entre la foto y la descripción */
        margin-bottom: 70px; /* Reducimos el espacio inferior entre productos */
    }

    /* 2. ¡EL TRUCO VITAL! 
       Anulamos el zig-zag en celulares para que los productos pares 
       no queden con el texto arriba y la foto abajo. */
    .product-row:nth-child(even) {
        flex-direction: column; 
    }

    /* 3. Las cajas ya no miden el 48%, ahora ocupan toda la pantalla */
    .product-image, 
    .product-info {
        width: 100%;
    }

    /* 4. Hacemos la foto más bajita para no saturar la pantalla */
    .product-image img {
        height: 280px; 
    }

    /* 5. Centramos el texto (opcional, pero mejora mucho la lectura en móvil) */
    .product-info {
        text-align: center;
    }
}




/* SECCIÓN DE CONTACTO */
.contact-section {
     padding-top: 150px; 
    padding-bottom: 50px;
    padding: 80px 10%;
    background-color: #FFFFFF;
}

.contact-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* LAS TARJETAS */
.contact-card {
    flex: 1;
    background-color: #EFEFEF;
    padding: 40px 30px;
    border-radius: 8px;
    border-top: 5px solid #FFC300; /* Detalle amarillo corporativo arriba */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px); /* Se levanta un poquito al pasar el mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #1A1A1A;
    margin-top: 0;
    margin-bottom: 20px;
}

.card-text, .card-schedule {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: #555555;
}

.card-schedule {
    margin-top: 15px;
}

/* ENLACES DIRECTOS DENTRO DE LA TARJETA */
.contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.link-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1A1A1A;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.link-item:hover {
    color: #FFC300;
    border-color: #FFC300;
}

/* EL MAPA */
.map-container {
    width: 100%;
    display: block;
    margin-bottom: -5px; /* Quita el pequeño margen blanco debajo del mapa antes del footer */
}

/* RESPONSIVIDAD PARA CELULARES */
@media (max-width: 900px) {
    .contact-grid {
        flex-direction: column; /* Pone las tarjetas una debajo de otra en móvil */
    }
}