/* ============================================================
   home-hero.css — Hero del HOME a imagen completa, de lado a lado.
   Mismo lenguaje visual que el hero de páginas de servicio
   (imagen panorámica full-width + overlay + texto superpuesto),
   pero más alto e imponente por ser la portada del sitio completo,
   con mini-stats como refuerzo de confianza propio del home.
   ============================================================ */

.hero{
    position: relative;
    width: 100%;
    /* min-height (no height fijo): el hero puede crecer más si el
       contenido lo necesita, así NUNCA se recorta nada sin importar
       la resolución. En pantallas grandes se ve alto e imponente;
       en pantallas bajas (1366x768 y similares) crece lo justo para
       que quepa todo el texto + stats sin cortarse. */
    min-height: clamp(420px, 74vh, 640px);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero-bg-img{
    position: absolute; inset: 0;
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: homeZoom 11s ease-out forwards;
}
@keyframes homeZoom{ to{ transform: scale(1); } }

.hero::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,30,30,.85) 0%, rgba(20,30,30,.62) 42%, rgba(20,30,30,.2) 68%, rgba(20,30,30,.05) 100%);
}

.hero-inner{
    position: relative;
    z-index: 2;
    padding: 36px 0;
}
.hero-text{ max-width: 640px; }

.hero-eyebrow-home{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amarillo, #F4C21A);
    font-weight: 600;
    margin-bottom: 16px;
    opacity: 0;
    animation: homeSube .7s ease forwards .1s;
}
.hero-eyebrow-home .linea{ width: 28px; height: 2px; background: var(--amarillo, #F4C21A); }

.hero-text h1{
    font-family: var(--font-display, inherit);
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 600;
    line-height: 1.08;
    color: #fff;
    opacity: 0;
    animation: homeSube .8s ease forwards .22s;
}

.hero-subtitle{
    margin-top: 14px;
    font-size: 1.05rem;
    max-width: 520px;
    color: rgba(255,255,255,.92);
    opacity: 0;
    animation: homeSube .8s ease forwards .36s;
}

.hero-cta{
    margin-top: 24px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    animation: homeSube .8s ease forwards .5s;
}

/* Mini stats — refuerzan confianza debajo de los botones */
.hero-stats{
    margin-top: 26px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    opacity: 0;
    animation: homeSube .8s ease forwards .64s;
}
.hero-stats .stat{ display: flex; flex-direction: column; }
.hero-stats .stat .cifra{
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--amarillo, #F4C21A);
    line-height: 1;
}
.hero-stats .stat .etiqueta{
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    margin-top: 6px;
}

@keyframes homeSube{
    from{ opacity: 0; transform: translateY(22px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* Pantallas de poca altura (típico laptop 1366x768): compactar
   tamaños de fuente y espaciados para que el hero se vea más
   equilibrado, no gigante en relación al resto de la pantalla.
   Esto es ajuste estético — el min-height de .hero ya garantiza
   que nada se recorte aunque no existieran estas reglas. */
@media (max-height: 720px){
    .hero-inner{ padding: 28px 0; }
    .hero-text h1{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; }
    .hero-subtitle{ margin-top: 8px; font-size: .96rem; }
    .hero-cta{ margin-top: 16px; }
    .hero-cta .btn{ padding: 10px 22px; font-size: .92rem; }
    .hero-stats{ margin-top: 14px; gap: 24px; }
    .hero-stats .stat .cifra{ font-size: 1.3rem; }
    .hero-stats .stat .etiqueta{ font-size: .72rem; margin-top: 2px; }
}

@media (max-width: 760px){
    .hero{ min-height: 0; padding: 56px 0; }
    .hero::after{ background: linear-gradient(180deg, rgba(20,30,30,.4) 0%, rgba(20,30,30,.82) 100%); }
}

@media (prefers-reduced-motion: reduce){
    .hero-eyebrow-home, .hero-text h1, .hero-subtitle, .hero-cta, .hero-stats{
        opacity: 1; animation: none; transform: none;
    }
    .hero-bg-img{ animation: none; transform: scale(1); }
}