/* ==========================================================================
   Nueva Era Solar — Landing de alta conversión
   Dirección: cinematográfica, cálida, real.
   Tipografía: Bricolage Grotesque (display) + Hanken Grotesk (body), self-hosted.
   Mundo visual comprometido (secciones claras/oscuras intencionales), single-theme.
   ========================================================================== */

:root{
  /* Grounds */
  --ground:#0B1512;          /* verde-negro cálido (elegido, no negro puro) */
  --ground-2:#0E1E19;
  --paper:#F5F7F4;           /* blanco-cálido con leve sesgo verde */
  --paper-2:#FFFFFF;
  /* Marca / acento */
  --brand:#0B5B4B;
  --brand-deep:#083D32;
  --gold:#F6B33D;            /* acento solar — una sola voz fuerte */
  --gold-ink:#2A1B00;
  /* Tinta */
  --ink:#0F1712;
  --ink-soft:#54635C;
  --mist:rgba(238,244,241,.76);
  --mist-soft:rgba(238,244,241,.52);
  /* Líneas */
  --line-d:rgba(255,255,255,.12);
  --line-l:rgba(16,30,25,.10);
  /* Fuentes */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --shadow:0 18px 50px rgba(8,21,18,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--gold-ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* ---- Tipografía base ---- */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.section--dark .eyebrow,.hero .eyebrow{color:var(--gold)}

/* Grano/textura sutil para profundidad cinematográfica en fondos oscuros */
.hero,.section--dark,.final{position:relative}
.hero::after,.section--dark::after,.final::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero__in,.section--dark .wrap,.final .wrap{position:relative;z-index:2}

/* ---- Secciones ---- */
section{padding:clamp(60px,9vw,116px) 0}
.section--dark{background:var(--ground);color:#EEF4F1}
.section--light{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.sec-head{max-width:680px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem);margin:.35em 0 .3em;max-width:16ch}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;max-width:48ch}
.section--dark .sec-head p{color:var(--mist)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center h2{margin-left:auto;margin-right:auto}

/* ---- Botones ---- */
.btn{font-family:var(--body);font-weight:700;font-size:1.02rem;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;padding:16px 26px;white-space:nowrap;transition:transform .12s ease,box-shadow .2s ease,background .2s}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 12px 32px rgba(246,179,61,.28)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(246,179,61,.44)}
.btn--dark{background:var(--brand);color:#fff}
.btn--dark:hover{background:var(--brand-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;border:1px solid var(--line-d);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4)}
.btn--lg{padding:18px 32px;font-size:1.1rem}
.btn--block{display:flex;width:100%}

/* ---- Reveal al scroll (a prueba de fallos: solo se oculta con JS activo) ---- */
.reveal{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.34s}.reveal.d5{transition-delay:.46s}

/* ======================= NAV ======================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:#fff;
  display:flex;align-items:center;gap:9px;transition:color .3s}
/* Marca plana derivada del logo (medio sol con rayos). El logo 3D original se
   vuelve ilegible a este tamano; esta version conserva la forma y funciona en
   el sistema visual del sitio.
   Dimensionado: la cupula mide 10 de las 34 unidades del viewBox, y la altura
   de mayuscula de Bricolage es .67em -> 34 * (.67/10) = 2.28em de ancho deja la
   cupula exactamente a la altura de la "N" y los rayos por encima.
   El translateY asienta la base de la cupula sobre la linea base del texto
   (medido: sin el, quedaba 6px caida). */
.brand__mark{width:2.28em;height:auto;flex:0 0 auto;color:var(--gold);
  transform:translateY(-.247em);filter:drop-shadow(0 0 10px rgba(246,179,61,.5))}
.nav__wa{font-weight:600;font-size:.92rem;color:#fff;border:1px solid var(--line-d);
  padding:9px 17px;border-radius:100px;backdrop-filter:blur(6px);transition:.2s}
.nav__wa:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
/* estado sólido al bajar */
.nav.solid{background:rgba(11,21,18,.85);backdrop-filter:blur(14px);border-color:var(--line-d)}

/* ======================= HERO ======================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__poster{transform:scale(1.05);animation:kb 22s ease-out forwards}
.hero__video{opacity:0;transition:opacity 1s ease}
.hero__video.playing{opacity:1}
@keyframes kb{to{transform:scale(1)}}
.hero__overlay{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(125% 95% at 10% 100%, rgba(8,18,15,.95) 0%, rgba(8,18,15,.55) 42%, rgba(8,18,15,.12) 100%),
    linear-gradient(to top, rgba(8,18,15,.9) 0%, rgba(8,18,15,.25) 44%, rgba(8,18,15,.5) 100%)}
.hero__in{width:100%;max-width:var(--maxw);margin:0 auto;
  padding:118px clamp(20px,5vw,56px) clamp(44px,7vw,88px);display:grid;gap:24px}
.hero h1{color:#fff;font-size:clamp(2.6rem,6.8vw,5.3rem);line-height:.97;max-width:15ch}
.hero h1 .g{color:var(--gold)}
.hero .sub{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--mist);max-width:46ch;line-height:1.5}
.hero .sub b{color:#fff;font-weight:600}

/* Captura hero */
.capture{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;max-width:560px;margin-top:6px}
.capture .field{flex:1;min-width:230px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid var(--line-d);border-radius:14px;padding:0 16px;backdrop-filter:blur(10px)}
.capture .field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font-family:var(--body);font-size:1.05rem;padding:16px 0}
.capture .field input::placeholder{color:var(--mist-soft)}
/* El selector Q/kWh decide todo el embudo: tiene que ser facil de tocar con el
   pulgar. Sin el padding medía 18px de alto — muy poco para un telefono. */
.capture .field .u{color:var(--mist-soft);font-size:.9rem;font-weight:600;white-space:nowrap;
  padding:11px 4px;margin:-11px 0;cursor:pointer}
.cap-note{font-size:.84rem;color:var(--mist-soft);margin-top:2px}

/* Fila de prueba hero */
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding-top:22px;border-top:1px solid var(--line-d);margin-top:6px}
.hero-trust .item{display:flex;align-items:baseline;gap:8px;font-size:.92rem;color:var(--mist)}
.hero-trust .n{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.02em}
.hero-trust .sep{width:4px;height:4px;border-radius:50%;background:var(--mist-soft)}

/* ======================= CÓMO FUNCIONA (pasos editoriales) =======================
   Lista vertical con numeral calado, no una rejilla de tarjetas: rompe el ritmo
   de grids del resto de la pagina y lee como editorial, no como plantilla. */
.pasos{list-style:none;border-top:1px solid var(--line-d)}
.paso{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,46px);align-items:start;
  padding:clamp(24px,4vw,40px) 0;border-bottom:1px solid var(--line-d)}
.paso__n{font-family:var(--display);font-weight:700;line-height:.86;letter-spacing:-.04em;
  font-size:clamp(2.1rem,6vw,3.4rem);color:transparent;-webkit-text-stroke:1.5px rgba(246,179,61,.7)}
@supports not ((-webkit-text-stroke:1px red)){.paso__n{color:var(--gold)}}
.paso h3{font-size:clamp(1.25rem,2.6vw,1.75rem);color:#fff;margin-bottom:8px}
.paso p{color:var(--mist);max-width:60ch}

/* ======================= TRAYECTORIA (cifras) + LOGOS =======================
   Sin cajas: solo una filete arriba de cada cifra. La escala tipografica hace
   el trabajo que antes hacian los bordes. */
/* Una columna en telefono: cifras como "285,000" no caben en media columna a
   380-430px sin encoger el numero hasta perder el golpe. */
.figs{display:grid;grid-template-columns:1fr;
  gap:clamp(26px,4vw,38px) clamp(20px,4vw,44px);margin-bottom:clamp(42px,6vw,66px)}
.fig{border-top:1px solid var(--line-l);padding-top:16px}
.fig b{display:block;font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.04em;color:var(--brand)}
/* La unidad en linea propia: evita que "watts hora" parta el numero y alinea las
   cuatro cifras bajo la misma estructura numero / unidad / descripcion. */
.fig b i{display:block;font-style:normal;font-size:.26em;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);opacity:.75;margin-top:9px}
/* Hijo directo: dentro de <b> vive el span del contador y no debe heredar esto */
.fig>span{display:block;margin-top:10px;font-size:.92rem;color:var(--ink-soft);max-width:24ch}
.logos-lab{text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
.logos{display:flex;gap:clamp(22px,5vw,54px);align-items:center;justify-content:center;flex-wrap:wrap}
.logos img{height:38px;width:auto;filter:grayscale(1);opacity:.55;transition:.25s}
.logos img:hover{filter:none;opacity:1}

/* ======================= CASOS ======================= */
.case-hero{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line-d);border-radius:22px;overflow:hidden;background:var(--ground-2)}
.case-hero__media{position:relative;min-height:280px;order:-1}
.case-hero__media img{width:100%;height:100%;object-fit:cover}
.case-hero__body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.case-tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(246,179,61,.4);border-radius:100px;padding:6px 13px;margin-bottom:16px}
.case-hero__body h3{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;margin-bottom:12px}
.case-hero__body p{color:var(--mist);max-width:46ch;margin-bottom:22px}
.case-hero__body p b{color:#fff}
.case-metrics{display:flex;gap:clamp(20px,4vw,40px);flex-wrap:wrap}
.case-metrics div b{font-family:var(--display);font-weight:700;font-size:1.9rem;color:var(--gold);display:block;line-height:1}
.case-metrics div span{font-size:.8rem;color:var(--mist-soft)}
.cases-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.case-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;isolation:isolate}
.case-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case-card:hover img{transform:scale(1.05)}
.case-card figcaption{position:absolute;inset:auto 0 0 0;padding:20px 18px 16px;z-index:2;
  background:linear-gradient(to top,rgba(8,18,15,.9),transparent)}
.case-card figcaption b{font-family:var(--display);color:#fff;font-size:1.1rem;display:block}
.case-card figcaption span{font-size:.85rem;color:var(--mist)}
.cases-foot{text-align:center;color:var(--mist);margin-top:clamp(28px,4vw,40px);font-size:1.05rem}
.cases-foot b{color:#fff}

/* ======================= AHORRO — el momento del cuerpo =======================
   Dos barras a escala real (100% vs 19%) que se llenan al entrar en vista.
   La caida se ve antes de leerse: eso es lo que se recuerda de la pagina. */
.ah{max-width:820px;margin:0 auto;display:grid;gap:clamp(20px,3.4vw,30px)}
/* Rotulo y monto arriba, barra a todo el ancho abajo: asi ambas barras miden
   exactamente lo mismo y la comparacion visual es honesta. */
.ah__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ah__lab{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.ah__lab--sol{color:var(--brand)}
.ah__track{height:clamp(46px,7vw,66px);border-radius:14px;background:#EBF0ED;overflow:hidden}
.ah__fill{height:100%;width:0;border-radius:14px;
  transition:width 1.25s cubic-bezier(.22,.61,.36,1) .18s}
.ah__fill--now{background:linear-gradient(90deg,#4A5A51,#31403A)}
.ah__fill--sol{background:linear-gradient(90deg,var(--gold),#FFD98A);
  box-shadow:0 8px 26px rgba(246,179,61,.35)}
/* El llenado ocurre al revelarse; sin JS quedan a su ancho final */
.ah.in .ah__fill--now,html:not(.js) .ah__fill--now{width:100%}
.ah.in .ah__fill--sol,html:not(.js) .ah__fill--sol{width:19%}
.ah__num{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.6rem,4.4vw,2.5rem);white-space:nowrap}
.ah__num--sol{color:var(--brand)}
.ah__num small{font-family:var(--body);font-size:.4em;font-weight:500;opacity:.55;margin-left:.15em}
.ah__save{margin-top:4px;text-align:center;font-family:var(--display);font-weight:700;
  color:var(--brand);font-size:clamp(1.15rem,2.8vw,1.55rem);letter-spacing:-.02em}
.ah__note{text-align:center;color:var(--ink-soft);font-size:.88rem;max-width:600px;margin:24px auto 28px}
.ah__note b{color:var(--ink)}
.ah__cta{text-align:center}

/* ======================= POR QUÉ NOSOTROS =======================
   Titulo sticky a la izquierda + lista de compromisos a la derecha.
   El encabezado acompana toda la lectura en vez de perderse arriba. */
.porque{display:grid;gap:clamp(30px,5vw,64px)}
.porque__head h2{font-size:clamp(2rem,4.2vw,3rem);margin:.35em 0 .3em;max-width:15ch}
.porque__head p{color:var(--ink-soft);max-width:42ch;margin-bottom:24px}
.porque__list{list-style:none;display:grid}
.porque__list li{padding:clamp(20px,2.8vw,26px) 0;border-top:1px solid var(--line-l)}
.porque__list li:last-child{border-bottom:1px solid var(--line-l)}
.porque__list h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:6px;
  display:flex;align-items:baseline;gap:12px}
.porque__list h3::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--gold);transform:translateY(-2px)}
.porque__list p{color:var(--ink-soft);font-size:.98rem;max-width:54ch;padding-left:19px}

/* ======================= GALERÍA (dentro de casos, a sangre) ======================= */
.gallery-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:0 clamp(20px,5vw,56px) 8px;scrollbar-width:none;
  margin-top:clamp(28px,4vw,44px)}
.gallery-row::-webkit-scrollbar{display:none}
.g-card{flex:0 0 80%;max-width:340px;scroll-snap-align:center;border-radius:18px;overflow:hidden;position:relative;aspect-ratio:3/2}
.g-card img{width:100%;height:100%;object-fit:cover}
.g-card figcaption{position:absolute;inset:auto 0 0 0;padding:26px 16px 14px;font-size:.85rem;color:#fff;
  background:linear-gradient(to top,rgba(8,18,15,.85),transparent)}

/* ======================= FAQ ======================= */
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:var(--paper-2);border:1px solid var(--line-l);border-radius:16px;padding:2px 24px;transition:border-color .2s}
.faq-item[open]{border-color:rgba(11,91,75,.35)}
.faq-item summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;
  padding:20px 32px 20px 0;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item p{color:var(--ink-soft);padding:0 0 22px;max-width:64ch}

/* ======================= CTA FINAL ======================= */
.final{position:relative;text-align:center;overflow:hidden}
.final__glow{position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 80% at 50% 120%,rgba(246,179,61,.22),transparent 70%)}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;max-width:18ch;margin:0 auto .5em}
.final h2 .g{color:var(--gold)}
.final p{color:var(--mist);max-width:52ch;margin:0 auto 30px;font-size:1.1rem}
.final__alt{margin-top:18px;font-size:.95rem;color:var(--mist)}
.final__alt a{color:#fff;font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:1px}

/* ======================= FOOTER ======================= */
.foot{background:#071410;color:var(--mist);text-align:center;padding:48px 0}
.foot__logo{width:150px;height:auto;margin:0 auto 16px}
.foot p{font-size:.9rem;margin:4px 0}
.foot .legal{color:var(--mist-soft);font-size:.82rem;margin-top:8px}

/* ======================= WHATSAPP FLOTANTE ======================= */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:80;background:#25D366;color:#053;
  border-radius:100px;padding:14px 20px;font-weight:700;display:flex;gap:9px;align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .15s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:20px;height:20px;fill:currentColor}

/* ======================= SHEET / FORM ======================= */
.sheet{position:fixed;inset:0;z-index:100;display:none}
.sheet[aria-hidden="false"]{display:block}
.sheet__backdrop{position:absolute;inset:0;background:rgba(6,16,13,.62);backdrop-filter:blur(3px)}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;background:var(--paper-2);
  border-radius:26px 26px 0 0;padding:26px clamp(20px,5vw,32px) calc(26px + env(safe-area-inset-bottom));
  max-height:94vh;overflow-y:auto;animation:up .3s cubic-bezier(.22,.61,.36,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet__x{position:absolute;top:16px;right:16px;border:0;background:#eef3f1;width:36px;height:36px;
  border-radius:50%;font-size:1rem;cursor:pointer;color:var(--ink)}
.sheet__panel h3{font-size:1.6rem;letter-spacing:-.02em}
.sheet__sub{color:var(--ink-soft);margin:.3em 0 20px}
.form{display:grid;gap:15px}
.field-l{display:grid;gap:6px}
.field-l label{font-weight:600;font-size:.9rem}
.field-l input,.field-l select{font-family:var(--body);padding:14px 15px;border:1px solid var(--line-l);
  border-radius:12px;font-size:16px;background:var(--paper);width:100%;color:var(--ink);transition:border-color .2s}
.field-l input:focus,.field-l select:focus{outline:0;border-color:var(--brand)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consumo{display:flex;gap:8px}.consumo input{flex:1;min-width:0}.consumo select{flex:0 0 auto;width:auto}
.form-msg{text-align:center;font-size:.9rem;min-height:1.2em}
.form-msg.err{color:#C0392B}.form-msg.ok{color:var(--brand);font-weight:700}
.hp{position:absolute;left:-9999px;opacity:0;height:1px;width:1px}
.ok-state{text-align:center;padding:14px 0}
.ok-state .big{font-size:2.6rem}
.ok-state h3{margin:.3em 0}
.ok-state p{color:var(--ink-soft);margin-bottom:18px}

/* Focus visible accesible */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- Micro-detalle ---- */
.hero__in{will-change:transform,opacity}
/* Profundidad al hover solo en lo que ES interactivo (galería/casos) */
.case-card{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.case-card:hover{transform:translateY(-5px);box-shadow:0 26px 55px rgba(6,16,13,.55)}
.g-card{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.g-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(6,16,13,.28)}
/* Scrollbar sobria */
*{scrollbar-width:thin;scrollbar-color:#B9C6C0 transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:#C3CFC9;border-radius:20px;border:3px solid var(--paper);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#A7B6AE;background-clip:padding-box}
/* Números alineados donde importan */
.fig b,.case-metrics b,.hero-trust .n,.ah__num{font-variant-numeric:tabular-nums}

/* ======================= DESKTOP ======================= */
@media (min-width:560px){
  .figs{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:720px){
  .figs{grid-template-columns:repeat(4,1fr)}
  .cases-grid{grid-template-columns:repeat(3,1fr)}
  .case-hero{grid-template-columns:.92fr 1.08fr}
  .case-hero__media{order:0;min-height:420px}
  .g-card{flex:0 0 360px}
  .sheet__panel{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(600px,94vw);border-radius:24px;animation:none}
}
@media (min-width:900px){
  .porque{grid-template-columns:.85fr 1.15fr;align-items:start}
  .porque__head{position:sticky;top:104px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__bg img{transform:none}
  .ah__fill{transition:none}
  .porque__head{position:static}
}