:root {
    --gold: #c59d5f;
    --dark: #1a1c20;
    --light: #f9f9f9;
    --white: #ffffff;
    --gray: #666;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { color: var(--dark); line-height: 1.6; background: var(--white); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Estilo de Iconos */
.lucide { stroke: var(--gold); stroke-width: 1.5px; width: 28px; height: 28px; }

/* Reutilizables */
h6 { color: var(--gold); letter-spacing: 2px; font-size: 0.75rem; margin-bottom: 10px; }
h2 { font-size: 2.2rem; line-height: 1.2; margin-bottom: 20px; }
.btn-primary { background: var(--gold); color: var(--white); padding: 12px 25px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block; transition: 0.3s; }
.btn-primary:hover { background: #b38b4f; }

/* Hero */
/* .hero { background: url('/img/background.png'); background-size: cover; color: var(--white); padding-bottom: 80px; } */

 .hero {
    /* Cargamos la imagen y el color de fondo para que no haya saltos visuales */
    background-image: url(/img/background.png);
    background-color: var(--dark); /* Color oscuro para integrar con la imagen */
    
    /* Centramos la imagen y evitamos que se repita */
    background-repeat: no-repeat;
    background-position: center;

    /* CAMBIO CLAVE: 'contain' asegura que la imagen SIEMPRE se vea completa */
    background-size: contain;

    /* CAMBIO CLAVE 2: Definimos la relación de aspecto de la imagen (Ancho / Alto).
       Si tu imagen es 16:9, usamos 16 / 9. Esto hace que el div 
       cambie de altura automáticamente según el ancho de la pantalla. */
    aspect-ratio: 16 / 9; 

    /* Eliminamos paddings y alturas fijas que empujan el contenido */
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    
    /* Para que el texto interno (si tienes) se ubique bien */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ajuste para la sección de texto que sigue (Sobre nosotros) */
.sobre-nosotros {
    margin-top: 0;
    padding-top: 20px; /* Un pequeño respiro para que no pegue al borde exacto */
}

/* 3. Asegúrate de que la sección de texto "SOBRE NOSOTROS" no tenga margen superior.
   Asumiré que la sección de texto tiene una clase como 'about-section' o similar.
   Si no la tiene, agrégasela en el HTML o usa el selector del elemento (ej. 'section'). */
.about-section {
    margin-top: 0;
    padding-top: 40px; /* Un poco de relleno superior para que no pegue completamente */
}

/* Opcional: Para evitar que se estire demasiado en pantallas gigantes */
@media (min-width: 1920px) {
    .hero {
        background-size: contain; /* Ya no 100%, solo contain */
        background-position: center center;
        padding-bottom: 0;
        /* Y le das una altura máxima fija aquí si lo deseas */
        height: 1080px; 
    }
}


.navbar { padding: 30px 0; }
/* .logo { display: flex; align-items: center; gap: 15px; } */
.hero img { width: 600px; height: 600px; }
.gs-title { font-size: 2rem; font-weight: 800; line-height: 1; }
.logo-text p { font-size: 0.8rem; opacity: 0.8; }
.hero-content { max-width: 600px; padding: 100px 0; }
.hero h1 { font-size: 3rem; margin-bottom: 20px; }

/* Secciones */
.about, .services, .why-us { padding: 80px 0; }
.services {background-color: rgb(193, 195, 188);}
.section-title { margin-bottom: 50px; }
.about { background: var(--dark); color: var(--white); }
.subtitle { opacity: 0.7; max-width: 600px; }

/* Grids */
.features-grid, .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.feature-card, .service-card { padding: 30px; border-radius: 8px; background: rgba(255,255,255,0.05); }
.service-card { background: var(--white); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.special-card { background: var(--dark); color: var(--white); text-align: center; }
.white-icon { stroke: var(--white); }
.btn-outline { border: 1px solid var(--gold); color: var(--gold); padding: 8px 20px; text-decoration: none; border-radius: 4px; display: inline-block; margin-top: 15px; }

/* Why Us Flex */
.why-flex { display: flex; gap: 60px; align-items: center; }
.why-img { flex: 1; }
.why-img img { width: 100%; border-radius: 10px; }
.why-info { flex: 1; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.why-item i { margin-bottom: 10px; }

/* CTA & Footer */
.final-cta { background: #111; color: var(--white); padding: 60px 0; border-bottom: 1px solid #333; }
.cta-flex { display: flex; justify-content: space-between; align-items: center; }
.cta-brand { display: flex; align-items: center; gap: 20px; }
.big-gold-icon { width: 50px; height: 50px; }
.footer { background: #111; color: var(--white); padding: 40px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.footer-item { display: flex; gap: 15px; font-size: 0.85rem; }
.footer-item span { color: var(--gold); font-weight: bold; display: block; }

@media (max-width: 768px) {
    .why-flex, .cta-flex { flex-direction: column; text-align: center; }
    .why-grid { grid-template-columns: 1fr; }
    .cta-brand { flex-direction: column; }
}