/* ScreenPact · landing. Mismos tokens que la app (app/src/main/.../ui/theme): todo valor de
   color, tipo, espacio y forma sale de :root. Página en oscuro a propósito: la marca es oscura
   y la pantalla de bloqueo amarilla es el elemento firma. */

@font-face { font-family: 'SP Bricolage'; src: url('/fonts/sp-bricolage.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'SP Figtree'; src: url('/fonts/sp-figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'SP Mono'; src: url('/fonts/sp-jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;
  /* Color (idénticos a Sp.* en la app) */
  --tinta: #171A33;
  --superficie: #22264A;
  --linea: #2C3160;
  --borde: #3A3F6E;
  --niebla: #F4F5FA;
  --suave: #A9AEC9;
  --llave: #FFC23D;
  --pacto: #6FD9B8;
  --aviso: #FF7A6B;
  --llave-hover: #FFD066;
  --marco: #0D0F1F;      /* borde del móvil en las capturas */
  --placeholder: #5D6280;
  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");

  /* Tipo */
  --f-display: 'SP Bricolage', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'SP Figtree', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'SP Mono', ui-monospace, Consolas, monospace;
  --t-hero: clamp(2.6rem, 7vw, 4.6rem);
  --t-h2: clamp(1.9rem, 4.2vw, 2.9rem);
  --t-h3: 1.3rem;
  --t-lead: 1.2rem;
  --t-body: 1.05rem;
  --t-small: 0.9rem;

  /* Espacio (misma escala que Space en la app) */
  --s-xxs: 4px; --s-xs: 8px; --s-s: 12px; --s-m: 16px; --s-l: 20px; --s-xl: 24px;
  --s-xxl: 32px; --s-xxxl: 40px; --s-huge: 56px; --s-hero: 72px;
  --section: clamp(72px, 10vw, 128px);
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1160px;

  /* Forma */
  --r-card: 16px; --r-field: 12px; --r-pill: 999px; --r-phone: 34px;
  --touch: 48px; --button: 56px;
  --hairline: 1px; --bold: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--tinta); color: var(--niebla); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--llave); }
:focus-visible { outline: var(--bold) solid var(--llave); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
h2 { font-weight: 800; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-weight: 700; font-size: var(--t-h3); line-height: 1.25; }
p { margin: 0; }
.muted { color: var(--suave); }
.key { color: var(--llave); }

/* ── Botones (una sola familia) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button); padding-inline: var(--s-xxl); border-radius: var(--r-pill); font: 600 1.05rem/1 var(--f-body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--llave); color: var(--tinta); }
.btn--primary:hover { background: var(--llave-hover); }
.btn--primary:disabled { background: var(--superficie); color: var(--suave); cursor: default; }
.btn--ghost { color: var(--niebla); border: var(--hairline) solid var(--borde); background: transparent; }
.btn--ghost:hover { border-color: var(--suave); }

/* ── Cabecera ── */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--tinta) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--hairline) solid var(--linea); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s-m); }
.brand { display: inline-flex; align-items: center; gap: var(--s-s); color: var(--niebla); text-decoration: none; font: 800 1.2rem var(--f-display); letter-spacing: -0.02em; }
.brand svg { width: 34px; height: 34px; }
.top .btn { min-height: 44px; padding-inline: var(--s-xl); font-size: .95rem; }

/* ── Hero ── */
.hero { padding-block: var(--s-huge) var(--section); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-huge); align-items: center; }
.hero h1 { font-weight: 800; font-size: var(--t-hero); line-height: .98; letter-spacing: -0.045em; }
.hero .lead { margin-top: var(--s-xl); font-size: var(--t-lead); color: var(--suave); max-width: 34ch; }
.hero .actions { margin-top: var(--s-xxxl); display: flex; flex-wrap: wrap; gap: var(--s-s); }
.hero .phone { justify-self: center; transform: rotate(3deg); }

/* ── Teléfono y pantallas (réplicas de la app) ── */
.phone { position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 20; border-radius: var(--r-phone); padding: 6px; background: var(--marco); box-shadow: 0 0 0 var(--hairline) var(--borde), 0 30px 80px rgb(0 0 0 / .45); container-type: inline-size; flex: none; }
/* Cámara perforada, centrada como en la mayoría de Android. */
.phone::before { content: ""; position: absolute; top: calc(6px + 2.6cqi); left: 50%; width: 3.6cqi; height: 3.6cqi; margin-left: -1.8cqi; border-radius: 50%; background: var(--marco); z-index: 2; }
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--r-phone) - 6px); overflow: hidden; background: var(--tinta); color: var(--niebla); display: flex; flex-direction: column; font-size: 4.6cqi; line-height: 1.4; }
.screen--block { background: var(--llave); color: var(--tinta); }
/* Barra de gestos de Android, en todas las pantallas. */
.screen::after { content: ""; position: absolute; bottom: 2cqi; left: 50%; width: 30cqi; height: 1.2cqi; margin-left: -15cqi; border-radius: var(--r-pill); background: currentColor; opacity: .55; }
.screen .body { flex: 1; display: flex; flex-direction: column; padding: 5cqi 7cqi 9cqi; min-height: 0; }

/* Barra de estado de Android: hora a la izquierda, cobertura, wifi y batería a la derecha. */
.sbar { display: flex; justify-content: space-between; align-items: center; padding: 3cqi 7cqi 0; height: 9cqi; font: 600 3.8cqi/1 var(--f-body); }
.sbar .icons { display: flex; gap: 1.4cqi; align-items: center; }
.sbar .icons i { width: 3.8cqi; height: 3.8cqi; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.sbar .i-signal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22h20V2z'/%3E%3C/svg%3E"); }
.sbar .i-wifi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 0 7.5C3.3 4.7 7.5 3 12 3s8.7 1.7 12 4.5z'/%3E%3C/svg%3E"); }
.sbar .i-battery { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 1h6v2h2.5c.8 0 1.5.7 1.5 1.5v17c0 .8-.7 1.5-1.5 1.5h-11C5.7 23 5 22.3 5 21.5v-17C5 3.7 5.7 3 6.5 3H9z'/%3E%3C/svg%3E"); }

/* Barra de pestañas de la app (Hoy, Límites, Amigos). */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--hairline) solid var(--linea); padding: 2.6cqi 0 7cqi; font-size: 3.2cqi; color: var(--suave); text-align: center; }
.tabs span { display: grid; justify-items: center; gap: 1cqi; }
.tabs span::before { content: ""; width: 5.4cqi; height: 5.4cqi; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tabs .on { color: var(--llave); font-weight: 600; }
.tabs .t-hoy { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.tabs .t-limites { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
.tabs .t-amigos { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='16.5' cy='9' r='3'/%3E%3Cpath d='M2 19c0-3.3 3-5.5 7-5.5s7 2.2 7 5.5zM15 13.6c3.6-.4 7 1.4 7 4.4v1h-5c0-2-.7-3.9-2-5.4z'/%3E%3C/svg%3E"); }

/* Réplica de la pantalla Límites. */
.screen .note { display: flex; gap: 2.4cqi; margin-top: 4cqi; font-size: 3.8cqi; color: var(--suave); }
.screen .note::before { content: ""; flex: none; width: 4.4cqi; height: 4.4cqi; margin-top: .6cqi; background: var(--llave); -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }
.screen .chip { margin-left: auto; border: var(--hairline) solid var(--borde); border-radius: var(--r-pill); padding: 2cqi 4.4cqi; font-size: 3.8cqi; }
.screen .dots { width: 1cqi; height: 4.4cqi; background: radial-gradient(circle, var(--suave) 45%, transparent 50%) 0 0 / 1cqi 1.6cqi repeat-y; margin-left: 2cqi; }
.screen .add { margin-top: 3cqi; border: .5cqi solid var(--borde); border-radius: 4cqi; padding-block: 3.8cqi; text-align: center; font-weight: 600; }
.screen .pro { margin-top: 4cqi; text-align: center; font-size: 3.8cqi; color: var(--suave); }

.screen .s-eyebrow { font-weight: 600; font-size: 4.4cqi; }
.screen .s-title { font: 800 11cqi/1 var(--f-display); letter-spacing: -.04em; margin-top: 4cqi; }
.screen .s-h { font: 800 9cqi/1 var(--f-display); letter-spacing: -.03em; }
.screen .s-ask { font: 800 7.4cqi/1.1 var(--f-display); margin-top: 1cqi; }
.screen .grow { flex: 1; }
.screen .digits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2cqi; margin-top: 4cqi; }
.screen .digits span { aspect-ratio: 3 / 4; border-radius: 3cqi; display: grid; place-items: center; font: 700 7cqi var(--f-mono); }
.screen .digits .on { background: var(--tinta); color: var(--llave); }
.screen .digits .off { border: .6cqi solid var(--tinta); }
.screen .s-btn { margin-top: 5cqi; border-radius: var(--r-pill); padding-block: 4.4cqi; text-align: center; font-weight: 600; }
.screen--block .s-btn { background: var(--tinta); color: var(--llave); }
.screen .card { background: var(--superficie); border-radius: 4cqi; padding: 4.6cqi 5cqi; display: flex; align-items: center; gap: 3.6cqi; margin-top: 5cqi; }
.screen .avatar { width: 11cqi; height: 11cqi; border-radius: 50%; background: var(--llave); color: var(--tinta); display: grid; place-items: center; font: 800 5cqi var(--f-display); flex: none; }
.screen .row { margin-top: 6cqi; }
.screen .row-top { display: flex; justify-content: space-between; font-size: 4.2cqi; }
.screen .bar { height: 2.6cqi; border-radius: 9cqi; background: var(--superficie); margin-top: 2cqi; overflow: hidden; }
.screen .bar i { display: block; height: 100%; border-radius: inherit; background: var(--niebla); }
.screen .bar i.hot { background: var(--llave); }
.screen .ring { width: 66cqi; aspect-ratio: 1; margin: 10cqi auto 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--llave) 0 60%, var(--superficie) 60% 100%); position: relative; }
.screen .ring::before { content: ""; position: absolute; inset: 2.2cqi; border-radius: 50%; background: var(--tinta); }
.screen .ring div { position: relative; text-align: center; }
.screen .code { font: 700 9.5cqi var(--f-mono); letter-spacing: .1em; color: var(--llave); }

/* ── Secciones ── */
.section { padding-block: var(--section); }
.section + .section { border-top: var(--hairline) solid var(--linea); }
.why .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-huge); align-items: end; }
.why p { font-size: var(--t-lead); color: var(--suave); max-width: 46ch; }

.steps { list-style: none; margin: var(--s-huge) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-xl); counter-reset: paso; }
.steps li { counter-increment: paso; background: var(--superficie); border-radius: var(--r-card); padding: var(--s-xxl) var(--s-xl); display: grid; gap: var(--s-s); align-content: start; }
.steps li::before { content: counter(paso); width: 40px; height: 40px; border-radius: var(--r-field); background: var(--tinta); color: var(--llave); display: grid; place-items: center; font: 800 1.1rem var(--f-display); }
.steps p { color: var(--suave); }

.gallery { margin-top: var(--s-huge); display: flex; gap: var(--s-xxl); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-m); }
.gallery figure { margin: 0; scroll-snap-align: start; display: grid; gap: var(--s-m); justify-items: center; }
.gallery .phone { width: 240px; }
.gallery figcaption { color: var(--suave); font-size: var(--t-small); text-align: center; max-width: 24ch; }


.plans { margin-top: var(--s-huge); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl); }
.plan { border: var(--hairline) solid var(--borde); border-radius: var(--r-card); padding: var(--s-xxl); display: grid; gap: var(--s-m); align-content: start; }
.plan--pro { border: var(--bold) solid var(--llave); }
.plan .price { font: 800 2.6rem/1 var(--f-display); letter-spacing: -.03em; }
.plan .price small { font: 500 1rem var(--f-body); color: var(--suave); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-s); }
.plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-s); }
.plan li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--pacto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171A33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .note { color: var(--suave); font-size: var(--t-small); }

.faq { margin-top: var(--s-xxxl); max-width: 760px; display: grid; gap: var(--s-s); }
.faq details { background: var(--superficie); border-radius: var(--r-card); }
/* Todo el recuadro es clicable: el relleno vive en el summary, no en details. */
.faq summary { cursor: pointer; font: 700 1.1rem var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: var(--s-m); padding: var(--s-l) var(--s-xl); border-radius: var(--r-card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--llave); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--s-xl) var(--s-l); color: var(--suave); }

/* ── Vídeo de la portada (lleva su propia barra de estado y de gestos) ── */
.screen--video::after { display: none; }
.screen--video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Ilustraciones de "Cómo funciona": escenas pequeñas, en bucle ── */
.illus { height: 132px; border-radius: var(--r-field); background: var(--tinta); display: flex; align-items: center; justify-content: center; gap: var(--s-m); overflow: hidden; }
.illus--pact .mini { width: 46px; height: 84px; border-radius: 10px; border: var(--bold) solid var(--borde); display: grid; place-items: center; }
.illus--pact .qr { width: 26px; height: 26px; background:
    linear-gradient(var(--niebla) 0 0) 0 0 / 9px 9px no-repeat,
    linear-gradient(var(--niebla) 0 0) 100% 0 / 9px 9px no-repeat,
    linear-gradient(var(--niebla) 0 0) 0 100% / 9px 9px no-repeat,
    linear-gradient(var(--llave) 0 0) 60% 60% / 8px 8px no-repeat; }
.illus--pact .swap { position: relative; width: 70px; height: 40px; border-top: var(--bold) dashed var(--borde); border-bottom: var(--bold) dashed var(--borde); }
.illus--pact .k { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.illus--pact .k--a { top: -8px; left: 0; background: var(--llave); animation: sp-cross-a 2.4s ease-in-out infinite; }
.illus--pact .k--b { bottom: -8px; right: 0; background: var(--niebla); animation: sp-cross-b 2.4s ease-in-out infinite; }
@keyframes sp-cross-a { 0%, 15% { transform: translateX(0); } 55%, 100% { transform: translateX(56px); } }
@keyframes sp-cross-b { 0%, 15% { transform: translateX(0); } 55%, 100% { transform: translateX(-56px); } }

.illus--limit .lim { width: 78%; background: var(--superficie); border-radius: var(--r-field); padding: var(--s-s) var(--s-m); display: grid; grid-template-columns: 1fr auto; gap: var(--s-xs); font-size: var(--t-small); }
.illus--limit .lim-min { color: var(--llave); font-weight: 600; }
.illus--limit .lim-min s { color: var(--suave); font-weight: 400; margin-right: var(--s-xxs); }
.illus--limit .lim-bar { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pill); background: var(--linea); overflow: hidden; }
.illus--limit .lim-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--llave); transform-origin: left; animation: sp-shrink 2.8s ease-in-out infinite; }
@keyframes sp-shrink { 0%, 20% { transform: scaleX(1); } 60%, 100% { transform: scaleX(.5); } }

.illus--key .avatar-c { width: 40px; height: 40px; border-radius: 50%; background: var(--llave); color: var(--tinta); display: grid; place-items: center; font: 800 1.1rem var(--f-display); flex: none; }
.illus--key .bubble { font: 700 .95rem var(--f-mono); letter-spacing: .08em; color: var(--llave); background: var(--superficie); border-radius: var(--r-field); padding: var(--s-xs) var(--s-s); animation: sp-send 2.6s ease-in-out infinite; }
.illus--key .lock { position: relative; width: 34px; height: 26px; margin-top: 14px; border-radius: 6px; background: var(--llave); flex: none; }
.illus--key .shackle { position: absolute; left: 7px; top: -15px; width: 20px; height: 20px; border: 4px solid var(--llave); border-bottom: 0; border-radius: 12px 12px 0 0; transform-origin: 100% 100%; animation: sp-open 2.6s ease-in-out infinite; }
@keyframes sp-send { 0%, 15% { transform: translateX(-10px); opacity: 0; } 35%, 70% { transform: translateX(0); opacity: 1; } 90%, 100% { transform: translateX(14px); opacity: 0; } }
@keyframes sp-open { 0%, 62% { transform: rotate(0); } 75%, 100% { transform: translateY(-4px) rotate(-30deg); } }
@media (prefers-reduced-motion: reduce) {
  .illus * { animation: none !important; }
}

/* ── Sin trampas: iconos tachados ── */
.nocheat { list-style: none; margin: var(--s-huge) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-xl); }
.nocheat li { display: grid; gap: var(--s-xs); align-content: start; }
.nocheat svg { width: 56px; height: 56px; padding: 12px; border-radius: var(--r-card); background: var(--superficie); fill: none; stroke: var(--niebla); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s-xs); }
.nocheat svg .x { stroke: var(--aviso); stroke-width: 2.4; }
.nocheat li:last-child svg { stroke: var(--llave); }
.nocheat b { font: 700 1.15rem var(--f-display); }
.nocheat span { color: var(--suave); font-size: var(--t-small); }
.privacy { margin-top: var(--s-xxxl); display: flex; gap: var(--s-s); align-items: center; font-weight: 600; }
.privacy svg { width: 28px; height: 28px; fill: var(--pacto); flex: none; }

/* ── Formulario ── */
.join { background: var(--llave); color: var(--tinta); }
.join .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-huge); align-items: center; }
.join h2 { font-size: var(--t-hero); line-height: .98; }
.join .lead { margin-top: var(--s-l); font-size: var(--t-lead); }
.form { display: grid; gap: var(--s-m); }
.field { display: grid; gap: var(--s-xs); }
.field label { font-weight: 600; font-size: var(--t-small); }
.field input { min-height: var(--button); border-radius: var(--r-field); border: var(--bold) solid var(--tinta); background: var(--niebla); color: var(--tinta); padding-inline: var(--s-m); font: 500 1.05rem var(--f-body); }
.field input::placeholder { color: var(--placeholder); }
.field input:focus { outline: none; box-shadow: 0 0 0 3px var(--tinta); }
.join .btn--primary { background: var(--tinta); color: var(--llave); }
.join .btn--primary:hover { background: var(--superficie); }
.form-legal { font-size: var(--t-small); }
.form-legal a { color: var(--tinta); }
.form-feedback { font-weight: 600; min-height: 1.6em; }
.form-feedback--ok::before { content: "✓ "; }
.form-feedback--err { text-decoration: underline wavy; text-underline-offset: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.foot { padding-block: var(--s-xxxl); color: var(--suave); font-size: var(--t-small); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-m); }
.foot a { color: var(--suave); }

/* ── Móvil ── */
@media (max-width: 860px) {
  .hero .wrap, .why .wrap, .join .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-xxxl); }
  .hero { padding-top: var(--s-xxxl); }
  .hero .phone { transform: none; width: min(260px, 72vw); }
  .steps, .plans { grid-template-columns: minmax(0, 1fr); }
  .nocheat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top .btn { display: none; }
}