/* =========================================
   1. VARIABLES Y PALETA DE COLORES (FIGMA)
========================================= */
:root {
    --rojo-molimek: #C82A36; /* El rojo corporativo */
    --negro-fondo: #0A0A0A; /* Para los rectángulos negros (Galería y Footer) */
    --blanco-puro: #FFFFFF; /* Fondo de "Por qué elegirnos" */
    --gris-claro: #F4F4F4; /* Fondo de "Quiénes somos" y "Contáctanos" */
    --color-texto: #1A1A1A; /* Texto negro para fondos claros */
    
    --fuente-principal: 'Inter', 'Segoe UI', sans-serif;
}
html {
    scroll-behavior: smooth;
}
/* =========================================
   2. RESETEO GLOBAL
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    /* EL FONDO BASE AHORA ES BLANCO Y EL TEXTO NEGRO */
    background-color: var(--blanco-puro); 
    color: var(--color-texto);
    line-height: 1.6;
    overflow-x: hidden; 
}

/* =========================================
   3. ESTILOS GENERALES Y BOTONES
========================================= */
a {
    text-decoration: none;
    color: inherit;
}

/* El contenedor mantiene el ancho de tu diseño centrado */
.contenedor {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 80px 20px; 
}

.btn-rojo {
    background-color: var(--rojo-molimek);
    color: var(--blanco-puro);
    padding: 8px 20px;
    border-radius: 2px; 
    font-weight: bold;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-rojo:hover {
    background-color: #A01F29;
}

/* Para los íconos de SVG que arreglamos en el HTML */
.icono-miniatura {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

/* =========================================
   4. COLORES DE LAS SECCIONES ALTERNADAS
========================================= */
/* Para "¿Quiénes somos?" y "Contáctanos" */
.seccion-clara {
    background-color: var(--gris-claro);
}

/* Para "¿Por qué elegirnos?" */
.seccion-blanca {
    background-color: var(--blanco-puro);
}

/* Para el Banner Principal y Servicios (Tienen imagen de fondo, el texto es blanco) */
.seccion-imagen {
    color: var(--blanco-puro);
    /* Aquí luego pondremos las fotos de fondo */
}

/* Contenedores negros redondeados (Galería y Footer) */
.contenedor-negro-redondeado {
    background-color: var(--negro-fondo);
    color: var(--blanco-puro);
    border-radius: 30px;
    padding: 60px;
    /* Esto hace que floten sobre el fondo blanco/gris de la página */
}

/* =========================================
   5. BANNER PRINCIPAL (HERO SECTION)
========================================= */
.hero-banner {
    min-height: 100vh;
    
    /* El degradado oscuro combinado con la imagen real */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.4) 100%),
                      url('../img/fondo-banner.jpg'); /* REEMPLAZA CON EL NOMBRE EXACTO DE TU FOTO */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    color: var(--blanco-puro);
}

/* --- Menú de Navegación --- */
.navbar {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    /* Cambiamos el padding de 25px a 15px */
    padding: 15px 5%; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent; 
    transition: all 0.4s ease; 
}

/* 2. Estado "Scrolled" (Al bajar) */
.navbar.scrolled {
    /* Cambiamos el padding de 15px a 8px para que se encoja aún más al bajar */
    padding: 8px 5%; 
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}
.navbar .logo img,
.footer-columna.logo-desc .footer-logo {

    height: 100px;
    width: auto;
    object-fit: contain;
    transition: height 0.4s ease;
}

.footer-columna.logo-desc .footer-logo {
    max-height: 250px;
}

/* El margen automático centra el menú */
.nav-links {
    margin: 0 auto; 
}

.nav-links ul {
    display: flex;
    list-style: none; 
    gap: 40px; /* Separación un poco más amplia, igual al Figma */
}

.nav-links a {
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--rojo-molimek); 
}

/* --- Contenido Central (Textos y Botón) --- */
.hero-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start; /* ¡ESTO ARREGLA EL BOTÓN GIGANTE! */
    padding: 0 8%; 
    max-width: 1000px; /* Un poco más de ancho para que el título respire */
}

.hero-content h1 {
    font-size: 4rem; /* Redujimos un poco el tamaño para que queden 2 líneas perfectas */
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 45px;
    max-width: 650px;
    color: #E0E0E0; 
}

/* --- Métricas Inferiores (Los Números) --- */
.hero-metricas {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 50px; /* Espacio entre el botón y los números */
}

.metrica {
    display: flex;
    flex-direction: column;
}

.metrica h2 {
    font-size: 3.5rem; /* Números grandes */
    line-height: 1;
    margin-bottom: 5px;
}

.metrica span {
    font-size: 0.95rem;
    color: #CCCCCC; /* Subtítulos en gris claro */
}

/* Las líneas finas que separan los números */
.linea-divisora {
    width: 1px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.3); /* Una línea blanca transparente */
}

/* =========================================
   6. SECCIÓN: QUIÉNES SOMOS
========================================= */

/* El contenedor principal en formato de cuadrícula (Grid) de 4 espacios */
.grid-quienes-somos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide exactamente por la mitad */
    gap: 60px 80px; /* 60px de separación hacia abajo, 80px hacia los lados */
    align-items: start; /* Alinea los elementos desde la parte superior */
}

/* --- Título y Párrafos Principales (Arriba Izquierda) --- */
.qs-intro h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--color-texto);
}

.qs-intro p {
    margin-bottom: 20px;
    color: #4A4A4A; 
    font-size: 1.05rem;
}

/* --- Subtítulo con Línea Roja (SOBRE NOSOTROS) --- */
.subrayado-rojo {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase; 
    margin-bottom: 30px;
    position: relative;
}

.subrayado-rojo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px; 
    width: 100%;
    height: 3px;
    background-color: var(--rojo-molimek);
}

/* --- Bloques de Misión y Visión (Abajo) --- */
.bloque-texto h3 {
    font-size: 1.3rem;
    margin-bottom: 20px; 
    position: relative;
    display: inline-block;
}

/* La línea roja más pequeña para Misión y Visión */
.bloque-texto h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background-color: var(--rojo-molimek);
}

.bloque-texto p {
    font-size: 0.95rem;
    color: #555555;
}

/* --- La Imagen (Arriba Derecha) --- */
.qs-imagen img {
    width: 100%;
    border-radius: 0px; /* Esquinas redondeadas */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    object-fit: cover;
}

/* =========================================
   7. SECCIÓN: POR QUÉ ELEGIRNOS (ROJO POR DEFECTO)
========================================= */

/* =========================================
   SECCIÓN: POR QUÉ ELEGIRNOS (TARJETAS GIRATORIAS ROJAS 3D)
========================================= */

#por-que-elegir h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 50px;
    color: var(--color-texto);
}

/* Configuramos el Grid para 4 tarjetas */
.contenedor-tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* --- Motor de la Animación 3D --- */
.tarjeta-flip {
    background-color: transparent;
    width: 100%;
    height: 380px; /* Altura fija para que la tarjeta gire correctamente */
    perspective: 1000px; 
    cursor: pointer;
}

.tarjeta-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left; 
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); 
    transform-style: preserve-3d; 
}

/* El disparador: Gira al pasar el mouse */
.tarjeta-flip:hover .tarjeta-inner,
.tarjeta-flip.tocada .tarjeta-inner {
    transform: rotateY(180deg);
}

/* --- Estilo Base para AMBAS CARAS (El diseño rojo de la imagen) --- */
.tarjeta-frente, .tarjeta-dorso {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border-radius: 5px;
    padding: 40px 30px;
    
    /* Diseño Rojo Corporativo */
    background-color: var(--rojo-molimek);
    color: var(--blanco-puro);
    box-shadow: 0 15px 30px rgba(200, 42, 54, 0.4); /* Sombra roja idéntica a tu imagen */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- CARA FRONTAL (Solo Ícono y Título) --- */
.tarjeta-frente h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.tarjeta-frente img {
    height: 50px;
    margin-bottom: 25px;
    filter: brightness(0) invert(1); /* Pinta tus íconos negros de color blanco */
    align-self: flex-start;
}

/* --- CARA TRASERA (Donde está la explicación) --- */
.tarjeta-dorso {
    transform: rotateY(180deg); 
}

.tarjeta-dorso h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.tarjeta-dorso p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Botón Centrado (El truco maestro del Grid) --- */
.centro-margen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 50px;
    grid-column: 1 / -1; /* Obliga al botón a ignorar las 4 columnas y centrarse perfectamente */
}

/* =========================================
   8. SECCIÓN: NUESTROS SERVICIOS (SLIDER COMPLETO)
========================================= */

.seccion-slider-contenedor {
    position: relative;
    width: 100%;
    min-height: 800px;
    overflow-x: hidden; /* Oculta las diapositivas que están fuera de la pantalla */
    color: var(--blanco-puro);
}

/* La "pista" que sostiene las 13 diapositivas en línea recta */
.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* Cuando usemos JavaScript, cambiaremos este 'transform' para mover la pista */
    transform: translateX(0%); 
    transition: transform 0.5s ease-in-out;
}

/* Cada diapositiva individual */
.slide {
    min-width: 100%; /* Cada slide ocupa el 100% de la pantalla visible */
    height: 800px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
}

/* LA MAGIA: El degradado oscuro automático para TODAS las fotos */
.capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

/* Asegura que el texto siempre quede por encima del degradado */
.contenido-slide {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
}
.texto-servicio {
    max-width: 800px; 
    
    /* 1. ROMPEMOS EL CENTRADO: Forzamos el margen izquierdo y derecho */
    margin-left: 8%; /* Este es el espacio que lo separa del borde izquierdo de la pantalla */
    margin-right: auto; /* Esto evita que se centre */
    
    /* 2. ESPACIO DESDE ARRIBA */
    margin-top: 200px; 
    
    /* 3. Limpiamos el padding para no duplicar espacios */
    padding-left: 0; 
    text-align: left;
}
/* --- El Título y su Línea Roja --- */
.texto-servicio h2 {
    position: relative; /* ¡CRUCIAL! Esto actúa como "ancla" para que la línea no salga volando */
    font-size: 5.5rem; 
    line-height: 1.1;
    margin-bottom: 25px;
}

/* LA NUEVA LÍNEA PERFECTA */
.texto-servicio h2::before {
    content: '';
    position: absolute;
    
    /* 1. La empujamos hacia la izquierda, dejando un pequeño espacio antes de la "N" */
    right: 102%; 
    
    /* 2. La bajamos unos 45px para que quede alineada justo en el medio de la palabra "Nuestros" */
    top: 45px; 
    
    /* 3. El truco maestro: un ancho gigante para que siempre toque el borde izquierdo de la pantalla */
    width: 100vw; 
    height: 4px;
    background-color: var(--rojo-molimek);
}

.texto-servicio p {
    /* Párrafo más grande para que sea súper fácil de leer */
    font-size: 1.5rem; 
    color: #E0E0E0;
    margin-bottom: 40px;
}
.titulo-centrado {
    /* 1. ESTO LO EMPUJA HACIA ABAJO (Ajusta el número a tu gusto) */
    margin-top: 200px; 
    margin-left: 8%; /* Este es el espacio que lo separa del borde izquierdo de la pantalla */
    margin-right: auto;
    
    /* 2. Aseguramos que el texto esté centrado en la pantalla */
    text-align: left; 
    width: 100%;
}

/* --- Estilos para los textos de la Diapositiva 2 a la 13 --- */
.titulo-centrado h2 {
    /* También agrandamos los títulos de las otras fotos */
    font-size: 6rem; 
    line-height: 1.1;
    max-width: 1000px; /* Le damos más espacio a los lados */
}

/* --- La Flecha Derecha --- */
.flecha-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

.flecha-slider:hover {
    color: var(--blanco-puro);
}

/* Ubicación específica de cada flecha */
.flecha-izq {
    left: 5%;
}

.flecha-der {
    right: 5%;
}

/* --- Los Puntitos Inferiores (Los 13) --- */
.puntos-slider {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 10;
}

.punto {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.punto.activo {
    width: 40px;
    background-color: var(--rojo-molimek);
    border-radius: 10px;
}

.punto:hover {
    background-color: var(--blanco-puro);
}

/* =========================================
   9. SECCIÓN: NUESTROS TRABAJOS (GALERÍA)
========================================= */

/* --- Ajustes del Título y la Línea Roja al Medio --- */
.titulo-galeria {
    margin-bottom: 40px;
}

.titulo-galeria h2 {
    font-size: 3rem;
    color: white;
    margin-bottom: 8px; /* Espacio entre el título y la línea */
}

.linea-roja-separadora {
    width: 150px; /* ¡Aquí cambiamos el largo! Si la quieres más larga, súbelo a 200px */
    height: 3px;
    background-color: var(--rojo-molimek);
    margin-bottom: 8px; /* Espacio entre la línea y la palabra GALERÍA */
}

.subtitulo-galeria {
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

/* --- El Rectángulo Negro --- */
.contenedor-negro-redondeado {
    background-color: var(--negro-fondo);
    border-radius: 10px;
    padding: 60px; /* Da respiro interior a las fotos y al botón */
}

/* --- La Cuadrícula de Fotos --- */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-top: 40px; 
}
/* =========================================
   SISTEMA DE MOSTRAR MÁS/MENOS PROYECTOS
========================================= */

/* 1. Ocultar por defecto desde la foto 7 en adelante */
.galeria-grid .tarjeta-trabajo:nth-child(n+7) {
    display: none;
}


/* 3. CLASE ACTIVA (Cuando presionas el botón) */
.galeria-grid.galeria-expandida {
    max-height: 1100px; /* Le da el alto suficiente para que aparezca la barra */
    overflow-y: auto; /* Activa la barra de desplazamiento vertical */
    padding-right: 15px; 
    scrollbar-width: thin; 
    scrollbar-color: var(--rojo-molimek) transparent; 
}

/* 3. Mostrar las fotos ocultas cuando está expandida */
.galeria-grid.galeria-expandida .tarjeta-trabajo:nth-child(n+7) {
    display: flex;
}

/* Diseño de la barra de desplazamiento */
.galeria-grid.galeria-expandida::-webkit-scrollbar {
    width: 6px; 
}
.galeria-grid.galeria-expandida::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 10px;
}
.galeria-grid.galeria-expandida::-webkit-scrollbar-thumb {
    background-color: var(--rojo-molimek); 
    border-radius: 10px; 
}
.galeria-grid.galeria-expandida::-webkit-scrollbar-thumb:hover {
    background-color: #a0222b; 
}

/* --- El Contenedor de la Tarjeta (Estilo Figma) --- */
.tarjeta-trabajo {
    background-color: #181818; /* Un gris sumamente oscuro, casi negro */
    border-radius: 10px;
    padding: 15px; /* Este padding es lo que separa la foto de las orillas */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Borde invisible preparado para el hover */
    display: flex;
    flex-direction: column;
}

/* El efecto HOVER: Contorno rojo y un levante sutil */
.tarjeta-trabajo:hover {
    border-color: var(--rojo-molimek);
    transform: translateY(-5px); 
}

/* --- La Imagen dentro de la tarjeta --- */
.tarjeta-trabajo img {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    border-radius: 10px; /* La foto también tiene sus propias curvas */
    margin-bottom: 10px; /* Separación entre la foto y el texto */
}

/* --- Centrado del Botón Interior --- */
.centro-margen-interior {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 50px; /* Espacio que separa las fotos del botón */
}

/* =========================================
   10. SECCIÓN: CONTACTO (ESTILO FIGMA)
========================================= */

.encabezado-contacto-figma {
    margin-bottom: 40px;
    max-width: 600px;
}

.encabezado-contacto-figma h2 {
    font-size: 3rem;
    color: var(--color-texto);
    margin-bottom: 10px;
}

.encabezado-contacto-figma p {
    font-size: 1.05rem;
    color: #555555;
    line-height: 1.5;
}

/* --- Cuadrícula de 2 Columnas --- */
.grid-contacto-figma {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch; /* Hace que ambas tarjetas tengan la misma altura */
}

/* ====================================
   TARJETA IZQUIERDA (MAPA + INFO)
==================================== */
.tarjeta-info-contacto {
    background-color: #F3F4F6; /* Un gris sumamente suave como en Figma */
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* --- Cuadrícula Principal (Le damos más ancho al lado del mapa) --- */
.grid-contacto-figma {
    display: grid;
    /* TRUCO: 1.3fr para la izquierda y 0.7fr para la derecha */
    grid-template-columns: 1.3fr 0.7fr; 
    gap: 40px;
    align-items: stretch;
}

/* El cuadro del mapa (Ahora es súper ancho) */
.mapa-pequeno {
    width: 70%; /* Toma el 70% de su enorme tarjeta */
    height: 420px; 
    border-radius: 15px;
    overflow-x: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

.mapa-pequeno iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* La lista de información */
.lista-datos-iconos {
    width: 30%; /* Toma el 30% restante */
    display: flex;
    flex-direction: column;
    gap: 40px; 
    padding-left: 0; 
}

.item-dato {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* La clase para las 3 imágenes que vas a subir */
.icono-contacto {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Asegura que tu ícono no se distorsione */
}

.item-dato span {
    font-size: 1rem;
    font-weight: 800; /* Letra negrita como en tu captura */
    color: var(--color-texto);
}

/* ====================================
   TARJETA DERECHA (FORMULARIO)
==================================== */
.tarjeta-formulario {
    background-color: #F8F9FA; /* Fondo casi blanco */
    border-radius: 20px;
    padding: 40px;
}

.form-molimek {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.grupo-input label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #666666;
}

.grupo-input input,
.grupo-input textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid transparent; 
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: #FFFFFF; /* Inputs blancos para que resalten */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
}

/* El borde rojo que aparece cuando seleccionas la caja (igual al Figma) */
.grupo-input input:focus,
.grupo-input textarea:focus {
    outline: none;
    border: 1px solid var(--rojo-molimek); 
}

/* Botón de enviar */
.btn-formulario {
    margin-top: 15px;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 2px; /* Bordes muy redondeados */
    background-color: var(--rojo-molimek);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-formulario:hover {
    background-color: #A01D24; /* Rojo más oscuro al pasar el mouse */
}

/* =========================================
   11. FOOTER (PIE DE PÁGINA)
========================================= */

.footer-negro-redondeado {
    background-color: #080808; /* Negro profundo casi puro */
    border-radius: 30px;
    padding: 60px 60px 80px 60px; /* Más espacio abajo para el copyright */
    position: relative;
    color: var(--blanco-puro);
    margin-bottom: 40px; /* Separación del final de la pantalla */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.footer-grid {
    display: grid;
    /* Divide el footer en 3 columnas. Las de los lados un poco más anchas */
    grid-template-columns: 1.2fr 1fr 1.2fr; 
    gap: 40px;
    align-items: center; /* Centra el contenido verticalmente */
}

/* --- Columna 1: Logo --- */
.footer-columna.logo-desc .footer-logo {
    max-width: 300px; /* Reducimos el ancho máximo, 220px era mucho para un logo redondo */
    height: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.footer-columna.logo-desc p {
    font-size: 0.9rem;
    color: #A0A0A0; /* Gris claro para la descripción */
    line-height: 1.5;
    max-width: 280px;
}

/* --- Columna 2: Enlaces --- */
.footer-columna.enlaces ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Separación entre los links */
}

.footer-columna.enlaces a {
    color: var(--blanco-puro);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-columna.enlaces a:hover {
    color: var(--rojo-molimek); /* El enlace se vuelve rojo al pasar el mouse */
}

/* --- Columna 3: Contacto --- */
.footer-columna.contacto-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.item-footer-contacto {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-footer-contacto span {
    font-size: 0.95rem;
    color: var(--blanco-puro);
}

/* MAGIA: Convierte tus íconos negros de contacto a color blanco */
.icono-blanco {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1); 
}

/* --- Texto de Copyright --- */
.footer-copyright {
    position: absolute;
    bottom: 25px;
    right: 60px; /* Alineado al borde derecho interno del contenedor */
    font-size: 0.75rem;
    color: #666666; /* Gris oscuro para que no robe atención */
}

/* =========================================
   BOTÓN FLOTANTE WHATSAPP
========================================= */

.contenedor-whatsapp-flotante {
    position: fixed;
    right: 0; 
    bottom: 40px; 
    z-index: 9999; 
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    background-color: #000000; 
    color: #FFFFFF;
    text-decoration: none;
    height: 55px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px;
    overflow: hidden; 
    box-shadow: -2px 2px 10px rgba(0,0,0,0.3);

    transition: background-color 0.4s ease, width 0.4s ease; 
}

.texto-btn-wa {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    white-space: nowrap; 
    
    max-width: 0; 
    opacity: 0;
    padding-right: 0; 
    transition: all 0.4s ease; 
}

.icono-flotante {
    width: 24px;
    height: 24px;
    margin-left: 15px; 
    margin-right: 10px; 
    object-fit: contain;
    filter: brightness(0) invert(1); 
}

.btn-whatsapp:hover {
    background-color: var(--rojo-molimek); 
}

.btn-whatsapp:hover .texto-btn-wa {
    max-width: 150px; 
    opacity: 1; 
    padding-right: 20px; 
}

/* =========================================
   ESTILOS PARA EL LIGHTBOX DE LA GALERÍA
========================================= */

/* El fondo negro a pantalla completa (oculto por defecto) */
#modal-galeria {
    display: none; /* Se oculta inicialmente */
    position: fixed;
    z-index: 99999; /* Por encima de todo, incluido el menú */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro al 90% */
    align-items: center;
    justify-content: center;
}

/* Esta clase se añade con JS para mostrar el modal */
#modal-galeria.activo {
    display: flex;
}

/* La imagen ampliada en el centro */
.modal-contenido {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    /* Modificaciones para el Súper Zoom */
    transition: transform 0.3s ease; /* Hace que el zoom sea fluido */
    cursor: zoom-in; /* Le dice al usuario que puede hacer más zoom */
    transform-origin: center center;
}

/* La "X" para cerrar */
.cerrar-modal {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #f1f1f1;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Que la "X" se ponga roja al pasar el mouse */
.cerrar-modal:hover,
.cerrar-modal:focus {
    color: var(--rojo-molimek);
}

/* Animación de acercamiento */
@keyframes zoomModal {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =========================================
   12. DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
========================================= */
@media (max-width: 768px) {
    
    /* Ajustes Generales */
    .contenedor { padding: 40px 15px; }

    /* ====================================
       Menú de Navegación (Hamburguesa)
    ==================================== */
    .navbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        background-color: rgba(0, 0, 0, 0.95) !important; 
    }

    .navbar .logo img {
        height: 45px !important; 
    }

    /* El Botón de las 3 Rayitas visible solo en móvil */
    .menu-hamburguesa {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 2000;
    }

    .menu-hamburguesa span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--blanco-puro);
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* Animación del botón a una "X" */
    .menu-hamburguesa.activo span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
        background-color: var(--rojo-molimek);
    }
    .menu-hamburguesa.activo span:nth-child(2) {
        opacity: 0;
    }
    .menu-hamburguesa.activo span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
        background-color: var(--rojo-molimek);
    }

    /* El Panel Lateral Deslizante */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 75%; 
        height: 100vh;
        background-color: #0A0A0A; 
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1500;
        margin: 0 !important;
        max-width: none !important;
    }

    .nav-links.activo {
        right: 0; 
    }

    .nav-links ul {
        flex-direction: column !important;
        align-items: center;
        gap: 30px !important;
        margin-top: 0 !important;
    }

    .nav-links a {
        font-size: 1.2rem !important;
        font-weight: 600;
        color: var(--blanco-puro);
    }

    .nav-links a:hover {
        color: var(--rojo-molimek);
    }

    /* ====================================
       Banner Principal
    ==================================== */
    .hero-content {
        margin-top: 90px;
        padding: 0 5%;
    }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-metricas {
        flex-direction: column; 
        gap: 20px;
        align-items: flex-start;
    }
    .linea-divisora { width: 100px; height: 1px; }

    /* ====================================
       Secciones de Grid (1 columna)
    ==================================== */
    .grid-quienes-somos,
    .contenedor-tarjetas,
    .grid-contacto-figma {
        grid-template-columns: 1fr;
    }

    /* ====================================
       Slider Servicios
    ==================================== */
    .texto-servicio, .titulo-centrado { margin-top: 140px; }
    .texto-servicio h2, .titulo-centrado h2 { font-size: 2.8rem; }
    .texto-servicio h2::before { display: none; }
    .flecha-slider { font-size: 2rem; }

    /* ====================================
       Galería (Diseño App de 2 Columnas)
    ==================================== */
    .contenedor-negro-redondeado { padding: 30px 15px; }
    .titulo-galeria h2 { font-size: 2.2rem; }
    
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px; 
    }
    .tarjeta-trabajo img {
        height: 140px; 
        margin-bottom: 8px;
    }
    .galeria-grid .tarjeta-trabajo:nth-child(n+5) {
        display: none !important;
    }
    .galeria-grid.galeria-expandida .tarjeta-trabajo:nth-child(n+5) {
        display: flex !important;
    }
    .galeria-grid.galeria-expandida {
        max-height: 600px; 
    }

    /* ====================================
       Contacto
    ==================================== */
    .tarjeta-info-contacto {
        flex-direction: column; 
        padding: 20px;
    }
    .mapa-pequeno {
        width: 100%;
        height: 300px; 
    }
    .lista-datos-iconos { width: 100%; gap: 20px; }

    /* ====================================
       Footer
    ==================================== */
    .footer-grid {
        grid-template-columns: 1fr; 
        text-align: center;
    }
    .footer-columna { align-items: center; }
    .item-footer-contacto { justify-content: center; }
    .footer-negro-redondeado {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
    }
    .footer-copyright {
        position: static; 
        margin-top: 30px;
    }
}