/* --- 1. CONFIGURACIÓN GENERAL (NUEVO ESTILO) --- */
:root {
    /* Color principal de tu marca (como en las webs de ejemplo) */
    --color-marca: #004a99; 
    --color-marca-hover: #003366; /* Más oscuro para botones */
    
    /* Colores de texto */
    --color-texto: #333;       /* Principal */
    --color-texto-secundario: #555; /* Más suave */
    
    /* Fondos */
    --color-fondo: #f8f9fa;  /* Gris muy claro para el fondo de la página */
    --color-blanco: #ffffff; /* Blanco para cajas de contenido */
    --color-footer: #222;   /* Fondo oscuro para el pie de página */

    /* Bordes */
    --color-bordes: #e9ecef; /* Borde suave para las tarjetas */
}

/* Tipografía moderna (fuentes) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 130px;
    background-color: var(--color-fondo); /* Fondo gris claro */
    color: var(--color-texto);
    line-height: 1.7; /* Más espacio entre líneas, más legible */
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--color-marca);
    margin-top: 0;
    font-weight: 600; /* Letra un poco más gruesa para títulos */
}

p {
    color: var(--color-texto-secundario);
    margin-bottom: 1.2rem;
}

/* --- 2. BARRA DE NAVEGACIÓN (ESTILO CREXEL/EMELEC) --- */
.navbar {
    background-color: var(--color-blanco);
    padding: 15px 0;
    border-bottom: 1px solid var(--color-bordes);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    
    /* ACÁ ESTÁ LA MAGIA DEL "FIJO" */
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 1000; /* Para que esté siempre encima de todo */
    
    /* Animación suave para aparecer/desaparecer */
    transition: top 0.4s ease-in-out;
}

/* Esta clase se agrega automáticamente cuando bajás */
.navbar.navbar-hidden {
    top: -150px; /* Mueve el menú hacia arriba (fuera de la pantalla) */
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* El resto de estilos del logo y nav se mantienen igual... */
.navbar .logo img {
    height: 90px;
}
.navbar nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.navbar nav li {
    margin-left: 30px;
}
.navbar nav a {
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-weight: 500;
    font-size: 16px;
    padding: 8px 0;
    transition: color 0.3s ease;
}
.navbar nav a:hover {
    color: var(--color-marca);
}
.navbar nav a.active {
    color: var(--color-marca);
    font-weight: 700;
}

/* --- 3. SECCIÓN HERO (CON VIDEO DE FONDO) --- */

.hero {
    position: relative; /* Clave para posicionar el video y el contenido */
    padding: 100px 0;
    text-align: center;
    color: white;
    overflow: hidden; /* Evita que el video se desborde */
}

/* 1. EL VIDEO DE FONDO */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el video perfectamente */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Nivel 1 (lo más bajo) */
}

/* 2. CAPA OSCURA (OVERLAY) - Esencial para legibilidad */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Esta es la capa oscura que tenías en la imagen */
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 2; /* Nivel 2 (encima del video) */
}

/* 3. EL CONTENIDO (H1, P, BOTÓN) */
.hero .container {
    position: relative; /* Se asegura que esté por encima de todo */
    z-index: 3; /* Nivel 3 (encima de la capa oscura) */
}

.hero h1 {
    color: white;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.hero p {
    color: white;
    font-size: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 30px;
}

/* Botón "Call to Action" */
.cta-button {
    display: inline-block;
    background-color: var(--color-marca);
    color: white;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--color-marca-hover);
}

/* --- 4. CONTENIDO (ESTILO "CARDS" COMO KOLFF) --- */
.page-content {
    padding: 60px 0;
    /* Ya no es una "caja" blanca, se funde con el fondo gris */
}

.page-content h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
}
.page-content > .container > p {
    text-align: center;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 40px auto;
}


/* Grilla de Servicios (Estilo "Cards") */
.services-grid {
    display: grid;
    /* Esto crea 3 columnas en escritorio y se ajusta solo en celu */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
}

/* La tarjeta de servicio */
.service-box {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-bordes);
    border-radius: 8px; /* Bordes redondeados */
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Sombra muy sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
    transform: translateY(-5px); /* Efecto de "levantarse" */
    box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* Sombra más notoria */
}

.service-box h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

/* --- 5. ESTILOS ADICIONALES PARA LISTAS DE SERVICIOS --- */
/* Esto le da estilo a la lista de "Mantenimiento" */

.service-box .service-list {
    margin: 0;
    padding-left: 18px; /* Pequeña sangría para los puntos */
    color: var(--color-texto-secundario); /* Mismo color que los párrafos */
    font-size: 15px; /* Ajusta el tamaño si es necesario */
}

.service-box .service-list li {
    margin-bottom: 8px; /* Espacio entre cada ítem */
}

.service-box .service-list li:last-child {
    margin-bottom: 0; /* Saca el espacio del último ítem */
}

/* --- 6. PIE DE PÁGINA (FOOTER) --- */
.footer {
    background-color: var(--color-footer);
    color: #adb5bd; /* Texto gris claro */
    padding: 50px 0;
    text-align: center;
    font-size: 14px;
    margin-top: 40px;
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    height: 120px;
    margin-bottom: 25px;
    /* Filtro para que el logo se vea blanco sobre fondo oscuro */
    /* Si tu logo largo ya es blanco, borra esta línea */
    filter: brightness(0) invert(1) grayscale(100%) brightness(2);
}

.footer-contact {
    margin-bottom: 20px;
    line-height: 1.6;
}
.footer-contact p {
    margin: 5px 0;
    color: #adb5bd; /* Hereda el color */
}

.footer-copyright {
    font-size: 13px;
    color: #888;
}

/* --- ESTILOS PARA PÁGINA "QUIÉNES SOMOS" (CORREGIDO) --- */

/* 1. SECCIÓN DE TÍTULO Y FONDO */
.about-hero {
    position: relative;
    padding: 80px 0; /* Espacio para el título */
    text-align: center;
}

.about-hero h1 {
    font-size: 3.5rem;
    color: var(--color-marca);
    position: relative;
    z-index: 2; /* Por delante del fondo */
}


/* 2. SECCIÓN DE TEXTO */
.about-content {
    max-width: 800px; 
    margin: 0 auto 60px auto; 
    line-height: 1.8;
}

.about-content h2 {
    font-size: 1.8rem;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center; 
}
.about-content p {
    text-align: center;
    color: var(--color-texto-secundario);
}


/* 3. SECCIÓN DE MÉTRICAS */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    text-align: center;
    border-top: 1px solid var(--color-bordes);
    border-bottom: 1px solid var(--color-bordes);
    padding: 40px 0;
    margin: 60px 0; /* Espacio arriba y abajo */
}

.metric-box {
    padding: 20px;
}

.metric-number {
    display: block;
    color: var(--color-marca);
    font-size: 3rem; 
    font-weight: 700;
    margin-bottom: 5px;
}

.metric-label {
    color: var(--color-texto-secundario);
    font-size: 1rem;
}


/* 4. SECCIÓN DE EQUIPOS (COMO YA ESTABA) */
.team-sections-full-width {
    margin-top: 0; /* Ya no necesita margen superior */
}

.team-block {
    padding: 60px 0;
}

.team-block.bg-blue {
    background-color: var(--color-marca); 
}

.team-block.bg-light {
    background-color: var(--color-fondo); 
}

.team-block-content {
    display: flex; 
    gap: 40px; 
    align-items: flex-start;
    flex-wrap: wrap;
}

.team-block-title {
    flex: 0 0 30%; 
}

.team-block.bg-blue .team-block-title {
    color: white; 
}
.team-block.bg-light .team-block-title {
    color: var(--color-marca); 
}

.team-block-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    line-height: 1.1;
    color: inherit;
}

.team-block-title .subtitle {
    display: block; 
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    opacity: 0.8;
}

.team-block-text {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.7;
}

.team-block.bg-blue .team-block-text p {
    color: white;
    opacity: 0.9;
    margin: 0;
}

.team-block.bg-light .team-block-text p {
    color: var(--color-texto-secundario);
    opacity: 1;
    margin: 0;
}

/* Adaptación para Celulares */
@media (max-width: 768px) {
    .team-block-content {
        flex-direction: column; 
        gap: 20px;
    }
    .team-block-title {
        flex: none; 
        width: 100%; 
        text-align: center; 
    }
    .team-block-text {
        text-align: center; 
    }
    .team-block-title h2 {
        font-size: 2rem;
    }
    /* Si tenés clases como .row, .team-sections, etc. */
    .row, .team-sections-full-width, .feature-row {
        flex-direction: column !important;
    }

    /* Quitar anchos fijos */
    .col-3, .col-4, .feature-image, .feature-text {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 30px;
    }
}

/* --- 9. FONDO GLOBAL "QUIÉNES SOMOS" (OPACIDAD AJUSTABLE) --- */

/* 1. Hacemos que el body sea el "contenedor" */
body.page-quienes-somos {
    position: relative; /* Necesario para que la capa de fondo funcione */
    z-index: 1; /* Nivel 1 */
}

/* 2. Creamos la "capa" de fondo (::before) */
body.page-quienes-somos::before {
    content: "";
    position: fixed; /* Fijo, para que no se mueva con el scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 100% de la altura de la pantalla */
    z-index: -1; /* Nivel -1 (detrás de todo el contenido) */

    /* La imagen de fondo */
    background-image: url('logo-largo-sin-m.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    /* ESTA ES LA LÍNEA CLAVE. 
    Ajusta este valor a tu gusto.
    0.1  = 10% opacidad (sutil)
    0.3  = 30% opacidad (visible)
    0.5  = 50% opacidad (fuerte)
    1.0  = 100% opacidad (sin difuminar)
    */
    opacity: 0.3; 
}

/* 3. Estilo para la "tarjeta" blanca de texto */
.about-content.card {
    background-color: var(--color-blanco);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-top: 40px; 
}

/* --- 10. ESTILOS PARA PÁGINAS INTERNAS Y CONTACTO --- */

/* --- ENCABEZADO MODERNO (AZUL SOBRE GRIS) --- */

.page-header {
	background-image: none !important; /* Asegura que no haya foto */
	background-color: #f0f2f5; /* Fondo gris suave */
	padding: 60px 0;
	text-align: left;
	border-bottom: 4px solid #004a99; /* Línea azul abajo */
	margin-bottom: 40px;
}

/* Quitamos la capa oscura */
.page-header::before {
	display: none;
}

.page-header .container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* AQUÍ ESTÁ EL CAMBIO: Color Azul Maxener */
.page-header h1 {
	color: #004a99 !important; /* Forzamos el AZUL de la marca */
	font-size: 3rem;
	font-weight: 800;
	margin: 0 0 10px 0;
	line-height: 1.1;
	text-transform: uppercase;
}

/* El texto de abajo en gris oscuro para que se lea bien */
.page-header p {
	font-size: 1.2rem;
	color: #333333; /* Gris casi negro (muy legible) */
	max-width: 800px;
	margin: 0;
	font-weight: 500;
}

/* Ajuste para Celular */
@media (max-width: 768px) {
	.page-header {
		text-align: center;
		padding: 40px 0;
	}
	.page-header .container {
		align-items: center;
	}
	.page-header h1 {
		font-size: 2.2rem;
	}
}

/* Ajuste Celular */
@media (max-width: 768px) {
    .page-header {
        padding: 40px 0;
        text-align: center;
    }
    .page-header .container {
        align-items: center;
    }
    .page-header h1 {
        font-size: 2.2rem;
    }
    .page-header p {
        font-size: 1rem;
    }
}

/* 3. La capa "difuminada" (overlay) */
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Esta es la capa. Es un azul muy oscuro y opaco */
    /* Puedes cambiar el 0.6 a 0.5 (más claro) o 0.7 (más oscuro) */
    background-color: rgba(0, 40, 80, 0.6); 
    
    z-index: 1; /* Nivel 1 (encima de la imagen, debajo del texto) */
}

/* 4. El contenido (H1) */
.page-header .container {
    /* Hacemos que el contenido (el <h1>) esté por encima de la capa */
    position: relative;
    z-index: 2; /* Nivel 2 (por encima de todo) */
}

.page-header h1 {
    color: white;
    margin: 0;
    font-size: 2.5rem;
}

/* Grilla de 2 columnas para Contacto */
.contact-grid {
    display: grid;
    /* 60% para el formulario, 40% para la info */
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 40px;
}

/* 1. Columna de Formulario */
.contact-form-container h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
.contact-form-container p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-texto);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-bordes);
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box; /* Previene desbordamiento */
}
.form-group textarea {
    resize: vertical; /* Permite al usuario ajustar la altura */
}

/* Botón de enviar (usa el estilo del botón del Hero) */
.contact-form-container .cta-button {
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

/* 2. Columna de Info */
.contact-info-container {
    background-color: var(--color-fondo); /* Fondo gris claro */
    border-radius: 8px;
    padding: 30px;
}

.contact-info-box {
    margin-bottom: 30px;
}
.contact-info-box h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.contact-info-box p {
    margin-bottom: 10px;
    line-height: 1.6;
}
.contact-info-box .contact-detail {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-marca);
}

/* 3. Contenedor del Mapa */
.map-container {
    margin-top: 60px;
}
.map-container h3 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
}
.map-container iframe {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    width: 100%; /* Asegura que sea responsive */
}

/* --- Adaptación para Celulares (Responsive) --- */
@media (max-width: 900px) {
    .contact-grid {
        /* Apila las columnas en celulares */
        grid-template-columns: 1fr;
    }
    .contact-info-container {
        /* Mueve la info de contacto (columna 2) para arriba */
        order: -1; 
    }
}

/* --- 11. ESTILOS PARA BOTONES EN HOME --- */

.home-buttons-container {
    text-align: center;
    margin-top: 40px; /* Espacio después de la grilla de servicios */
    padding-bottom: 40px; /* Espacio antes del footer */
    border-bottom: 1px solid var(--color-bordes);
}

.home-buttons-container .cta-button {
    margin: 10px 15px; /* Espacio entre botones */
}

/* Creamos un estilo "secundario" para el segundo botón */
.home-buttons-container .cta-button.secondary {
    background-color: var(--color-texto-secundario);
    color: white;
}
.home-buttons-container .cta-button.secondary:hover {
    background-color: var(--color-texto);
}

/* Agregamos un párrafo de "intro" para las páginas */
.page-intro {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* --- 12. ESTILOS PARA VIDRIERA DE PRODUCTOS (HOME) --- */

.product-showcase-home {
    padding-top: 40px; /* Espacio para separarlo de los servicios */
    margin-top: 40px; 
    border-top: 1px solid var(--color-bordes); /* Línea separadora */
}

/* Títulos y párrafos centrados (como en Servicios) */
.product-showcase-home h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
}

.product-showcase-home > p {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    max-width: 700px;
    margin: 0 auto 40px auto;
    text-align: center;
}

/* Este es el truco para centrar las 2 cajas de productos.
   Limitamos el ancho máximo de la grilla y la centramos.
*/
.product-showcase-home .services-grid {
    max-width: 740px; /* Ancho aprox. de 2 cajas + su espacio */
    margin-left: auto;
    margin-right: auto;
}

/* --- 13. ESTILOS ADICIONALES (PÁGINA SERVICIOS) --- */

/* Párrafo de introducción centrado */
.page-intro {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    max-width: 800px;
    margin: 40px auto 40px auto; /* Centrado y con margen */
    text-align: center;
}

/* Estilo para la lista en la sección de Mantenimiento (fondo azul) */
.service-list-light {
    margin: 15px 0 0 0;
    padding-left: 20px;
    color: white; /* Texto blanco */
    opacity: 0.9;
    font-size: 1rem;
    /* Usamos un checkmark (✓) en lugar del punto estándar */
    list-style-type: '✓ '; 
}

.service-list-light li {
    margin-bottom: 10px;
    padding-left: 5px; /* Espacio entre el check y el texto */
}

/* --- 14. ESTILOS PÁGINA CLIENTES (GRILLA DE LOGOS) --- */

.clientes-logos {
	margin-top: 60px; /* Espacio después del párrafo de intro */
}

.clientes-grid {
	display: grid;
	/* Crea una grilla responsive: 
		- En pantallas grandes: 5 columnas (aprox)
		- En medianas: 3-4 columnas
		- En celulares: 2 columnas 
	*/
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 40px; /* Espacio entre logos */
	align-items: center; /* Centra los logos verticalmente */
}

.cliente-logo {
	/* Contenedor individual para cada logo */
	text-align: center; /* Centra el logo si es más chico que la celda */
}

.cliente-logo img {
	/* 1. EL EFECTO BLANCO Y NEGRO (POR DEFECTO) */
	filter: grayscale(100%);
	opacity: 0.7; /* Lo hace un poco más suave/tenue */

	/* 2. LA ANIMACIÓN (TRANSICIÓN SUAVE) */
	transition: all 0.3s ease-out;
	
	max-width: 100%; /* Asegura que no se desborde */
	height: auto;
}

/* 3. EL EFECTO DE COLOR (AL PASAR EL MOUSE) */
.cliente-logo img:hover {
	filter: grayscale(0); /* Vuelve al color original */
	opacity: 1; /* Muestra el color al 100% */
	transform: scale(1.1); /* Lo agranda un 10% (opcional, pero queda bien) */
	cursor: pointer; /* La manito, para indicar que es interactivo */
}

/* --- ESTILO ZIG-ZAG (SOLO PARA OIL & GAS POR AHORA) --- */

.feature-section {
    padding: 60px 0;
}

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 80px; /* Espacio entre una sección y la otra */
}

/* Esta clase invierte el orden (Texto izq - Foto der) */
.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-image {
    flex: 1; /* Ocupa mitad del ancho */
}

.feature-image img {
    width: 100%;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra para darle profundidad */
    object-fit: cover;
    height: 350px; /* Altura fija para que queden prolijas */
}

.feature-text {
    flex: 1; /* Ocupa mitad del ancho */
}

.feature-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--color-marca);
    border-left: 5px solid var(--color-marca);
    padding-left: 15px;
}

.feature-text p {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

/* Adaptación para celular: Pone uno arriba del otro */
@media (max-width: 768px) {
    .feature-row, .feature-row.reverse {
        flex-direction: column;
        gap: 30px;
    }
    .feature-image img {
        height: auto;
    }
}

/* --- ESTILOS PARA CELULAR (MOBILE) --- */

/* 1. CONFIGURACIÓN DEL BOTÓN HAMBURGUESA */
.hamburger {
    display: none; /* Oculto en PC */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 2000; /* Super importante: encima del menú desplegable */
    padding: 10px; /* Hacemos el área de toque más grande */
}

.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-marca);
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* 2. REGLAS SOLO PARA PANTALLAS CHICAS (CELULARES) */
@media (max-width: 900px) { /* Subí un poco el límite para tablets también */
    
    .hamburger {
        display: flex; /* Aparece el botón */
    }

    /* EL MENÚ LATERAL (Estilo Cajón/Drawer) */
    .nav-links {
        position: fixed; /* Fijo a la pantalla, no al header */
        top: 0;
        right: 0;
        height: 100vh; /* Altura completa de la pantalla */
        width: 70%;    /* Ocupa el 70% del ancho */
        max-width: 300px;
        background-color: white; /* Fondo blanco limpio */
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Centra los items verticalmente */
        
        padding-top: 60px; /* Espacio para no chocar con nada arriba */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Sombra hacia la izquierda */
        
        /* MAGIA DE LA ANIMACIÓN: Lo escondemos a la derecha */
        transform: translateX(100%); 
        transition: transform 0.4s ease-in-out;
        z-index: 1500; /* Debajo del botón hamburguesa (2000), encima del resto */
    }

    /* ESTADO ACTIVO: Cuando el JS pone esta clase, el menú entra */
    .nav-links.active {
        transform: translateX(0%); /* Vuelve a la posición visible */
    }

    .nav-links li {
        margin: 20px 0; /* Más espacio entre opciones */
        opacity: 0; /* Truco para animar los textos después */
        animation: fadeIn 0.5s forwards 0.3s; /* Aparecen suavemente */
    }

    .nav-links a {
        font-size: 1.2rem; /* Letra más grande para dedos */
        color: var(--color-marca);
        font-weight: 600;
    }

    /* EFECTO DE ANIMACIÓN EN EL BOTÓN (Se convierte en X) */
    .hamburger.toggle span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .hamburger.toggle span:nth-child(2) {
        opacity: 0; /* La del medio desaparece */
    }
    .hamburger.toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
    
    /* FONDO OSCURO DETRÁS DEL MENÚ (Opcional pero recomendado) */
    /* Esto oscurece el resto de la web cuando abres el menú */
    .nav-links.active::before {
        content: "";
        position: fixed;
        top: 0;
        left: -100vw; /* Empieza muy a la izquierda */
        width: 100vw; /* Ancho de toda la pantalla */
        height: 100vh;
        background-color: rgba(0,0,0,0.5); /* Negro semitransparente */
        z-index: -1; /* Detrás del menú blanco */
    }
}

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