/* ============================================================
   Altodos — Landing Page
   Marca (del logo): navy #003060 · rojo #FF371B · verde #0E8E68
   Dentro del teléfono se usa la paleta real de la app
   (rojoAltodos #E6533F, azulRegión #18354D, verdeCercano #3F7A61).
   ============================================================ */

@font-face{
  font-family:'Manrope';
  src:url('fonts/Manrope_700Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('fonts/Manrope_800ExtraBold.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --navy:#003060;
  --navy-600:#0A4177;
  --rojo:#FF371B;
  --rojo-600:#E22C11;
  --verde:#0E8E68;

  --navy-04:#F2F5F9;
  --navy-08:#E4EBF3;
  --navy-16:#C9D6E5;
  --rojo-06:#FFF1EE;
  --rojo-12:#FFDED7;
  --verde-06:#EBF7F2;
  --verde-12:#D5EDE4;

  --blanco:#FFFFFF;

  --ink:#10243A;
  --ink-2:#4C6076;
  --ink-3:#8496A8;
  --line:#E4EBF3;
  --line-2:#DDE6F0;

  /* Paleta interna de la app (para los mockups) */
  --a-rojo:#E6533F;
  --a-azul:#18354D;
  --a-verde:#3F7A61;
  --a-amarillo:#F2B744;
  --a-grafito:#25282C;
  --a-line:#E0E0E0;
  --a-muted:#777777;
  --a-surface:#F0F0F0;

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:38px;

  --sh-sm:0 1px 2px rgba(0,48,96,.05), 0 4px 14px rgba(0,48,96,.05);
  --sh-md:0 2px 8px rgba(0,48,96,.05), 0 18px 40px rgba(0,48,96,.09);
  --sh-lg:0 10px 26px rgba(0,48,96,.10), 0 40px 90px rgba(0,48,96,.14);

  --wrap:1180px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,.68,.28,1);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  --display:'Manrope',var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--blanco);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
ul,ol{list-style:none; padding:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:3px solid var(--rojo); outline-offset:3px; border-radius:8px}

.skip{position:absolute; left:-9999px; top:0; z-index:120; background:var(--navy); color:#fff; padding:.7rem 1rem}
.skip:focus{left:0}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 820px)}

.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.26; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ── Tipografía ─────────────────────────────────────────── */
.h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.35rem, 4.7vw, 3.6rem); line-height:1.12; letter-spacing:-.033em;
  margin-bottom:1.2rem;
}
.h2{font-family:var(--display); font-weight:800; font-size:clamp(1.85rem,3.9vw,2.85rem); line-height:1.16; letter-spacing:-.028em}
.h3{font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.25; letter-spacing:-.022em}
.lede{font-size:clamp(1.05rem,1.5vw,1.18rem); color:var(--ink-2); max-width:34rem; margin-bottom:2rem}
.body{font-size:1.03rem; color:var(--ink-2); margin-bottom:1rem}
.body--center{text-align:center; margin-inline:auto; max-width:40rem}
.hl{color:var(--rojo)}

.kicker{
  font-size:.77rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rojo); margin-bottom:.9rem;
}
.kicker--center{text-align:center}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  padding:.9rem 1.5rem; border-radius:999px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, color .2s;
  will-change:transform; white-space:nowrap;
}
.btn--primary{background:var(--rojo); color:#fff; box-shadow:0 10px 24px rgba(255,55,27,.26)}
.btn--primary:hover{background:var(--rojo-600); box-shadow:0 16px 34px rgba(255,55,27,.32)}
.btn--ghost{background:var(--blanco); color:var(--navy); border:1.5px solid var(--navy-16)}
.btn--ghost:hover{border-color:var(--navy); box-shadow:var(--sh-sm)}
.btn--lg{padding:1.05rem 1.9rem; font-size:1.03rem}
.btn--sm{padding:.58rem 1.15rem; font-size:.9rem}

/* ── Nav ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.74);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.is-stuck{background:rgba(255,255,255,.94); border-bottom-color:var(--line)}
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform:scaleX(0);
  transform-origin:0 50%; background:linear-gradient(90deg, var(--navy), var(--verde), var(--rojo));
}
.nav__in{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:1rem}
.brand{transition:transform .3s var(--ease)}
.brand img{height:26px; width:auto}
.brand:hover{transform:translateY(-1px) scale(1.02)}

.nav__links{display:flex; align-items:center; gap:.2rem}
.nav__links a{position:relative; padding:.55rem .85rem; border-radius:999px; font-size:.95rem; font-weight:600; color:var(--ink-2); transition:color .2s}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.35rem; height:2px;
  background:var(--rojo); border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .32s var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--navy)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}
.nav__links a.btn{color:#fff; margin-left:.5rem}

.nav__burger{display:none; width:44px; height:44px; border-radius:12px; padding:11px 10px}
.nav__burger span{display:block; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.nav__burger span+span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:clamp(2rem,5vw,3.5rem) 0 0; background:var(--blanco)}
.hero__bg{position:absolute; inset:-10% -10% 0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.45}
.blob--1{width:44vw; height:44vw; left:-8%; top:-14%; background:radial-gradient(circle, rgba(255,55,27,.28), transparent 68%); animation:drift1 22s ease-in-out infinite}
.blob--2{width:40vw; height:40vw; right:-6%; top:-6%; background:radial-gradient(circle, rgba(14,142,104,.24), transparent 68%); animation:drift2 26s ease-in-out infinite}
.blob--3{width:52vw; height:38vw; left:22%; bottom:-24%; background:radial-gradient(circle, rgba(0,48,96,.16), transparent 66%); animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate3d(6%,8%,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(-7%,6%,0) scale(1.08)}}
@keyframes drift3{50%{transform:translate3d(4%,-6%,0) scale(1.1)}}
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,48,96,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,48,96,.05) 1px, transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(72% 58% at 50% 24%, #000, transparent 76%);
  mask-image:radial-gradient(72% 58% at 50% 24%, #000, transparent 76%);
}
.hero__in{
  position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(1.5rem,3.5vw,3rem); align-items:center; padding-bottom:clamp(3rem,6vw,4.5rem);
}

.badge{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:rgba(255,255,255,.82); border:1px solid var(--navy-16);
  padding:.45rem 1rem .45rem .8rem; border-radius:999px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), border-color .3s;
}
.badge:hover{transform:translateY(-2px); border-color:var(--verde)}
.badge__pulse{position:relative; width:8px; height:8px; border-radius:50%; background:var(--verde); flex:none}
.badge__pulse::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--verde); animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6); opacity:.9}70%,100%{transform:scale(1.9); opacity:0}}

/* Titular palabra por palabra. El padding evita que se corten las colas
   de la q, la p y la y mientras la máscara sube el texto. */
.w{display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .04em .18em; margin:0 -.02em -.14em}
.w i{
  display:inline-block; font-style:normal;
  transform:translateY(115%); opacity:0;
  animation:wordUp .9s var(--ease) forwards; animation-delay:calc(var(--i) * .07s + .1s);
}
@keyframes wordUp{to{transform:none; opacity:1}}

.cta-row{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__meta{margin-top:1.4rem; font-size:.9rem; color:var(--ink-3)}

.hero__art{position:relative; display:flex; justify-content:center; align-items:center}
.tilt{position:relative; display:flex; justify-content:center; width:100%; transform-style:preserve-3d; will-change:transform}

.floaty{
  position:absolute; z-index:4; display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.7rem .95rem; box-shadow:var(--sh-md); backdrop-filter:blur(6px);
  animation:bob 7s ease-in-out infinite; will-change:transform;
}
.floaty b{display:block; font-family:var(--display); font-weight:700; font-size:.85rem; line-height:1.3; letter-spacing:-.01em}
.floaty small{display:block; font-size:.75rem; color:var(--ink-3)}
.floaty__ico{width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center}
.floaty__ico--verde{background:var(--verde-12); color:var(--verde)}
.floaty__ico--rojo{background:var(--rojo-12); color:var(--rojo)}
.floaty__ico--navy{background:var(--navy-08); color:var(--navy)}
.floaty--a{top:-3%; left:-8%; animation-delay:-1s}
.floaty--b{top:52%; right:-9%; animation-delay:-3.5s}
.floaty--c{bottom:5%; left:-7%; animation-delay:-5.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ══════════════════════════════════════════════════════════
   TELÉFONO Y PANTALLAS
   La pantalla se maqueta a tamaño lógico real (390 × 844) con las
   medidas y tipografías de la app, y se escala con --k. Así las
   proporciones son las del teléfono, no una miniatura aproximada.
   ══════════════════════════════════════════════════════════ */
.device{
  --k:.78;
  position:relative; z-index:2; flex:none;
  width:calc(390px * var(--k) + 22px);
  padding:11px;
  background:linear-gradient(160deg,#F7F9FC,#DCE4EE);
  border-radius:calc(56px * var(--k) + 11px);
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(0,48,96,.10) inset, 0 0 0 3px rgba(255,255,255,.9) inset;
}
.device--hero{transform:rotate(-2deg)}

.device__frame{
  position:relative; overflow:hidden; background:#fff;
  width:calc(390px * var(--k)); height:calc(844px * var(--k));
  border-radius:calc(56px * var(--k));
  box-shadow:0 0 0 1px rgba(16,36,58,.10);
}
/* Isla dinámica */
.device__frame::after{
  content:""; position:absolute; z-index:9; left:50%; transform:translateX(-50%);
  top:calc(11px * var(--k)); width:calc(112px * var(--k)); height:calc(33px * var(--k));
  background:#0B1622; border-radius:999px;
}

.screen{
  position:absolute; top:0; left:0; width:390px; height:844px;
  transform:scale(var(--k)); transform-origin:0 0;
  background:#fff; color:var(--a-grafito); font-size:15px; line-height:1.4;
}

/* ── Barra de estado ─────────────────────────────────────── */
.sb{
  position:absolute; top:0; left:0; right:0; height:54px; z-index:8;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px 0; font-size:15px; pointer-events:none;
}
.sb__time{font-family:var(--display); font-weight:700; letter-spacing:-.2px; color:#0B1622}
.sb__ico{display:flex; align-items:center; gap:5px}
.sb__ico i{display:block; background:#0B1622}
.sb .sig{width:17px; height:11px; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'><rect x='0' y='7.5' width='3' height='3.5' rx='1'/><rect x='4.6' y='5.5' width='3' height='5.5' rx='1'/><rect x='9.2' y='3' width='3' height='8' rx='1'/><rect x='13.8' y='0' width='3' height='11' rx='1'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'><rect x='0' y='7.5' width='3' height='3.5' rx='1'/><rect x='4.6' y='5.5' width='3' height='5.5' rx='1'/><rect x='9.2' y='3' width='3' height='8' rx='1'/><rect x='13.8' y='0' width='3' height='11' rx='1'/></svg>") center/contain no-repeat}
.sb .wifi{width:16px; height:11px; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M8 11.2 5.6 8.4a3.7 3.7 0 0 1 4.8 0L8 11.2Zm-4.4-5A7.4 7.4 0 0 1 8 4.4c1.7 0 3.2.6 4.4 1.8l-1.5 1.7A5.2 5.2 0 0 0 8 6.6c-1.1 0-2.2.4-2.9 1.3L3.6 6.2ZM.6 3A11.7 11.7 0 0 1 8 .4c2.8 0 5.4 1 7.4 2.6l-1.5 1.7A9.5 9.5 0 0 0 8 2.6C5.7 2.6 3.6 3.4 2 4.7L.6 3Z'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M8 11.2 5.6 8.4a3.7 3.7 0 0 1 4.8 0L8 11.2Zm-4.4-5A7.4 7.4 0 0 1 8 4.4c1.7 0 3.2.6 4.4 1.8l-1.5 1.7A5.2 5.2 0 0 0 8 6.6c-1.1 0-2.2.4-2.9 1.3L3.6 6.2ZM.6 3A11.7 11.7 0 0 1 8 .4c2.8 0 5.4 1 7.4 2.6l-1.5 1.7A9.5 9.5 0 0 0 8 2.6C5.7 2.6 3.6 3.4 2 4.7L.6 3Z'/></svg>") center/contain no-repeat}
.sb .bat{width:25px; height:12px; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 12'><rect x='.5' y='.5' width='21' height='11' rx='3.2' fill='none' stroke='black'/><rect x='2.2' y='2.2' width='15' height='7.6' rx='1.8'/><path d='M23 4.2v3.6a2 2 0 0 0 0-3.6Z'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 12'><rect x='.5' y='.5' width='21' height='11' rx='3.2' fill='none' stroke='black'/><rect x='2.2' y='2.2' width='15' height='7.6' rx='1.8'/><path d='M23 4.2v3.6a2 2 0 0 0 0-3.6Z'/></svg>") center/contain no-repeat}

/* ── Contenedor de pantalla ──────────────────────────────── */
.app{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding-top:54px; background:#fff; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.99); pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.app.is-on{opacity:1; transform:none}
.app b,.app .sec,.bar,.mc__price,.fab,.cc__logo{font-family:var(--display); font-weight:700}

/* Encabezado de marca (Inicio) */
.hd{display:flex; align-items:center; justify-content:space-between; padding:10px 16px 12px}
.hd__logo{height:20px; width:auto}
.hd__acts{display:flex; gap:8px}
.hd__acts .ic{width:36px; height:36px; padding:0; background:none; position:relative}
.hd__acts .ic::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--a-surface);
  -webkit-mask:none; mask:none; z-index:-1;
}
.hd__acts .ic{background:var(--a-grafito); -webkit-mask-size:20px; mask-size:20px}

/* Bloque de localidad */
.loc{
  display:flex; align-items:center; gap:12px; margin:0 16px 16px; padding:12px;
  border:1px solid var(--a-line); border-radius:16px;
}
.loc__pin{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:#E6533F14 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z' fill='%23E6533F'/></svg>") center/17px no-repeat;
}
.loc__txt{display:flex; flex-direction:column; flex:1; min-width:0}
.loc__txt small{font-size:12px; color:var(--a-muted); line-height:1.3}
.loc__txt b{font-size:17px; letter-spacing:-.3px; line-height:1.3}
.loc__go{font-size:13px; font-weight:600; color:var(--a-azul); white-space:nowrap}

/* Barra de título */
.bar{display:flex; align-items:center; gap:8px; padding:6px 16px 14px; font-size:22px; letter-spacing:-.5px}
.bar--back{font-size:17px; padding-top:8px}
.bar .ic{width:20px; height:20px; background:var(--a-grafito)}

/* Buscador y filtros */
.search{
  display:flex; align-items:center; gap:8px; margin:0 16px 12px; height:46px; padding:0 14px;
  background:var(--a-surface); border-radius:999px; color:var(--a-muted); font-size:14px;
}
.search .ic{background:var(--a-muted)}
.chips{display:flex; gap:8px; padding:0 16px 14px; overflow:hidden}
.chip{
  flex:none; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
  background:#fff; border:1px solid var(--a-line); color:var(--a-grafito);
}
.chip--on{background:var(--a-azul); border-color:var(--a-azul); color:#fff}

/* Contenido desplazable */
.feed{flex:1; overflow:hidden; padding:0 16px; display:flex; flex-direction:column; gap:14px}
.feed--grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; align-content:start}
.sec{font-size:17px; letter-spacing:-.3px; margin-top:2px}
.sec--row{display:flex; align-items:baseline; justify-content:space-between}
.sec--row span{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--a-azul)}

/* Accesos por categoría */
.qa{display:flex; gap:8px}
.qa__i{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10px; color:var(--a-grafito)}
.qa__i b{
  width:100%; aspect-ratio:1; border-radius:16px; display:grid; place-items:center;
  font-size:20px; font-weight:400;
}
.qa__more{background:var(--a-surface); font-size:16px; color:var(--a-azul); letter-spacing:1px}

/* Tarjeta de negocio (directorio) */
.bc{
  flex:none; border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 2px 10px rgba(37,40,44,.08);
}
.bc__cover{position:relative; display:block; width:100%; aspect-ratio:16/9; background:var(--a-surface)}
.bc__cover img{width:100%; height:100%; object-fit:cover}
.bc__cover em{
  position:absolute; top:12px; right:12px; font-style:normal;
  background:rgba(255,255,255,.94); color:var(--a-grafito);
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.2px;
  padding:4px 8px; border-radius:999px;
}
.bc__body{padding:16px 12px 12px; display:flex; flex-direction:column; gap:8px}
.bc__name{font-size:17px; line-height:22px; letter-spacing:-.3px}
.chipst{
  align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  border:1px solid rgba(36,38,43,.12); border-radius:999px; padding:4px 9px;
  font-size:10.5px; font-weight:600; color:var(--a-verde); background:#fff;
}
.chipst i{width:6px; height:6px; border-radius:50%; background:var(--a-verde)}
.chipst--off{color:var(--a-rojo)}
.chipst--off i{background:var(--a-rojo)}
.bc__foot{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--a-muted); min-height:22px}
.bc__foot b{font-size:14px; color:var(--a-grafito)}
.bc__foot u{margin-left:auto; text-decoration:none; font-family:var(--display); font-weight:600; font-size:12px; color:var(--a-azul)}
.stars{color:var(--a-amarillo); font-size:13px; font-style:normal; letter-spacing:-.5px}

/* Rejilla de Ventas */
.mc{display:flex; flex-direction:column; gap:4px}
.mc__img{position:relative; display:block; width:100%; aspect-ratio:1; border-radius:16px; overflow:hidden}
/* Marcadores de foto en la misma familia que las ilustraciones de la app:
   fondo pastel y el objeto dibujado a línea. */
.mc__img::after{
  content:""; position:absolute; inset:0; background:rgba(37,40,44,.34);
  -webkit-mask-position:center 54%; mask-position:center 54%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:58%; mask-size:58%;
}
.mc__img--1{background:linear-gradient(160deg,#EEF3F8,#DCE6F0)}
.mc__img--1::after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='21' r='8'/><circle cx='37' cy='21' r='8'/><path d='M11 21 20 7h7l-8 14h18M17 7h6m4 0 6 14'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='21' r='8'/><circle cx='37' cy='21' r='8'/><path d='M11 21 20 7h7l-8 14h18M17 7h6m4 0 6 14'/></svg>")}
.mc__img--2{background:linear-gradient(160deg,#FBEEE6,#F3DECF)}
.mc__img--2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h38M9 17v10M39 17v10M14 17v-7h7v7M27 17v-7h7v7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h38M9 17v10M39 17v10M14 17v-7h7v7M27 17v-7h7v7'/></svg>")}
.mc__img--3{background:linear-gradient(160deg,#EAF4EF,#D6E9DF)}
.mc__img--3::after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 5h5l5 11M13 16h21a10.5 10.5 0 0 1-21 0Zm21 0L40 5'/><circle cx='17' cy='26' r='3'/><circle cx='32' cy='26' r='3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 5h5l5 11M13 16h21a10.5 10.5 0 0 1-21 0Zm21 0L40 5'/><circle cx='17' cy='26' r='3'/><circle cx='32' cy='26' r='3'/></svg>")}
.mc__img--4{background:linear-gradient(160deg,#F1F3F6,#E0E5EC)}
.mc__img--4::after{-webkit-mask-size:38%; mask-size:38%; -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='3' width='20' height='36' rx='3.5'/><path d='M6 16h20M10.5 8.5v4M10.5 20v6'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='3' width='20' height='36' rx='3.5'/><path d='M6 16h20M10.5 8.5v4M10.5 20v6'/></svg>")}
.mc__img em{
  position:absolute; z-index:2; left:8px; top:8px; font-style:normal;
  background:rgba(255,255,255,.94); color:var(--a-grafito);
  font-family:var(--display); font-weight:700; font-size:9px; text-transform:uppercase;
  letter-spacing:.3px; padding:3px 7px; border-radius:999px;
}
.mc__img em.is-new{background:var(--a-verde); color:#fff}
.mc__img u{
  position:absolute; z-index:2; right:8px; bottom:8px; text-decoration:none;
  background:#E4F2E7; color:var(--a-verde); font-size:9px; font-weight:600;
  padding:3px 7px; border-radius:999px;
}
.mc__price{font-size:17px; letter-spacing:-.4px; font-style:normal}
.mc__t{font-size:13px; line-height:1.3}
.mc__c{font-size:11px; color:var(--a-muted)}

/* Tarjeta de changarro */
.cc{
  flex:none; display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:0 2px 10px rgba(37,40,44,.08); padding-bottom:12px;
}
.cc__cover{position:relative; display:block; width:100%; aspect-ratio:16/7; overflow:hidden; background:var(--a-surface)}
.cc__cover img{width:100%; height:100%; object-fit:cover}
.cc__cover em{
  position:absolute; top:10px; right:10px; font-style:normal;
  background:rgba(255,255,255,.94); color:var(--a-grafito);
  font-family:var(--display); font-weight:700; font-size:11px; padding:4px 8px; border-radius:999px;
}
.cc__logo{
  width:46px; height:46px; margin:-23px 0 0 12px; border-radius:14px; z-index:2;
  display:grid; place-items:center; border:3px solid #fff; color:#fff; font-size:19px;
  background-color:var(--a-rojo); box-shadow:0 2px 8px rgba(37,40,44,.18);
}
.cc__logo--b{background-color:var(--a-verde)}
.cc__body{padding:8px 12px 0; display:flex; flex-direction:column; gap:6px}
.cc__body b{font-size:16px; letter-spacing:-.3px}
.cc__desc{font-size:13px; color:var(--a-muted); line-height:1.35}

/* Chat */
.feed--chat{gap:8px; justify-content:flex-end; padding-bottom:6px}
.day{align-self:center; font-size:11px; color:var(--a-muted); background:var(--a-surface); padding:3px 10px; border-radius:999px}
.bub{
  max-width:82%; align-self:flex-start; padding:10px 14px; font-size:15px; line-height:21px;
  border:1px solid var(--a-line); background:var(--a-surface);
  border-radius:18px 18px 18px 6px;
}
.bub em{display:block; font-style:normal; font-family:var(--display); font-weight:700; font-size:12.5px; line-height:17px; color:var(--a-azul)}
.bub--me{align-self:flex-end; background:var(--a-rojo); border-color:var(--a-rojo); color:#fff; border-radius:18px 18px 6px 18px}
.composer{
  display:flex; align-items:center; gap:8px; margin:8px 16px 34px; padding:6px 6px 6px 16px;
  border:1px solid var(--a-line); border-radius:999px; font-size:14px; color:var(--a-muted);
}
.composer b{margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--a-rojo); flex:none}

/* Eventos, promos y aviso de chat */
.ev{display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--a-line); border-radius:16px; flex:none}
.ev__day{width:44px; flex:none; text-align:center; border-radius:12px; background:#18354D0F; color:var(--a-azul); font-size:9px; font-weight:700; padding:6px 0}
.ev__day b{display:block; font-size:17px; line-height:1.1}
.ev__img{width:44px; height:44px; border-radius:12px; flex:none}
.ev__img--promo{background:linear-gradient(150deg,#F7C978,#E6533F)}
.ev__img--news{background:linear-gradient(150deg,#A9BFD4,#18354D)}
.ev__img--news2{background:linear-gradient(150deg,#9FCBB8,#3F7A61)}
.ev__txt{display:flex; flex-direction:column; min-width:0; flex:1}
.ev__txt b{font-size:14px; letter-spacing:-.2px; line-height:1.3}
.ev__txt small{font-size:12px; color:var(--a-muted); line-height:1.35}
.chatcta{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; flex:none;
  background:#E6533F0A; border:1px solid #E6533F26;
}
.chatcta__ico{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:#E6533F1F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16v10H8l-4 4V5Z' fill='none' stroke='%23E6533F' stroke-width='2' stroke-linejoin='round'/></svg>") center/20px no-repeat;
}
.chatcta u{margin-left:auto; text-decoration:none; font-size:13px; font-weight:700; color:var(--a-azul)}

/* FAB y barra de pestañas */
.fab{
  position:absolute; right:16px; bottom:99px; z-index:5;
  display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 18px 0 7px;
  background:var(--a-rojo); color:#fff; font-size:15px; letter-spacing:-.1px; border-radius:999px;
  box-shadow:0 6px 18px rgba(230,83,63,.28);
}
.fab i{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-style:normal; font-size:19px; font-weight:400;
}
.tabbar{
  margin-top:auto; display:flex; align-items:flex-start; height:49px;
  padding:4px 2px 2px; border-top:1px solid var(--a-line); background:#fff;
}
.tb{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:8px; line-height:10px; color:var(--a-grafito); opacity:.5; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 1px;
}
.tb.is-on{opacity:1; font-weight:700}
.tb .ic{width:24px; height:24px}
.home{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:6;
  width:139px; height:5px; border-radius:999px; background:#0B1622; opacity:.85;
}

/* Iconos */
.ic{width:24px; height:24px; display:block; background:currentColor; flex:none}
.ic--home{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-9.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></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='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-9.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.ic--map{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m3 6.5 6-2 6 2 6-2v13l-6 2-6-2-6 2v-13Zm6-2v13m6-11v13' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></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='m3 6.5 6-2 6 2 6-2v13l-6 2-6-2-6 2v-13Zm6-2v13m6-11v13' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.ic--tag{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4.5h7.2l8.3 8.3-7.2 7.2L4 11.7V4.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><circle cx='8.4' cy='8.4' r='1.5' fill='black'/></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='M4 4.5h7.2l8.3 8.3-7.2 7.2L4 11.7V4.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><circle cx='8.4' cy='8.4' r='1.5' fill='black'/></svg>") center/contain no-repeat}
.ic--store{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.5 10.5h15V20h-15v-9.5ZM3 4.5h18l-1.2 4.4H4.2L3 4.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></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='M4.5 10.5h15V20h-15v-9.5ZM3 4.5h18l-1.2 4.4H4.2L3 4.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.ic--bell{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.8 1.9H4.7l1.8-1.9Zm3.6 3.4h3.8' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/></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='M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.8 1.9H4.7l1.8-1.9Zm3.6 3.4h3.8' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/></svg>") center/contain no-repeat}
.ic--user{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8.5' r='3.8' fill='none' stroke='black' stroke-width='1.8'/><path d='M4.8 20a7.2 7.2 0 0 1 14.4 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></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'><circle cx='12' cy='8.5' r='3.8' fill='none' stroke='black' stroke-width='1.8'/><path d='M4.8 20a7.2 7.2 0 0 1 14.4 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") center/contain no-repeat}
.ic--menu{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.5 7.5h15M4.5 12h15M4.5 16.5h15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></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='M4.5 7.5h15M4.5 12h15M4.5 16.5h15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") center/contain no-repeat}
.ic--search{width:18px; height:18px; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/><path d='m16 16 4.5 4.5' stroke='black' stroke-width='2' stroke-linecap='round'/></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'><circle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/><path d='m16 16 4.5 4.5' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat}
.ic--back{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14.5 5 7.5 12l7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></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='M14.5 5 7.5 12l7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}

/* Entrada escalonada de las tarjetas del hero */
.sl{opacity:0; transform:translateY(12px); animation:rowIn .6s var(--ease) forwards; animation-delay:calc(var(--s, 0) * .14s + .95s)}
@keyframes rowIn{to{opacity:1; transform:none}}


/* ── Marquesina ─────────────────────────────────────────── */
.ticker{
  padding:1.15rem 0; background:var(--blanco); color:var(--navy);
  border-block:1px solid var(--line); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__row{overflow:hidden}
.ticker__row+.ticker__row{margin-top:.4rem; opacity:.45}
.ticker__track{display:flex; align-items:center; gap:1.5rem; width:max-content; animation:slide 42s linear infinite; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.015em; white-space:nowrap}
.ticker__row--rev .ticker__track{animation-direction:reverse; animation-duration:52s}
.ticker i{width:5px; height:5px; border-radius:50%; background:var(--rojo); flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Secciones ──────────────────────────────────────────── */
.section{position:relative; padding:clamp(3.5rem,8vw,7rem) 0; background:var(--blanco)}
/* Nada de bloques de color entre secciones: un filete que se desvanece en los
   extremos basta para separarlas sin ensuciar el blanco. */
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(100% - 2.5rem, var(--wrap)); height:1px;
  background:linear-gradient(90deg, transparent, var(--line), var(--line) 78%, transparent);
}
.sec-head{text-align:center; max-width:46rem; margin:0 auto clamp(2.4rem,4.5vw,3.6rem)}
.sec-head .h2{margin-bottom:.9rem}

/* Por qué existe */
.why{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(1.5rem,4vw,4rem); align-items:start}
.why__left .body{max-width:30rem}
.why__list{display:grid; gap:.7rem}
.why__list li{
  position:relative; display:flex; align-items:flex-start; gap:1.1rem;
  background:var(--blanco); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.15rem 1.3rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.why__list li:hover{transform:translateX(5px); border-color:var(--navy-16); box-shadow:var(--sh-md)}

.why__ico{
  flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--tint); color:var(--navy);
  transition:transform .4s var(--ease);
}
.why__list li:hover .why__ico{transform:rotate(-6deg) scale(1.06)}
.why__ico svg{overflow:visible}

.why__txt{display:flex; flex-direction:column; gap:.3rem; min-width:0}
/* El "antes" va arriba y en chico: lo que importa es la línea de abajo */
.why__before{
  position:relative; padding-left:1.35rem; font-size:.88rem; color:var(--ink-3);
}
.why__before::before{
  content:""; position:absolute; left:0; top:.42em; width:.85rem; height:1px; background:var(--ink-3); opacity:.55;
}
.why__list b{
  font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1.4;
  letter-spacing:-.015em; color:var(--ink);
}

/* ── Showcase ───────────────────────────────────────────── */
.showcase__grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
/* Sin esto, el ancho mínimo de los bloques estira la columna y la página
   termina con scroll horizontal en móvil. */
.showcase__grid>*{min-width:0}
.showcase__stage{position:sticky; top:calc(var(--nav-h) + 2rem); display:flex; justify-content:center}
.stage__hint{display:none}
.showcase__list{display:grid}
.step{
  min-height:clamp(20rem,48vh,28rem); display:flex; flex-direction:column; justify-content:center;
  padding:1.6rem 0; border-top:1px solid var(--line);
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.step:first-child{border-top:0}
.is-driven .step{opacity:.3; filter:blur(1.5px)}
.is-driven .step.is-live{opacity:1; filter:none}
.step__tag{
  align-self:flex-start; font-size:.71rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rojo); background:var(--rojo-06); border:1px solid var(--rojo-12);
  padding:.32rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.step h3{font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.028em; margin-bottom:.7rem}
.step p{color:var(--ink-2); font-size:1.03rem; max-width:34rem}

/* ── Reclamar ───────────────────────────────────────────── */
.claim__grid{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.claim__intro{position:sticky; top:calc(var(--nav-h) + 3rem)}
.claim__intro .h2{margin-bottom:.9rem}
.claim__intro .body{max-width:30rem}
.claim__note{
  margin:1.6rem 0 1.8rem; padding:1.1rem 1.3rem; border-radius:var(--r-md);
  background:var(--rojo-06); border:1px solid var(--rojo-12);
}
.claim__note b{display:block; font-family:var(--display); font-weight:700; font-size:1rem; margin-bottom:.2rem}
.claim__note span{font-size:.95rem; color:var(--ink-2)}
.fineprint{margin-top:.9rem; font-size:.85rem; color:var(--ink-3)}

/* Línea de tiempo: buscar → solicitar → administrar */
.flow{display:grid; gap:0}
.flow__step{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.3rem; padding-bottom:2.4rem}
.flow__step:last-child{padding-bottom:0}
/* el hilo que une los pasos */
.flow__step::before{
  content:""; position:absolute; left:1.1rem; top:2.6rem; bottom:.4rem; width:2px;
  background:linear-gradient(180deg, var(--line), var(--line) 70%, transparent);
}
.flow__step:last-child::before{display:none}
.flow__n{
  position:relative; z-index:2; display:grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:800; font-size:.95rem;
}
.flow__step:nth-child(2) .flow__n{background:var(--verde)}
.flow__step:nth-child(3) .flow__n{background:var(--rojo)}
.flow__body h3{
  font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-.022em;
  margin:.15rem 0 .4rem;
}
.flow__body>p{color:var(--ink-2); font-size:.99rem; max-width:34rem; margin-bottom:1.1rem}

/* Fragmentos de interfaz: la misma cara que la app, en chiquito */
.mini{
  background:var(--blanco); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem; box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.6rem;
  font-size:.9rem; color:var(--a-grafito);
}
.mini__search{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:999px;
  background:var(--a-surface); color:var(--a-grafito); font-size:.88rem;
}
.mini__search .ic{width:15px; height:15px; background:var(--a-muted)}
.mini__row{display:flex; align-items:center; gap:.7rem; padding:.55rem; border:1px solid var(--line); border-radius:14px}
.mini__row img{width:56px; height:38px; border-radius:9px; object-fit:cover; flex:none}
.mini__row>span:not(.chipst){display:flex; flex-direction:column; min-width:0; flex:1}
.mini__row b{font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:-.01em}
.mini__row small{font-size:.78rem; color:var(--a-muted)}
.mini__row .chipst{margin-left:auto; align-self:center; flex:none}

.mini__label{font-size:.78rem; font-weight:700; color:var(--a-muted)}
.mini__field{
  padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px;
  color:var(--ink-3); font-size:.88rem; background:#fff;
}
.mini__send{
  align-self:flex-start; margin-top:.2rem; padding:.6rem 1.1rem; border-radius:999px;
  background:var(--a-rojo); color:#fff; font-family:var(--display); font-weight:700; font-size:.9rem;
  box-shadow:0 6px 16px rgba(230,83,63,.24);
}
.mini__status{
  display:flex; align-items:center; gap:.45rem; margin-top:.2rem;
  font-size:.83rem; color:var(--ink-2);
}
.mini__status b{font-family:var(--display); font-weight:700; color:var(--a-azul)}
.mini__status .dot{
  width:8px; height:8px; border-radius:50%; background:var(--a-amarillo); flex:none;
  box-shadow:0 0 0 3px #F2B7441F;
}

.panel{
  position:relative; background:var(--blanco); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.4vw,1.7rem); box-shadow:var(--sh-md); margin-top:.2rem;
}
.panel__label{
  position:absolute; top:-.7rem; left:1.4rem; font-size:.68rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); background:var(--blanco); padding:.2rem .6rem;
  border:1px solid var(--line); border-radius:999px;
}
.panel__head{display:flex; align-items:center; gap:.8rem; margin-bottom:1.3rem}
.panel__head b{display:block; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.015em}
.panel__head small{font-size:.84rem; color:var(--ink-3)}
.panel__avatar{width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; background:linear-gradient(140deg,#FF8A5C,var(--rojo)); color:#fff; font-family:var(--display); font-weight:800}
.stamp{font-size:.7rem; font-weight:800; padding:.24rem .6rem; border-radius:999px; margin-left:auto; white-space:nowrap}
.stamp--verde{background:var(--verde-12); color:var(--verde)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.3rem}
.stat{background:var(--navy-04); border:1px solid var(--line); border-radius:14px; padding:.75rem}
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.035em; color:var(--navy); font-variant-numeric:tabular-nums}
.stat small{font-size:.73rem; color:var(--ink-3)}
.bars{display:flex; align-items:flex-end; gap:.45rem; height:88px; margin-bottom:.9rem}
.bars span{flex:1; height:0; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#FF7A5E,var(--rojo)); opacity:.9; transition:height .9s var(--ease)}
.bars.is-live span{height:var(--h)}
.bars span:nth-child(1){transition-delay:.05s}
.bars span:nth-child(2){transition-delay:.11s}
.bars span:nth-child(3){transition-delay:.17s}
.bars span:nth-child(4){transition-delay:.23s}
.bars span:nth-child(5){transition-delay:.29s}
.bars span:nth-child(6){transition-delay:.35s; background:linear-gradient(180deg,#4FBE97,var(--verde)); opacity:1}
.bars span:nth-child(7){transition-delay:.41s}
.panel__foot{font-size:.86rem; color:var(--ink-2)}

/* ── Tepa ───────────────────────────────────────────────── */
.tepa__card{
  position:relative; overflow:hidden; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
  border-radius:var(--r-xl); padding:clamp(1.2rem,2vw,1.5rem);
  background:var(--blanco); border:1px solid var(--line); box-shadow:var(--sh-md);
}

/* Mapa abstracto: no es Tepa a escala, es la idea de una sola ciudad */
.tepa__map{
  position:relative; border-radius:calc(var(--r-xl) - .8rem); overflow:hidden;
  aspect-ratio:4/3.1; background:var(--navy-04);
}
.tepa__grid{width:100%; height:100%; display:block}

.tepa__pin{
  position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);
  width:clamp(66px,17%,104px); aspect-ratio:1; display:grid; place-items:center;
}
.tepa__pin img{
  width:100%; height:auto; position:relative; z-index:3;
  filter:drop-shadow(0 10px 20px rgba(0,48,96,.28));
  animation:pinDrop .9s var(--ease) both;
}
@keyframes pinDrop{from{transform:translateY(-28px) scale(.8); opacity:0}}
.tepa__ping{
  position:absolute; inset:-22%; border-radius:50%; border:2px solid var(--verde);
  animation:ping 3.4s var(--ease) infinite;
}
.tepa__ping--2{animation-delay:1.7s}

.tepa__chip{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:999px;
  padding:.42rem .9rem; font-family:var(--display); font-weight:700; font-size:.86rem;
  color:var(--navy); box-shadow:var(--sh-sm); backdrop-filter:blur(4px);
}
.tepa__chip::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none;
}

.tepa__copy{padding:clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) 0}
.tepa__copy .h2{margin-bottom:.9rem}
.tepa__copy .body{max-width:34rem}
.tepa__pts{display:grid; gap:.55rem; margin-top:1.4rem}
.tepa__pts li{
  position:relative; padding-left:1.7rem; font-size:.97rem; color:var(--ink-2);
}
.tepa__pts li::before{
  content:""; position:absolute; left:0; top:.55em; width:.7rem; height:1px; background:var(--rojo);
}
.tepa__pts li:last-child{color:var(--ink-3)}

/* ── Casos ──────────────────────────────────────────────── */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.case{
  position:relative; background:var(--blanco); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2rem); box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.case:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.case__n{
  display:block; font-family:var(--display); font-weight:800; font-size:.85rem;
  letter-spacing:.1em; color:var(--rojo); margin-bottom:1rem;
}
.case b{
  display:block; font-family:var(--display); font-weight:700; font-size:1.12rem;
  line-height:1.35; letter-spacing:-.02em; margin-bottom:.5rem;
}
.case p{color:var(--ink-2); font-size:.98rem}

/* ── FAQ ────────────────────────────────────────────────── */
.faq__grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.faq__intro{position:sticky; top:calc(var(--nav-h) + 3rem)}
.faq__intro .h2{margin-bottom:1rem}
.faq__intro .body{max-width:26rem}
.faq__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem;
  font-family:var(--display); font-weight:700; color:var(--rojo);
  transition:gap .3s var(--ease), transform .3s var(--ease);
}
.faq__cta:hover{gap:.85rem}

/* Lista editorial: filetes en vez de cajas */
.faq{display:flex; flex-direction:column}
.faq details{border-top:1px solid var(--line); transition:none}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.45rem 0; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq__q{
  font-family:var(--display); font-weight:700; font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.4; letter-spacing:-.02em; color:var(--ink);
  transition:color .25s var(--ease), transform .3s var(--ease);
}
.faq summary:hover .faq__q{color:var(--navy); transform:translateX(3px)}
details[open] .faq__q{color:var(--rojo)}

/* Marcador: un + que gira hasta volverse × */
.faq__mark{
  position:relative; flex:none; width:30px; height:30px; margin-top:.1rem;
  border-radius:50%; border:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.faq__mark::before,.faq__mark::after{
  content:""; position:absolute; top:50%; left:50%; width:11px; height:1.6px; border-radius:2px;
  background:var(--navy); transform:translate(-50%,-50%); transition:background .3s var(--ease);
}
.faq__mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq summary:hover .faq__mark{border-color:var(--navy-16)}
details[open] .faq__mark{background:var(--rojo); border-color:var(--rojo); transform:rotate(135deg)}
details[open] .faq__mark::before,details[open] .faq__mark::after{background:#fff}

/* La respuesta entra con una línea de acento al costado */
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease)}
details[open] .faq__a{grid-template-rows:1fr}
.faq__a>p{
  overflow:hidden; color:var(--ink-2); font-size:1rem; max-width:56ch;
  border-left:2px solid var(--rojo-12); padding-left:1.1rem;
}
details[open] .faq__a>p{padding-bottom:1.5rem}

/* ── CTA ────────────────────────────────────────────────── */
.cta{padding:clamp(3rem,7vw,7rem) 0}
.cta__box{
  position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line);
  padding:clamp(2.8rem,6vw,5rem) clamp(1.8rem,5vw,4.5rem);
  background:radial-gradient(60% 120% at 0% 0%, var(--rojo-06), transparent 55%),
             radial-gradient(60% 120% at 100% 100%, var(--verde-06), transparent 55%),
             var(--blanco);
}
/* El isotipo enorme, casi transparente, saliéndose por la derecha */
.cta__watermark{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(52%, 34rem); height:auto; opacity:.08; pointer-events:none;
}
.cta__glow{
  position:absolute; right:6%; top:50%; width:24rem; height:24rem; transform:translateY(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,55,27,.12), transparent 62%);
  animation:ctaGlow 9s ease-in-out infinite;
}
@keyframes ctaGlow{50%{transform:translateY(-50%) scale(1.15)}}

.cta__title{
  position:relative; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.1; letter-spacing:-.035em;
  margin-bottom:1rem; max-width:20ch;
}
.cta__sub{position:relative; max-width:42rem; margin-bottom:2.3rem}

.cta__actions{position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem 1.6rem}
.store{
  display:inline-flex; align-items:center; gap:.9rem; background:var(--navy); color:#fff;
  padding:.95rem 1.9rem .95rem 1.5rem; border-radius:18px; box-shadow:0 14px 30px rgba(0,48,96,.24);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.store:hover{background:var(--navy-600); box-shadow:0 20px 40px rgba(0,48,96,.3)}
.store small{display:block; font-size:.72rem; opacity:.75; line-height:1.25}
.store b{display:block; font-family:var(--display); font-weight:700; font-size:1.14rem; letter-spacing:-.02em; line-height:1.25}
.store__gplay{flex:none}

.cta__hint{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-2); font-size:.95rem;
}
.cta__hint svg{color:var(--ink-3); flex:none}
.cta__hint b{font-family:var(--display); font-weight:700; color:var(--navy)}

.cta__meta{
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:.9rem;
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-3);
}
.cta__meta i{width:4px; height:4px; border-radius:50%; background:var(--navy-16); flex:none}

/* ── Footer ─────────────────────────────────────────────── */
.foot{background:var(--blanco); border-top:1px solid var(--line); padding-top:clamp(2.5rem,5vw,3.5rem)}
.foot__in{display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; padding-bottom:2.5rem}
.foot__brand img{height:26px; width:auto; margin-bottom:.7rem}
.foot__brand small{display:block; font-size:.92rem; color:var(--ink-2); max-width:26ch}
.foot__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.foot__cols h4{font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.7rem}
.foot__cols a{display:block; font-size:.95rem; color:var(--ink-2); padding:.24rem 0; transition:color .2s, transform .2s}
.foot__cols a:hover{color:var(--rojo); transform:translateX(3px)}
.foot__bar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border-top:1px solid var(--line-2); padding:1.1rem 0 1.5rem; font-size:.85rem; color:var(--ink-3)}

/* ── Reveal ─────────────────────────────────────────────── */
.fx{opacity:0; transform:translateY(20px); filter:blur(4px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay:var(--d,0s)}
.fx.is-in{opacity:1; transform:none; filter:none}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1200px){
  .floaty--b{right:-2%}
  .floaty--a{left:-4%}
  .floaty--c{left:-4%}
}

@media (max-width:1040px){
  .hero__in{grid-template-columns:1fr; text-align:center}
  .hero__copy{margin-inline:auto; max-width:40rem}
  .lede{margin-inline:auto}
  .cta-row{justify-content:center}
  .hero__art{margin-top:1.5rem}
  .floaty--a{left:-1%}
  .floaty--b{right:-2%}
  .floaty--c{left:-1%}

  .why{grid-template-columns:1fr; gap:1.5rem; text-align:left}
  /* En móvil el teléfono se queda, pero las pantallas se pasan deslizando */
  .showcase__grid{grid-template-columns:1fr}
  .showcase__stage{position:static; flex-direction:column; align-items:center; margin-bottom:2.5rem}
  /* El teléfono se queda y las pantallas se pasan deslizando */
  .showcase__stage .screen{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .showcase__stage .screen::-webkit-scrollbar{display:none}
  .showcase__stage .app{
    position:relative; inset:auto; flex:0 0 390px; width:390px; height:844px;
    opacity:1; transform:none; pointer-events:auto; scroll-snap-align:center;
  }
  /* La barra de estado va absoluta dentro de la pantalla: en el carrusel se
     iría con el scroll, así que en móvil se oculta y el hueco queda limpio. */
  .showcase__stage .sb,
  .device--stage .device__frame::after{display:none}
  .stage__hint{display:block; margin-top:1.1rem; font-size:.85rem; color:var(--ink-3); text-align:center}
  .step,.is-driven .step{min-height:0; padding:1.5rem 0; opacity:1; filter:none}
  .faq__grid{grid-template-columns:1fr; gap:2rem}
  .cta__watermark{width:70%; right:-22%; opacity:.05}
  .cta__glow{right:-18%}
  /* el salto manual del titular solo sirve en pantallas anchas */
  .cta__title br{display:none}
  .faq__intro{position:static}
  .claim__grid{grid-template-columns:1fr; gap:2.5rem}
  .claim__intro{position:static}
  .tepa__card{grid-template-columns:1fr; gap:1.5rem}
  .tepa__copy{padding:0 clamp(.5rem,3vw,1.5rem) 1rem}

  .cases{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
}

@media (max-width:860px){
  .nav__burger{display:block}
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:.1rem;
    background:var(--blanco); border-bottom:1px solid var(--line);
    padding:.8rem 1.25rem 1.3rem; box-shadow:var(--sh-md);
  }
  .nav__links.is-open{display:flex; animation:menuIn .3s var(--ease)}
  @keyframes menuIn{from{opacity:0; transform:translateY(-8px)}}
  .nav__links a{padding:.8rem; font-size:1rem}
  .nav__links a.btn{margin:.6rem 0 0; justify-content:center}
}

@media (max-width:640px){
  :root{--r-xl:28px; --r-lg:22px}
  .h1{font-size:clamp(2.3rem,10vw,3rem)}
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat:first-child{grid-column:span 2}
  .foot__cols{grid-template-columns:1fr 1fr}
  .floaty{transform:scale(.84)}
  .floaty--a{top:-5%; left:-4%}
  .floaty--b{right:-4%}
  .floaty--c{bottom:3%; left:-4%}
  .device{width:min(18.5rem,92%)}
  .store{padding-inline:1.3rem 1.5rem}
  .ticker__track{font-size:.92rem; gap:1.1rem}
}

@media (hover:none){
  .floaty{animation:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .fx,.w i,.sl{opacity:1 !important; transform:none !important; filter:none !important}
  .bars span{height:var(--h)}
  .is-driven .step{opacity:1; filter:none}
}