/* Gestión Digital del Paraguay · ACABADO v4 (18/9/2026)
   Capa sobre estilos.css. Método «imagen → código» (el mismo de la web de PxN):
   láminas generadas con Higgsfield en src/fondos/ (vaciadas, sin texto) y todo el texto real en HTML encima.
   Primera pantalla: lámina con celular real en piedra, el chat vivo va DENTRO de la pantalla del celular. */

:root{--bosque2:#2A6B5F;--menta2:#6FC3A6;--sombra:0 24px 60px rgba(15,42,38,.16);--r2:12px;--cab:74px}
body{font-size:17.5px}
h1{font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.018em}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.014em}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--orotxt)}
.bg-oscuro h2 em,.bg-bosque h2 em,.hero h1 em,.hero-int h1 em,.atmo-oscuro h2 em{color:var(--menta)}
.lead{font-size:clamp(17.5px,1.9vw,20.5px);line-height:1.5}
section{--sp:96px;padding:var(--sp) 0}
@media (max-width:900px){section{--sp:64px}}

/* ---- etiqueta de sección ---- */
.etq{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bosque);background:rgba(255,255,255,.7);border:1px solid #CFE1DA;border-radius:999px;padding:8px 14px 8px 8px;margin-bottom:22px;backdrop-filter:blur(6px)}
.etq i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bosque);color:#fff;font:600 11px var(--serif)}
.bg-oscuro .etq,.bg-bosque .etq,.atmo-oscuro .etq,.hero .etq,.hero-int .etq,.demo .etq{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--menta)}
.bg-oscuro .etq i,.bg-bosque .etq i,.atmo-oscuro .etq i,.hero .etq i,.hero-int .etq i,.demo .etq i{background:var(--menta);color:var(--tinta2)}
.cab{max-width:820px;margin-bottom:46px}

/* ---- botones con relieve ---- */
.btn{border-radius:10px;min-height:52px;padding:13px 22px;font-size:16px;transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s}
.btn.p,.btn.g{background:linear-gradient(135deg,var(--bosque2) 0%,var(--bosque) 55%,var(--tinta) 100%);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(31,78,70,.32),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.p:hover,.btn.g:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(31,78,70,.38),inset 0 1px 0 rgba(255,255,255,.14);color:#fff}
.btn.menta{background:linear-gradient(135deg,#BCE8D6 0%,var(--menta) 55%,var(--menta2) 100%);color:var(--tinta2);border-color:transparent;box-shadow:0 12px 30px rgba(159,216,196,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.menta:hover{transform:translateY(-2px);color:var(--tinta2);box-shadow:0 18px 38px rgba(159,216,196,.36),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.s{border-color:#C9D6D1;background:#fff}
.btn.s:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,56,50,.10)}
.btn.borde-claro{border-color:rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.btn.borde-claro:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.btn.grande{min-height:60px;padding:15px 26px;font-size:17px;border-radius:12px}
.btn.grande svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.btn,.btn svg{transition:none}.btn:hover{transform:none}}

/* ---- cabecera: marca + menú sofisticado (18/9) ---- */
:root{--marca:'Sora','IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.topline{background:var(--tinta2)}
header.top{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.9);border-bottom:1px solid rgba(21,56,50,.08);transition:background .25s,border-color .25s,box-shadow .25s}
header.top .wrap{min-height:76px}
/* marca */
.logo{gap:12px}
.logo .tile{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#2A645A 0%,var(--bosque) 55%,var(--tinta) 100%);color:#fff;box-shadow:0 6px 16px rgba(21,56,50,.22),inset 0 1px 0 rgba(255,255,255,.18);flex:none}
.logo .tile svg{width:26px;height:26px}
.logo .nom{display:block}
.logo .w{font-family:var(--marca);font-weight:700;font-size:19.5px;letter-spacing:-.025em;text-transform:none;color:var(--tinta);line-height:1}
.logo .d{font-family:var(--marca);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--orotxt);margin-top:5px}
footer .logo .w{font-size:17px}footer .logo .d{font-size:9.5px}footer .logo .tile{width:38px;height:38px}footer .logo .tile svg{width:23px;height:23px}
/* menú en píldora (PC) */
nav.nav{gap:2px;padding:5px;border-radius:999px;background:rgba(21,56,50,.055);border:1px solid rgba(21,56,50,.07)}
nav.nav a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:#33403D;padding:9px 15px;border:0;border-radius:999px;transition:background .18s,color .18s,box-shadow .18s}
nav.nav a>svg{display:none}
nav.nav a:hover{background:#fff;color:var(--tinta);box-shadow:0 4px 12px rgba(21,56,50,.1)}
nav.nav a.act{background:#fff;color:var(--bosque);box-shadow:0 4px 12px rgba(21,56,50,.12)}
nav.nav a.act::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oro);margin-right:2px}
nav.nav a.ct{margin-left:6px;background:var(--bosque);color:#fff;border:0;border-radius:999px;padding:10px 12px 10px 18px;box-shadow:0 8px 20px rgba(31,78,70,.24)}
nav.nav a.ct>svg{display:block;width:16px;height:16px;transition:transform .18s}
nav.nav a.ct:hover{background:var(--tinta);color:#fff}
nav.nav a.ct:hover>svg{transform:translateX(3px)}
.menu-btn{border:1px solid rgba(21,56,50,.14);border-radius:999px;padding:9px 14px 9px 12px;background:#fff;gap:8px;color:var(--tinta);font-family:var(--sans)}
.menu-btn[aria-expanded="true"] .i-abrir{display:none}.menu-btn[aria-expanded="true"] .i-cerrar{display:inline-flex}
.menu-btn .i-abrir{display:inline-flex}.menu-btn .i-cerrar{display:none}
.menu-btn .i-abrir svg,.menu-btn .i-cerrar svg{width:18px;height:18px;display:block}
.nav-pie{display:none}
/* menú del celular: hoja completa */
@media (max-width:900px){
  html.menu-abierto,html.menu-abierto body{overflow:hidden}
  nav.nav{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;padding:98px 22px 26px;border:0;border-radius:0;gap:0;background:linear-gradient(180deg,#123630 0%,#0F2A26 60%,#0C221F 100%);box-shadow:none;z-index:40;overflow:auto}
  nav.nav.abierto{display:flex;animation:navin .28s ease-out}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  nav.nav a{display:flex;justify-content:space-between;align-items:center;font-family:var(--marca);font-size:24px;font-weight:600;letter-spacing:-.01em;color:#E6EFEC;padding:18px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1);background:none;box-shadow:none}
  nav.nav a>svg{display:block;width:22px;height:22px;color:var(--menta);opacity:.85}
  nav.nav a:hover{background:none;box-shadow:none;color:#fff}
  nav.nav a.act{background:none;box-shadow:none;color:var(--menta)}
  nav.nav a.act::before{display:none}
  nav.nav a.ct{margin:28px 0 0;justify-content:center;gap:10px;background:var(--menta);color:var(--tinta2);font-size:18px;font-weight:700;padding:16px 18px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
  nav.nav a.ct>svg{color:var(--tinta2);opacity:1}
  .nav-pie{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:26px;font-size:13px;color:#9FB3AD}
  .nav-pie span{display:inline-flex;align-items:center;gap:8px}.nav-pie svg{width:15px;height:15px;color:var(--menta)}
  html.menu-abierto header.top{position:sticky;z-index:50;backdrop-filter:none;-webkit-backdrop-filter:none;background:#0F2A26!important;border-bottom-color:rgba(255,255,255,.08)!important}
  html.menu-abierto .logo,html.menu-abierto .menu-btn{position:relative;z-index:41}
  html.menu-abierto .logo .w{color:#fff}html.menu-abierto .logo .d{color:#E5C97C}
  html.menu-abierto .logo .tile{background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
  html.menu-abierto .menu-btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
  html.menu-abierto .topline{display:none}
  .logo .w{font-size:17px}.logo .d{font-size:9.5px;letter-spacing:.18em}.logo .tile{width:38px;height:38px}.logo .tile svg{width:23px;height:23px}
}

/* =====================================================================
   PRIMERA PANTALLA sobre lámina (portada y ventanilla)
   ===================================================================== */
.hero{position:relative;overflow:hidden;color:#E6EFEC;background:#0F2A26;padding:48px 0 120px}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:38px;align-items:start}
.hero h1{color:#fff;font-size:clamp(34px,9vw,48px)}
.hero .lead{color:#D6E4DF;margin-top:18px}
.hero .lead b{color:#fff}
.hero .acts{margin-top:26px}
.hero .nota{color:#A9BBB5;font-size:14px;margin-top:14px}
.hero .quever{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--menta);margin:26px 0 8px}
.hero .chips{margin:0;justify-content:flex-start}
.hero .chips button{border-color:rgba(255,255,255,.28);background:rgba(15,42,38,.35);font-size:13.5px;padding:9px 13px;min-height:40px;backdrop-filter:blur(6px)}
.hero .chips button.on{background:var(--menta);border-color:var(--menta);color:var(--tinta2)}
.pruebas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pruebas span{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:#D6E4DF;background:rgba(15,42,38,.42);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px 8px 10px;backdrop-filter:blur(8px)}
.pruebas span b{font-family:var(--serif);font-weight:600;font-size:18px;color:#fff;line-height:1}
.pruebas span svg{width:16px;height:16px;color:var(--menta)}
.hero-demo{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
/* El celular es el de la lámina (Higgsfield). El chat vivo se dibuja sobre su pantalla vacía.
   --pw/--ph = tamaño con el que se pinta la lámina · --sw = ancho de la pantalla del celular · 1u = 1,1 % de ese ancho */
.hero .escena{position:relative}
.hero .ph{position:absolute;width:var(--sw);margin:0;padding:0;background:transparent;border-radius:0;box-shadow:none}
.hero .ph .scr{height:100%;border-radius:calc(var(--sw)*.135);background:#ECE6D8}
.hero .ph .bar{position:relative;padding:calc(var(--u)*11.5) calc(var(--u)*4) calc(var(--u)*3.4);gap:calc(var(--u)*3)}
.hero .ph .bar::before{content:"";position:absolute;left:50%;top:calc(var(--u)*2.6);transform:translateX(-50%);width:calc(var(--u)*27);height:calc(var(--u)*7.4);border-radius:999px;background:#000}
.hero .ph .bar .av{width:calc(var(--u)*10.5);height:calc(var(--u)*10.5)}
.hero .ph .bar .av svg{width:calc(var(--u)*5.6);height:calc(var(--u)*5.6)}
.hero .ph .bar .n{font-size:calc(var(--u)*4.1)}
.hero .ph .bar .n small{font-size:calc(var(--u)*3.2)}
.hero .chat{padding:calc(var(--u)*3.8) calc(var(--u)*3.4) calc(var(--u)*2);gap:calc(var(--u)*2.3)}
.hero .chat .dia{font-size:calc(var(--u)*3.1);padding:calc(var(--u)*.8) calc(var(--u)*2.6);border-radius:calc(var(--u)*1.2)}
.hero .msj{font-size:calc(var(--u)*3.85);line-height:1.4;padding:calc(var(--u)*2.5) calc(var(--u)*3.3) calc(var(--u)*2.2);border-radius:calc(var(--u)*3)}
.hero .msj .h{font-size:calc(var(--u)*2.9);margin-top:calc(var(--u)*1)}
.hero .msj .doc{gap:calc(var(--u)*2.5);margin:calc(var(--u)*2.2) 0;padding:calc(var(--u)*2.5) calc(var(--u)*2.8);font-size:calc(var(--u)*3.6);border-radius:calc(var(--u)*1.8)}
.hero .msj .doc svg{width:calc(var(--u)*5.6);height:calc(var(--u)*5.6)}
.hero .msj .doc small{font-size:calc(var(--u)*3.1)}
.hero .msj .pay{font-size:calc(var(--u)*3.6);padding:calc(var(--u)*2.4);border-radius:calc(var(--u)*1.8);margin:calc(var(--u)*2.2) 0 calc(var(--u)*.5)}
.hero .msj .foto{height:calc(var(--u)*28);font-size:calc(var(--u)*3.3);border-radius:calc(var(--u)*1.8);gap:calc(var(--u)*2)}
.hero .msj .foto svg{width:calc(var(--u)*5.6);height:calc(var(--u)*5.6)}
.hero .msj.tip{font-size:calc(var(--u)*3.4)}
.hero .escribiendo{padding:calc(var(--u)*1.6) calc(var(--u)*.5);gap:calc(var(--u)*1.1)}
.hero .escribiendo i{width:calc(var(--u)*1.7);height:calc(var(--u)*1.7)}
.hero .ph .in{padding:calc(var(--u)*2.6) calc(var(--u)*3.3) calc(var(--u)*6);gap:calc(var(--u)*2.2)}
.hero .ph .in span{font-size:calc(var(--u)*3.6);padding:calc(var(--u)*3) calc(var(--u)*4)}
.hero .ph .in i{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.hero .ph .in i svg{width:calc(var(--u)*5);height:calc(var(--u)*5)}
/* tarjetas de cristal */
.flot{display:flex;align-items:center;gap:11px;background:rgba(10,34,30,.66);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 14px;box-shadow:0 18px 44px rgba(0,0,0,.28);font-size:13.5px;line-height:1.2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.flot b{display:block;font-weight:600;font-size:13.5px}
.flot small{display:block;color:#C9D8D3;font-size:12px;margin-top:2px}
.flot .ico{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:rgba(159,216,196,.22);color:var(--menta)}
.flot .ico svg{width:19px;height:19px}
.flot.oro .ico{background:rgba(184,137,43,.28);color:#F0D48A}
.flotantes{display:flex;flex-direction:column;gap:10px;width:min(360px,100%)}

  .hero .miga{font-size:13.5px;color:#B7C7C1;margin-bottom:16px}.hero .miga a{color:#B7C7C1}
@media (min-width:1000px){.hero .miga{font-size:.85vw;margin-bottom:1.2vw}}
/* PC ancho: la lámina manda. El celular del chat se posiciona sobre la pantalla vacía del celular de la imagen. */
@media (min-width:1000px){
  .lamina header.top{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent}
  .lamina header.top .logo,.lamina header.top .logo .w{color:#fff}
  .lamina header.top .logo .d{color:#E5C97C}
  .lamina header.top .logo .tile{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:none;backdrop-filter:blur(8px)}
  .lamina header.top nav.nav{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .lamina header.top nav.nav a{color:#E6EFEC}
  .lamina header.top nav.nav a:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
  .lamina header.top nav.nav a.act{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
  .lamina header.top nav.nav a.act::before{background:var(--menta)}
  .lamina header.top nav.nav a.ct{background:var(--menta);color:var(--tinta2);box-shadow:0 8px 20px rgba(0,0,0,.2)}
  .lamina header.top nav.nav a.ct:hover{background:#fff;color:var(--tinta2)}
  .lamina header.top.pegada{background:rgba(15,42,38,.86);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.18)}
  .lamina .topline{display:none}
  /* La lámina (hero_pc.webp, 2688×1520) se pinta a «cover» centrada al 50 % / 70 %. Con unidades de contenedor
     calculamos dónde queda de verdad la lámina (--px/--py, --pw/--ph) y sobre ella colocamos texto, celular y tarjetas.
     Pantalla del celular medida en la lámina: izq 57,961 % · arriba 24,803 % · ancho 13,728 % · alto 50,724 %. */
  .hero{container-type:size;height:max(100vh,47vw);padding:0;display:block;background:#0F2A26 url(fondos/hero_pc.webp) no-repeat;background-size:cover;background-position:50% 70%;
    --pw:max(100cqw,calc(100cqh*1.768421));--ph:calc(var(--pw)/1.768421);--px:calc((100cqw - var(--pw))*.5);--py:calc((100cqh - var(--ph))*.7);
    --sw:calc(var(--pw)*.13728);--u:calc(var(--sw)*.0116);--fs:calc(var(--pw)/100)}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,32,28,.74) 0%,rgba(10,32,28,.55) 30%,rgba(10,32,28,0) 54%)}
  .hero .wrap{position:absolute;inset:0;max-width:none;padding:0;display:block}
  .hero .texto{position:absolute;left:calc(var(--px) + var(--pw)*.095);top:calc(var(--py) + var(--ph)*.52);transform:translateY(-50%);width:calc(var(--pw)*.33)}
  .hero h1{font-size:calc(var(--fs)*3.1);max-width:none;line-height:1.04}
  .hero .lead{font-size:calc(var(--fs)*1.12);max-width:none;margin-top:calc(var(--fs)*1.2);line-height:1.5}
  .hero .etq{font-size:calc(var(--fs)*.8);padding:calc(var(--fs)*.45) calc(var(--fs)*.9) calc(var(--fs)*.45) calc(var(--fs)*.45);margin-bottom:calc(var(--fs)*1)}
  .hero .etq i{width:calc(var(--fs)*1.5);height:calc(var(--fs)*1.5);font-size:calc(var(--fs)*.75)}
  .hero .acts{margin-top:calc(var(--fs)*1.5);gap:calc(var(--fs)*.7)}
  .hero .btn{font-size:calc(var(--fs)*.98);min-height:calc(var(--fs)*3.3);padding:calc(var(--fs)*.75) calc(var(--fs)*1.4);border-radius:calc(var(--fs)*.7)}
  .hero .btn svg{width:calc(var(--fs)*1.2);height:calc(var(--fs)*1.2)}
  .hero .quever{font-size:calc(var(--fs)*.8);margin:calc(var(--fs)*1.8) 0 calc(var(--fs)*.5)}
  .hero .chips{gap:calc(var(--fs)*.5)}
  .hero .chips button{font-size:calc(var(--fs)*.86);padding:calc(var(--fs)*.55) calc(var(--fs)*.9);min-height:calc(var(--fs)*2.5)}
  .pruebas{margin-top:calc(var(--fs)*1.4);gap:calc(var(--fs)*.55);max-width:none}
  .pruebas span{font-size:calc(var(--fs)*.88);padding:calc(var(--fs)*.5) calc(var(--fs)*.9) calc(var(--fs)*.5) calc(var(--fs)*.7);gap:calc(var(--fs)*.5)}
  .pruebas span b{font-size:calc(var(--fs)*1.15)}
  .pruebas span svg{width:calc(var(--fs)*1);height:calc(var(--fs)*1)}
  .hero .nota{font-size:calc(var(--fs)*.82);margin-top:calc(var(--fs)*1);max-width:none}
  /* el celular: la caja .hero-demo ES la pantalla del celular de la lámina */
  .hero-demo{position:absolute;left:calc(var(--px) + var(--pw)*.57961);top:calc(var(--py) + var(--ph)*.21974);width:var(--sw);height:calc(var(--ph)*.53552);display:block}
  .hero .escena{position:absolute;inset:0}
  .hero .ph{inset:0;width:100%}
  /* tarjetas de cristal: posiciones en fracción de la lámina, relativas a la pantalla del celular */
  .flotantes{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
  .flot{position:absolute;width:calc(var(--pw)*.165);max-width:none;font-size:calc(var(--fs)*.92);padding:calc(var(--fs)*.75) calc(var(--fs)*.95);gap:calc(var(--fs)*.75);border-radius:calc(var(--fs)*.9);animation:flota 6s ease-in-out infinite;z-index:2}
  .flot b{font-size:calc(var(--fs)*.92)}.flot small{font-size:calc(var(--fs)*.8)}
  .flot .ico{width:calc(var(--fs)*2.4);height:calc(var(--fs)*2.4);border-radius:calc(var(--fs)*.65)}.flot .ico svg{width:calc(var(--fs)*1.25);height:calc(var(--fs)*1.25)}
  .flot.a{left:calc(var(--pw)*-.173);top:calc(var(--ph)*.0583);animation-delay:-1.5s}
  .flot.c{left:calc(var(--pw)*-.167);top:calc(var(--ph)*.3633);animation-delay:-5s}
  .flot.b{left:calc(var(--pw)*.155);top:calc(var(--ph)*.4433);animation-delay:-3.5s}
  .hero .ejemplos{position:absolute;left:112%;top:16.7%;width:125%;padding:calc(var(--fs)*1) calc(var(--fs)*1.05) calc(var(--fs)*1.1);border-radius:calc(var(--fs)*1);background:rgba(10,34,30,.62);border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 44px rgba(0,0,0,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:3}
  .hero .ejemplos::before{content:"";position:absolute;left:calc(var(--fs)*-.55);top:calc(var(--fs)*1.6);width:calc(var(--fs)*1.1);height:calc(var(--fs)*1.1);background:inherit;border-left:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);transform:rotate(45deg)}
  .hero .ejemplos .quever{margin:0 0 calc(var(--fs)*.6)}
  .hero .ejemplos .chips{flex-direction:column;align-items:stretch;gap:calc(var(--fs)*.4)}
  .hero .ejemplos .chips button{text-align:left;width:100%;padding-left:calc(var(--fs)*.8)}
  @keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5vw)}}
  @media (prefers-reduced-motion:reduce){.flot{animation:none}}
}
@media (min-width:1500px){.hero h1{font-size:calc(var(--fs)*3)}}

/* franja de confianza: tarjetas que montan sobre la primera pantalla */
.confianza{border:0;background:transparent;position:relative;z-index:3;margin:calc(var(--sp) * -1 - 84px) 0 40px}
.confianza .wrap{gap:16px}
.confianza .t{margin:0;padding:22px 20px;border:1px solid var(--linea);border-radius:var(--r2);background:#fff;box-shadow:0 18px 40px rgba(15,42,38,.14);transition:transform .18s,box-shadow .18s}
.confianza .t:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(15,42,38,.18)}
.confianza .t svg{width:34px;height:34px;padding:7px;border-radius:9px;background:var(--verdeclaro);color:var(--bosque);margin-top:0}
.confianza .t:last-child svg{background:var(--oro2);color:var(--orotxt)}
@media (min-width:1000px){.confianza{margin-top:calc(var(--sp) * -1 - 3.6vw)}}
@media (max-width:900px){.confianza .t,.confianza .t:nth-child(odd){border:1px solid var(--linea);margin:0;padding:20px}.confianza .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.confianza .wrap{grid-template-columns:1fr}.confianza{margin-top:calc(var(--sp) * -1 - 64px)}}

/* =====================================================================
   ATMÓSFERAS DE SECCIÓN (láminas vaciadas de fondo; el centro queda calmo)
   ===================================================================== */
.atmo{position:relative;isolation:isolate;display:flex;flex-direction:column;clip-path:inset(-140px 0 0 0)}
.atmo>.wrap,.atmo>.confianza{position:relative;z-index:1;width:100%}
/* La lámina NO se estira a la altura de la sección (en celular las secciones son altísimas y salía una mancha borrosa con costuras).
   Va en una capa pegajosa del tamaño de la ventana: acompaña al lector mientras baja por la sección y la siguiente la tapa como una cortina. */
.atmo::before,footer.pie-lamina::before{content:"";display:block;position:sticky;top:0;z-index:-1;height:100vh;height:100lvh;
  margin:calc(var(--sp,96px)*-1) 0 calc(var(--sp,96px) - 100vh);margin-bottom:calc(var(--sp,96px) - 100lvh);
  background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none}
.atmo-luz{background-color:#F6F2EA}.atmo-luz::before{background-image:url(fondos/atm_luz_movil.webp)}
.atmo-piedra{background-color:#EDE7DA}.atmo-piedra::before{background-image:url(fondos/atm_piedra_movil.webp)}
.atmo-menta{background-color:#E6EFEC}.atmo-menta::before{background-image:url(fondos/atm_menta_movil.webp)}
.atmo-oscuro{background-color:#153832;color:#E3ECE9}.atmo-oscuro::before{background-image:url(fondos/atm_oscuro_movil.webp)}
.atmo-oscuro h2,.atmo-oscuro h3{color:#fff}.atmo-oscuro .lead{color:#C9D8D3}
.atmo-luz2{background-color:#F2E9DC}.atmo-luz2::before{background-image:url(fondos/atm_luz2_movil.webp)}
.atmo-menta2{background-color:#DAEBE5}.atmo-menta2::before{background-image:url(fondos/atm_menta2_movil.webp)}
.atmo-piedra2{background-color:#E8DDCC}.atmo-piedra2::before{background-image:url(fondos/atm_piedra2_movil.webp)}
.atmo-oscuro2{background-color:#01201C;color:#E3ECE9}.atmo-oscuro2::before{background-image:url(fondos/atm_oscuro2_movil.webp)}
.atmo-oscuro2 h2,.atmo-oscuro2 h3{color:#fff}.atmo-oscuro2 .lead{color:#C9D8D3}
@media (min-width:901px){
  .atmo-luz::before{background-image:url(fondos/atm_luz_pc.webp)}
  .atmo-piedra::before{background-image:url(fondos/atm_piedra_pc.webp)}
  .atmo-menta::before{background-image:url(fondos/atm_menta_pc.webp)}
  .atmo-oscuro::before{background-image:url(fondos/atm_oscuro_pc.webp)}
  .atmo-luz2::before{background-image:url(fondos/atm_luz2_pc.webp)}
  .atmo-menta2::before{background-image:url(fondos/atm_menta2_pc.webp)}
  .atmo-piedra2::before{background-image:url(fondos/atm_piedra2_pc.webp)}
  .atmo-oscuro2::before{background-image:url(fondos/atm_oscuro2_pc.webp)}
}
.tarj{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);box-shadow:0 18px 44px rgba(15,42,38,.10)}

/* ---- para quién (vecino / municipalidad) ---- */
.quien{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.quien .q{padding:32px 32px 28px;display:flex;flex-direction:column}
.quien .q>svg{width:54px;height:54px;padding:13px;border-radius:14px;background:var(--verdeclaro);color:var(--bosque);margin-bottom:18px}
.quien .q.muni>svg{background:var(--oro2);color:var(--orotxt)}
.quien .q h3{font-size:clamp(22px,2.2vw,27px);margin-bottom:6px}
.quien .q .sub{color:var(--gris);font-size:15.5px;margin-bottom:16px}
.quien .q .lista li{font-size:16px;margin-bottom:11px}
.quien .q .lista li b{color:var(--tinta)}
.quien .q .acts{margin-top:auto;padding-top:18px}
@media (max-width:900px){.quien{grid-template-columns:1fr}.quien .q{padding:26px 22px}}

/* ---- cómo funciona: tres pasos ilustrados con mini-chats ---- */
.tresp{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:tp}
.tresp .s{background:#fff;border:1px solid var(--linea);border-radius:var(--r2);box-shadow:0 10px 30px rgba(15,42,38,.06);overflow:hidden;display:flex;flex-direction:column}
.tresp .mini{background:#ECE6D8;padding:48px 16px 14px;display:flex;flex-direction:column;gap:8px;min-height:190px;position:relative}
.tresp .mini::after{counter-increment:tp;content:counter(tp);position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:9px;background:var(--bosque);color:#fff;font:600 14px var(--serif);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(31,78,70,.28)}
.tresp .mini .msj{font-size:13.2px;max-width:88%;animation:none}
.tresp .mini .msj .doc{margin:6px 0 0}
.tresp .cuerpo{padding:20px 22px 22px}
.tresp .cuerpo h3{font-size:20px;margin-bottom:8px}
.tresp .cuerpo p{font-size:15.5px;color:#3C4448;margin:0}
.tresp .cuerpo .q{font-size:13.5px;color:var(--gris);border-left:2px solid var(--oro);padding-left:10px;margin-top:10px}
.persona{margin-top:26px;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#3C4448;max-width:760px}
.persona svg{width:22px;height:22px;color:var(--bosque);flex:none;margin-top:2px}
@media (max-width:900px){.tresp{grid-template-columns:1fr}.tresp .mini{min-height:0}}

/* soluciones: tarjetas con relieve */
.tres{border-top:0;gap:20px}
.tres .m{margin:0;padding:30px 28px 28px;border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(15,42,38,.08);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.tres .m::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--bosque),var(--menta))}
.tres .m:nth-child(2)::after{background:linear-gradient(90deg,var(--oro),#E5C97C)}
.tres .m:nth-child(3)::after{background:linear-gradient(90deg,var(--tinta),var(--bosque2))}
.tres .m:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tres .m>svg{width:52px;height:52px;padding:12px;border-radius:12px;background:var(--verdeclaro);color:var(--bosque);margin-bottom:18px}
.tres .m:nth-child(2)>svg{background:var(--oro2);color:var(--orotxt)}
.tres .m h3{font-size:22px;margin-bottom:10px}
.tres .m p{font-size:16px;flex:1}
.tres .m a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-top:6px}
.tres .m a svg{width:16px;height:16px;transition:transform .18s}
.tres .m a:hover svg{transform:translateX(3px)}
@media (max-width:900px){.tres .m{padding:26px 22px}}
.modulos{border-top:0;margin-top:30px;padding-top:0}
.modulos span.mod{border-radius:999px;background:rgba(255,255,255,.85);padding:8px 14px;box-shadow:0 4px 12px rgba(15,42,38,.05);border-color:rgba(255,255,255,.9)}

/* del otro lado del mostrador: monitor real (lámina Higgsfield) con el software en miniatura dentro de la pantalla.
   1m = 1 % del ancho de la pantalla del monitor. Pantalla medida en monitor_pc.webp (2688×1520): izq 48,81 % · arriba 21,842 % · ancho 43,936 % · alto 41,974 %.
   En monitor_movil.webp (1520×2688): izq 6,579 % · arriba 33,408 % · ancho 86,842 % · alto 27,827 %. */
section.demo{position:relative;overflow:hidden;color:#E3ECE9;background:#0F2A26}
.demo h2{color:#fff}.demo .lead{color:#C9D8D3}
.demo .texto h2{margin-bottom:16px}.demo .texto .lista li{font-size:16.5px;color:#DCE6E2}.demo .texto .lista li svg{color:var(--menta)}
.demo .escena{position:relative}
.demo .pantalla{position:absolute;overflow:hidden;background:#F3F1EA}
.soft{display:flex;flex-direction:column;height:100%;font-size:calc(var(--m)*1.45);color:var(--grafito);text-align:left}
.soft .barra{display:flex;align-items:center;gap:calc(var(--m)*1.6);padding:0 calc(var(--m)*1.6);height:calc(var(--m)*4.2);background:#0F2A26;color:#DCE6E2;font-size:calc(var(--m)*1.35);flex:none;overflow:hidden}
.soft .luces{display:inline-flex;gap:calc(var(--m)*.6);flex:none}
.soft .luces i{width:calc(var(--m)*1.1);height:calc(var(--m)*1.1);border-radius:50%;background:#C9705E}
.soft .luces i:nth-child(2){background:#D9B25A}.soft .luces i:last-child{background:#6DB58F}
.soft .tit,.soft .usr{display:inline-flex;align-items:center;gap:calc(var(--m)*.7);white-space:nowrap}
.soft .tit{font-weight:600;color:#fff}
.soft .usr{margin-left:auto;color:#A9BBB5}
.soft .barra svg{width:calc(var(--m)*1.6);height:calc(var(--m)*1.6);color:var(--menta);flex:none}
.soft .cuerpo{flex:1;display:grid;grid-template-columns:calc(var(--m)*22) 1fr;min-height:0}
.soft .lat{background:#153832;padding:calc(var(--m)*1.4) calc(var(--m)*1);display:flex;flex-direction:column;gap:calc(var(--m)*.3);overflow:hidden}
.soft .lat span{display:flex;align-items:center;gap:calc(var(--m)*.9);padding:calc(var(--m)*.8) calc(var(--m)*1);border-radius:calc(var(--m)*.6);color:#B7C7C1;font-size:calc(var(--m)*1.35);white-space:nowrap}
.soft .lat span.on{background:rgba(159,216,196,.16);color:#fff}
.soft .lat span svg{width:calc(var(--m)*1.5);height:calc(var(--m)*1.5);flex:none}
.soft .lat span i{margin-left:auto;font-style:normal;font-size:calc(var(--m)*1.1);background:var(--menta);color:var(--tinta2);border-radius:999px;padding:0 calc(var(--m)*.6);font-weight:600;line-height:calc(var(--m)*1.7)}
.soft .registro{border:0;border-radius:0;box-shadow:none;background:#F3F1EA;min-height:0;overflow:hidden}
.soft .registro .cabr{flex-wrap:nowrap;padding:calc(var(--m)*1.1) calc(var(--m)*1.8);gap:calc(var(--m)*1)}
.soft .registro .cabr h4{font-size:calc(var(--m)*1.55)}
.soft .registro .cabr small{font-size:calc(var(--m)*1.15);margin-top:calc(var(--m)*.2)}
.soft .registro .cabr .pill{white-space:nowrap}
.soft .pill{font-size:calc(var(--m)*1.1);padding:calc(var(--m)*.25) calc(var(--m)*.8);border-radius:calc(var(--m)*.3);gap:calc(var(--m)*.5)}
.soft .registro .cifras div{padding:calc(var(--m)*1.1) calc(var(--m)*1.8)}
.soft .registro .cifras b{font-size:calc(var(--m)*2.6)}
.soft .registro .cifras span{font-size:calc(var(--m)*1.15)}
.soft .registro ol{min-height:0;padding:calc(var(--m)*.4) 0}
.soft .registro li{grid-template-columns:calc(var(--m)*2) 1fr auto;gap:calc(var(--m)*1.1);padding:calc(var(--m)*.9) calc(var(--m)*1.8);font-size:calc(var(--m)*1.4)}
.soft .registro li svg{width:calc(var(--m)*1.9);height:calc(var(--m)*1.9)}
.soft .registro li .t small{font-size:calc(var(--m)*1.15);margin-top:0}
.soft .registro li .h{grid-column:auto;text-align:right;font-size:calc(var(--m)*1.15)}
.soft .registro li .h .pill{margin-left:calc(var(--m)*.6)}
@media (min-width:1000px){
  section.demo{aspect-ratio:2688/1520;padding:0;display:block;container-type:inline-size;background:#0F2A26 url(fondos/monitor_pc.webp) center/cover no-repeat}
  .demo .wrap{position:absolute;inset:0;max-width:none;padding:0;display:block}
  .demo .texto{position:absolute;left:6.5cqw;top:50%;transform:translateY(-50%);width:36cqw}
  .demo .texto h2{font-size:2.3cqw;line-height:1.1;margin-bottom:.9cqw}
  .demo .texto .lead{font-size:1.05cqw;margin-top:0;line-height:1.5}
  .demo .texto .lista{margin:1.2cqw 0 0}
  .demo .texto .lista li{font-size:.92cqw;margin:0 0 .55cqw;padding-left:1.7cqw}
  .demo .texto .lista li svg{width:1.1cqw;height:1.1cqw;top:.15cqw}
  .demo .texto .etq{font-size:.72cqw;padding:.4cqw .8cqw .4cqw .4cqw;margin-bottom:1.1cqw;gap:.5cqw}
  .demo .texto .etq i{width:1.35cqw;height:1.35cqw;font-size:.68cqw}
  .demo .texto .acts{margin-top:1.4cqw}
  .demo .texto .btn{font-size:.95cqw;min-height:3cqw;padding:.7cqw 1.3cqw;border-radius:.6cqw;gap:.6cqw}
  .demo .texto .btn svg{width:1.1cqw;height:1.1cqw}
  .demo .escena{position:absolute;inset:0}
  .demo .pantalla{left:48.81cqw;top:12.351cqw;width:43.936cqw;height:23.735cqw;--m:.43936cqw;border-radius:.12cqw}
}
@media (max-width:999px){
  section.demo{padding:56px 0 0}
  .demo .wrap{display:block}
  .demo .texto .acts{margin-top:22px}
  .demo .escena{margin:34px -22px 0;--pw:112vw;--ph:calc(var(--pw)*1.768421);height:calc(var(--ph)*.62);background:#0F2A26 url(fondos/monitor_movil.webp) no-repeat;background-size:var(--pw) auto;background-position:50% calc(var(--ph)*-.2)}
  .demo .pantalla{left:calc(50% - var(--pw)*.43421);top:calc(var(--ph)*.13408);width:calc(var(--pw)*.86842);height:calc(var(--ph)*.27827);--m:calc(var(--pw)*.0086842*1.75);border-radius:2px}
  .soft .cuerpo{grid-template-columns:calc(var(--m)*4.6) 1fr}
  .soft .lat{padding:calc(var(--m)*1) calc(var(--m)*.7)}
  .soft .lat span{padding:calc(var(--m)*.7) calc(var(--m)*.8);gap:0;font-size:0}
  .soft .lat span i{display:none}
  .soft .usr{display:none}
}

/* cómo cobramos */
.cobro .lista li{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);padding:16px 18px 16px 52px;margin-bottom:10px;font-size:16px;box-shadow:0 6px 18px rgba(15,42,38,.05)}
.cobro .lista li svg{left:18px;top:19px;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--verdeclaro)}
.cobro .caja{border-radius:var(--r2);box-shadow:0 14px 34px rgba(15,42,38,.08);background:linear-gradient(135deg,#fff,var(--oro2));border-color:rgba(255,255,255,.9)}

/* cómo trabajamos: pasos con relieve */
.pasos{gap:18px}
.pasos .p{border-top:0;padding:30px 24px 24px;background:#fff;border:1px solid var(--linea);border-radius:var(--r2);box-shadow:0 10px 30px rgba(15,42,38,.06)}
.pasos .p::before{top:-16px;left:22px;width:36px;height:36px;border-radius:10px;font-size:16px;box-shadow:0 8px 18px rgba(31,78,70,.28)}
.pasos .p h3{font-size:20px;margin:6px 0 8px}
.atmo .pasos .p{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.9)}

/* lo que no hacemos */
.no2{gap:12px 16px}
.no2 li{background:#fff;border:1px solid var(--linea);border-radius:var(--r2);padding:16px 18px 16px 52px;font-size:15.5px}
.no2 li svg{left:18px;top:18px;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--piedra);color:var(--gris)}

/* vecino + guaraní */
.vecino .caja{border-radius:var(--r2);border-left-width:5px;box-shadow:0 14px 34px rgba(15,42,38,.09);padding:30px 32px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
.guarani{border-radius:var(--r2);background:linear-gradient(160deg,var(--tinta2),var(--bosque));box-shadow:0 24px 50px rgba(15,42,38,.24);padding:30px 32px}
.guarani h3{font-size:36px}

/* empresa */
.datos{border-radius:var(--r2);box-shadow:var(--sombra)}

/* llamada final */
.cta{--sp:96px;padding:var(--sp) 0}
.cta h2{font-size:clamp(28px,3.4vw,42px)}
.cta p{font-size:18px;color:#D6E4DF}
.cta.atmo-oscuro .wrap{position:relative}

/* pie: lámina oscura, texto claro */
footer{--sp:56px;position:relative;isolation:isolate;display:flex;flex-direction:column;clip-path:inset(0);background:#01201C;border-top:1px solid rgba(255,255,255,.09);padding:56px 0 30px;color:#A9BBB5}
footer .wrap{position:relative;z-index:1;width:100%}
footer.pie-lamina::before{background-image:url(fondos/atm_oscuro2_movil.webp)}
@media (min-width:901px){footer.pie-lamina::before{background-image:url(fondos/atm_oscuro2_pc.webp)}}
footer .col a{color:#D6E4DF}footer .col a:hover{color:#fff}
footer .col h4{color:#fff}
footer .small,footer .small.muted{color:#A9BBB5}
footer .legal{border-top-color:rgba(255,255,255,.14);color:#A9BBB5}
footer .logo .w{color:#fff}footer .logo .d{color:#E5C97C}
footer .logo .tile{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:none}
footer a[href^="mailto:"]{color:var(--menta)}

/* =====================================================================
   PÁGINAS INTERIORES: banda de lámina (sin celular)
   ===================================================================== */
.hero-int{position:relative;overflow:hidden;color:#E6EFEC;border-bottom:0;padding:72px 0 80px;background:#0F2A26 url(fondos/atm_hero_movil.webp) center 30%/cover no-repeat}
@media (min-width:901px){.hero-int{background-image:url(fondos/atm_hero_pc_vacio.webp);background-position:center 38%;padding:88px 0 96px}}
.hero-int::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,32,28,.74) 0%,rgba(10,32,28,.5) 45%,rgba(10,32,28,.18) 100%)}
.hero-int .wrap{position:relative}
.hero-int h1{color:#fff}
.hero-int .lead{color:#D6E4DF}.hero-int .lead b{color:#fff}
.hero-int .miga,.hero-int .miga a,.hero-int .nota,.hero-int .muted{color:#B7C7C1}
.hero-int .btn.s{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.hero-int .btn.s:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);color:#fff}
.hero-int .btn.p{background:linear-gradient(135deg,#BCE8D6 0%,var(--menta) 55%,var(--menta2) 100%);color:var(--tinta2);box-shadow:0 12px 30px rgba(159,216,196,.28)}
.hero-int .btn.p:hover{color:var(--tinta2)}
@media (max-width:900px){.hero-int{padding:48px 0 56px}}

/* comparación, niveles, cita, tarjetas, preguntas */
.comp{border-radius:var(--r2);box-shadow:var(--sombra)}
.niveles{border-top:0;gap:18px}
.niveles .n{margin:0;padding:26px 24px;border:1px solid var(--linea);border-radius:var(--r2);background:#fff;box-shadow:0 10px 30px rgba(15,42,38,.06)}
.atmo .niveles .n{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.9)}
@media (max-width:900px){.niveles .n{border:1px solid var(--linea);padding:24px 22px}}
.cita blockquote{border-left-width:5px;font-size:clamp(28px,3.4vw,44px)}
.atmo .cita{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);padding:34px 36px;box-shadow:0 18px 44px rgba(15,42,38,.10)}
@media (max-width:900px){.atmo .cita{padding:24px 22px}}
.tarjeta{border-radius:var(--r2);box-shadow:0 10px 30px rgba(15,42,38,.06)}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--r2);margin-bottom:10px;padding:0 22px}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq details[open]{box-shadow:0 12px 30px rgba(15,42,38,.07)}
.faq summary{padding:20px 44px 20px 0}
.faq summary::after{right:4px}
.faq .r{padding-bottom:22px}
form.f input,form.f textarea,form.f select{border-radius:8px}
h2+ul,h2+.lista,h2+ol{margin-top:18px}
.atmo .dos>div{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);padding:28px 30px;box-shadow:0 14px 34px rgba(15,42,38,.08)}
/* textos largos (legales) sobre lámina: tarjeta blanca de cristal para que se lean bien */
.atmo>.wrap>.prosa{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);padding:30px 34px 34px;box-shadow:0 14px 34px rgba(15,42,38,.08)}
.atmo>.wrap>.prosa>h2:first-child,.atmo .dos>.prosa>h2:first-child{margin-top:0}
@media (max-width:600px){.atmo>.wrap>.prosa,.atmo .dos>div{padding:22px 20px 24px}}
/* CTA: los dos botones en columna, mismo ancho, a la derecha */
@media (min-width:901px){.cta .acts{flex-direction:column;align-items:stretch;width:min(300px,100%);margin-left:auto}.cta .acts .btn{justify-content:center}}
/* celular: nada se sale del ancho de pantalla */
.wrap>*{min-width:0}
a[href^="mailto:"]{overflow-wrap:anywhere}
@media (max-width:600px){
  .registro .cabr{flex-wrap:wrap;padding:14px 16px}
  .registro .cabr .pill{white-space:normal;text-align:center}
  .registro .cifras div{padding:12px 10px}
  .registro .cifras b{font-size:19px}
  .registro .cifras span{font-size:11.5px}
}

/* celular: orden de la primera pantalla = título → demo (ejemplos + celular real sobre su lámina) → explicación → botones → pruebas
   Lámina hero_cel_movil.webp (1520×2688) pintada a --pw de ancho; se muestra la franja del 16 % al 85 % de su alto.
   Pantalla del celular medida: izq 28,487 % · arriba 24,07 % · ancho 42,566 % · alto 56 %. */
@media (max-width:999px){
  .hero{padding:28px 0 96px;background:linear-gradient(180deg,#143A33 0%,#0F2A26 38%,#0F2A26 100%)}
  .hero .texto{display:contents}
  .hero .wrap{gap:0}
  .hero .miga{order:0}
  .hero .etq{display:none}
  .hero h1{order:2;font-size:clamp(32px,8.6vw,44px)}
  .hero-demo{order:3;margin:18px -22px 0;padding:22px 22px 26px;gap:16px;background:#0F2A26;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);scroll-margin-top:78px;
    --pw:min(180vw,700px);--ph:calc(var(--pw)*1.768421);--sw:calc(var(--pw)*.42566);--u:calc(var(--sw)*.0112)}
  .hero .ejemplos{width:100%;order:1}
  .hero .ejemplos .quever{margin:0 0 10px;text-align:center}
  .hero .ejemplos .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero .ejemplos .chips button{width:100%;padding:9px 10px;font-size:13px;line-height:1.15}
  .hero .escena{order:2;align-self:stretch;margin:0 -22px;height:calc(var(--ph)*.69);background:#0F2A26 url(fondos/hero_cel_movil.webp) no-repeat;background-size:var(--pw) auto;background-position:50% calc(var(--ph)*-.16)}
  .hero .ph{left:calc(50% - var(--pw)*.21513);top:calc(var(--ph)*.05354);height:calc(var(--ph)*.5878)}
  .flotantes{order:3;position:relative;display:flex;flex-direction:column;gap:10px;width:min(360px,100%)}
  .hero .lead{order:4;margin-top:26px}
  .hero .acts{order:5;margin-top:22px}
  .hero .pruebas{order:6}
  .hero .nota{order:7}
}

/* Marca grande en PC (18/9, Javi: «casi no se sabe de quién es esto») */
@media (min-width:1000px){
  header.top .wrap{min-height:96px}
  .logo{gap:16px}
  .logo .tile{width:60px;height:60px;border-radius:17px}.logo .tile svg{width:37px;height:37px}
  .logo .w{font-size:30px;letter-spacing:-.02em}.logo .d{font-size:13.5px;letter-spacing:.26em;margin-top:7px}
  /* en la portada la cabecera se alinea con el texto de la primera pantalla (9,5 % de la lámina), no con la columna estrecha */
  .lamina header.top .wrap{max-width:none;padding-left:calc((100vw - max(100vw,176.8421vh))/2 + max(100vw,176.8421vh)*.095);padding-right:calc((100vw - max(100vw,176.8421vh))/2 + max(100vw,176.8421vh)*.095)}
  .lamina header.top .logo .tile{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
}

/* 21/9/2026 · Aliados e inversores (portada) */
.aliados{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aliados .a{padding:28px 26px 22px;display:flex;flex-direction:column}
.aliados .a>svg{width:50px;height:50px;padding:12px;border-radius:14px;background:var(--verdeclaro);color:var(--bosque);margin-bottom:16px}
.aliados .a h3{font-size:clamp(20px,2vw,24px);margin-bottom:6px}
.aliados .a .sub{color:var(--gris);font-size:15px;margin-bottom:14px}
.aliados .a .lista li{font-size:15.5px;margin-bottom:10px}
@media(max-width:900px){.aliados{grid-template-columns:1fr}}

/* =====================================================================
   8/10/2026 · FLUIR (Javi: «se nota el corte… muy brusco» y «el diseño solo está en la primera pantalla»)
   1) Cada franja se funde con la anterior: arriba arranca con el color de la franja de antes y abajo
      termina en su propio color. Nunca hay una raya donde cambia el fondo.
   2) Movimiento al bajar: las piezas aparecen escalonadas, el gráfico de la tarifa y la línea de tiempo se dibujan.
   3) Número grande de cada franja, en oro de contorno, como marca de agua.
   ===================================================================== */
.hero,.hero-int,section.demo{--c:#0F2A26}
.atmo-luz{--c:#F6F2EA}.atmo-piedra{--c:#EDE7DA}.atmo-menta{--c:#E6EFEC}.atmo-oscuro{--c:#153832}
.atmo-luz2{--c:#F2E9DC}.atmo-menta2{--c:#DAEBE5}.atmo-piedra2{--c:#E8DDCC}.atmo-oscuro2{--c:#01201C}
.hero+*,.hero-int+*,section.demo+*{--prev:#0F2A26}
.atmo-luz+*{--prev:#F6F2EA}.atmo-piedra+*{--prev:#EDE7DA}.atmo-menta+*{--prev:#E6EFEC}.atmo-oscuro+*{--prev:#153832}
.atmo-luz2+*{--prev:#F2E9DC}.atmo-menta2+*{--prev:#DAEBE5}.atmo-piedra2+*{--prev:#E8DDCC}.atmo-oscuro2+*{--prev:#01201C}
footer.pie-lamina{--prev:#153832;--c:#01201C}
/* paso de oscuro a claro (o al revés): fundido más largo para que no ensucie */
.hero+.atmo,.hero-int+.atmo,section.demo+.atmo,.atmo-oscuro2+.atmo,.atmo-oscuro+.atmo{--ft:300px}
.atmo+section.demo,.atmo+.atmo-oscuro,.atmo+.atmo-oscuro2{--ft:280px}
.atmo::after,section.demo::after,footer.pie-lamina::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--prev,transparent) 0,transparent var(--ft,230px)),linear-gradient(0deg,var(--c,transparent) 0,transparent var(--fb,170px))}
/* en las franjas con foto, el fundido de arriba empieza en el borde real (el trozo de cortina va liso con el color de la franja de antes) */
.atmo::after{background:linear-gradient(180deg,var(--prev,transparent) 0,var(--prev,transparent) var(--sp,96px),transparent calc(var(--sp,96px) + var(--ft,230px))),linear-gradient(0deg,var(--c,transparent) 0,var(--c,transparent) var(--sp,96px),transparent calc(var(--sp,96px) + var(--fb,170px)))}
/* la foto de cada franja empieza 96px por encima (efecto cortina): el fundido tiene que cubrir también ese trozo, si no queda la raya */
.atmo::after{top:calc(var(--sp,96px)*-1)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:0;pointer-events:none;background:linear-gradient(0deg,#0F2A26,rgba(15,42,38,0))}
.hero .wrap{z-index:1}
section.demo .wrap{z-index:1}
@media (max-width:999px){section.demo>.wrap{position:relative}}
@media (max-width:900px){
  section.demo::after,footer.pie-lamina::after{background:linear-gradient(180deg,var(--prev,transparent) 0,transparent calc(var(--ft,230px)*.62)),linear-gradient(0deg,var(--c,transparent) 0,transparent calc(var(--fb,170px)*.6))}
  .atmo::after{background:linear-gradient(180deg,var(--prev,transparent) 0,var(--prev,transparent) var(--sp,96px),transparent calc(var(--sp,96px) + var(--ft,230px)*.62)),linear-gradient(0deg,var(--c,transparent) 0,var(--c,transparent) var(--sp,96px),transparent calc(var(--sp,96px) + var(--fb,170px)*.6))}
}

/* franja oscura «Lo que no hacemos» */
.atmo-oscuro2 h2 em{color:var(--menta)}
.atmo-oscuro2 .etq{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--menta)}
.atmo-oscuro2 .etq i{background:var(--menta);color:var(--tinta2)}
.no-banda .no2{gap:14px 18px}
.no-banda .no2 li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C9D8D3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 16px 36px rgba(0,0,0,.22);padding:18px 20px 18px 56px;transition:border-color .2s,background .2s}
.no-banda .no2 li:hover{border-color:rgba(229,201,124,.5);background:rgba(255,255,255,.09)}
.no-banda .no2 li b{color:#fff}
.no-banda .no2 li svg{left:18px;top:19px;width:26px;height:26px;padding:4px;background:rgba(229,201,124,.16);color:#E5C97C}

/* número de la franja como marca de agua */
.marca-num{position:absolute;right:22px;top:-.1em;z-index:-1;font:600 clamp(110px,15vw,220px)/1 var(--serif);color:transparent;-webkit-text-stroke:1.5px rgba(184,137,43,.34);letter-spacing:-.04em;pointer-events:none;user-select:none;transform:translateY(var(--py,0px));will-change:transform}
.atmo-oscuro .marca-num,.atmo-oscuro2 .marca-num{-webkit-text-stroke-color:rgba(229,201,124,.26)}
@media (max-width:900px){.marca-num{font-size:96px;top:-.2em;right:16px}}

/* aparición al bajar (solo si hay guion; quien no lo tenga ve todo quieto) */
.rev .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rev .rv.vis{opacity:1;transform:none}
.rev .tresp .s.rv .msj{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--d,0s) + .45s)}
.rev .tresp .s.rv .msj+.msj{transition-delay:calc(var(--d,0s) + 1s)}
.rev .tresp .s.rv.vis .msj{opacity:1;transform:none}

/* Cómo trabajamos: línea de tiempo que se dibuja */
@media (min-width:901px){
  .pasos.linea{position:relative;padding-top:62px}
  .pasos.linea::before{content:"";position:absolute;left:40px;right:calc((100% - 54px)/4 - 40px);top:17px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--oro),#E5C97C 55%,var(--menta));transform-origin:left center}
  .pasos.linea .p::before{top:-63px;left:22px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--bosque);border:2px solid var(--oro);box-shadow:0 0 0 7px rgba(184,137,43,.13),0 8px 18px rgba(31,78,70,.18)}
  .anim .pasos.linea::before{transform:scaleX(0);transition:transform 1.8s cubic-bezier(.4,.1,.2,1) .2s}
  .anim .pasos.linea .p::before{transform:scale(.3);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .35s}
  .anim .pasos.linea .p:nth-child(2)::before{transition-delay:.7s}
  .anim .pasos.linea .p:nth-child(3)::before{transition-delay:1.2s}
  .anim .pasos.linea .p:nth-child(4)::before{transition-delay:1.7s}
  .anim .pasos.linea.on::before{transform:none}
  .anim .pasos.linea.on .p::before{transform:none;opacity:1}
}

/* Cómo cobramos: dibujo de la tarifa con tope */
.graf-tope{margin:28px 0 0;padding:20px 22px 12px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r2);box-shadow:0 18px 44px rgba(15,42,38,.10)}
.graf-tope figcaption{font-size:15px;color:var(--tinta);margin-bottom:4px}
.graf-tope figcaption i{color:var(--gris)}
.graf-tope svg{display:block;width:100%;height:auto}
.gt-eje{stroke:#C9BFAE;stroke-width:1.5;fill:none}
.gt-fija{fill:var(--bosque)}
.gt-tope{stroke:var(--oro);stroke-width:2;stroke-dasharray:7 7;fill:none}
.gt-linea{stroke:var(--bosque);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.gt-punto{fill:#fff;stroke:var(--oro);stroke-width:3}
.gt-tx{font:600 19px var(--sans);fill:var(--tinta)}
.gt-tx.claro{fill:#fff}.gt-tx.oro{fill:var(--orotxt)}.gt-tx.gris{fill:var(--gris);font-weight:500;font-size:16px}
.gt-tx.cur{font-style:italic;font-weight:500;fill:var(--orotxt)}
.anim .graf-tope .gt-linea{stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.4,.1,.2,1) .3s}
.anim .graf-tope .gt-area{opacity:0;transition:opacity 1s ease 1.1s}
.anim .graf-tope .gt-tope,.anim .graf-tope .gt-tx.oro{opacity:0;transition:opacity .6s ease .9s}
.anim .graf-tope .gt-punto,.anim .graf-tope .gt-tx.cur{opacity:0;transition:opacity .6s ease 1.6s}
.anim .graf-tope.on .gt-linea{stroke-dashoffset:0}
.anim .graf-tope.on .gt-area,.anim .graf-tope.on .gt-tope,.anim .graf-tope.on .gt-tx.oro,.anim .graf-tope.on .gt-punto,.anim .graf-tope.on .gt-tx.cur{opacity:1}
@media (prefers-reduced-motion:reduce){.marca-num{transform:none}}
/* móvil: la peana del monitor se funde con el fondo en vez de cortarse en seco */
@media (max-width:999px){.demo .escena{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}}
/* tras la primera pantalla: la peana de la foto se desvanece hacia el verde oscuro antes de aclarar (sin raya) */
.hero+.atmo::after,section.demo+.atmo::after{background:linear-gradient(180deg,rgba(15,42,38,0) 0,#0F2A26 var(--sp,96px),rgba(15,42,38,0) calc(var(--sp,96px) + var(--ft,300px))),linear-gradient(0deg,var(--c) 0,var(--c) var(--sp,96px),transparent calc(var(--sp,96px) + var(--fb,170px)))}
@media (max-width:900px){.hero+.atmo::after,section.demo+.atmo::after{background:linear-gradient(180deg,rgba(15,42,38,0) 0,#0F2A26 var(--sp,64px),rgba(15,42,38,0) calc(var(--sp,64px) + 190px)),linear-gradient(0deg,var(--c) 0,var(--c) var(--sp,64px),transparent calc(var(--sp,64px) + 100px))}}
/* 8/10 · páginas interiores: línea de 3 pasos y lado izquierdo en franja oscura */
@media (min-width:901px){.pasos.t3.linea::before{right:calc((100% - 36px)/3 - 40px)}}
.no-banda .dos>div:first-child h2{color:#fff}
.no-banda .dos>div:first-child .lead{color:rgba(255,255,255,.78)}
/* 8/10 · en móvil la franja final se solapa lo mismo que las demás (64), así no tapa el último botón de la anterior */
@media (max-width:900px){.cta{--sp:64px}}
.atmo.no-banda .dos>div{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(229,201,124,.28);border-left:3px solid #E5C97C;box-shadow:0 18px 40px rgba(0,0,0,.28)}
/* 8/10 · el pie es la última franja: su foto (alta como una pantalla) no puede alargar la página por debajo → hueco blanco */
footer.pie-lamina{overflow:clip}
html{background:#01201C}