/* CONCRETA SHOWROOMS · identidad Concreta: blanco / gris claro, tinta, azul #0071E3, Helvetica.
   La marca es sólo el :root (tokens neutros). Sombras sólo en equipos (laptop/teléfono) y paneles.
   SISTEMA (pasada de pulido, Samuel 2026-10-15 «arreglar proporciones, narrativa, espacios»):
   · un solo ritmo vertical --sec para toda sección; fondos alternados blanco / gris; cierre oscuro.
   · un solo ancho de contenido --max; una sola escala de titulares (ceja azul + 2 líneas tinta/gris). */
:root{
  --paper:#F5F5F7; --mist:#FFFFFF;   /* fondo Concreta = el papel gris de la landing; las tarjetas van en blanco */ --ink:#1D1D1F; --muted:#6E6E73; --hair:rgba(0,0,0,.08);
  --brand:#0071E3; --brand-soft:#E8F0FC;
  --ok:#34C759; --ap:#FF9500; --vn:#FF3B30; --gris:#8E8E93;
  --ok-ink:#248A3D; --ap-ink:#A0640A; --vn-ink:#D70015;
  --ok-soft:rgba(52,199,89,.13); --ap-soft:rgba(255,149,0,.14); --vn-soft:rgba(255,59,48,.10);
  --sombra:0 1px 2px rgba(0,0,0,.04),0 30px 70px -34px rgba(0,0,0,.34);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --app-font:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,64px); --max:1120px; --ancho:min(100% - 2 * var(--pad), var(--max));
  --sec:clamp(72px,9vw,128px); --cab:clamp(24px,3.2vw,40px);
  --fs-hero:clamp(2.5rem,1.2rem + 4.6vw,4.9rem);
  --fs-tit:clamp(1.8rem,1.15rem + 2.2vw,3rem);
  --fs-sub:clamp(1rem,.95rem + .3vw,1.2rem);
  --alto:100svh;   /* alto útil: cada sección cabe en UNA pantalla (Samuel 12:39) */
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; min-width:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; letter-spacing:-.005em; }
img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg:not(.demo-app svg){ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; }

/* ── piezas comunes ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 28px; border-radius:999px; font-size:1.0625rem; font-weight:500; transition:background-color .2s, transform .2s var(--ease); white-space:nowrap; }
.btn:active{ transform:scale(.97); }
.btn-azul{ background:var(--brand); color:#fff; } .btn-azul:hover{ background:#0077ED; }
.btn-blanco{ background:#fff; color:var(--ink); } .btn-blanco:hover{ background:#F2F2F7; }
.btn-chico{ min-height:36px; padding:0 16px; font-size:.875rem; }
.link-azul{ color:var(--brand); font-size:1.0625rem; display:inline-flex; align-items:center; gap:4px; min-height:44px; }
.link-azul:hover{ text-decoration:underline; }
.link-gris{ color:var(--muted); font-size:.92rem; min-height:44px; display:inline-flex; align-items:center; }
.link-gris:hover{ color:var(--ink); }
.ceja{ color:var(--brand); font-weight:600; font-size:clamp(1rem,.95rem + .3vw,1.2rem); letter-spacing:-.01em; }
.titular{ font-size:var(--fs-tit); line-height:1.04; letter-spacing:-.035em; font-weight:700; text-wrap:balance; }
.titular span{ display:block; color:var(--muted); }
.sec{ padding:var(--sec) 0; }
/* cada sección interactiva se dimensiona contra el alto de la pantalla, no sólo contra el ancho */
.sec.gris{ background:var(--paper); }
.sec-cab{ text-align:center; max-width:1000px; margin:0 auto var(--cab); padding:0 var(--pad); }
.sec-cab .titular{ margin-top:10px; }
.sec-sub{ font-size:var(--fs-sub); color:var(--muted); margin:12px auto 0; max-width:40ch; text-wrap:pretty; }
.nota{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:28px; padding:0 var(--pad); }

/* ── nav: el mismo de la landing (logo CONCRETA + «Iniciar sesión»; anclado arriba, se va con el scroll) ── */
.nav{ position:absolute; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px var(--pad); }
.nav .logo{ font-weight:900; letter-spacing:-.03em; font-size:19px; line-height:.85; }
.cta2 .t{ display:inline-flex; background:var(--brand); color:#fff; border-radius:999px; padding:9px 20px; font-weight:500; font-size:14.5px; transition:opacity .2s; }
.cta2:hover .t{ opacity:.9; }

/* ── entrada ── */
.sube{ display:inline-block; opacity:0; transform:translateY(28px); animation:sube .8s var(--ease) var(--d,0s) forwards; }
.ln{ display:block; overflow:hidden; padding-bottom:.08em; }
.ln .sube{ transform:translateY(110%); }
.sube.az{ color:var(--brand); }
@keyframes sube{ to{ opacity:1; transform:none; } }

/* ── HERO ── */
.hero{ min-height:70svh; display:grid; place-content:center; text-align:center; padding:max(var(--sec), 112px) var(--pad) calc(var(--sec) * .55); }
.hero-tit{ font-size:var(--fs-hero); line-height:.98; letter-spacing:-.05em; font-weight:700; }
.hero-sub{ font-size:var(--fs-sub); color:var(--muted); max-width:46ch; margin:26px auto 0; text-wrap:balance; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; align-items:center; margin-top:36px; }

/* ── RELATO (scroll nativo + sticky; nada de pin GSAP) ── */
.vuelo{ position:relative; height:440vh; background:var(--paper); }
.vuelo-fijo{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; }
.vuelo-caja{ position:relative; width:min(100% - 2 * var(--pad), (100svh - 150px) * 16 / 9, 1280px); aspect-ratio:16/9; border-radius:clamp(16px,2.2vw,30px); overflow:hidden; background:#d8d8dc; box-shadow:var(--sombra); }
#vueloCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.vuelo-caja::after{ content:''; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45)); pointer-events:none; transition:opacity .4s; }
.capa{ position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.capa.on{ opacity:1; }
.capa-sr picture,.capa-sr img{ position:absolute; inset:0; width:100%; height:100%; }
.capa-sr img{ object-fit:cover; }
.capa-planta img{ transform:scale(calc(1.06 - var(--pz,0) * .06)); transition:transform .2s linear; }
.capa-ficha{ transition-duration:.6s; }
.capa-ficha img{ transform-origin:92% 56%; transform:scale(calc(1 + var(--fz,0) * .42)); transition:transform .2s linear; }
.c3-lienzo{ position:absolute; inset:0; width:100%; height:100%; }
.c3-sello{ position:absolute; right:18px; top:18px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.88); font-weight:700; font-size:.85rem; }
.capa-wa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(3px) brightness(.8); transform:scale(1.05); }
.cw-burb{ position:absolute; left:50%; top:36%; translate:-50% -50%; width:min(400px,82%); background:#D9FDD3; border-radius:20px; padding:16px 18px; font-size:clamp(.92rem,.82rem + .4vw,1.08rem); line-height:1.4; box-shadow:0 18px 40px -16px rgba(0,0,0,.45); transform:translateY(30px) scale(.92); opacity:0; transition:transform .6s var(--spring) .1s, opacity .4s .1s; }
.capa-wa.on .cw-burb{ transform:none; opacity:1; }
.cw-burb small{ display:block; margin-top:6px; color:var(--muted); font-size:.75rem; }
.vuelo-txt{ position:absolute; z-index:1; left:0; right:0; bottom:clamp(20px,5%,56px); display:grid; place-items:center; pointer-events:none; }
.vuelo-txt p{ grid-area:1/1; text-align:center; font-size:clamp(1.9rem,1.1rem + 3vw,3.8rem); font-weight:700; letter-spacing:-.04em; line-height:1.02; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.3); opacity:0; transform:translateY(24px); filter:blur(8px); transition:opacity .5s var(--ease), transform .7s var(--ease), filter .5s var(--ease); padding:0 20px; }
.vuelo-txt p.on{ opacity:1; transform:none; filter:none; }
.vuelo-txt b{ display:block; font-size:.32em; letter-spacing:.06em; font-weight:600; margin-bottom:8px; opacity:.9; }
.vuelo-txt span{ display:block; font-size:.4em; font-weight:500; letter-spacing:-.01em; margin-top:12px; }
.vuelo-barra{ position:absolute; top:20px; left:50%; translate:-50% 0; width:min(240px,50%); height:3px; border-radius:3px; background:rgba(0,0,0,.1); overflow:hidden; }
.vuelo-barra i{ display:block; height:100%; width:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); }

/* ── AHORA TÓCALO ── */
.prueba-grid{ display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(20px,3vw,44px); width:min(100% - 2 * var(--pad), 260px + 44px + (var(--alto) - 250px) * 1.5, 1280px); margin:0 auto; align-items:center; }
.guia{ list-style:none; display:flex; flex-direction:column; gap:4px; counter-reset:p; }
.guia li{ display:grid; grid-template-columns:28px 1fr; gap:14px; padding:14px 16px; border-radius:16px; transition:background-color .4s var(--ease); counter-increment:p; }
.guia li i{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--hair); display:grid; place-items:center; font-style:normal; font-size:.8rem; color:var(--muted); transition:all .4s var(--ease); }
.guia li i::before{ content:counter(p); }
.guia li b{ display:block; font-size:1.05rem; letter-spacing:-.015em; color:var(--muted); transition:color .3s; }
.guia li span{ display:block; font-size:.9rem; color:var(--muted); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s; }
.guia li.hecho i{ background:var(--ink); border-color:var(--ink); color:#fff; }
.guia li.hecho i::before{ content:'✓'; }
.guia li.hecho b{ color:var(--ink); }
.guia li.ahora{ background:var(--mist); }
.guia li.ahora i{ border-color:var(--brand); color:var(--brand); animation:late 1.8s ease-out infinite; }
.guia li.ahora b{ color:var(--ink); }
.guia li.ahora span{ max-height:3em; opacity:1; }
@keyframes late{ 0%{ box-shadow:0 0 0 0 rgba(0,113,227,.4); } 100%{ box-shadow:0 0 0 10px rgba(0,113,227,0); } }
.laptop-pant{ position:relative; aspect-ratio:16/10; border-radius:20px 20px 6px 6px; background:#0d0d0d; border:11px solid #1d1d1f; border-bottom-width:16px; overflow:hidden; }
.laptop-pant iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.sala-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(6px) brightness(.85); transform:scale(1.05); }
.sala-abrir{ position:absolute; left:50%; top:50%; translate:-50% -50%; }
.laptop-base,.mk-base{ height:15px; margin:0 -6%; border-radius:0 0 20px 20px; background:linear-gradient(#DADADD,#A9A9AE); position:relative; }
.laptop-base::after,.mk-base::after{ content:''; position:absolute; left:50%; top:0; translate:-50% 0; width:15%; height:5px; border-radius:0 0 8px 8px; background:#9A9AA0; }
.laptop{ filter:drop-shadow(0 30px 40px rgba(0,0,0,.18)); }
.equipo-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; margin-top:26px; }
.estado{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); margin-right:auto; }
.estado i{ width:8px; height:8px; border-radius:50%; background:#C7C7CC; }
.estado.vivo i{ background:var(--ok); animation:late-ok 1.8s ease-out infinite; }
@keyframes late-ok{ 0%{ box-shadow:0 0 0 0 rgba(52,199,89,.5); } 100%{ box-shadow:0 0 0 8px rgba(52,199,89,0); } }

/* ── RECORRIDOS 360 ── */
.rc{ width:var(--ancho); margin:0 auto; }
.rc-tipos,.rc-cuartos{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
.rc-tipos{ justify-content:center; margin-bottom:14px; }
.rc-tipos button{ flex:none; display:flex; flex-direction:column; align-items:flex-start; padding:8px 14px; border-radius:16px; background:#fff; text-align:left; min-height:52px; transition:background-color .25s, color .25s; }
.rc-tipos button b{ font-size:.92rem; letter-spacing:-.01em; } .rc-tipos button span{ font-size:.78rem; color:var(--muted); }
.rc-tipos button.on{ background:var(--ink); color:#fff; } .rc-tipos button.on span{ color:rgba(255,255,255,.7); }
.rc-vista{ position:relative; width:min(100%, (var(--alto) - 290px) * 16 / 9); margin:0 auto; aspect-ratio:16/9; border-radius:clamp(16px,2.2vw,30px); overflow:hidden; background:#1d1d1f; box-shadow:var(--sombra); }
.rc-lienzo{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.rc-lienzo:active{ cursor:grabbing; }
.rc-flechas{ position:absolute; inset:0; pointer-events:none; }
.rc-fl{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto; transition:opacity .25s; }
.rc-fl svg{ width:48px; height:48px; padding:12px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); stroke-width:2.4; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .25s var(--spring), background-color .2s; }
.rc-fl:hover svg{ transform:scale(1.12); background:#fff; }
.rc-fl span{ font-size:.8rem; font-weight:600; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5); white-space:nowrap; }
.rc-tit{ position:absolute; left:20px; top:18px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4); pointer-events:none; }
.rc-tit b{ display:block; font-size:clamp(1.25rem,1rem + 1vw,1.9rem); letter-spacing:-.025em; }
.rc-tit span{ font-size:.85rem; opacity:.92; }
.rc-pista{ position:absolute; left:50%; bottom:16px; translate:-50% 0; font-size:.8rem; color:#fff; background:rgba(0,0,0,.42); padding:6px 12px; border-radius:999px; pointer-events:none; white-space:nowrap; }
.rc-cuartos{ justify-content:center; margin-top:14px; }
.rc-cuartos button{ flex:none; min-height:40px; padding:0 16px; border-radius:999px; background:#fff; font-size:.9rem; transition:background-color .25s, color .25s; }
.rc-cuartos button.on{ background:var(--brand); color:#fff; }

/* ── CRM ↔ SHOWROOM (mockup fiel al Inventario de CRM 2 + teléfono con el showroom real) ── */
/* laptop y teléfono en una rejilla con base común (align-items:end): el teléfono mide 28 % del conjunto
   (antes ~20 %) y se monta 12 % de su ancho sobre la laptop, al frente — Samuel 19-oct «LAS PROPORCIONES» */
.crm-demo{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 24.6%; align-items:end; width:min(100% - 2 * var(--pad), (var(--alto) - 236px) * 1.72, 1180px); margin:0 auto; }
.mk-lap{ grid-area:1/1; filter:drop-shadow(0 30px 40px rgba(0,0,0,.16)); }
.mk-pant{ position:relative; border-radius:20px 20px 6px 6px; border:11px solid #1d1d1f; border-bottom-width:16px; background:#F2F2F7; overflow:hidden; }
/* la app a tamaño real (1280×800) — se escala completa con transform desde crm-mockup.js */
.mk-app{ position:absolute; left:0; top:0; transform-origin:0 0; display:flex; flex-direction:column; font-family:var(--app-font); font-size:15px; color:#111; background:#F2F2F7; letter-spacing:-.005em; }
.mk-app svg{ width:18px; height:18px; stroke-width:1.8; }
.ap-top{ display:flex; align-items:center; gap:16px; height:64px; padding:0 22px; background:#fff; border-bottom:1px solid rgba(0,0,0,.07); flex:none; }
.ap-atras{ font-size:26px; color:#8E8E93; line-height:1; }
.ap-proy{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.ap-proy > i{ width:36px; height:36px; border-radius:50%; background:#E8F0FC; color:var(--brand); display:grid; place-items:center; }
.ap-proy b{ display:block; font-weight:600; font-size:16px; } .ap-proy small{ color:#6E6E73; font-size:13px; }
.ap-mods{ display:flex; gap:2px; padding:4px; background:#F2F2F7; border-radius:12px; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#6E6E73; position:absolute; left:50%; translate:-50% 0; }
.ap-mods span{ padding:7px 14px; border-radius:9px; } .ap-mods .on{ background:#fff; color:var(--brand); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ap-yo{ width:34px; height:34px; border-radius:50%; background:#E8F0FC; color:var(--brand); display:grid; place-items:center; font-weight:600; font-size:14px; }
.ap-cuerpo{ flex:1; display:grid; grid-template-columns:220px 1fr; min-height:0; }
.ap-riel{ background:#F5F5F7; border-right:1px solid rgba(0,0,0,.07); padding:14px 10px; display:flex; flex-direction:column; gap:1px; }
.ap-riel small{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8E8E93; padding:12px 12px 5px; font-weight:600; }
.ap-riel span{ display:flex; align-items:center; gap:12px; height:34px; padding:0 12px; border-radius:10px; font-size:15px; color:#48484A; }
.ap-riel span svg{ color:#6E6E73; width:19px; height:19px; stroke-width:1.6; }
.ap-riel em{ margin-left:auto; min-width:20px; height:20px; border-radius:10px; background:#D70015; color:#fff; font-style:normal; font-size:11px; font-weight:600; display:grid; place-items:center; }
.ap-riel .on{ background:#E3EBF8; color:var(--brand); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.05); } .ap-riel .on svg{ color:var(--brand); }
.ap-main{ position:relative; padding:20px 32px 18px; overflow:hidden; display:flex; flex-direction:column; gap:12px; }
.ap-cab{ display:flex; align-items:center; gap:16px; }
.ap-cab h4{ font-size:26px; letter-spacing:-.02em; font-weight:600; line-height:1.1; }
.ap-cab p{ color:#6E6E73; font-size:13px; margin-top:2px; }
.ap-pub{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:var(--brand); color:#fff; font-weight:600; font-family:inherit; font-size:15px; white-space:nowrap; }
.ap-pub em{ font-style:normal; min-width:22px; height:22px; border-radius:11px; background:#fff; color:var(--brand); display:grid; place-items:center; font-size:12px; padding:0 6px; margin-right:-6px; }
.ap-pub .corto{ display:none; }
.ap-pub.va svg{ animation:gira 1s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.ap-listas{ display:flex; align-items:center; gap:2px; padding:3px; background:#fff; border-radius:999px; width:max-content; border:1px solid rgba(0,0,0,.07); font-size:14px; }
.ap-listas span{ padding:6px 14px; border-radius:999px; color:#333; } .ap-listas b{ font-weight:500; color:#8E8E93; margin-left:4px; }
.ap-listas .on{ background:var(--brand); color:#fff; } .ap-listas .on b{ color:rgba(255,255,255,.75); }
.ap-listas .nueva{ color:var(--brand); }
.ap-listas .tag{ display:grid; place-items:center; width:30px; color:#8E8E93; } .ap-listas .tag svg{ width:17px; height:17px; }
.ap-hoja{ flex:1; min-height:0; background:#FBFBFC; border:1px solid rgba(0,0,0,.06); border-radius:22px; padding:14px 20px; display:flex; flex-direction:column; gap:12px; }
.ap-totales{ display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; background:#F0F0F2; border-radius:18px; padding:5px; flex:none; }
.ap-totales > div{ padding:10px 18px; position:relative; }
.ap-totales > div + div::before{ content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:rgba(0,0,0,.08); }
.ap-totales .t1{ background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); } .ap-totales .t1 + div::before{ display:none; }
.ap-totales small{ display:flex; align-items:center; gap:8px; color:#6E6E73; font-size:14px; }
.ap-totales small i{ width:9px; height:9px; border-radius:50%; }
.ap-totales b{ display:block; font-size:27px; font-weight:600; letter-spacing:-.02em; margin:3px 0 2px; font-variant-numeric:tabular-nums; }
.ap-totales span{ color:#6E6E73; font-size:13px; } .ap-totales strong{ color:#111; font-weight:600; }
.ap-dos{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.05fr; gap:22px; }
.ap-izq{ display:flex; flex-direction:column; gap:12px; border-right:1px solid rgba(0,0,0,.07); padding-right:22px; min-height:0; }
.ap-izq-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ap-ley{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#6E6E73; }
.ap-ley span{ display:flex; align-items:center; gap:8px; } .ap-ley i{ width:9px; height:9px; border-radius:50%; } .ap-ley b{ color:#111; font-weight:600; }
.ap-seg{ display:flex; padding:3px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08); font-size:13px; font-weight:600; flex:none; }
.ap-seg span{ padding:6px 13px; border-radius:999px; color:#333; white-space:nowrap; } .ap-seg .on{ background:var(--brand); color:#fff; }
.ap-tabs span[data-t]{ cursor:pointer; }
#mkMapa{ display:flex; flex-direction:column; gap:6px; justify-content:flex-start; flex:1; padding-top:4px; }
.ap-piso{ display:grid; grid-template-columns:38px 1fr; align-items:center; gap:8px; }
.ap-piso small{ color:#8E8E93; font-weight:500; font-size:13px; }
.ap-piso > div{ display:flex; gap:6px; justify-content:flex-start; }
.ap-cuad{ position:relative; width:34px; height:34px; border-radius:8px; background:color-mix(in srgb, var(--p) 34%, #fff); transition:transform .2s var(--spring), background-color .6s var(--ease); }
.ap-cuad:hover{ transform:scale(1.15); background:color-mix(in srgb, var(--p) 70%, #fff); }
.ap-cuad.sel{ background:var(--p); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand); }
.ap-cuad.pulso{ animation:est .6s var(--spring); }
.ap-cuad.pulso::after{ content:''; position:absolute; inset:-3px; border-radius:10px; border:2px solid var(--p); animation:cuad-onda .8s var(--ease) forwards; pointer-events:none; }
@keyframes est{ 0%{ transform:scale(.7); } 55%{ transform:scale(1.22); } 100%{ transform:none; } }
@keyframes cuad-onda{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
/* cifras que cambian: giran como contador */
.tick{ display:inline-block; animation:tick .55s var(--spring); }
@keyframes tick{ 0%{ transform:translateY(-70%) scale(.7); opacity:0; } 100%{ transform:none; opacity:1; } }
/* el cursor del demo (coordenadas en px de la app; se escala con ella) */
.ap-cursor{ position:absolute; left:0; top:0; z-index:7; pointer-events:none; opacity:0; transition:transform .6s cubic-bezier(.65,0,.25,1), opacity .3s; will-change:transform; }
.ap-cursor.on{ opacity:1; }
.mk-app .ap-cursor svg{ position:absolute; left:-6px; top:-3px; width:30px; height:30px; fill:#1d1d1f; stroke:#fff; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)); transform-origin:6px 3px; }
.ap-cursor i{ position:absolute; left:-22px; top:-22px; width:44px; height:44px; border-radius:50%; background:rgba(0,113,227,.18); border:2px solid rgba(0,113,227,.55); opacity:0; }
.ap-cursor.clic i{ animation:clic .5s var(--ease); }
.ap-cursor.clic svg{ animation:presiona .24s var(--ease); }
@keyframes clic{ 0%{ transform:scale(.3); opacity:1; } 100%{ transform:scale(1.3); opacity:0; } }
@keyframes presiona{ 50%{ transform:scale(.82); } }
/* la señal CRM → teléfono (arco + chispa con el color del estatus nuevo) */
.mk-senal{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:4; }
.mk-senal path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 6px currentColor); }
.mk-chispa{ position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid currentColor; box-shadow:0 0 0 5px color-mix(in srgb, currentColor 25%, transparent),0 0 22px 6px currentColor; pointer-events:none; z-index:5; opacity:0; }
.ap-der{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.ap-tab{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.ap-tf{ display:grid; grid-template-columns:1.6fr repeat(3,.5fr) .6fr; align-items:center; padding:5px 12px; border-bottom:1px solid rgba(0,0,0,.06); font-size:15px; font-variant-numeric:tabular-nums; }
.ap-tf > span:not(:first-child){ text-align:center; font-weight:600; } .ap-tf .u{ text-align:right !important; }
.ap-tf b{ font-weight:600; } .ap-tf small{ color:#8E8E93; font-size:12px; margin-left:8px; }
.ap-tf.cab{ color:#6E6E73; font-size:13px; font-weight:500; } .ap-tf.cab > span{ font-weight:500 !important; }
.ap-tf.cab i{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.ap-tf.total{ background:#F0F0F2; border-radius:12px; border:0; margin-top:4px; padding:6px 12px; }
.ap-menu{ position:absolute; z-index:5; min-width:200px; padding:5px; border-radius:14px; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06); animation:menu .18s var(--ease); font-size:13px; }
@keyframes menu{ from{ opacity:0; transform:translateY(-4px) scale(.97); } }
.ap-menu button{ width:100%; display:flex; align-items:center; gap:9px; height:32px; padding:0 10px; border-radius:8px; font-family:inherit; font-size:13px; font-weight:500; text-align:left; }
.ap-menu button:hover{ background:rgba(118,118,128,.12); }
.ap-menu button.pica{ background:rgba(0,113,227,.12); }   /* el demo que corre solo «pica» la opción antes de cambiarla */
.ap-menu button i{ width:8px; height:8px; border-radius:50%; }
.ap-menu button svg{ margin-left:auto; color:var(--brand); width:15px; height:15px; }
.ap-barra{ position:absolute; left:calc(52% + 16px); right:32px; bottom:18px;   /* sobre la tabla, para no tapar el piso N8 que cambia */ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:#1d1d1f; color:#fff; font-weight:500; font-size:14px; transform:translateY(170%); transition:transform .45s var(--spring); }
.ap-barra.on{ transform:none; }
.ap-barra i{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.ap-barra i::after{ content:''; position:absolute; inset:0; background:var(--brand); transform-origin:left; transform:scaleX(0); }
.ap-barra.va i::after{ transform:scaleX(1); transition:transform .9s var(--ease); }
/* versión angosta (teléfono): sin riel, sin mapa, la lista a lo ancho */
.mk-app.angosto .ap-riel,.mk-app.angosto .ap-der,.mk-app.angosto .ap-seg:not(.ap-tabs),.mk-app.angosto .ap-mods span:not(.on),.mk-app.angosto .ap-listas span:not(.on){ display:none; }
.mk-app.angosto .ap-cuerpo{ grid-template-columns:1fr; }
.mk-app.angosto .ap-dos{ grid-template-columns:1fr; }
.mk-app.angosto .ap-mods{ position:static; translate:none; }
.mk-app.angosto .ap-pub .largo{ display:none; } .mk-app.angosto .ap-pub .corto{ display:inline; }
.mk-app.angosto .ap-main{ padding:22px; } .mk-app.angosto .ap-barra{ left:22px; right:22px; }
.mk-app.angosto .ap-totales{ grid-template-columns:1fr 1fr; } .mk-app.angosto .ap-totales > div::before{ display:none; } .mk-app.angosto .ap-izq{ border:0; padding:0; } .mk-app.angosto .ap-cuad{ width:32px; height:32px; } .mk-app.angosto .ap-piso > div{ justify-content:center; } .mk-app.angosto #mkMapa{ flex:none; } .mk-app.angosto .ap-hoja{ padding:16px; }
/* teléfono con el showroom real */
.mk-cel{ grid-area:1/2; position:relative; z-index:2; width:113.6%; margin-left:-13.6%; }   /* = 28 % del conjunto, 12 % montado */
.mk-cel > .mk-cel-pant{ aspect-ratio:430/860; }
.mk-cel{ border-radius:clamp(26px,4vw,44px); background:#1d1d1f; padding:clamp(6px,.8vw,10px); box-shadow:var(--sombra); }
.mk-cel-pant{ position:relative; border-radius:clamp(20px,3.2vw,35px); overflow:hidden; background:#111; container-type:inline-size; }
.mk-cel-pant > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk-pista{ position:absolute; left:50%; bottom:calc(100% + 10px); translate:-50% 0; font-size:.8rem; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.mk-pista::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--brand); animation:late 1.8s ease-out infinite; }
.mk-pines{ position:absolute; inset:0; }
.mk-pin{ position:absolute; translate:-50% -50%; width:9cqw; height:9cqw; display:grid; place-items:center; border-radius:50%; }
.mk-pin::before{ content:''; width:6.2cqw; height:6.2cqw; border-radius:50%; border:.5cqw solid #fff; box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.35); background:var(--c); transition:background-color .2s, transform .25s var(--spring); }
.mk-pin{ --c:#1ac366; } .mk-pin.apartado{ --c:#e7b93c; } .mk-pin.vendido{ --c:#de7777; } .mk-pin.escriturado,.mk-pin.entregado{ --c:#9a9aa0; }
.mk-pin:hover::before,.mk-pin.sel::before{ transform:scale(1.3); }
/* al publicarse un cambio: el punto salta con su color nuevo y suelta dos ondas */
.mk-pin.onda::before{ animation:pin-salta .7s var(--spring); }
.mk-pin.onda::after{ content:''; position:absolute; width:6.2cqw; height:6.2cqw; border-radius:50%; border:.5cqw solid var(--c); box-shadow:0 0 0 .5cqw color-mix(in srgb, var(--c) 35%, transparent); animation:onda 1.4s var(--ease) forwards; }
@keyframes onda{ from{ transform:scale(1); opacity:1; } to{ transform:scale(4.5); opacity:0; } }
.mk-toque{ position:absolute; width:11cqw; height:11cqw; margin:-5.5cqw 0 0 -5.5cqw; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 0 .6cqw rgba(255,255,255,.7); pointer-events:none; animation:toque .65s var(--ease) forwards; }
@keyframes toque{ 0%{ transform:scale(.4); opacity:0; } 30%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
.mf-est{ transition:background-color .4s, color .4s; }
.mf-est.cambia{ animation:chip .6s var(--spring); }
@keyframes chip{ 0%{ transform:scale(.75); } 50%{ transform:scale(1.15); } 100%{ transform:none; } }
.mk-ley b{ display:inline-block; }
@keyframes pin-salta{ 0%{ transform:scale(1); } 35%{ transform:scale(1.9); } 100%{ transform:scale(1); } }
.mk-ley{ position:absolute; left:10%; right:10%; top:7.3%; height:4.4%; border-radius:999px; background:#EDEDEF; display:flex; align-items:center; justify-content:center; gap:5%; font-size:2.6cqw; color:#555; white-space:nowrap; }
.mk-ley i{ display:inline-block; width:.6em; height:.6em; border-radius:50%; margin-right:.35em; } .mk-ley i.disponible{ background:#1ac366; } .mk-ley i.apartado{ background:#e7b93c; } .mk-ley i.vendido{ background:#de7777; }
.mk-ley b{ color:#111; margin-right:.25em; }
.crm-demo + .nota{ margin-top:clamp(36px,5vw,56px); }
.mk-aviso{ position:absolute; left:50%; top:16%; translate:-50% -10px; padding:.5em .9em; border-radius:999px; background:rgba(29,29,31,.88); color:#fff; font-size:3.4cqw; white-space:nowrap; opacity:0; z-index:3; }
.mk-aviso.on{ animation:aviso 2.6s var(--ease) forwards; }
@keyframes aviso{ 0%{ opacity:0; translate:-50% -10px; } 12%,80%{ opacity:1; translate:-50% 0; } 100%{ opacity:0; translate:-50% 0; } }
/* la ficha (misma composición que la del showroom real) */
.mk-ficha{ position:absolute; left:3%; right:3%; top:63%; bottom:3%; z-index:2; background:rgba(246,246,248,.97); border-radius:6cqw; padding:4cqw 4.5cqw; font-size:3.4cqw; color:#111; display:flex; flex-direction:column; justify-content:center; gap:2.2cqw; box-shadow:0 -6px 24px rgba(0,0,0,.22); }
.mk-ficha.entra{ animation:ficha .45s var(--spring); }
@keyframes ficha{ from{ transform:translateY(30%); opacity:0; } }
.mf-cab{ display:flex; align-items:center; gap:2cqw; }
.mf-x{ margin-left:auto; width:6.4cqw; height:6.4cqw; border-radius:50%; background:#E5E5EA; display:grid; place-items:center; }
.mf-x svg{ width:3.2cqw; height:3.2cqw; }
.mf-tit{ font-size:1.55em; letter-spacing:-.02em; }
.mf-est{ display:inline-flex; align-items:center; gap:.4em; padding:.25em .7em; border-radius:999px; font-weight:600; font-size:.85em; }
.mf-est::before{ content:''; width:.55em; height:.55em; border-radius:50%; background:currentColor; }
.mf-est.disponible{ background:rgba(26,195,102,.14); color:#0b6b35; } .mf-est.apartado{ background:rgba(231,185,60,.2); color:#7a5600; } .mf-est.vendido{ background:rgba(222,119,119,.18); color:#8f2424; } .mf-est.escriturado,.mf-est.entregado{ background:#E5E5EA; color:#6E6E73; }
.mf-datos{ color:#48484A; } .mf-datos b{ color:#111; }
.mf-bs{ display:grid; grid-template-columns:1.3fr 1fr; gap:2cqw; }
.mf-b{ display:flex; align-items:center; justify-content:center; gap:.4em; padding:.65em; border-radius:999px; font-weight:600; }
.mf-b svg{ width:1.2em; height:1.2em; }
.mf-b.az{ background:var(--brand); color:#fff; } .mf-b.cl{ background:#DCE8F8; color:var(--brand); } .mf-b.gr{ background:#E5E5EA; }

/* ── WHATSAPP + IA ── */
.mas{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); width:var(--ancho); margin:0 auto; }
.tarjeta{ background:var(--mist); border-radius:28px; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:8px; overflow:hidden; height:min(560px, var(--alto) - 2 * 48px); }
.tarjeta h3{ font-size:clamp(1.4rem,1rem + 1.2vw,2rem); line-height:1.06; letter-spacing:-.035em; font-weight:700; text-wrap:balance; margin-bottom:18px; }
.cel{ width:100%; justify-self:center; border-radius:46px; background:#1d1d1f; padding:10px; box-shadow:var(--sombra); }
.cel-pant{ height:100%; border-radius:37px; background:#EFE7DE; overflow:hidden; display:flex; flex-direction:column; }
.cel-top{ display:flex; align-items:center; gap:10px; padding:44px 16px 12px; background:#F6F6F6; border-bottom:1px solid var(--hair); font-size:.9rem; }
.cel-top i{ width:30px; height:30px; border-radius:50%; background:var(--brand); }
.cel-chat{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:14px 12px; }
.tarjeta .cel{ margin:auto auto 0; max-width:230px; aspect-ratio:9/13; border-radius:40px 40px 0 0; padding:9px 9px 0; margin-bottom:calc(-1 * clamp(28px,3.6vw,48px)); }
.tarjeta .cel-pant{ border-radius:32px 32px 0 0; }
.tarjeta .cel-top{ padding-top:22px; }
.burb{ max-width:86%; background:#fff; border-radius:16px; padding:9px 12px; font-size:.84rem; line-height:1.35; opacity:0; transform:translateY(14px) scale(.96); transition:opacity .5s var(--ease), transform .6s var(--spring); }
.burb.mio{ align-self:flex-end; background:#D9FDD3; }
.burb.on{ opacity:1; transform:none; }
.burb img{ width:100%; border-radius:10px; margin-bottom:6px; aspect-ratio:16/9; object-fit:cover; }
.burb small{ display:block; text-align:right; color:var(--muted); font-size:.7rem; margin-top:2px; }
.chat{ background:#F5F5F7; border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; margin-top:auto; min-height:0; flex:1; overflow:hidden; }
.chat .burb{ max-width:88%; font-size:.9rem; padding:10px 14px; border-radius:20px; background:#F2F2F7; }
.chat .burb.mio{ background:var(--brand); color:#fff; }
.chat .burb b{ font-weight:600; }
.chat .hecho{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ok-ink); background:var(--ok-soft); border-radius:999px; padding:6px 12px; opacity:0; transition:opacity .5s; }
.chat .hecho.on{ opacity:1; }
.escribe{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; border-radius:20px; background:#F2F2F7; }
.escribe i{ width:7px; height:7px; border-radius:50%; background:#A1A1A6; animation:tp 1s infinite; }
.escribe i:nth-child(2){ animation-delay:.15s; } .escribe i:nth-child(3){ animation-delay:.3s; }
@keyframes tp{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.tarjeta-pie{ color:var(--muted); font-size:.92rem; margin-top:14px; }

/* ── CIERRE (oscuro: el punto final) ── */
.cierre{ background:#000; color:#F5F5F7; text-align:center; padding:var(--sec) var(--pad); }
.cierre .titular{ font-size:var(--fs-hero); letter-spacing:-.05em; line-height:.98; }
.cierre .sec-sub{ color:#A1A1A6; }
.cierre .hero-btns{ margin-top:32px; }
.cierre .link-azul{ color:#2997FF; }
.pie{ display:flex; justify-content:space-between; padding:22px var(--pad); background:#000; color:#86868B; font-size:.82rem; border-top:1px solid rgba(255,255,255,.1); }

/* revelado de bloques */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s); }
.rv.in{ opacity:1; transform:none; }

/* ── teléfono / tableta ── */
@media (max-width:900px){
  .hero{ min-height:auto; }
  .vuelo-caja{ width:calc(100% - 2 * var(--pad)); aspect-ratio:auto; height:min(72svh,640px); }
  .cw-burb{ top:34%; }
  .capa-ficha img{ object-position:50% 100%; transform:none; }
  .vuelo-caja.txt-arriba .vuelo-txt{ bottom:auto; top:20px; }
  .vuelo-caja.txt-arriba::after{ inset:0 0 auto 0; background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0)); }
  .prueba-grid{ grid-template-columns:1fr; }
  .guia{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; padding-bottom:6px; scrollbar-width:none; }
  .guia li{ flex:0 0 78%; scroll-snap-align:start; background:var(--mist); }
  .guia li span{ max-height:3em; opacity:1; }
  /* el showroom embebido se arma como TELÉFONO (1:2): en 3:4 su barra de niveles se estiraba en
     pastillas verticales y tapaba la planta (bug que Samuel vio en su iPhone, 15-oct) */
  .laptop-pant{ aspect-ratio:430/860; width:min(100%, (100svh - 150px) * .5); margin:0 auto; border-width:8px; border-radius:40px; }
  /* el showroom se arma a tamaño REAL de teléfono (390×780) y se escala al marco: con menos de 520 px de alto
     aplicaba su regla de teléfono acostado y la barra de niveles se estiraba de arriba a abajo (medido en WebKit). */
  .laptop-pant iframe{ inset:auto; left:0; top:0; width:390px; height:780px; transform-origin:0 0; transform:scale(var(--k,1)); }
  .laptop-base{ display:none; }
  .crm-demo{ grid-template-columns:minmax(0,1fr); width:calc(100% - 2 * var(--pad)); }
  .mk-pant{ border-width:7px; border-bottom-width:9px; border-radius:22px; }
  .mk-base{ display:none; }
  .mk-cel{ grid-area:2/1; margin:48px auto 0; width:min(78vw,320px); }
  .mas{ grid-template-columns:1fr; }
  .tarjeta{ height:auto; min-height:0; }
  .chat{ min-height:280px; flex:none; }
  .rc-vista{ aspect-ratio:4/5; }
  .rc-tipos,.rc-cuartos{ justify-content:flex-start; }
}
@media (max-width:480px){ .vuelo-txt p{ font-size:1.7rem; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .sube,.rv{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}
.sec-pegada{ padding-top:0; }

/* PRODUCTOS EN EL MENÚ (Samuel 2026-10-15: «ahí arriba me debería salir App · BIM · Showrooms»).
   El mismo bloque en /inicio/, /bim/ y /showrooms/: centrado en la barra; en teléfono, segunda fila. */
.prodnav{ position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1; display:flex; gap:30px; }
.prodnav a{ position:relative; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:400; letter-spacing:-.01em; padding:6px 0; color:rgba(29,29,31,.56); transition:color .25s; }
.prodnav a:hover{ color:#1D1D1F; }
.prodnav a.on{ color:#1D1D1F; font-weight:500; }
.prodnav a.on::after{ content:''; position:absolute; left:50%; bottom:-3px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#0071E3; }
@media (max-width:899px){
  .nav{ flex-wrap:wrap; }
  .prodnav{ position:static; translate:none; order:3; flex-basis:100%; justify-content:center; gap:34px; margin-top:12px; }
}
@media (max-width:899px){ .hero{ padding-top:170px; } }

/* ── MAPA · todo lo que hace, cada función con su video (19-oct) ── */
.mapa .mp-red{ width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.mp-grupo{ background:var(--mist); border-radius:28px; padding:22px; box-shadow:var(--sombra); position:relative; overflow:hidden; }
.mp-grupo::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); }
.mp-grupo h3{ position:relative; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--c); margin:2px 4px 14px; }
.mp-grupo h3::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.mp-rej{ position:relative; display:flex; flex-direction:column; gap:8px; }
.mp{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:12px 14px; border:0; border-radius:16px; cursor:pointer;
  background:#F5F5F7; font-family:inherit; color:var(--ink); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.mp:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 14px 28px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.mp:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.mp-ic{ width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 13%, white); }
.mp-ic svg{ width:20px; height:20px; }
.mp-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mp-tx b{ font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.mp-tx small{ font-size:13px; color:var(--muted); }
.mp-play{ width:30px; height:30px; border-radius:50%; flex:none; background:var(--c) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='white'/%3E%3C/svg%3E");
  box-shadow:0 6px 14px -6px var(--c); transition:transform .18s ease; }
.mp:hover .mp-play{ transform:scale(1.08); }
@media (max-width:820px){ .mapa .mp-red{ grid-template-columns:1fr; } .mp-grupo{ padding:16px; border-radius:22px; } }
@media (prefers-reduced-motion:reduce){ .mp, .mp-play{ transition:none; } }
/* 19-oct (Samuel: «debe estar bien centrado»): sin el vuelo debajo, la portada ocupa la pantalla
   y el bloque queda al centro óptico (el nav arriba resta ~80 px). */
@media (min-width:900px){ .hero{ min-height:100svh; padding:96px var(--pad) 56px; } }

/* ── CÓMO FUNCIONA · diagrama de flujo + videos en una PC (19-oct) ── */
.demo-caja{ width:var(--ancho); max-width:1240px; margin:0 auto; }
.fases{ display:grid; grid-template-columns:5fr 3fr; gap:16px; margin:0 0 10px; }
.fases span{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--c); }
.fases span::after{ content:''; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), transparent); }
.fl2{ list-style:none; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:16px; margin:0 0 28px; }
.fn{ position:relative; }
/* flecha entre nodos */
.fn:not(:last-child)::after{ content:''; position:absolute; top:34px; right:-14px; width:12px; height:2px; background:var(--hair); z-index:1; }
.fn:not(:last-child)::before{ content:''; position:absolute; top:30px; right:-15px; border-left:6px solid rgba(0,0,0,.18); border-top:5px solid transparent; border-bottom:5px solid transparent; z-index:1; }
.fn.hecho:not(:last-child)::after{ background:var(--c); } .fn.hecho:not(:last-child)::before{ border-left-color:var(--c); }
.fn button{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:14px 6px 16px; border:0; border-radius:18px; background:var(--mist); box-shadow:0 0 0 1px var(--hair); font-family:inherit; color:var(--ink); cursor:pointer; overflow:hidden; transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.fn button:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--c) 80%, transparent); }
.fn button:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.fn-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 12%, white); margin-bottom:6px; transition:background .25s, color .25s; }
.fn-ic svg{ width:20px; height:20px; }
.fn b{ font-size:13.5px; line-height:1.2; letter-spacing:-.01em; }

.fn u{ position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; text-decoration:none; }
.fn u::after{ content:''; position:absolute; inset:0; background:var(--c); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
.fn.ahora button{ box-shadow:0 0 0 2px var(--c), 0 18px 34px -18px color-mix(in srgb, var(--c) 90%, transparent); }
.fn.ahora .fn-ic, .fn.hecho .fn-ic{ background:var(--c); color:#fff; }
@keyframes fnCarga{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.fn.cargando u::after, .fn.ahora:not([style*="--p: 0."]) u{ }
.fn.ahora u{ background:color-mix(in srgb, var(--c) 18%, transparent); }
.demo-lap{ max-width:min(1040px, (100svh - 250px) * 1.6); margin:0 auto; }
.demo-pant{ position:relative; aspect-ratio:16/10; border-radius:20px 20px 6px 6px; background:#0d0d0d; border:11px solid #1d1d1f; border-bottom-width:16px; overflow:hidden; }
.demo-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.demo-app{ background:#F5F5F7; z-index:4; }
.demo-pie{ position:absolute; left:50%; top:14px; translate:-50% 0; z-index:8; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-weight:600; font-size:.88rem; white-space:nowrap; box-shadow:0 10px 24px -12px rgba(0,0,0,.35); pointer-events:none; }
.demo-app.on ~ .demo-pie{ display:none; }
@media (max-width:1100px){
  .fases{ display:none; }
  .fl2{ display:flex; overflow-x:auto; scrollbar-width:none; gap:14px; padding:4px 2px 8px; scroll-snap-type:x proximity; }
  .fl2::-webkit-scrollbar{ display:none; }
  .fn{ flex:0 0 132px; scroll-snap-align:center; }
}
@media (max-width:899px){
  .demo-pant{ border-width:7px; border-bottom-width:10px; border-radius:14px 14px 4px 4px; }
  .demo-base{ display:block !important; height:10px; }
  .demo-pie{ font-size:.78rem; top:8px; }
}
.demo-vid{ background:#000; z-index:3; }
.demo-vid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* la pantalla mide exactamente 16:10, igual que la grabación (1440×900): nada se recorta (19-oct) */
.demo-pant{ box-sizing:content-box; width:calc(100% - 22px); }
.demo-vid video{ object-fit:contain; }
@media (max-width:899px){ .demo-pant{ width:calc(100% - 14px); } }

/* ── PRUÉBALO EN VIVO · proporción y estética (19-oct) ── */
@media (min-width:900px){ .prueba-grid{ grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(24px,3.5vw,56px); } }
@media (min-width:900px){ .guia{ background:var(--mist); border-radius:24px; padding:10px; box-shadow:var(--sombra); gap:2px; } }
.guia li{ padding:12px 14px; }
.guia li i{ width:30px; height:30px; }
.guia li.ahora{ background:var(--brand-soft); }
.guia li.ahora i{ background:var(--brand); border-color:var(--brand); color:#fff; }
.guia li b{ font-size:1rem; }
.guia li.ahora span{ max-height:3.2em; opacity:1; margin-top:2px; }
/* 19-oct (Samuel: «esto deberían de ser botones, si le pico al siguiente ahí va»): cada paso es un botón que lleva al showroom a ese punto */
.guia li{ display:block; padding:0; }
.guia li > button{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:30px 1fr; gap:14px; width:100%; min-height:44px; padding:12px 14px; border-radius:16px; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
.guia li > button:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
@media (hover:hover){ .guia li:not(.ahora) > button:hover{ background:rgba(0,0,0,.04); } .guia li:not(.ahora) > button:hover b{ color:var(--ink); } }
.equipo{ position:relative; }
.equipo .laptop{ max-width:min(100%, (100svh - 220px) * 1.6); margin:0 auto; }
.equipo-ctl{ justify-content:center; gap:10px; margin-top:22px; }
.estado{ margin-right:6px; padding:8px 12px; border-radius:999px; background:var(--mist); box-shadow:0 0 0 1px var(--hair); font-weight:600; }
.btn-sec{ font:inherit; font-size:.9rem; font-weight:600; min-height:40px; padding:0 16px; border-radius:999px; border:0; cursor:pointer; background:var(--brand-soft); color:var(--brand); transition:background .2s; }
.btn-sec:hover{ background:#DCE8FB; }
.btn-sec-gris{ background:rgba(118,118,128,.12); color:var(--ink); } .btn-sec-gris:hover{ background:rgba(118,118,128,.2); }
.btn-sec:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (max-width:899px){ .equipo-ctl{ justify-content:flex-start; } }
@media (min-width:900px){
  .prueba-grid{ width:min(100% - 2 * var(--pad), 300px + clamp(24px,3.5vw,56px) + (100svh - 220px) * 1.6, 1240px); }
  .equipo .laptop{ margin:0; max-width:none; }
}
/* la pantalla tiene la proporción de la grabación (1440×780): la planta llena la pantalla sin franja (19-oct) */
.demo-pant{ aspect-ratio:1440/780; }
.demo, .prueba{ overflow-x:clip; }

/* 19-oct (Samuel: «pon el efecto de la malla acá igual»): la misma malla viva de la portada de la App
   (lab/armado.js vía armado-fondo.js), con su velo de papel para que el titular mande. */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero > .armado{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 48% at 50% 46%, var(--paper, #F5F5F7) 0%, rgba(245,245,247,.86) 42%, rgba(245,245,247,0) 78%); }
.hero > :not(.armado){ position:relative; z-index:2; }

/* ── CHECADA FINAL 20-oct · dedos en el teléfono ──
   Objetivos de toque ≥ 44 px sin mover el diseño: se agranda el área (padding + margen negativo), no el dibujo.
   El pie deja libre la esquina de la burbuja del asistente (flotante, 56 px) para que no tape «Términos». */
@media (max-width:820px){
  .nav .logo{ display:inline-block; padding:14px 0; margin:-14px 0; }
  .prodnav a{ padding:12px 6px; margin:-6px -6px; }
  .cta2{ display:inline-flex; align-items:center; min-height:44px; }
  .btn-sec{ min-height:44px; }
  body .cq-legal-linea a{ display:inline-block; padding:12px 4px; margin:-12px -4px; }
  body .cq-pie-landing{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Aviso sobre la pantalla del showroom guiado (sala.js): lo que falta tocar cuando el visor publicado no
   puede abrir la ficha solo. Abajo y al centro, sin tapar los puntos de la planta. */
.sala-aviso{ position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:3; margin:0; max-width:calc(100% - 28px);
  padding:10px 16px; border-radius:999px; background:rgba(29,29,31,.88); color:#fff; font-size:14px; line-height:1.35;
  text-align:center; pointer-events:none; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.sala-aviso[hidden]{ display:none; }
/* Instrucción según el puntero principal: «con el mouse» en pantalla táctil no aplica. */
.solo-dedo{ display:none; }
@media (pointer:coarse){ .solo-mouse{ display:none; } .solo-dedo{ display:inline; } }

/* PORTADA EN TELÉFONO (Samuel 20-oct: «en mi cel se ven mal proporcionadas las portadas»). El titular a
   40 px tocaba las dos orillas a 390, el botón iba estirado a todo lo ancho y la portada medía lo que su
   contenido, con el bloque pegado al nav. Ahora ocupa la pantalla visible (svh: con la barra del
   navegador puesta), el relleno de arriba es el del nav y el bloque queda al centro óptico; titular con
   aire a los lados; botón con su ancho natural (cotiza-rapida.css). Escritorio no cambia: ≤600 px. */
@media (max-width:600px){
  .hero{ min-height:100svh; padding:clamp(140px,19svh,160px) var(--pad) clamp(48px,8svh,80px); }
  .hero-tit{ font-size:clamp(2.05rem,9.2vw,2.5rem); }
  .hero-sub{ margin-top:20px; max-width:34ch; }
  .hero-btns{ margin-top:30px; }
}

/* ── TU CRM, versión corta (22-oct): tres puntos y la puerta a /soluciones/crm/ ── */
.crm-corto .cc-puntos{ width:var(--ancho); max-width:980px; margin:0 auto; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.crm-corto .cc-puntos li{ padding:20px; border-radius:20px; background:var(--mist); box-shadow:0 0 0 1px var(--hair); }
.crm-corto .cc-puntos b{ display:block; font-size:1.06rem; font-weight:600; letter-spacing:-.018em; }
.crm-corto .cc-puntos span{ display:block; margin-top:6px; font-size:.9rem; line-height:1.45; color:var(--muted); }
.crm-corto .cc-pie{ text-align:center; margin-top:clamp(18px,2.2vw,26px); }
.crm-corto .nota{ text-align:center; margin-top:6px; color:var(--muted); font-size:.875rem; }
@media (max-width:760px){ .crm-corto .cc-puntos{ grid-template-columns:1fr; } }

/* ── CÓMO FUNCIONA DENTRO DE LA GUÍA (22-oct): pasos del equipo + su video sobre la misma pantalla ── */
.guia .guia-fase{ display:block; counter-increment:none; padding:14px 16px 4px; font-size:.78rem; font-weight:700; letter-spacing:.01em; color:#1FA855; }
.guia li[data-video] i{ border-color:rgba(31,168,85,.35); }
.guia li[data-video].ahora i{ background:#1FA855; border-color:#1FA855; color:#fff; }
.guia.con-video li[data-paso].ahora{ background:transparent; }
.guia.con-video li[data-paso].ahora span{ max-height:0; opacity:0; }
.sala-video{ position:absolute; inset:0; z-index:4; background:#F5F5F7; }
.sala-video[hidden]{ display:none; }
@media (max-width:899px){ .guia .guia-fase{ flex:none; align-self:center; padding:0 6px; white-space:nowrap; } }
.guia.con-video li[data-paso].ahora i{ background:transparent; border-color:var(--hair); color:var(--muted); box-shadow:none; }
.guia.con-video li[data-paso].ahora b{ color:var(--muted); }

/* PROPORCIÓN (Samuel 22-oct, captura: «todo esto está mal de proporciones»): con 9 pasos la guía quedaba más
   alta que la laptop. Renglones compactos (sólo el paso activo abre su explicación) y guía angosta, para que
   la lista mida lo mismo que la pantalla y quede centrada con ella. */
@media (min-width:900px){
  .prueba-grid{ grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:clamp(20px,2.6vw,40px); align-items:center;
    width:min(100% - 2 * var(--pad), 250px + 40px + (100svh - 230px) * 1.6, 1240px); }
  .guia{ padding:6px; border-radius:20px; gap:0; }
  .guia li > button{ grid-template-columns:24px 1fr; gap:10px; min-height:40px; padding:8px 10px; border-radius:12px; align-items:center; }
  .guia li i{ width:24px; height:24px; font-size:.72rem; }
  .guia li b{ font-size:.92rem; }
  .guia li span{ font-size:.8rem; }
  .guia .guia-fase{ padding:10px 10px 2px; font-size:.7rem; }
}
/* la base de la laptop sobresale 6 % a cada lado: el hueco con la guía la cuenta (Samuel 22-oct: «se encima con la compu») */
@media (min-width:900px){
  .prueba-grid{ gap:clamp(48px,5vw,80px); }
  .equipo .laptop{ padding:0 4%; }
  .equipo .laptop-base{ margin:0 -4%; }
}
/* las ventanitas animadas del CRM, 3 de las 8 (Samuel 22-oct: «aquí pon los mockups de videítos que teníamos») */
.crm-corto .bd[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:980px; margin-top:0; }
@media (max-width:1023px){ .crm-corto .bd[data-n="3"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }