/* =========================================================
   CRYSTAL CLEANING - NAV BRAND V64
   Nuevo logo PNG transparente + NAV refinado.
   BLINDAJE:
   Esta hoja debe permanecer como la última hoja CSS pública.
   ========================================================= */

:root{
    --cc-navy:#082b55;
    --cc-navy-deep:#061f3e;
    --cc-green:#7fbd26;
    --cc-green-deep:#659d1f;
    --cc-ivory:#f8fbf4;
    --cc-sage:#eef5e8;
    --cc-border:rgba(8,43,85,.10);
}

/* ========================= DESKTOP ========================= */
@media (min-width:921px){

    html body .site-header{
        z-index:9200!important;
    }

    html body .site-header__card,
    html body .site-header__card--modern{
        min-height:92px!important;

        border:1px solid rgba(255,255,255,.72)!important;
        border-radius:25px!important;

        background:
            linear-gradient(
                118deg,
                rgba(250,252,248,.96) 0%,
                rgba(247,251,243,.95) 45%,
                rgba(232,244,219,.95) 100%
            )!important;

        -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
        backdrop-filter:blur(18px) saturate(125%)!important;

        box-shadow:
            0 18px 52px rgba(6,31,62,.13),
            inset 0 1px 0 rgba(255,255,255,.92)!important;

        overflow:visible!important;
    }

    /*
     * NUEVO LOGO:
     * sin caja blanca, sin placa y usando el PNG transparente original.
     */
    html body .site-brand,
    html body .site-brand--modern{
        flex:0 0 auto!important;
        max-width:260px!important;

        display:flex!important;
        align-items:center!important;

        padding:0!important;
        margin:0!important;

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
    }

    html body .site-brand__plate{
        width:250px!important;
        max-width:250px!important;
        height:68px!important;

        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;

        padding:0!important;
        margin:0!important;

        border:0!important;
        border-radius:0!important;

        background:transparent!important;
        box-shadow:none!important;
        overflow:visible!important;
    }

    html body .site-brand__logo{
        display:block!important;

        width:100%!important;
        max-width:250px!important;
        height:auto!important;
        max-height:64px!important;

        object-fit:contain!important;
        object-position:left center!important;

        filter:none!important;
        opacity:1!important;
        transform:none!important;
    }

    /* Menú alineado con el navy del logo */
    html body .site-nav,
    html body .site-nav--modern{
        gap:clamp(20px,1.35vw,30px)!important;
    }

    html body .site-nav a,
    html body .site-nav--modern>a{
        position:relative!important;

        color:var(--cc-navy)!important;

        font-size:14px!important;
        font-weight:650!important;
        letter-spacing:-.01em!important;

        text-shadow:none!important;
    }

    html body .site-nav a:hover,
    html body .site-nav a.is-active{
        color:var(--cc-green-deep)!important;
    }

    html body .site-nav a.is-active::after{
        background:var(--cc-green)!important;
        box-shadow:0 2px 8px rgba(127,189,38,.18)!important;
    }

    /* Acciones del lado derecho */
    html body .nav-clock{
        color:var(--cc-navy)!important;

        border:1px solid rgba(8,43,85,.09)!important;
        background:rgba(255,255,255,.58)!important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.78),
            0 5px 14px rgba(8,43,85,.035)!important;
    }

    html body .nav-clock__icon{
        color:var(--cc-green-deep)!important;
        background:rgba(127,189,38,.12)!important;
    }

    html body .nav-clock strong{
        color:var(--cc-navy-deep)!important;
    }

    html body .nav-clock small{
        color:#698078!important;
    }

    html body .language-switch--modern,
    html body .site-header__portal-link{
        color:var(--cc-navy)!important;

        border:1px solid rgba(8,43,85,.09)!important;
        background:rgba(255,255,255,.54)!important;

        box-shadow:inset 0 1px 0 rgba(255,255,255,.74)!important;
    }

    html body .language-switch--modern a{
        color:#6c7c75!important;
    }

    html body .language-switch--modern a.is-active{
        color:var(--cc-green-deep)!important;
    }

    html body .site-header__portal-link:hover{
        color:var(--cc-green-deep)!important;
        background:rgba(255,255,255,.78)!important;
    }

    html body .site-button--header,
    html body .site-button--nav{
        color:#fff!important;

        border:1px solid rgba(95,145,27,.18)!important;
        background:
            linear-gradient(135deg,var(--cc-green),#6fac22)!important;

        box-shadow:
            0 9px 22px rgba(95,145,27,.20),
            inset 0 1px 0 rgba(255,255,255,.24)!important;
    }

    html body .site-button--header:hover,
    html body .site-button--nav:hover{
        transform:translateY(-1px)!important;
        background:
            linear-gradient(135deg,#8bc731,#69a621)!important;
        box-shadow:0 13px 28px rgba(95,145,27,.25)!important;
    }
}

/* Desktop medio: preserva espacio para menú y CTA */
@media (min-width:921px) and (max-width:1450px){

    html body .site-brand,
    html body .site-brand--modern{
        max-width:220px!important;
    }

    html body .site-brand__plate{
        width:210px!important;
        max-width:210px!important;
        height:62px!important;
    }

    html body .site-brand__logo{
        max-width:210px!important;
        max-height:58px!important;
    }

    html body .site-nav,
    html body .site-nav--modern{
        gap:clamp(15px,1vw,22px)!important;
    }

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

/* Laptop estrecho */
@media (min-width:921px) and (max-width:1180px){

    html body .site-brand,
    html body .site-brand--modern{
        max-width:185px!important;
    }

    html body .site-brand__plate{
        width:178px!important;
        max-width:178px!important;
        height:56px!important;
    }

    html body .site-brand__logo{
        max-width:178px!important;
        max-height:52px!important;
    }

    html body .site-nav,
    html body .site-nav--modern{
        gap:12px!important;
    }

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

/* ========================= MOBILE ========================= */
@media (max-width:920px){

    html body .site-header__card,
    html body .site-header__card--modern{
        border:1px solid rgba(255,255,255,.74)!important;
        border-radius:22px!important;

        background:
            linear-gradient(
                135deg,
                rgba(249,252,246,.97),
                rgba(235,246,223,.96)
            )!important;

        -webkit-backdrop-filter:blur(16px)!important;
        backdrop-filter:blur(16px)!important;

        box-shadow:0 14px 36px rgba(6,31,62,.12)!important;
    }

    html body .site-brand,
    html body .site-brand--modern{
        max-width:190px!important;

        padding:0!important;

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
    }

    html body .site-brand__plate{
        width:180px!important;
        max-width:180px!important;
        height:58px!important;

        padding:0!important;

        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    html body .site-brand__logo{
        width:100%!important;
        max-width:180px!important;
        max-height:54px!important;

        object-fit:contain!important;
        object-position:left center!important;
    }

    html body .nav-toggle,
    html body .nav-toggle--modern{
        border:1px solid rgba(8,43,85,.10)!important;
        color:var(--cc-navy)!important;
        background:rgba(255,255,255,.68)!important;
        box-shadow:0 5px 14px rgba(8,43,85,.05)!important;
    }

    html body .nav-toggle span{
        background:var(--cc-navy)!important;
    }

    html body .site-nav--modern{
        background:
            linear-gradient(180deg,#fbfdf8,#f0f7e8)!important;
    }

    html body .site-nav--modern a{
        color:var(--cc-navy)!important;
    }

    html body .site-nav--modern a:hover,
    html body .site-nav--modern a.is-active{
        color:var(--cc-green-deep)!important;
    }
}

@media (max-width:520px){

    html body .site-brand,
    html body .site-brand--modern{
        max-width:155px!important;
    }

    html body .site-brand__plate{
        width:150px!important;
        max-width:150px!important;
        height:50px!important;
    }

    html body .site-brand__logo{
        max-width:150px!important;
        max-height:46px!important;
    }
}

/* =========================================================
   FOOTER
   El mismo archivo de logo es usado por el footer.
   Allí recibe una base clara discreta para garantizar contraste.
   ========================================================= */
html body .footer-premium__logo-wrap{
    display:inline-flex!important;
    align-items:center!important;

    padding:10px 14px!important;

    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:16px!important;

    background:rgba(255,255,255,.94)!important;

    box-shadow:0 10px 26px rgba(0,0,0,.12)!important;
}

html body .site-footer__logo{
    width:min(100%,300px)!important;
    height:auto!important;
    max-height:80px!important;
    object-fit:contain!important;
}

/* =========================================================
   BLINDAJE
   No volver a agregar fondo blanco a:
   .site-brand__plate
   .site-brand
   El PNG V64 tiene transparencia real.
   ========================================================= */