/* Naho landing v4 (15-oct-2026; zoom del inicio de vuelta el 19-oct): el rediseño que Erick aprobó el 13-oct
   (~/Documents/naho-landing-propuesta/maqueta.html). Misma marca (papel,
   verde, Fraunces + Archivo) con más ritmo: fondos que alternan, un tercer
   color cálido (barro), numeración discreta y menos trucos. Sin style= ni
   <style> en el HTML: la CSP de la landing es style-src 'self'. */
:root{
  --papel:#f6f3ec; --marfil:#fffdf8; --arena:#efe8da; --tinta:#1f1c17; --tinta2:#5f584b;
  --verde:#2d5546; --verde-osc:#1a3329; --verde-noche:#13241d; --salvia:#e3ece6;
  --ambar:#a86c1a; --barro:#b5552f; --barro-claro:#f3e2d6; --linea:#e4dccd;
  --sombra:0 24px 60px -28px rgba(31,28,23,.35);
  --r:1.25rem; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{background:var(--papel); color:var(--tinta); font:17px/1.6 "Archivo","Helvetica Neue",Arial,sans-serif; overflow-x:clip}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,serif; font-weight:500; letter-spacing:-.015em; text-wrap:balance; line-height:1.08}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h2 em, h1 em{font-style:italic; font-weight:400; color:var(--verde)}
a{color:inherit}
img{display:block; max-width:100%}
::selection{background:var(--verde); color:var(--marfil)}
.oscuro ::selection{background:#e9a882; color:var(--verde-noche)}
.cont{max-width:72rem; margin:0 auto; padding:0 1.25rem}
@media (min-width:700px){.cont{padding:0 2rem}}
.etiqueta{display:inline-flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:600; color:var(--verde)}
.etiqueta b{font-family:"Fraunces",serif; font-style:italic; font-weight:500; color:var(--barro); font-size:1rem}
.etiqueta::after{content:""; width:2.2rem; height:1px; background:currentColor; opacity:.5}
.etiqueta + h2{margin-top:1.2rem}
.oscuro .etiqueta{color:#bcd3c6}
.oscuro .etiqueta b{color:#e9a882}
.intro{font-size:1.12rem; color:var(--tinta2); max-width:38rem; margin-top:1rem}
.intro strong{color:var(--tinta); font-weight:600}
.oscuro .intro{color:#c6d4cc}
.oscuro .intro strong{color:#fff}

/* ─ botones ─ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.8rem 1.5rem;
  border-radius:999px; font-weight:600; font-size:.98rem; text-decoration:none; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn-verde{background:var(--verde); color:#fff; box-shadow:0 10px 26px -12px rgba(45,85,70,.7)}
.btn-verde:hover{background:var(--verde-osc)}
.btn-linea{border:1.5px solid rgba(31,28,23,.75); color:var(--tinta)}
.btn-marfil{background:var(--marfil); color:var(--verde-osc)}
.btn:focus-visible, a:focus-visible, summary:focus-visible{outline:2px solid var(--barro); outline-offset:3px}

/* ─ barra de arriba ─ */
nav{position:sticky; top:0; z-index:20; background:rgba(246,243,236,.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--linea)}
.nav-in{display:flex; align-items:center; gap:1rem; height:64px}
.marca{font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; text-decoration:none; letter-spacing:-.02em}
.marca i{font-style:normal; color:var(--verde)}
.nav-links{display:none; gap:1.6rem; margin-left:2.2rem; font-size:.95rem; color:var(--tinta2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--tinta)}
@media (min-width:900px){.nav-links{display:flex}}
.nav-der{margin-left:auto; display:flex; gap:.9rem; align-items:center}
.nav-der .entrar{font-weight:600; font-size:.95rem; color:var(--tinta2); text-decoration:none}
.nav-der .btn{min-height:42px; padding:.55rem 1.15rem; font-size:.92rem}

/* ─ inicio ─ */
.hero{position:relative; padding:4.5rem 0 3rem; overflow:hidden}
.hero::before{content:""; position:absolute; right:-12rem; top:-10rem; width:44rem; height:44rem; border-radius:50%;
  background:radial-gradient(closest-side, rgba(181,85,47,.14), transparent 70%); pointer-events:none}
.hero::after{content:""; position:absolute; left:-14rem; bottom:-16rem; width:40rem; height:40rem; border-radius:50%;
  background:radial-gradient(closest-side, rgba(45,85,70,.12), transparent 70%); pointer-events:none}
.hero-grid{position:relative; display:grid; gap:3rem; align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.pildora{display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .9rem .35rem .4rem; border-radius:999px;
  background:var(--marfil); border:1px solid var(--linea); font-size:.85rem; color:var(--tinta2)}
.pildora em{font-style:normal}
.pildora span{background:var(--salvia); color:var(--verde); font-weight:700; border-radius:999px; padding:.15rem .6rem; font-size:.78rem}
.hero h1{font-size:clamp(2.75rem,7vw,5.4rem); line-height:.98; margin:1.3rem 0 1.4rem; letter-spacing:-.03em}
.hero h1 em{display:block}
.hero .sub{font-size:1.18rem; color:var(--tinta2); max-width:34rem}
.hero .sub strong{color:var(--tinta); font-weight:600}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.hero-nota{font-size:.88rem; color:var(--tinta2); margin-top:.9rem}

/* ─ el teléfono (bisel, botones, isla y barra de estado: diseno-web §3) ─ */
.fono-zona{position:relative; display:flex; justify-content:center}
.fono{width:min(330px,84vw); background:#0d120f; border-radius:3rem; padding:.55rem; position:relative;
  box-shadow:0 40px 80px -30px rgba(19,36,29,.55), 0 0 0 1.5px #4a554e, inset 0 0 0 2px #000; transform:rotate(2deg)}
.fono::before{content:""; position:absolute; right:-3.5px; top:27%; width:3.5px; height:3.6rem; border-radius:0 2px 2px 0; background:#4a554e}
.fono::after{content:""; position:absolute; left:-3.5px; top:22%; width:3.5px; height:6rem; border-radius:2px 0 0 2px;
  background:linear-gradient(#4a554e 0 22%, transparent 22% 38%, #4a554e 38% 66%, transparent 66% 78%, #4a554e 78%)}
.isla{position:absolute; top:1.05rem; left:50%; transform:translateX(-50%); width:5.2rem; height:1.1rem; background:#000; border-radius:.6rem; z-index:3}
.isla::after{content:""; position:absolute; right:.28rem; top:50%; transform:translateY(-50%); width:.45rem; height:.45rem;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, #2b3a4a, #05080b 70%)}
.pantalla{background:#17201b; border-radius:2.5rem; padding:.6rem .85rem 1.2rem; min-height:29rem; display:flex; flex-direction:column; gap:.6rem}
.fono-status{display:flex; justify-content:space-between; align-items:center; min-height:1.15rem;
  padding:.1rem .7rem 0; font-size:.7rem; font-weight:600; color:#edf3ee}
.fono-status svg{width:2.9rem; height:.75rem; fill:#edf3ee; flex:none}
.fono-status svg .bateria{fill:none; stroke:#edf3ee; stroke-width:1}
.chat-top{display:flex; align-items:center; gap:.6rem; padding:.3rem .3rem .7rem; border-bottom:1px solid #26302a; color:#fff}
.ava{width:2.1rem; height:2.1rem; border-radius:50%; background:var(--verde); display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:600}
.chat-top b{display:block; line-height:1.15}
.chat-top div span{display:block; font-size:.72rem; color:#8fa89a}
.burb{max-width:84%; padding:.6rem .8rem; border-radius:1rem; font-size:.8rem; line-height:1.45; position:relative}
.de-mi{align-self:flex-end; background:var(--verde); color:#fff; border-bottom-right-radius:.3rem}
.de-naho{align-self:flex-start; background:#232d27; color:#e7eee9; border-bottom-left-radius:.3rem}
.burb small{display:block; color:#93aa9d; margin-top:.25rem; font-size:.72rem}
.foto{display:inline-flex; align-items:center; gap:.4rem; font-weight:600}
.foto svg{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* el chat se escribe solo (landing.js lo repite cada 15 s); sin JS corre una vez */
.anima .b1,.anima .b3{opacity:0; transform:translateY(8px); animation:aparece .45s var(--ease) forwards}
.anima .b1{animation-delay:.6s}
.anima .b3{animation-delay:4.6s}
.anima .b2,.anima .b4{opacity:0; animation:aparece .45s var(--ease) forwards}
.anima .b2{animation-delay:1.6s}
.anima .b4{animation-delay:5.6s}
@keyframes aparece{to{opacity:1; transform:none}}
.puntos{position:absolute; inset:0; display:flex; align-items:center; gap:.28rem; padding-left:.85rem}
.puntos i{width:.42rem; height:.42rem; border-radius:50%; background:#7fa392; animation:late 1s infinite}
.puntos i:nth-child(2){animation-delay:.15s}
.puntos i:nth-child(3){animation-delay:.3s}
@keyframes late{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}
.burb .texto{opacity:0}
.anima .b2 .texto{animation:cambia .3s forwards 2.9s}
.anima .b4 .texto{animation:cambia .3s forwards 6.9s}
.anima .b2 .puntos{animation:desvanece .2s forwards 2.9s}
.anima .b4 .puntos{animation:desvanece .2s forwards 6.9s}
@keyframes cambia{to{opacity:1}}
@keyframes desvanece{to{opacity:0; visibility:hidden}}
.flotante{position:absolute; z-index:4; background:var(--marfil); border:1px solid var(--linea); border-radius:1rem; box-shadow:var(--sombra);
  padding:.75rem 1rem; font-size:.82rem; display:none}
.flotante b{display:block; font-family:"Fraunces",serif; font-size:1.35rem; font-weight:500; letter-spacing:-.01em}
.flotante span{color:var(--tinta2)}
.flotante.f1{left:-1.5rem; bottom:3.5rem; transform:rotate(-3deg)}
.flotante.f2{right:-1rem; top:2.5rem; transform:rotate(3deg)}
.flotante.f2 b{color:var(--verde)}
@media (min-width:1100px){.flotante{display:block}}

/* ─ el zoom del inicio (diseno-web §1 y §2a): la escena mide 190vh y el inicio
   queda clavado; landing.js reparte --p (0..1) y el CSS lo vuelve zoom. El
   teléfono crece hasta tragarse la pantalla, el chat da paso al resumen del
   día y al final cae un telón oscuro (nunca papel vacío). Solo en compu y sin
   «menos movimiento», y solo si landing.js encendió .escenas (sin JS no hay
   pausa muerta): en celular la escena es estática. */
.escena{position:relative; --p:0}
.fono-marco{position:relative}
.fono-dentro{position:absolute; inset:.55rem; border-radius:2.5rem; background:#17201b; color:#dfe9e2;
  display:flex; flex-direction:column; justify-content:center; padding:1rem calc(50% - 7rem); opacity:0; pointer-events:none}
.mini-cab{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #26302a; padding-bottom:.5rem; margin-bottom:.7rem}
.mini-cab b{font-family:"Fraunces",serif; font-weight:500; font-size:1rem}
.mini-cab span{font-size:.68rem; color:#7fa392}
.mini-kpis{display:grid; gap:.55rem}
.mini-kpis div{display:flex; justify-content:space-between; font-size:.8rem}
.mini-kpis span{color:#9db8aa}
.mini-verde{color:#9fd3b8}
.mini-nota{margin-top:.9rem; font-size:.72rem; color:#7fa392; text-align:right}
.telon{display:none}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .escenas .hero-escena{height:190vh}
  .escenas .hero.pegajoso{position:sticky; top:64px; height:calc(100vh - 64px); min-height:36rem; display:flex; align-items:center; padding:2rem 0}
  .escenas .hero.pegajoso > .cont{width:100%}
  .escenas .hero-grid{z-index:2}
  .escenas .hero-txt{opacity:calc(1 - var(--p) * 1.6); transform:translateY(calc(var(--p) * -60px))}
  .escenas .flotante{opacity:calc(1 - var(--p) * 4)}
  /* --dx/--dy llevan el centro del teléfono al centro de la pantalla y --zf es
     cuánto crece (landing.js los mide; los valores de aquí son el respaldo).
     Sin will-change: así el navegador vuelve a dibujar nítido en cada tamaño. */
  .escenas .fono-marco{transform:translate(calc(var(--p) * var(--dx, -22vw)), calc(var(--p) * var(--dy, 0px)))
    scale(calc(1 + var(--p) * var(--p) * var(--zf, 3.4))); transform-origin:50% 50%}
  .escenas .fono{transform:rotate(calc(2deg * (1 - var(--p))))}
  .escenas #chat{opacity:calc(1 - max(0, var(--p) - .5) * 6)}
  .escenas .fono-dentro{opacity:calc((var(--p) - .66) * 4)}
  .escenas .telon{display:block; position:absolute; inset:0; z-index:1; background:#10150f; opacity:calc((var(--p) - .6) * 2.5); pointer-events:none}
}

/* ─ clientes: logos ─ */
.confianza{border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--marfil)}
.confianza .cont{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.5rem; padding-top:1.4rem; padding-bottom:1.4rem}
.confianza p{font-size:.92rem; color:var(--tinta2)}
.logos{display:flex; flex-wrap:wrap; gap:1rem 2.4rem; align-items:center}
.logo-cliente{height:2.7rem; width:auto; opacity:.85}
.logo-cliente.logo-vertical{height:3.6rem}
.marca-gt{margin-left:auto; font-size:.85rem; color:var(--tinta2); display:flex; align-items:center; gap:.5rem}
.marca-gt i{width:.55rem; height:.55rem; border-radius:50%; background:var(--barro); display:inline-block; flex:none}

/* ─ secciones ─ */
.sec{padding:6rem 0}
.sec-marfil{background:var(--marfil)}
.sec-arena{background:var(--arena)}
.oscuro{background:var(--verde-noche); color:#eef3ef}
.oscuro h2 em{color:#e9a882}

/* ─ 01 qué es + cómo funciona ─ */
.quees{display:grid; gap:3rem}
@media (min-width:900px){.quees{grid-template-columns:1fr 1fr; align-items:end}}
.quees h2{margin-top:1.2rem}
.pasos{display:grid; gap:1rem; margin-top:3.5rem}
@media (min-width:800px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{background:var(--marfil); border:1px solid var(--linea); border-radius:var(--r); padding:1.6rem 1.5rem 1.7rem; position:relative; overflow:hidden}
.paso-n{font-family:"Fraunces",serif; font-style:italic; font-size:3.4rem; line-height:1; color:var(--barro); display:block; margin-bottom:1.1rem}
.paso p{font-size:1.08rem; font-weight:500}
.remate{margin-top:2rem; display:flex; gap:.8rem; align-items:center; font-size:1.02rem; color:var(--tinta2)}
.remate svg{width:22px; height:22px; flex:none; fill:none; stroke:var(--verde); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.remate strong{color:var(--verde)}

/* ─ 02 las pantallas (maquetas en HTML: nítidas a cualquier zoom) ─ */
.pantallas{display:grid; gap:1.2rem; margin-top:3rem}
@media (min-width:900px){.pantallas{grid-template-columns:1.25fr 1fr} .pan-ventas{grid-row:span 2}}
.pan{background:var(--marfil); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; min-width:0}
.pan-cab{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:1.2rem 1.4rem .2rem}
.pan-cab h3{font-size:1.3rem}
.pan-cab span{font-size:.8rem; color:var(--tinta2)}
.pan-pie{padding:.2rem 1.4rem 1.3rem; color:var(--tinta2); font-size:.95rem; margin-top:auto}
.mock{margin:1rem 1.4rem; border:1px solid var(--linea); border-radius:.9rem; background:#fff; overflow:hidden}
.mock-barra{display:flex; align-items:center; gap:.35rem; padding:.55rem .8rem; background:#f3efe6; font-size:.72rem; color:var(--tinta2)}
.mock-barra i{width:.5rem; height:.5rem; border-radius:50%; background:#d9d1c2}
.mock-barra span{margin-left:.5rem}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; padding:1rem}
.kpis div{border:1px solid var(--linea); border-radius:.7rem; padding:.7rem .75rem; min-width:0}
.kpis span{display:block; font-size:.7rem; color:var(--tinta2)}
.kpis b{display:block; font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.05rem,2.4vw,1.6rem); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.kpis em{font-style:normal; font-size:.72rem; color:var(--tinta2)}
.verde-txt{color:var(--verde)}
@media (max-width:520px){.kpis{grid-template-columns:1fr 1fr} .kpis div:last-child{grid-column:span 2}}
.graf{padding:0 1rem 1rem}
.graf svg{width:100%; height:120px; display:block}
.graf span{font-size:.75rem; color:var(--tinta2)}
.graf-area{fill:url(#ga)}
.ga-1{stop-color:var(--verde); stop-opacity:.22}
.ga-2{stop-color:var(--verde); stop-opacity:0}
.graf-trazo{fill:none; stroke:var(--verde); stroke-width:2.2; stroke-linejoin:round}
.graf-punto{fill:var(--barro)}
.pos{display:grid; grid-template-columns:1.2fr 1fr; gap:.7rem; padding:.9rem}
.pos-grid{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.pos-item{border-radius:.6rem; padding:.55rem; color:#fff; font-size:.7rem; min-height:3.6rem; display:flex; flex-direction:column; justify-content:flex-end}
.pos-item b{font-weight:600}
.c1{background:var(--verde)} .c2{background:#7d9a8a} .c3{background:var(--ambar)} .c4{background:var(--barro)}
.ticket{border:1px solid var(--linea); border-radius:.6rem; padding:.6rem; font-size:.72rem; display:flex; flex-direction:column; gap:.3rem; min-width:0}
.ticket .tl{display:flex; justify-content:space-between; gap:.3rem}
.ticket .total{font-weight:700; border-top:1px dashed var(--linea); padding-top:.3rem}
.ticket .nit{color:var(--verde); font-weight:600}
.cobrar{background:var(--verde); color:#fff; text-align:center; border-radius:.45rem; padding:.4rem; font-weight:600; margin-top:auto}
.conc{display:grid; grid-template-columns:auto 1fr auto; gap:.2rem .6rem; align-items:center; padding:.55rem .9rem; border-bottom:1px solid #f0ebe1; font-size:.78rem}
.conc:last-child{border-bottom:0}
.conc i{width:.45rem; height:.45rem; border-radius:50%; background:var(--verde)}
.conc.pend i{background:var(--ambar)}
.conc b{font-variant-numeric:tabular-nums}
.conc em{grid-column:2 / 4; font-style:normal; font-size:.7rem; color:var(--verde)}
.conc.pend em{color:var(--ambar)}


/* ─ 02 galería clavada (diseno-web §2b, vuelve el 19-oct: el rediseño la había
   perdido). La sección queda clavada 300vh y las tres pantallas pasan de lado,
   una por pantalla completa; --p la reparte landing.js. Solo en compu, sin
   «menos movimiento» y con .escenas puesto por el JS: si no, es la rejilla. */
.galeria-guia{display:none}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .escenas .galeria-escena{height:300vh}
  .escenas .galeria.pegajoso{position:sticky; top:64px; height:calc(100vh - 64px); min-height:38rem; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center; padding:1.5rem 0}
  .escenas .galeria .riel-cont{max-width:none; padding:0}
  .escenas .galeria .pantallas{display:flex; gap:0; width:300vw; margin-top:1.6rem; align-items:center;
    transform:translateX(calc(var(--p) * -200vw))}
  .escenas .galeria .pan{flex:0 0 min(46rem,80vw); margin:0 calc((100vw - min(46rem,80vw)) / 2); opacity:1; transform:none}
  .escenas .galeria-guia{display:block; width:min(16rem,50vw); height:3px; border-radius:2px; background:var(--linea);
    margin:1.4rem auto 0; overflow:hidden}
  .escenas .galeria-guia i{display:block; height:100%; background:var(--verde); width:calc(14% + var(--p) * 86%)}
}
/* ─ 03 el asistente (oscuro) ─ */
.minis{display:grid; gap:1rem; margin-top:3rem}
@media (min-width:860px){.minis{grid-template-columns:repeat(3,1fr)}}
.mini{background:#1b2f26; border:1px solid #2a4337; border-radius:var(--r); padding:1.3rem; display:flex; flex-direction:column; gap:.6rem}
.mini h3{font-size:1.15rem; color:#fff; margin-bottom:.4rem}
.mini .burb{max-width:92%}
.mini .de-naho{background:#25392f}

/* ─ 04 historia + clientes ─ */
.historia{display:grid; gap:3rem}
@media (min-width:900px){.historia{grid-template-columns:1fr 1fr; align-items:start}}
.historia h2{margin-top:1.2rem}
.historia p{margin-top:1.1rem; color:var(--tinta2); font-size:1.08rem}
.historia p strong{color:var(--tinta)}
.casos{display:grid; gap:1rem}
.caso{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; display:grid}
@media (min-width:600px){.caso{grid-template-columns:11rem 1fr}}
.caso-logo{min-height:8rem; display:flex; align-items:center; justify-content:center; padding:1.4rem; background:var(--arena)}
.caso-logo img{width:100%; max-width:8.5rem; height:auto}
.caso-logo img.caso-logo-vertical{width:auto; max-width:none; height:5.2rem}
.caso-txt{padding:1.3rem 1.4rem}
.caso-txt h3{font-size:1.3rem}
.historia .caso-txt p{font-size:.98rem; margin-top:.5rem}
.caso-txt .giro{font-size:.82rem; color:var(--barro); font-weight:600}

/* ─ el llamado ─ */
.cta{text-align:center}
.cta h2{max-width:46rem; margin:0 auto}
.cta .btns{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem}
.cta .nota{margin-top:1rem; font-size:.9rem; color:var(--tinta2)}

/* ─ 05 precio ─ */
.planes{display:grid; gap:1.2rem; margin-top:3rem}
@media (min-width:860px){.planes{grid-template-columns:1fr 1fr}}
.plan{background:var(--marfil); border:1px solid var(--linea); border-radius:1.5rem; padding:2rem 1.7rem; display:flex; flex-direction:column; position:relative}
.plan h3{font-size:1.6rem}
.plan-para{color:var(--tinta2); margin-top:.3rem}
.num{font-family:"Fraunces",serif; font-size:3.6rem; font-weight:500; letter-spacing:-.03em; line-height:1; margin:1.4rem 0}
.num small{font-family:"Archivo",sans-serif; font-size:1rem; color:var(--tinta2); letter-spacing:0}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.8rem}
.plan li{display:flex; gap:.65rem; font-size:.97rem}
.plan li svg{width:18px; height:18px; flex:none; margin-top:.2rem; fill:none; stroke:var(--verde); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.plan .btn{margin-top:auto; width:100%}
.plan-destacado{background:var(--verde-osc); color:#eef3ef; border-color:var(--verde-osc); box-shadow:0 30px 70px -30px rgba(26,51,41,.7)}
.plan-destacado .plan-para, .plan-destacado .num small{color:#b6cabf}
.plan-destacado li svg{stroke:#e9a882}
.sello{position:absolute; top:1.6rem; right:1.6rem; background:var(--barro); color:#fff; font-size:.78rem; font-weight:600; padding:.3rem .8rem; border-radius:999px}
.letras{margin-top:1.6rem; display:grid; gap:.6rem; font-size:.92rem; color:var(--tinta2)}
@media (min-width:860px){.letras{grid-template-columns:1fr 1fr 1fr; gap:1.5rem}}
.letras p{border-top:1px solid var(--linea); padding-top:.8rem}
.letras strong{color:var(--tinta)}
.letras a{color:var(--verde); font-weight:600}

/* ─ 06 módulos ─ */
.bento{display:grid; gap:1rem; margin-top:3rem}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bento{grid-template-columns:repeat(3,1fr)}}
.mod{background:var(--marfil); border:1px solid var(--linea); border-radius:var(--r); padding:1.5rem; transition:transform .3s var(--ease), box-shadow .3s}
.mod:hover{transform:translateY(-4px); box-shadow:var(--sombra)}
.ico{width:2.8rem; height:2.8rem; border-radius:.8rem; background:var(--salvia); display:grid; place-items:center; margin-bottom:1rem}
.ico svg{width:22px; height:22px; fill:none; stroke:var(--verde); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.mod h3{font-size:1.25rem}
.mod p{margin-top:.5rem; font-size:.95rem; color:var(--tinta2)}
.mod-plan{display:inline-block; margin-top:.5rem; font-size:.75rem; font-weight:600; color:var(--barro); background:var(--barro-claro); border-radius:999px; padding:.15rem .6rem}
.mod.ancho{background:var(--verde); color:#fff; border-color:var(--verde)}
.mod.ancho p{color:#d3e2d9}
.mod.ancho .ico{background:rgba(255,255,255,.12)}
.mod.ancho .ico svg{stroke:#fff}

/* ─ 07 comparación ─ */
.tabla{margin-top:2.6rem; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; background:var(--papel)}
.fila{display:grid; grid-template-columns:1fr; border-top:1px solid var(--linea)}
.fila:first-child{border-top:0}
.fila > div{padding:1rem 1.3rem; font-size:.95rem}
.fila .tema{font-weight:600}
.fila .si{display:flex; gap:.6rem; color:var(--tinta)}
.fila .no{display:flex; gap:.6rem; color:var(--tinta2)}
.fila svg{width:18px; height:18px; flex:none; margin-top:.15rem; fill:none; stroke-width:2.2; stroke-linecap:round}
.si svg{stroke:var(--verde)}
.no svg{stroke:#b5786a}
.fila.cab{background:var(--arena); font-size:.85rem}
.fila.cab > div{padding:.8rem 1.3rem; font-weight:700}
@media (min-width:800px){.fila{grid-template-columns:.8fr 1.3fr 1.1fr} .fila .si{background:rgba(45,85,70,.05)}}
@media (max-width:799px){.fila.cab{display:none} .fila .tema{padding-bottom:0} .fila .si{padding-bottom:.2rem} .fila .no{padding-top:.2rem}}
.ademas{margin-top:1.2rem; color:var(--tinta2); font-size:.95rem}

/* ─ 08 preguntas ─ */
.faq{max-width:48rem; margin-top:2.6rem}
details{border-bottom:1px solid var(--linea)}
summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 0;
  font-family:"Fraunces",serif; font-size:1.25rem; font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:"Archivo",sans-serif; font-weight:400; font-size:1.6rem; line-height:1; color:var(--verde); transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 1.4rem; color:var(--tinta2); max-width:42rem}

/* ─ cierre ─ */
.cierre{position:relative; overflow:hidden; text-align:center; padding:7rem 0}
.cierre::before{content:""; position:absolute; left:50%; top:50%; width:60rem; height:60rem; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(181,85,47,.22), transparent 70%); pointer-events:none}
.cierre .cont{position:relative}
.cierre h2{font-size:clamp(2.4rem,6vw,4.4rem); margin-top:1.2rem}
.cierre p{color:#c6d4cc; margin:1.2rem auto 0; max-width:34rem; font-size:1.1rem}
.cierre .btn{margin-top:2.2rem; min-height:56px; padding:1rem 2.2rem; font-size:1.05rem}
.cierre .tel{margin-top:1.2rem; font-size:.95rem; color:#c6d4cc}
.tel a{color:#fff}

/* ─ pie ─ */
footer{background:var(--verde-noche); color:#9fb5a9; border-top:1px solid #23392f; font-size:.9rem}
.pie{display:grid; gap:1.6rem; padding-top:2.6rem; padding-bottom:6rem}
@media (min-width:800px){.pie{grid-template-columns:1.4fr 1fr 1fr; padding-bottom:2.6rem}}
.pie .marca{color:#fff}
.pie .marca i{color:#8fbfa7}
.pie-lema{margin-top:.6rem}
.pie h4{color:#fff; font-weight:600; margin-bottom:.5rem; font-size:.92rem}
.pie a, .pie-tel{text-decoration:none; display:block; margin-top:.25rem}
.pie a:hover{color:#fff}

/* ─ barra fija del celular: aparece al pasar el inicio ─ */
.barra-movil{position:fixed; left:0; right:0; bottom:0; z-index:30; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(246,243,236,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--linea); display:flex; gap:.6rem}
.barra-movil .btn{flex:1; min-height:46px}
@media (min-width:700px){.barra-movil{display:none}}

/* ─ celular ─ */
@media (max-width:699px){
  .sec{padding:3.6rem 0}
  .hero{padding:2.2rem 0 2.4rem}
  .hero-grid{gap:2.2rem}
  .pildora .pil-txt{display:none}
  .pildora{padding:.35rem .4rem}
  .hero h1{margin:1rem 0 1.1rem}
  .hero .sub{font-size:1.06rem}
  .hero-ctas .btn{width:100%}
  .fono{width:min(290px,78vw); transform:none}
  .pantalla{min-height:24rem}
  .quees{gap:1rem}
  .pasos{margin-top:2rem; gap:.7rem}
  .paso{display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem}
  .paso-n{font-size:2.3rem; margin:0; min-width:2.2rem}
  .paso p{font-size:1rem}
  .pantallas,.minis,.planes,.bento{margin-top:2rem}
  .confianza .cont{gap:.6rem 1.6rem}
  .confianza .logos{gap:.4rem 1.6rem}
  .marca-gt{margin-left:0}
  .cierre{padding:4.5rem 0}
  .mod{display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; padding:1.1rem}
  .mod .ico{grid-row:1 / span 3; margin:0; width:2.4rem; height:2.4rem}
  .mod > *:not(.ico){grid-column:2}
  .mod .mod-plan{justify-self:start}
  .cta .btns .btn{width:100%}
  .con-barra .barra-movil{transform:translateY(110%); transition:transform .35s var(--ease)}
  .con-barra .barra-movil.visible{transform:none}
}

/* ─ aparición suave: solo con JS y sin «menos movimiento» ─ */
.js .rev{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  .js .rev, .burb, .burb .texto{opacity:1 !important; transform:none !important}
  .puntos{display:none}
}