/* --- H&M MOTORGAS | HOJA DE ESTILOS FINAL --- */

/* =======================================================
   1. VARIABLES GLOBALES Y ESTILOS BASE
======================================================= */

/* Paleta de Colores y Tipografías */
:root {
    --color-primario: #F37F21;
    --color-primario-hover: #d8701a;
    --color-fondo: #000000;         /* Fondo principal de la página (negro) */
    --color-superficie: #1C1C1C;    /* Fondos para tarjetas, secciones secundarias (gris oscuro) */
    --color-borde: #3a3a3a;
    --color-texto: #FFFFFF;         /* Color de texto principal (blanco) */
    --color-texto-secundario: #CED4DA; /* Color de texto secundario (gris claro) */
    --radio-borde: 8px;             /* Radio de borde general para elementos */
    --sombra-caja: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra estándar para cajas */
    --font-titulos: 'Montserrat', sans-serif; /* Fuente para títulos */
    --font-cuerpo: 'Roboto', sans-serif;     /* Fuente para el cuerpo del texto */
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
}

body {
    font-family: var(--font-cuerpo);
    background-color: var(--color-fondo); /* Este color de fondo se verá en las áreas que no cubra el hero o las secciones */
    color: var(--color-texto); /* Color de texto base blanco */
    line-height: 1.6;
    overflow-x: hidden; /* Evita scroll horizontal indeseado */
    
    /* ***** CORRECCIÓN CLAVE 1: ELIMINAR padding-top del body ***** */
    /* Esto es FUNDAMENTAL para que la sección .hero pueda iniciar en top:0 del viewport */
    /* ¡Elimina esta línea para que el hero suba y se vea detrás del header transparente! */
    /* padding-top: 88px;  <-- ¡ELIMINA ESTA LÍNEA! */
}

/* El resto de tu código para .container, h1, h2, p, img, etc. está bien */

/* ***** NUEVO: Estilo para el contenido principal (dentro de <main>) ***** */
main {
    /* ***** CORRECCIÓN CLAVE 2: Eliminar margin-top de <main> ***** */
    /* <main> debe empezar inmediatamente DESPUÉS de la sección hero (que es 100vh de alto) */
    /* Si tenía margin-top: 100vh, lo empujaba dos pantallas hacia abajo. */
    margin-top: 0; /* Asegura que el main comience justo después del hero */
    background-color: var(--color-fondo); /* Asegura que el main tenga tu color de fondo principal */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 80px 0; /* Padding vertical para el contenido dentro del container */
}

h1, h2, h3 {
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-texto);
}

h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 50px;
}

p {
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

/* =======================================================
   3. SECCIÓN DE PORTADA (HERO SECTION)
======================================================= */
.hero {
    position: relative; /* Permite que z-index y overflow funcionen bien */
    /* ***** CORRECCIÓN CLAVE 3: Hero ocupa toda la altura del viewport ***** */
    /* Esto es FUNDAMENTAL para que la imagen de fondo se vea DETRÁS del header transparente */
    height: 100vh; /* Ocupa el 100% de la altura de la ventana del navegador */
    width: 100%;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido del hero (hero-content) */
    justify-content: center; /* Centra horizontalmente el contenido del hero */
    text-align: center;
    overflow: hidden;
    background: url('https://images.pexels.com/photos/3807517/pexels-photo-3807517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') no-repeat center center/cover;
    
    /* ***** CORRECCIÓN CLAVE 4: Empujar el contenido INTERNO del hero hacia abajo ***** */
    /* Esto crea un espacio debajo del header fijo para que el hero-content no quede oculto */
    padding-top: 88px; /* Ajusta este valor a la altura exacta de tu header fijo (logo 48px + 2*20px padding) */
    box-sizing: border-box; /* Crucial para que el padding se incluya en la altura total de 100vh */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 1;
}

.hero-content {
    position: relative; 
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-title {
    font-family: var(--font-titulos);
    font-weight: 900;
    font-size: 3.5rem;
    color: var(--color-texto);
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin: 20px 0 40px;
    color: var(--color-texto-secundario);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    background-color: var(--color-primario);
    color: var(--color-fondo);
    font-family: var(--font-titulos);
    font-weight: 700;
    padding: 15px 35px;
    border-radius: var(--radio-borde);
    font-size: 1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--color-primario-hover);
    transform: translateY(-3px);
}

/* --- BARRA SOCIAL Y SCROLL --- */
.social-bar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    padding: 10px 0;
}

.social-bar a {
    padding: 15px;
    font-size: 1.2rem;
    color: var(--color-texto); 
    transition: color 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.social-bar a:hover {
    color: var(--color-primario);
    background-color: rgba(243, 127, 33, 0.1);
}

/* --- SCROLL DOWN INDICATOR (No está en tu HTML actual, pero por si lo agregas) --- */
.scroll-down-indicator {
    position: absolute; 
    bottom: 30px;
    right: 40px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 2;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-texto); 
}
.scroll-down-indicator a {
    text-decoration: none;
    color: inherit; 
}
.scroll-down-indicator i {
    display: block;
    margin-top: 10px;
    animation: bounce 2s infinite;
    color: var(--color-texto); 
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}


/* =======================================================
   6. SECCIONES DE CONTENIDO PRINCIPAL (DENTRO de <main>)
======================================================= */

/* --- SECCIÓN ESPECIALISTAS --- */
.specialists-section {
    background-color: var(--color-superficie); 
    text-align: center;
    padding: 80px 20px; 
}
.specialists-section .container { padding: 0; }
.specialists-section .specialist-intro h2 { font-size: 2.5rem; margin-bottom: 15px; }
.specialists-section .specialist-intro h2 span { color: var(--color-primario); }
.specialists-section .specialist-intro p { font-size: 1.1rem; max-width: 750px; margin: 0 auto 50px auto; color: var(--color-texto-secundario); }

.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.benefit-card { background-color: var(--color-fondo); padding: 30px; border-radius: var(--radio-borde); border: 1px solid var(--color-borde); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card:hover { transform: translateY(-10px); box-shadow: var(--sombra-caja); background-color: var(--color-superficie); }
.benefit-icon { width: 60px; height: 60px; margin: 0 auto 20px auto; background-color: var(--color-primario); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.benefit-icon svg { width: 32px; height: 32px; fill: var(--color-texto); }
.benefit-card h3 { font-size: 1.4rem; color: var(--color-texto); margin-bottom: 10px; }
.benefit-card p { font-size: 1rem; color: var(--color-texto-secundario); margin-bottom: 0; }

/* --- SECCIÓN DE SERVICIOS --- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.service-card { background-color: var(--color-superficie); padding: 40px 20px; border-radius: var(--radio-borde); border: 1px solid var(--color-borde); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.service-card h3 { font-size: 1.5rem; color: var(--color-primario); margin-top: 15px; font-weight: 700; margin-bottom: 15px; }

/* --- FORMULARIO DE CONTACTO --- */
.contact-form { max-width: 700px; margin: auto; padding: 40px; background-color: var(--color-superficie); border-radius: var(--radio-borde); }
.form-group { margin-bottom: 20px; }
.form-group input, .form-group textarea { width: 100%; padding: 15px; border-radius: var(--radio-borde); border: 1px solid var(--color-borde); background-color: var(--color-fondo); color: var(--color-texto); font-size: 1rem; resize: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-texto-secundario); }
.submit-btn { background-color: var(--color-primario); color: var(--color-texto); padding: 15px 30px; border: none; border-radius: var(--radio-borde); font-weight: 700; font-size: 1.1rem; cursor: pointer; width: 100%; transition: background-color 0.3s ease; }
.submit-btn:hover { background-color: var(--color-primario-hover); }

/* --- FOOTER --- */
.footer { background-color: var(--color-superficie); color: var(--color-texto-secundario); padding: 40px 20px; text-align: center; border-top: 1px solid var(--color-borde); }
.footer p { margin: 0; }


/* =======================================================
    7. REGLAS RESPONSIVE (COMBINADAS Y ORGANIZADAS)
======================================================= */
@media (max-width: 992px) {
    .benefits-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .social-bar, .scroll-down-indicator {
        display: none;
    }
}

@media (max-width: 768px) {
    h2 { font-size: 2.2rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1rem; }
    
    /* Ajustes específicos para el header en pantallas pequeñas */
    .main-header { padding: 15px 20px; } 
    #main-header.scrolled {
        padding: 10px 20px; 
    }

    .contact-info-top { display: none; } 
    .menu-items a { font-size: 2rem; }
}