/*
Theme Name: ABITA Custom 2026
Theme URI: https://abitaglamp.com
Author: ABITA by Solideas
Author URI: https://abitaglamp.com
Description: Tema a medida para ABITA — cabañas modulares premium. "ABITA Nocturne": rediseño cinematográfico oscuro con bento grid de modelos, pop-ups de ficha técnica, acento ámbar de hora dorada, tipografía Bricolage Grotesque + Fraunces, motion con carácter y CTAs a WhatsApp. Copy en español (Perú).
Version: 3.25.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abita
Tags: business, landing, dark, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ============================================================
   ABITA NOCTURNE — sistema cinematográfico oscuro
   taste-frontend (VARIANCE 9 / MOTION 8 / DENSITY 3) · ui-ux-pro-max · emil
   Fuentes: Bricolage Grotesque (display) · Hanken Grotesk (texto) · Fraunces (acento itálico)
   ============================================================ */

:root{
  --ink:    #15120D;   /* fondo (negro cálido) */
  --ink-2:  #1C1811;   /* superficie elevada */
  --ink-3:  #241E16;   /* tarjetas */
  --cream:  #F3ECDD;   /* texto principal */
  --amber:  #A3B85C;   /* acento de firma (hora dorada) */
  --amber-2:#C2D27D;   /* ámbar claro */
  --amber-ink:#13160A;  /* texto sobre ámbar */
  --sage:   #93A083;   /* verde naturaleza (sutil) */

  --muted:   rgba(243,236,221,.64);
  --muted-2: rgba(243,236,221,.42);
  --line:    rgba(243,236,221,.12);
  --line-2:  rgba(243,236,221,.22);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans:    'Hanken Grotesk', system-ui, sans-serif;
  --serif:   'Fraunces', Georgia, 'Times New Roman', serif;

  --maxw: 1340px;
  --gutter: clamp(20px,5vw,80px);
  --nav-h: 76px;
  --r: 18px;
  --r-lg: 26px;
  --ease: cubic-bezier(.23,1,.32,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--ink);color:var(--cream);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--amber);color:var(--amber-ink)}
:where(section[id]){scroll-margin-top:90px}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* grano sutil */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(80px,12vw,170px);position:relative}
.eyebrow{
  font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"\25B2";font-size:.7em;color:var(--amber);transform:translateY(-1px)}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.0;letter-spacing:-.025em}
.section-head{max-width:780px}
.section-head h2{font-size:clamp(2.3rem,5.2vw,4.6rem);margin-top:1.2rem}
.section-head p{margin-top:1.4rem;color:var(--muted);font-size:1.12rem;max-width:56ch;text-wrap:pretty}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:600;
  font-size:.94rem;letter-spacing:-.01em;padding:1.05em 1.75em;border-radius:100px;
  transition:transform .2s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .3s var(--ease);white-space:nowrap}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary,.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 40px -14px rgba(163,184,92,.7)}
.btn-primary:hover,.btn-amber:hover{background:var(--amber-2);box-shadow:0 14px 50px -12px rgba(163,184,92,.85)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-ghost-light{border:1px solid var(--line-2);color:var(--cream);background:rgba(243,236,221,.03)}
.btn-ghost-light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-wa{background:var(--sage);color:var(--ink)}
.btn-wa:hover{background:#a7b497}
.link-arrow{font-family:var(--display);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.6em;
  padding-bottom:.3em;border-bottom:1px solid var(--line-2);transition:gap .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.link-arrow:hover{gap:1em;border-color:var(--amber);color:var(--amber)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .66s var(--ease),transform .66s var(--ease);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* skip link */
.skip-link{position:fixed;top:-120px;left:1rem;z-index:200;background:var(--amber);color:var(--amber-ink);
  padding:.75em 1.2em;border-radius:100px;font-family:var(--display);font-weight:600;font-size:.9rem;transition:top .2s var(--ease)}
.skip-link:focus{top:1rem}

/* ============================================================ NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav.solid{background:rgba(21,18,13,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line);height:64px}
.logo{display:flex;align-items:center}
.logo .logo-img{height:40px;width:auto;display:block}
.logo .logo-carbon{display:none!important}
.nav-links{display:flex;align-items:center;gap:2.3rem}
.nav-links a{font-family:var(--display);font-weight:500;font-size:.94rem;color:var(--cream);opacity:.82;position:relative;padding-block:.4em;transition:opacity .3s var(--ease),color .3s var(--ease)}
.nav-links a:hover{opacity:1;color:var(--amber)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--amber);transition:width .35s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav .btn-quote{background:var(--amber);color:var(--amber-ink);padding:.7em 1.3em;font-size:.88rem;border-radius:100px;font-family:var(--display);font-weight:600;transition:transform .2s var(--ease),background .25s var(--ease)}
.nav .btn-quote:hover{background:var(--amber-2)}
.nav .btn-quote:active{transform:scale(.96)}
.burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px}
.burger span{height:1.6px;width:24px;background:var(--cream);transition:.4s var(--ease)}
.drawer{position:fixed;inset:0;z-index:55;background:var(--ink-2);display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:var(--gutter);transform:translateY(-100%);transition:transform .5s var(--ease-drawer)}
.drawer.open{transform:none}
.drawer a{font-family:var(--display);font-weight:600;color:var(--cream);font-size:2rem;padding:.55rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer a .n{font-size:.8rem;color:var(--amber);font-weight:500}
.drawer .btn{margin-top:2rem;justify-content:center}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 80% 10%, rgba(163,184,92,.18) 0%, transparent 45%),
  linear-gradient(to top, var(--ink) 2%, rgba(21,18,13,.55) 38%, rgba(21,18,13,.15) 62%, rgba(21,18,13,.5) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(52px,8vw,110px);padding-top:120px}
.hero-eyebrow{color:var(--amber)}
.hero h1{color:var(--cream);font-size:clamp(3.2rem,9.5vw,9.5rem);font-weight:800;margin-top:1.4rem;max-width:15ch;letter-spacing:-.035em;text-wrap:balance;line-height:.92;
  opacity:0;animation:heroIn .9s var(--ease) .15s both}
.hero h1 .serif{font-weight:500;letter-spacing:-.01em;color:var(--amber)}
.hero p.sub{color:var(--muted);font-size:clamp(1.05rem,1.7vw,1.34rem);margin-top:1.8rem;max-width:46ch;line-height:1.55;opacity:0;animation:heroIn .9s var(--ease) .42s both}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;opacity:0;animation:heroIn .9s var(--ease) .62s both}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scroll-hint{position:absolute;right:var(--gutter);bottom:clamp(40px,6vw,72px);z-index:2;display:flex;align-items:center;gap:.8rem;color:var(--muted);font-family:var(--display);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-hint .bar{width:1px;height:54px;background:linear-gradient(var(--amber),transparent);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--amber);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{top:-50%}60%,100%{top:100%}}

/* ============================================================ STATS */
.stats{background:var(--ink-2);border-block:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(34px,4vw,60px) clamp(20px,3vw,46px);border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .num{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .num .u{color:var(--amber);font-size:.5em;font-weight:600}
.stat .lbl{margin-top:.7rem;color:var(--muted);font-size:.92rem}

/* ============================================================ MARQUEE */
.marquee{background:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;white-space:nowrap;padding:1.05rem 0;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.marquee-item i{color:var(--amber);font-style:normal;margin:0 1.4rem;font-size:.6em;transform:translateY(-2px)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================ MODELOS · BENTO */
.modelos{background:var(--ink)}
.modelos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.modelos-head h2{font-family:var(--display);font-size:clamp(2.3rem,5.2vw,4.6rem);margin-top:1.1rem;line-height:.98;letter-spacing:-.025em}
.bento{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  grid-template-areas:"py py su su" "py py mi mi" "ri ri al al"}
.b-py{grid-area:py}.b-su{grid-area:su}.b-mi{grid-area:mi}.b-ri{grid-area:ri}.b-al{grid-area:al}
.tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:230px;background:var(--ink-3);
  border:1px solid var(--line);text-align:left;width:100%;color:var(--cream);cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.b-py.tile{min-height:480px}
.tile:hover{transform:translateY(-4px);border-color:rgba(163,184,92,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(163,184,92,.25)}
.tile-img{position:absolute;inset:0}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile:hover .tile-img img{transform:scale(1.06)}
.tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,11,7,.92) 0%,rgba(13,11,7,.45) 42%,rgba(13,11,7,.05) 75%)}
.tile-tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--amber);color:var(--amber-ink);font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em .8em;border-radius:100px}
.tile-body{position:relative;z-index:2;margin-top:auto;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;height:100%;justify-content:flex-end}
.tile-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.tile-body h3{font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em}
.b-py .tile-body h3{font-size:clamp(2rem,3vw,3rem)}
.tile-body .m2{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--muted)}
.tile-desc{margin-top:.5rem;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:42ch}
.b-py .tile-desc{font-size:1.05rem}
.tile-foot{margin-top:1.1rem;display:flex;justify-content:space-between;align-items:flex-end}
.tile-foot .price small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display);font-weight:600}
.tile-foot .price b{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.02em;color:var(--amber);font-variant-numeric:tabular-nums}
.tile-foot .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:.4s var(--ease)}
.tile:hover .tile-foot .go{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}

/* ============================================================ PILARES (Nosotros) */
.pilares{background:var(--ink-2)}
.pilares-top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:end}
.pilares-top .lead{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.28;letter-spacing:-.01em;color:var(--cream);text-wrap:pretty}
.pilares-top .lead em{color:var(--amber)}
.pilares-grid{margin-top:clamp(48px,6vw,82px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pilar{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,2.2vw,38px);display:flex;flex-direction:column;min-height:300px;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.pilar:hover{border-color:var(--line-2);transform:translateY(-4px)}
.pilar .idx{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--amber)}
.pilar .ic{margin-top:auto;width:34px;height:34px;color:var(--amber)}
.pilar h3{font-size:1.5rem;margin-top:1.5rem}
.pilar p{margin-top:.8rem;color:var(--muted);font-size:1rem;line-height:1.55}

/* ============================================================ SISTEMA */
.sistema{background:var(--ink);overflow:hidden}
.sistema-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.sistema h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-top:1.1rem}
.sistema h2 .serif{color:var(--amber)}
.sistema p.body{margin-top:1.5rem;color:var(--muted);font-size:1.1rem;max-width:48ch}
.sip{position:relative;aspect-ratio:5/5.2;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(26px,3vw,46px)}
.sip-layer{position:relative;border-radius:8px;display:flex;align-items:center;padding:0 1.2rem;font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--amber-ink);box-shadow:0 6px 18px -10px rgba(0,0,0,.6);white-space:nowrap}
.sip-layer span.t{margin-left:auto;font-weight:500;color:rgba(26,20,11,.6);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.sl-steel{height:52px;background:repeating-linear-gradient(90deg,#b9ad96 0 7px,#a89c84 7px 9px)}
.sl-osb{height:30px;background:#d8b886}
.sl-eps{height:96px;background:repeating-linear-gradient(45deg,#efe6d4 0 9px,#e6dcc6 9px 18px)}
.sl-osb2{height:30px;background:#d8b886}
.sl-skin{height:42px;background:var(--ink);color:var(--cream);border:1px solid var(--line-2)}
.sip-gap{height:10px}.sip-brace,.sip-cap{display:none}
.thermo-badge{position:absolute;left:clamp(26px,3vw,46px);bottom:clamp(20px,2.4vw,32px);display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.8rem;font-family:var(--display);letter-spacing:.06em}
.thermo-badge svg{color:var(--amber)}

/* acordeón */
.abita-acc{margin-top:2.2rem;border-top:1px solid var(--line)}
.abita-acc .acc-item{border-bottom:1px solid var(--line)}
.abita-acc .acc-head{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;color:inherit;cursor:pointer;padding:1.15rem 0;font-family:var(--display)}
.abita-acc .acc-swatch{width:26px;height:8px;flex:none;border-radius:2px}
.abita-acc .acc-title{font-weight:600;font-size:1.08rem;letter-spacing:-.01em;transition:color .3s var(--ease)}
.abita-acc .acc-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}
.abita-acc .acc-icon{margin-left:auto;position:relative;width:15px;height:15px;flex:none;opacity:.7}
.abita-acc .acc-icon::before,.abita-acc .acc-icon::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.abita-acc .acc-icon::before{top:50%;left:0;width:100%;height:1.6px;transform:translateY(-50%)}
.abita-acc .acc-icon::after{left:50%;top:0;width:1.6px;height:100%;transform:translateX(-50%);transition:transform .3s var(--ease)}
.abita-acc .acc-item.open .acc-icon::after{transform:translateX(-50%) scaleY(0)}
.abita-acc .acc-head:hover .acc-title{color:var(--amber)}
.abita-acc .acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.abita-acc .acc-item.open .acc-panel{grid-template-rows:1fr}
.abita-acc .acc-panel-inner{overflow:hidden;min-height:0}
.abita-acc .acc-panel-inner p{padding-bottom:1.1rem;font-size:.98rem;line-height:1.55;color:var(--muted);max-width:60ch}
.abita-acc .acc-panel-inner .core{padding-bottom:1.2rem;font-size:.85rem;color:var(--muted-2);display:flex;align-items:center;gap:.5rem}
.abita-acc .acc-panel-inner .core b{color:var(--cream);font-family:var(--display);font-weight:600}
.acc-swatch.sw-c1{background:var(--cream)}.acc-swatch.sw-c2{background:linear-gradient(90deg,#c9bda6,#9b8f78)}.acc-swatch.sw-c3{background:var(--amber)}

/* ============================================================ INVERSIÓN */
.inversion{background:var(--ink-2)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.inv-fig{position:relative}
.inv-fig img{width:100%;aspect-ratio:4/4.5;object-fit:cover;border-radius:var(--r-lg)}
.inv-fig .float{position:absolute;left:-8%;bottom:8%;background:var(--amber);color:var(--amber-ink);padding:1.5rem 1.8rem;border-radius:var(--r);box-shadow:0 30px 60px -28px rgba(163,184,92,.6);max-width:260px}
.inv-fig .float .big{font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.inv-fig .float .big .u{font-size:.45em;font-weight:600;opacity:.7}
.inv-fig .float p{margin-top:.5rem;color:rgba(26,20,11,.8);font-size:.86rem;line-height:1.45}
.inv-copy h2{font-size:clamp(2.2rem,4.4vw,3.9rem)}
.inv-copy h2 .serif{color:var(--amber)}
.inv-copy>p{margin-top:1.5rem;color:var(--muted);font-size:1.1rem;max-width:50ch}
.inv-points{margin-top:2.2rem;display:flex;flex-direction:column;gap:1.3rem}
.inv-point{display:flex;gap:1.1rem;align-items:flex-start}
.inv-point .dot{margin-top:.45em;width:9px;height:9px;background:var(--amber);flex:none;border-radius:50%}
.inv-point b{font-family:var(--display);font-weight:600;font-size:1.05rem}
.inv-point span{display:block;color:var(--muted);font-size:.98rem;margin-top:.2rem}

/* ============================================================ PROCESO */
.proceso{background:var(--ink)}
.proceso .eyebrow{color:var(--amber)}
.proceso-grid{margin-top:clamp(46px,6vw,76px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,2.2vw,38px);min-height:270px;display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.step:hover{border-color:rgba(163,184,92,.4);transform:translateY(-4px)}
.step .n{font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:-.03em;color:var(--amber);line-height:1}
.step h3{font-size:1.3rem;margin-top:1.6rem}
.step p{margin-top:.7rem;color:var(--muted);font-size:.97rem;line-height:1.5}
.step .ln{margin-top:auto;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}

/* ============================================================ ACABADOS */
.acabados{background:var(--ink-2)}
.acabados .abita-acc{max-width:880px}

/* ============================================================ GALERÍA */
.galeria{background:var(--ink);padding-block:clamp(80px,12vw,150px)}
.gal-strip{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-rows:clamp(150px,15vw,230px)}
.gal-strip figure{overflow:hidden;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.gal-strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal-strip figure:hover img{transform:scale(1.06)}
.g1{grid-column:span 5;grid-row:span 2}.g2{grid-column:span 4}.g3{grid-column:span 3}.g4{grid-column:span 4}.g5{grid-column:span 3}

/* ============================================================ CTA */
.cta{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(100% 80% at 75% 30%, rgba(163,184,92,.22) 0%, transparent 50%),
  linear-gradient(90deg,rgba(13,11,7,.95) 0%,rgba(13,11,7,.78) 45%,rgba(13,11,7,.35) 75%,rgba(13,11,7,.1) 100%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(2.8rem,6.5vw,6rem);margin-top:1.3rem;max-width:13ch;letter-spacing:-.03em;line-height:.95}
.cta h2 .serif{color:var(--amber)}
.cta p{color:var(--muted);font-size:1.18rem;margin-top:1.5rem;max-width:42ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}

/* ============================================================ FOOTER */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,90px);padding-bottom:2.4rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(30px,4vw,60px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.foot-brand .logo .logo-img{height:46px}
.foot-brand p{margin-top:1.4rem;color:var(--muted);font-size:.96rem;max-width:34ch;line-height:1.55}
.foot-col h4{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:1.3rem}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.98rem;padding:.32rem 0;transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2rem;color:var(--muted-2);font-size:.82rem}
.foot-social{display:flex;gap:1.2rem}
.foot-social a{color:var(--muted);font-family:var(--display);font-weight:500;transition:color .3s var(--ease)}
.foot-social a:hover{color:var(--amber)}

/* ============================================================ MODAL */
body.abita-modal-open{overflow:hidden}
.abita-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);
  background:rgba(8,6,4,.7);visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .34s var(--ease),visibility 0s linear .34s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.abita-modal.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .34s var(--ease),visibility 0s}
.abita-modal__overlay{position:absolute;inset:0;cursor:pointer}
.abita-modal__panel{position:relative;z-index:1;background:var(--ink-2);border:1px solid var(--line-2);width:min(620px,100%);max-height:min(92vh,940px);overflow:hidden;
  display:flex;flex-direction:column;border-radius:var(--r-lg);box-shadow:0 50px 100px -30px rgba(0,0,0,.8);
  transform:translateY(16px) scale(.99);transition:transform .44s var(--ease)}
.abita-modal.open .abita-modal__panel{transform:none}
.abita-modal__media{position:relative;background:var(--ink-3);flex:none}
.abita-modal__media .model-tag,.abita-modal__media .tile-tag{position:absolute;top:16px;left:16px;z-index:2;background:var(--amber);color:var(--amber-ink);font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em .8em;border-radius:100px}
.abita-modal__close{position:absolute;top:14px;right:14px;z-index:6;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--cream);border:1px solid var(--line-2);font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.abita-modal__close:hover{background:var(--amber);color:var(--amber-ink);transform:rotate(90deg)}
.abita-modal__close:active{transform:scale(.92) rotate(90deg)}
.abita-modal__content{padding:clamp(24px,3vw,38px);overflow-y:auto;flex:1 1 auto;min-height:0}
.abita-modal__content .eyebrow{margin-bottom:.2rem}
.abita-modal__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem}
.abita-modal__head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.02em;line-height:1}
.abita-modal__head .price{text-align:right;flex:none}
.abita-modal__head .price small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display);font-weight:600}
.abita-modal__head .price b{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;color:var(--amber);font-variant-numeric:tabular-nums}
.abita-modal__desc{margin-top:1.1rem;color:var(--muted);font-size:1.02rem;line-height:1.6}
.abita-modal__quick{margin-top:1.7rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.abita-modal__quick>div{background:var(--ink-3);padding:.95rem 1.05rem}
.abita-modal__quick span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display);font-weight:600}
.abita-modal__quick b{display:block;margin-top:.3rem;font-family:var(--display);font-weight:600;font-size:.96rem;letter-spacing:-.01em;line-height:1.25}
.abita-modal__specs{margin-top:1.8rem}
.abita-modal__specs h4{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:.6rem}
.abita-modal__specs .spec{display:grid;grid-template-columns:128px 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:.91rem}
.abita-modal__specs .spec span:first-child{color:var(--muted-2);font-family:var(--display);font-weight:600}
.abita-modal__specs .spec span:last-child{color:var(--muted)}
.abita-modal__note{margin-top:1rem;font-size:.78rem;color:var(--muted-2);line-height:1.45}
.abita-modal__cta{margin-top:1.7rem}
.abita-modal__cta .btn{width:100%;justify-content:center}

/* ============================================================ WHATSAPP FLOAT */
.wa-float{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 32px -8px rgba(0,0,0,.5);transition:transform .2s var(--ease),box-shadow .35s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float:active{transform:scale(.93)}
.wa-float svg{width:30px;height:30px;position:relative;z-index:2}
.wa-float .wa-pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;animation:waPulse 2.6s var(--ease) infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.85);opacity:0}}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .pilares-grid,.proceso-grid{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-areas:"py py" "su mi" "ri al";grid-template-columns:repeat(2,1fr)}
  .b-py.tile{min-height:380px}
  .gal-strip{grid-auto-rows:clamp(130px,22vw,200px)}
}
@media (max-width:860px){
  .nav-links,.nav .nav-cta .btn-quote{display:none}
  .burger{display:flex}
  .sistema-grid,.inv-grid{grid-template-columns:1fr}
  .sip{order:-1;max-width:440px}
  .inv-fig .float{left:auto;right:4%;bottom:-6%}
  .pilares-top{grid-template-columns:1fr;gap:1.5rem}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .gal-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;grid-auto-rows:auto}
  .gal-strip figure{flex:0 0 78%;height:clamp(220px,60vw,340px);scroll-snap-align:start}
}
@media (max-width:680px){
  .stats-grid,.pilares-grid,.proceso-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stats-grid::-webkit-scrollbar,.pilares-grid::-webkit-scrollbar,.proceso-grid::-webkit-scrollbar{display:none}
  .stats-grid>*,.pilares-grid>*,.proceso-grid>*{scroll-snap-align:start;flex:0 0 auto}
  .stat{flex-basis:46%;border-left:none}
  .pilar{flex-basis:80%}.step{flex-basis:78%}
  .bento{display:grid;grid-template-areas:none;grid-template-columns:repeat(2,1fr)}
  .bento .tile,.b-py.tile{grid-area:auto!important;min-height:210px}
  .b-py.tile{grid-column:1/-1;min-height:320px}
  .tile-body h3,.b-py .tile-body h3{font-size:1.2rem}
  .tile-desc{display:none}
  .hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}
  .scroll-hint{display:none}
  .abita-modal__panel{max-height:92vh}
  .inv-fig .float{position:static;max-width:none;margin-top:1rem}
  .section{padding-block:clamp(64px,16vw,90px)}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero h1,.hero p.sub,.hero-actions{animation:none;opacity:1}
  .hero-bg img{animation:none;transform:none}
  .marquee-track,.wa-float .wa-pulse,.scroll-hint .bar::after{animation:none}
  .abita-acc .acc-panel{transition:none}
}

/* ---- bento: layout fix ---- */
.tile{display:flex;flex-direction:column;justify-content:flex-end}
.tile-body{margin-top:0;height:auto}
.tile .model-open{position:absolute;inset:0;z-index:5;width:100%;height:100%;background:none;border:0;cursor:pointer;padding:0}
.tile .model-open:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}

/* ============================================================
   v3.1 — secciones infográficas + wow de scroll
   ============================================================ */

/* barra de progreso de scroll */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),var(--amber-2));z-index:100;will-change:transform;pointer-events:none}

/* ---------- COMPARATIVA (infografía con barras) ---------- */
.comparativa{background:var(--ink)}
.cmp{margin-top:clamp(40px,5vw,64px);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,44px)}
.cmp-legend{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-family:var(--display);font-size:.8rem;letter-spacing:.04em;color:var(--muted);margin-bottom:1.4rem}
.cmp-legend .dot-a,.cmp-legend .dot-b{width:12px;height:12px;border-radius:3px;display:inline-block}
.cmp-legend .dot-a{background:var(--amber)}
.cmp-legend .dot-b{background:rgba(243,236,221,.25);margin-left:1.2rem}
.cmp-row{display:grid;grid-template-columns:190px 1fr 1fr;gap:.9rem 1.4rem;align-items:center;padding:1.05rem 0;border-top:1px solid var(--line)}
.cmp-label{font-family:var(--display);font-weight:600;font-size:1.02rem}
.cmp-track{position:relative;height:40px;background:rgba(243,236,221,.05);border-radius:100px;overflow:hidden}
.cmp-bar{position:absolute;left:0;top:0;height:100%;width:0;border-radius:100px;transition:width 1.1s var(--ease)}
.cmp.in .cmp-bar{width:var(--w)}
.cmp.in .cmp-row:nth-child(3) .cmp-bar{transition-delay:.12s}
.cmp-bar.a{background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.cmp-bar.b{background:rgba(243,236,221,.16)}
.cmp-track b{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:2;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--cream);white-space:nowrap}
.cmp-badges .cmp-badge{display:flex;align-items:center;gap:.6rem;font-size:.96rem;padding:.3rem 0}
.cmp-badge svg{width:20px;height:20px;flex:none}
.cmp-badge.ok{color:var(--cream)}.cmp-badge.ok svg{color:var(--amber)}
.cmp-badge.no{color:var(--muted)}.cmp-badge.no svg{color:rgba(243,236,221,.38)}

/* ---------- FICHA TÉCNICA (grid de cuadros) ---------- */
.ficha{background:var(--ink-2)}
.ficha-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fbox{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2vw,30px);min-height:188px;display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.fbox:hover{border-color:rgba(163,184,92,.42);transform:translateY(-4px)}
.fbox .fic{width:30px;height:30px;color:var(--amber)}
.fbox h3{font-size:1.16rem;margin-top:1.15rem}
.fbox p{margin-top:.5rem;color:var(--muted);font-size:.92rem;line-height:1.5}

/* ---------- FAQ ---------- */
.faq{background:var(--ink)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:start}
.faq .section-head{position:sticky;top:100px}
.faq .abita-acc{margin-top:.4rem}

/* responsive */
@media (max-width:860px){
  .cmp-row{grid-template-columns:1fr;gap:.5rem}
  .faq-grid{grid-template-columns:1fr;gap:1.5rem}
  .faq .section-head{position:static}
}
@media (max-width:680px){
  .ficha-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ficha-grid::-webkit-scrollbar{display:none}
  .fbox{flex:0 0 70%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.cmp .cmp-bar{transition:none}}

/* ============================================================
   v3.2 — equilibrio con imágenes (ficha como imagen+lista, banda statement)
   ============================================================ */

/* Ficha técnica: imagen grande + lista limpia (menos cuadros) */
.ficha-split{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,72px);align-items:center}
.ficha-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.3;border:1px solid var(--line)}
.ficha-img img{width:100%;height:100%;object-fit:cover}
.ficha-list{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;list-style:none}
.ficha-list li{display:flex;gap:.85rem;align-items:flex-start}
.ficha-list svg{width:24px;height:24px;color:var(--amber);flex:none;margin-top:.1rem}
.ficha-list b{font-family:var(--display);font-weight:600;font-size:1.02rem;display:block}
.ficha-list span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:.15rem}

/* Banda statement (imagen a sangre, respiro visual) */
.statement{position:relative;min-height:64vh;display:flex;align-items:center;overflow:hidden}
.statement-bg{position:absolute;inset:0}
.statement-bg img{width:100%;height:100%;object-fit:cover}
.statement-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(100% 90% at 28% 35%,rgba(163,184,92,.18),transparent 55%),
  linear-gradient(90deg,rgba(13,11,7,.92),rgba(13,11,7,.55) 55%,rgba(13,11,7,.2))}
.statement .wrap{position:relative;z-index:2}
.statement h2{font-size:clamp(2.4rem,5.6vw,5.2rem);max-width:15ch;letter-spacing:-.025em;line-height:.98;margin-top:1rem}
.statement h2 .serif{color:var(--amber)}

@media (max-width:860px){
  .ficha-split{grid-template-columns:1fr;gap:2rem}
  .ficha-img{aspect-ratio:16/10}
  .statement{min-height:52vh}
}
@media (max-width:560px){ .ficha-list{grid-template-columns:1fr} }

/* ============================================================
   v3.3 — Calculadora de rentabilidad (interactiva)
   ============================================================ */
.roi{background:var(--ink-2)}
.roi-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:stretch}
.roi-inputs{display:flex;flex-direction:column;gap:2.1rem;justify-content:center}
.roi-lab{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.9rem}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.roi-val{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--amber);font-variant-numeric:tabular-nums}
.roi-models{display:flex;flex-wrap:wrap;gap:.5rem}
.roi-m{font-family:var(--display);font-weight:600;font-size:.9rem;padding:.55em 1.1em;border-radius:100px;border:1px solid var(--line-2);color:var(--muted);transition:transform .2s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.roi-m:hover{color:var(--cream);border-color:var(--cream)}
.roi-m.is-on{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.roi-m:active{transform:scale(.96)}
.roi input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:rgba(243,236,221,.14);outline:none}
.roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink-2);box-shadow:0 4px 14px -4px rgba(163,184,92,.85);transition:transform .15s var(--ease)}
.roi input[type=range]::-webkit-slider-thumb:active{transform:scale(1.18)}
.roi input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink-2)}
.roi input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.roi-result{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:1.35rem}
.roi-amount span,.roi-split span,.roi-payback span{display:block;font-size:.78rem;letter-spacing:.05em;color:var(--muted);font-family:var(--display);font-weight:500}
.roi-amount b{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.9rem);letter-spacing:-.03em;color:var(--amber);line-height:1;font-variant-numeric:tabular-nums;display:block;margin-top:.35rem}
.roi-split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem}
.roi-split b{font-family:var(--display);font-weight:700;font-size:1.45rem;display:block;margin-top:.2rem;font-variant-numeric:tabular-nums}
.roi-payback{border-top:1px solid var(--line);padding-top:1.25rem}
.roi-years{font-family:var(--display);font-weight:700;font-size:1.55rem;color:var(--cream);font-variant-numeric:tabular-nums}
.roi-bar{margin-top:.85rem;height:8px;border-radius:100px;background:rgba(243,236,221,.1);overflow:hidden}
.roi-bar span{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--amber),var(--amber-2));transition:width .5s var(--ease)}
.roi-result .btn{margin-top:.3rem;justify-content:center}
@media (max-width:860px){.roi-grid{grid-template-columns:1fr}}

/* ============================================================
   v3.3 — placeholders, antes/después (interactivo), testimonios
   ============================================================ */

/* Placeholder de imagen (para reemplazar) */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:1rem;
  background:repeating-linear-gradient(45deg,rgba(163,184,92,.07) 0 11px,transparent 11px 22px),var(--ink-3);
  border:1.5px dashed rgba(163,184,92,.5);border-radius:var(--r);color:var(--amber)}
.ph .ph-ic,.ph>svg{width:30px;height:30px;opacity:.85;color:var(--amber)}
.ph b{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.ph small{font-family:var(--display);font-size:.72rem;color:var(--muted);max-width:24ch;line-height:1.4}
.ph-fill{position:absolute;inset:0;border-radius:0}

/* Antes / Después */
.antes-despues{background:var(--ink-2)}
.ba{position:relative;margin-top:clamp(40px,5vw,64px);aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:pan-y}
.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,55%)) 0 0)}
.ba-before .ph svg{width:34px;height:34px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,55%);width:2px;background:var(--amber);transform:translateX(-1px);pointer-events:none;z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;font-size:1.3rem;font-weight:700;box-shadow:0 8px 22px -6px rgba(0,0,0,.65)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba-tag{position:absolute;bottom:16px;z-index:2;font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(13,11,7,.66);color:var(--cream);padding:.42em .85em;border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-tag-l{left:16px}.ba-tag-r{right:16px;color:var(--amber)}

/* Testimonios */
.testimonios{background:var(--ink)}
.testi-grid{margin-top:clamp(40px,5vw,64px);display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.testi-grid::-webkit-scrollbar{display:none}
.testi-grid .testi{flex:0 0 clamp(290px,40%,400px);scroll-snap-align:start}
.testi{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,2.4vw,36px);display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.testi:hover{border-color:rgba(163,184,92,.4);transform:translateY(-4px)}
.testi-quote{width:30px;height:30px;color:var(--amber);opacity:.85}
.testi-q{margin-top:1.1rem;font-size:1.06rem;line-height:1.55;color:var(--cream);flex:1}
.testi-by{margin-top:1.6rem;display:flex;align-items:center;gap:.9rem}
.ph-avatar{width:46px;height:46px;border-radius:50%;flex:none;padding:0;gap:0}
.ph-avatar svg{width:20px;height:20px}
.ph-avatar b,.ph-avatar small{display:none}
.testi-by b{font-family:var(--display);font-weight:600;font-size:1rem;display:block}
.testi-by>div>span{display:block;color:var(--muted);font-size:.85rem;margin-top:.1rem}

@media (max-width:860px){.testi-grid .testi{flex-basis:84%}.ba{aspect-ratio:4/3}}

/* ============================================================
   v3.5 — catálogo por clase (A bento · B/C compactas)
   ============================================================ */
.cat-sub{margin-top:clamp(56px,7vw,92px);display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 2rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.8rem}
.cat-sub h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:.6rem;letter-spacing:-.02em}
.cat-sub p{color:var(--muted);font-size:.98rem;max-width:48ch}
.cat-badge{display:inline-block;font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);background:rgba(163,184,92,.12);border:1px solid rgba(163,184,92,.32);padding:.32em .75em;border-radius:100px}
.cat-grid{margin-top:clamp(22px,3vw,34px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile-sm{aspect-ratio:4/5;min-height:0}
.tile-sm .tile-body{padding:clamp(16px,1.6vw,22px)}
.tile-sm .tile-body h3{font-size:1.32rem}
.tile-sm .tile-foot{margin-top:1rem}
@media (max-width:860px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}}

/* ============================================================
   v3.6 — pop-ups ricos: galería + ficha desplegable + configurador + calculadora
   ============================================================ */

/* Galería deslizable 4:3 dentro del modal (imagen arriba, info abajo) */
.modal-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.modal-slider::-webkit-scrollbar{display:none}
.ms-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;aspect-ratio:4/3;background:var(--ink-3)}
.ms-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ms-slide.is-plano{background:#fff}
.ms-slide.is-plano img{object-fit:contain}
.ms-plano-tag{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(13,11,7,.72);color:#fff;font-family:var(--display);font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.4em .7em;border-radius:100px}
.ms-arrow{position:absolute;top:calc(50% - 21px);z-index:3;width:42px;height:42px;border-radius:50%;border:none;background:rgba(13,11,7,.55);color:#fff;display:grid;place-items:center;font-size:1.5rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .25s var(--ease),transform .2s var(--ease)}
.ms-arrow:hover{background:var(--amber);color:var(--amber-ink)}
.ms-arrow:active{transform:scale(.9)}
.ms-prev{left:12px}.ms-next{right:12px}
.ms-arrow[hidden]{display:none}
.ms-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:7px;pointer-events:none}
.ms-dot{pointer-events:auto;width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(243,236,221,.45);cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
.ms-dot.is-on{background:var(--amber);transform:scale(1.25)}

/* Autosostenibilidad */
.eco-badges{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eco-badge{display:flex;gap:.7rem;align-items:flex-start;background:rgba(163,184,92,.08);border:1px solid rgba(163,184,92,.22);border-radius:12px;padding:.8rem .9rem}
.eco-badge svg{width:22px;height:22px;color:var(--amber);flex:none;margin-top:.1rem}
.eco-badge b{display:block;font-family:var(--display);font-weight:600;font-size:.92rem}
.eco-badge span{display:block;color:var(--muted);font-size:.78rem;line-height:1.35;margin-top:.15rem}

/* Acordeón dentro del modal */
.modal-acc{margin-top:1.6rem;border-top:1px solid var(--line)}
.modal-specs .spec{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:.55rem 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.modal-specs .spec:first-child{border-top:0}
.modal-specs .spec span:first-child{color:var(--muted-2);font-family:var(--display);font-weight:600}
.modal-specs .spec span:last-child{color:var(--muted)}

/* Configurador */
.cfg-opts{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:.4rem}
.cfg-opt{font-family:var(--display);font-weight:600;font-size:.84rem;padding:.5em 1em;border-radius:100px;border:1px solid var(--line-2);color:var(--muted);transition:.25s var(--ease)}
.cfg-opt:hover{color:var(--cream);border-color:var(--cream)}
.cfg-opt.is-on{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.cfg-opt:active{transform:scale(.96)}
.cfg-note{margin-top:.8rem;color:var(--muted);font-size:.9rem;line-height:1.5;padding-bottom:.3rem}

/* Mini calculadora */
.roi-mini .rm-field{margin-bottom:1rem}
.roi-mini .rm-row{display:flex;justify-content:space-between;align-items:baseline}
.roi-mini .rm-row label{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted)}
.roi-mini .rm-row b{font-family:var(--display);font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.roi-mini input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:rgba(243,236,221,.14);outline:none;margin-top:.7rem}
.roi-mini input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink-2);box-shadow:0 3px 10px -3px rgba(163,184,92,.8)}
.roi-mini input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink-2)}
.roi-mini .rm-out{margin-top:.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.roi-mini .rm-out>div{background:var(--ink-2);padding:.8rem .9rem}
.roi-mini .rm-out span{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display);font-weight:600}
.roi-mini .rm-out b{display:block;margin-top:.2rem;font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--amber);font-variant-numeric:tabular-nums}

/* v3.7 — comparativa: títulos ABITA / TRADICIONAL sobre cada barra */
.cmp-headrow{display:grid;grid-template-columns:190px 1fr 1fr;gap:.9rem 1.4rem;align-items:end;margin-bottom:.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.cmp-headrow span{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.cmp-headrow .ch-x{color:var(--muted-2)}
.cmp-headrow .ch-a{color:var(--amber)}
.cmp-headrow .ch-b{color:var(--muted)}
@media (max-width:860px){.cmp-headrow{display:none}}

/* ============================================================
   v3.8 — galería slider + lightbox + mapa de cobertura
   ============================================================ */

/* Cinta deslizante */
.gal-slider{margin-top:clamp(32px,4vw,52px);display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px var(--gutter) 16px}
.gal-slider::-webkit-scrollbar{display:none}
.gal-item{position:relative;flex:0 0 clamp(280px,32vw,420px);aspect-ratio:4/3.2;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);scroll-snap-align:start;cursor:pointer;margin:0}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,11,7,.85),transparent 55%)}
.gal-item figcaption{position:absolute;left:16px;bottom:14px;z-index:2}
.gal-item figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--cream)}
.gal-item figcaption span{display:block;font-family:var(--display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-top:.2rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;gap:1rem;padding:clamp(16px,4vw,48px);background:rgba(8,6,4,.92);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s linear .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .3s var(--ease)}
.lb-stage{position:relative;max-width:min(1100px,92vw);max-height:86vh}
.lb-img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r);display:block}
.lb-cap{position:absolute;left:0;bottom:0;right:0;padding:1.2rem;background:linear-gradient(to top,rgba(8,6,4,.85),transparent);border-radius:0 0 var(--r) var(--r)}
.lb-cap b{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--cream)}
.lb-close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);z-index:3;width:46px;height:46px;border-radius:50%;background:rgba(243,236,221,.12);color:var(--cream);font-size:1.7rem;line-height:1;display:grid;place-items:center;transition:.3s var(--ease)}
.lb-close:hover{background:var(--amber);color:var(--amber-ink);transform:rotate(90deg)}
.lb-nav{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(243,236,221,.1);color:var(--cream);font-size:1.8rem;line-height:1;display:grid;place-items:center;transition:.3s var(--ease)}
.lb-nav:hover{background:var(--amber);color:var(--amber-ink)}
.lb-nav:active{transform:scale(.92)}
@media (max-width:640px){.lb-nav{position:fixed;bottom:24px;width:48px;height:48px}.lb-prev{left:28%}.lb-next{right:28%}}

/* Cobertura / mapa */
.cobertura{background:var(--ink-2)}
.cob-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.cob-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3.4;background:var(--ink-3)}
.cob-map iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9)}
.cob-info h2{font-size:clamp(2.1rem,4.2vw,3.6rem)}
.cob-info h2 .serif{color:var(--amber)}
.cob-info>p{margin-top:1.3rem;color:var(--muted);font-size:1.08rem;max-width:46ch}
.cob-points{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.cob-point{display:flex;gap:1rem;align-items:flex-start}
.cob-point .dot{margin-top:.5em;width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}
.cob-point b{font-family:var(--display);font-weight:600;font-size:1.04rem}
.cob-point span{display:block;color:var(--muted);font-size:.94rem;margin-top:.15rem;line-height:1.45}
@media (max-width:860px){.cob-grid{grid-template-columns:1fr}.cob-map{aspect-ratio:16/11}}

/* v3.9 — legibilidad de tarjetas (scrim más fuerte + sombra de texto) */
.tile-img::after{background:
  linear-gradient(to top, rgba(13,11,7,.97) 0%, rgba(13,11,7,.82) 26%, rgba(13,11,7,.5) 52%, rgba(13,11,7,.16) 78%, transparent 100%),
  linear-gradient(105deg, rgba(13,11,7,.6) 0%, rgba(13,11,7,.22) 36%, transparent 60%)}
.tile-body h3,.tile-desc,.tile-body .m2,.tile-foot .price b,.tile-foot .price small{text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* v3.10 — Clase A: tarjetas 4:5 deslizables + aire en iconos */
.cat-slider{margin-top:clamp(32px,4vw,52px);display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 0 16px}
.cat-slider::-webkit-scrollbar{display:none}
.cat-slider .tile{flex:0 0 clamp(272px,24.5vw,330px);aspect-ratio:4/5;min-height:0;scroll-snap-align:start}
.cat-slider .tile-body{padding:clamp(20px,1.8vw,28px)}
.cat-slider .tile-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height .4s var(--ease),opacity .3s var(--ease),margin-top .4s var(--ease)}
.cat-slider .tile:focus-within .tile-desc{max-height:5em;opacity:1;margin-top:.5rem}
@media (hover:hover){.cat-slider .tile:hover .tile-desc{max-height:5em;opacity:1;margin-top:.5rem}}
.cat-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem}
.cat-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--cream);display:grid;place-items:center;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.cat-arrow:hover{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.cat-arrow:active{transform:scale(.93)}
.cat-arrow[hidden]{display:none}
@media (max-width:560px){.cat-nav{justify-content:center}}
.pilar{min-height:324px}
.pilar .ic{margin-top:auto;padding-top:2.3rem}
@media (max-width:560px){.cat-slider .tile{flex-basis:82%}}


/* ===================================================================
   v3.17 — Solar · Cross-sell · Proceso · Zoom · Animación WOW
   (emil-design-eng · design-taste-frontend · ui-ux-pro-max)
   =================================================================== */

/* ---------- SOLAR / AUTOSOSTENIBLE ---------- */
.solar{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 78% 18%,#1c1708 0%,#120d07 46%,var(--ink) 100%);border-top:1px solid var(--line)}
.solar-glow{position:absolute;top:-22%;right:-8%;width:min(720px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(194,210,125,.55) 0%,rgba(163,184,92,.28) 30%,rgba(163,184,92,.08) 52%,transparent 70%);
  filter:blur(6px);animation:solarPulse 7s var(--ease) infinite;pointer-events:none;z-index:0}
.solar-glow::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(243,236,221,.5),transparent 62%)}
@keyframes solarPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.solar-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,76px);align-items:center}
.solar-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.02em}
.solar-copy>p{margin-top:1.2rem;color:var(--muted);font-size:1.06rem;line-height:1.65;max-width:50ch}
.solar-copy>p b,.solar-copy h2 .serif{color:var(--cream)}
.solar-points{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.7rem}
.solar-points li{display:flex;gap:1rem;align-items:flex-start;background:rgba(243,236,221,.03);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;transition:border-color .4s var(--ease),background .4s var(--ease)}
.solar-points li:hover{border-color:rgba(163,184,92,.45);background:rgba(163,184,92,.06)}
.solar-points .si{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(163,184,92,.12);color:var(--amber)}
.solar-points .si svg{width:22px;height:22px}
.solar-points b{display:block;font-family:var(--display);font-weight:600;font-size:1rem}
.solar-points div span{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem;line-height:1.4}
.solar-stat{display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.solar-ring{position:relative;width:min(280px,68vw);aspect-ratio:1}
.solar-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.solar-ring-svg circle{fill:none;stroke-width:7;stroke-linecap:round}
.solar-ring-svg .srg-bg{stroke:rgba(243,236,221,.10)}
.solar-ring-svg .srg-fg{stroke:url(#srgGrad);stroke:var(--amber);stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.7s var(--ease)}
.solar-stat.in .srg-fg{stroke-dashoffset:0}
.solar-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.solar-ring-c b{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,4rem);letter-spacing:-.03em;color:var(--cream);line-height:1;font-variant-numeric:tabular-nums}
.solar-ring-c span{color:var(--amber);font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.3rem}
.solar-mini{color:var(--muted-2);font-size:.92rem;line-height:1.5}
@media (max-width:820px){.solar-inner{grid-template-columns:1fr;gap:38px}.solar-stat{order:-1}}

/* ---------- CROSS-SELL "Va bien con esta cabaña" ---------- */
.xsell{margin-top:1.7rem;border-top:1px solid var(--line);padding-top:1.4rem}
.xsell-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.xsell-head .eyebrow{margin:0}
.xsell-disc{display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber);padding:.4em .75em;border-radius:100px}
.xsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.xsell-card{display:flex;flex-direction:column;background:var(--ink-3);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.xsell-card:hover{transform:translateY(-3px);border-color:rgba(163,184,92,.5)}
.xsell-card:active{transform:scale(.98)}
.xsell-img{position:relative;aspect-ratio:1;background:var(--ink-2);overflow:hidden}
.xsell-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.xsell-card:hover .xsell-img img{transform:scale(1.07)}
.xsell-tag{position:absolute;top:7px;left:7px;background:rgba(13,11,7,.72);color:var(--cream);font-family:var(--display);font-weight:600;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:.3em .6em;border-radius:100px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.xsell-body{padding:.6rem .7rem .7rem}
.xsell-body b{display:block;font-family:var(--display);font-weight:600;font-size:.82rem;line-height:1.2}
.xsell-price{display:block;margin-top:.25rem;color:var(--amber);font-family:var(--display);font-weight:700;font-size:.86rem}
.xsell-price i{color:var(--muted-2);font-weight:500;font-style:normal;font-size:.72rem}
.xsell-note{margin-top:.9rem;color:var(--muted-2);font-size:.82rem;line-height:1.5}
.xsell-note b{color:var(--muted)}
@media (max-width:480px){.xsell-grid{grid-template-columns:1fr 1fr}.xsell-card:nth-child(3){display:none}}

/* ---------- PROCESO (pop-up) ---------- */
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.proceso .proceso-open{margin-top:1.4rem}
.proceso-panel{width:min(1080px,100%);max-height:min(92vh,980px);display:block;overflow:hidden}
.proceso-pop{max-height:min(92vh,980px);overflow-y:auto;padding:clamp(26px,3vw,48px)}
.proceso-pop-head{max-width:60ch;margin-bottom:clamp(24px,3vw,40px)}
.proceso-pop-head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.02em;line-height:1.02;margin-top:.5rem}
.proceso-pop-head p{margin-top:.9rem;color:var(--muted);font-size:1.04rem;line-height:1.6}
.proceso-steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px)}
.pstep{display:flex;flex-direction:column;background:var(--ink-3);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pstep-media{position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  color:var(--amber);background:repeating-linear-gradient(135deg,rgba(163,184,92,.05) 0 12px,transparent 12px 24px);border-bottom:1px dashed rgba(163,184,92,.4)}
.pstep-media .ph-ic svg{width:34px;height:34px;opacity:.85}
.pstep-media .ph-tag{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.pstep-media.is-video{color:var(--amber-2)}
.pstep-body{padding:clamp(16px,1.6vw,22px)}
.pstep-n{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--amber)}
.pstep-body h4{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;margin:.3rem 0 .4rem}
.pstep-body p{color:var(--muted);font-size:.94rem;line-height:1.55}
.proceso-pop-cta{margin-top:clamp(22px,2.6vw,34px);padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.proceso-pop-cta span{color:var(--muted);font-size:.95rem}
.proceso-pop-cta b{color:var(--cream)}
@media (max-width:680px){.proceso-steps{grid-template-columns:1fr}}

/* ---------- ZOOM EN IMÁGENES (lightbox) ---------- */
.lb-stage{overflow:hidden;touch-action:none}
.lb-img{cursor:zoom-in;transition:transform .34s var(--ease);will-change:transform;transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lb.is-zoom .lb-img{cursor:grab;transition:none}
.lb.is-zoom.is-panning .lb-img{cursor:grabbing}
.lb-tools{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:.5rem;background:rgba(13,11,7,.6);border:1px solid var(--line-2);border-radius:100px;padding:.35rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-tools button{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--cream);font-size:1.2rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .25s var(--ease),transform .2s var(--ease)}
.lb-tools button:hover{background:rgba(243,236,221,.14)}
.lb-tools button:active{transform:scale(.9)}
.ms-slide img{cursor:zoom-in}
.ms-slide.is-plano img{cursor:default}

/* ---------- ANIMACIÓN / WOW ---------- */
/* Reveal por clip-path (imágenes que se descubren al hacer scroll) */
.reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease),transform 1.05s var(--ease);transform:scale(1.04)}
.reveal-clip.in{clip-path:inset(0 0 0 0);transform:scale(1)}
/* Parallax del hero (lo mueve el JS con --py) */
.hero-bg img{will-change:transform}
.hero[data-parallax] .hero-bg img{transform:translate3d(0,var(--py,0px),0) scale(1.06)}
/* Stagger utilitario para grids con .reveal + data-d (ya soportado por IO) */
.proceso-steps .pstep{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.proceso-steps .pstep.in{opacity:1;transform:none}
.solar-points li{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.solar-points li.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .solar-glow{animation:none}
  .reveal-clip{clip-path:none;transform:none;transition:opacity .4s ease}
  .hero[data-parallax] .hero-bg img{transform:scale(1.04)}
}


/* ===================================================================
   v3.18 — Pase WOW (emil-design-eng · taste · ui-ux-pro-max)
   Motion motivado: jerarquía, narrativa, feedback. Solo transform/opacity/clip.
   =================================================================== */

/* ---------- HERO cinematográfico ---------- */
/* Ken Burns pasa al contenedor; el parallax es dueño del transform del img */
.hero-bg{animation:heroKB 14s var(--ease) both;will-change:transform}
@keyframes heroKB{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-bg img{animation:none;transform:scale(1.04)}
.hero[data-parallax] .hero-bg img{transform:translate3d(0,var(--py,0px),0) scale(1.04)}
/* Titular por líneas con máscara (reserva para descendentes de la g) */
.hero h1{animation:none;opacity:1}
.hero h1 .hl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .hl-i{display:inline-block;transform:translateY(115%);animation:hlUp 1s var(--ease) both}
.hero h1 .hl:first-child .hl-i{animation-delay:.1s}
.hero h1 .hl:last-child .hl-i{animation-delay:.24s}
@keyframes hlUp{to{transform:none}}
.hero p.sub{animation-delay:.52s}
.hero-actions{animation-delay:.7s}

/* ---------- Reveal de imágenes por clip-path ---------- */
.reveal.reveal-clip{opacity:0;transform:translateY(22px)}
.reveal.reveal-clip.in{opacity:1;transform:none}

/* ---------- Spotlight que sigue el cursor (tarjetas) ---------- */
@media (hover:hover) and (pointer:fine){
  .spot{position:relative}
  .spot::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(243,236,221,.09),transparent 62%);
    transition:opacity .45s var(--ease)}
  .spot:hover::before{opacity:1}
}

/* ---------- Nav inteligente (se esconde al bajar, vuelve al subir) ---------- */
.nav{transition:transform .45s var(--ease),background .35s var(--ease),border-color .35s var(--ease),padding .35s var(--ease)}
.nav.nav-up{transform:translateY(-110%)}

/* ---------- Brillo en el CTA principal ---------- */
.btn{position:relative;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .btn-amber::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;
    background:linear-gradient(105deg,transparent 8%,rgba(255,255,255,.38) 50%,transparent 92%);
    transform:translateX(-170%) skewX(-14deg)}
  .btn-amber:hover::after{transform:translateX(300%) skewX(-14deg);transition:transform .8s var(--ease)}
}

/* ---------- Pop-ups: contenido en cascada al abrir (salida instantánea) ---------- */
.abita-modal__content>*{opacity:0;transform:translateY(12px)}
.abita-modal.open .abita-modal__content>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.abita-modal.open .abita-modal__content>*:nth-child(2){transition-delay:.05s}
.abita-modal.open .abita-modal__content>*:nth-child(3){transition-delay:.1s}
.abita-modal.open .abita-modal__content>*:nth-child(4){transition-delay:.15s}
.abita-modal.open .abita-modal__content>*:nth-child(5){transition-delay:.2s}
.abita-modal.open .abita-modal__content>*:nth-child(6){transition-delay:.25s}
.abita-modal.open .abita-modal__content>*:nth-child(7){transition-delay:.3s}
.abita-modal.open .abita-modal__content>*:nth-child(8){transition-delay:.34s}
.abita-modal.open .abita-modal__content>*:nth-child(n+9){transition-delay:.38s}

/* ---------- Visor (lightbox): entrada con escala ---------- */
.lightbox .lb-stage{transform:scale(.96);opacity:0;transition:transform .42s var(--ease),opacity .3s var(--ease)}
.lightbox.open .lb-stage{transform:none;opacity:1}

/* ---------- Pista de uso en el Antes/Después (2 empujones al aparecer) ---------- */
@keyframes baNudge{0%,100%{transform:translateX(-1px)}30%{transform:translateX(-13px)}65%{transform:translateX(11px)}}
.ba.in .ba-handle{animation:baNudge 1.5s var(--ease) .7s 2}

/* ---------- Detalles ---------- */
html{scroll-behavior:smooth}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Movimiento reducido: todo se calma ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg{animation:none}
  .hero h1 .hl-i{animation:none;transform:none}
  .reveal.reveal-clip{clip-path:none;transform:none;transition:opacity .4s ease}
  .spot::before{display:none}
  .nav.nav-up{transform:none}
  .btn-amber::after{display:none}
  .abita-modal__content>*{opacity:1;transform:none;transition:none}
  .ba.in .ba-handle{animation:none}
  .lightbox .lb-stage{transform:none;opacity:1;transition:none}
}

/* v3.19 — Antes/Después con fotos reales del terreno */
.ba-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* ===================================================================
   v3.20 — Hero video · Timeline · Gráfica crecimiento · Construcción
   · Catálogo descargas · Redes en footer · 40 km · 24 meses
   =================================================================== */

/* ---------- HERO con video ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg.has-video{animation:none}
.hero[data-parallax] .hero-bg video{transform:translate3d(0,var(--py,0px),0) scale(1.06)}

/* ---------- Inversión: video ---------- */
.inv-fig video{display:block;width:100%;aspect-ratio:4/4.5;height:auto;object-fit:cover;border-radius:var(--r-lg);background:var(--ink-3)}

/* ---------- PROCESO: línea de tiempo ---------- */
.tline{position:relative;margin-top:clamp(40px,5vw,70px);display:flex;flex-direction:column;gap:clamp(22px,3vw,38px);padding:10px 0 4px}
.tline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(to bottom,var(--amber) 0%,rgba(163,184,92,.45) 60%,rgba(163,184,92,.08) 100%);
  transform:scaleY(0);transform-origin:top;transition:transform 1.9s var(--ease) .15s}
.tline.in::before{transform:scaleY(1)}
.tl-item{position:relative;width:calc(50% - 52px)}
.tl-item:nth-child(odd){margin-right:auto}
.tl-item:nth-child(even){margin-left:auto}
.tl-item::before{content:"";position:absolute;top:30px;width:15px;height:15px;border-radius:50%;background:var(--ink);
  border:3px solid var(--amber);box-shadow:0 0 0 6px rgba(163,184,92,.14);transform:scale(.2);opacity:0;
  transition:transform .5s var(--ease) .25s,opacity .4s var(--ease) .25s}
.tl-item.in::before{transform:scale(1);opacity:1}
.tl-item:nth-child(odd)::before{right:-62px}
.tl-item:nth-child(even)::before{left:-62px}
.tl-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.2vw,32px);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.tl-card:hover{border-color:rgba(163,184,92,.4);transform:translateY(-3px)}
.tl-n{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.12em;color:var(--amber)}
.tl-card h3{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;margin:.45rem 0 .5rem}
.tl-card p{color:var(--muted);font-size:.96rem;line-height:1.55}
.tl-card .ln{display:inline-block;margin-top:1rem}
.tline .tl-item.reveal{transform:translateX(-28px)}
.tline .tl-item.reveal:nth-child(even){transform:translateX(28px)}
.tline .tl-item.reveal.in{transform:none}
@media (max-width:860px){
  .tline::before{left:9px}
  .tl-item,.tl-item:nth-child(odd),.tl-item:nth-child(even){width:auto;margin:0 0 0 42px}
  .tl-item:nth-child(odd)::before,.tl-item:nth-child(even)::before{left:-39px;right:auto}
  .tline .tl-item.reveal,.tline .tl-item.reveal:nth-child(even){transform:translateY(20px)}
}

/* ---------- CÓMO LO CONSTRUIMOS ---------- */
.construccion{background:var(--ink-2);border-block:1px solid var(--line)}
.constr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.constr-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.02em;margin-top:.5rem}
.constr-copy>p{margin-top:1.2rem;color:var(--muted);font-size:1.04rem;line-height:1.65;max-width:52ch}
.constr-points{list-style:none;margin:1.6rem 0 1.9rem;padding:0;display:grid;gap:.55rem}
.constr-points li{display:flex;align-items:baseline;gap:.7rem;border-top:1px solid var(--line);padding-top:.55rem}
.constr-points b{font-family:var(--display);font-weight:700;color:var(--amber);font-size:1.02rem;white-space:nowrap}
.constr-points span{color:var(--muted);font-size:.95rem}
.constr-media{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);padding:0;background:var(--ink-3);cursor:pointer}
.constr-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.constr-media:hover img{transform:scale(1.05)}
.constr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,11,7,.62),transparent 55%)}
.constr-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--cream)}
.constr-play svg{width:64px;height:64px;color:var(--amber);filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));transition:transform .35s var(--ease)}
.constr-media:hover .constr-play svg{transform:scale(1.1)}
.constr-play b{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.constr-media:active{transform:scale(.99)}
@media (max-width:860px){.constr-grid{grid-template-columns:1fr}}

/* ---------- NOSOTROS: gráfica de crecimiento ---------- */
.growth{margin-top:clamp(40px,5vw,70px)}
.growth-chart{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-3);padding:clamp(14px,2vw,26px) clamp(8px,1.4vw,18px) 4px;overflow:hidden}
.growth-svg{display:block;width:100%;height:auto}
.g-grid line{stroke:rgba(243,236,221,.07);stroke-width:1;stroke-dasharray:3 7}
.g-line{stroke:var(--amber);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease) .25s;filter:drop-shadow(0 4px 14px rgba(163,184,92,.35))}
.growth.in .g-line{stroke-dashoffset:0}
.g-area{fill:url(#gFill);opacity:0;transition:opacity 1.1s var(--ease) 1.9s}
.growth.in .g-area{opacity:1}
.g-pt{opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.g-pt .g-dot{fill:var(--ink);stroke:var(--amber);stroke-width:3}
.g-pt .g-halo{fill:rgba(163,184,92,.13);stroke:none}
.growth.in .g-pt1{transition-delay:.45s}
.growth.in .g-pt2{transition-delay:1.05s}
.growth.in .g-pt3{transition-delay:1.65s}
.growth.in .g-pt4{transition-delay:2.3s}
.growth.in .g-pt{opacity:1;transform:scale(1)}
.g-lab{font-family:var(--display),sans-serif;font-size:21px;font-weight:600;fill:var(--muted);letter-spacing:.04em}
.g-lab-end{text-anchor:end;fill:var(--amber)}
.growth-grid{margin-top:clamp(20px,2.6vw,30px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.gstep{border-top:2px solid rgba(163,184,92,.35);padding-top:1rem}
.gstep .idx{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--amber)}
.gstep h3{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;margin:.4rem 0 .45rem}
.gstep p{color:var(--muted);font-size:.93rem;line-height:1.55}
@media (max-width:860px){.growth-grid{grid-template-columns:1fr 1fr}.g-lab{font-size:30px}}
@media (max-width:560px){.growth-grid{grid-template-columns:1fr}}

/* ---------- CATÁLOGO (descargas) ---------- */
.catalogo{background:var(--ink)}
.cat-dl{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(28px,3.6vw,52px);
  background:radial-gradient(90% 140% at 8% 0%,rgba(163,184,92,.12) 0%,transparent 50%),var(--ink-2)}
.cat-dl-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;margin-top:.4rem}
.cat-dl-copy p{margin-top:.7rem;color:var(--muted);font-size:1rem;max-width:44ch}
.cat-dl-btns{display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:760px){.cat-dl{flex-direction:column;align-items:flex-start}}

/* ---------- Footer: redes bajo el logo ---------- */
.soc{display:flex;gap:.65rem;margin:1.1rem 0 .2rem}
.soc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .25s var(--ease)}
.soc a svg{width:17px;height:17px}
.soc a:hover{color:var(--amber-ink);background:var(--amber);border-color:var(--amber);transform:translateY(-2px)}
.soc a:active{transform:scale(.92)}

/* ---------- Complementos sin acción (por ahora) ---------- */
.xsell-soon{cursor:default}
.xsell-soon:active{transform:translateY(-3px)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .tline::before{transform:none;transition:none}
  .tl-item::before{transform:none;opacity:1;transition:none}
  .tline .tl-item.reveal,.tline .tl-item.reveal:nth-child(even){transform:none}
  .g-line{stroke-dashoffset:0;transition:none}
  .g-area{opacity:1;transition:none}
  .g-pt{opacity:1;transform:none;transition:none}
}


/* ===================================================================
   v3.21 — Media remota (Wix) · Protección de imágenes y videos
   =================================================================== */
img, video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.tile-img, .modal-slider, .lb-stage, .gal-item, .ba, .hero-bg, .inv-fig, .constr-media, .xsell-img, .ficha-img, .modal-main{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}


/* ===================================================================
   v3.22 — Palabra rotatoria · Iconos timeline · Sliders táctiles ·
   Medios visibles sin clip · Espaciados (uiux) · FAQs
   =================================================================== */

/* ---------- Hero: palabra que rota ---------- */
.rot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.rot-w{display:inline-block;will-change:transform;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.rot-w.rot-out{transform:translateY(-115%);opacity:0}
.rot-w.rot-snap{transition:none;transform:translateY(115%);opacity:0}

/* ---------- Timeline: iconos ---------- */
.tl-head{display:flex;align-items:center;gap:.95rem;margin-bottom:.55rem}
.tl-ic{flex:none;width:46px;height:46px;border-radius:13px;background:rgba(163,184,92,.12);border:1px solid rgba(163,184,92,.25);color:var(--amber);display:grid;place-items:center}
.tl-ic svg{width:23px;height:23px}
.tl-head .tl-n{display:block}
.tl-head h3{margin:.15rem 0 0!important}

/* ---------- Sliders táctiles ---------- */
.ba-range{touch-action:none}
.modal-slider{overscroll-behavior-x:contain}
.ms-slide{scroll-snap-stop:always}
.cat-slider,.gal-slider,.testi-grid{overscroll-behavior-x:contain}
.modal-slider .ms-slide img{pointer-events:auto}

/* ---------- Espaciados (auditoría uiux) ---------- */
.catalogo{padding-block:clamp(48px,7vw,96px)}
.cobertura{padding-top:clamp(64px,9vw,130px)}
.nav-links a{white-space:nowrap}
@media (max-width:560px){.g-lab{font-size:34px}}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .rot-w{transition:none}
}

/* v3.22 — blindaje: jamás scroll horizontal accidental (pulso WA, transforms, etc.) */
html, body{overflow-x:clip}

/* v3.22 — retoques del QA: etiqueta m2 legible sobre foto clara · rotador más ágil */
.tile-body .m2{color:var(--cream);opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.rot-w{transition:transform .38s var(--ease),opacity .26s var(--ease)}

/* v3.24 — compatibilidad LG webOS: el navegador del TV no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .inv-fig video{height:600px}
  .ms-slide{height:420px}
}