/* ============================================================
   1. VARIABLES & THEMES
   ============================================================ */
:root {
    --bg:      #F5F2ED;
    --bg2:     #EAE6DF;
    --bg3:     #DEDAD2;
    --fg:      #1A1714;
    --fg2:     #4A4540;
    --fg3:     #8A8178;
    --accent:  #C8553D;
    --accent2: #E8734A;
    --border:  rgba(26,23,20,.18);
    --border-s:rgba(26,23,20,.35);
}
.dark {
    --bg:      #131210;
    --bg2:     #1C1A17;
    --bg3:     #252219;
    --fg:      #F0EDE8;
    --fg2:     #C4BFB6;
    --fg3:     #8E8780;
    --accent:  #E8734A;
    --accent2: #F0957A;
    --border:  rgba(240,237,232,.1);
    --border-s:rgba(240,237,232,.28);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{overflow-x:hidden;scroll-behavior:smooth}

/*
   PERF FIX: font-size explícito evita recálculo cuando Barlow carga.
   size-adjust reduce CLS al hacer el fallback más parecido a Barlow.
*/
@font-face {
    font-family: 'Barlow-fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 20%;
    line-gap-override: 0%;
}

body{
    font-family:'Barlow',Arial,'Barlow-fallback',sans-serif;
    font-size:16px; /* Fijo: evita reflow al cargar la fuente */
    background:var(--bg);
    color:var(--fg);
    transition:background .4s ease,color .4s ease;
    line-height:1.5;
}

a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/*
   PERF FIX: cursor none solo cuando JS está activo y el device tiene hover.
   Inputs conservan cursor nativo (accesibilidad + UX).
*/
@media(hover:hover)and(pointer:fine){
    body.js-loaded,
    body.js-loaded a,
    body.js-loaded button{cursor:none!important}
    body.js-loaded input,
    body.js-loaded textarea,
    body.js-loaded select{cursor:auto!important}
}

/* ============================================================
   3. TYPOGRAPHY & UTILITIES
   ============================================================ */
.sec-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.sec-num{font-size:10px;letter-spacing:.12em;color:var(--accent)}
.tag-pill{
    display:inline-block;padding:4px 12px;background:var(--accent);
    color:#fff;font-size:9px;letter-spacing:.18em;
    text-transform:uppercase;font-weight:700;margin-bottom:36px;
}
.side-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}

/*
   PERF FIX: will-change en elementos animados para promoverlos a su
   propia capa compositing y evitar repaint del documento completo.
   Se aplica solo a .reveal y .clip-inner que usan transform/opacity.
*/
.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .9s ease,transform .9s ease;
    will-change:opacity,transform;
}
.reveal.visible{opacity:1;transform:translateY(0)}
.clip-reveal{overflow:hidden}
.clip-inner{
    transform:translateY(100%);
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}
.clip-inner.visible{transform:translateY(0)}

/* ============================================================
   4. LAYOUT MOBILE-FIRST
   ============================================================ */

/* Nav */
.main-nav{
    position:sticky;top:0;z-index:1000;
    background:var(--bg);border-bottom:1px solid var(--border-s);
    display:flex;flex-wrap:nowrap;
    align-items:center;justify-content:space-between;
    transition:background .4s;
    /*
       PERF FIX: contain layout evita que el sticky nav provoque
       recálculos en el árbol de layout exterior.
    */
    contain:layout style;
}
.nav-logo{
    padding:16px;flex-grow:1;
    display:flex;align-items:center;
}
.nav-logo-img{height:22px;width:auto;display:block}
.dark .nav-logo-img{filter:brightness(0) invert(1)}
.accent-dot{color:var(--accent)}
.lang-wrap{display:flex;border-right:1px solid var(--border-s)}
.lang-btn{
    background:none;border:none;padding:18px 12px;
    font-size:10px;font-weight:700;letter-spacing:.14em;
    color:var(--fg3);transition:all .2s;min-height:48px;
}
.lang-btn.active,.lang-btn:hover{color:var(--accent)}
.nav-cta{display:none}
.theme-btn{
    padding:18px 16px;font-size:16px;color:var(--fg2);
    background:none;border:none;transition:color .3s;min-height:48px;
}
.theme-btn:hover{color:var(--accent)}

/* Hero */
.hero-section{
    /*
       CLS FIX: min-height fijo en px en lugar de vh para que el
       navegador reserve espacio antes de conocer el viewport height.
       En mobile 80vh ≈ 560px; usamos 560px como mínimo.
    */
    min-height:560px;
    display:flex;flex-direction:column;justify-content:center;
    padding:120px 16px 64px;
    border-bottom:1px solid var(--border-s);
    position:relative;
}
.hero-lines-container{
    /*
       CLS FIX: min-height reserva espacio para las 4 líneas de texto
       ANTES de que la fuente Barlow Condensed cargue.
       clamp(52px,12vw,138px) * 4 líneas * line-height 0.88 ≈ 200px min.
    */
    min-height:200px;
}
.hero-clip{overflow:hidden;line-height:.88}
.hero-word{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;
    font-size:clamp(52px,12vw,138px);
    text-transform:uppercase;
    letter-spacing:-.025em;
    transform:translateY(112%);
    transition:color .4s;
    will-change:transform;
    display:block;
}
.hero-word.accent{color:var(--accent)}
.hero-cta-wrap{
    margin-top:36px;display:flex;flex-direction:column;
    gap:14px;width:100%;
    /*
       CLS FIX: altura mínima reservada para los dos botones.
    */
    min-height:120px;
}
.hero-btn-primary,.hero-btn-secondary{
    display:inline-flex;align-items:center;justify-content:center;
    width:100%;min-height:48px;padding:16px 24px;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    font-weight:700;transition:all .2s;
}
.hero-btn-primary{background:var(--accent);color:#fff}
.hero-btn-primary:hover{background:var(--fg);transform:translateY(-2px)}
.hero-btn-secondary{border:1px solid var(--border-s);color:var(--fg2)}
.hero-btn-secondary:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hero-sub{
    margin-top:40px;border-top:1px solid var(--border-s);
    display:flex;flex-direction:column;
}
.hero-sub-item{
    padding:18px 0;font-size:12px;line-height:1.6;
    color:var(--fg2);border-bottom:1px solid var(--border-s);
    min-height:56px; /* CLS FIX */
}
.hero-sub-item:last-child{border-bottom:none}

/* Marquee */
.marquee-wrapper{
    border-bottom:1px solid var(--border-s);overflow:hidden;
    padding:16px 0;background:var(--fg);
    /*
       PERF FIX: contain:strict para el marquee — no afecta al layout exterior.
    */
    contain:strict;
    height:44px; /* CLS FIX: altura fija */
}
.marquee-track{
    display:flex;
    animation:marquee 28s linear infinite;
    white-space:nowrap;
    will-change:transform;
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{
    font-size:10px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--bg);padding:0 36px;
    transition:color .4s;
}

/* Stats */
.stats-strip{
    display:grid;grid-template-columns:1fr;
    border-bottom:1px solid var(--border-s);
    /*
       CLS FIX: min-height para que la grid tenga espacio reservado
       antes de que JS haga visible las celdas.
    */
    min-height:96px;
}
.stat-cell{
    padding:24px 16px;border-bottom:1px solid var(--border-s);
    border-right:none;
}
.stat-cell:last-child{border-bottom:none}
.stat-num{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(32px,8vw,64px);
    color:var(--accent);line-height:1;
}
.stat-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin-top:8px}

/* Manifesto */
.manifesto-side{padding:18px 16px;border-bottom:1px solid var(--border-s)}
.manifesto-content{padding:40px 16px;border-bottom:1px solid var(--border-s)}
.manifesto-title-wrap h2{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(28px,8vw,62px);
    text-transform:uppercase;line-height:1;margin:20px 0;
    min-height:40px; /* CLS FIX */
}
.manifesto-body{font-size:14px;line-height:1.8;color:var(--fg2)}

/* Section headers */
.sec-hdr{
    padding:20px 16px;border-bottom:1px solid var(--border-s);
    display:flex;justify-content:space-between;align-items:center;
}

/* Services */
.svc-card{
    border-bottom:1px solid var(--border-s);
    position:relative;overflow:hidden;transition:background .35s;
    contain:layout; /* PERF FIX */
}
.svc-card-header{
    display:grid;grid-template-columns:40px 1fr;
    align-items:center;padding:0 16px;position:relative;z-index:1;
}
.svc-card-header::before{
    content:'';position:absolute;left:0;top:0;bottom:0;
    width:0;background:var(--fg);transition:width .4s ease;z-index:-1;
}
.svc-card:hover .svc-card-header::before{width:100%}
.svc-num,.svc-name{padding:20px 0;transition:color .3s}
.svc-name{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(18px,5vw,38px);
    text-transform:uppercase;
}
.svc-tag{
    display:block;font-size:9px;color:var(--fg3);
    margin-top:-10px;padding-bottom:20px;grid-column:2;
}
.svc-toggle{display:none}
.svc-card:hover .svc-num,.svc-card:hover .svc-name{color:var(--bg)}
.svc-card:hover .svc-tag{color:var(--accent2)}

.svc-panel{max-height:0;overflow:hidden;transition:max-height .5s ease;background:var(--bg2)}
.svc-card.open .svc-panel{max-height:800px}
.svc-panel-inner{padding:24px 16px;display:flex;flex-direction:column;gap:20px}
.svc-includes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc-include-tag{
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 8px;border:1px solid var(--border-s);color:var(--fg3);font-weight:700;
}
.svc-price-value{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:24px;color:var(--accent);
}
.svc-cta-btn{
    display:inline-block;margin-top:16px;padding:10px 20px;
    background:var(--accent);color:#fff;font-size:10px;
    font-weight:700;text-transform:uppercase;
}

/* Process */
.process-grid{display:grid;grid-template-columns:1fr}
.process-step{padding:32px 16px;border-bottom:1px solid var(--border-s)}
.process-step:last-child{border-bottom:none}
.process-step-num{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:11px;letter-spacing:.18em;
    color:var(--accent);margin-bottom:16px;
}
.process-step-title{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(20px,4vw,28px);
    text-transform:uppercase;line-height:1;margin-bottom:12px;
}
.process-step-desc{font-size:13px;color:var(--fg2);line-height:1.7}

/* Process micro-CTA */
.process-cta{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 16px;border-bottom:1px solid var(--border-s);gap:16px;
}
.process-cta-link{
    font-size:10px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent);
    white-space:nowrap;transition:color .2s;
}
.process-cta-link:hover{color:var(--fg)}

/* CTA Banner */
.cta-banner{
    background:var(--fg);padding:48px 16px;
    display:flex;flex-direction:column;gap:24px;
    border-bottom:1px solid var(--border-s);
}
.cta-banner-headline{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(28px,8vw,62px);
    text-transform:uppercase;color:var(--bg);line-height:1;
}
.cta-banner-headline span{color:var(--accent2)}
.cta-big-btn{
    display:inline-block;padding:16px 24px;
    background:var(--accent);color:#fff;font-size:10px;
    font-weight:700;text-transform:uppercase;text-align:center;
    width:100%;min-height:48px;
}

/* Footer */
.footer-grid{display:flex;flex-direction:column}
.footer-main{order:-1}
.footer-side{
    padding:32px 16px 88px;border-top:1px solid var(--border-s);
    display:flex;justify-content:space-between;align-items:center;
}
.footer-logo{display:flex;align-items:center}
.footer-logo-img{height:26px;width:auto;display:block}
.dark .footer-logo-img{filter:brightness(0) invert(1)}
.footer-main{padding:48px 16px;position:relative}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;
    color:var(--fg2);
    transition:color .2s;
}
.footer-social a:hover{color:var(--accent)}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.email-link{
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:900;font-size:clamp(24px,8vw,52px);
    text-transform:uppercase;color:var(--fg);
    display:block;margin-top:16px;
}

/* Barra sticky WhatsApp móvil */
.mob-wa-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:950;
    align-items:center;justify-content:center;gap:10px;
    background:var(--accent);color:#fff;
    padding:0 20px;min-height:54px;
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;
    transition:background .2s;
}
.mob-wa-bar:hover{background:var(--fg)}
.mob-wa-icon{width:20px;height:20px;fill:currentColor;flex-shrink:0}

/* Flecha manuscrita — oculta por defecto (solo desktop) */
.wa-arrow-fixed{display:none}

/* Botón flotante WA — oculto en móvil (sustituido por barra sticky) */
.wa-float{display:none!important}

/* ============================================================
   5. MEDIA QUERIES (Desktop ≥768px)
   ============================================================ */
@media(min-width:768px){
    /* Nav */
    .main-nav{display:grid;grid-template-columns:1fr auto auto auto}
    .nav-logo{padding:16px 28px}
    .lang-wrap{border-left:none}
    .lang-btn{padding:16px 18px;border-right:1px solid var(--border);min-height:auto}
    .lang-btn:last-child{border-right:none}
    .nav-cta{
        display:flex;align-items:center;padding:0 20px;
        font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
        color:var(--accent);border-left:1px solid var(--border-s);
        transition:background .2s,color .2s;
    }
    .nav-cta:hover{background:var(--accent);color:#fff}
    .theme-btn{border-left:1px solid var(--border-s);min-height:auto}
    .mob-wa-bar{display:none}
    .wa-float{display:inline-flex!important}

    /* Hero */
    .hero-section{
        padding:10px 28px 40px;
        min-height:100vh;
        justify-content:flex-start;
    }
    .hero-lines-container{min-height:320px} /* CLS FIX desktop */
    .wa-arrow-fixed{
        display:flex;flex-direction:column;align-items:flex-start;
        position:absolute;bottom:215px;right:145px;z-index:10;
        color:var(--accent);
        animation:wa-arrow-float 2.6s ease-in-out infinite;
    }
    .hero-cta-wrap{flex-direction:row;width:auto;min-height:auto}
    .hero-btn-primary,.hero-btn-secondary{width:auto;justify-content:flex-start;min-height:auto}
    .cta-big-btn,.form-submit{width:auto;justify-content:flex-start;min-height:auto}
    .hero-sub{flex-direction:row}
    .hero-sub-item{flex:1;border-bottom:none;min-height:auto}
    .hero-sub-item:first-child{border-right:1px solid var(--border-s);padding-right:32px}
    .hero-sub-item:last-child{padding-left:32px}

    /* Stats */
    .stats-strip{grid-template-columns:repeat(3,1fr);min-height:auto}
    .stat-cell{border-bottom:none;border-right:1px solid var(--border-s);padding:36px 28px}
    .stat-cell:last-child{border-right:none}

    /* Manifesto grid */
    .manifesto-grid{display:grid;grid-template-columns:180px 1fr}
    .manifesto-side{
        padding:48px 24px;border-right:1px solid var(--border-s);border-bottom:none;
        writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;
    }
    .manifesto-content{padding:64px 48px}
    .sec-hdr{padding:26px 28px}

    /* Services */
    .svc-card-header{grid-template-columns:52px 1fr auto;padding:0 28px}
    .svc-tag{display:inline;margin-top:0;padding-bottom:0;grid-column:auto;text-align:right}
    .svc-toggle{display:inline;font-size:18px;margin-left:16px;transition:transform .3s}
    .svc-card.open .svc-toggle{transform:rotate(45deg);color:var(--accent2)}
    .svc-panel-inner{flex-direction:row;justify-content:space-between;padding:32px 28px 36px 80px;align-items:start}
    .svc-price-block{text-align:right;flex-shrink:0}

    /* Process */
    .process-cta{padding:20px 28px}
    .process-grid{grid-template-columns:repeat(4,1fr)}
    .process-step{padding:48px 28px;border-bottom:none;border-right:1px solid var(--border-s)}
    .process-step:last-child{border-right:none}

    /* Banner */
    .cta-banner{flex-direction:row;justify-content:space-between;align-items:center;padding:64px 28px}

    /* Footer */
    .footer-grid{display:grid;grid-template-columns:180px 1fr;min-height:36vh}
    .footer-side{
        flex-direction:column;align-items:flex-start;
        padding:44px 24px;border-right:1px solid var(--border-s);border-top:none;border-bottom:none;
    }
    .footer-main{
        order:0;padding:44px 48px;display:flex;flex-direction:column;
        justify-content:center;overflow:hidden;transition:background .3s;
    }
    .footer-main:hover{background:var(--fg)}
    .footer-main:hover .email-link{color:var(--bg)}
    .foot-bar{
        position:absolute;bottom:0;left:0;right:0;height:3px;
        background:var(--accent);transform:scaleX(0);
        transition:transform .5s;transform-origin:left;
    }
    .footer-main:hover .foot-bar{transform:scaleX(1)}
}

/* ============================================================
   6. WHATSAPP
   ============================================================ */
.wa-float{
    position:fixed;bottom:24px;right:20px;z-index:900;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);color:#fff;
    padding:14px 20px;
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    opacity:0;pointer-events:none;
    transition:opacity .5s ease,background .2s,color .2s,transform .2s;
    will-change:opacity;
    text-decoration:none;
}
.wa-float.visible{opacity:1;pointer-events:auto}
.wa-float:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}
.wa-icon{width:16px;height:16px;fill:currentColor;flex-shrink:0}

/* Hand-drawn arrow */
.wa-arrow-label{
    font-family:'Caveat',cursive;
    font-size:30px;font-weight:600;
    line-height:1.2;margin-bottom:0;
    white-space:normal;max-width:220px;
}

/* ============================================================
   7. CUSTOM CURSOR (solo desktop con mouse)
   ============================================================ */
@media(hover:hover)and(pointer:fine){
    #cur,#cur-ring{
        display:block;position:fixed;pointer-events:none;
        z-index:9999;transform:translate(-50%,-50%);border-radius:50%;
    }
    #cur{
        width:10px;height:10px;background:var(--accent);
        transition:width .15s,height .15s,background .3s;
        will-change:left,top; /* PERF FIX: cursor en su propia capa */
    }
    #cur-ring{
        width:36px;height:36px;border:1.5px solid var(--accent);
        opacity:.55;transition:border-color .3s,width .2s,height .2s;
        z-index:9998;will-change:left,top;
    }
    #cur.big{width:56px;height:56px;background:transparent;border:1.5px solid var(--accent)}
}
@media(hover:none)or(pointer:coarse){
    #cur,#cur-ring{display:none!important}
}