:root {
  /* COLORES DE MARCA */
  --color-primario: #000000; /* Fondo principal */
  --color-secundario: #ffffff; /* Texto */
  --color-accent: #a1be47; /* Color de énfasis (Color corporativo) */
  --color-gris: #333333;
  
  /* FUENTES Y ESPACIADO */
  --font-heading: 'Helvetica Neue', 'Arial', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --espacio-pad: 2rem;
}

/* RESET MODERNO */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--color-primario);
  color: var(--color-secundario);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
}

/* EFECTOS DE ANIMACIÓN (Scroll Reveal) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* LAYOUT PRINCIPAL (CSS GRID) */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* CABECERA Y NAVEGACIÓN */
header {
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px); /* Efecto cristal moderno */
  border-bottom: 1px solid var(--color-gris);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* HERO SECTION DISRUPTIVA */
.hero-section {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem); /* Tipografía responsiva gigante */
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.1;
  background: linear-gradient(45deg, var(--color-secundario), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #888;
  max-width: 600px;
}

/* TARJETAS DE SERVICIOS (Grid Interactivo) */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 4rem 2rem;
}

.servicio-card {
  background: var(--color-gris);
  padding: 2rem;
  border: 1px solid transparent;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.servicio-card:hover {
  border-color: var(--color-accent);
  transform: scale(1.02);
}

/* FOOTER */
footer {
  padding: 3rem 2rem;
  border-top: 1px solid var(--color-gris);
  text-align: center;
}

/* RESPONSIVE FLUIDO (Sin media queries excesivos) */
@media (max-width: 768px) {
  .hero-title { font-size: 3rem; }
}

/* =========================================
   CORRECCIONES DE MENÚ Y LISTAS (Header y Footer)
   ========================================= */

/* 1. Forzamos que los menús dentro del header y footer sean horizontales */
header nav ul,
header nav ol,
footer nav ul,
footer div ul { 
    display: flex;         /* pone los elementos uno al lado del otro */
    flex-wrap: wrap;       /* Si no caben, bajan a la siguiente línea */
    list-style: none;      /* Quita los puntos o viñetas de la lista */
    margin: 0;
    padding: 0;
    gap: 30px;             /* Espacio moderno entre cada botón (sustituye a las barras |) */
    align-items: center;   /* Centra verticalmente el texto */
    justify-content: center; /* Centra el menú horizontalmente si sobra espacio */
}

/* 2. Estilo de los enlaces del menú */
header nav a,
footer a {
    text-decoration: none;      /* Quita el subrayado típico de los enlaces */
    color: var(--color-secundario); /* Blanco (o tu color definido) */
    font-weight: 600;           /* Letra un poco más gruesa */
    font-size: 1rem;
    text-transform: uppercase;  /* Opcional: pone todo en mayúsculas para verse más PRO */
    letter-spacing: 1px;        /* Separa un poco las letras */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* 3. Efecto Hover (cuando pasas el mouse) */
header nav a:hover,
footer a:hover {
    color: var(--color-accent); /* Cambia a rojo/accent */
    transform: translateY(-2px); /* Pequeña animación hacia arriba */
}

/* CORRECCIÓN ESPECÍFICA PARA EL FOOTER */
/* Si el footer tiene los elementos apilados, esto los centra */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

/* Ajuste para móviles: en pantallas pequeñas sí queremos que se vean verticales */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column; /* Vuelve a vertical en celular */
        gap: 15px;
        background: rgba(0,0,0,0.9); /* Fondo oscuro para que se lea bien */
        padding: 20px;
        border-radius: 10px;
    }
}

/* =========================================
   ESTILOS PARA LA SECCIÓN "SOBRE NOSOTROS" (Content2)
   ========================================= */

.content2 {
    /* Centramos el bloque y limitamos el ancho para que sea legible */
    max-width: 900px;
    margin: 0 auto; 
    padding: 4rem 2rem;
    text-align: center; /* Alineación centrada estilo editorial */
    position: relative;
}

/* Decoración sutil de fondo (opcional, le da profundidad) */
.content2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--color-accent); /* Tu línea verde decorativa */
}

/* Estilo para el Título (LuiggiBerto Design Studio) */
.content2 h1, 
.content2 h2, 
.content2 h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--color-secundario);
    letter-spacing: -1px;
}

/* Estilo para los párrafos */
.content2 p {
    font-size: 1.1rem;
    color: #aaaaaa; /* Gris claro para no cansar la vista */
    line-height: 1.8; /* Mayor espacio entre líneas */
    margin-bottom: 1.5rem;
}

/* Si hay enlaces dentro de ese texto */
.content2 a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent);
}

/* AJUSTE PARA MÓVILES */
@media (max-width: 768px) {
    .content2 {
        padding: 3rem 1.5rem;
        text-align: left; /* En celular a veces se lee mejor a la izquierda */
    }
    
    .content2 h1, .content2 h2 {
        font-size: 2rem;
    }
}

/* =========================================
   ESTILOS DE PÁGINA DE CONTACTO Y FORMULARIO
   ========================================= */

.contacto-section {
    padding: 4rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.formulario-wrapper {
    margin-top: 3rem;
    text-align: left; /* Los labels se leen mejor a la izquierda */
    background: rgba(255, 255, 255, 0.05); /* Fondo sutil semitransparente */
    padding: 2rem;
    border: 1px solid #333;
    border-radius: 8px;
}

/* Estilos generales para Inputs y Textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    color: var(--color-secundario); /* Texto blanco */
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* Efecto al hacer clic en un campo (Focus) */
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent); /* Se ilumina del color de la marca */
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.2); /* Resplandor suave */
    background-color: #000;
}

/* Labels (Etiquetas de los campos) */
label {
    display: block;
    margin-bottom: 8px;
    color: #888;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botón de Enviar (Personalizado) */
input[type="submit"],
button[type="submit"] {
    background-color: var(--color-accent);
    color: white;
    padding: 15px 40px;
    border: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
    width: 100%; /* Botón ancho completo */
    margin-top: 10px;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: white;
    color: black;
    transform: translateY(-3px); /* Efecto de elevación */
}

/* =========================================
   ARREGLOS DE CONTENIDO CENTRAL (Bio y Contacto)
   ========================================= */

/* 1. Estilos para la Bio (Inicio) */
.bio-container {
    max-width: 800px;       /* Limita el ancho para que no se estire */
    margin: 4rem auto;      /* Centra el bloque horizontalmente */
    text-align: center;     /* Centra el texto */
    padding: 0 20px;
}

.bio-title {
    font-size: 2.5rem;
    color: var(--color-secundario);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.bio-content p {
    font-size: 1.2rem;
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.clientes-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.clientes-list li {
    background: #1a1a1a;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--color-accent); /* Color rojo/accent */
    border: 1px solid #333;
}

/* 2. Estilos para el Texto de Contacto */
.texto-intro-contacto {
    max-width: 700px;
    margin: 0 auto 3rem auto; /* Margen abajo para separarlo del formulario */
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
}

.texto-intro-contacto a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: bold;
}

.nota-final {
    margin-top: 1rem;
    font-weight: bold;
    color: white;
}

/* =========================================
   VIDEO BACKGROUND OPTIMIZADO
   ========================================= */

.hero-section {
    position: relative;
    overflow: hidden; /* Corta cualquier sobrante del video */
    /* Quitamos el height fijo o lo ajustamos según necesites */
    min-height: 90vh; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Nivel más bajo */
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que el video llene la pantalla sin deformarse */
    position: absolute;
    top: 0;
    left: 0;
}

/* La MÁSCARA OSCURA (Crucial para leer el texto) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente moderno: oscuro abajo, un poco más claro arriba */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
    z-index: 2; /* Encima del video */
    backdrop-filter: blur(3px); /* Opcional: desenfoca levemente el video para dar profundidad */
}

/* El contenido (Texto) debe estar ENCIMA de todo */
.hero-content {
    position: relative;
    z-index: 3; /* Nivel más alto */
    text-align: center;
    padding: 20px;
}

/* =========================================
   CORRECCIÓN BOTÓN CTA (Explorar Servicios)
   ========================================= */

a.btn-cta, 
a.btn-cta:link, 
a.btn-cta:visited {
    display: inline-block;       /* Permite darle dimensiones y márgenes */
    background-color: var(--color-accent, #a1be47); /* (color corporativo) */
    color: #ffffff !important;   /* !important fuerza el texto blanco y quita el morado */
    text-decoration: none;       /* Quita el subrayado */
    padding: 15px 35px;          /* Relleno para que se vea grande */
    font-weight: 800;            /* Letra gruesa */
    text-transform: uppercase;   /* Mayúsculas */
    letter-spacing: 1px;
    border-radius: 4px;          /* Bordes ligeramente redondeados (opcional) */
    margin-top: 30px;            /* Espacio arriba para separarlo del texto */
    border: 2px solid transparent; /* Para evitar saltos al hacer hover */
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
a.btn-cta:hover {
    background-color: transparent;
    border-color: var(--color-accent, #a1be47);
    color: var(--color-accent, #a1be47) !important; /* Texto verde al pasar el mouse */
    transform: translateY(-3px);   /* Se eleva un poco */
}

/* =========================================
   CORRECCIÓN DE ALINEACIÓN DEL SUBTÍTULO
   ========================================= */

.hero-subtitle {
    /* Mantenemos el ancho máximo para que se vea elegante en 2 líneas si es necesario */
    max-width: 800px; 
    
    /* ESTO ES LO QUE FALTABA: */
    margin-left: auto;    /* Empuja desde la izquierda */
    margin-right: auto;   /* Empuja desde la derecha */
    
    /* Aseguramos que el texto interno también esté centrado */
    text-align: center;   
    display: block;       /* Asegura que se comporte como bloque */
    
    /* Tus estilos visuales previos */
    font-size: 1.5rem;
    color: #cccccc;       /* Color gris claro para contraste sobre video */
    line-height: 1.5;
}

/* Refuerzo para el contenedor padre por si acaso */
.hero-content {
    width: 100%;
    text-align: center;
    z-index: 3;
}

/* =========================================
   LOGO BOTÓN "INVISIBLE"
   ========================================= */

.logo-link {
    display: inline-block;      /* Para que se comporte como bloque */
    text-decoration: none;      /* Quita subrayados */
    border: none;               /* Quita bordes */
    outline: none;              /* Quita la línea de foco/selección */
    background: transparent;    /* Fondo transparente */
    cursor: pointer;            /* Mantiene la manita del mouse */
    
    /* TRUCO PARA MÓVILES: Quita el destello gris al tocar en iPhone/Android */
    -webkit-tap-highlight-color: transparent; 
}

/* Aseguramos que la imagen dentro tampoco tenga bordes raros */
.logo-link img {
    border: 0;
    outline: none;
    display: block; /* Elimina espacios extra abajo de la imagen */
}

/* ESTADOS: Aseguramos que NADA cambie al hacer click o hover */
.logo-link:hover,
.logo-link:active,
.logo-link:focus,
.logo-link:visited {
    opacity: 1;          /* Sin transparencia */
    transform: none;     /* Sin movimiento */
    border: none;        /* Sin bordes */
    outline: none;       /* Sin líneas */
    box-shadow: none;    /* Sin sombras */
    background: transparent;
}

/* =========================================
   RESPONSIVIDAD MAESTRA (iPhone 12 Pro en adelante)
   ========================================= */

/* 1. AJUSTES PARA TABLETAS (iPads, Laptops pequeñas) 
   Rango: Menos de 1024px */
@media screen and (max-width: 1024px) {
    
    .hero-title {
        font-size: 4rem; /* Bajamos un poco el tamaño gigante */
    }
    
    .servicios-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en lugar de 3 o 4 */
        padding: 2rem;
    }
}

/* 2. AJUSTES PARA MÓVILES (iPhone 12 Pro, Samsung S24, etc.) 
   Rango: Menos de 768px */
@media screen and (max-width: 768px) {

    /* HEADER: Apilamos el logo y el menú verticalmente */
    header {
        flex-direction: column;
        padding: 15px;
        background: rgba(0,0,0,0.95); /* Más oscuro para leer mejor */
    }

    header nav ul {
        gap: 15px; /* Menos espacio entre botones */
        margin-top: 10px;
    }

    /* TIPOGRAFÍA DISRUPTIVA (Adaptada) */
    /* Usamos clamp() para que el texto nunca sea ni muy chico ni muy grande */
    .hero-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem); 
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 20px; /* Margen lateral para que no toque los bordes */
    }

    /* BOTÓN CTA */
    a.btn-cta {
        width: 100%;       /* Botón de ancho completo en celular */
        padding: 15px 0;   /* Más fácil de tocar con el dedo */
        display: block;
        max-width: 300px;  /* Pero que no se vea ridículamente ancho */
        margin: 30px auto 0 auto; /* Centrado */
    }

    /* TARJETAS DE SERVICIOS */
    .servicios-grid {
        grid-template-columns: 1fr; /* 1 sola columna (una tarjeta debajo de otra) */
        gap: 1.5rem;
        padding: 1rem;
    }

    /* VIDEO DE FONDO */
    /* Aseguramos que el video cubra toda la altura del móvil */
    .hero-section, .video-container, #bg-video {
        min-height: 100vh; /* Altura completa de la pantalla */
    }
    
    /* FORMULARIOS */
    .formulario-wrapper {
        padding: 1.5rem; /* Menos relleno interno */
    }
    
    /* BIO Y TEXTOS LARGOS */
    .bio-container, .content2 {
        padding: 0 1.5rem;
        margin: 3rem auto;
    }
    
    .bio-title {
        font-size: 2rem;
    }
}

/* =========================================
   CORRECCIÓN DEFINITIVA LOGO (SAFARI / IPHONE)
   ========================================= */

/* Estilo Base (Escritorio) */
.logo {
    flex-shrink: 0; /* Evita que el logo se aplaste */
    display: flex;
    align-items: center;
}

.logo-link img {
    height: 50px; /* Altura FIJA para escritorio */
    width: auto;  /* El ancho se calcula solo */
    display: block;
}

/* AJUSTE PARA MÓVILES (iPhone) */
@media screen and (max-width: 768px) {
    
    header {
        /* Mantenemos el orden vertical */
        flex-direction: column; 
        padding: 20px 10px;
    }

    .logo {
        /* Forzamos al contenedor a ocupar espacio real */
        display: block !important; 
        width: 100%;
        text-align: center;
        margin-bottom: 20px; /* Espacio antes del menú */
        height: 120px; /* Reservamos espacio vertical para que no colapse */
    }

    .logo-link {
        display: inline-block;
    }

    .logo-link img {
        /* AQUÍ ESTÁ EL TRUCO PARA SAFARI: */
        height: 120px !important; /* Le obligamos a tener 120px de alto */
        width: auto !important;  /* Mantenemos la proporción */
        max-width: 80vw;         /* Que nunca sea más ancho que la pantalla */
        display: inline-block;
    }
}

/* =========================================
   GRILLA DE ALIADOS (LOGOS SVG)
   ========================================= */

.aliados-grid {
    display: flex;
    flex-wrap: wrap;           /* Si no caben, bajan a la siguiente línea */
    justify-content: center;   /* Centrados horizontalmente */
    align-items: center;       /* Centrados verticalmente */
    gap: 40px;                 /* Espacio entre logos */
    margin-top: 40px;
    padding: 20px 0;
}

.aliados-grid img {
    height: 40px;              /* Altura uniforme para todos */
    width: auto;               /* El ancho se ajusta solo */
    max-width: 150px;          /* Que ninguno sea gigante a lo ancho */
    transition: all 0.4s ease; /* Suavidad al cambiar de color */
    
    /* EL EFECTO "FANTASMA" (Modo Oscuro) */
    /* Esto convierte cualquier logo de color a Blanco Puro */
    filter: grayscale(100%) brightness(0) invert(1);
    opacity: 0.6;              /* Un poco transparentes para que no brillen tanto */
}

/* EFECTO HOVER (Al pasar el mouse) */
.aliados-grid img:hover {
    filter: grayscale(0%) brightness(1) invert(0); /* Recupera su color original */
    opacity: 1;                /* Opacidad total */
    transform: scale(1.1);     /* Crecen un poquito */
    cursor: pointer;
}

/* AJUSTE PARA MÓVILES */
@media screen and (max-width: 768px) {
    .aliados-grid {
        gap: 25px; /* Menos espacio en celular */
    }
    
    .aliados-grid img {
        height: 30px; /* Logos un poco más pequeños */
    }
}