/* SprayClarity · landing de sprayclarity.com (la generan _src/landing/build.js + textos.js).
   Un solo aspecto, oscuro a propósito: el de la app (mismos tokens que carrusel-v2 y los anuncios).
   Todo lo que se mueve vive dentro de prefers-reduced-motion: no-preference, y sin JS la página se ve completa. */
:root{
  --bg:#0B1510;--card:#16241C;--card2:#1B2C22;--line:#2B4634;--line2:rgba(234,241,232,.08);
  --ink:#EAF1E8;--soft:#B7C6BC;--dim:#8CA091;
  --go:#34C76A;--go-d:#2A8F51;--amb:#E6A92B;--amb-d:#A57A22;--red:#E2533B;--dark:#06140C;
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.2,1);--gut:clamp(16px,4vw,32px);
  color-scheme:dark;interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--fb);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--go)}
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
main,footer{overflow-x:hidden;overflow-x:clip}
:focus-visible{outline:2px solid var(--go);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}
.mono{font-family:var(--fm);font-weight:500}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--go);color:var(--dark);font-weight:700;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* ── encabezado ── */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s}
.nav.scrolled{background:rgba(11,21,16,.88);border-bottom-color:var(--line2)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav.scrolled{background:rgba(11,21,16,.72);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px)}}
.navin{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--ink);text-decoration:none;font:800 1.2rem/1 var(--fd);letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 1px var(--line2)}
.brand b{color:var(--go);font-weight:800}
.links{display:flex;gap:2px;margin-inline:auto}
.links a{color:var(--soft);text-decoration:none;font-weight:500;font-size:.95rem;padding:9px 12px;border-radius:10px;transition:color .2s,background-color .2s}
.links a:hover,.links a.on{color:var(--ink);background:rgba(234,241,232,.06)}
/* Pulverización | Mapeo: la página actual va marcada (verde con borde); la otra, en gris */
.modo{display:inline-flex;align-items:center;gap:2px;flex:none;padding:3px;border-radius:999px;border:1px solid var(--line);background:rgba(19,33,25,.7)}
.modo a{padding:7px 13px;border-radius:999px;color:var(--soft);text-decoration:none;font:600 .86rem/1 var(--fb);white-space:nowrap;transition:color .2s,background-color .2s}
.modo a:hover{color:var(--ink);background:rgba(234,241,232,.05)}
.modo a[aria-current]{color:var(--go);background:rgba(52,199,106,.15);box-shadow:inset 0 0 0 1px rgba(52,199,106,.55)}
.m-hero{display:none}
.navr{display:flex;align-items:center;gap:10px;margin-left:auto}
.langs{position:relative}
.langs summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;color:var(--soft);font:500 .82rem/1 var(--fm);letter-spacing:.08em;padding:10px 12px;border:1px solid var(--line);border-radius:10px;transition:color .2s,border-color .2s}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.langs[open] summary::after{transform:translateY(1px) rotate(225deg)}
.langs summary:hover{color:var(--ink);border-color:var(--dim)}
.langs-m{position:absolute;right:0;top:calc(100% + 8px);display:grid;min-width:172px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.langs-m a{color:var(--ink);text-decoration:none;font-size:.95rem;padding:10px 12px;border-radius:9px}
.langs-m a:hover{background:rgba(234,241,232,.06)}
.langs-m a[aria-current]{color:var(--go)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:var(--go);color:var(--dark);font:700 1rem/1 var(--fd);text-decoration:none;padding:15px 22px;border-radius:12px;box-shadow:0 10px 26px -10px rgba(52,199,106,.6),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
.btn:hover{background:#3FD677;transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(52,199,106,.72),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sm{padding:11px 15px;font-size:.92rem;border-radius:10px}
@media (max-width:1240px){.links{display:none}}
@media (max-width:720px){.m-nav{display:none}.m-hero{display:inline-flex;margin-bottom:18px}}
@media (max-width:560px){.btn.sm{padding:10px 13px;font-size:.88rem}.nav .btn{display:none}.nav.past .btn{display:inline-flex}.nav.past .langs{display:none}}
@media (max-width:380px){.nav.past .brand span{display:none}}

/* aviso de idioma */
.sug{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:6px;width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;padding:6px 6px 6px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(0,0,0,.55);font-size:.95rem}
.sug span:empty{display:none}
.sug a{color:var(--go);font-weight:600;text-decoration:none;padding:6px 0}
.sug a:hover{text-decoration:underline}
.sug button{background:none;border:0;color:var(--dim);font-size:1.35rem;line-height:1;padding:8px 12px;border-radius:9px;cursor:pointer}
.sug button:hover{color:var(--ink);background:rgba(234,241,232,.06)}

/* ── tipografía de secciones ── */
.eyebrow{margin:0;font:500 .78rem/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--go)}
h1 em,h2 em{font-style:normal;color:var(--go)}
.lead{margin:0;max-width:58ch;font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);line-height:1.6;color:var(--soft)}
.sec{position:relative;padding-block:clamp(76px,10vw,136px)}
.sh{max-width:780px;margin:0 auto clamp(38px,5vw,60px);text-align:center}
.sh h2,.final h2{margin:.4em 0 .35em;font:800 clamp(1.95rem,1.15rem + 2.7vw,3.25rem)/1.06 var(--fd);letter-spacing:-.022em}
.sh .lead{margin-inline:auto}
.sh.left{margin-inline:0;text-align:left}
.sh.left .lead{margin-inline:0}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font-weight:500}
.ticks svg{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(52,199,106,.14);color:var(--go)}

/* ── el medidor de la app ── */
.gauge{display:block;overflow:visible}
.gauge .arc{fill:none;stroke-width:10;stroke-linecap:round}
.gauge .arc.g{stroke:var(--go)}
.gauge .arc.a{stroke:#4B4122}
.gauge .arc.r{stroke:#4A2B22}
.gauge .needle{transform-box:view-box;transform-origin:60px 60px}
.gauge .needle line{stroke:#F4F8F2;stroke-width:5;stroke-linecap:round}
.gauge .hub{fill:var(--go)}
.gauge .tick{fill:none;stroke:var(--dark);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* ── portada ── */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(24px,5vw,64px) clamp(64px,9vw,120px)}
.aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(680px 540px at 76% 36%,rgba(52,199,106,.22),transparent 70%),radial-gradient(560px 440px at 10% 6%,rgba(52,199,106,.10),transparent 70%),radial-gradient(600px 460px at 94% 98%,rgba(230,169,43,.07),transparent 70%)}
@media (max-width:920px){.aurora{background:radial-gradient(520px 460px at 50% 76%,rgba(52,199,106,.24),transparent 70%),radial-gradient(440px 360px at 8% 4%,rgba(52,199,106,.10),transparent 70%)}}
/* surcos de un lote en perspectiva (como desde el dron); la franja de adentro avanza */
.field{position:absolute;left:50%;bottom:0;z-index:-1;width:240%;height:66%;transform:translateX(-50%) perspective(520px) rotateX(60deg);transform-origin:50% 100%;overflow:hidden;pointer-events:none;opacity:.5;-webkit-mask-image:linear-gradient(to top,#000,transparent 82%);mask-image:linear-gradient(to top,#000,transparent 82%)}
.field::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(52,199,106,.24) 0 2px,transparent 2px 44px)}
.field i{position:absolute;inset:-60px 0 0;background:repeating-linear-gradient(180deg,rgba(234,241,232,.07) 0 1px,transparent 1px 60px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-t{min-width:0}
.hero h1{margin:.45em 0 .42em;font:800 clamp(2.4rem,1.1rem + 4.6vw,4.7rem)/1.02 var(--fd);letter-spacing:-.03em}
.hero h1 em{background:linear-gradient(100deg,#6BE597,var(--go) 45%,#22A957);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.badges a{display:block;border-radius:10px;transition:transform .25s var(--ease),filter .25s}
.badges a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.badges img{display:block;height:54px;width:auto}
.badges.center{justify-content:center}
.is-android .badges a[data-store=android]{order:-1}
.micro{display:flex;flex-wrap:wrap;gap:10px 20px;margin:20px 0 0;padding:0;list-style:none;color:var(--soft);font-size:.93rem}
.micro li{display:inline-flex;align-items:center;gap:7px}
.micro svg{width:16px;height:16px;flex:none;color:var(--go)}
.micro.center{justify-content:center}
/* el teléfono en 3D con las piezas de la pantalla flotando delante */
.scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:clamp(560px,62vw,760px);--dw:clamp(232px,25vw,312px)}
/* selector de método: el teléfono gira en 3D al cambiar (landing.js) */
.mtabs{position:relative;z-index:4;display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(19,33,25,.9);border:1px solid var(--line);box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}
.mtabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 9px;border:0;border-radius:999px;background:none;color:var(--soft);font:600 .86rem/1 var(--fb);cursor:pointer;transition:background-color .25s,color .25s}
.mtabs button img{width:22px;height:22px;border-radius:6px}
.mtabs button:hover{color:var(--ink)}
.mtabs button[aria-selected=true]{background:var(--go);color:var(--dark)}
.rigs{display:grid;perspective:1500px;perspective-origin:50% 40%}
.rig{grid-area:1/1;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-16deg)) rotateZ(1.5deg)}
.rig:not(.on){visibility:hidden}
.device{position:relative;margin:0;width:var(--dw);padding:9px;border-radius:46px;background:linear-gradient(150deg,#2A3C31,#0C1510 55%,#18241D);box-shadow:0 0 0 1.5px #34503F,0 60px 100px -40px rgba(0,0,0,.85),0 40px 90px -50px rgba(52,199,106,.5);transform-style:preserve-3d}
.device::before{content:'';position:absolute;inset:4px;border-radius:44px;background:#050A07;transform:translateZ(-18px)}
.device img{position:relative;display:block;width:100%;border-radius:37px}
.device::after{content:'';position:absolute;inset:9px;border-radius:37px;background:linear-gradient(115deg,rgba(255,255,255,.11),transparent 26%,transparent 72%,rgba(255,255,255,.04));pointer-events:none}
/* vista explotada: cada pieza de la tarjeta Hoy se despega de la pantalla a otra profundidad y tapa su original.
   left/top suman z·sen(16°) y z·sen(7°) para compensar el giro del teléfono; los tamaños siguen al ancho del teléfono (--dw). */
.chip{position:absolute;z-index:2;padding:calc(var(--dw) * .038) calc(var(--dw) * .045);background:#17261D;border:1px solid rgba(52,199,106,.26);border-radius:calc(var(--dw) * .05);box-shadow:0 26px 50px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.25);color:var(--ink);left:calc(var(--x) + var(--z) * .276);top:calc(var(--y) + var(--oy,0%) + var(--z) * .122);transform:translate3d(0,0,var(--z))}
.chip .mono{display:block;font-size:max(8.5px,calc(var(--dw) * .033));letter-spacing:.14em;color:var(--dim)}
.c-verdict{--x:7%;--y:11.6%;--z:60px;width:86%;display:flex;align-items:center;gap:calc(var(--dw) * .04)}
.c-verdict .gauge{width:28%;flex:none}
.c-verdict b{display:block;font:800 calc(var(--dw) * .068)/1.05 var(--fd);color:var(--go);letter-spacing:.005em}
.c-verdict span{display:block;margin-top:.35em;font:500 max(8.5px,calc(var(--dw) * .036))/1.3 var(--fm);color:var(--soft)}
.c-verdict.long{padding-block:calc(var(--dw) * .055)}
.c-verdict.long b{font-size:calc(var(--dw) * .058)}
.c-verdict.long span{display:none}
.c-win{--x:6%;--y:23.6%;--z:95px;width:88%;padding-block:calc(var(--dw) * .028);border-left:calc(var(--dw) * .013) solid var(--go)}
.c-win p{margin:.3em 0 0;font:500 calc(var(--dw) * .042)/1.25 var(--fm);white-space:nowrap}
.c-win b{color:var(--go);font-size:1.15em;font-weight:600}
.c-f{--y:31.8%;--z:130px;width:28.5%}
.c-f1{--x:5.5%}.c-f2{--x:35.75%}.c-f3{--x:66%}
.c-f b{display:block;margin-top:.3em;font:600 calc(var(--dw) * .066)/1 var(--fm);white-space:nowrap}
.c-f small{font-size:.55em;font-weight:500;color:var(--soft)}
@media (max-width:920px){.hero-g{grid-template-columns:minmax(0,1fr)}.scene{min-height:0;padding-block:28px 12px;--dw:clamp(232px,62vw,290px)}}
@media (max-width:400px){.mtabs button{padding:8px 11px 8px 8px;font-size:.8rem}}

/* ── cifras ── */
.proof{position:relative;border-block:1px solid var(--line2);background:linear-gradient(180deg,rgba(22,36,28,.55),rgba(22,36,28,.2))}
.proof-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pf{padding:28px 16px 26px;text-align:center}
.pf+.pf{border-left:1px solid var(--line2)}
/* alto fijo: cuando el contador arranca, el número se parte en <span>+<i> y antes la franja crecía 28 px (movía los atajos) */
.pf b{display:flex;align-items:center;justify-content:center;height:1em;font:800 clamp(2rem,1.4rem + 2vw,3rem)/1 var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pf b i{font-style:normal;color:var(--go)}
.pf b i.st{color:var(--amb)}
.pf span{display:block;margin-top:8px;font-size:.9rem;line-height:1.35;color:var(--dim)}
@media (max-width:720px){.proof-g{grid-template-columns:repeat(2,minmax(0,1fr))}.pf:nth-child(3){border-left:0}.pf:nth-child(n+3){border-top:1px solid var(--line2)}}

/* ── las cinco cosas que arruinan una aplicación ── */
.kgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kc{position:relative;overflow:hidden;padding:24px 20px;border-radius:22px;background:linear-gradient(180deg,var(--card),rgba(22,36,28,.55));border:1px solid var(--line2);--k:230,169,43}
.k-deltat,.k-lluvia{--k:226,83,59}
.kc::before{content:'';position:absolute;top:-50px;left:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--k),.16),transparent);pointer-events:none}
.ki{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;color:rgb(var(--k));background:rgba(var(--k),.13)}
.ki svg{width:24px;height:24px}
.kc h3{margin:18px 0 8px;font:700 1.12rem/1.25 var(--fd)}
.kc p{margin:0;font-size:.95rem;line-height:1.55;color:var(--soft)}
@media (max-width:1080px){.kgrid{grid-template-columns:repeat(6,minmax(0,1fr))}.kc{grid-column:span 2}.kc:nth-child(n+4){grid-column:span 3}}
@media (max-width:640px){.kgrid{grid-template-columns:minmax(0,1fr)}.kc,.kc:nth-child(n+4){grid-column:auto}}

/* inclinación 3D de tarjetas (la mueve landing.js con el puntero) */
[data-tilt]{transform:perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
[data-tilt]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,-20%),rgba(234,241,232,.08),transparent 55%);opacity:0;transition:opacity .35s}
[data-tilt]:hover::after{opacity:1}

/* ── cómo funciona ── */
.como-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,88px);align-items:center}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.steps li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:20px}
.sn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--go);color:var(--dark);font:600 1.05rem/1 var(--fm);box-shadow:0 0 0 7px rgba(52,199,106,.12)}
.steps li:not(:last-child)::after{content:'';position:absolute;left:22px;top:58px;bottom:-26px;width:2px;border-radius:2px;background:linear-gradient(rgba(52,199,106,.7),rgba(52,199,106,.08));transform-origin:top}
.steps h3{margin:.45em 0 .3em;font:700 1.3rem/1.25 var(--fd)}
.steps p{margin:0;color:var(--soft)}
.photo{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:30px;border:1px solid var(--line2);box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.photo img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;transform:translate3d(0,var(--py,0%),0)}
.photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,21,16,.55))}
@media (max-width:900px){.como-g{grid-template-columns:minmax(0,1fr)}.photo{aspect-ratio:4/3}.photo img{object-position:50% 30%}}

/* ── el veredicto: tarjeta y cinta de 24 h hechas en HTML con los datos de la captura ── */
.ver-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:center}
.ver-v{position:relative;isolation:isolate;display:grid;gap:16px;min-width:0}
.ver-v::before{content:'';position:absolute;inset:8% -12%;z-index:-1;background:radial-gradient(closest-side,rgba(52,199,106,.16),transparent);pointer-events:none}
.vcard,.strip{background:var(--card);border:1px solid var(--line2);border-radius:24px;padding:22px;box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.vtop{display:flex;align-items:center;gap:18px}
.gauge.big{width:132px;flex:none}
.vbig{display:block;font:800 clamp(1.7rem,1.2rem + 1.6vw,2.4rem)/1 var(--fd);color:var(--go);letter-spacing:-.005em}
.vall{display:block;margin-top:8px;font:500 .9rem/1.3 var(--fm);color:var(--soft)}
.vwin{margin-top:18px;padding:12px 16px;border-left:4px solid var(--go);border-radius:12px;background:rgba(52,199,106,.08)}
.vwin .mono{font-size:.72rem;letter-spacing:.16em;color:var(--soft)}
.vwin p{margin:4px 0 0;font:500 1.05rem/1.3 var(--fm)}
.vwin b{color:var(--go);font-size:1.2em;font-weight:600}
.vf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.vf>div{min-width:0;padding:2px 14px}
.vf>div:first-child{padding-left:0}
.vf>div+div{border-left:1px solid var(--line)}
.vf .mono{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--dim)}
.vf b{display:block;margin-top:6px;font:600 1.6rem/1 var(--fm)}
.vf small{font-size:.55em;font-weight:500;color:var(--soft)}
.vf .rg{display:block;margin-top:6px;font:500 .78rem/1.2 var(--fm);color:var(--dim)}
.strip-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.strip-h b{font:700 1.15rem/1.2 var(--fd)}
.strip-h span{font:500 .8rem/1 var(--fm);color:var(--dim)}
.strip-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.col{display:grid;gap:8px;padding-bottom:8px;border-radius:12px;text-align:center}
.col.now{background:rgba(234,241,232,.05)}
.hr{padding:7px 0;border-radius:999px;color:var(--dark);font:600 .82rem/1 var(--fm)}
.col.g .hr{background:var(--go)}.col.a .hr{background:var(--amb)}.col.r .hr{background:var(--red)}
.col.now .hr{box-shadow:0 0 0 2px var(--ink)}
.bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:124px;padding-inline:3px}
.bars i{position:relative;flex:1;max-width:30px;min-height:24px;height:calc(var(--h) * 100%);border-radius:7px;transform-origin:bottom}
.col.g .sus{background:var(--go)}.col.g .gus{background:var(--go-d)}
.col.a .sus{background:var(--amb)}.col.a .gus{background:var(--amb-d)}
.col.r .sus{background:var(--red)}.col.r .gus{background:#9B3A2A}
.bars em{position:absolute;top:6px;left:0;right:0;font:600 .72rem/1 var(--fm);font-style:normal;color:var(--dark)}
.tmp{font:500 .8rem/1 var(--fm);color:var(--soft)}
.strip-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font:500 .78rem/1.3 var(--fm);color:var(--soft)}
.strip-leg .note{margin-left:auto;color:var(--dim)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--dim)}
.lg.g::before{background:var(--go)}.lg.a::before{background:var(--amb)}.lg.r::before{background:var(--red)}
@media (max-width:960px){.ver-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.vcard,.strip{padding:18px 16px}.gauge.big{width:104px}.vwin p{font-size:.92rem}.vf>div{padding-inline:10px}.vf b{font-size:1.35rem}.strip-cols{gap:5px}.bars{height:110px;gap:3px;padding-inline:1px}.bars em{font-size:.66rem}.hr{font-size:.74rem}.strip-leg .note{margin-left:0}}

/* ── los seis factores ── */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fc{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line2)}
.fc::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--go);transform-origin:left}
.fc.a::before{background:var(--amb)}.fc.r::before{background:var(--red)}.fc.x::before{background:var(--dim)}
.fk{font-size:.74rem;letter-spacing:.14em;color:var(--dim)}
.dot{position:absolute;top:24px;right:22px;width:10px;height:10px;border-radius:50%;background:var(--go)}
.fc.a .dot{background:var(--amb)}.fc.r .dot{background:var(--red)}.fc.x .dot{background:var(--dim)}
.fv{display:block;margin-top:14px;font:600 clamp(1.7rem,1.3rem + 1.2vw,2.3rem)/1 var(--fm)}
.fv small{font-size:.5em;font-weight:500;color:var(--soft)}
.fr{display:block;margin-top:10px;font:500 .82rem/1.3 var(--fm);color:var(--soft)}
@media (max-width:820px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.fgrid{gap:10px}.fc{padding:18px 16px 16px}.dot{top:20px;right:16px}}

/* ── mapa ── */
.mapstage{perspective:1600px}
.mapwrap{position:relative;max-width:1000px;margin:0 auto;overflow:hidden;border-radius:28px;border:1px solid var(--line);box-shadow:0 60px 120px -40px rgba(0,0,0,.85);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--p,1)) * 24deg)) scale(calc(.9 + var(--p,1) * .1))}
.mapwrap img{display:block;width:100%}
.pin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(6,20,12,.7);--c:var(--go)}
.pin.a{--c:var(--amb)}.pin.r{--c:var(--red)}
.pin::before,.pin::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);opacity:0}
.maplegend{position:absolute;left:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;border-radius:12px;background:rgba(6,20,12,.82);font:500 .8rem/1 var(--fm);color:var(--ink)}
@media (max-width:520px){.mapwrap{border-radius:20px}.pin{width:14px;height:14px;margin:-7px 0 0 -7px}.maplegend{left:10px;bottom:10px;padding:8px 10px;font-size:.72rem;gap:6px 10px}}

/* ── alertas (Pro): pantalla bloqueada hecha en HTML ── */
.al-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:center}
.pro-eye{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(230,169,43,.13);color:var(--amb)}
.lockphone{width:min(100%,360px);margin-inline:auto;padding:9px;border-radius:46px;background:linear-gradient(150deg,#2A3C31,#0C1510 55%,#18241D);box-shadow:0 0 0 1.5px #34503F,0 60px 110px -40px rgba(0,0,0,.85)}
.lk{position:relative;min-height:560px;overflow:hidden;padding:54px 12px 22px;border-radius:37px;text-align:center;background:linear-gradient(180deg,rgba(6,20,12,.3),rgba(6,20,12,.82) 70%),url(img/dron.webp) 50% 30%/cover,#0B1510}
.lk-clock{font:700 4.6rem/1 var(--fd);letter-spacing:-.02em;color:#F4F8F2;font-variant-numeric:tabular-nums}
.lk-date{margin-top:6px;font:500 1rem/1.2 var(--fb);color:rgba(244,248,242,.86)}
.lk-list{display:grid;gap:10px;margin-top:44px;text-align:left}
.ntf{padding:12px 14px 13px;border-radius:20px;background:rgba(28,42,34,.86);border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ntf{background:rgba(36,52,43,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}}
.nh{display:flex;align-items:center;gap:8px;font:600 .74rem/1 var(--fb);letter-spacing:.04em;text-transform:uppercase;color:rgba(244,248,242,.72)}
.nh img{width:22px;height:22px;border-radius:6px}
.nh time{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none}
.ntf b{display:block;margin-top:8px;font:600 .9rem/1.3 var(--fb);color:#F4F8F2}
.ntf p{margin:3px 0 0;font:400 .86rem/1.35 var(--fb);color:rgba(244,248,242,.8)}
@media (max-width:900px){.al-g{grid-template-columns:minmax(0,1fr)}.al-v{order:2}}
@media (max-width:400px){.lk{min-height:520px;padding-top:44px}.lk-clock{font-size:3.9rem}}

/* ── métodos: dron y terrestre con foto; mochila, atomizadora y mapeo compactos; cada uno con sus límites reales ── */
.mfeat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mf{position:relative;overflow:hidden;border-radius:24px;background:var(--card);border:1px solid var(--line2)}
.mf-img{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden}
.mf-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mf:hover .mf-img img{transform:scale(1.04)}
.mf-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(22,36,28,.9))}
.mf-b{position:relative;padding:0 24px 24px;margin-top:-38px}
.mf-h{display:flex;align-items:center;gap:12px}
.mf-h img{width:52px;height:52px;flex:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.mf-h h3{margin:0;font:700 1.22rem/1.2 var(--fd)}
.lims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0}
.lims div{padding:10px 12px;border-radius:12px;background:rgba(234,241,232,.04);border:1px solid var(--line2)}
.lims dt{font:500 .7rem/1.2 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.lims dd{margin:6px 0 0;font:600 1.12rem/1.1 var(--fm);color:var(--ink)}
.also{margin:12px 0 0;font-size:.92rem;line-height:1.45;color:var(--soft)}
.also span{display:block;margin-bottom:2px;font:500 .7rem/1.2 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.mc{position:relative;padding:20px 20px 20px;border-radius:22px;background:var(--card);border:1px solid var(--line2)}
.mc .mf-h img{width:46px;height:46px}
.mc .mf-h h3{font-size:1.05rem}
@media (max-width:900px){.mfeat{grid-template-columns:minmax(0,1fr)}.mgrid3{grid-template-columns:minmax(0,1fr)}}

/* ── mapeo en la portada: la foto enmarcada con la tarjeta del veredicto real de mapeo flotando encima ── */
.vuelo-g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,80px);align-items:center}
.vuelo-v{position:relative;margin:0 0 40px;perspective:1100px}
.vuelo-foto{overflow:hidden;aspect-ratio:16/11;border-radius:28px;border:1px solid var(--line2);box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.vuelo-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:22% 30%}
.vuelo-card{position:absolute;right:-3%;bottom:-40px;width:min(82%,380px);padding:14px 16px 16px;border-radius:20px;background:#17261D;border:1px solid rgba(52,199,106,.28);box-shadow:0 30px 60px -24px rgba(0,0,0,.9);transform:rotateY(-12deg) rotateX(5deg);transform-origin:100% 100%}
.vuelo-card{display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 12px;align-items:center}
.vuelo-card .gauge{width:62px}
.vc-t b{display:block;font:800 1.15rem/1.05 var(--fd);color:var(--go)}
.vc-t span{display:block;margin-top:5px;font:500 .78rem/1.3 var(--fm);color:var(--soft)}
.vc-t span b{display:inline;font:inherit;color:var(--go)}
.vc-f{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.vc-f div{padding:8px 10px;border-radius:12px;background:rgba(234,241,232,.04);border:1px solid var(--line2)}
.vc-f .mono{display:block;font-size:.64rem;letter-spacing:.14em;color:var(--dim)}
.vc-f b{display:block;margin-top:4px;font:600 1.15rem/1 var(--fm)}
.vc-f small{font-size:.6em;color:var(--soft);font-weight:500}
.btn.ghost{background:rgba(11,21,16,.55);color:var(--ink);border:1px solid rgba(52,199,106,.55);box-shadow:none}
.btn.ghost:hover{background:rgba(52,199,106,.14);border-color:var(--go)}
.btn svg{width:18px;height:18px}
@media (max-width:900px){.vuelo-g{grid-template-columns:minmax(0,1fr)}.vuelo-card{right:3%;width:min(88%,380px)}}

/* ── reseñas ── */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rv{display:flex;flex-direction:column;gap:16px;margin:0;padding:26px 24px;border-radius:22px;background:var(--card);border:1px solid var(--line2)}
.stars{display:flex;gap:3px;color:var(--amb)}
.stars svg{width:18px;height:18px;fill:currentColor}
.rv blockquote{flex:1;margin:0;font-size:1.02rem;line-height:1.6}
.rv figcaption{font:500 .78rem/1.35 var(--fm);color:var(--dim)}
.rv figcaption span{color:var(--soft)}
@media (max-width:900px){.rgrid{grid-template-columns:minmax(0,1fr)}}

/* ── planes ── */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:980px;margin:0 auto}
.plan{position:relative;padding:30px 28px;border-radius:26px;background:var(--card);border:1px solid var(--line)}
.plan h3{margin:0;font:800 1.5rem/1.1 var(--fd)}
.ps{margin:6px 0 0;font:500 .85rem/1.3 var(--fm);color:var(--dim)}
.plan ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.plan li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;color:var(--soft)}
.plan li svg{width:20px;height:20px;margin-top:2px;color:var(--go)}
.plan.pro{background:linear-gradient(160deg,rgba(52,199,106,.17),var(--card) 46%);border-color:rgba(52,199,106,.42);box-shadow:0 40px 80px -40px rgba(52,199,106,.35)}
.plan.pro .star{color:var(--amb)}
.how{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--dim)}
.founder{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 14px;border-radius:999px;background:rgba(230,169,43,.13);color:var(--amb);font-weight:600;font-size:.86rem;line-height:1.25}
.founder::before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}
.pcta{display:flex;justify-content:center;margin-top:36px}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.plan.pro::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,rgba(52,199,106,.9) 80%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (max-width:760px){.pgrid{grid-template-columns:minmax(0,1fr)}.plan{padding:26px 22px}}

/* ── datos y confianza ── */
.datos{padding-block:clamp(44px,6vw,76px);border-block:1px solid var(--line2);background:rgba(22,36,28,.25)}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.dc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.di{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(52,199,106,.11);color:var(--go)}
.di svg{width:22px;height:22px}
.dc h3{margin:2px 0 6px;font:700 1.05rem/1.3 var(--fd)}
.dc p{margin:0;font-size:.95rem;color:var(--soft)}
@media (max-width:820px){.dgrid{grid-template-columns:minmax(0,1fr)}}

/* ── preguntas ── */
.faq-w{max-width:880px}
.qs{display:grid;gap:12px}
.q{border-radius:18px;background:var(--card);border:1px solid var(--line2);transition:border-color .3s}
.q[open]{border-color:rgba(52,199,106,.38)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;list-style:none;cursor:pointer;font-weight:600;font-size:1.05rem;line-height:1.35}
.q summary::-webkit-details-marker{display:none}
.q summary svg{flex:none;width:22px;height:22px;color:var(--go);transition:transform .35s var(--ease)}
.q[open] summary svg{transform:rotate(45deg)}
.qa{padding:0 22px 20px;color:var(--soft)}
.qa p{margin:0;max-width:68ch}

/* ── cierre ── */
.final{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(96px,12vw,170px);text-align:center}
.final-bg{position:absolute;inset:0;z-index:-1}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.42}
.final-bg.wide img{object-position:40% 40%;opacity:.5}
.final-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 65% at 50% 50%,rgba(11,21,16,.35),var(--bg) 88%),linear-gradient(var(--bg),transparent 28%,transparent 72%,var(--bg))}
.final-in{max-width:860px}
.gauge.end{width:116px;margin:0 auto 6px}
.final h2{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.8rem)}
.final .lead{margin-inline:auto}

/* ── pie ── */
.foot{padding-block:52px 28px;border-top:1px solid var(--line2);background:#08110C}
.foot-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.fb p{margin:12px 0 0;max-width:34ch;color:var(--dim)}
.fl{display:grid;align-content:start;gap:10px}
.fl a{color:var(--soft);text-decoration:none;font-size:.95rem}
.fl a:hover{color:var(--ink)}
.fl a[aria-current]{color:var(--go)}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:36px;padding-block:20px 0;border-top:1px solid var(--line2);font-size:.82rem;color:var(--dim)}
.fine p{margin:0}
@media (max-width:760px){.foot-g{grid-template-columns:minmax(0,1fr)}}

/* ══ movimiento (solo si la persona no pidió reducirlo) ══ */
@media (prefers-reduced-motion:no-preference){
  .aurora{animation:drift 22s ease-in-out infinite alternate}
  .field i{animation:fly 2.8s linear infinite}
  /* aparición al hacer scroll: translate (no transform) para no pelear con la inclinación 3D */
  .js [data-anim]{opacity:0;translate:0 26px;transition:opacity .8s var(--ease) calc(var(--i,0) * 90ms),translate 1s var(--ease) calc(var(--i,0) * 90ms)}
  .js .hero [data-anim]{transition-delay:calc(var(--i,0) * 120ms + 60ms)}
  .js [data-anim].in{opacity:1;translate:0 0}
  /* teléfono de la portada: sube y las piezas se despegan de la pantalla */
  .js .device{opacity:0;translate:0 50px;transition:opacity 1s var(--ease) .1s,translate 1.25s var(--ease) .1s}
  .js.ready .device{opacity:1;translate:0 0}
  .js .chip{opacity:0}
  .js.ready .rig.play .chip{animation:lift 1.1s var(--ease) var(--d,.6s) both,bob var(--bob,7s) ease-in-out calc(var(--d,.6s) + 1.1s) infinite}
  .c-verdict{--d:.6s;--bob:7s}.c-win{--d:.8s;--bob:8.5s}.c-f1{--d:1s;--bob:6.5s}.c-f2{--d:1.1s;--bob:7.5s}.c-f3{--d:1.2s;--bob:9s}
  /* al cambiar de método las piezas se despegan antes (el teléfono ya está a la vista) */
  .rig.again .c-verdict{--d:.3s}.rig.again .c-win{--d:.42s}.rig.again .c-f1{--d:.54s}.rig.again .c-f2{--d:.62s}.rig.again .c-f3{--d:.7s}
  /* aguja del medidor */
  .js .gauge .needle{transform:rotate(116deg)}
  .js .gauge.go .needle{animation:needle 1.7s cubic-bezier(.3,.1,.2,1) forwards}
  /* íconos que se dibujan */
  .js .ki svg *{stroke-dasharray:64;stroke-dashoffset:64}
  .js .in .ki svg *{animation:draw 1.3s var(--ease) calc(.25s + var(--i,0) * 90ms) forwards}
  /* pasos: la línea que los une */
  .js .steps li:not(:last-child)::after{transform:scaleY(0);transition:transform 1.1s var(--ease) .35s}
  .js .steps li.in::after{transform:scaleY(1)}
  /* cinta de 24 h */
  .js .bars i{transform:scaleY(0);transition:transform .9s var(--ease) calc(.2s + var(--i,0) * 80ms)}
  .js .bars em{opacity:0;transition:opacity .4s ease calc(.9s + var(--i,0) * 80ms)}
  .js .strip.in .bars i{transform:scaleY(1)}
  .js .strip.in .bars em{opacity:1}
  .col.now .hr{animation:nowring 2.4s ease-in-out infinite}
  /* factores: la línea de color y el punto que late */
  .js .fc::before{transform:scaleX(0);transition:transform .9s var(--ease) calc(.25s + var(--i,0) * 90ms)}
  .js .fc.in::before{transform:scaleX(1)}
  .fc.g .dot{animation:ping 2.6s ease-out infinite}
  /* mapa: los lotes aparecen y laten */
  .js .pin{scale:0;transition:scale .55s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i,0) * 160ms)}
  .js .mapwrap.in .pin{scale:1}
  .pin::before{animation:ring 2.8s cubic-bezier(.2,.6,.3,1) calc(var(--i,0) * .45s) infinite}
  .pin::after{animation:ring 2.8s cubic-bezier(.2,.6,.3,1) calc(var(--i,0) * .45s + 1.4s) infinite}
  /* avisos que llegan uno tras otro (el más viejo primero) */
  .js .ntf{opacity:0;transform:translateY(-16px) scale(.97);transition:opacity .5s ease calc(.35s + var(--i,0) * .6s),transform .75s cubic-bezier(.2,1.25,.3,1) calc(.35s + var(--i,0) * .6s)}
  .js .lockphone.in .ntf{opacity:1;transform:none}
  /* borde que gira en la tarjeta Pro */
  .plan.pro::before{animation:spin 7s linear infinite}
  .rig{transition:none}
}
@media (prefers-reduced-motion:no-preference) and (hover:none){.rig{animation:sway 9s ease-in-out infinite alternate}}
/* al cambiar de método el teléfono nuevo entra girando (rotate se suma al transform de la inclinación) */
@media (prefers-reduced-motion:no-preference){.rig.flip-in{animation:flipin .75s cubic-bezier(.2,.9,.25,1.08)}}
@keyframes flipin{from{rotate:y -90deg}to{rotate:y 0deg}}
@keyframes drift{to{transform:translate3d(-4%,3%,0) scale(1.06)}}
@keyframes fly{from{transform:translateY(0)}to{transform:translateY(60px)}}
@keyframes lift{from{opacity:0;transform:translate3d(calc(var(--z) * -.276),calc(var(--z) * -.122),0)}35%{opacity:1}to{opacity:1;transform:translate3d(0,0,var(--z))}}
@keyframes bob{0%,100%{transform:translate3d(0,0,var(--z))}50%{transform:translate3d(-3px,-2px,calc(var(--z) + 12px))}}
@keyframes sway{from{transform:rotateX(7deg) rotateY(-16deg) rotateZ(1.5deg)}to{transform:rotateX(4deg) rotateY(-6deg) rotateZ(.5deg)}}
@keyframes needle{0%{transform:rotate(116deg)}55%{transform:rotate(-9deg)}74%{transform:rotate(5deg)}88%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,199,106,.55)}70%,100%{box-shadow:0 0 0 12px rgba(52,199,106,0)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
@keyframes nowring{0%,100%{box-shadow:0 0 0 2px var(--ink)}50%{box-shadow:0 0 0 2px var(--ink),0 0 0 7px rgba(234,241,232,.12)}}
@keyframes spin{to{--ang:360deg}}

/* detalles abren con suavidad donde el navegador lo permite */
.q::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.q[open]::details-content{block-size:auto}