/* ============================================================================
   InRecint — hoja de estilos del sitio
   Tokens SACADOS del código de la app (src/theme/colors.ts · worldColors.ts ·
   typography.ts). La app es theme-aware y el sitio también: oscuro por
   defecto, claro por [data-theme="light"].
   ⚠️ Esta hoja es SOLO de la home. /terminos y /privacidad siguen con
   css/styles.css, que no se toca.
   ========================================================================= */

/* ── TEMA OSCURO (por defecto) — colors.ts, bloque dark ─────────────────── */
:root {
  --bg:        #000000;
  --card:      #101010;
  --elevated:  #181818;
  --tint:      #060606;   /* tinte de bloque: separa sin línea */

  --ink:       #F0F0F0;
  --muted:     #9CA3AF;
  --dim:       #6B7280;

  --indigo:      #5B6CF0;
  --indigo-soft: rgba(91, 108, 240, 0.12);
  --indigo-line: rgba(91, 108, 240, 0.32);
  --indigo-2:    #7C8CF5;

  --alert:        #E5484D;
  --alert-bg:     rgba(229, 72, 77, 0.16);
  --alert-line:   rgba(229, 72, 77, 0.38);
  --caution:      #D85A30;
  --caution-bg:   rgba(216, 90, 48, 0.16);
  --caution-line: rgba(216, 90, 48, 0.38);

  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.15);
  --edge:        rgba(255, 255, 255, 0.06);   /* borde de luz superior */

  /* Superficie y profundidad de los mockups. En oscuro la luz viene de arriba
     y la sombra es larga y difusa; en claro esto se REHACE, no se reusa. */
  --mock-surface: linear-gradient(180deg, #131313, #101010);
  --mock-edge:    rgba(255, 255, 255, 0.10);
  --mock-halo:    radial-gradient(120% 60% at 50% -10%, rgba(91,108,240,0.12), transparent 62%);
  --mock-shadow:  0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px -20px rgba(0,0,0,0.9);
  --track:        rgba(255, 255, 255, 0.06);
  --track-fill:   rgba(255, 255, 255, 0.16);
  --topbar-bg:    rgba(0, 0, 0, 0.74);

  --radius:      20px;
  --radius-sm:   14px;
  --radius-field: 16px;   /* campos apilados: NUNCA pill, o se hacen elipse */
  --radius-pill: 999px;

  --t-xs:  12px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  17px;
  --t-xl:  clamp(19px, 1.5vw, 21px);
  --t-h3:  clamp(18px, 1.4vw, 20px);
  --t-h2:  clamp(28px, 3.6vw, 42px);
  --t-h1:  clamp(38px, 6vw, 64px);

  --gap:       clamp(64px, 8vw, 104px);
  --gap-block: clamp(88px, 12vw, 168px);
  --wrap:      1120px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* ── TEMA CLARO — colors.ts, bloque light ───────────────────────────────── */
:root[data-theme="light"] {
  --bg:       #E3E7EE;   /* gris marcado: las cards blancas flotan */
  --card:     #FFFFFF;
  --elevated: #FFFFFF;
  --tint:     #DBE0E9;   /* un escalón por debajo del fondo, mismo papel que el tinte oscuro */

  --ink:   #1A1A2E;
  --muted: #6B7280;
  --dim:   #9CA3AF;

  --indigo-soft: rgba(91, 108, 240, 0.12);
  --indigo-line: rgba(91, 108, 240, 0.30);

  --alert-bg:     rgba(229, 72, 77, 0.12);   /* WORLD_ALERT_SUBTLE_LIGHT */
  --alert-line:   rgba(229, 72, 77, 0.30);
  --caution-bg:   rgba(216, 90, 48, 0.12);   /* WORLD_CAUTION_SUBTLE_LIGHT */
  --caution-line: rgba(216, 90, 48, 0.30);

  --line:        rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --edge:        rgba(0, 0, 0, 0.06);

  /* Profundidad REHECHA para claro: sin borde de luz (no hay luz que reflejar
     sobre blanco), sombra corta y gris en vez de larga y negra, y el halo
     índigo por DEBAJO en vez de por arriba. */
  --mock-surface: #FFFFFF;
  --mock-edge:    rgba(0, 0, 0, 0.10);
  --mock-halo:    radial-gradient(120% 70% at 50% 110%, rgba(91,108,240,0.10), transparent 60%);
  --mock-shadow:  0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px -12px rgba(16, 24, 40, 0.22);
  --track:        rgba(0, 0, 0, 0.07);
  --track-fill:   rgba(0, 0, 0, 0.16);
  --topbar-bg:    rgba(227, 231, 238, 0.82);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Respaldo con MÉTRICAS de DM Sans: el texto pre-swap ocupa el mismo
   espacio y el swap no reacomoda nada (el CLS residual de 0.024 era el h1
   reflowando al llegar la webfont). Valores de la tabla fontaine/next-font
   para DM Sans sobre Arial. */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  size-adjust: 104.5%;
  ascent-override: 94.37%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-lg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
img, svg { max-width: 100%; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

/* ── Ritmo tipográfico ───────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.035em; max-width: 15ch; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.025em; max-width: 22ch; }
h3 { font-size: var(--t-h3); line-height: 1.28; letter-spacing: -0.012em; }
p  { margin: 0 0 1.15em; }
strong { font-weight: 700; color: var(--ink); }

.lead    { font-size: var(--t-xl); line-height: 1.58; color: var(--muted); max-width: 62ch; }
.measure { max-width: 66ch; }
.muted   { color: var(--muted); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--gap); }
.section--hero { padding-block: clamp(56px, 9vw, 116px) var(--gap); }
.section__cta { margin-top: 30px; margin-bottom: 0; }

.block { padding-block: clamp(8px, 2vw, 28px); transition: background-color .2s var(--ease); }
.block--tint, .block--close { background: var(--tint); }

.block__eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: var(--gap-block) 0 calc(var(--gap) * -0.35);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
}
.block__eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.split { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 4.5vw, 60px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--reverse .split__visual { order: -1; }
}
.split__text > :last-child { margin-bottom: 0; }
.split__text .lead { max-width: 54ch; }

/* ── Barra superior ──────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0;
  background: var(--topbar-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 4vw, 32px);   /* aire REAL entre la marca y los controles */
  width: min(100% - 40px, var(--wrap)); margin-inline: auto;
}
.topbar__right { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── LOGOTIPO ──────────────────────────────────────────────────────────────
   MISMA MARCA QUE LAS PÁGINAS LEGALES, que son la referencia: azulejo squircle
   índigo (radio 30%) con el globo BLANCO adentro, más el logotipo en peso 800.
   Antes la home usaba el globo suelto sin azulejo: dos marcas en un dominio.
   Valores calcados de css/styles.css (.brand-mark / .squircle / .brand-glyph /
   .brand-name), escalados ~15% porque acá la marca tiene que pesar más:
     legales   38px azulejo · 31px glifo · 1.16rem texto
     home      44px azulejo · 36px glifo · 1.34rem texto
   La proporción glifo/azulejo (0.816) se mantiene EXACTA: es lo que hace que se
   lea como el mismo logo y no como una versión rehecha. */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: #5B6CF0;
  border-radius: 30%;   /* .squircle de las legales */
  box-shadow: 0 8px 20px -8px rgba(91, 108, 240, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .16s var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-1px); }
.brand__glyph { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand__word { font-size: 1.34rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* Selector de idioma y de tema */
.langsel {
  appearance: none;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 28px 7px 12px; font: inherit; font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px top 52%, right 7px top 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.langsel:hover { border-color: var(--line-strong); color: var(--ink); }

/* Control de tema: un ícono, no una etiqueta. Muestra el tema al que VAS. */
.themetog {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  cursor: pointer; padding: 0;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.themetog:hover { border-color: var(--line-strong); color: var(--ink); }
.themetog svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.1; }
/* En oscuro se ofrece el sol; en claro, la luna. */
.themetog .ico-sun  { display: block; }
.themetog .ico-moon { display: none; }
:root[data-theme="light"] .themetog .ico-sun  { display: none; }
:root[data-theme="light"] .themetog .ico-moon { display: block; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }
.btn--primary { background: var(--indigo); color: #fff; }
.btn--primary:hover { background: var(--indigo-2); }
.btn--primary:disabled { opacity: .55; cursor: default; transform: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); }
.btn--sm { padding: 9px 16px; font-size: var(--t-sm); }

/* ── Kicker ──────────────────────────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
h2 + .lead, h1 + .measure, h2 + .measure { margin-top: 22px; }

/* ── Sello de vencimiento — motivo visual del sitio ──────────────────────── */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.stamp svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.stamp--dim { color: var(--dim); background: var(--track); border-color: var(--line); }
.ico { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
/* Badge OFICIAL de Google Play: el PNG trae su propio recorte + fondo negro
   con el radio ya resuelto por Google — acá solo se fija el alto (el ancho
   sigue proporcional) y un foco visible, sin tocar la imagen. */
.store-badge { display: inline-flex; border-radius: var(--radius-pill); }
.store-badge:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.store-badge__img { display: block; height: 56px; width: auto; }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .18s var(--ease), transform .18s var(--ease), background-color .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: var(--t-md); line-height: 1.6; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-top: 38px; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.deflist { display: grid; gap: 24px; margin-top: 38px; }
@media (min-width: 760px) { .deflist { grid-template-columns: 1fr 1fr; gap: 28px 44px; } }
.deflist__item h3 { margin-bottom: 5px; }
.deflist__item p { color: var(--muted); margin: 0; font-size: var(--t-md); line-height: 1.58; max-width: 42ch; }

/* ── MOCKUPS ─────────────────────────────────────────────────────────────── */
.mock {
  position: relative;
  background: var(--mock-surface);
  border: 1px solid var(--line); border-top-color: var(--mock-edge);
  border-radius: 24px; padding: 18px;
  display: grid; gap: 11px;
  box-shadow: var(--mock-shadow);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mock::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: var(--mock-halo); pointer-events: none;
}
.mock--phone { max-width: 336px; margin-inline: auto; border-radius: 30px; padding: 22px 16px; }
.mock > * { position: relative; }
.mock__hint { font-size: var(--t-xs); color: var(--dim); text-align: center; margin: 2px 0 0; }
.mock__hint--left { text-align: left; margin: -4px 0 2px; }

.mcard {
  background: var(--elevated);
  border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--radius-sm); padding: 13px 14px;
  display: grid; gap: 7px;
}
/* En claro la tarjeta interna es del mismo blanco que el mockup: se separa con
   el borde, no con el relleno. */
:root[data-theme="light"] .mcard { background: #F7F8FA; }
.mcard--roomy { gap: 11px; padding: 15px 15px 16px; }
.mcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mcard__kind { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mcard__body { font-size: var(--t-sm); line-height: 1.48; color: var(--ink); margin: 0; }
.mcard__foot { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--dim); }
.dot { opacity: .55; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--elevated); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 7px 12px;
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
}
:root[data-theme="light"] .chip { background: #F7F8FA; }
.chip--on { background: var(--indigo-soft); border-color: var(--indigo-line); color: var(--indigo); font-weight: 600; }
:root[data-theme="light"] .chip--on { background: var(--indigo-soft); }
.chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.plan__title { font-size: var(--t-lg); font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.plan__meta { display: grid; gap: 5px; font-size: var(--t-sm); color: var(--muted); }
.plan__row { display: flex; align-items: center; gap: 8px; }
.plan__row svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; flex: none; }
.plan__bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.plan__fill { display: block; height: 100%; width: 75%; border-radius: 999px; background: linear-gradient(90deg, var(--indigo), var(--indigo-2)); }
.plan__count { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--t-xs); }
.plan__count b { color: var(--ink); font-size: var(--t-sm); }

.zone__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zone__name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; }
.zone__streak {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 700; color: var(--indigo);
  background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.vs { display: grid; gap: 9px; }
.vs__row { display: grid; grid-template-columns: 82px 1fr 26px; align-items: center; gap: 10px; font-size: var(--t-xs); }
.vs__name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs__track { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.vs__fill { display: block; height: 100%; border-radius: 999px; background: var(--track-fill); }
.vs__fill--me { background: linear-gradient(90deg, var(--indigo), var(--indigo-2)); }
.vs__val { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.vs__row--me .vs__name { color: var(--ink); font-weight: 700; }
.vs__row--me .vs__val { color: var(--indigo); font-weight: 700; }
.vs__gap { font-size: var(--t-xs); color: var(--muted); margin: 2px 0 0; text-align: center; }

/* Urgencias — el bloque de color pleno es semántico, no decorativo */
.mcard--alert   { background: var(--alert-bg);   border-color: var(--alert-line);   border-left: 3px solid var(--alert); }
.mcard--caution { background: var(--caution-bg); border-color: var(--caution-line); border-left: 3px solid var(--caution); }
:root[data-theme="light"] .mcard--alert   { background: var(--alert-bg); }
:root[data-theme="light"] .mcard--caution { background: var(--caution-bg); }
.badge { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.badge--alert   { background: var(--alert); color: #FFFFFF; }
.badge--caution { background: #FAECE7; color: #993C1D; }

/* Estoy libre — el degradado del número necesita contraste en los dos temas */
.free { text-align: center; padding: 18px 10px 12px; }
.free__count {
  display: block; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* En claro el índigo claro (#7C8CF5) sobre blanco pierde contraste: se cierra
   el degradado hacia el índigo base. */
:root[data-theme="light"] .free__count { background: linear-gradient(135deg, #4453D6, var(--indigo)); -webkit-background-clip: text; background-clip: text; }
.free__label { margin: 8px 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.free__hint  { margin: 9px auto 0; font-size: var(--t-xs); color: var(--dim); max-width: 30ch; line-height: 1.5; }
.free__slots { display: flex; gap: 8px; justify-content: center; }

.stops { display: grid; }
.stop { display: grid; grid-template-columns: 24px 1fr; gap: 11px; padding: 10px 0; align-items: start; }
.stop + .stop { border-top: 1px solid var(--line); }
.stop__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--indigo-soft); border: 1px solid var(--indigo-line); color: var(--indigo); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.stop__name { display: block; font-size: var(--t-sm); font-weight: 600; }
.stop__sub  { display: block; font-size: var(--t-xs); color: var(--dim); margin-top: 1px; }

.tabs { display: flex; gap: 6px; overflow: hidden; }
.tab { font-size: var(--t-xs); font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.tab--on { background: var(--indigo-soft); color: var(--indigo); }
.tab__badge { background: var(--indigo); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; padding: 1px 4px; border-radius: 999px; text-align: center; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; }
.row + .row { border-top: 1px solid var(--line); }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.av--1 { background: #6366F1; }
.av--2 { background: #0E7490; }
.av--3 { background: #B45309; }
.av--group { background: var(--indigo-soft); border: 1px solid var(--indigo-line); color: var(--indigo); }
.av--group .ico { width: 15px; height: 15px; }
.row__body { min-width: 0; display: grid; gap: 1px; }
.row__name { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__last { font-size: var(--t-xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__time { font-size: 10px; color: var(--dim); white-space: nowrap; }

/* ── FORMULARIO ──────────────────────────────────────────────────────────
   ⚠️ Los campos NUNCA usan pill. Con el radio 999px y ancho completo, un input
   de 50px de alto se convierte en una elipse (el radio se recorta al 50% de la
   altura, pero el ojo lee la forma como una cápsula gigantesca). Radio fijo. */
.cta { text-align: center; }
.cta .lead, .cta h2 { margin-inline: auto; }
.cta h2 { max-width: 18ch; }
.wl { max-width: 500px; margin: 28px auto 0; display: grid; gap: 11px; text-align: left; }
.wl__row { display: flex; gap: 10px; flex-wrap: wrap; }
.wl__row input[type=email] { flex: 1 1 230px; }
.wl input, .wl select {
  width: 100%; height: 52px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  padding: 0 18px; font: inherit; font-size: var(--t-md);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.wl input::placeholder { color: var(--dim); }
.wl input:hover, .wl select:hover { border-color: var(--indigo-line); }
.wl input:focus, .wl select:focus { outline: none; border-color: var(--indigo); }
.wl input:focus-visible, .wl select:focus-visible { outline: none; }
.wl input[type=email]:not(:placeholder-shown):invalid { border-color: var(--alert); }
/* El botón del formulario iguala la altura del campo y comparte su radio:
   apilados tienen que leerse como una sola pieza. */
.wl .btn { height: 52px; border-radius: var(--radius-field); }
/* Casilla de aceptación. El input nativo se oculta pero sigue siendo el que
   valida (required) y el que recibe el foco: la caja dibujada es decorativa y
   refleja su estado con :checked y :focus-visible. */
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 2px 2px 0; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 21px; height: 21px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--card);
  display: grid; place-items: center;
  transition: background-color .14s var(--ease), border-color .14s var(--ease);
}
.check__box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .18s var(--ease); }
.check:hover .check__box { border-color: var(--indigo-line); }
.check input:checked + .check__box { background: var(--indigo); border-color: var(--indigo); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 2px solid var(--indigo); outline-offset: 3px; }
.check__text { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.check__text a { color: var(--indigo); }
/* Si intenta enviar sin marcar, la caja se pinta en rojo junto con el mensaje */
.wl.is-invalid .check__box { border-color: var(--alert); }
.wl__msg { font-size: var(--t-sm); color: var(--indigo); text-align: center; margin: 0; min-height: 1.5em; font-weight: 600; }
.wl__msg.err { color: var(--alert); }
.wl.is-sent .wl__row, .wl.is-sent select { opacity: .5; pointer-events: none; }
.hp { position: absolute; left: -9999px; }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES (/terminos, /privacidad)
   Antes vivían en css/styles.css con la identidad vieja (paleta coral, fondo
   crema #FFE9E0) y parecían de otro sitio. Ahora comparten esta hoja, así que
   heredan tokens, tipografía y los DOS temas sin nada propio.
   ⚠️ El TEXTO legal no se tocó: solo cambió la presentación.
   ═══════════════════════════════════════════════════════════════════════ */
.legal {
  max-width: 74ch;   /* medida de lectura larga: un texto legal se lee, no se escanea */
  margin-inline: auto;
  padding: clamp(48px, 8vw, 88px) 0 clamp(64px, 9vw, 104px);
}
.legal h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 10px; max-width: none; }
.legal h2 { font-size: clamp(19px, 2vw, 23px); line-height: 1.25; margin: 40px 0 12px; max-width: none; }
.legal h3 { font-size: var(--t-lg); margin: 26px 0 8px; }
.legal .upd {
  display: inline-flex; align-items: center;
  font-size: var(--t-sm); font-weight: 600; color: var(--indigo);
  background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin: 0 0 34px;
}
.legal p, .legal li { color: var(--muted); font-size: var(--t-lg); line-height: 1.68; }
.legal p { margin: 14px 0; }
.legal strong { color: var(--ink); }
.legal ul, .legal ol { padding-left: 22px; margin: 14px 0; }
.legal li { margin: 7px 0; }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }
.legal a { color: var(--indigo); }
.legal a.mail { font-weight: 700; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: var(--t-md); }
.legal th, .legal td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; color: var(--muted); }
.legal th { color: var(--ink); font-weight: 700; }
.back { display: inline-flex; align-items: center; gap: 8px; margin-top: 44px; font-weight: 700; color: var(--indigo); }

@media (max-width: 430px) {
  .legal { padding-top: 36px; }
  .legal p, .legal li { font-size: var(--t-md); }
}

/* ── Disponibilidad por plataforma ────────────────────────────────────────
   SOLO TIPOGRAFÍA. Antes eran dos pastillas con ícono dibujado y la caja las
   volvía protagonistas: un recuadro con borde, fondo y padding compite con el
   CTA que tiene justo arriba, y esto es un pie de página del formulario, no
   una segunda llamada a la acción. Sin la caja, el peso lo da el contraste
   —el nombre de la plataforma en versalitas, el estado en tono apagado— y se
   lee como una nota al pie, que es lo que es.
   La regla vertical entre las dos separa sin encerrar; en pantalla angosta se
   apilan y la regla desaparece. */
.stores {
  display: flex; flex-wrap: wrap; gap: 0;
  justify-content: center; align-items: center;
  margin: 30px 0 0;
}
.store { display: inline-flex; align-items: baseline; gap: 7px; }
.store + .store::before {
  content: ''; align-self: center;
  width: 1px; height: 12px; margin: 0 15px 0 22px;
  background: var(--line-strong);
}
/* Sin text-transform: uppercase. El resto de las etiquetas chicas del sitio van
   en versalitas, pero acá no se puede: "iOS" en mayúsculas queda "IOS", que no
   es como se escribe. La jerarquía la dan el peso y el tono, no la caja. */
.store__os {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: -0.005em;
  color: var(--muted);
}
.store__dot { color: var(--dim); opacity: 0.5; }
.store__when { font-size: var(--t-xs); color: var(--dim); }

@media (max-width: 520px) {
  .stores { flex-direction: column; gap: 7px; }
  .store + .store::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDINGS DE CONTENIDO COMPARTIDO (/m/p/ y /m/a/)
   Centradas y cortas: se llega desde WhatsApp, se mira tres segundos y se
   decide si abrir la app. No es una página para recorrer.
   ═══════════════════════════════════════════════════════════════════════ */
.land {
  min-height: 62vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: clamp(56px, 10vw, 104px);
  max-width: 44ch; margin-inline: auto;
}
.land__card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: grid; gap: 14px; justify-items: center;
  box-shadow: var(--mock-shadow);
}
.land__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); color: var(--dim);
}
.land__kind { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.land__body { font-size: var(--t-xl); line-height: 1.45; color: var(--ink); margin: 0; }

.land__gone h1 { font-size: clamp(26px, 5vw, 38px); max-width: none; margin-bottom: 18px; }
.land__what {
  font-size: var(--t-md); color: var(--indigo);
  background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  padding: 6px 14px; border-radius: var(--radius-pill);
  display: inline-block; margin: 0 0 18px;
}
.land__gone .lead { margin-inline: auto; font-size: var(--t-lg); }
.land__cta { margin-top: 30px; margin-bottom: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { padding-block: 44px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--t-sm); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer__links { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── BOTÓN FLOTANTE DE WHATSAPP ───────────────────────────────────────────
   Recuperado del sitio anterior. El verde es el de la marca WhatsApp (#25D366)
   y no se toca: es el color por el que se reconoce el botón, no una decisión
   nuestra. Por eso también es el único elemento del sitio que no usa los
   tokens — y funciona igual en los dos temas, porque trae su propio contraste.
   Se oculta sobre el formulario para no taparlo (misma regla que tenía antes). */
.wa-fab {
  position: fixed; z-index: 60;
  right: clamp(16px, 4vw, 28px);
  bottom: calc(clamp(16px, 4vw, 26px) + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: #25D366;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .42), 0 2px 6px -3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .16s var(--ease), background-color .16s var(--ease), opacity .2s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); background: #1FBE5A; text-decoration: none; }
.wa-fab:active { transform: scale(.95); }
.wa-fab__ico { width: 30px; height: 30px; fill: currentColor; }
.wa-fab--hidden { opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none; }
@media (max-width: 430px) { .wa-fab { width: 50px; height: 50px; } .wa-fab__ico { width: 27px; height: 27px; } }

/* ── Aparición al entrar ─────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.split__text .reveal:nth-child(2), .measure .reveal:nth-child(2), .cards .reveal:nth-child(2), .deflist .reveal:nth-child(2) { transition-delay: .05s; }
.split__text .reveal:nth-child(3), .measure .reveal:nth-child(3), .cards .reveal:nth-child(3), .deflist .reveal:nth-child(3) { transition-delay: .10s; }
.split__text .reveal:nth-child(4), .measure .reveal:nth-child(4), .cards .reveal:nth-child(4), .deflist .reveal:nth-child(4) { transition-delay: .15s; }
.split__text .reveal:nth-child(n+5), .cards .reveal:nth-child(n+5), .deflist .reveal:nth-child(n+5) { transition-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Móvil: 390 y 430 son donde se rompe primero ─────────────────────────── */
@media (max-width: 430px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 32px, var(--wrap)); }
  h1 { letter-spacing: -0.03em; }
  h2 { max-width: none; }
  .lead, .split__text .lead { max-width: none; }
  .mock--phone { max-width: 100%; }
  .hero__actions .btn { width: 100%; }
  /* El badge no tiene texto propio para estirar (es un PNG): en columna se
     centra y agranda un poco en vez de ir a 100% de ancho (deformaría). */
  .store-badge { width: 100%; justify-content: center; }
  .store-badge__img { height: auto; width: 210px; max-width: 100%; }
  /* Apilado: campo y botón comparten alto y radio → una sola pieza vertical */
  .wl__row { flex-direction: column; gap: 10px; }
  /* ⚠️ `flex: none` NO es cosmético: al pasar a columna, el eje principal es
     la ALTURA, así que el `flex: 1 1 230px` de arriba le daba 230px de alto de
     base al input y `grow` lo estiraba todavía más — un rectángulo enorme. El
     `height: 52px` no lo corrige porque en un ítem flex el flex-basis manda
     sobre el eje principal. Anulando el flex, vuelve a mandar la altura. */
  .wl__row input[type=email] { flex: none; width: 100%; }
  .wl__row .btn { width: 100%; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .block__eyebrow { margin-top: calc(var(--gap-block) * 0.7); }
  .vs__row { grid-template-columns: 74px 1fr 24px; }

  /* TOPBAR EN MÓVIL — el logotipo NO se achica: se compactan los controles.
     A 390px no entran cuatro elementos cómodos, así que el selector de idioma
     pasa a mostrar solo el código (ES/EN/…) y el CTA acorta su texto. La marca
     queda igual de grande y con aire propio. */
  .topbar { padding: 10px 0; }
  .topbar__inner { gap: 12px; }
  .topbar__right { gap: 6px; }
  .langsel {
    padding: 8px 21px 8px 10px; font-size: 12px;
    background-position: right 8px top 52%, right 4px top 52%;
  }
  .themetog { width: 34px; height: 34px; }
  .topbar__right .btn--sm { padding: 8px 13px; font-size: 12px; }
}

/* Por debajo de 360 el CTA de la barra estorba más de lo que suma: la misma
   acción está a un scroll de distancia y el logotipo importa más. */
@media (max-width: 359px) {
  .topbar__right .btn--sm { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL (rediseño ago 2026)
   Tres piezas reutilizables — fondos con vida, marco de teléfono y variantes
   de tarjeta — más los detalles de acento. Todo animado SOLO con transform y
   opacity; prefers-reduced-motion apaga todo al final del archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* Acentos globales: selección y scrollbar en el color de la marca */
::selection { background: rgba(91, 108, 240, 0.32); }

/* ── Fondos: blobs de glow índigo + capa de grano ────────────────────────
   El blob anima transform (composited); el blur es fijo, se pinta una vez.
   El grano es un feTurbulence embebido, opacity bajísima: da textura sin
   pedir una imagen. Van dentro de una sección position:relative. */
.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx__blob {
  position: absolute; width: 540px; height: 540px; border-radius: 50%;
  filter: blur(90px); opacity: .55; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgba(91, 108, 240, 0.30), transparent 62%);
}
.fx__blob--a { top: -180px; left: -140px; animation: fx-a 26s ease-in-out infinite alternate; }
.fx__blob--b {
  /* Anclado por ARRIBA a propósito: anclado a bottom, cuando el swap tardío
     de la fuente agranda el hero el blob SALTA y Lighthouse lo cuenta como
     layout shift (CLS 0.54 medido en una corrida con edge lento). Con top
     fijo, el crecimiento del contenido no lo mueve. */
  top: clamp(340px, 62vh, 720px); right: -160px;
  background: radial-gradient(circle at 50% 50%, rgba(124, 140, 245, 0.22), transparent 60%);
  animation: fx-b 34s ease-in-out infinite alternate;
}
@keyframes fx-a { to { transform: translate(70px, 44px) scale(1.12); } }
@keyframes fx-b { to { transform: translate(-56px, -32px) scale(1.08); } }
.fx__grain {
  position: absolute; inset: 0; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* En claro el glow sobre gris claro satura enseguida: se baja. */
:root[data-theme="light"] .fx__blob { opacity: .3; }
:root[data-theme="light"] .fx__grain { opacity: .025; }

/* ── Marco de teléfono ───────────────────────────────────────────────────
   Un solo componente, instanciado con distintas pantallas adentro: feed,
   plan, Estoy disponible, chats, Plan del Día. Cámara perforada y la barra
   de 5 pestañas de la app (Inicio · Descubrir · Publicar · Chats · Perfil). */
.phone {
  width: min(320px, 100%); margin-inline: auto;
  position: relative;
  background: var(--mock-surface);
  border: 1px solid var(--line); border-top-color: var(--mock-edge);
  border-radius: 38px; padding: 10px 10px 6px;
  box-shadow: var(--mock-shadow);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.phone::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: var(--mock-halo); pointer-events: none;
}
.phone > * { position: relative; }
.phone__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 8px;
  font-size: 10px; font-weight: 600; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.phone__punch {
  width: 10px; height: 10px; border-radius: 50%;
  background: #000; border: 1px solid var(--line-strong);
}
.phone__batt {
  width: 17px; height: 8px; border-radius: 3px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(90deg, var(--dim) 0 62%, transparent 62%);
  background-clip: content-box; padding: 1px;
}
.phone__screen {
  background: var(--bg);
  border-radius: 26px; padding: 12px 10px;
  overflow: hidden;
  /* minmax(0,1fr) + la cadena de min-width:0 de abajo: sin esto, un ítem de
     grid con min-width:auto se niega a bajar de su min-content, y un sello
     de countdown largo (white-space: nowrap) ENSANCHABA la columna hasta
     desbordar el marco del teléfono. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start;
  transition: background-color .2s var(--ease);
}
.phone__screen > *, .feed, .feed .mcard, .mcard__top, .mcard__kind { min-width: 0; }
.phone__nav {
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 8px 5px;
}
.phone__nav svg { width: 19px; height: 19px; stroke: var(--dim); fill: none; stroke-width: 2; }
.phone__nav .is-on svg { stroke: var(--indigo); }
.phone__nav-add {
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--indigo); display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(91, 108, 240, 0.8);
}
.phone__nav-add svg { stroke: #fff; }


/* ── Ícono grande (bento, urgencias) ─────────────────────────────────────── */
.bigico { width: 38px; height: 38px; stroke: var(--indigo); fill: none; stroke-width: 1.8; }
.bigico--txt {
  display: inline-grid; place-items: center; width: 42px; height: 38px;
  font-size: 24px; font-weight: 800; letter-spacing: -0.04em; color: var(--indigo);
}

/* ── Hero con teléfono ───────────────────────────────────────────────────── */
.section--hero { position: relative; }
.hero { display: grid; gap: clamp(38px, 5vw, 60px); align-items: center; position: relative; }
@media (min-width: 940px) { .hero { grid-template-columns: 1.08fr 0.92fr; } }
.hero__stage { position: relative; display: grid; justify-items: center; }
/* El título por palabras: cada palabra sube sola, 60 ms de escalón (inline). */
.h1w { display: inline-block; }
.js-stagger .h1w { opacity: 0; transform: translateY(0.5em); animation: wordup .55s var(--ease) forwards; animation-delay: var(--wd, 0s); }
@keyframes wordup { to { opacity: 1; transform: none; } }

/* Feed del hero: entra por arriba, muere por abajo. El colapso anima
   max-height/margin/padding — es UNA tarjeta cada 9 s, no un layout vivo. */
.feed { display: block; height: 442px; }
.feed .mcard {
  margin-bottom: 10px; max-height: 220px;
  transition: filter .5s var(--ease), opacity .5s var(--ease);
}
.feed .mcard.is-in { animation: feed-in .55s var(--ease); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-12px); } }
.feed .mcard.is-dying { filter: grayscale(1); opacity: .4; }
.feed .mcard.is-out {
  max-height: 0; opacity: 0;
  margin-bottom: 0; padding-block: 0; border-block-width: 0;
  transition: max-height .6s var(--ease), opacity .45s var(--ease), margin .6s var(--ease), padding .6s var(--ease);
}

/* Sello vivo: los dígitos cambian cada segundo, que no bailen de ancho */
.stamp { font-variant-numeric: tabular-nums; }
.stamp--alert   { color: var(--alert);   background: var(--alert-bg);   border-color: var(--alert-line); }
.stamp--caution { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-line); }

/* ── Bento "Lo que InRecint no es" ───────────────────────────────────────── */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); margin-top: 38px; }
.bento .card { display: flex; flex-direction: column; gap: 12px; }
.bento .card:hover {
  border-color: var(--indigo-line);
  box-shadow: 0 0 0 1px var(--indigo-line), 0 14px 44px -20px rgba(91, 108, 240, 0.55);
}
.bento__c1 { grid-column: span 4; }
.bento__c2, .bento__c3, .bento__c4, .bento__c5 { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__c1, .bento__c2 { grid-column: span 1; }
  .bento__c3, .bento__c4 { grid-column: span 1; }
  .bento__c5 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__c1, .bento__c2, .bento__c3, .bento__c4, .bento__c5 { grid-column: auto; }
}

/* ── La zona como radar ──────────────────────────────────────────────────── */
.radarbox { position: relative; max-width: 380px; margin-inline: auto; }
.radar { display: block; width: 100%; height: auto; color: var(--dim); }
.radar__grid { fill: currentColor; opacity: .35; }
.radar__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.radar__pulse {
  fill: none; stroke: var(--indigo); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: radar-pulse 4.2s var(--ease) infinite;
}
@keyframes radar-pulse {
  0%   { transform: scale(0.12); opacity: .9; }
  70%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}
.radar__me { fill: var(--indigo); }
.radar__mehalo { fill: var(--indigo); opacity: .22; }
.radar__halo {
  fill: var(--indigo); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: dot-glow 4.2s ease-in-out infinite; animation-delay: var(--dly, 0s);
}
.radar__pt { fill: var(--indigo); }
@keyframes dot-glow {
  0%, 100% { opacity: .08; transform: scale(.8); }
  50%      { opacity: .28; transform: scale(1.15); }
}
.radar__tip { position: absolute; left: 64%; top: 22%; }
.zonecards { display: grid; gap: 12px; margin-top: 30px; }
.zonecard { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.zonecard svg { width: 22px; height: 22px; flex: none; stroke: var(--indigo); fill: none; stroke-width: 2; margin-top: 3px; }
.zonecard h3 { font-size: var(--t-md); margin-bottom: 3px; }
.zonecard p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--muted); }

/* ── Los 16 tipos, tocables ──────────────────────────────────────────────── */
.kinds { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: 36px; align-items: start; }
@media (min-width: 900px) { .kinds { grid-template-columns: 1.3fr 1fr; } }
.kchips { display: flex; flex-wrap: wrap; gap: 8px; }
.kchips .chip {
  cursor: pointer; font-family: inherit;
  transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.kchips .chip:hover { border-color: var(--indigo-line); color: var(--ink); }
.kchips .chip--on { box-shadow: 0 0 18px -6px rgba(91, 108, 240, 0.6); }
.kcard { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.kcard.is-swap { opacity: 0; transform: translateY(7px); }
.kcard__kind { display: inline-flex; align-items: center; gap: 6px; }
.kcard__kind svg { width: 13px; height: 13px; stroke: var(--indigo); fill: none; stroke-width: 2.2; }

/* ── Urgencias: dos tarjetas grandes con su color ────────────────────────── */
.ucards { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 38px; }
@media (min-width: 820px) { .ucards { grid-template-columns: 1fr 1fr; } }
.ucard { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius); border: 1px solid; }
.ucard--alert   { background: var(--alert-bg);   border-color: var(--alert-line); }
.ucard--caution { background: var(--caution-bg); border-color: var(--caution-line); }
.ucard__ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.ucard--alert   .ucard__ico { background: var(--alert); }
.ucard--caution .ucard__ico { background: var(--caution); }
.ucard__ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.1; }
.ucard__body { min-width: 0; display: grid; gap: 8px; align-content: start; }
.ucard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ucard__body p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink); }
.ubullets { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .ubullets { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ubullets li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: var(--t-md); line-height: 1.55; }
.ubullets svg { width: 18px; height: 18px; flex: none; margin-top: 3px; stroke: var(--indigo); fill: none; stroke-width: 2; }
.ubullets svg.ico-fill { fill: var(--indigo); stroke: none; }

/* ── "Estoy disponible" jugable ──────────────────────────────────────────── */
.free__num { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; }
.free__num .free__count { position: relative; z-index: 1; transition: transform .25s var(--ease); }
.free.is-pop .free__count { transform: scale(1.18); }
.free__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--indigo-line); opacity: .5;
}
.free__ring--b { inset: -14px; opacity: .25; }
.free.is-live .free__ring { animation: ring-out 1.1s var(--ease) 2; }
.free.is-live .free__ring--b { animation-delay: .18s; }
@keyframes ring-out { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.free__btn { margin: 14px auto 0; display: inline-flex; }
.free__done { display: grid; gap: 10px; justify-items: center; margin-top: 6px; }
.free__done .mcard { width: 100%; text-align: left; }
.free__bang { margin: 4px 0 0; font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.free__avs { display: flex; }
.free__avs .av { width: 28px; height: 28px; font-size: 10px; border: 2px solid var(--elevated); }
.free__avs .av + .av { margin-left: -8px; }
.linkbtn {
  background: none; border: none; cursor: pointer;
  color: var(--indigo); font: inherit; font-size: var(--t-sm); font-weight: 600;
  padding: 6px 10px; display: inline-block; margin-inline: auto;
}
.linkbtn:hover { text-decoration: underline; }

/* ── La tarjeta que muere (sección expiración) ───────────────────────────── */
.die { max-width: 380px; margin-inline: auto; width: 100%; }
.die .mcard { margin-bottom: 11px; background: var(--card); box-shadow: var(--mock-shadow); }
.die__card {
  max-height: 240px; overflow: hidden;
  transition: filter .7s var(--ease), opacity .7s var(--ease);
}
.die__card.is-dead { filter: grayscale(1); opacity: .38; }
.die__card.is-going {
  max-height: 0; opacity: 0; margin-bottom: 0; padding-block: 0; border-block-width: 0;
  transition: max-height .8s var(--ease), opacity .6s var(--ease), margin .8s var(--ease), padding .8s var(--ease), filter .7s var(--ease);
}
.die__after { text-align: center; display: grid; gap: 2px; margin-bottom: 14px; }
.die__msg { color: var(--dim); font-size: var(--t-md); margin: 6px 0 0; }

/* ── Lista de espera: spinner y check ────────────────────────────────────── */
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wl__ok { display: none; justify-content: center; margin-top: 4px; }
.wl.is-sent .wl__ok { display: flex; }
.wl__ok svg { width: 52px; height: 52px; fill: none; stroke: var(--indigo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl__ok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: dash 0.7s var(--ease) forwards; opacity: .45; }
.wl__ok path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: dash 0.45s var(--ease) 0.5s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* Barra del plan: se llena al entrar en pantalla */
.plan__fill { width: 0; transition: width 1.1s var(--ease) .3s; }
.plan__bar.in .plan__fill { width: 75%; }

/* ── Reduced motion: quieto y completo ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx__blob, .radar__pulse, .radar__halo,
  .feed .mcard.is-in, .js-stagger .h1w, .free.is-live .free__ring,
  .btn.is-loading::after, .wl__ok circle, .wl__ok path { animation: none; }
  .js-stagger .h1w { opacity: 1; transform: none; }
  .wl__ok circle, .wl__ok path { stroke-dashoffset: 0; }
  .plan__fill { transition: none; }
  .kcard, .die__card, .feed .mcard { transition: none; }
}

@media (max-width: 430px) {
  .feed { height: 400px; }
  .phone { border-radius: 34px; }
  .ucard { padding: 18px; gap: 13px; }
}

/* ── Ajustes P1: disponible jugable y radar ──────────────────────────────── */
.free__slots { margin-top: 10px; }
.free__who { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.free__names { font-size: var(--t-xs); color: var(--dim); line-height: 1.4; }
.free__btn { margin-top: 14px; }
.kcard .mcard__body { min-height: 3.1em; }

/* [hidden] SIEMPRE gana. Sin esto, cualquier display explícito de un
   componente (.free__done { display:grid }, .btn { display:inline-flex })
   le pasa por encima al [hidden]{display:none} del UA stylesheet, y los
   paneles "ocultos" de los widgets quedaban a la vista. */
[hidden] { display: none !important; }

/* ── P2: acentos de lujo baratos ─────────────────────────────────────────── */
html { scrollbar-color: rgba(91, 108, 240, 0.45) transparent; }
.btn--primary:hover { box-shadow: 0 0 26px -6px rgba(91, 108, 240, 0.75); }

/* ── Entrada del hero SOLO con CSS ───────────────────────────────────────
   El hero no usa .reveal: eso nace en opacity 0 y espera al JS (IO) para
   mostrarse, y el LCP quedaba clavado en la carga de los scripts (medido
   en prod: FCP = LCP = 3,2 s). Con animación CSS pura el primer pintado
   ya trae el hero entrando, con o sin JS. */
.rise { animation: rise .6s var(--ease) both; }
.rise--2 { animation-delay: .08s; }
.rise--3 { animation-delay: .16s; }
.rise--4 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ── Mascota perdida interactiva ─────────────────────────────────────────── */
.ucard--pm { cursor: pointer; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.ucard--pm:hover { border-color: var(--alert); transform: translateY(-2px); }
.ucard--pm:focus-visible { outline: 2px solid var(--alert); outline-offset: 3px; }
.ucard__photo { flex: none; align-self: center; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.pm-hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: var(--t-xs); font-weight: 600; color: var(--alert);
}
.pm-hint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* El aviso: teléfono superpuesto. Entra con fade + subida; el fondo apaga
   la página. Escape, el botón volver y tocar afuera lo cierran (home.js). */
.pmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; }
.pmodal__back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .26s var(--ease); }
.pmodal__phone { width: min(340px, 94vw); opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .26s var(--ease), transform .26s var(--ease); }
.pmodal.is-in .pmodal__back { opacity: 1; }
.pmodal.is-in .pmodal__phone { opacity: 1; transform: none; }
.pmodal__screen { max-height: min(76vh, 640px); overflow-y: auto; scrollbar-width: thin; gap: 13px; }
.pmodal__bar { display: flex; align-items: center; gap: 10px; }
.pmodal__bar .stamp { margin-left: auto; }
.pmodal__backbtn {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--elevated); border: 1px solid var(--line); color: var(--ink);
}
:root[data-theme="light"] .pmodal__backbtn { background: #F7F8FA; }
.pmodal__backbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pmodal__photo { width: 100%; height: auto; border-radius: 14px; display: block; }
.pmodal__head { display: grid; gap: 2px; }
.pmodal__head h3 { font-size: var(--t-lg); }
.pmodal__txt { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
/* Recompensa: chip discreto junto al nombre (misma escala que los sellos).
   Rafael bajó la caja roja grande: en una app esto es un badge, no un cartel. */
.pmodal__namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmodal__reward {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--alert);
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid var(--alert-line);
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pmodal__reward svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.pmodal__reward b { font-weight: 700; }
.pmodal__reward .dot { opacity: .55; }
/* Contacto mediado: fila de lista de app, no un botón que grita. Sin número. */
.pmodal__contactwrap { position: relative; }
.pmodal__contact {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--elevated); border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--radius-sm); padding: 11px 13px;
  cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .16s var(--ease);
}
.pmodal__contact:hover { border-color: var(--line-strong); }
:root[data-theme="light"] .pmodal__contact { background: #F7F8FA; }
.pmodal__wspico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
}
.pmodal__wspico svg { width: 20px; height: 20px; fill: currentColor; }
.pmodal__contacttxt { display: grid; gap: 1px; min-width: 0; }
.pmodal__contactmain { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.pmodal__contactsub { font-size: var(--t-xs); color: var(--dim); }
.pmodal__toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--elevated); color: var(--ink); border: 1px solid var(--line-strong);
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5);
}
.pmodal__toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.pmapbox { position: relative; border-radius: 14px; overflow: hidden; }
.pmap-img { display: block; width: 100%; height: auto; }
.pmap-img--light { display: none; }
:root[data-theme="light"] .pmap-img--dark { display: none; }
:root[data-theme="light"] .pmap-img--light { display: block; }
.pmap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap-zone { fill: rgba(229, 72, 77, 0.10); stroke: var(--alert); stroke-width: 1.5; }
.pmap-halo {
  fill: var(--alert); opacity: .2;
  transform-box: fill-box; transform-origin: center;
  animation: dot-glow 3.2s ease-in-out infinite;
}
.pmap-pin { fill: var(--alert); stroke: #fff; stroke-width: 2; }
.pmap-attr {
  position: absolute; right: 6px; bottom: 5px;
  font-size: 9px; line-height: 1; color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.45); padding: 3px 6px; border-radius: 6px;
}
:root[data-theme="light"] .pmap-attr { color: rgba(0, 0, 0, 0.6); background: rgba(255, 255, 255, 0.72); }
.pmodal__cap { margin: -4px 0 0; font-size: var(--t-xs); color: var(--dim); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pmodal__back, .pmodal__phone, .pmodal__toast { transition: none; }
  .pmodal__back, .pmodal.is-in .pmodal__phone { opacity: 1; transform: none; }
  .pmap-halo { animation: none; }
  .ucard--pm:hover { transform: none; }
}

/* ── Revivir lo que quedó quieto (v3 punto 4) ────────────────────────────
   Tres piezas se sentían muertas entre secciones vivas. Las tres animan
   al entrar en pantalla, colgadas del .reveal→.in que ya existe (cero JS):
   el estado oculto vive en .reveal:not(.in), así el <noscript> del head
   (que fuerza .reveal visible) las cubre también sin JS.
   1 · zona vs zona: las barras se llenan (--w viene del markup) y el
       "faltan 6 puntos" aparece después de las barras.
   2 · Plan del Día: las paradas se encienden en orden.
   3 · Chats: las filas entran como mensajes llegando y el badge de
       Solicitudes hace un pop al final. */
.vs__fill { width: var(--w, 0); transition: width 1.2s var(--ease) .25s; }
.split__visual.reveal:not(.in) .vs__fill { width: 0 !important; }
.vs__gap { transition: opacity .5s var(--ease) 1.1s; }
.split__visual.reveal:not(.in) .vs__gap { opacity: 0; }

.stop { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stop:nth-child(2) { transition-delay: .16s; }
.stop:nth-child(3) { transition-delay: .32s; }
.split__visual.reveal:not(.in) .stop { opacity: 0; transform: translateY(10px); }

.row { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.row:nth-child(2) { transition-delay: .12s; }
.row:nth-child(3) { transition-delay: .24s; }
.row:nth-child(4) { transition-delay: .36s; }
.split__visual.reveal:not(.in) .row { opacity: 0; transform: translateX(14px); }
@keyframes badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.split__visual.reveal.in .tab__badge { animation: badge-pop .5s var(--ease) .6s backwards; }

@media (prefers-reduced-motion: reduce) {
  .vs__fill, .vs__gap, .stop, .row { transition: none; }
  #planCard { transition: none; }
  #pCount.is-pop { animation: none; }
  .split__visual.reveal.in .tab__badge { animation: none; }
}

/* ── Soporte: correo revelado + copiar ───────────────────────────────────── */
.mailreveal { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.mailreveal__panel { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; }
.mailreveal__copy { margin: 0; }   /* el margin-inline:auto del .linkbtn acá lo empujaba lejos del correo */
.mailreveal__panel[hidden] { display: none !important; }
.mailreveal__addr {
  font-family: inherit; font-size: var(--t-md); font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong);
  padding: 9px 14px; border-radius: var(--radius-sm);
}
.mailreveal__open { display: block; width: 100%; text-align: center; font-size: var(--t-xs); color: var(--dim); }
.mailreveal__open:hover { color: var(--indigo); }
.mailreveal__toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--elevated); color: var(--ink); border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5);
}
.mailreveal__toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.mailreveal--foot { align-items: flex-start; }
.mailreveal__footbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--muted);
}
.mailreveal__footbtn:hover { color: var(--ink); }
.mailreveal--foot .mailreveal__addr { font-size: var(--t-sm); padding: 6px 10px; }
@media (prefers-reduced-motion: reduce) { .mailreveal__toast { transition: none; } }

/* ── "Me sumo": el plan se completa ──────────────────────────────────────── */
.plan__joinbtn { margin-top: 4px; padding: 11px 18px; font-size: var(--t-sm); min-width: 124px; justify-content: center; }
.plan__joinbtn:active { transform: scale(.96); }
.plan__joinbtn:disabled { opacity: 1; cursor: default; transform: none; background: var(--indigo); }
.plan__bar.in.is-full .plan__fill { width: 100%; }
#planCard { transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }
#planCard.is-joined { border-color: var(--indigo-line); box-shadow: 0 0 0 1px var(--indigo-line), 0 0 28px -6px rgba(91, 108, 240, 0.65); }
.plan__donebox { display: grid; gap: 8px; }
.plan__bang { margin: 2px 0 0; font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.plan__donebox .linkbtn { margin: 0; padding: 4px 8px; }
.av--4 { background: #15803D; }
@keyframes countpop { 0% { transform: scale(1); } 50% { transform: scale(1.22); } 100% { transform: scale(1); } }
#pCount { display: inline-block; }
#pCount.is-pop { animation: countpop .35s var(--ease); }

/* ── Sandbox: prueba publicar ────────────────────────────────────────────── */
.kleft { display: grid; gap: 0; align-content: start; }
.composer { display: grid; gap: 10px; margin-top: 18px; max-width: 560px; }
.composer__sugs { display: flex; flex-wrap: wrap; gap: 7px; }
.composer__sugs .chip { cursor: pointer; font-family: inherit; text-align: left; }
.composer__sugs .chip:hover { border-color: var(--indigo-line); color: var(--ink); }
.composer__row { position: relative; }
.composer__input {
  width: 100%; height: 48px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  padding: 0 64px 0 14px; font: inherit; font-size: var(--t-md);
  transition: border-color .16s var(--ease);
}
.composer__input::placeholder { color: var(--dim); }
.composer__input:focus { outline: none; border-color: var(--indigo); }
.composer__count {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.composer__pub { justify-self: start; padding: 11px 22px; font-size: var(--t-sm); }
.composer__pub:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.composer__pub:active { transform: scale(.96); }
.composer__done { margin: 0; font-size: var(--t-sm); color: var(--indigo); font-weight: 600; }
/* la tarjeta recién publicada aterriza con glow y lo suelta despacio */
.feed .mcard.is-mine { box-shadow: 0 0 0 1.5px var(--indigo), 0 0 26px -4px rgba(91, 108, 240, 0.8); }
.feed .mcard { transition: filter .5s var(--ease), opacity .5s var(--ease), box-shadow .8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .composer__pub:active { transform: none; }
}

/* ── La adivinanza jugable ───────────────────────────────────────────────── */
.riddle { position: relative; margin-top: 28px; max-width: 480px; background: var(--card); box-shadow: var(--mock-shadow); }
.riddle__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.riddle__opt { cursor: pointer; font-family: inherit; transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease); }
.riddle__opt:hover { border-color: var(--indigo-line); color: var(--ink); }
/* transition:none: el acierto pega el salto (y de paso esquiva un artefacto
   del headless donde la transición congelada dejaba el fondo viejo) */
.riddle__opt.is-right { background: var(--indigo); border-color: var(--indigo); color: #fff; font-weight: 600; transition: none; }
.riddle__opt.is-off { opacity: .4; cursor: default; }
.riddle__opt.is-wrong { animation: shakex .42s var(--ease); border-color: var(--alert); color: var(--alert); }
@keyframes shakex { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
.riddle__msg { margin: 2px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--indigo); }
.riddle__cf { position: absolute; inset: 0; pointer-events: none; }
.riddle__cf span {
  position: absolute; left: 50%; top: 58%; width: 7px; height: 7px; border-radius: 2px;
  background: var(--indigo); animation: cffly .9s var(--ease) forwards;
}
@keyframes cffly { from { opacity: 1; transform: translate(0, 0) rotate(0deg); } to { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -70px)) rotate(var(--rt, 180deg)); } }
@media (prefers-reduced-motion: reduce) {
  .riddle__opt.is-wrong { animation: none; }
  .riddle__cf span { animation: none; opacity: 0; }
}

/* ── Marquee de tipos (separador) ────────────────────────────────────────── */
.marquee { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); }
.marquee__track {
  display: inline-flex; gap: 12px; width: max-content;
  animation: marq 52s linear infinite; will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
/* la mitad extra que hace el loop invisible: dos copias, -50% */

/* ── Tilt 3D sutil del bento (solo pointer:fine; JS) ─────────────────────── */
@media (pointer: fine) {
  .bento .card { transition: border-color .18s var(--ease), transform .25s var(--ease), box-shadow .18s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ── Altura RESERVADA del widget de tipos (bug de device: la rotación
   cambiaba la altura y empujaba la página mientras leías más abajo).
   Valores MEDIDOS con sonda real sobre los 16 tipos × 5 idiomas:
     375px:  tarjeta 147px (de/other) · sugerencias 164px (fr/moment)
     900px:  tarjeta 147px (de/other) · sugerencias 113px (es/moment)
     1440px: tarjeta 130px           · sugerencias 113px
   Entre 431-899px la columna es MÁS ancha que a 375 ⇒ los máximos de 375
   cubren de sobra. Cambiar de tipo no mueve la altura total ni un píxel;
   la caja de sugerencias ya no se esconde en los tipos sin sugerencias
   (queda el hueco reservado). -->
.composer__sugs { min-height: 164px; align-content: flex-start; }
.kcard { min-height: 147px; align-content: start; }
@media (min-width: 900px) {
  .composer__sugs { min-height: 113px; }
  .kcard { min-height: 147px; }
}

/* ══════════════ CHIP DE ZONA (tanda v9) ══════════════
   Personaliza los mockups con el barrio del visitante. La banda .zonebar
   RESERVA su altura: el chip nace [hidden] hasta que home.js lo enciende,
   y sin altura reservada su aparición empujaría todo lo de abajo (CLS).
   El panel sí empuja al abrirse, pero responde a un tap: exento de CLS. */
.zonebar {
  min-height: 44px; margin-top: 6px;
  display: grid; justify-items: center; align-content: start; gap: 10px;
  position: relative; z-index: 1;   /* sobre los blobs decorativos del hero */
}
.zonechip {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 5px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}
.zonechip__pin { width: 13px; height: 13px; stroke: var(--indigo); fill: none; flex: none; }
.zonechip b { color: var(--ink); font-weight: 700; }
.zonechip__btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--indigo); font: inherit; font-size: 12.5px; font-weight: 700;
}
.zonechip__btn:hover { text-decoration: underline; }
.zonepanel {
  width: min(340px, 100%); padding: 14px 16px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.zonepanel__q { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
/* Grilla de ciudades: el rediseño del chip — el input y "usar mi ubicación"
   se fueron; se elige de una lista cerrada y cada ciudad trae su paquete. */
.zonepanel__cities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.zonepanel__city {
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600;
}
.zonepanel__city:hover { border-color: var(--indigo-line); }
.zonepanel__city.is-on { background: var(--indigo-soft); border-color: var(--indigo-line); color: var(--indigo); }

/* ══════════════ SCROLL-DRIVEN (tanda v9) ══════════════
   Mejora progresiva: donde existe animation-timeline (@supports), los
   reveals de TEXTO entran ligados al scroll real — mientras scrolleás,
   no de golpe. Donde no existe, queda intacto el sistema IO + .in de
   app.js. Los widgets con lógica propia (mockups .split__visual, .kinds,
   .plan__bar, .ucard, .riddle) se quedan con el one-shot del IO: un
   widget interactivo no puede quedar a media opacidad si el scroll se
   detiene a mitad de la entrada. reduced-motion apaga el bloque entero. */
.pagebar {
  /* Barra de progreso que "vence": la página entera es un countdown que se
     consume al leerla — mismo índigo y lenguaje de los sellos. Decorativa:
     sin animation-timeline o con reduced-motion NO se muestra (este
     display:none manda; el block vive abajo, gateado). Sin CSS cargado es
     un div vacío estático de altura cero: no mueve nada (CLS 0). */
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 70; pointer-events: none;
  background: var(--indigo);
  box-shadow: 0 0 8px var(--indigo-line);
  transform-origin: 0 50%; transform: scaleX(0);
}
@keyframes pagebar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reveal-scroll {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal:not(.split__visual):not(.kinds):not(.plan__bar):not(.ucard):not(.riddle) {
      opacity: 1; transform: none; transition: none;   /* neutraliza el camino IO */
      animation: reveal-scroll ease-out both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
  }
  @supports (animation-timeline: scroll()) {
    .pagebar {
      display: block;
      animation: pagebar-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}