/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 4.5rem;
  --primary-color: #0D2C54; /* Azul corporativo oscuro */
  --secondary-color: #2A5D9E; /* Azul medio */
  --accent-color: #FFD700; /* Amarillo/Dorado para CTAs */
  --accent-color-alt: #E8C300;
  --text-color: #333333;
  --text-color-light: #FFFFFF;
  --body-color: #F8F9FA;
  --container-color: #FFFFFF;
  --whatsapp-color: #25D366;

  --body-font: 'Open Sans', sans-serif;
  --title-font: 'Montserrat', sans-serif;

  --biggest-font-size: 2.5rem;
  --h1-font-size: 2.25rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.25rem;
  --normal-font-size: 1rem;
  --small-font-size: 0.875rem;

  --font-bold: 700;
  --font-extra-bold: 800;
  
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*=============== BASE ===============*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); }
h1, h2, h3 { font-family: var(--title-font); font-weight: var(--font-bold); color: var(--primary-color); }
ul { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/*=============== REUSABLE CSS CLASSES ===============*/
.container { max-width: 1120px; margin-left: 1.5rem; margin-right: 1.5rem; }
.grid { display: grid; gap: 1.5rem; }
.section { padding: 6rem 0 2rem; }
.section__title { font-size: var(--h2-font-size); text-align: center; margin-bottom: 1rem; }
.section__subtitle { text-align: center; margin-bottom: 3rem; color: #6c757d; max-width: 600px; margin-left: auto; margin-right: auto; }

/*=============== HEADER & NAV ===============*/
.header { width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-fixed); background-color: transparent; transition: background-color .4s, box-shadow .4s; }
.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }
.nav__logo { color: var(--text-color-light); font-family: var(--title-font); font-weight: var(--font-bold); font-size: 1.25rem; }
.header.scroll-header .nav__logo { color: var(--primary-color); }
.nav__actions { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { font-size: 1.25rem; color: var(--text-color-light); cursor: pointer; }
.header.scroll-header .nav__toggle { color: var(--primary-color); }
@media screen and (max-width: 767px) { .nav__menu { position: fixed; background-color: var(--primary-color); top: -100%; left: 0; width: 100%; padding: 4rem 0 3rem; transition: top .4s; } }
.nav__list { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.nav__link { color: var(--text-color-light); font-weight: var(--font-bold); transition: color .3s; }
.nav__link:hover { color: var(--accent-color); }
.header.scroll-header .nav__link { color: var(--text-color); }
.header.scroll-header .nav__link:hover { color: var(--secondary-color); }
.show-menu { top: var(--header-height); }
.scroll-header { background-color: var(--container-color); box-shadow: 0 4px 12px hsla(0, 0%, 15%, 0.1); }

/*=============== BUTTONS ===============*/
.button { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 0.5rem; font-weight: var(--font-bold); font-family: var(--title-font); transition: transform .3s, box-shadow .3s; border: none; cursor: pointer; text-align: center; }
.button:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.button--primary { background-color: var(--accent-color); color: var(--primary-color); }
.button--primary:hover { background-color: var(--accent-color-alt); }
.button--secondary { background-color: transparent; color: var(--text-color-light); border: 2px solid var(--accent-color); }
.header.scroll-header .button--secondary { color: var(--primary-color); border-color: var(--primary-color); }
.button--whatsapp { background-color: var(--whatsapp-color); color: #FFF; }
.button--large { font-size: 1.1rem; padding: 1rem 2.5rem; }
.button--full { width: 100%; }

/*=============== HERO ===============*/
/* ==================== HERO (VERSIÓN CORREGIDA) ==================== */
.hero {
    position: relative; /* Contenedor para las capas */
    overflow: hidden;
    /* Este es el FONDO DE RESPALDO (Capa 0). Se verá solo si el video falla. */
    background: linear-gradient(90deg, rgba(13, 44, 84, 0.85) 0%, rgba(13, 44, 84, 0.7) 100%), url('fondo.jpg') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center; /* Asegura centrado perfecto */
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Capa 1: El video se pone encima del fondo de respaldo. */
    z-index: 1;
}

/* Capa de color para legibilidad del texto */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(13, 44, 84, 0.85) 0%, rgba(13, 44, 84, 0.7) 100%);
    /* Capa 2: La capa de color se pone encima del video. */
    z-index: 2;
}

/* Contenido de texto y botones */
.hero__container {
    text-align: center;
    width: 100%;
    /* Capa 3: El contenido se pone encima de todo. */
    position: relative; /* Necesario para que z-index funcione */
    z-index: 3;
}

/* (El resto de tus estilos .hero__title, .hero__subtitle, etc. van aquí y no cambian) */
.hero__title {
    font-size: var(--biggest-font-size);
    color: var(--text-color-light);
    font-weight: var(--font-extra-bold);
    margin-bottom: 1rem;
}

.hero__subtitle {
    color: var(--text-color-light);
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__cta-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/*=============== SERVICES ===============*/
.service-card { background-color: var(--container-color); padding: 2.5rem 2rem; border-radius: .75rem; box-shadow: 0 4px 12px hsla(0, 0%, 15%, 0.08); text-align: center; transition: transform .3s, box-shadow .3s; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 8px 16px hsla(0, 0%, 15%, 0.15); }
.service-card__icon { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 1.5rem; }
.service-card__title { font-size: var(--h3-font-size); margin-bottom: .5rem; }

/*=============== ABOUT ===============*/
.about__container { align-items: center; gap: 3rem; }
.about__image-content img { border-radius: .75rem; }
.about__text-content .section__title,
.about__text-content .section__subtitle { text-align: left; }
.about__list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.about__list li { display: flex; align-items: flex-start; gap: .75rem; }
.about__list i { color: var(--secondary-color); font-size: 1.2rem; margin-top: 0.2rem; }

/*=============== FLEET ===============*/
.fleet { background-color: var(--container-color); }
.fleet-card { border-radius: .75rem; overflow: hidden; box-shadow: 0 4px 12px hsla(0, 0%, 15%, 0.08); }
.fleet-card img { width: 100%; height: 250px; object-fit: cover; }
.fleet-card h3, .fleet-card p { padding: 0 1.5rem; }
.fleet-card h3 { padding-top: 1.5rem; }
.fleet-card p { padding-bottom: 1.5rem; color: #6c757d; }

/*=============== FAQ ===============*/
.faq { background-color: var(--body-color); } /* Changed for visual separation */
.faq__container{ max-width: 768px; margin-left: auto; margin-right: auto; }
.faq__item { background-color: var(--container-color); margin-bottom: 1rem; border-radius: .5rem; box-shadow: 0 2px 8px hsla(0, 0%, 15%, 0.05); }
.faq__header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; cursor: pointer; }
.faq__header h4 { font-size: 1.1rem; }
.faq__icon { transition: transform .3s; }
.faq__content { max-height: 0; overflow: hidden; transition: max-height .4s ease-out; }
.faq__content p { padding: 0 1.5rem 1.5rem; color: #6c757d; line-height: 1.6; }
.faq__item.active .faq__icon { transform: rotate(180deg); color: var(--secondary-color); }
.faq__item.active .faq__content { max-height: 200px; }

/*=============== CTA FINAL ===============*/
.cta-final { background: linear-gradient(90deg, rgba(13, 44, 84, 0.9) 0%, rgba(42, 93, 158, 0.9) 100%); padding: 6rem 0; text-align: center; color: var(--text-color-light); }
.cta-final h2 { color: var(--text-color-light); font-size: var(--h1-font-size); margin-bottom: 1rem; }
.cta-final p { margin-bottom: 2rem; font-size: 1.1rem; }

/*=============== CONTACT & FORM ===============*/
.contact__container { align-items: center; gap: 3rem; }
.contact__info { text-align: center; }
.contact__specialist { margin: 1rem 0; }
.contact__list { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 2rem 0; font-size: 1.1rem; }
.contact__list a { color: var(--text-color); }
.contact__social { display: flex; justify-content: center; gap: 1.5rem; font-size: 1.5rem; }
.contact__social a { color: var(--secondary-color); transition: color .3s; }
.contact__social a:hover { color: var(--primary-color); }

.contact__form { background-color: var(--container-color); padding: 2.5rem; border-radius: .75rem; box-shadow: 0 4px 12px hsla(0, 0%, 15%, 0.08); width: 100%; }
.contact__form-title { text-align: center; margin-bottom: 2rem; }
.form__group { margin-bottom: 1.5rem; }
.form__label { display: block; margin-bottom: .5rem; font-weight: 600; }
.form__input { width: 100%; padding: .8rem 1rem; border-radius: .5rem; border: 1px solid #ccc; font-family: var(--body-font); font-size: var(--normal-font-size); transition: border-color .3s, box-shadow .3s; }
.form__input:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px hsla(212, 57%, 50%, 0.2); outline: none; }
textarea.form__input { resize: vertical; }

/*=============== FOOTER ===============*/
.footer { background-color: var(--primary-color); color: #adb5bd; padding: 2rem 0; text-align: center; }


/*=============== MEDIA QUERIES ===============*/
@media screen and (min-width: 576px) {
    .hero__cta-group { flex-direction: row; justify-content: center; }
    .services__container { grid-template-columns: repeat(2, 1fr); }
    .fleet__container { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 768px) {
  :root { --biggest-font-size: 4rem; --h1-font-size: 2.5rem; --h2-font-size: 1.75rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; }
  .nav__menu { width: initial; }
  .nav__list { flex-direction: row; gap: 3rem; }
  .nav__toggle { display: none; }
  .button--secondary { display: block; }
  .about__container { grid-template-columns: 1fr 1fr; }
  .fleet__container { grid-template-columns: repeat(3, 1fr); }
  .contact__container { grid-template-columns: 1fr 1.25fr; text-align: left; }
  .contact__info, .contact__list { align-items: flex-start; }
  .contact__social { justify-content: flex-start; }
}

@media screen and (max-width: 767px) {
    .button--secondary { display: none; }
}

@media screen and (min-width: 992px) {
    .services__container { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (min-width: 1024px) {
    .container { margin-left: auto; margin-right: auto; }
}

/* ANIMATION ON SCROLL */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }