/* zona — sistema de la web (v2, copy deck). Nota sobre BLOQUE 1/2 del
   prompt: esto es un artefacto de un solo archivo (mockup), no seis
   páginas con URL propia — no hay sitemap.xml/robots.txt/hreflang reales
   posibles aquí, y la tipografía se queda en la pila del sistema (no se
   puede autoalojar un fichero de fuente ni cargarlo de Google Fonts sin
   romper la CSP del artefacto). Todo lo demás del prompt SÍ se aplica:
   cero emojis, cero manchas de fondo, cero grano, cero texto en
   degradado, cero parallax, escudo de marca, menú de teléfono real. */

:root{
  --bg:#06060b; --bg2:#0a0a12; --card:#101019; --card2:#15151f;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --t1:#f6f6fa; --t2:#a2a2b6;
  /* --t3 está calculado al límite: 4.53:1 contra --card2 (#15151f), el
     fondo más exigente de los cuatro. El mínimo exigido es 4.5:1 — solo
     hay tres centésimas de margen. No oscurecer este valor ni aclarar
     --card/--card2 sin volver a calcular el contraste real. */
  --t3:#7d7d97;
  --red:#ff2d55; --green:#30d158; --blue:#0a84ff; --amber:#ff9f0a; --purple:#bf5af2;
  --accent:var(--red);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:min(1180px,100% - 2.75rem);
  /* Escala de espaciado vertical. Una sola escala para toda la web: antes
     unas secciones respiraban 8rem y otras 1rem (los paddings mínimos venían
     de cuando el héroe se comprimía para caber en una pantalla), y el
     resultado era un ritmo desigual al bajar por la página. */
  --pad:clamp(4.5rem,9vw,8rem);      /* sección normal */
  --pad-mid:clamp(3.2rem,6vw,5rem);  /* sección compacta */
  --pad-sm:clamp(2rem,4vw,3rem);     /* franja estrecha */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--ui);
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:clip;letter-spacing:-.012em}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.038em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.4rem,6.6vw,4.5rem);letter-spacing:-.045em;font-weight:900;line-height:1}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.4rem);letter-spacing:-.03em;line-height:1.2}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent);color:#fff}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:1rem;top:1rem;background:var(--t1);color:#000;padding:.7rem 1.1rem;border-radius:10px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em}
svg{display:block}

/* ── nav ──────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.solid{background:rgba(6,6,11,.86);backdrop-filter:saturate(180%) blur(22px);border-bottom-color:var(--line)}
.nav .in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:1.6rem;min-height:62px;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.brand-mark{width:26px;height:26px;flex:none}
/* El logotipo va en minúscula, como el nombre real de la app (app.json →
   "zona"). Con la Z en mayúscula las letras nunca iban a verse del mismo
   tamaño: una mayúscula mide por la altura de caja y "ona" por la altura de
   x, así que la Z sobresalía por arriba por mucho que el font-size fuera
   idéntico. En minúscula las cuatro letras comparten altura y la palabra se
   lee como una sola pieza. La z solo cambia de color, nunca de tamaño. */
/* El logotipo del pie vive dentro de .foot-col, así que este <span> cazaba
   la regla de los ENLACES del pie (.foot-col span → display:block, .9rem,
   color apagado y margen inferior): "zona" salía más pequeño que el escudo
   y descentrado. Aquí se blinda para que solo herede del logotipo. */
.wordmark{font:inherit;letter-spacing:inherit}
.foot-brand .wordmark{display:inline;font-size:inherit;color:inherit;margin:0}
.brand b,.foot-brand b{color:var(--red);font:inherit;font-size:inherit;
  font-weight:inherit;letter-spacing:inherit}
.nav .links{display:flex;align-items:center;gap:1.5rem;margin-left:1rem;font-size:.92rem;font-weight:600;color:var(--t1)}
.nav .links a{padding:.3rem 0;border-bottom:1.5px solid transparent}
.nav .links a:hover{color:var(--t1);border-bottom-color:var(--line2)}
.nav .links a[aria-current]{color:var(--t1);border-bottom-color:var(--accent)}
.lang{display:flex;gap:.15rem;font-size:.75rem;font-weight:700;margin-left:auto}
.lang a{color:var(--t3);padding:.28rem .45rem;border-radius:6px}
.lang a:hover{color:var(--t1)}
.lang a.on{color:var(--t1);background:rgba(255,255,255,.09)}
.navcta{background:var(--t1);color:#06060b;font-weight:700;font-size:.86rem;
  padding:.55rem 1.1rem;border-radius:999px;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.navcta:hover{background:#fff;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.navburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  background:none;border:0;color:var(--t1);margin-left:.4rem}
@media(max-width:820px){
  .nav .links{display:none}
  .navburger{display:inline-flex}
}
/* BUG REAL encontrado en QA (prompt correctivo): a 375px el botón del
   menú quedaba empujado fuera de la pantalla por el CTA "Descargar
   gratis" — el menú era inalcanzable en un teléfono real. El CTA ya vive
   dentro del propio menú, así que se oculta en la barra en cuanto el
   menú de teléfono aparece. */
@media(max-width:480px){
  .nav .navcta{display:none}
}

/* ── menú de teléfono ─────────────────────────────────────────── */
.mmenu{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;
  padding:1.2rem 1.4rem 2rem;transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s}
.mmenu.open{opacity:1;transform:none;pointer-events:auto}
.mmenu-top{display:flex;align-items:center;justify-content:space-between}
.mmenu-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--t1)}
.mmenu nav{display:flex;flex-direction:column;gap:.2rem;margin-top:2.2rem}
.mmenu nav a{font-size:1.5rem;font-weight:800;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--t1)}
.mmenu .stores{margin-top:2rem}
@media(min-width:821px){.mmenu{display:none}}

/* ── botones ──────────────────────────────────────────────────── */
.stores{display:flex;gap:.7rem;flex-wrap:wrap}
/* gap:.2rem — sin él, "Descárgala gratis en" y "App Store" (o "Empezar" y
   "7 días gratis") quedan pegadas letra contra letra: line-height:1.2 mide
   la altura de caja de cada línea por su propio font-size, no dice nada de
   cuánto aire hay ENTRE dos líneas de tamaños distintos, así que sin gap el
   hueco real puede ser cero. */
.store{display:flex;flex-direction:column;gap:.2rem;background:#fff;color:#06060b;
  padding:.7rem 1.5rem .75rem;border-radius:16px;min-width:180px;line-height:1.2;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.store small{font-size:.68rem;opacity:.6;font-weight:600}
.store b{font-size:1.1rem;font-weight:900;letter-spacing:-.03em}
.store:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.store:active{transform:translateY(-1px);transition-duration:.12s}
.store.ghost{background:transparent;color:var(--t1);border:1px solid var(--line2);box-shadow:none}
.store.ghost:hover{border-color:var(--t1);box-shadow:0 14px 28px -14px rgba(0,0,0,.5)}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;
  color:var(--accent);font-size:1rem;margin-top:1.7rem}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ── mockup de teléfono (uno como máximo por página) ─────────────── */
.device{--w:320px;position:relative;width:min(100%,var(--w));aspect-ratio:1179/2556;
  border-radius:calc(var(--w)*.145);padding:calc(var(--w)*.026);
  background:linear-gradient(145deg,#5a5a68 0%,#24242e 18%,#191922 50%,#2c2c38 82%,#616170 100%);
  box-shadow:0 calc(var(--w)*.13) calc(var(--w)*.22) calc(var(--w)*-.09) rgba(0,0,0,.95),
             0 0 0 1px rgba(255,255,255,.07);
  margin-inline:auto}
.device::before,.device::after{content:'';position:absolute;width:calc(var(--w)*.0095);
  border-radius:3px;background:linear-gradient(90deg,#666674,#2a2a34)}
.device::before{left:calc(var(--w)*-.0055);top:19%;height:calc(var(--w)*.05);
  box-shadow:0 calc(var(--w)*.115) 0 #4d4d5a, 0 calc(var(--w)*.205) 0 #4d4d5a}
.device::after{right:calc(var(--w)*-.0055);top:27%;height:calc(var(--w)*.15)}
.device__screen{position:relative;width:100%;height:100%;overflow:hidden;background:#000;
  border-radius:calc(var(--w)*.121)}
.device__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* Sin isla dinámica sintética: las capturas del simulador ya traen la suya
   real. Dibujar una encima duplicaba el bloque negro (visible sobre todo
   cuando la real quedaba ligeramente descentrada). */
.device__glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 22%,transparent 46%)}
.device--sm{--w:250px}
.device--lg{--w:340px}
.device--hero{--w:240px}
/* migradas de zona.v1.css (unificación site.css, docs/zona-prompt-unificar-web.md) */
.device-glow{position:absolute;inset:8% -8% 4%;z-index:-1;border-radius:50%;filter:blur(64px);opacity:.5;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
/* segunda capa de ambiente, más ancha y más tenue, detrás de la primera —
   da profundidad sin caer en la mancha plana de un solo radial */
.device-glow::after{content:'';position:absolute;inset:-40% -60%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%);
  filter:blur(90px);opacity:.35}
.facts{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.4rem}
.fact b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.fact span{display:block;color:var(--t3);font-size:.85rem;margin-top:.35rem;max-width:13rem}
.grain{position:fixed;inset:0;z-index:1;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.logo{font-size:1.3rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.logo b{color:var(--red)}
.parallax{will-change:transform}
@media(min-width:900px){.device--hero{--w:260px}}
@media(max-width:640px){.device--hero{--w:140px}}

/* La cabecera de cada página (portada, Tu círculo, El mapa, Zona+) ocupa la
   pantalla entera al cargar, para que no se vea un corte a mitad de la
   siguiente sección — mismo criterio en escritorio y en móvil. 100svh en vez
   de 100vh porque en Safari/Chrome móvil 100vh incluye la zona que tapan
   las barras del navegador; con svh la altura real es la que de verdad se
   ve. min-height y no height: si el contenido necesita más sitio (textos
   largos, notch, etc.) puede crecer en vez de recortarse. */
/* flex-start y no center: centrar verticalmente empujaba el titular y el
   párrafo de debajo hacia el medio/final de la pantalla en las páginas con
   el móvil grande (Tu círculo, El mapa) — el usuario lo vio literalmente
   cortado, había que hacer scroll para leer la frase de debajo del titular.
   Con flex-start el texto arranca siempre justo debajo del nav, se vea
   entero sin tocar nada, y el min-height sigue evitando el corte con la
   siguiente sección. */
/* justify-content:flex-start dejaba toda página principal con un hueco
   vacío al fondo en pantallas altas (el contenido no llega a llenar el
   100vh y se queda pegado arriba). "safe center" centra el contenido
   para llenar la pantalla, pero si en una pantalla baja no cupiera
   entero, se comporta como flex-start (empieza arriba, nunca corta el
   principio) — el bug antiguo que este min-height evitaba sigue evitado. */
.page-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:safe center}
/* El padding de una sección normal usa vw (--pad, más abajo) porque está
   pensado para el ritmo horizontal de toda la web. Dentro de un page-hero
   eso es un bug: en un portátil normal (1440×900) el 12vw de antes daba
   152px de hueco arriba SOLO por ser una pantalla ancha, sin importar que
   fuera baja — con eso más el mockup de móvil grande, la cabecera de Tu
   círculo/El mapa medía más de 1000px de alto en una pantalla de 900px y
   había que hacer scroll para ver el subtítulo. Aquí el padding usa vh: se
   adapta a lo alto que es la pantalla, que es lo que importa cuando la
   sección tiene que caber entera. */
.page-hero{padding-top:clamp(4.5rem,8vh,7rem)!important;padding-bottom:clamp(1.5rem,4vh,3rem)!important}
/* El mockup de móvil (device--lg, la maqueta grande de Tu círculo/El mapa)
   mide su alto a partir del ancho fijo (--w) y el aspect-ratio del iPhone:
   340px de ancho son ~737px de alto, más que la mitad de una pantalla de
   900px ya solo el teléfono. Al limitar el ancho a un % del alto de
   pantalla (32vh) el mockup se hace más pequeño en pantallas bajas y no
   empuja el resto de la cabecera fuera de la vista. */
/* Mismo tamaño de maqueta de iPhone en las tres cabeceras (portada, Tu
   círculo, El mapa) — antes portada usaba device--hero (260px) y las otras
   dos device--lg (340px), así que el "screenshot" no medía lo mismo de una
   página a otra. */
.page-hero .device--lg,.page-hero .device--hero{--w:min(320px,32vh)}
.page-hero .device:not(.device--lg):not(.device--hero){--w:min(320px,32vh)}
/* Mismo interlineado en los tres titulares — el de portada llevaba 1.22
   porque el subrayado a mano de "seguridad" necesita ese aire para no tocar
   la línea de abajo (ver .ink::after); en vez de dejar ese valor solo ahí,
   se aplica a los tres para que el espaciado entre líneas se vea igual. */
.page-hero h1{line-height:1.22}
/* Zona+ no lleva maqueta de móvil, así que su cabecera es mucho más corta
   que las otras tres — con flex-start (la regla de arriba) se quedaba todo
   pegado arriba y dejaba una franja enorme y vacía antes de la siguiente
   sección. Aquí sí conviene centrar verticalmente, ya que no hay riesgo de
   que el contenido sea más alto que la pantalla y se salga por arriba. */
.page-hero--center{justify-content:center}

/* ── ritmo del héroe, agrandado a petición: más aire arriba/abajo y
   proporción de columnas más generosa para el titular */
.hero-crop{overflow:hidden}
.hero-split{grid-template-columns:minmax(0,.6fr) minmax(0,.4fr)}
.hero-h1{font-size:clamp(2.6rem,5.4vw,4.2rem);text-wrap:balance;max-width:15ch}
.hero-split .lede{margin-top:1.6rem}
.hero-split .stores{margin-top:3.4rem}
@media(max-width:640px){
  .section.hero-pad{padding-top:4.2rem;padding-bottom:.6rem}
  .hero-h1{font-size:2.1rem}
  .hero-split{gap:1rem}
  .hero-split .lede{font-size:.92rem;margin-top:.6rem}
  .hero-split .stores{gap:.45rem;margin-top:.9rem}
  .hero-split .store{padding:.4rem 1rem .42rem;min-width:0}
  .hero-split .note{margin-top:.7rem;font-size:.74rem}
  .hero-split .kick{margin-bottom:.5rem;font-size:.68rem}
}
.section.four-pad{padding:var(--pad-mid) 0}
.section.trust-pad{padding:var(--pad-sm) 0}
@media(max-width:640px){
  .four-pad .kick{margin-bottom:1rem;font-size:.7rem}
  .trust-strip{font-size:.8rem}
  .trust-strip span{margin:0 .35rem}
}
.device-wrap{position:relative;display:flex;justify-content:center}

/* ── notificación flotante sobre la captura real del héroe ───────── */
.hm-notif{position:absolute;left:8%;right:8%;top:13%;background:rgba(16,16,25,.92);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.6rem .75rem;
  display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-size:.68rem;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.6);
  animation:hmNotifDelay 1.4s var(--ease) .6s both}
.hm-notif b{color:var(--red);font-weight:800;letter-spacing:.03em}
.hm-notif span{font-weight:700;flex:1}
.hm-notif small{color:#8a8a9c;font-size:.62rem;width:100%}
@keyframes hmNotifDelay{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}

/* ── secciones ────────────────────────────────────────────────── */
.section{padding:var(--pad) 0;position:relative;z-index:2;overflow-x:clip}
.section--line{border-top:1px solid var(--line)}
.section--alt{background:var(--bg2)}
.section--tight{padding:clamp(2.8rem,4.5vw,4rem) 0}
/* el rojo de marca se reserva para el CTA principal y SOS (--accent se
   sobrescribe puntualmente con style="--accent:var(--red)" en esas
   secciones) — por defecto el kicker usa un tono neutro para que no
   todas las secciones griten al mismo nivel */
.kick{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--kick,var(--t2));margin-bottom:1.1rem}
/* la marca de pin (el mismo icono del mapa) como elemento gráfico que se
   repite delante de CADA etiqueta de sección de las 4 páginas — es la
   única forma que se reconoce sin leer texto, el equivalente a que una
   mascota aparezca siempre en el mismo sitio (referencia: quippyapp.com) */
.kick i{width:9px;height:11px;flex:none;background:var(--accent);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z"/></svg>') center/contain no-repeat}

/* acento de una sola palabra por titular (referencia: quippyapp.com) — el
   titular entero se queda en blanco/negro, solo la palabra que vende el
   beneficio concreto lleva cursiva + el rojo de marca + un trazo dibujado
   a mano debajo, para no competir por atención con el resto de la frase */
.ink{font-style:italic;color:var(--accent);position:relative;white-space:nowrap}
.ink::after{content:'';position:absolute;left:-.05em;right:-.05em;bottom:-.06em;height:.09em;
  background:var(--accent);border-radius:2px;opacity:.55;
  transform:rotate(-.6deg) scaleX(1.02)}
@media(max-width:640px){.ink{white-space:normal}}
.lede{color:var(--t2);font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.55;max-width:34rem;margin-top:1.1rem}
/* toda cabecera de sección deja el mismo hueco con lo que venga debajo
   (rejilla, tarjetas, carrusel), venga de donde venga */
.section-head{max-width:44rem;margin-bottom:2.8rem}
.section-head.center{margin-inline:auto;text-align:center}
.split .section-head{margin-bottom:0}
.section-head.center .lede{margin-inline:auto}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2.4rem,6vw,5.5rem);align-items:center}
.split.flip .split-art{order:-1}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:2.6rem;text-align:center}
  .split.flip .split-art{order:0}
  .split .lede,.split .section-head{margin-inline:auto}
  .tag-row,.kick{justify-content:center}
  .facts{justify-content:center}
  .split .stores{justify-content:center}
}

.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.tag{font-size:.83rem;font-weight:600;color:var(--t1);border:1px solid var(--line2);
  border-radius:999px;padding:.42rem .95rem;background:rgba(255,255,255,.035)}
.note{color:var(--t3);font-size:.86rem;margin-top:1.7rem;padding-top:1.1rem;border-top:1px solid var(--line)}

.cards{display:grid;gap:1rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:1.6rem 1.5rem 1.7rem;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,background .3s}
.card:hover{border-color:var(--line2);transform:translateY(-4px);background:var(--card2);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.card .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:1.1rem;background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent)}
.card .ico svg{width:20px;height:20px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--t2);font-size:.96rem;line-height:1.5}
/* tarjeta destacada (una por rejilla) — referencia: ABC Círculo, la
   "feat.accent" en fondo sólido de marca para la función bandera */
.card--accent{background:var(--accent);border-color:transparent}
.card--accent .ico{background:rgba(255,255,255,.16);color:#fff}
.card--accent h3,.card--accent p{color:#fff}
.card--accent p{opacity:.92}
.card--accent:hover{background:var(--accent);border-color:transparent;box-shadow:0 20px 44px -18px rgba(255,45,85,.55)}

.halves{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin-top:3.2rem}
.half{transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  position:relative;border:1px solid var(--line);border-radius:26px;padding:2.4rem 2rem 0;
  overflow:hidden;background:var(--card);display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s}
.half:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line2));transform:translateY(-5px);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.half h3{font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.04em;margin-bottom:.7rem}
.half p{color:var(--t2);font-size:1rem;max-width:26rem}
.half ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.half li{display:grid;grid-template-columns:1.15rem 1fr;gap:.7rem;font-size:.95rem;align-items:start}
.half li svg{margin-top:.28rem;color:var(--accent)}
.half .device-wrap{margin-top:2.2rem;margin-bottom:-16%;
  -webkit-mask-image:linear-gradient(#000 68%,rgba(0,0,0,.25) 88%,transparent);
  mask-image:linear-gradient(#000 68%,rgba(0,0,0,.25) 88%,transparent)}

.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.2rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:.62rem 1rem;
  font-size:.93rem;font-weight:600;transition:border-color .25s,transform .25s}
.chip{transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.chip:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.chip svg{width:17px;height:17px;color:var(--accent);flex:none}
.chip--sub{background:transparent;color:var(--t2);font-weight:500;font-size:.86rem;padding:.5rem .85rem}

.sos-band{position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(255,45,85,.3);
  background:rgba(255,45,85,.06)}
.sos-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);padding:clamp(2rem,4.5vw,3.6rem);align-items:center}
@media(max-width:900px){.sos-in{grid-template-columns:1fr;text-align:center}}
.sos-btn{width:min(190px,60%);aspect-ratio:1;border-radius:50%;margin-inline:auto;display:grid;
  place-items:center;background:var(--red);color:#fff;font-weight:900;font-size:2.3rem;
  letter-spacing:.03em;box-shadow:0 0 0 14px rgba(255,45,85,.1),0 0 0 32px rgba(255,45,85,.05);
  animation:sosPulse 2.2s ease-in-out infinite}
@keyframes sosPulse{
  0%,100%{box-shadow:0 0 0 14px rgba(255,45,85,.14),0 0 0 32px rgba(255,45,85,.06);transform:scale(1)}
  50%{box-shadow:0 0 0 20px rgba(255,45,85,.08),0 0 0 44px rgba(255,45,85,.03);transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){.sos-btn{animation:none}}
/* recorte de la sección de emergencias: el botón rojo grande, latiendo,
   solo. La pantalla completa vive en la app; aquí es la escena, no un
   pantallazo. */
.sos-standalone{display:grid;place-items:center;padding:2.5rem 0;position:relative}
.sos-standalone .sos-btn{font-size:1.7rem}
.sos-list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0}
.sos-list li{display:grid;grid-template-columns:1.6rem 1fr;gap:.9rem;align-items:start;
  padding:.85rem 0;border-top:1px solid var(--line);font-size:.99rem;text-align:left}
.sos-list li svg{width:20px;height:20px;color:var(--red);margin-top:.15rem}
.sos-list li b{display:block;font-weight:700}
.sos-list li span{color:var(--t2);font-size:.88rem;display:block;margin-top:.15rem}

.demo{border:1px solid var(--line);border-radius:24px;padding:clamp(1.2rem,2.4vw,1.7rem);background:var(--card)}
.demo-map{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#0c0e18}
.demo-map::before{content:'';position:absolute;inset:-20%;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:38px 38px;transform:rotate(-9deg)}
.radius{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(10,132,255,.13);border:1px solid rgba(10,132,255,.55);
  transition:width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1)}
.me{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--blue);border:2px solid #fff;z-index:2}
.hit{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--t3);opacity:.35;transition:opacity .3s,background .3s,box-shadow .3s}
.hit.on{background:var(--red);opacity:1;box-shadow:0 0 0 5px rgba(255,45,85,.22)}
.demo-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:1.2rem 0 .5rem;font-size:.88rem;color:var(--t2)}
.demo-foot b{display:block;font-size:1.6rem;font-weight:800;color:var(--t1);letter-spacing:-.03em}
input[type=range]{width:100%;accent-color:var(--blue);height:26px}

.qs{max-width:720px;margin:2.8rem auto 0}
.qs details{border-bottom:1px solid var(--line)}
.qs details:first-child{border-top:1px solid var(--line)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;
  padding:1.25rem .1rem;font-weight:700;font-size:1.02rem}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";width:11px;height:11px;flex:0 0 auto;margin-top:.42rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s}
.qs details[open] summary::after{transform:rotate(-135deg);margin-top:.7rem}
.qs details p{color:var(--t2);font-size:.97rem;padding:0 2.5rem 1.45rem .1rem}

/* ── banda de cierre flotante (referencia: ABC Círculo, .cta-band) ─── */
.close{padding:var(--pad) 0}
.close-card{max-width:640px;margin-inline:auto;text-align:center;border-radius:32px;
  padding:clamp(2.6rem,6vw,4.4rem) clamp(1.6rem,5vw,3rem);position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 50% -10%,color-mix(in srgb,var(--accent) 22%,var(--card)),var(--card) 60%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.close h2{font-size:clamp(2.1rem,4.6vw,3rem)}
.close p{color:var(--t2);margin-top:1.1rem;font-size:1.06rem}
.close .stores{justify-content:center;margin-top:2.4rem}
/* el QR necesita el mismo aire por arriba que tiene la fila de botones, y
   separación real entre el cuadro y su texto: antes el texto quedaba pegado
   al QR mientras que los botones de arriba respiraban */
.qr-block{margin-top:2.4rem;display:none;flex-direction:column;align-items:center;gap:1rem}
@media(min-width:900px){.qr-block{display:flex}}
.qr-box{width:132px;height:132px;border-radius:16px;background:#fff;padding:10px}
.qr-note{color:var(--t3);font-size:.85rem}
.qr-note-title{margin-top:.2rem}

/* ── footer en columnas (referencia: ABC Círculo, .foot-grid) ────────── */
footer{border-top:1px solid var(--line);padding:3.4rem 0 2.2rem;position:relative;z-index:2}
footer .in{width:var(--wrap);margin-inline:auto}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.2rem}}
.foot-col h4{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--t3);margin-bottom:.9rem}
.foot-col a,.foot-col span{display:block;font-size:.9rem;color:var(--t2);margin-bottom:.65rem}
.foot-col a:hover{color:var(--t1)}
/* line-height:1 es lo que faltaba para que la palabra quede centrada con el
   escudo: sin él la caja de línea heredaba el 1.5 del body y añadía un hueco
   desigual arriba y abajo del texto, así que "zona" flotaba más alta que el
   escudo aunque el contenedor fuese align-items:center. */
.foot-brand{font-size:1.15rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.foot-brand img{width:24px;height:24px;flex:none}
.foot-blurb{color:var(--t3);font-size:.88rem;line-height:1.55;max-width:26rem}
.foot-social{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  color:var(--t2);font-size:.88rem;font-weight:600;transition:color .25s}
.foot-social:hover{color:var(--t1)}
.foot-social svg{flex:none}
.foot-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.82rem;color:var(--t3)}
.disclaimer{width:100%;font-size:.78rem;color:var(--t3);opacity:.8;max-width:72ch;margin-top:.9rem}

/* ── dinamismo (referencia: symmetry.club/es) ────────────────────────
   1) manchas de color ambientales, muy tenues, que respiran de fondo
   2) tarjetas que al pasar el ratón se elevan + halo de resplandor detrás
   3) iconos grandes con un resplandor de color detrás, no un circulito plano */
.glow-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.glow-blob{position:absolute;border-radius:50%;filter:blur(70px);
  animation:glowPulse 9s ease-in-out infinite}
.glow-blob--a{width:22rem;height:22rem;top:-6rem;left:-4rem;
  background:color-mix(in srgb,var(--red) 30%,transparent)}
.glow-blob--b{width:26rem;height:26rem;bottom:-10rem;right:-6rem;
  background:color-mix(in srgb,var(--blue) 22%,transparent);animation-delay:3s}
@keyframes glowPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.glow-blob{animation:none;opacity:.4}}

/* tarjeta con halo: cualquier tarjeta del sitio lleva esta misma reacción,
   para que el dinamismo sea consistente en las 4 páginas */
.card,.steps li,.review,.half2,.cat,.zp-plan,.fam-shot--card,.chip{position:relative;isolation:isolate}
.card::before,.steps li::before,.review::before,.half2::before,.cat::before,.zp-plan::before,.fam-shot--card::before,.chip::before{
  content:'';position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;opacity:0;filter:blur(18px);
  background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--accent,var(--red)) 45%,transparent),transparent 70%);
  transition:opacity .5s var(--ease)}
.card:hover::before,.steps li:hover::before,.review:hover::before,.half2:hover::before,.cat:hover::before,.zp-plan:hover::before,.fam-shot--card:hover::before{opacity:1}
.card:hover,.steps li:hover,.review:hover,.cat:hover,.fam-shot--card:hover{transform:translateY(-6px) scale(1.015)}
.zp-plan:hover{transform:translateY(-6px)}

/* icono grande con resplandor de color detrás, en vez del circulito plano */
.ico-glow{position:relative;width:3.4rem;height:3.4rem;display:grid;place-items:center;
  margin-bottom:1.1rem;flex:none}
.ico-glow::before{content:'';position:absolute;inset:-40%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ic,var(--red)) 55%,transparent),transparent 72%);
  filter:blur(14px);opacity:.75;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ico-glow svg{position:relative;z-index:1;width:26px;height:26px;color:var(--ic,var(--red))}
.card:hover .ico-glow::before{opacity:1;transform:scale(1.25)}

/* placeholder de captura de pantalla pendiente — a sustituir por el
   pantallazo real cuando esté listo. Se ve intencionadamente distinto a
   una captura real para que no se confunda con contenido definitivo. */
.shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;text-align:center;padding:1.6rem;
  background:repeating-linear-gradient(135deg,var(--card2) 0 10px,var(--card) 10px 20px)}
.shot-ph svg{width:28px;height:28px;color:var(--t3);flex:none}
.shot-ph b{display:block;color:var(--t2);font-size:.8rem;font-weight:700;max-width:14rem;line-height:1.35}
.shot-ph span{display:block;color:var(--t3);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fam-shot .shot-ph{position:absolute}

/* micro-interacción de flecha, reutilizable en botones y no solo en .link-arrow */
.hover-arrow svg{transition:transform .35s var(--ease)}
.hover-arrow:hover svg{transform:translateX(5px)}

/* ── reveal simple (sin parallax) ────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:50ms}
[data-stagger].in>*:nth-child(3){transition-delay:100ms}
[data-stagger].in>*:nth-child(4){transition-delay:150ms}
[data-stagger].in>*:nth-child(5){transition-delay:200ms}
[data-stagger].in>*:nth-child(6){transition-delay:250ms}
[data-stagger].in>*:nth-child(n+7){transition-delay:290ms}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important}
  .radius{transition:none}
  .hm-notif{animation:none!important;opacity:1!important;transform:none!important}
  .df-notif{animation:none!important;opacity:1!important;transform:none!important}
  .reviews-track{animation:none!important}
  .zp3-c{animation:none!important;opacity:1!important;transform:none!important}
  .fam-arrival__card{animation:none!important;opacity:1!important;transform:none!important}
  .map-report__step{animation:none!important}
}

/* ── personas de ejemplo (hero de Círculo) ───────────────────── */
.people-band{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.6rem,4vw,3.2rem);margin-top:clamp(2.6rem,5vw,4rem)}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;width:9.5rem}
.person-avatar{position:relative;width:6.6rem;height:6.6rem;border-radius:50%;padding:3px;
  background:conic-gradient(from -40deg,var(--pc,var(--green)),color-mix(in srgb,var(--pc,var(--green)) 30%,transparent),var(--pc,var(--green)))}
.person-avatar__inner{width:100%;height:100%;border-radius:50%;background:var(--bg2);
  display:grid;place-items:center;overflow:hidden;border:2px solid var(--bg)}
.person-avatar__inner svg{width:56%;height:56%;color:var(--pc,var(--green))}
.person-badge{position:absolute;bottom:-2px;right:-2px;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--card2);border:2px solid var(--bg);display:grid;place-items:center;color:var(--t1)}
.person-badge svg{width:12px;height:12px}
.person-name{font-weight:800;font-size:1rem;margin-top:.9rem;letter-spacing:-.02em}
.person-bubble{margin-top:.35rem;font-size:.83rem;color:var(--t2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;display:inline-flex;align-items:center;gap:.35rem}
.person-bubble i{width:6px;height:6px;border-radius:50%;background:var(--pc,var(--green));flex:none}

/* ── mockup de pantalla real (generado del código) ─────────────── */
.mockup-screen{position:absolute;inset:0;background:#080810;color:#f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  display:flex;flex-direction:column;padding:9% 6% 5%;box-sizing:border-box}
.mk-topbar{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;
  color:#f5f5f7;opacity:.85;margin-bottom:6%}
.mk-member{display:flex;align-items:center;gap:.6rem;margin-bottom:6%}
.mk-avatar{width:2.6rem;height:2.6rem;border-radius:50%;background:#ff2d55;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none}
.mk-member b{display:block;font-size:.92rem;font-weight:800}
.mk-member span{display:block;color:#98989f;font-size:.68rem;margin-top:.15rem}
.mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:5%}
.mk-card{background:#101019;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:.85rem .8rem;display:flex;flex-direction:column;gap:.3rem}
.mk-card .mk-ico{width:1.9rem;height:1.9rem;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mc) 18%,transparent);margin-bottom:.15rem;color:var(--mc)}
.mk-card .mk-ico svg{width:15px;height:15px}
.mk-card b{font-size:.78rem;font-weight:800;line-height:1.15}
.mk-card span{font-size:.62rem;color:#98989f}
.mk-status{display:flex;align-items:center;gap:.3rem;color:#30d158;font-size:.62rem;font-weight:600;margin-bottom:4%}
.mk-manage{display:flex;justify-content:space-between;align-items:center;background:#101019;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.7rem .9rem;
  font-size:.72rem;color:#98989f;margin-bottom:auto}
.mk-tabbar{display:flex;justify-content:space-around;background:#101019;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:.6rem .3rem;font-size:.6rem;color:#636366;text-align:center;line-height:1.6}
.mk-tabbar .on{color:#ff2d55;font-weight:700}

.code-badge{display:flex;justify-content:center;gap:.5rem;margin-top:2.2rem}
.code-badge__letter{width:3rem;height:3.6rem;border-radius:14px;display:grid;place-items:center;
  font-size:1.6rem;font-weight:800;font-family:ui-monospace,"SF Mono",monospace;
  background:var(--card);border:1px solid var(--line2);color:var(--t1)}
@media(max-width:480px){.code-badge__letter{width:2.4rem;height:2.9rem;font-size:1.25rem}}

.reviews{display:grid;gap:1rem;margin-top:2.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.review{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem}
.review h4{font-size:.98rem;font-weight:800;margin-bottom:.5rem}
.review p{color:var(--t2);font-size:.95rem;line-height:1.5}
.review span{display:block;color:var(--t3);font-size:.82rem;margin-top:.9rem;font-weight:600}

.timeline{border:1px solid var(--line);border-radius:24px;padding:clamp(1.4rem,3vw,2rem);text-align:left;background:var(--card)}
.tl-title{font-size:.82rem;color:var(--t3);margin-bottom:1.3rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.timeline ol{list-style:none;margin:0;padding:0;position:relative}
.timeline ol::before{content:'';position:absolute;left:4.15rem;top:.6rem;bottom:2.2rem;width:1px;background:var(--line2)}
.timeline li{display:grid;grid-template-columns:3.1rem 1.2rem minmax(0,1fr);align-items:baseline;gap:.55rem;padding:.6rem 0}
.timeline time{font-weight:700;font-size:.88rem;color:var(--t3);font-variant-numeric:tabular-nums}
.timeline li i{width:9px;height:9px;border-radius:50%;background:var(--green);justify-self:center;
  transform:translateY(-.15em);box-shadow:0 0 0 4px var(--bg)}
.timeline li.self i{background:var(--blue)}
.timeline b{display:block;font-weight:600;font-size:.97rem}
.timeline span{color:var(--t2);font-size:.85rem}
.tl-out{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--t2);font-size:.92rem}

.zplus-card{border:1px solid var(--line);border-radius:24px;padding:clamp(1.6rem,3vw,2.4rem);background:var(--card);margin-top:2.4rem}
.zplus-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.zplus-list li{display:grid;grid-template-columns:1.2rem 1fr;gap:.7rem;font-size:.95rem;align-items:start}
.zplus-list li svg{margin-top:.28rem;color:var(--purple);width:16px;height:16px}
.zform{display:flex;gap:.6rem;margin-top:1.6rem;flex-wrap:wrap}
.zform input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line2);border-radius:12px;
  padding:.8rem 1rem;color:var(--t1);font-size:.95rem}
.zform button{background:var(--purple);color:#fff;font-weight:700;border:0;border-radius:12px;padding:.8rem 1.4rem;font-size:.95rem}
.zform-note{color:var(--t3);font-size:.8rem;margin-top:.7rem}
.zform-msg{font-size:.88rem;margin-top:.7rem;color:var(--green)}

/* ── cuatro cosas (rejilla, debajo del héroe) ────────────────────── */
.fourgrid{display:grid;gap:1rem;margin-top:0;grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.fourgrid{grid-template-columns:1fr 1fr;gap:.7rem}}
.fourgrid .card{padding:1.3rem 1.2rem 1.4rem}
.fourgrid .card h3{font-size:1.02rem;letter-spacing:-.03em;line-height:1.2}
.fourgrid .card p{color:var(--t3);font-size:.83rem;margin-top:.4rem;line-height:1.45}
@media(max-width:640px){
  .fourgrid{gap:.55rem}
  .fourgrid .card{padding:.8rem .75rem .85rem;border-radius:14px}
  .fourgrid .card .ico{width:26px;height:26px;margin-bottom:.5rem}
  .fourgrid .card .ico svg{width:14px;height:14px}
  .fourgrid .card h3{font-size:.82rem;line-height:1.2}
  .fourgrid .card p{font-size:.71rem;margin-top:.25rem;line-height:1.3}
}

/* ── franja de prueba ─────────────────────────────────────────────── */
.trust-strip{color:var(--t2);font-size:.92rem;font-weight:600;text-align:center}
.trust-strip span{color:var(--t3);margin:0 .6rem;font-weight:400}

/* ── tres pasos (tarjeta con borde, referencia: ABC Círculo) ─────────── */
.steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:1.7rem 1.6rem 1.8rem;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.steps li:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.step-num{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
  font-weight:800;font-size:1.05rem;margin-bottom:1.1rem}
.steps h3{font-size:1.08rem;letter-spacing:-.03em;margin-bottom:.5rem}
.steps p{color:var(--t2);font-size:.94rem;line-height:1.5}

/* ── el número (sección tipo A, Momento) ─────────────────────────── */
.num-big{font-size:clamp(3.6rem,9.5vw,6.2rem);display:inline-block;line-height:.82;
  vertical-align:-.1em;color:var(--accent);letter-spacing:-.04em}

/* ── bloque 2 · las dos mitades (docs/portada.md) ────────────────── */
.halves2{display:grid;gap:1.1rem;margin-top:2.6rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.halves2{grid-template-columns:1fr}}
.half2{--accent:var(--red);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card) 55%);
  transition:transform .45s var(--ease),border-color .45s var(--ease)}
.half2:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.half2-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0e18;padding:1rem}
.half2-shot img{width:100%;height:100%;object-fit:contain;object-position:center}
.half2 h3{padding:1.5rem 1.6rem 0;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.03em}
.half2 ul{list-style:none;margin:1rem 0 0;padding:1rem 1.6rem 1.2rem;display:grid;gap:.7rem}
/* icono en chip circular de color, en vez de un check plano — referencia:
   life360.com, la rejilla "Todo sobre la ubicación" usa un círculo de
   color pastel distinto por función, no el mismo check repetido cinco
   veces */
.half2 li{display:grid;grid-template-columns:2.1rem 1fr;gap:.75rem;font-size:.94rem;
  align-items:center;color:var(--t1);font-weight:600}
.half2 li svg{width:14px;height:14px;color:#fff}
.half2 li i{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent)}
/* Tu círculo = azul de protección/ubicación · El mapa = rojo de alerta.
   Mismo contraste que pediste para diferenciar "cuidar a los tuyos" de
   "lo que pasa en la calle" en toda la app, no solo en esta rejilla. */
.half2--circulo{--accent:var(--blue)}

/* ── bloque 4 · reseñas (carrusel) ───────────────────────────────── */
.reviews-track-wrap{overflow:hidden;margin-top:2.4rem}
.reviews-track{display:flex;gap:1rem;width:max-content;animation:reviewsScroll 34s linear infinite}
.reviews-track-wrap:hover .reviews-track{animation-play-state:paused}
.review2{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem;width:280px;flex:none}
.review2 .stars{color:var(--amber);font-size:.85rem;letter-spacing:.15em;margin-bottom:.5rem}
.review2 h4{font-size:.98rem;font-weight:800;margin-bottom:.5rem}
.review2 p{color:var(--t2);font-size:.95rem;line-height:1.5}
.review2 span{display:block;color:var(--t3);font-size:.82rem;margin-top:.9rem;font-weight:600}
@keyframes reviewsScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(hover:none){
  .reviews-track{animation:none;overflow-x:auto;scroll-snap-type:x mandatory;width:auto;-webkit-overflow-scrolling:touch}
  .review2{scroll-snap-align:start}
  .review2[aria-hidden]{display:none}
}

/* ── bloques 5/6 · deep dives simétricos ─────────────────────────── */
.df-split{align-items:center}
.df-h2{max-width:17ch;text-wrap:balance}
.df-remate{font-weight:800;font-size:clamp(1.15rem,1.8vw,1.4rem);margin-top:1rem;letter-spacing:-.02em}
.df-notifs{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 10%,#141420,#07070d 68%);
  padding:16% 6% 0;box-sizing:border-box;display:flex;flex-direction:column;gap:.5rem}
.df-notif{background:rgba(16,16,25,.92);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:.6rem .75rem;font-size:.72rem;opacity:0;transform:translateY(-10px);display:flex;
  align-items:baseline;gap:.5rem;animation-duration:12s;animation-timing-function:ease;animation-iteration-count:infinite}
.df-notif b{color:var(--accent);font-weight:800;flex:none}
.df-notif span{color:#e8e8ee}
.df-notif1{animation-name:dfN1}
.df-notif2{animation-name:dfN2}
.df-notif3{animation-name:dfN3}
.df-notif4{animation-name:dfN4}
@keyframes dfN1{0%{opacity:0;transform:translateY(-10px)}3%{opacity:1;transform:none}83%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes dfN2{0%,16%{opacity:0;transform:translateY(-10px)}19%{opacity:1;transform:none}83%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes dfN3{0%,32%{opacity:0;transform:translateY(-10px)}35%{opacity:1;transform:none}83%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes dfN4{0%,49%{opacity:0;transform:translateY(-10px)}52%{opacity:1;transform:none}83%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-10px)}}

/* ── Asistente de Zona: mock del chat dentro del iPhone (bloque transversal).
   Cuando capturemos el pantallazo real de AssistantChatScreen, sustituirá
   este mock: cae dentro de .device__screen y el resto del bloque no cambia. */
.ai-screen{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 10%,#141420,#07070d 68%);
  padding:12% 6% 7%;box-sizing:border-box;display:flex;flex-direction:column;gap:.45rem;font-size:.7rem}
.ai-head{display:flex;align-items:center;justify-content:center;gap:.35rem;color:#e8e8ee;
  font-weight:800;font-size:.72rem;margin-bottom:.55rem}
/* pisa la regla genérica de "imagen dentro de la pantalla = pantallazo a
   pantalla completa": aquí el escudo es un icono de 14px, no una captura */
.ai-head img{display:block;width:14px!important;height:14px!important;object-fit:contain}
.ai-msg{max-width:86%;border-radius:12px;padding:.5rem .65rem;line-height:1.4;
  opacity:0;transform:translateY(-10px);animation-duration:12s;animation-timing-function:ease;animation-iteration-count:infinite}
.ai-msg--user{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.ai-msg--bot{align-self:flex-start;background:rgba(255,255,255,.09);color:#e8e8ee;
  border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:4px}
.ai-msg1{animation-name:dfN1}
.ai-msg2{animation-name:dfN2}
.ai-msg3{animation-name:dfN3}
.ai-input{margin-top:auto;display:flex;align-items:center;gap:.4rem;color:var(--t3);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.45rem .4rem .45rem .7rem}
.ai-input i{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--red);flex:none}
@media(prefers-reduced-motion:reduce){.ai-msg{animation:none!important;opacity:1!important;transform:none!important}}

/* ── mapa simulado con incidencias entrando en directo (héroe de /mapa/) ──
   Ya no es un pantallazo real: es un mapa de mentira (rejilla + puntos) con
   avisos que van entrando uno detrás de otro, para transmitir "esto pasa
   todo el rato" antes incluso de tener la captura de verdad. */
.sim-map{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,#141420,#07070d 70%);overflow:hidden}
.sim-map-grid{position:absolute;inset:-20%;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:34px 34px;transform:rotate(-7deg)}
.sim-pin{position:absolute;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  font-size:.95rem;line-height:1;background:var(--pc,var(--red));border:2px solid #fff;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.7);opacity:0;animation:simPinPulse 9s ease infinite}
.sim-pin2{animation-delay:3s}
.sim-pin3{animation-delay:6s}
@keyframes simPinPulse{
  0%,4%{opacity:0;transform:scale(.4)}
  10%{opacity:1;transform:scale(1.18)}
  16%,88%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(.4)}
}
.sim-alert{position:absolute;left:8%;right:8%;top:12%;background:rgba(16,16,25,.94);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.65rem .8rem;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.72rem;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.6);opacity:0;animation:simAlertCycle 9s ease infinite}
.sim-alert b{font-weight:800;color:var(--t1)}
.sim-alert span{font-weight:700;flex:1;color:#e8e8ee}
.sim-alert small{color:#8a8a9c;font-size:.62rem;width:100%}
.sim-alert2{animation-delay:3s}
.sim-alert3{animation-delay:6s}
@keyframes simAlertCycle{
  0%,4%{opacity:0;transform:translateY(-8px)}
  10%,28%{opacity:1;transform:none}
  34%,100%{opacity:0;transform:translateY(-8px)}
}
.sim-count{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-size:.72rem;font-weight:700;color:#e8e8ee}
@media(prefers-reduced-motion:reduce){
  .sim-pin,.sim-alert{animation:none;opacity:1;transform:none}
  .sim-pin2,.sim-pin3,.sim-alert2,.sim-alert3{display:none}
}

.dm-mock{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 16%,#141420,#07070d 68%)}
.dm-alert{position:absolute;left:8%;right:8%;top:14%;background:rgba(16,16,25,.92);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:.6rem .75rem;font-size:.68rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.dm-alert b{color:var(--red);font-weight:800}
.dm-alert span{font-weight:700;flex:1}
.dm-alert small{color:#8a8a9c;font-size:.6rem;width:100%}
.dm-counter{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-size:.72rem;font-weight:700;color:#e8e8ee}
.dm-bar{margin-top:1.4rem;text-align:center}
.dm-bar input[type=range]{max-width:220px}
.dm-bar-label{font-size:.85rem;color:var(--t2);font-weight:700;margin-top:.3rem}

/* ── bloque 10 · QR ───────────────────────────────────────────────── */
.qr-note-title{display:block;color:var(--t1);font-weight:700;font-size:.92rem;margin-bottom:.15rem}

/* ── /zona-plus/ ──────────────────────────────────────────────────── */
.zp-table{width:100%;border-collapse:collapse;min-width:520px;margin-top:2rem}
.zp-table th,.zp-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.zp-table thead th{color:var(--t2);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.zp-table td:first-child,.zp-table th[scope="row"]{color:var(--t2);font-weight:400}
.zp-table .zp-hl{background:rgba(255,45,85,.06);color:var(--t1);font-weight:700}
.zp-table thead .zp-hl{background:rgba(255,45,85,.12);color:var(--accent)}

.zp3-c{opacity:0;animation:zp3in 9s ease infinite}
.zp3-c2{animation-delay:.4s}
.zp3-c3{animation-delay:.8s}
@keyframes zp3in{0%,4%{opacity:0;transform:scale(.7)}10%{opacity:1;transform:scale(1)}90%{opacity:1}96%,100%{opacity:0;transform:scale(.7)}}
.zp3-label{position:absolute;font-size:.62rem;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.zp3-label1{left:22%;top:24%}
.zp3-label2{left:70%;top:42%}
.zp3-label3{left:50%;top:83%;transform:translateX(-50%)}

.zp-route{border:1px solid var(--line);border-radius:24px;padding:clamp(1.4rem,3vw,2rem);background:var(--card)}
.zp-route ol{list-style:none;margin:0;padding:0;position:relative}
.zp-route ol::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line2)}
.zp-route li{position:relative;padding:1.1rem 0 1.1rem 2rem}
.zp-route li i{position:absolute;left:3px;top:1.35rem;width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--bg)}
.zp-route li.self i{background:var(--blue)}

.zp-plans{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:640px){.zp-plans{grid-template-columns:1fr}}
/* ── selector mensual / anual ─────────────────────────────────────────── */
.zp-period{display:flex;justify-content:center;gap:.25rem;margin:0 auto 2.2rem;padding:.25rem;
  width:fit-content;background:var(--card);border:1px solid var(--line);border-radius:999px}
.zp-period button{border:0;background:none;color:var(--t2);font-weight:700;font-size:.88rem;
  padding:.55rem 1.2rem;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.zp-period button.on{background:var(--t1);color:#06060b}
.zp-period-save{display:inline-block;font-size:.72rem;font-weight:800;color:#06280f;
  background:var(--green);margin-left:.35rem;padding:.2rem .55rem;border-radius:999px}
[data-period="annual"] .zp-price--m,[data-period="annual"] .zp-price-sub--m{display:none}
[data-period]:not([data-period="annual"]) .zp-price--y,[data-period]:not([data-period="annual"]) .zp-price-sub--y{display:none}

/* ── resumen arriba de la cabecera (referencia: life360.com/plans-pricing)
   dos tarjetas grandes con precio, para qué sirve el plan y sus 4 ventajas
   principales, antes de la tabla de comparación fila a fila de más abajo */
.zp-plans-summary{margin-top:2.6rem;text-align:left}
.zp-plan--silver{border-color:#c7cbd4!important;background:rgba(199,203,212,.06)}
.zp-plan--gold{border-color:#f0b429!important;background:rgba(240,180,41,.08)}
/* caja sólida, no un simple tinte de texto — referencia: la pastilla verde
   de life360.com/plans-pricing, que es un bloque de color de verdad, no una
   palabra en verde */
.zp-save-pill{display:inline-block;background:var(--green);color:#06280f;
  font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;margin-left:.5rem;vertical-align:middle}
.zp-plan-desc{color:var(--t2);font-size:.92rem;line-height:1.5;margin-top:1.1rem}
.zp-plan-includes{color:var(--t1);font-weight:700;font-size:.9rem;margin-top:1.3rem}
.zp-feats li{display:flex;align-items:center;gap:.55rem}
.zp-plan-more{color:var(--t3);font-size:.85rem;margin-top:.3rem}
/* precio → nota anual → botón: sin este margen el botón blanco quedaba
   pegado justo debajo del texto gris "o X € al año". Solo en las tarjetas
   grandes (.zp-plan): la cabecera de la tabla ya tiene su propio margen en
   el botón y no hace falta tocarla. */
.zp-plan .zp-price-sub{margin-bottom:1rem}

.zp-plans--3{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:760px){.zp-plans--3{grid-template-columns:1fr}}
/* Las tres tarjetas listan las MISMAS 13 filas, para que la comparación se
   lea en horizontal: cada fila ocupa lo mismo en los tres planes aunque el
   texto cambie, y el botón queda siempre abajo del todo. */
.zp-plans--3 .zp-plan{display:flex;flex-direction:column}
.zp-feats{margin-top:1.4rem;margin-bottom:1.4rem;gap:.55rem;font-size:.88rem}
.zp-feats li{align-items:start}
.zp-feats li svg{margin-top:.18rem}
.zp-feats b{color:var(--t1);font-weight:700}
/* Solo las filas donde SÍ hay diferencia real entre planes llevan color: el
   valor de Gratis se queda en blanco (ninguna sorpresa), el de Silver en
   azul y el de Gold en dorado, para que la comparación se lea de un vistazo
   sin tener que leer las 13 líneas de cada tarjeta. */
.zp-diff--silver{color:var(--blue)!important}
.zp-diff--gold{color:#f0b429!important}
.zp-plan--rec .zp-feats svg[data-diff]{color:#f0b429!important}

/* ── comparación en tabla (referencia: life360.com) ───────────────────────
   Etiqueta a la izquierda, poco texto a la derecha: un check verde si está
   incluido, un guión gris si no, y el valor exacto (2 lugares/5 lugares/
   ilimitados) solo en las filas donde de verdad cambia algo. Ni una lista de
   13 líneas repetida tres veces. */
/* padding-top da sitio a la insignia "Recomendado", que sobresale por
   encima de la tarjeta: overflow-x:auto convierte overflow-y en "auto"
   también (no se puede pedir solo un eje), así que sin este hueco el
   propio scroll recortaba la insignia por arriba. */
/* Solo en pantallas estrechas: la tabla mide 680px de mínimo y en un móvil
   se corta por la derecha sin ninguna pista de que se puede deslizar. */
.zp-swipe-hint{display:none;text-align:center;color:var(--t3);font-size:.78rem;
  font-weight:600;margin:1.6rem 0 -1rem}
@media(max-width:720px){.zp-swipe-hint{display:block}}
.zp-compare-wrap{overflow-x:auto;overflow-y:visible;margin-top:2rem;padding-top:1.6rem}
/* la rejilla en sí no lleva ni borde ni fondo: cada plan (.zp-col) se pinta
   como su propia tarjeta redondeada, columna a columna, con hueco entre
   ellas — el mismo lenguaje visual que tenían las tres tarjetas de antes
   (.zp-plan/.zp-plan--rec), pero con una fila por función en vez de repetir
   la lista de 13 líneas tres veces. */
.zp-compare{display:grid;grid-template-columns:minmax(11rem,1.3fr) repeat(3,minmax(6.5rem,1fr));
  column-gap:.9rem;min-width:680px}
.zp-compare-row{display:contents}
.zp-compare-row>*{padding:.85rem 1rem;display:flex;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;font-size:.92rem;color:var(--t2)}
.zp-compare-label{justify-content:flex-start!important;text-align:left;color:var(--t1)!important;font-weight:600}
/* Cada fila de la tabla se puede tocar para explicar qué significa —
   referencia: life360.com/plans-pricing, donde cada línea es clicable y
   despliega una nota. Botón y no <abbr>/title: title no funciona en móvil
   (no hay hover) y aquí sí hace falta que funcione al tocar. */
.zp-info{background:none;border:0;padding:0;font:inherit;font-weight:inherit;color:inherit;
  text-align:left;cursor:help;text-decoration:underline dotted;text-decoration-color:var(--line2);
  text-underline-offset:3px}
.zp-info:hover,.zp-info[aria-expanded="true"]{color:var(--t1);text-decoration-color:var(--accent,var(--red))}
.zp-tip{position:fixed;z-index:80;max-width:min(20rem,calc(100vw - 2rem));background:var(--card2);
  border:1px solid var(--line2);border-radius:14px;padding:.85rem 1rem;font-size:.86rem;
  font-weight:400;line-height:1.5;color:var(--t2);box-shadow:0 16px 32px -12px rgba(0,0,0,.6)}

/* la "tarjeta" de cada plan: borde izq/der en todas las filas, y solo la
   primera y la última cierran el borde de arriba/abajo con las esquinas
   redondeadas — así las filas del medio quedan como un borde continuo. */
.zp-col{background:var(--card);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.zp-compare-row:first-of-type .zp-col{border-top:1px solid var(--line);border-top-left-radius:20px;border-top-right-radius:20px}
.zp-compare-row:last-of-type .zp-col{border-bottom:1px solid var(--line);border-bottom-left-radius:20px;border-bottom-right-radius:20px}
/* Gratis también lleva su propio color, a juego con Silver (plateado) y
   Gold (dorado) — antes era la única de las tres sin identidad propia. */
.zp-col-free{border-color:var(--red)!important;background:rgba(255,45,85,.05)}
/* Gold de verdad (dorado) y Silver de verdad (plateado) — antes Gold llevaba
   el rojo de marca y Silver el azul, que no se leían como los metales que
   nombran. */
.zp-col-gold{border-color:#f0b429!important;background:rgba(240,180,41,.08)}
.zp-compare-row:first-of-type .zp-col-gold{position:relative;overflow:visible}
/* Silver también lleva su propio color, más suave que el de Gold pero
   visible: antes se confundía con la tarjeta Gratis. */
.zp-col-silver{border-color:#c7cbd4!important;background:rgba(199,203,212,.07)}
.zp-compare-row:first-of-type .zp-col-silver{position:relative;overflow:visible}

/* justify-content:flex-start y no center: con center, la columna Gratis
   (solo dos líneas: nombre y precio) se centraba en el hueco vertical de
   toda la fila, que mide lo que ocupan Silver/Gold con su precio, su nota
   anual y el botón — así que "Gratis" quedaba más abajo que "Silver"/"Gold"
   en vez de arrancar a la misma altura. */
.zp-compare-head>*{padding:1.6rem 1.2rem 1.3rem;flex-direction:column;justify-content:flex-start;gap:.3rem}
.zp-compare-head h3{font-size:1.05rem}
.zp-compare-head .zp-price{font-size:1.4rem;margin:0}
.zp-compare-head .zp-price-sub{font-size:.72rem}
.zp-compare-head .zp-cta{margin-top:.7rem;padding:.55rem 1rem;font-size:.85rem;width:auto}
.zp-compare-head .zp-cta small{font-size:.6rem}
.zp-compare-head .zp-cta b{font-size:.82rem}
/* la insignia "Más popular", flotando sobre el borde de la tarjeta Gold,
   igual que antes */
.zp-compare-head .zp-plan-tag{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%)}
/* La insignia solo aparece en la columna Gold, así que lleva su mismo
   dorado en vez del rojo genérico de --accent. */
.zp-compare-head .zp-plan-tag{background:linear-gradient(135deg,#f7c948,#d69412);color:#3a2400}
.zp-tick{width:1.6rem;height:1.6rem;flex:none;display:grid;place-items:center;color:var(--green)}
.zp-tick svg{width:22px;height:22px}
.zp-tick--gold{color:var(--green)} /* 13.75: los ticks van siempre en verde, como en la app */
/* 13.75 — la tabla se divide en dos grupos, igual que en la app: Círculo
   (azul, lo que se paga) y Mapa (rojo, gratis siempre). La fila de grupo
   solo pinta la etiqueta; las tres celdas de plan quedan vacías para que la
   tarjeta de cada columna siga siendo un borde continuo. */
.zp-compare-group .zp-compare-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;padding-top:1.3rem;padding-bottom:.5rem}
.zp-compare-group .zp-compare-label i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.zp-compare-group--circle .zp-compare-label{color:var(--blue)!important}
.zp-compare-group--map .zp-compare-label{color:var(--red)!important}
.zp-compare-group .zp-col{padding-top:.6rem;padding-bottom:.2rem}
.zp-period--table{margin-top:0;margin-bottom:.4rem}
.zp-dash{width:1.1rem;height:.15rem;background:var(--line2);border-radius:2px;flex:none}
@media(max-width:640px){.zp-compare-row>*{padding:.7rem .6rem;font-size:.84rem}}
.zp-feats s{color:var(--t3);text-decoration-color:var(--line2)}
.zp-per{font-size:.85rem;font-weight:600;color:var(--t3)}
/* margin-top:auto empuja el botón al fondo de la tarjeta: los tres planes
   acaban a la misma altura aunque una fila ocupe dos líneas en uno y una en
   otro. No toca ni el fondo ni la sombra, que los pone .store. */
.zp-cta{width:100%;margin-top:auto}
.zp-plan{border:1px solid var(--line);border-radius:22px;padding:1.6rem 1.5rem;background:var(--card);position:relative}
.zp-plan--rec{border-color:var(--accent);background:rgba(255,45,85,.06)}
.zp-plan-tag{position:absolute;top:-.7rem;left:1.5rem;background:linear-gradient(135deg,#f7c948,#d69412);color:#3a2400;font-size:.7rem;font-weight:800;padding:.25rem .6rem;border-radius:999px}
.zp-plan h3{font-size:1.1rem}
.zp-price{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-top:.6rem}
.zp-price-sub{color:var(--t3);font-size:.85rem;margin-top:.2rem}

/* ── /familia/ · recortes e ilustraciones (no fotogramas de móvil) ─── */
.fam-shot{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;
  background:radial-gradient(120% 120% at 30% 10%,var(--card2),var(--bg2));
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.fam-shot--zoom{aspect-ratio:4/3;background-size:230%;background-repeat:no-repeat}
.fam-shot--card{padding:2rem}
.fam-shot--btn{overflow:visible}
/* capturas reales del simulador: el pantallazo es un móvil entero
   (vertical) y nunca se recorta — object-fit:contain lo encaja completo
   dentro de la caja 4:3, dejando franjas a los lados si hace falta. */
.fam-shot img{width:100%;height:100%;object-fit:contain;object-position:center;padding:.6rem;box-sizing:border-box}

.fam-arrival{background:radial-gradient(120% 90% at 50% 16%,#141420,#07070d 68%);
  align-items:flex-start;padding-top:14%}
.fam-arrival__card{background:rgba(16,16,25,.94);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:.7rem .9rem;font-size:.74rem;display:flex;flex-direction:column;gap:.1rem;width:74%;
  animation:famArrivalIn 6s ease infinite}
.fam-arrival__card b{color:var(--accent);font-weight:800;font-size:.68rem;letter-spacing:.04em}
.fam-arrival__card span{font-weight:700;color:#eee}
.fam-arrival__card small{color:#8a8a9c;font-size:.62rem}
@keyframes famArrivalIn{0%,6%{opacity:0;transform:translateY(-14px)}16%{opacity:1;transform:none}80%{opacity:1}94%,100%{opacity:0;transform:translateY(-14px)}}

.fam-imbtn{border:0;border-radius:999px;background:var(--green);color:#06110a;font-weight:800;font-size:1.15rem;
  padding:1.2rem 2.4rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 0 0 16px rgba(48,209,88,.12);
  position:relative;left:22%;white-space:nowrap}

.fam-alert-card,.fam-toggle-card,.fam-link-card,.fam-precision-card{background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:1.3rem 1.4rem;width:100%;max-width:20rem}
.fam-alert-card{text-align:center}
.fam-alert-card b{display:block;margin-top:.6rem;font-size:1.05rem}
.fam-alert-card span{display:block;color:var(--t2);font-size:.9rem;margin-top:.2rem}
.fam-alert-card__btns{display:grid;gap:.5rem;margin-top:1.1rem}
.fam-alert-card__btns em{font-style:normal;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;
  padding:.55rem;font-size:.82rem;font-weight:700}

.fam-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.92rem;font-weight:700}
.fam-toggle{width:2.6rem;height:1.5rem;border-radius:999px;background:var(--line2);position:relative;flex:none}
.fam-toggle i{position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;transition:left .2s}
.fam-toggle--on{background:var(--green)}
.fam-toggle--on i{left:calc(100% - 1.4rem)}

.fam-link-card{text-align:center}
.fam-link-card b{display:block;margin-top:.6rem;font-size:1rem}
.fam-link-card span{display:block;color:var(--t2);font-size:.85rem;margin-top:.2rem}

.fam-precision-card{display:grid;gap:.7rem}
.fam-seg{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;background:var(--bg2);border-radius:12px;padding:.3rem}
.fam-seg--sm{grid-template-columns:repeat(3,1fr);font-size:.72rem}
.fam-seg em{font-style:normal;text-align:center;padding:.5rem .3rem;border-radius:9px;color:var(--t3);font-weight:700}
.fam-seg em.on{background:var(--card2);color:var(--t1)}

/* ── /mapa/ · recortes e ilustraciones (docs/zona-plus.md §3.2) ──── */
.cat-grid{display:grid;gap:.8rem;margin-top:2.6rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:1.1rem .5rem;
  border:1px solid var(--line);border-radius:16px;background:var(--card)}
.cat svg{width:22px;height:22px;color:var(--accent)}
.cat span{font-size:.76rem;color:var(--t2);line-height:1.25}
/* el mismo pin que se ve en el mapa de la app, para que la categoría se
   reconozca aquí igual que allí */
.cat-pin{width:2.2rem;height:2.2rem;border-radius:50%;border:2.5px solid #fff;
  display:grid;place-items:center;font-size:.95rem;line-height:1;flex:none;
  background:var(--cat,var(--red));box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}
.cat:hover .cat-pin{transform:scale(1.08);transition:transform .3s var(--ease)}

.map-report{display:flex;gap:1.6rem;align-items:center;justify-content:center}
.map-report__step{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;
  background:var(--bg2);color:var(--t3);border:1px solid var(--line2);animation:mapStepPulse 8s ease infinite}
.map-report__step:nth-child(2){animation-delay:2.67s}
.map-report__step:nth-child(3){animation-delay:5.33s}
@keyframes mapStepPulse{
  0%,8%{background:var(--bg2);color:var(--t3);transform:scale(1);border-color:var(--line2)}
  12%,25%{background:var(--accent);color:#fff;transform:scale(1.14);border-color:transparent}
  33%,100%{background:var(--bg2);color:var(--t3);transform:scale(1);border-color:var(--line2)}
}

.map-verdad{display:grid;gap:.8rem;width:100%;max-width:20rem}
.map-verdad__row{display:grid;grid-template-columns:1.4rem 1fr auto;gap:.6rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
.map-verdad__row span{font-size:.92rem;font-weight:600;color:var(--t2)}
.map-verdad__row b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.map-verdad__row--up b{color:var(--green)}

.map-anon-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;width:100%;max-width:20rem}
.map-anon-card__top{display:flex;align-items:center;gap:.6rem}
.map-anon-card__top b{font-size:.98rem}
.map-anon-card__top span{margin-left:auto;color:var(--t3);font-size:.78rem}
.map-anon-card__author{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line2);
  font-size:.85rem;color:var(--t3)}
.map-anon-card__author em{font-style:normal;color:var(--accent);border:1px dashed var(--accent);
  border-radius:6px;padding:.05rem .5rem;margin-left:.3rem}

.map-help-card{position:relative;width:100%;aspect-ratio:10/7;border-radius:16px;overflow:hidden;background:#0c0e18}
.map-help-pin{position:absolute;display:flex;align-items:center;gap:.35rem;background:rgba(16,16,25,.92);
  border:1px solid var(--line2);border-radius:999px;padding:.35rem .7rem .35rem .5rem;font-size:.72rem;font-weight:700;
  transform:translate(-50%,-50%);color:var(--t1)}
.map-help-pin svg{color:var(--accent)}

/* el montaje sobre la foto de la mano se probó y se descuadraba en
   viewports distintos al que lo verifiqué — descartado. Vuelta al
   marco .device (aspect-ratio fijo, ya probado en el resto del sitio,
   no se rompe con el ancho de ventana). */

/* ── avatares circulares de personas encima del propio mapa ─────────
   esto es lo que pediste: la gente en redondo DENTRO de la captura del
   mapa, no una foto de stock por debajo. Posición en % sobre el
   .device__screen, que tiene aspect-ratio fijo (1179/2556) así que el
   punto no se mueve al cambiar el ancho de la ventana. */
.map-pin{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;z-index:5;
  box-shadow:0 0 0 2.5px #fff,0 4px 10px rgba(0,0,0,.5)}
.map-pin img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.map-pin--1{top:32%;left:28%}
.map-pin--2{top:52%;left:62%}

/* ── tarjetas flotantes de persona (foto + insignia de estado) ────────
   referencia: life360.com — burbujas con la cara real de cada miembro
   del círculo, un icono de estado superpuesto en la esquina, y una
   línea de texto al lado. Reutiliza literalmente los avisos ya
   aprobados del deep-dive de familia (docs/portada.md bloque 5), solo
   cambia el envoltorio visual. */
.people-card{position:absolute;display:flex;align-items:center;gap:.6rem;
  background:rgba(16,16,25,.92);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.4rem .9rem .4rem .4rem;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.65);opacity:0;animation:peopleCardIn .8s var(--ease) both}
.people-card__photo{position:relative;flex:none;width:2.5rem;height:2.5rem}
.people-card__photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.5)}
.people-card__badge{position:absolute;bottom:-2px;right:-2px;width:1.05rem;height:1.05rem;
  border-radius:50%;background:var(--green);border:2px solid rgba(16,16,25,1);
  display:grid;place-items:center;color:#06110a}
.people-card__badge svg{width:.6rem;height:.6rem}
.people-card b{display:block;font-size:.76rem;font-weight:800}
.people-card span{display:block;color:var(--t2);font-size:.68rem;margin-top:.05rem}
@keyframes peopleCardIn{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.people-card{animation:none;opacity:1}}
@media(max-width:900px){.people-card{display:none}}

/* ── avatares reales de personas (fotografía, no iniciales/iconos) ──── */
.people-avatars{display:flex;justify-content:center;gap:-.5rem;margin-top:1.6rem}
.people-avatars img{width:3rem;height:3rem;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--bg);margin-left:-.7rem;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.people-avatars img:first-child{margin-left:0}
.review-avatar{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;margin-bottom:.7rem;
  border:1px solid var(--line2)}

/* ── carrusel de reseñas (feedback: que se muevan, no una rejilla fija) ── */
.reviews-carousel{position:relative;margin-top:2.6rem}
.reviews-carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.reviews-carousel-track::-webkit-scrollbar{display:none}
@media(min-width:760px){.reviews-carousel-track{grid-auto-columns:calc(50% - .5rem)}}
.reviews-carousel .review{height:100%;scroll-snap-align:start}
.reviews-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.reviews-dots button{width:.5rem;height:.5rem;border-radius:50%;background:var(--line2);border:0;padding:0;
  transition:background .3s,transform .3s}
.reviews-dots button.on{background:var(--accent);transform:scale(1.3)}

/* ── botones deep-dive dentro de "Esto es Zona" ──────────────────────── */
/* cada botón vive dentro de su propia tarjeta, pegado a la explicación a la
   que corresponde, en vez de dos botones sueltos al final de la sección */
.half2-cta{display:inline-flex;margin:0 1.6rem 1.7rem}
.deep-ctas{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.deep-cta{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;
  background:var(--card);border:1px solid var(--line2);font-weight:700;font-size:.96rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.deep-cta:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--card2)}
.deep-cta svg{width:17px;height:17px;color:var(--accent);flex:none}

/* ── el origen de Zona ───────────────────────────────────────────────────
   Era la sección más plana de la web: cinco párrafos idénticos apilados en
   una columna. Lo que la sostiene es la escena de los Bunkers, así que esa
   pasa a ser una cita destacada con su hora y lugar, y el resto queda como
   texto de apoyo alrededor. */
.origen{max-width:44rem;margin-inline:auto;display:grid;gap:2rem}
.origen-col{display:grid;gap:1.1rem}
.origen-col .lede{margin-top:0;max-width:none}
.origen-cita{margin:0;padding:1.8rem 0 1.8rem 1.8rem;border-left:3px solid var(--accent);
  display:grid;gap:1rem;position:relative}
.origen-cita p{font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.5;color:var(--t1);
  letter-spacing:-.02em}
.origen-hora{display:block;font-size:.74rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t3)}
.origen-cita mark{background:none;color:var(--accent);font-weight:700}
@media(max-width:640px){.origen-cita{padding-left:1.2rem}}

/* ── decoración flotante: escudo de marca a la deriva ────────────────── */
/* z-index:0 en un elemento absoluto se pinta DESPUÉS del contenido normal
   de su mismo contexto de apilamiento — por eso el escudo tapaba el
   titular en /mapa/ (y podía tapar cualquier otro). z-index:-1 lo deja
   siempre detrás; :has() asegura que la sección donde vive quede
   posicionada para que el escudo no se salga de su sitio. */
.section:has(> .float-deco){position:relative}
.float-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.float-deco img{position:absolute;opacity:.55;animation:floatDrift 22s ease-in-out infinite}
/* En móvil el texto ocupa casi todo el ancho y las posiciones en % (pensadas
   para el hueco que deja el texto en escritorio) caen encima de los
   titulares. Es solo decoración de fondo, así que se oculta en vez de
   perseguir una posición segura en cada sección. */
@media(max-width:640px){.float-deco{display:none}}
.float-deco img:nth-child(2){animation-duration:28s;animation-delay:-6s}
.float-deco img:nth-child(3){animation-duration:19s;animation-delay:-12s}
@keyframes floatDrift{
  0%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(14px,-22px) rotate(8deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.float-deco img{animation:none}}

/* ── bolas de incidencia a la deriva ─────────────────────────────────────
   Clavadas al pin real de la app (src/screens/MapScreen.js → styles.pin):
   círculo de 34px, borde blanco de 2,5px y el emoji de la categoría dentro,
   con el color de src/data.js. Así lo que se ve en la web es exactamente lo
   que el usuario se encuentra al abrir el mapa. */
.float-cats{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:6}
.float-cat{position:absolute;width:2.6rem;height:2.6rem;border-radius:50%;
  border:2.5px solid #fff;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  background:var(--cat,var(--red));
  box-shadow:0 10px 26px -6px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25);animation:floatDrift 16s ease-in-out infinite}
.float-cat svg{width:16px;height:16px}
.float-cat:nth-child(2){animation-duration:21s;animation-delay:-4s}
.float-cat:nth-child(3){animation-duration:13s;animation-delay:-9s}
.float-cat:nth-child(4){animation-duration:24s;animation-delay:-2s}
@media(prefers-reduced-motion:reduce){.float-cat{animation:none}}
/* En móvil el device-wrap ocupa casi todo el ancho de pantalla, así que los
   mismos porcentajes que en escritorio (pensados para asomar por el borde
   del móvil) empujan la bola fuera de la pantalla. Se acercan al móvil solo
   por debajo de 480px. */
@media(max-width:480px){
  .float-cats .float-cat[aria-label="Robo"]{left:-3%!important;right:auto!important}
  .float-cats .float-cat[aria-label="Incendio"]{left:auto!important;right:-3%!important}
}

/* ── programa de creadores (/creadores/{id}-{token}) ─────────────────────
   Página de propuesta personalizada. Se genera estática con
   scripts/build-creadores.js a partir de docs/creadores.json (fuera de
   publicar-v2/, para no publicar los datos de cada creador).

   Reescrita el 22-09-2026 con el criterio del founder: portada aspiracional
   como la de la web, calculadora por suscriptores (fuera el embudo, que
   enseñaba cifras enormes arriba y pocas abajo), el asterisco del ingreso
   neto desde la primera pantalla y 12 meses de comisión. Todo con las piezas
   que ya existen en esta hoja: ni un color nuevo, ni una sombra dura. */

/* ── portada ── */
.cr-portada{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden}
/* Un solo resplandor muy tenue detrás del titular. Es lo único que separa
   esta portada de una página de texto; con dos ya sería una mancha. */
.cr-portada-luz{position:absolute;top:-30%;left:50%;width:min(120vw,1100px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);
  filter:blur(40px)}
.cr-portada .wrap{position:relative;z-index:1}
/* Dos columnas como el hero de la portada: el texto a la izquierda y la app
   a la derecha. El teléfono es lo que hace que se entienda de qué va esto
   antes de leer una sola línea. */
.cr-portada-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
.cr-portada-art{position:relative}
.cr-portada h1{max-width:15ch;margin-top:.6rem;font-size:clamp(2.8rem,7.4vw,5rem)}
/* El nombre es lo primero que tiene que ver quien abre esto: va en grande,
   no como un renglón de cortesía. */
.cr-hello{color:var(--t1);font-weight:800;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.6rem,3.4vw,2.4rem);margin-top:1.6rem}
@media(max-width:900px){
  .cr-portada-split{grid-template-columns:1fr;gap:2.5rem}
  .cr-portada-art{order:-1;max-width:17rem;margin-inline:auto}
  .cr-portada{min-height:0;padding-top:calc(var(--pad) + 1rem)}
}
.cr-portada .lede{max-width:42ch;margin-top:1.2rem}
.cr-portada .lede b{color:var(--t1);font-weight:800}
.cr-ast{color:var(--accent);text-decoration:none;font-weight:800;padding-left:.15rem}
.cr-ast-nota{color:var(--t3);font-size:.84rem;line-height:1.5;margin-top:.6rem;max-width:46ch}
.cr-portada .cr-hero-stats{margin-top:1.6rem}
.cr-portada .cr-cta{margin-top:1.8rem}
/* Portadas cortas (portátil con la ventana no maximizada): comprime el
   ritmo vertical para que el CTA quede siempre visible sin hacer scroll,
   en vez de dejar que el contenido se salga de la pantalla. */
@media(min-width:901px) and (max-height:800px){
  .cr-portada h1{margin-top:.2rem;font-size:clamp(2.3rem,4.6vw,3.2rem)}
  .cr-portada .lede{margin-top:.7rem}
  .cr-ast-nota{margin-top:.3rem}
  .cr-portada .cr-hero-stats{margin-top:.9rem}
  .cr-portada .cr-hero-stats b{font-size:clamp(1.1rem,2vw,1.4rem)}
  .cr-portada .cr-cta{margin-top:.9rem;min-height:46px}
}

.cr-p{color:var(--t2);font-size:1.0625rem;line-height:1.6;max-width:62ch;text-wrap:pretty}
.cr-p + .cr-p{margin-top:1.1rem}
.cr-p b{color:var(--t1);font-weight:700}

/* ── secciones a dos columnas (texto + card) para que la página use el
   ancho del wrap en vez de quedarse pegada a la izquierda con todo el
   hueco a la derecha ── */
/* align-items:start, no center: con "center", cuando la tarjeta de la
   derecha (la calculadora) crece al mover el deslizador a números
   grandes, la fila entera crece y el texto de la izquierda —más corto—
   se desplaza hacia abajo para seguir centrado en esa fila más alta.
   Con "start" el texto se queda fijo arriba y solo la tarjeta crece
   hacia abajo, que es lo único que debe moverse. */
.cr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.4rem}
@media(max-width:820px){.cr-split{grid-template-columns:1fr;gap:2rem}}
.cr-split .cr-calc,.cr-split .cr-fine{margin-top:0;max-width:none;min-width:0}
.cr-split .cr-list{margin-top:0;max-width:none}
.cr-split .cr-p,.cr-split .note{max-width:none}

/* ── 35% vs el resto (bento comparativo) ── */
.cr-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6rem;
  margin-top:2.4rem;max-width:58rem}
.cr-vs-card{display:flex;flex-direction:column;gap:.5rem;padding:1.8rem 1.6rem;
  border-radius:20px;border:1px solid var(--line);background:var(--card)}
.cr-vs-card--nosotros{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--card)) 0%,var(--card) 100%);
  box-shadow:0 16px 44px -28px color-mix(in srgb,var(--accent) 60%,transparent)}
.cr-vs-tag{color:var(--t3);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.cr-vs-cifra{font-size:clamp(2rem,5vw,2.6rem);font-weight:900;letter-spacing:-.03em;color:var(--t1)}
.cr-vs-card--nosotros .cr-vs-cifra{color:var(--accent)}
.cr-vs-pie{color:var(--t3);font-size:.84rem;line-height:1.4}
.cr-vs-sep{color:var(--t3);font-size:.82rem;font-weight:700;text-transform:uppercase}
@media(max-width:640px){
  .cr-vs{grid-template-columns:1fr;gap:1rem}
  .cr-vs-sep{justify-self:center}
}

/* ── stats de la portada ── */
.cr-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  margin-top:2.2rem;max-width:34rem}
.cr-hero-stats div{display:flex;flex-direction:column;gap:.25rem}
.cr-hero-stats b{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:900;letter-spacing:-.03em;
  color:var(--t1);font-variant-numeric:tabular-nums}
.cr-hero-stats span{color:var(--t3);font-size:.76rem;line-height:1.35}
@media(max-width:560px){.cr-hero-stats{grid-template-columns:1fr 1fr 1fr;gap:.8rem}}

/* ── la calculadora ── */
.cr-calc{margin-top:2.6rem;max-width:44rem;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:clamp(1.5rem,3.4vw,2.4rem)}
.cr-calc--glow{position:relative;border-color:var(--line2);
  background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,var(--accent) 7%,var(--card)) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 20px 60px -30px color-mix(in srgb,var(--accent) 55%,transparent)}
.cr-calc-label{color:var(--t2);font-size:.98rem;margin:0}
.cr-calc-subs{color:var(--t1);font-weight:800;font-variant-numeric:tabular-nums}
.cr-calc-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;margin-top:1.4rem}
.cr-calc-cifra{display:block;font-weight:900;letter-spacing:-.035em;line-height:1.15;
  font-size:clamp(1rem,1.9vw,1.35rem);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.cr-calc-cifra--on{color:var(--accent)}
.cr-calc-pie{display:block;color:var(--t3);font-size:.8rem;margin-top:.4rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.cr-calc-nota{color:var(--t3);font-size:.82rem;margin:1rem 0 0}
.cr-calc-disclaimer{color:var(--t3);font-size:.76rem;margin:.5rem 0 0;opacity:.8}
@media(max-width:560px){
  .cr-calc-res{grid-template-columns:1fr;gap:1.1rem}
}

/* ── panel del creador (/creadores/panel/) y su vista previa en la web
   pública — mismas clases para las dos, así lo que se enseña de ejemplo
   es pixel a pixel lo que de verdad se ve al entrar ── */
.cr-dash-links{display:grid;gap:.8rem;max-width:38rem}
.cr-dash-link{display:flex;align-items:center;gap:.8rem;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;flex-wrap:wrap}
.cr-dash-link span{color:var(--t3);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto;min-width:9rem}
.cr-dash-link code{flex:1;font-size:.92rem;overflow-wrap:anywhere}
.cr-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:2rem}
.cr-dash-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1rem}
.cr-dash-stat b{display:block;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;
  letter-spacing:-.03em;color:var(--t1);font-variant-numeric:tabular-nums}
.cr-dash-stat span{display:block;color:var(--t3);font-size:.78rem;margin-top:.35rem;line-height:1.3}
/* cifras dentro del pie ("el <35>% de <X €>"): en línea, no en bloque — si
   no, cada número partía el texto en una línea propia (como en la vista
   previa de /afiliados/, que no lleva spans anidados). */
.cr-dash-stat span span{display:inline;margin:0}
/* la tarjeta que muestra el corte del 35% se marca en rojo, para que salte
   a la vista que ese número es literalmente su comisión, no otro dato más */
.cr-dash-stat--accent{background:color-mix(in srgb,var(--red) 12%,var(--card));border-color:var(--red)}
.cr-dash-stat--accent b{color:var(--red)}
@media(max-width:760px){.cr-dash-stats{grid-template-columns:1fr 1fr}}

/* gráfico mensual de la vista previa del panel — barras simples en CSS
   (nada de librería de gráficos para un ejemplo ilustrativo). Cada barra usa
   su propia variable --h (0-100%) para la altura dentro de un carril fijo. */
.cr-dash-chart{margin-top:1.6rem;background:var(--card2);border:1px solid var(--line);
  border-radius:14px;padding:1.2rem 1.1rem}
.cr-dash-chart .cr-calc-label{margin-bottom:1rem}
/* Una fila por mes en vez de una barra estrecha: con "cobrado"/"pendiente,
   cobro estimado el día X" el texto es demasiado largo para caber debajo de
   una columna de barras sin desbordar (lo comprobamos y se salía). La franja
   de color de fondo (--w, 0-100%) da la sensación de gráfico sin ese problema. */
/* 13.99 — el founder quiere el gráfico de lo cobrado en COLUMNAS verticales,
   no en barras horizontales: una columna por mes, el importe encima y el mes
   debajo. La altura la pone panel.js en píxeles (--h), no en %, porque la
   columna vive dentro de un flex y un % no tendría contra qué medirse. */
.cr-dash-bars{display:flex;align-items:flex-end;gap:.7rem;padding-top:.6rem;overflow-x:auto}
.cr-dash-bar{flex:1 1 0;min-width:3.6rem;display:flex;flex-direction:column;align-items:center;
  gap:.45rem;background:none;padding:0;border-radius:0;overflow:visible;position:static}
.cr-dash-col{display:block;width:100%;max-width:4.5rem;height:var(--h,20px);border-radius:10px 10px 5px 5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 80%,transparent),color-mix(in srgb,var(--red) 28%,transparent))}
.cr-dash-bar span{font-size:.92rem;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-dash-bar small{font-size:.72rem;color:var(--t3);text-align:center;line-height:1.3;white-space:pre-line}
.cr-dash-bar--pendiente .cr-dash-col{background:transparent;border:1.5px dashed var(--red)}
.cr-dash-bar--pendiente span{color:var(--t2)}
.cr-dash-check{color:var(--green);font-style:normal;font-weight:900}
.cr-dash-pagos{display:flex;flex-direction:column;gap:.5rem;max-width:38rem}
.cr-dash-pago{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--line);padding:.6rem 0;color:var(--t2);font-size:.92rem}
.cr-dash-pago span:first-child{color:var(--t1);font-weight:700;text-transform:capitalize}
.cr-dash-preview{position:relative;border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.6rem,3.4vw,2.6rem);background:var(--card);overflow:hidden}
.cr-dash-preview-badge{position:absolute;top:1rem;right:1rem;background:var(--card2);
  border:1px solid var(--line2);border-radius:999px;padding:.3rem .8rem;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}

/* deslizador — 2,75rem de alto para que la zona pulsable pase de 44px.
   Se dibuja a mano en vez de dejarlo en accent-color: el carril por defecto
   de Chrome es gris casi blanco y sobre fondo negro se convertía en la línea
   más luminosa de la página. El relleno rojo lo fija el script con la
   variable --fill (sin JavaScript el deslizador no se enseña, así que no hay
   estado intermedio que cuidar). */
.cr-slider{margin-top:1.8rem}
.cr-slider input[type="range"]{width:100%;height:2.75rem;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;--fill:0%}
.cr-slider input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--red) var(--fill),var(--line2) var(--fill))}
.cr-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--red)}
.cr-slider input[type="range"]::-moz-range-track{height:4px;border-radius:999px;background:var(--line2)}
.cr-slider input[type="range"]::-moz-range-progress{height:4px;border-radius:999px;background:var(--red)}
.cr-slider input[type="range"]::-moz-range-thumb{width:24px;height:24px;border:0;
  border-radius:50%;background:var(--red)}
.cr-slider input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cr-slider-ends{display:flex;justify-content:space-between;color:var(--t3);
  font-size:.78rem;font-variant-numeric:tabular-nums}

/* ── composición de teléfonos (build.md 2.3) ── */
.cr-devices{display:flex;align-items:center;justify-content:center;gap:0;
  margin-top:3.2rem;position:relative}
/* Cada teléfono ocupa EXACTAMENTE su ancho: .device trae width:min(100%,--w)
   y margin-inline:auto, pensados para ir solo en su columna. Dentro de una
   composición eso los estira hasta los bordes y los separa media pantalla. */
.cr-device{flex:0 0 auto;width:fit-content}
.cr-devices .device{margin-inline:0;width:var(--w)}
.cr-device--centro{z-index:2}
/* Los .device traen margin-inline:auto, así que sin el margen negativo los
   teléfonos salen separados y parecen capturas sueltas, no una composición. */
.cr-device--lado{z-index:1;transform:rotate(5deg) scale(.82);filter:brightness(.88);
  margin-left:-3rem}
.cr-device--izq{transform:rotate(-5deg) scale(.82);margin-left:0;margin-right:-3rem}
@media(max-width:760px){
  .cr-devices{margin-top:2.4rem}
  .cr-device--lado{margin-left:-3rem;transform:rotate(6deg) scale(.74)}
  .cr-device--izq{margin-left:0;margin-right:-2rem;transform:rotate(-6deg) scale(.74)}
  .cr-devices .device{--w:200px}
  .cr-devices .device--sm{--w:170px}
}
@media(max-width:420px){
  .cr-devices .device{--w:150px}
  .cr-devices .device--sm{--w:126px}
}

/* ── FAQ (sin letra pequeña) — <details>/<summary> nativos, sin JS ── */
.cr-faq{margin-top:2.4rem;max-width:52rem;border-top:1px solid var(--line)}
.cr-faq-item{border-bottom:1px solid var(--line)}
.cr-faq-item summary{list-style:none;cursor:pointer;padding:1.2rem 2rem 1.2rem 0;
  position:relative;font-size:1.02rem;font-weight:700;color:var(--t1)}
.cr-faq-item summary::-webkit-details-marker{display:none}
.cr-faq-item summary::after{content:"+";position:absolute;right:0;top:1.1rem;
  font-size:1.3rem;font-weight:400;color:var(--t3);line-height:1}
.cr-faq-item[open] summary::after{content:"–"}
.cr-faq-item p{color:var(--t2);font-size:.97rem;line-height:1.6;max-width:62ch;
  text-wrap:pretty;margin:0 0 1.3rem}

/* ── llamadas a la acción ── */
.cr-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.95rem 2.2rem;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin-top:2.6rem;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.cr-cta:hover{transform:translateY(-1px);background:#ff4368}
.cr-cta--ghost{background:transparent;color:var(--t1);border:1px solid var(--line2);
  min-height:44px;padding:.75rem 1.6rem;font-size:.94rem;margin-top:1.4rem}
.cr-cta--ghost:hover{background:var(--card);border-color:var(--accent);transform:none}
.cr-contact{color:var(--t2);font-size:.95rem;margin-top:2.4rem;line-height:1.7}
.cr-contact a{color:var(--t1);border-bottom:1px solid var(--line2);padding-bottom:.1rem}
.cr-contact a:hover{border-bottom-color:var(--accent)}
.cr-sep{color:var(--t3);padding:0 .5rem}

/* barra fija de teléfono: el botón del final queda a seis pantallazos de
   scroll, y quien se convence a la mitad no tenía dónde pulsar */
.cr-fija{position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(6,6,11,.86);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);display:none}
.cr-fija .cr-cta{margin-top:0;width:100%}
@media(max-width:820px){
  .cr-fija:not([hidden]){display:block}
  body:has(.cr-fija) main{padding-bottom:5.5rem}
}

/* ── programa de creadores: pasos y formulario (13.74) ────────────────────
   Pivote del 22-09-2026: fuera la propuesta personalizada por creador, esta
   es LA página pública, igual para todos, con un formulario de alta real al
   final. Mismos tokens de siempre — ni un color nuevo. */

.cr-pasos{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cr-pasos{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}}
@media(max-width:560px){.cr-pasos{grid-template-columns:1fr}}
.cr-pasos li{display:flex;flex-direction:column;gap:.9rem}
.cr-paso-num{display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);color:var(--accent);font-weight:800;
  font-size:1.05rem;font-variant-numeric:tabular-nums}
.cr-pasos h3{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
.cr-pasos p{color:var(--t2);font-size:.94rem;line-height:1.5;max-width:26ch}

.cr-form-wrap{max-width:34rem}
.cr-form{margin-top:2.4rem;display:grid;gap:1.2rem}
.cr-form-row{display:grid;gap:.5rem}
.cr-form-row[hidden]{display:none}
.cr-form-nota{color:var(--t3);font-size:.8rem;line-height:1.4;margin:-.4rem 0 0}
.cr-form-row label{font-size:.82rem;font-weight:700;color:var(--t2)}
.cr-form-row input{background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:.85rem 1rem;color:var(--t1);font:inherit;font-size:1rem;width:100%}
.cr-form-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--accent)}
.cr-form-row select{background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:.85rem 1rem;color:var(--t1);font:inherit;font-size:1rem;width:100%;
  -webkit-appearance:none;appearance:none}
.cr-form-row select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--accent)}
.cr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:560px){.cr-form-grid{grid-template-columns:1fr}}

.cr-tipo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
@media(max-width:560px){.cr-tipo-grid{grid-template-columns:1fr}}
.cr-tipo-opt{display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:.9rem .6rem;cursor:pointer;text-align:center;font-size:.92rem;
  font-weight:600;color:var(--t2);transition:border-color .15s,color .15s,background .15s}
.cr-tipo-opt input{position:absolute;opacity:0;width:0;height:0}
.cr-tipo-opt:has(input:checked){border-color:var(--accent);color:var(--t1);
  background:color-mix(in srgb, var(--accent) 12%, var(--card))}
.cr-tipo-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.cr-social-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.cr-social-grid{grid-template-columns:1fr}}
.cr-social-field{display:flex;align-items:center;background:var(--card);
  border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.cr-social-field:focus-within{outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--accent)}
.cr-social-ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.85rem;color:var(--t3);font-size:.72rem;font-weight:800;
  letter-spacing:.02em;border-right:1px solid var(--line2)}
.cr-social-field input{border:0!important;border-radius:0!important;background:transparent!important}

.cr-phone-row{display:grid;grid-template-columns:minmax(9.5rem,13rem) 1fr;gap:.7rem}
.cr-phone-row input{min-width:0}
.cr-phone-row .cr-combo{min-width:0}
@media(max-width:480px){.cr-phone-row{grid-template-columns:1fr}}

/* ── combobox de país / prefijo (buscable, con lista propia) ── */
.cr-combo{position:relative}
.cr-combo-list{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:20;
  max-height:15rem;overflow-y:auto;margin:0;padding:.4rem;list-style:none;
  background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5)}
.cr-combo-list li{padding:.6rem .8rem;border-radius:9px;font-size:.92rem;
  color:var(--t1);cursor:pointer}
.cr-combo-list li:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* honeypot: existe en el DOM y es tabulable-cero para una persona, pero un
   bot que rellena todos los campos de un formulario lo rellena también */
.cr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cr-check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer}
.cr-check input{margin-top:.2rem;width:1.15rem;height:1.15rem;accent-color:var(--accent);
  flex:none}
.cr-check span{color:var(--t2);font-size:.88rem;line-height:1.5}
.cr-check a{color:var(--t1);border-bottom:1px solid var(--line2)}

.cr-form-submit{width:100%;margin-top:.4rem}
.cr-form-submit:disabled{opacity:.6;cursor:default}
.cr-form-error{color:#ff6b81;font-size:.9rem;margin:0;padding:.8rem 1rem;
  background:rgba(255,45,85,.09);border-radius:10px;border:1px solid rgba(255,45,85,.3)}

.cr-form-ok{margin-top:2.4rem;padding:2.4rem 1.5rem;text-align:center;background:var(--card);
  border:1px solid var(--line2);border-radius:20px}
.cr-form-ok svg{color:var(--green);margin:0 auto 1rem}
.cr-form-ok h3{font-size:1.2rem;font-weight:800;margin-bottom:.6rem}
.cr-form-ok p{color:var(--t2);font-size:.95rem;line-height:1.5;max-width:32ch;margin-inline:auto}

/* ── Equipos de afiliados (oct-2026) — "Monta tu equipo" en /afiliados/, el
   aviso de invitación del formulario y la tabla del equipo en el panel. La
   vista previa de la web y el panel real usan las MISMAS clases
   (cr-equipo-*), igual que cr-dash-*: lo que se promete es lo que se ve. ── */
.cr-equipo-ej{display:flex;flex-direction:column;gap:.2rem;margin-top:1.2rem}
.cr-equipo-ej-fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--line)}
.cr-equipo-ej-fila span{color:var(--t2);font-size:.92rem;line-height:1.4}
.cr-equipo-ej-fila small{display:block;color:var(--t3);font-size:.76rem;margin-top:.15rem}
.cr-equipo-ej-fila b{color:var(--t1);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-equipo-ej-fila--total{border-bottom:0;padding-top:1rem}
.cr-equipo-ej-fila--total span{color:var(--t1);font-weight:700}
.cr-equipo-ej-fila--total b{color:var(--accent);font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.03em}
.cr-equipo-reglas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:2.2rem;max-width:58rem}
.cr-equipo-regla{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.cr-equipo-regla b{display:block;color:var(--t1);font-size:.95rem;margin-bottom:.3rem}
.cr-equipo-regla span{color:var(--t3);font-size:.84rem;line-height:1.45}
@media(max-width:640px){.cr-equipo-reglas{grid-template-columns:1fr}}
.cr-invitado{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.4rem;padding:1rem 1.1rem;
  border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.cr-invitado[hidden]{display:none}
.cr-invitado p{margin:0;color:var(--t2);font-size:.92rem;line-height:1.5}
.cr-invitado b{color:var(--t1)}
.cr-equipo-nota{margin-top:1.6rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.cr-equipo-nota[hidden],.cr-equipo[hidden],.cr-equipo-tabla[hidden]{display:none}
.cr-equipo-tabla{margin-top:1.2rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:46rem}
.cr-equipo-fila{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:.6rem;
  padding:.7rem 1rem;border-top:1px solid var(--line);color:var(--t2);font-size:.9rem;font-variant-numeric:tabular-nums}
.cr-equipo-fila span{overflow-wrap:anywhere}
.cr-equipo-fila span:not(:first-child){text-align:right}
.cr-equipo-fila--cab{border-top:0;background:var(--card2);color:var(--t3);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em}
.cr-equipo-fila--total{color:var(--t1);font-weight:800;background:var(--card2)}
.cr-equipo-fila--total span:last-child{color:var(--red)}
@media(max-width:560px){.cr-equipo-fila{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));font-size:.8rem;padding:.6rem .7rem}}

/* ── 13.99 · capturas reales como iPhone de verdad, grandes y con perspectiva ──
   El founder: "no quiero pantallazos con puntas cuadradas ni enanos; mockups
   de iPhone, inclinados, que se lea el texto". Todas las capturas de la web
   pasan por .device (marco, isla, brillo) con estos tamaños; .fam-shot y
   .half2-shot dejan de ser cajas 4:3 / 16:10 con la captura encajada dentro
   (salía a un 30-45 % del ancho, ilegible). */
.device--xl{--w:400px}
.shot-tilt{perspective:1600px;perspective-origin:50% 40%}
.device--tilt{transform:rotateY(-13deg) rotateX(3deg) rotateZ(1.5deg);transform-style:preserve-3d;
  transition:transform .8s var(--ease)}
.device--tilt-l{transform:rotateY(13deg) rotateX(3deg) rotateZ(-1.5deg)}
.shot-tilt:hover .device--tilt{transform:rotateY(-6deg) rotateX(1.5deg) rotateZ(.5deg)}
.shot-tilt:hover .device--tilt-l{transform:rotateY(6deg) rotateX(1.5deg) rotateZ(-.5deg)}
@media(prefers-reduced-motion:reduce){.device--tilt,.device--tilt-l{transition:none}}
/* el brillo del cristal más marcado cuando el móvil está girado */
.device--tilt .device__glare,.device--tilt-l .device__glare{background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,transparent 50%)}
/* /familia/ y /mapa/: la captura ocupa la columna entera */
.fam-shot.fam-shot--phone{aspect-ratio:auto;background:none;border:0;border-radius:0;overflow:visible;
  padding:1.2rem 0 2.2rem;display:flex;justify-content:center}
.fam-shot--phone .device-wrap{width:100%}
.fam-shot--phone .device{--w:min(100%,400px)}
/* portada · "Esto es Zona": el móvil asoma desde el borde inferior de la tarjeta */
.half2-shot.half2-shot--phone{aspect-ratio:auto;height:auto;padding:2.2rem 1.6rem 0;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--accent) 22%,#0c0e18),#0c0e18 70%)}
.half2-shot--phone .device{--w:min(100%,340px);margin-bottom:-22%}
.half2-shot--phone .device-wrap{mask-image:linear-gradient(#000 72%,rgba(0,0,0,.35) 92%,transparent);
  -webkit-mask-image:linear-gradient(#000 72%,rgba(0,0,0,.35) 92%,transparent)}
/* secciones split con captura (Imagina…, SOS, Zonas): más grande que antes */
.split-art .device--sm{--w:300px}
.split-art .device--lg{--w:min(100%,420px)}
.split-art .device--xl{--w:min(100%,420px)}
.page-hero .device--lg,.page-hero .device--hero{--w:min(380px,50vh)}
.page-hero .device:not(.device--lg):not(.device--hero){--w:min(380px,50vh)}
/* la cabecera también en perspectiva, un poco menos girada que el resto */
.page-hero .device{transform:rotateY(-9deg) rotateX(2deg) rotateZ(1deg);transform-style:preserve-3d}
.page-hero .device-wrap{perspective:1800px;perspective-origin:50% 40%}
@media(max-width:900px){.page-hero .device{transform:rotateY(-5deg) rotateX(1.5deg)}}
@media(min-width:900px){.device--hero{--w:min(340px,48vh)}}
@media(max-width:900px){
  .device--tilt,.device--tilt-l,.shot-tilt:hover .device--tilt,.shot-tilt:hover .device--tilt-l{transform:rotateY(-6deg) rotateX(2deg)}
  .split-art .device--lg,.split-art .device--xl{--w:min(78vw,360px)}
  .fam-shot--phone .device{--w:min(78vw,360px)}
}
@media(max-width:640px){
  .device--hero,.page-hero .device--hero,.page-hero .device--lg{--w:min(62vw,240px)}
  .half2-shot--phone .device{--w:min(80%,300px)}
  .split-art .device--sm{--w:min(70vw,260px)}
}
/* móvil · el botón blanco "Empezar · 7 días gratis" heredaba min-width:180px
   de .store y se salía de su columna en la tabla comparativa */
.zp-cta,.zp-compare-head .zp-cta{min-width:0}
.zp-compare{grid-template-columns:minmax(9rem,1.3fr) repeat(3,minmax(0,1fr))}
@media(max-width:640px){.zp-compare-head .zp-cta{padding:.5rem .6rem}.zp-compare-head .zp-cta b{font-size:.76rem}}