/* ==========================================================================
   Todos Bien — sitio público
   Los colores salen de src/theme/tokens.ts de la app (azul de marca #0D6BC9,
   elegido por accesibilidad: 5.30:1 contra blanco, WCAG AA para texto).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Marca */
  --accent: #0d6bc9;
  --accent-hover: #0b5aa8;
  --accent-soft: #e2f0fd;
  --accent-text: #ffffff;
  --accent-deep: #084b8f;

  /* Azul fijo para superficies que SIEMPRE llevan texto blanco encima
     (panel del hero, tarjeta destacada, plan premium, CTA final).
     A propósito no se redefine en modo oscuro: `--accent` sí se aclara para
     que los enlaces sean legibles sobre negro, y ese azul claro con texto
     blanco encima daría un contraste malísimo. */
  --brand: #0d6bc9;
  --brand-light: #1a7ddd;
  --brand-deep: #084b8f;
  --ink: #101418;

  /* Superficies */
  --bg: #ffffff;
  --bg-grouped: #f2f2f7;
  --surface: #ffffff;
  --surface-sunken: #f2f2f7;
  --border: #e3e3e8;
  --border-strong: #c6c6c8;

  /* Texto */
  --text: #000000;
  --text-secondary: #6c6c70;
  --text-tertiary: #a0a0a5;

  /* Estados (mismos de la app) */
  --safe: #34c759;
  --safe-soft: #e3f8e9;
  --safe-strong: #1b7a33;
  --danger: #ff3b30;
  --danger-soft: #ffe5e3;
  --danger-strong: #c21207;
  --helping: #ffb800;
  --helping-soft: #fff3d4;
  --helping-strong: #845c00;
  --unconfirmed: #8e8e93;
  --unconfirmed-soft: #efeff0;

  /* Tipografía */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Radios (Radius de la app) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-3xl: 36px;
  --r-pill: 999px;

  /* Espaciado */
  --gap: 20px;
  --pad-section: clamp(56px, 8vw, 112px);
  --shell: 1240px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(13, 27, 51, 0.16);
  --shadow-lg: 0 32px 64px -24px rgba(13, 27, 51, 0.28);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #5ca8f5;
    --accent-hover: #7cbaf8;
    --accent-soft: #12293f;
    --accent-text: #00121f;
    --accent-deep: #0d6bc9;

    --bg: #000000;
    --bg-grouped: #0a0a0c;
    --surface: #1c1c1e;
    --surface-sunken: #121214;
    --border: #38383a;
    --border-strong: #48484a;

    --text: #ffffff;
    --text-secondary: #aeaeb2;
    --text-tertiary: #7c7c80;

    --safe: #30d158;
    --safe-soft: #10301a;
    --safe-strong: #5de07c;
    --danger: #ff453a;
    --danger-soft: #3a1310;
    --danger-strong: #ff8078;
    --helping: #ffd60a;
    --helping-soft: #33290a;
    --helping-strong: #ffe066;
    --unconfirmed: #98989d;
    --unconfirmed-soft: #2a2a2c;

    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8);
  }
}

/* --- 2. Base ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--bg-grouped);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 18px;
  border-radius: var(--r-pill);
}

.skip-link:focus {
  left: 16px;
}

/* --- 3. Layout ---------------------------------------------------------- */

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: var(--pad-section);
}

.section--tight {
  padding-block: clamp(40px, 5vw, 72px);
}

.stack-sm > * + * {
  margin-top: 12px;
}

.stack > * + * {
  margin-top: 20px;
}

/* --- 4. Tipografía utilitaria ------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Un inline-flex se dimensiona por su contenido y no encoge solo: sin este
     tope, un chip largo como "Hecho en Perú · Datos del IGP y el USGS"
     desbordaba el ancho de la pantalla en móvil. */
  max-width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  line-height: 1;
}

.eyebrow--accent {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.eyebrow--ghost {
  background: transparent;
}

.display {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  letter-spacing: -0.035em;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
}

.h4 {
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-secondary);
  max-width: 62ch;
}

.muted {
  color: var(--text-secondary);
}

.small {
  font-size: 0.86rem;
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
}

.center {
  text-align: center;
}

.center .lede {
  margin-inline: auto;
}

/* --- 5. Botones --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  border-color: var(--border-strong);
}

.btn--onblue {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.btn--onblue:hover {
  background: rgba(255, 255, 255, 0.24);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 0.9rem;
}

.btn .arrow {
  transition: transform 0.18s ease;
}

.btn:hover .arrow {
  transform: translate(2px, -2px);
}

/* Badges de tienda */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.store:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.store svg {
  flex: none;
}

.store span {
  display: block;
  line-height: 1.15;
}

.store .store__top {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.store .store__name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.store[aria-disabled="true"] {
  opacity: 0.62;
  cursor: default;
}

.store[aria-disabled="true"]:hover {
  transform: none;
  border-color: var(--border);
}

/* --- 6. Header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-grouped) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.08rem;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--brand-light), var(--brand-deep));
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 2px 8px -2px rgba(13, 107, 201, 0.6);
}

.brand__mark svg {
  width: 19px;
  height: 19px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
}

.nav__links a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: 0.93rem;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav__links a:hover {
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 17px;
  height: 1.8px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.24s ease, opacity 0.18s ease;
}

.nav__toggle span + span {
  margin-top: 4.5px;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.3px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.3px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__toggle {
    display: grid;
  }

  .nav__links {
    position: absolute;
    inset: calc(100% + 8px) 20px auto 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links a {
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--text);
  }

  .nav__cta .btn {
    display: none;
  }
}

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(40px, 6vw, 80px);
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.hero__copy {
  background: var(--surface);
  border-radius: var(--r-3xl);
  border: 1px solid var(--border);
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.hero__copy h1 {
  max-width: 14ch;
}

.hero__copy .lede {
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* El teléfono se recorta contra el borde inferior del panel, así que el panel
   lleva overflow:hidden. El sello y las tarjetas flotantes, que sí tienen que
   salirse, viven en este contenedor, que ocupa exactamente la misma caja. */
.hero__stage {
  position: relative;
  display: grid;
}

.hero__panel {
  position: relative;
  border-radius: var(--r-3xl);
  background: linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 45%, #0a5099 100%);
  overflow: hidden;
  min-height: 460px;
  display: grid;
  place-items: end center;
  padding-top: 46px;
}

.hero__panel::before {
  /* retícula sutil, como el ícono de la app */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 78%);
}

.hero__panel-label {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.hero__float {
  position: absolute;
  z-index: 4;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  animation: float 6s ease-in-out infinite;
}

.hero__float--a {
  top: 70px;
  right: -16px;
}

/* Bien abajo, para no chocar con el sello (que ocupa de 90px a 208px). */
.hero__float--b {
  bottom: 34px;
  left: -26px;
  animation-delay: -3s;
}

.hero__float .small {
  color: var(--text-secondary);
}

.hero__float strong {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* Sello circular giratorio */
.seal {
  position: absolute;
  z-index: 6;
  left: -58px;
  bottom: 90px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
}

.seal svg.seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 22s linear infinite;
}

.seal svg.seal__ring text {
  font-family: var(--font-mono);
  font-size: 9.1px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  fill: var(--text-secondary);
}

.seal__core {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  color: #fff;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seal svg.seal__ring,
  .hero__float {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  /* En una columna el sello ya no cae entre dos tarjetas: si se sale del
     panel tapa los botones de descarga de la tarjeta de arriba. */
  .seal {
    left: auto;
    right: 16px;
    bottom: 20px;
    width: 92px;
    height: 92px;
  }

  .hero__float--a {
    right: 12px;
  }

  .hero__float--b {
    left: 12px;
    bottom: 24px;
  }

  .hero__panel {
    min-height: 420px;
  }
}

/* En pantallas de teléfono el panel es apenas más ancho que la maqueta, así que
   el sello y las tarjetas flotantes caen encima de la pantalla del teléfono y
   tapan justo lo que se quiere mostrar. Son decoración: se ocultan. */
@media (max-width: 700px) {
  .seal,
  .hero__float {
    display: none;
  }

  .hero__panel {
    min-height: 500px;
  }
}

/* --- 8. Maqueta de teléfono -------------------------------------------- */

.phone {
  position: relative;
  z-index: 2;
  width: min(300px, 78%);
  border-radius: 44px;
  background: #0b0b0d;
  padding: 9px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.phone__screen {
  position: relative;
  border-radius: 36px;
  background: #f2f2f7;
  overflow: hidden;
  aspect-ratio: 9 / 18.5;
  color: #000;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  background: #0b0b0d;
  border-radius: var(--r-pill);
  z-index: 5;
}

.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.phone__status-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0.85;
}

.phone__body {
  flex: 1;
  overflow: hidden;
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.phone__nav strong {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.phone__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d6bc9;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

/* Tarjeta de alerta */
.p-alert {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 59, 48, 0.28);
  box-shadow: 0 8px 20px -12px rgba(255, 59, 48, 0.5);
}

.p-alert__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffe5e3;
  color: #c21207;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
}

.p-alert__mag {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
}

.p-alert__mag b {
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #c21207;
  /* Sin esto, en el teléfono angosto la magnitud se parte en "M" / "5.8". */
  white-space: nowrap;
}

.p-alert__mag span {
  font-size: 11px;
  color: #6c6c70;
}

.p-alert__meta {
  font-size: 10.5px;
  color: #6c6c70;
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.p-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6c6c70;
  font-family: var(--font-mono);
}

.p-states {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.p-state {
  border-radius: 12px;
  padding: 9px 5px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  border: 1.5px solid transparent;
}

.p-state em {
  display: block;
  font-size: 13px;
  font-style: normal;
  margin-bottom: 3px;
}

.p-state--safe {
  background: #e3f8e9;
  color: #1b7a33;
  border-color: #34c759;
}

.p-state--help {
  background: #fff;
  color: #6c6c70;
  border-color: #e3e3e8;
}

.p-circle {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  flex: 1;
}

.p-circle__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.p-circle__count {
  font-size: 10px;
  font-weight: 700;
  color: #1b7a33;
  background: #e3f8e9;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
}

.p-person {
  text-align: center;
}

.p-ring {
  width: 40px;
  height: 40px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #b9c2cc;
  position: relative;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ring, #8e8e93);
}

.p-ring i {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ring, #8e8e93);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
}

.p-person span {
  font-size: 9.5px;
  color: #3a3a3c;
  display: block;
}

.p-tabbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding: 9px 0 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 8.5px;
  color: #8e8e93;
  margin-inline: -14px;
}

.p-tab {
  text-align: center;
  line-height: 1.35;
}

.p-tab em {
  display: block;
  font-size: 14px;
  font-style: normal;
}

.p-tab.is-active {
  color: #0d6bc9;
  font-weight: 600;
}

/* Variante "sin alerta" */
.p-calm {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid #e3e3e8;
}

.p-calm__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18);
  flex: none;
}

.p-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f2f2f7;
  font-size: 11px;
}

.p-check:last-child {
  border-bottom: 0;
}

.p-check em {
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  background: #34c759;
  flex: none;
}

.p-check em.is-pending {
  background: #ffb800;
}

.p-check span {
  margin-left: auto;
  color: #8e8e93;
  font-size: 10px;
}

/* --- 9. Franja de confianza -------------------------------------------- */

.trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.trustbar > div {
  background: var(--surface);
  padding: 22px 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.trustbar svg {
  color: var(--accent);
  flex: none;
  margin-top: 2px;
}

.trustbar strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
}

.trustbar p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .trustbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .trustbar {
    grid-template-columns: 1fr;
  }
}

/* --- 10. Bloques de sección -------------------------------------------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head.center {
  align-items: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 2.6vw, 32px);
}

.panel--sunken {
  background: var(--surface-sunken);
  border-color: transparent;
}

.panel--accent {
  background: var(--accent-soft);
  border-color: transparent;
}

/* Pasos */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  counter-reset: step;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 26px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-soft);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  font-weight: 600;
}

.step p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Bento de funciones */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.feature--highlight {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}

.feature--highlight .feature__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.feature--highlight p {
  color: rgba(255, 255, 255, 0.88);
}

.feature__icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

.feature p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.feature__link {
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.feature--highlight .feature__link {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.feature__link:hover {
  text-decoration: none;
}

@media (max-width: 1080px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .bento {
    grid-template-columns: 1fr;
  }
}

/* Split (texto + visual) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.split--reverse .split__visual {
  order: -1;
}

.split__visual {
  border-radius: var(--r-3xl);
  background: linear-gradient(155deg, var(--brand-light), var(--brand) 55%, #0a5099);
  padding: 40px 0 0;
  display: grid;
  place-items: end center;
  min-height: 440px;
  position: relative;
  overflow: hidden;
}

.split__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 22% 18%,
    rgba(255, 255, 255, 0.22),
    transparent 55%
  );
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__visual {
    order: 0;
  }

  .split__visual {
    min-height: 400px;
  }
}

/* Lista con check */
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
}

.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.checklist .tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.checklist strong {
  display: block;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}

.checklist p {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* Bloque "lo que NO hace".
   Es una tarjeta oscura fija en los dos temas. Invertirla con --text/--bg
   la volvía blanca en modo oscuro y dejaba ilegible el texto blanco de
   adentro (el chip y los párrafos). */
.honest {
  background: var(--ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-3xl);
  padding: clamp(32px, 5vw, 64px);
}

.honest h2,
.honest h3,
.honest .h3 {
  color: #fff;
}

.honest .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82);
}

.honest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 36px;
}

.honest__grid > div {
  background: var(--ink);
  padding: 28px 26px 32px;
}

.honest__grid h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.honest__grid p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.55;
}

.honest__no {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* El #FF3B30 del token queda en 3.4:1 sobre el fondo oscuro; este rojo
     claro llega a 5.6:1 y sigue leyéndose como rojo. */
  color: #ff8078;
  display: block;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .honest__grid {
    grid-template-columns: 1fr;
  }
}

/* --- 11. Planes --------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: start;
}

.plan {
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan--pro {
  background: linear-gradient(160deg, var(--brand-light), var(--brand) 50%, #0a5099);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan__price b {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan__price span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.plan--pro .plan__price span,
.plan--pro .plan__note {
  color: rgba(255, 255, 255, 0.8);
}

.plan ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 0.94rem;
}

.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}

.plan li svg {
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.plan--pro li svg {
  color: #fff;
}

.plan__note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plan--pro .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 800px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* --- 12. FAQ ------------------------------------------------------------ */

.faq {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.faq__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex: none;
  width: 24px;
}

.faq__icon {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.2s ease;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.faq__icon::before {
  width: 12px;
  height: 1.8px;
}

.faq__icon::after {
  width: 1.8px;
  height: 12px;
}

.faq__item.is-open .faq__icon {
  background: var(--brand);
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
  background: #fff;
}

.faq__item.is-open .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
  /* Sin esto, la respuesta cerrada mide 0px pero sigue existiendo para un
     lector de pantalla, que leería las nueve respuestas de corrido.
     El delay hace que se oculte recién al terminar la animación. */
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.faq__item.is-open .faq__a > div {
  visibility: visible;
  transition-delay: 0s;
}

.faq__a p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 76ch;
  padding: 0 60px 26px 42px;
}

.faq__a p + p {
  padding-top: 12px;
}

@media (max-width: 640px) {
  .faq__a p {
    padding-right: 4px;
    padding-left: 42px;
  }
}

/* --- 13. CTA final ------------------------------------------------------ */

.cta {
  border-radius: var(--r-3xl);
  background: linear-gradient(155deg, var(--brand-light), var(--brand) 48%, var(--brand-deep));
  color: #fff;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 72%);
}

.cta > * {
  position: relative;
}

.cta h2 {
  max-width: 18ch;
  margin-inline: auto;
}

.cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 18px auto 30px;
}

.cta .stores {
  justify-content: center;
}

.cta .store {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(8px);
}

.cta .store .store__top {
  color: rgba(255, 255, 255, 0.7);
}

/* --- 14. Footer --------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px) 32px;
  margin-top: clamp(48px, 6vw, 96px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}

.footer__brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 16px;
  max-width: 34ch;
  line-height: 1.55;
}

.footer h3 {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  font-weight: 500;
}

.footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer a {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.footer a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 0.82rem;
}

.footer__disclaimer {
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-top: 32px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* --- 15. Páginas legales ------------------------------------------------ */

.legal-hero {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.legal-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  margin-block: 18px 14px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 88px);
}

.legal-toc {
  position: sticky;
  top: 104px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
}

.legal-toc h2 {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  font-weight: 500;
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: grid;
  gap: 9px;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  color: var(--text-secondary);
  font-size: 0.87rem;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}

.legal-toc a::before {
  content: counter(toc);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex: none;
  padding-top: 2px;
}

.legal-toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.legal-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 4vw, 52px);
  max-width: 78ch;
}

.legal-body > * + * {
  margin-top: 18px;
}

.legal-body h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  margin-top: 48px;
  scroll-margin-top: 104px;
  padding-top: 4px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-size: 1.04rem;
  letter-spacing: -0.015em;
  margin-top: 28px;
}

.legal-body p,
.legal-body li {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.68;
}

.legal-body strong {
  color: var(--text);
  font-weight: 600;
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
  display: grid;
  gap: 9px;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 12px;
  /* display:block para que la tabla pueda desbordar con scroll propio en vez
     de ensanchar la página. El texto sí envuelve: con nowrap la tercera
     columna quedaba cortada sin que se notara que había scroll. */
  display: block;
  overflow-x: auto;
}

.legal-body table th,
.legal-body table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.legal-body table th {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

.legal-body table td {
  color: var(--text-secondary);
}

.callout {
  background: var(--accent-soft);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  border-left: 3px solid var(--accent);
}

.callout p {
  color: var(--text);
  font-size: 0.94rem;
}

.callout--warn {
  background: var(--danger-soft);
  border-left-color: var(--danger);
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .legal-toc {
    position: static;
  }
}

/* --- 16. Página de invitación ------------------------------------------ */

.invite {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding-block: clamp(32px, 6vw, 72px);
}

.invite__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  padding: clamp(28px, 4vw, 52px);
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.invite__code {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.22em;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-block: 22px;
  font-weight: 600;
  word-break: break-all;
}

.invite__steps {
  list-style: none;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 14px;
  margin-top: 28px;
  counter-reset: inv;
}

.invite__steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.5;
  counter-increment: inv;
}

.invite__steps li::before {
  content: counter(inv);
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  font-weight: 600;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.copy-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* --- 17. Animación de entrada ------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}