/* Zustro Labs · hoja de estilos compartida por las tres versiones (es, hr, en).
   Columna editorial de 1120 px. El damero 5×5 del logo marca la unidad: casillas de 8 px.
   Banda oscura de tinta solo en el hero y en el origen. */

:root{
  --bg:#FFFFFF; --bg-2:#F3F4F6; --fg:#1B2230; --muted:#5A6270; --line:#E1E4EA;
  --red:#C8102E; --red-ink:#C8102E; --on-red:#FFFFFF;
  --band:#1B2230; --band-fg:#F3F4F6; --band-muted:#A9B0BC; --band-red:#E8344C; --band-line:#2C3547;
  --logo-red:#C8102E; --logo-ink:#1B2230;
  --ok:#1E7A4C;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cell:8px;
  --wrap:1120px;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121822; --bg-2:#1B2230; --fg:#F3F4F6; --muted:#A9B0BC; --line:#2C3547;
  --red:#E8344C; --red-ink:#FF6B7D; --on-red:#FFFFFF;
  --band:#0D121B; --band-line:#263043;
  --logo-red:#E8344C; --logo-ink:#F3F4F6; --ok:#4CC38A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121822; --bg-2:#1B2230; --fg:#F3F4F6; --muted:#A9B0BC; --line:#2C3547;
  --red:#E8344C; --red-ink:#FF6B7D; --on-red:#FFFFFF;
  --band:#0D121B; --band-line:#263043;
  --logo-red:#E8344C; --logo-ink:#F3F4F6; --ok:#4CC38A; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lr{fill:var(--logo-red)} .li{fill:var(--logo-ink)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:.005em;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,4vw,2.8rem)}
h3{font-size:1.5rem;font-weight:600}
p{margin:0}
.kicker{font:700 1.05rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:var(--cell);height:var(--cell);background:var(--red);flex:none}
.lede{font-size:1.18rem;color:var(--muted);max-width:58ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
section{padding-block:clamp(64px,9vw,112px)}
section+section{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,56px);max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1.05rem/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;padding:14px 22px;border-radius:3px;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-red{background:#C8102E;color:#FFFFFF;border-color:#C8102E}
.btn-red:hover{background:#A80D26;border-color:#A80D26}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn-sm{padding:10px 16px;font-size:.95rem}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.top .logo{display:block;flex:none}
.top .logo svg{height:28px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:600;font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a.btn,.nav a.btn:hover{color:#FFFFFF;padding:10px 16px;border-bottom:0}
.lang{display:flex;gap:2px;font:600 .74rem/1 var(--f-mono);letter-spacing:.06em;border:1px solid var(--line);border-radius:3px;padding:2px}
.lang a{text-decoration:none;color:var(--muted);padding:7px 9px;border-radius:2px}
.lang a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.lang a:not([aria-current]):hover{color:var(--fg)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:3px;padding:9px 11px;color:var(--fg);cursor:pointer}
.menu-btn svg{display:block}
@media (max-width:900px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav .btn{margin-top:14px;border-bottom:0}
  .nav .lang{margin-top:16px;align-self:flex-start}
  .menu-btn{display:block}
}

/* hero */
.hero{background:var(--band);color:var(--band-fg);padding-block:clamp(56px,8vw,104px);border-top:0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,80px);align-items:center}
.hero .kicker{color:var(--band-muted)} .hero .kicker::before{background:var(--band-red)}
.hero h1{font-size:clamp(2.9rem,6.4vw,5rem);margin-top:22px}
.hero h1 em{font-style:normal;color:var(--band-red)}
.hero .sub{margin-top:24px;font-size:1.22rem;line-height:1.5;color:var(--band-muted);max-width:46ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .btn-ghost{color:var(--band-fg)}
.video-frame{position:relative;border-radius:4px;overflow:hidden;background:#1B2230;box-shadow:0 0 0 1px var(--band-line),0 40px 80px -40px rgba(0,0,0,.8);aspect-ratio:16/9}
.video-frame video,.video-frame img{width:100%;height:100%;display:block;object-fit:cover}
.hero .cap{margin-top:12px;font:400 .78rem/1.5 var(--f-mono);color:var(--band-muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

/* franja de credenciales */
.creds{background:var(--bg-2);border-top:0;padding-block:22px}
.creds ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 32px}
.creds li{display:grid;gap:3px;min-width:0;padding-left:14px;border-left:2px solid var(--red)}
.creds b{font:700 1.15rem/1.1 var(--f-display);letter-spacing:.01em}
.creds span{font-size:.9rem;color:var(--muted);line-height:1.4}
@media (max-width:860px){.creds ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.creds ul{grid-template-columns:minmax(0,1fr)}}

/* servicios */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,80px);align-items:start}
.split .sec-head{margin-bottom:0;position:sticky;top:96px}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--fg)}
.services li{display:grid;gap:10px;align-content:start;padding:26px 0 30px;border-bottom:1px solid var(--line)}
.services .n{font:700 .8rem/1 var(--f-mono);color:var(--red-ink);letter-spacing:.08em}
.services h3{font-size:1.6rem}
.services p{color:var(--muted);font-size:1rem}
.services .out{font-size:.92rem;color:var(--fg);padding-top:6px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.services .out::before{content:"→";color:var(--red-ink);font-family:var(--f-mono)}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split .sec-head{position:static}}
@media (max-width:600px){.services{grid-template-columns:minmax(0,1fr)}}

/* demos */
.demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.demo{display:grid;gap:18px;align-content:start;min-width:0}
.vid{border-radius:4px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--bg-2)}
.vid video{width:100%;height:100%;display:block;object-fit:cover}
.tag{display:inline-flex;align-items:center;gap:8px;font:600 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding:6px 9px;border-radius:2px;border:1px solid var(--line);color:var(--muted);width:max-content}
.tag.demo-tag{color:var(--red-ink);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.tag.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.demo h3{font-size:1.9rem;font-weight:700}
.demo>p{color:var(--muted)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rules li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:.98rem}
.rules li::before{content:"✓";color:var(--ok);font:600 .9rem var(--f-mono);padding-top:3px}
.note{font:400 .76rem/1.5 var(--f-mono);color:var(--muted)}
@media (max-width:800px){.demos{grid-template-columns:minmax(0,1fr)}}

/* producto propio */
.case{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.case-body{display:grid;gap:20px;min-width:0}
.case-body h3{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:14px 16px 12px 0}
.stats div+div{padding-left:16px;border-left:1px solid var(--line)}
.stats b{display:block;font:700 2rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats span{font-size:.86rem;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:20px;font-weight:600}
.links a{color:var(--red-ink);text-underline-offset:4px}
.phones{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.phone{margin:0;flex:1 1 0;max-width:200px;min-width:0;border:5px solid var(--fg);border-radius:20px;overflow:hidden;background:#fff;aspect-ratio:390/650}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phone:nth-child(2){margin-top:32px}
.shots-cap{margin-top:14px;font:400 .76rem/1.5 var(--f-mono);color:var(--muted);text-align:center}
.also{margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:baseline}
.also .tag{align-self:center}
.also p{color:var(--muted);font-size:1rem}
.also a{color:var(--fg);font-weight:600}
@media (max-width:860px){.case{grid-template-columns:minmax(0,1fr)}.case .phones{order:-1}.also{grid-template-columns:minmax(0,1fr)}}

/* equipo */
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.team li{display:grid;gap:14px;align-content:start;min-width:0}
.portrait{position:relative;aspect-ratio:4/5;border-radius:3px;background:var(--bg-2);overflow:hidden;max-width:100%;border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.portrait::before{content:"";position:absolute;z-index:1;top:0;left:0;width:calc(var(--cell)*5);height:calc(var(--cell)*5);
  background:conic-gradient(from -90deg,var(--red) 25%,transparent 0 50%,var(--red) 0 75%,transparent 0) 0 0/calc(var(--cell)*2) calc(var(--cell)*2)}
.portrait.empty::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--fg) 10%,transparent) 0 14%,transparent 15%),
  radial-gradient(ellipse at 50% 92%,color-mix(in srgb,var(--fg) 10%,transparent) 0 36%,transparent 37%)}
.team h3{font-size:1.55rem;font-weight:700}
.team .role{color:var(--muted);font-size:.95rem;min-height:1.5em}
.team .role:empty{display:none}
.bio{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line);align-items:start}
.bio h3{font-size:1.9rem}
.bio .lede{font-size:1.08rem;color:var(--fg)}
.bio details{margin-top:18px;border-top:1px solid var(--line)}
.bio summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--red-ink);list-style:none;display:flex;align-items:center;gap:10px}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+";font:600 1.2rem/1 var(--f-mono);margin-left:auto}
.bio details[open] summary::after{content:"–"}
.cv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;padding:8px 0 20px}
.cv h4{margin:0 0 8px;font:600 .74rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cv h4.cv-sep{margin-top:18px}
.cv p,.cv li{font-size:.98rem}
.cv ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.timeline li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
.timeline .y{font:400 .82rem/1.65 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.talks{grid-column:1/-1}
.talks .w{color:var(--muted)}
.bio .links{margin-top:6px}
@media (max-width:860px){.bio{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.team{grid-template-columns:minmax(0,1fr);max-width:360px}.cv{grid-template-columns:minmax(0,1fr)}.timeline li{grid-template-columns:minmax(0,1fr);gap:0}}

/* origen */
.origin{background:var(--band);color:var(--band-fg);border-top:0}
.origin .kicker{color:var(--band-muted)} .origin .kicker::before{background:var(--band-red)}
.origin .lede{color:var(--band-muted)}
.origin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
.origin-grid article{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:1px solid var(--band-line)}
.origin-grid h3{font-size:1.6rem;color:var(--band-fg)}
.origin-grid p{color:var(--band-muted)}
.origin-grid svg{width:72px;height:72px;display:block}
@media (max-width:760px){.origin-grid{grid-template-columns:minmax(0,1fr)}}

/* contacto */
.contact{display:grid;gap:24px;justify-items:start}
.contact h2{font-size:clamp(2.4rem,5vw,3.6rem)}
.contact .lede{max-width:52ch}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font:500 clamp(1.2rem,3vw,1.6rem) var(--f-mono);user-select:all;overflow-wrap:anywhere}
.copy{font:600 .9rem var(--f-body);padding:8px 14px;border-radius:3px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.copy:hover{border-color:var(--fg)}
.contact .others{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--muted)}
.contact .others a{color:var(--fg);font-weight:600}

/* footer */
footer{border-top:1px solid var(--line);padding-block:40px 32px;color:var(--muted);font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:28px}
.foot-grid svg{height:24px;width:auto;display:block;margin-bottom:12px}
.foot-grid h4{font:600 .74rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot-grid a{color:var(--fg);text-decoration:none;display:inline-block;padding-block:3px;min-width:24px}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-grid a[aria-current="page"]{color:var(--muted)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem}
@media (max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}

/* en qué estamos */
.status{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.status li{display:grid;gap:14px;align-content:start;padding:22px 22px 24px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.status .tag{width:max-content}
.status ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.status ul li{display:grid;gap:2px;padding:0;border:0;background:none}
.status ul b{font-weight:600}
.status ul span{color:var(--muted);font-size:.95rem}
@media (max-width:800px){.status{grid-template-columns:minmax(0,1fr)}}

/* productos: segundo caso y marco de navegador */
.case+.case{margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.browser{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-2);box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.browser .bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.browser .bar span{margin-left:8px;font:400 .75rem var(--f-mono);color:var(--muted);background:var(--bg-2);border-radius:3px;padding:3px 10px;flex:1;text-align:center}
.browser img{display:block;width:100%;height:auto}
.case .why{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.98rem;color:var(--muted);border-left:2px solid var(--red);padding-left:14px}
.case .why b{color:var(--fg);font-weight:600}

/* página de exposición */
.expo{max-width:880px;margin:0 auto;padding:clamp(28px,5vw,64px) 20px 60px}
.expo .brand{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,56px)}
.expo .brand svg{height:34px;width:auto;display:block}
.expo .brand span{font:500 .8rem var(--f-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.expo h1{font-size:clamp(2.8rem,8vw,5.2rem)}
.expo .intro{margin-top:18px;font-size:clamp(1.15rem,2.4vw,1.45rem);color:var(--muted);max-width:40ch}
.expo .cards{display:grid;gap:20px;margin-top:clamp(32px,5vw,48px)}
.expo .card{display:grid;grid-template-columns:minmax(0,1fr) 164px;gap:24px;align-items:center;border:2px solid var(--fg);border-radius:6px;padding:clamp(20px,3vw,32px)}
.expo .card.red{background:var(--band);color:var(--band-fg);border-color:var(--band)}
.expo .card .kicker{margin-bottom:10px}
.expo .card.red .kicker{color:var(--band-muted)} .expo .card.red .kicker::before{background:var(--band-red)}
.expo .card h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.expo .card p{margin-top:10px;font-size:1.08rem;color:var(--muted);max-width:46ch}
.expo .card.red p{color:var(--band-muted)}
.expo .card .url{display:inline-block;margin-top:14px;padding-block:3px;font:600 1rem var(--f-mono);color:var(--red-ink);text-decoration:none;text-underline-offset:4px}
.expo .card.red .url{color:#FF6B7D}
.expo .card .url:hover{text-decoration:underline}
.expo .qr{width:164px;height:164px;background:#fff;padding:8px;border-radius:4px;border:1px solid var(--line);justify-self:end}
.expo .qr img{width:100%;height:100%;display:block}
.expo .foot{margin-top:clamp(32px,5vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line);padding-top:20px}
.expo .foot a{color:var(--fg);font-weight:600;display:inline-block;padding-block:3px}
@media (max-width:620px){.expo .card{grid-template-columns:minmax(0,1fr)}.expo .qr{justify-self:start;width:140px;height:140px}}
@media print{.expo .card{break-inside:avoid}.expo .card.red{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* pantalla grande */
.screen{min-height:100svh;background:var(--band);color:var(--band-fg);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(24px,3vw,48px) clamp(24px,4vw,64px)}
.screen .brand svg{height:clamp(32px,4vw,56px);width:auto;display:block}
.screen .brand .li{fill:#F3F4F6} .screen .brand .lr{fill:#E8344C}
.screen .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.screen .stage h1{font-size:clamp(3rem,6.5vw,7.5rem);line-height:.98}
.screen .stage h1 em{font-style:normal;color:#E8344C}
.screen .line{margin-top:clamp(18px,3vw,36px);font-size:clamp(1.3rem,2.6vw,2.4rem);color:#A9B0BC;min-height:2.6em;transition:opacity .5s}
.screen .line.fade{opacity:0}
.screen .video-frame{box-shadow:0 0 0 1px #2C3547}
.screen .foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid #2C3547;padding-top:clamp(16px,2vw,28px)}
.screen .foot .url{font:700 clamp(1.4rem,3vw,2.6rem) var(--f-display);letter-spacing:.02em}
.screen .foot .url small{display:block;font:400 clamp(.85rem,1.2vw,1.1rem) var(--f-mono);color:#A9B0BC;letter-spacing:.06em;margin-top:4px}
.screen .foot .qr{width:clamp(96px,10vw,160px);aspect-ratio:1;background:#fff;padding:6px;border-radius:4px}
.screen .foot .qr img{width:100%;height:100%;display:block}
@media (max-width:900px){.screen .stage{grid-template-columns:minmax(0,1fr)}}

/* hero: teléfono con la conversación del agente */
.hero .phone-col{display:grid;gap:12px;justify-items:center}
.phone-mock{width:min(100%,330px);background:#F3F4F6;border:8px solid #0D121B;border-radius:38px;overflow:hidden;box-shadow:0 0 0 1px #2C3547,0 40px 80px -40px rgba(0,0,0,.9);color:#1B2230;font-size:.9rem;line-height:1.4}
.phone-mock .ph-top{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;background:#FFFFFF;border-bottom:1px solid #E1E4EA}
.phone-mock .ph-top i{width:34px;height:34px;border-radius:50%;background:#C8102E;color:#fff;display:grid;place-items:center;font:700 .95rem var(--f-display);flex:none}
.phone-mock .ph-top b{display:block;font-weight:600;font-size:.92rem;line-height:1.2}
.phone-mock .ph-top span{display:block;font-size:.74rem;color:#5A6270}
.phone-mock .chat{display:grid;gap:7px;padding:14px 12px 16px;min-height:300px;align-content:start}
.phone-mock .msg{max-width:86%;padding:8px 11px;border-radius:12px}
.phone-mock .msg.in{background:#FFFFFF;border:1px solid #E1E4EA;justify-self:start;border-bottom-left-radius:3px}
.phone-mock .msg.out{background:#1B2230;color:#F3F4F6;justify-self:end;border-bottom-right-radius:3px}
.phone-mock .msg.flag{border:1.5px dashed #C8102E;background:#FFFFFF;justify-self:start;border-bottom-left-radius:3px}
.phone-mock .ph-in{margin:0 12px 14px;padding:9px 14px;border-radius:999px;background:#FFFFFF;border:1px solid #E1E4EA;color:#5A6270;font-size:.82rem}
.hero .phone-cap{font:400 .76rem/1.5 var(--f-mono);color:var(--band-muted);text-align:center;max-width:34ch}
@media (max-width:860px){.hero .phone-col{justify-items:start}.hero .phone-cap{text-align:left}}

/* ¿te pasa esto? */
.problems{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.problems li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 20px;padding:22px 24px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.problems .n{font:700 .8rem/1.6 var(--f-mono);color:var(--red-ink);letter-spacing:.08em}
.problems h3{font-size:1.5rem;font-weight:700}
.problems p{color:var(--muted);font-size:1rem;margin-top:4px}
.problems .fix{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding-top:12px;margin-top:4px;border-top:1px solid var(--line);font-size:.98rem}
.problems .fix::before{content:"→";color:var(--red-ink);font-family:var(--f-mono)}
.problems .fix b{font-weight:600}
@media (max-width:520px){.problems li{grid-template-columns:minmax(0,1fr)}.problems .fix{grid-column:1}}

/* qué construimos */
.build{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.build li{display:grid;gap:12px;align-content:start;padding-top:20px;border-top:2px solid var(--fg)}
.build .n{font:700 .8rem/1 var(--f-mono);color:var(--red-ink);letter-spacing:.08em}
.build h3{font-size:1.7rem;font-weight:700}
.build p{color:var(--muted);font-size:1rem}
.build .out{font-size:.92rem;color:var(--fg);padding-top:6px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.build .out::before{content:"✓";color:var(--ok);font:600 .9rem var(--f-mono)}
@media (max-width:860px){.build{grid-template-columns:minmax(0,1fr)}}

/* por qué nosotros */
.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.reasons li{display:grid;gap:10px;align-content:start;padding:24px 26px 26px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.reasons h3{font-size:1.6rem;font-weight:700;display:grid;grid-template-columns:var(--cell) minmax(0,1fr);gap:12px;align-items:center}
.reasons h3::before{content:"";width:var(--cell);height:var(--cell);background:var(--red)}
.reasons p{color:var(--muted);font-size:1rem}
@media (max-width:700px){.reasons{grid-template-columns:minmax(0,1fr)}}

/* estado dentro de proyectos */
.status-wrap{margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line);display:grid;gap:22px}
.status-wrap h3{font-size:1.5rem}

/* botón de modo claro / oscuro */
.theme-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:3px;background:none;color:var(--fg);cursor:pointer;margin-left:10px;flex:none}
.theme-btn:hover{border-color:var(--fg)}
.theme-btn svg{width:18px;height:18px;display:block}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .moon{display:none}:root:not([data-theme="light"]) .theme-btn .sun{display:block}}
@media (max-width:900px){.theme-btn{margin-left:auto}.menu-btn{margin-left:10px}}

/* --- simplificación: productos, equipo compacto, oferta, micro-pasos, animaciones --- */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-bottom:clamp(56px,8vw,96px)}
.product{display:grid;gap:14px;align-content:start;min-width:0}
.product h3{font-size:1.8rem;font-weight:700}
.product>p{color:var(--muted)}
@media (max-width:800px){.products{grid-template-columns:minmax(0,1fr)}}
.products+.case{margin-top:0;padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.problems .micro{grid-column:2;justify-self:start;font-weight:600;color:var(--red-ink);text-decoration:none;text-underline-offset:4px;font-size:.95rem}
.problems .micro:hover{text-decoration:underline}
@media (max-width:520px){.problems .micro{grid-column:1}}
.team{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.team li{grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:4px}
.team .portrait{width:72px}
.team h3{font-size:1.25rem}
.team .role{font-size:.88rem;min-height:0}
@media (max-width:760px){.team{grid-template-columns:minmax(0,1fr);max-width:none}}
.offer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:baseline;padding:16px 20px;border-left:3px solid var(--red);background:var(--bg-2);border-radius:0 4px 4px 0;max-width:62ch}
.offer b{font-family:var(--f-display);font-size:1.2rem;font-weight:700;white-space:nowrap}
.offer span{color:var(--muted)}
@media (max-width:520px){.offer{grid-template-columns:minmax(0,1fr)}}
/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.problems li,.product,.case,.team li{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.problems li:hover,.team li:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fg) 35%,var(--line))}
/* el chat del hero aparece mensaje a mensaje */
@keyframes msg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.phone-mock.chat-anim .msg{animation:msg-in .45s ease both}
.phone-mock.chat-anim .msg:nth-child(1){animation-delay:.4s}.phone-mock.chat-anim .msg:nth-child(2){animation-delay:1.3s}.phone-mock.chat-anim .msg:nth-child(3){animation-delay:2.3s}.phone-mock.chat-anim .msg:nth-child(4){animation-delay:3.1s}.phone-mock.chat-anim .msg:nth-child(5){animation-delay:4.2s}.phone-mock.chat-anim .msg:nth-child(6){animation-delay:5.2s}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.phone-mock .msg{animation:none}.problems li,.product,.case,.team li{transition:none}}

/* cuatro soluciones, tarjetas compactas */
.solutions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.solutions li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-content:start;padding:20px 22px 18px;border:1px solid var(--line);border-radius:4px;background:var(--bg);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .6s ease}
.solutions li:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fg) 35%,var(--line));box-shadow:0 18px 40px -28px rgba(0,0,0,.45)}
.solutions .n{font:700 .8rem/1.7 var(--f-mono);color:var(--red-ink);letter-spacing:.08em;grid-row:1/4}
.solutions h3{font-size:1.45rem;font-weight:700}
.solutions p{color:var(--muted);font-size:.98rem}
.solutions .micro{justify-self:start;margin-top:8px;font-weight:600;font-size:.92rem;color:var(--red-ink);text-decoration:none;text-underline-offset:4px}
.solutions .micro:hover{text-decoration:underline}
.solutions li.reveal{transform:translateY(16px)}
.solutions li.reveal.in{transform:none}
.solutions li:nth-child(2).reveal{transition-delay:.08s}.solutions li:nth-child(3).reveal{transition-delay:.16s}.solutions li:nth-child(4).reveal{transition-delay:.24s}
.solutions li.reveal.in:hover{transform:translateY(-3px)}
@media (max-width:760px){.solutions{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.solutions li{grid-template-columns:minmax(0,1fr)}.solutions .n{grid-row:auto}}
@media (prefers-reduced-motion: reduce){.solutions li{transition:none;transform:none}}

/* tarjetas: problema → lo que hacemos */
.solutions .lbl{font:600 .75rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.solutions .prob{color:var(--fg);font-size:1.04rem;line-height:1.5;margin:0 0 16px}
.solutions .sol{color:var(--fg);font-size:1.04rem;line-height:1.5;font-weight:600;margin:0;padding-left:12px;border-left:3px solid var(--red)}


/* contacto: rótulo, título, tarjeta del formulario y el correo como alternativa */
.contact-wrap{max-width:800px}
.contact-wrap .sec-head{max-width:none}
.form-card{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3.5vw,36px);box-shadow:0 30px 60px -48px rgba(0,0,0,.5)}
.form-card form,.form-card .f-ok,.form-card .f-fail{display:grid;gap:16px}
.form-card h3{font-size:1.9rem}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;position:relative}
.f-grid label{display:grid;gap:6px;font:600 .75rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f-grid .full{grid-column:1/-1}
.f-grid .f-hint{margin:-4px 0 0;font:400 .82rem/1.4 var(--f-body);color:var(--muted)}
.f-grid input,.f-grid select,.f-grid textarea{font:400 1rem/1.4 var(--f-body);letter-spacing:0;text-transform:none;padding:11px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg-2);color:var(--fg);width:100%;min-width:0}
.f-grid input::placeholder,.f-grid textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.f-grid textarea{resize:none}
.f-grid input:focus,.f-grid select:focus,.f-grid textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red);background:var(--bg)}
.f-grid .invalid{border-color:var(--red)}
.f-grid .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-error{color:var(--red-ink);font-weight:600;margin:0}
.f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.f-trust{margin:0;font-size:.86rem;color:var(--muted)}
@media (max-width:560px){.f-grid{grid-template-columns:minmax(0,1fr)}}
.contact-alt{margin:18px 0 0;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.contact-alt code{font:500 .95rem var(--f-mono);color:var(--fg);user-select:all}
.contact-alt .copy{padding:5px 10px;font-size:.82rem}
.contact-alt+.contact-alt{margin-top:8px;font-size:.88rem}

/* contacto: sección en gris claro, tarjeta en el color de fondo, campos con el borde del tema (en modo oscuro todo sigue a las variables) */
#contacto,#contact,#kontakt{background:var(--bg-2)}
.form-card{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3.5vw,36px);box-shadow:0 24px 48px -32px rgba(0,0,0,.28)}
.form-card .kicker{color:var(--red-ink)}
.form-card .muted,.f-grid label,.f-grid .f-hint,.f-trust{color:var(--muted)}
.f-grid input,.f-grid select,.f-grid textarea{background:var(--bg);color:var(--fg);border:1px solid color-mix(in srgb,var(--line) 60%,var(--muted));box-shadow:none}
.f-grid input:hover,.f-grid select:hover,.f-grid textarea:hover{border-color:var(--muted)}
.f-grid input::placeholder,.f-grid textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.f-grid input:focus,.f-grid select:focus,.f-grid textarea:focus{background:var(--bg);outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.f-grid .invalid{border-color:var(--red);box-shadow:none}
.f-error{color:var(--red-ink)}
.form-card .btn-red{border-color:#C8102E}
.contact-alt code{background:var(--bg);border:1px solid var(--line);padding:3px 8px;border-radius:3px}
/* marco rojo de la tarjeta del formulario */
.form-card{border:2px solid var(--red);border-top-width:6px;box-shadow:0 28px 56px -32px color-mix(in srgb,var(--red) 35%,transparent)}
/* marco parejo y halo uniforme */
.form-card{border-width:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 14%,transparent),0 0 40px color-mix(in srgb,var(--red) 22%,transparent)}
/* formulario destacado: marco de tinta grueso con sombra desplazada, rótulos en negrita y campos más grandes */
.form-card{border:3px solid var(--fg);border-radius:6px;box-shadow:8px 8px 0 color-mix(in srgb,var(--fg) 22%,transparent)}
.f-grid label{font:700 .84rem/1 var(--f-mono);letter-spacing:.1em;color:var(--fg)}
.f-grid input,.f-grid select,.f-grid textarea{font-size:1.08rem;padding:13px 14px;border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent)}
.f-grid input:hover,.f-grid select:hover,.f-grid textarea:hover{border-color:var(--fg)}
.f-grid .f-hint,.f-trust{font-size:.92rem;color:var(--fg)}
.f-grid .f-hint{font-weight:600}
.form-card .btn-red{font-size:1.15rem;padding:16px 26px}
@media (max-width:560px){.form-card .btn-red{width:100%}.form-card{box-shadow:6px 6px 0 color-mix(in srgb,var(--fg) 22%,transparent)}}
/* marco negro, difuminado gris parejo alrededor, y al pasar el mouse crece un poco y se pone rojo */
.form-card{border:3px solid #000000;box-shadow:0 0 32px rgba(0,0,0,.22);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.form-card:hover{transform:scale(1.015);border-color:var(--red);box-shadow:0 0 40px rgba(0,0,0,.28)}
:root[data-theme="dark"] .form-card{border-color:var(--fg);box-shadow:0 0 32px rgba(0,0,0,.6)}
:root[data-theme="dark"] .form-card:hover{border-color:var(--red)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .form-card{border-color:var(--fg);box-shadow:0 0 32px rgba(0,0,0,.6)}:root:not([data-theme="light"]) .form-card:hover{border-color:var(--red)}}
@media (max-width:560px){.form-card{box-shadow:0 0 24px rgba(0,0,0,.2)}}
@media (prefers-reduced-motion: reduce){.form-card{transition:none}.form-card:hover{transform:none}}

/* ===== Celular (ZL-72). Todo va dentro de media queries: la versión de computadora no cambia. ===== */
.menu-btn .x{display:none}
@media (max-width:900px){
  /* cabecera: logo a la izquierda; modo oscuro y menú juntos, el menú a la derecha del todo */
  .top .wrap{gap:8px}
  .top .logo{margin-right:auto}
  .theme-btn{order:2;margin-left:0;width:44px;height:44px}
  .menu-btn{order:3;margin-left:0;display:grid;place-items:center;width:44px;height:44px;padding:0}
  .menu-btn[aria-expanded="true"] .bars{display:none}
  .menu-btn[aria-expanded="true"] .x{display:block}
  /* menú abierto: se separa del contenido y, si no entra, se desplaza */
  .nav{box-shadow:0 22px 30px -20px rgba(0,0,0,.45);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
  /* idioma: tres botones iguales, cómodos para el dedo */
  .nav .lang{align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:18px;padding:4px;border-radius:4px;font-size:.9rem}
  .nav .lang a{display:grid;place-items:center;min-height:44px;padding:0;border-bottom:0;border-radius:3px;font-size:inherit;letter-spacing:.14em}
  .nav .btn{min-height:50px;justify-content:center}
}
@media (max-width:560px){
  .hero .kicker{letter-spacing:.06em;line-height:1.25}
  /* botones principales a lo ancho, uno debajo del otro */
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{width:100%;min-height:52px}
  /* el teléfono de ejemplo, centrado */
  .hero .phone-col{justify-items:center}
  .hero .phone-cap{text-align:center}
  .contact-alt .copy{min-height:36px;padding:8px 14px}
}