/* ==========================================================================
   inicio.css — Estilos exclusivos de index.html.

   Los bloques siguen el mismo orden en que las secciones aparecen en
   pantalla y todos los selectores arrancan por el ID de su sección.

   1. HÉROE        — #home_hero
   2. SERVICIOS    — #home_services
   3. PRESENTACIÓN — #home_about
   4. COBERTURA    — #home_coverage
   5. PRESUPUESTO  — #home_quote

   Las cifras (#home_stats), los pasos del proceso (#home_process) y la
   cinta final (#home_cta) se repiten en otras páginas, así que sus estilos
   viven como componentes compartidos en global.css.
   ========================================================================== */

/* ==========================================================================
   1. HÉROE — #home_hero
   ========================================================================== */

#home_hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(92vh, 900px);
    padding-block: calc(var(--site-header-height) + var(--site-space-9)) var(--site-space-9);
    background-color: var(--site-night-900);
    overflow: hidden;
    isolation: isolate;
}

/* 1.1 Imagen de fondo y velos */

#home_hero .home-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Margen extra para que el desplazamiento del parallax no deje huecos. */
    inset-block: -12% -12%;
}

#home_hero .home-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* Velo vertical: oscurece la base para que el texto siempre contraste. */
#home_hero .home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(11, 18, 32, 0.97) 6%, rgba(11, 18, 32, 0.55) 48%, rgba(11, 18, 32, 0.72) 100%),
        linear-gradient(to right, rgba(11, 18, 32, 0.85) 0%, rgba(11, 18, 32, 0.1) 65%);
}

/* 1.2 Contenedor */

#home_hero .home-hero__shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-space-5);
    max-width: 100%;
}

/* 1.3 Textos */

#home_hero .home-hero__title {
    max-width: 18ch;
    color: var(--site-ink-on-dark);
}

#home_hero .home-hero__description {
    max-width: 52ch;
    color: var(--site-ink-muted-dark);
    font-size: clamp(1rem, 1.6vw, 1.1875rem);
}

/* 1.4 Botones */

#home_hero .home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-4);
    margin-top: var(--site-space-2);
}

/* 1.5 Nota de disponibilidad */

#home_hero .home-hero__note {
    display: flex;
    align-items: center;
    gap: var(--site-space-3);
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#home_hero .home-hero__note-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background-color: #3ddc84;
    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2);
}

/* 1.6 Responsive del héroe */

@media (max-width: 767px) {
    #home_hero {
        min-height: auto;
        padding-block: calc(var(--site-header-height) + var(--site-space-8)) var(--site-space-8);
    }

    #home_hero .home-hero__title {
        max-width: 100%;
    }

    #home_hero .home-hero__actions .site-button {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   2. SERVICIOS — #home_services
   ========================================================================== */

#home_services {
    padding-block: var(--site-section-space);
    background-color: var(--site-paper);
}

/* 2.1 Contenedor y layout */

#home_services .home-services__shell {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 72px);
}

#home_services .home-services__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-5);
}

#home_services .home-services__intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
}

/* 2.2 Títulos y textos */

#home_services .home-services__title {
    max-width: 22ch;
    color: var(--site-ink-900);
}

#home_services .home-services__intro-description {
    max-width: 46ch;
    color: var(--site-ink-700);
    font-size: 1.0625rem;
}

/* 2.3 Rejilla de tarjetas */

#home_services .home-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-5);
}

#home_services .home-services__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-large);
    background-color: var(--site-surface);
    overflow: hidden;
    /* Contexto 3D para el efecto de inclinación con el ratón. */
    transform-style: preserve-3d;
    transition:
        border-color var(--site-duration-medium) var(--site-ease-out),
        box-shadow var(--site-duration-medium) var(--site-ease-out);
}

/* 2.4 Imágenes */

#home_services .home-services__card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

#home_services .home-services__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--site-ease-out);
}

#home_services .home-services__card-index {
    position: absolute;
    top: var(--site-space-4);
    left: var(--site-space-4);
    padding: var(--site-space-1) var(--site-space-3);
    border-radius: var(--site-radius-pill);
    background-color: rgba(11, 18, 32, 0.72);
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    backdrop-filter: blur(4px);
}

/* 2.5 Cuerpo de la tarjeta */

#home_services .home-services__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-space-4);
    padding: clamp(24px, 3vw, 36px);
}

/* 2.6 Iconos */

#home_services .home-services__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: var(--site-radius-medium);
    background-color: var(--site-blue-50);
    color: var(--site-blue-500);
}

#home_services .home-services__card-icon svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

#home_services .home-services__card-title {
    color: var(--site-ink-900);
}

#home_services .home-services__card-description {
    color: var(--site-ink-700);
    font-size: 0.9375rem;
}

/* 2.7 Enlaces */

#home_services .home-services__card-link {
    margin-top: auto;
}

/* 2.8 Estados */

#home_services .home-services__card:hover {
    border-color: var(--site-blue-500);
    box-shadow: var(--site-shadow-raised);
}

#home_services .home-services__card:hover .home-services__card-image {
    transform: scale(1.06);
}

/* 2.9 Responsive de los servicios */

@media (min-width: 768px) {
    #home_services .home-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #home_services .home-services__intro {
        grid-template-columns: 1.35fr 1fr;
        align-items: end;
        gap: var(--site-space-8);
    }

    #home_services .home-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   3. PRESENTACIÓN — #home_about
   ========================================================================== */

#home_about {
    padding-block: var(--site-section-space);
    background-color: var(--site-surface);
}

/* 3.1 Contenedor y layout */

#home_about .home-about__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

/* 3.2 Imagen y distintivo */

#home_about .home-about__media {
    position: relative;
    border-radius: var(--site-radius-large);
    overflow: hidden;
    isolation: isolate;
}

#home_about .home-about__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Sobredimensiona la imagen para dar recorrido al parallax. */
    scale: 1.12;
}

#home_about .home-about__badge {
    position: absolute;
    right: var(--site-space-5);
    bottom: var(--site-space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--site-space-4) var(--site-space-5);
    border-radius: var(--site-radius-medium);
    background-color: var(--site-blue-500);
    color: var(--site-ink-on-dark);
}

#home_about .home-about__badge-value {
    font-family: var(--site-font-display);
    font-size: 2rem;
    font-weight: 900;
    line-height: 0.9;
}

#home_about .home-about__badge-unit {
    font-family: var(--site-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* 3.3 Contenido */

#home_about .home-about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-space-5);
}

/* 3.4 Títulos y textos */

#home_about .home-about__title {
    max-width: 20ch;
    color: var(--site-ink-900);
}

#home_about .home-about__text {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    max-width: 54ch;
    color: var(--site-ink-700);
    font-size: 1.0625rem;
}

/* 3.5 Lista de diferenciadores */

#home_about .home-about__list {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-5);
    width: 100%;
    padding-top: var(--site-space-5);
    border-top: 1px solid var(--site-line);
}

#home_about .home-about__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--site-space-4);
}

#home_about .home-about__list-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 3px;
    color: var(--site-blue-500);
}

#home_about .home-about__list-body {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-1);
}

#home_about .home-about__list-title {
    color: var(--site-ink-900);
    font-family: var(--site-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

#home_about .home-about__list-description {
    color: var(--site-ink-700);
    font-size: 0.9375rem;
}

/* 3.6 Botón */

#home_about .home-about__button {
    margin-top: var(--site-space-2);
}

/* 3.7 Responsive de la presentación */

@media (min-width: 1024px) {
    #home_about .home-about__shell {
        grid-template-columns: 1fr 1.05fr;
    }
}

/* ==========================================================================
   4. COBERTURA — #home_coverage
   ========================================================================== */

#home_coverage {
    position: relative;
    padding-block: clamp(80px, 10vw, 144px) 0;
    background-color: var(--site-night-800);
    overflow: hidden;
    isolation: isolate;
}

/* 4.1 Imagen de fondo */

#home_coverage .home-coverage__media {
    position: absolute;
    inset-block: -18% -18%;
    inset-inline: 0;
    z-index: -2;
}

#home_coverage .home-coverage__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home_coverage .home-coverage__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11, 18, 32, 0.86), rgba(11, 18, 32, 0.94));
}

/* 4.2 Contenido */

#home_coverage .home-coverage__shell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-space-4);
    padding-bottom: clamp(56px, 7vw, 96px);
}

/* 4.3 Títulos y textos */

#home_coverage .home-coverage__title {
    color: var(--site-ink-on-dark);
    font-size: clamp(3rem, 9vw, 7rem);
}

#home_coverage .home-coverage__description {
    max-width: 48ch;
    color: var(--site-ink-muted-dark);
    font-size: 1.0625rem;
}

/* 4.4 Cinta de provincias */

#home_coverage .home-coverage__marquee {
    display: flex;
    gap: var(--site-space-8);
    padding-block: var(--site-space-5);
    border-top: 1px solid var(--site-night-700);
    border-bottom: 1px solid var(--site-night-700);
    /* La cinta desborda a propósito; el contenedor de sección lo recorta. */
    width: max-content;
}

#home_coverage .home-coverage__marquee-track {
    display: flex;
    align-items: center;
    gap: var(--site-space-8);
}

#home_coverage .home-coverage__marquee-item {
    display: flex;
    align-items: center;
    gap: var(--site-space-8);
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Punto separador entre provincias. */
#home_coverage .home-coverage__marquee-item::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background-color: var(--site-blue-500);
}

/* ==========================================================================
   5. PRESUPUESTO — #home_quote
   ========================================================================== */

#home_quote {
    padding-block: var(--site-section-space);
    background-color: var(--site-paper);
}

/* 5.1 Contenedor y layout */

#home_quote .home-quote__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
}

/* 5.2 Introducción */

#home_quote .home-quote__intro {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
}

#home_quote .home-quote__title {
    max-width: 20ch;
    color: var(--site-ink-900);
}

#home_quote .home-quote__description {
    max-width: 48ch;
    color: var(--site-ink-700);
    font-size: 1.0625rem;
}

/* 5.3 Datos de referencia */

#home_quote .home-quote__facts {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    margin-top: var(--site-space-3);
    padding-top: var(--site-space-5);
    border-top: 1px solid var(--site-line);
}

#home_quote .home-quote__fact {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-1);
}

#home_quote .home-quote__fact-term {
    color: var(--site-ink-500);
    font-family: var(--site-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#home_quote .home-quote__fact-value {
    color: var(--site-ink-900);
    font-weight: 500;
}

/* 5.4 Formulario */

#home_quote .home-quote__form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-5);
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-large);
    background-color: var(--site-surface);
    box-shadow: var(--site-shadow-soft);
}

/* 5.5 Botón y mensajes */

#home_quote .home-quote__submit {
    width: 100%;
}

#home_quote .home-quote__disclaimer {
    color: var(--site-ink-500);
    font-size: 0.8125rem;
}

/* 5.6 Responsive del presupuesto */

@media (min-width: 620px) {
    #home_quote .home-quote__form {
        grid-template-columns: repeat(2, 1fr);
    }

    #home_quote .home-quote__submit,
    #home_quote .home-quote__message,
    #home_quote .home-quote__disclaimer {
        grid-column: 1 / -1;
    }

    #home_quote .home-quote__submit {
        justify-self: start;
        width: auto;
    }
}

@media (min-width: 1024px) {
    #home_quote .home-quote__shell {
        grid-template-columns: 1fr 1.15fr;
    }
}