/* =========================================================
   CRYSTAL CLEANING - PUBLIC VISUAL LOCK V35
   Objetivo:
   - Que 100% del navegador se sienta como ~90% de Chrome.
   - Evitar que el hero se corte si el título ocupa varias líneas.
   - Mantener móvil/tablet intacto.
   - Cargar SIEMPRE al final del CSS público.
   ========================================================= */

/* Anulamos cualquier zoom CSS anterior. */
html{
    zoom:1 !important;
}

/* -----------------------------
   Desktop / laptop compact scale
   ----------------------------- */
@media (min-width:921px){

    /* NAV: misma estética, pero aprox. 10% más compacto */
    .site-header{
        top:22px !important;
    }

    .site-header__card,
    .site-header__card--modern{
        min-height:74px !important;
        padding:7px 9px 7px 10px !important;
        border-radius:20px !important;
    }

    .site-brand__plate{
        width:170px !important;
        min-height:54px !important;
        padding:4px 10px !important;
        border-radius:13px !important;
    }

    .site-brand--modern .site-brand__logo,
    .site-brand__logo{
        height:44px !important;
        max-width:148px !important;
    }

    .site-nav,
    .site-nav--modern{
        gap:clamp(14px,1.55vw,25px) !important;
    }

    .site-nav a,
    .site-nav--modern > a{
        font-size:12px !important;
    }

    .site-header__actions,
    .site-header__actions--modern{
        gap:8px !important;
    }

    .nav-clock{
        min-height:48px !important;
        padding:5px 10px !important;
        border-radius:12px !important;
    }

    .nav-clock__icon{
        width:27px !important;
        height:27px !important;
        font-size:15px !important;
    }

    .nav-clock__copy{
        min-width:92px !important;
    }

    .nav-clock strong{
        font-size:11.5px !important;
    }

    .nav-clock small{
        font-size:8px !important;
    }

    .language-switch--modern{
        min-height:38px !important;
        padding-inline:8px !important;
        font-size:11px !important;
    }

    .site-header__portal-link{
        min-height:38px !important;
        padding-inline:11px !important;
        font-size:10.5px !important;
    }

    .site-button--nav,
    .site-button--header{
        min-height:48px !important;
        padding-inline:17px !important;
        font-size:12px !important;
    }

    /* ---------------------------------------
       HERO: bloqueo contra texto cortado
       --------------------------------------- */

    /*
     * El problema anterior:
     * .hero-slide era absolute y .hero tenía overflow:hidden.
     * Si el contenido crecía, el padre no crecía y el texto podía cortarse.
     *
     * Solución:
     * el slide ACTIVO participa en el flujo y define la altura real.
     */
    .hero{
        min-height:clamp(780px,100svh,900px) !important;
        height:auto !important;
        overflow:hidden !important;
    }

    .hero-slide{
        position:absolute !important;
        inset:0 !important;
        min-height:100% !important;
    }

    .hero-slide.is-active{
        position:relative !important;
        inset:auto !important;
        min-height:clamp(780px,100svh,900px) !important;
    }

    .hero-slide.is-active .hero-slide__image,
    .hero-slide.is-active .hero-slide__gradient,
    .hero-slide.is-active .hero-slide__vignette{
        position:absolute !important;
        inset:0 !important;
    }

    .hero-slide__content{
        min-height:clamp(780px,100svh,900px) !important;
        height:auto !important;
        padding-top:145px !important;
        padding-bottom:78px !important;
        box-sizing:border-box !important;
    }

    .hero-copy{
        width:min(650px,49vw) !important;
        max-width:650px !important;
        padding:23px 24px 22px 0 !important;
        overflow:visible !important;
    }

    .hero-copy::before{
        inset:-15px -16px -15px -21px !important;
        border-radius:25px !important;
    }

    .hero-copy h1{
        max-width:650px !important;
        font-size:clamp(48px,4.8vw,76px) !important;
        line-height:.92 !important;
        letter-spacing:-.05em !important;
        overflow:visible !important;
    }

    .hero-subtitle{
        margin-top:7px !important;
        font-size:clamp(29px,3.15vw,48px) !important;
        line-height:1 !important;
    }

    .hero-description{
        max-width:560px !important;
        margin-top:20px !important;
        font-size:clamp(14px,1.05vw,17px) !important;
        line-height:1.62 !important;
    }

    .hero-actions{
        gap:12px !important;
        margin-top:24px !important;
    }

    .hero-actions .site-button{
        min-height:48px !important;
        padding-inline:19px !important;
        font-size:12px !important;
    }

    .hero-features{
        max-width:650px !important;
        margin-top:30px !important;
    }

    .hero-feature{
        font-size:11px !important;
    }

    /* Secciones generales: compactas sin usar zoom CSS */
    .site-section{
        padding-top:72px !important;
        padding-bottom:72px !important;
    }

    .section-kicker{
        font-size:10px !important;
    }

    .section-heading,
    .site-section h2{
        font-size:clamp(34px,3.5vw,54px);
    }

    .site-button{
        font-size:12px;
    }

    /* Servicios y reviews un poco más compactos visualmente */
    .service-premium-card h3{
        font-size:clamp(20px,1.45vw,27px) !important;
    }

    .service-premium-card__summary{
        font-size:12px !important;
    }

    .review-card{
        font-size:90% !important;
    }

    .public-portal-card{
        font-size:92% !important;
    }

    .site-footer{
        font-size:92% !important;
    }
}

/* Pantallas de escritorio muy anchas:
   anulamos el 96px antiguo que volvía a agrandar el título. */
@media (min-width:1800px){
    .hero-copy{
        width:min(690px,46vw) !important;
        max-width:690px !important;
    }

    .hero-copy h1{
        font-size:82px !important;
        max-width:690px !important;
    }

    .hero-subtitle{
        font-size:50px !important;
    }

    .hero{
        min-height:900px !important;
    }

    .hero-slide.is-active,
    .hero-slide__content{
        min-height:900px !important;
    }
}

/* Portátiles: evitamos que el contenido del hero llegue al borde inferior. */
@media (min-width:921px) and (max-height:820px){
    .site-header{
        top:16px !important;
    }

    .hero{
        min-height:760px !important;
    }

    .hero-slide.is-active,
    .hero-slide__content{
        min-height:760px !important;
    }

    .hero-slide__content{
        padding-top:120px !important;
        padding-bottom:55px !important;
    }

    .hero-copy h1{
        font-size:clamp(44px,4.45vw,68px) !important;
    }

    .hero-subtitle{
        font-size:clamp(27px,2.9vw,43px) !important;
    }

    .hero-description{
        margin-top:16px !important;
        font-size:14px !important;
        line-height:1.52 !important;
    }

    .hero-features{
        margin-top:24px !important;
    }
}

/* Tablet y móvil:
   NO aplicamos la reducción tipo 90%.
   Se respetan los breakpoints responsive ya aprobados. */
@media (max-width:920px){
    html{
        zoom:1 !important;
        font-size:100% !important;
    }
}