/* =====================================================
   PYMECITA — la landing.

   LA PIEL ES "NOCHE Y LUZ", la misma que Bionic Trainer: fondo casi negro, una sola cosa
   iluminada por pantalla y el color usado como LUZ (un resplandor), no como pintura. La luz
   de Pymecita es un verde tranquilo.

   La NOCHE es el modo de todos, sin mirar la preferencia del sistema. El DÍA es la
   alternativa (clase .dia en <html>): sin agua ni vidrio, tarjetas blancas lisas con borde.

   Quien lee es el dueño de un comercio, muchas veces de más de 45 años, con el celular en
   una mano y al sol: cuerpo de 18px, interlineado 1.6, botones de 56px, todo toque ≥ 48px.

   Los colores con transparencia van escritos a mano (rgba) y no con color-mix(): hay
   Android viejos con navegadores que no lo entienden.
   ===================================================== */

@font-face {
  font-family: 'Inter';
  src: url('fuentes/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fuentes/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  --bg: #050607;
  --bg-card: #0E1012;
  --bg-input: #0A0C0E;
  --border: #1C1F23;
  --border-light: #2A2E33;
  --text: #F4F5F6;
  --text-soft: #B9C0C6;
  --text-muted: #8A9097;

  --accent: #12B981;
  --accent-hover: #0F9F6F;            /* el acento con 14 % de negro */
  --accent-contrast: #050607;
  --luz-fuerte: rgba(18, 185, 129, 0.42);
  --luz-media: rgba(18, 185, 129, 0.24);
  --luz-tenue: rgba(18, 185, 129, 0.10);
  --brillo-accion: 0 10px 36px var(--luz-fuerte);

  /* El logo (mate). De noche: yerba esmeralda, agua oscura, metal claro. */
  --mate-luz: #12B981;
  --mate-agua: #0A261D;
  --mate-metal: #DDD6CC;
  --mate-filo: transparent;
  --mate-moja: rgba(0, 44, 27, 0.42);
  --mate-onda: rgba(190, 240, 218, 0.5);
  --mate-brillo: drop-shadow(0 0 30px rgba(24, 214, 150, 0.75)) drop-shadow(0 0 120px rgba(18, 185, 129, 0.45));

  /* Lo elegido va en blanco con texto noche; el acento queda para la acción. */
  --seleccion: #F4F5F6;
  --seleccion-texto: #050607;

  /* Vidrio: la tarjeta al 80 %, borde del color del texto al 8 %, un brillo arriba. */
  --vidrio: rgba(14, 16, 18, 0.8);
  --vidrio-borde: rgba(244, 245, 246, 0.08);
  --brillo: rgba(255, 255, 255, 0.06);

  --sombra-telefono: 0 40px 90px rgba(0, 0, 0, 0.55);
  --sombra-captura: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5);
  --foco: #F4F5F6;

  --letra-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --letra-titulo: 'Jost', 'Century Gothic', 'Futura', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ancho: 70rem;
  --ancho-angosto: 46rem;
  --margen: clamp(1.25rem, 5vw, 2.5rem);
  --radio: 22px;
}

html.dia {
  color-scheme: light;

  --bg: #F3F2EE;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --border: #E4E3DE;
  --border-light: #D6D5CF;
  --text: #141414;
  --text-soft: #3F464E;
  --text-muted: #5E6670;

  --accent: #0A7D55;                  /* medido: 4,88:1 como texto y 5,15:1 como botón */
  --accent-hover: #086B49;
  --accent-contrast: #FFFFFF;
  --luz-fuerte: rgba(10, 125, 85, 0.26);
  --luz-media: rgba(10, 125, 85, 0.14);
  --luz-tenue: rgba(10, 125, 85, 0.06);
  --brillo-accion: 0 8px 24px var(--luz-fuerte);

  /* El logo (mate) de día: yerba #0E9F6E, agua clara, metal oscuro. */
  --mate-luz: #0E9F6E;
  --mate-agua: #BFD8CC;
  --mate-metal: #23262A;
  --mate-filo: transparent;
  --mate-moja: rgba(0, 36, 22, 0.38);
  --mate-onda: rgba(255, 255, 255, 0.8);
  --mate-brillo: drop-shadow(0 0 40px rgba(14, 159, 110, 0.35));

  --seleccion: #141414;
  --seleccion-texto: #FFFFFF;

  --vidrio: #FFFFFF;
  --vidrio-borde: #E4E3DE;
  --brillo: transparent;

  --sombra-telefono: 0 30px 60px rgba(20, 20, 20, 0.10);
  --sombra-captura: 0 16px 32px rgba(20, 20, 20, 0.16);
  --foco: #141414;
}

/* ---------- Base ---------- */

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

html {
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Sin fondo propio: el del <html> queda debajo del agua, y el agua debajo de todo. */
body {
  font-family: var(--letra-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--letra-titulo);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
h1, h2 { font-weight: 300; }
h1 { font-size: clamp(2.625rem, 10.5vw, 4.75rem); line-height: 1.04; }
h2 { font-size: clamp(2.125rem, 7.5vw, 3.25rem); line-height: 1.08; }
h3 { font-size: 1.5rem; }

p { text-wrap: pretty; }

/* Todo número, con cifras del mismo ancho. */
.num, .mq-monto, .mq-barra-texto, .plan-monto, .paso-numero { font-variant-numeric: tabular-nums; }

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

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--seleccion);
  color: var(--seleccion-texto);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 1rem; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}
/* Las secciones de lectura van más angostas pero arrancan en el mismo borde que las demás. */
.contenedor.angosto > * { max-width: var(--ancho-angosto); }

/* ---------- El agua ---------- */

.agua {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
html.dia .agua { display: none; }

/* ---------- Vidrio ---------- */

.vidrio {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--brillo);
  border-radius: var(--radio);
}
html.dia .vidrio,
html.dia .telefono,
html.liviano .vidrio,
html.liviano .telefono {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Teléfonos con poca memoria: sin desenfoque, la tarjeta casi opaca. */
html.liviano:not(.dia) { --vidrio: rgba(14, 16, 18, 0.94); }

/* ---------- Aviso de configuración (sólo en local) ---------- */

.aviso-config {
  background: #F2C94C;
  color: #141414;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem var(--margen);
  font-size: 1rem;
}

/* ---------- Barra de arriba ---------- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* La marca: "pymecita" con la p hecha mate (el logo, en línea; los colores salen de --mate-*).
   El mate va un 7 % más grande que las letras y apoyado en la misma línea de base: el tamaño
   y el vertical-align (en em) ya vienen resueltos, así que hereda el tamaño de letra del lugar. */
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--letra-titulo);
  font-weight: 300;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}
.marca-palabra { white-space: nowrap; }
.pm { display: inline-block; width: 0.721em; height: 0.853em; vertical-align: -0.292em; overflow: visible; }
.pm-yerba { fill: var(--mate-luz); }
.pm-con-brillo { filter: var(--mate-brillo); }
.pm-agua { fill: var(--mate-agua); }
.pm-burbuja { fill: var(--mate-onda); }
.pm-virola { fill: none; stroke: var(--mate-metal); }
.pm-filo { fill: none; stroke: var(--mate-filo); }
.pm-caño { fill: none; stroke: var(--mate-metal); stroke-linecap: round; stroke-linejoin: round; }
.pm-halo { fill: none; stroke: var(--bg); stroke-linejoin: round; }
.pm-l0 { stop-color: var(--mate-moja); }
.pm-l1 { stop-color: var(--mate-moja); stop-opacity: 0; }

/* El interruptor día/noche: chico a la vista, 48px al dedo. */
.modo {
  display: none;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  border-radius: 999px;
}
.con-js .modo { display: inline-flex; }
.modo-boton {
  position: relative;
  min-height: 48px;
  padding: 0 0.95rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: 999px;
  isolation: isolate;
}
.modo-boton::before {
  content: "";
  position: absolute;
  inset: 5px 2px;
  border-radius: 999px;
  z-index: -1;
  background: transparent;
  transition: background-color 0.2s ease;
}
.modo-boton[aria-pressed="true"] { color: var(--seleccion-texto); }
.modo-boton[aria-pressed="true"]::before { background: var(--seleccion); }
.modo-boton:hover:not([aria-pressed="true"]) { color: var(--text); }

/* ---------- Botones y enlaces ---------- */

.boton-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--letra-texto);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--brillo-accion);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.boton-principal:hover { background: var(--accent-hover); transform: translateY(-1px); }
.boton-principal:active { transform: translateY(0); }

.enlace-secundario,
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.15s ease;
}
.enlace-secundario:hover,
.enlace-flecha:hover { text-decoration-color: var(--text); }
.flechita { width: 1rem; height: 1rem; flex: none; }

.nota {
  font-size: 1rem;
  color: var(--text-soft);
}

/* ---------- Apariciones al bajar ----------
   Sólo se esconde lo que sitio.js marca como .esperando, y sólo si está más abajo de la
   pantalla. Si el JavaScript falla, nada queda invisible. */

.aparece.esperando { opacity: 0; transform: translateY(12px); }
.aparece {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .aparece.esperando { transform: none; }
  .aparece { transition: opacity 0.5s ease; }
}
@media print {
  .aparece.esperando { opacity: 1; transform: none; }
  .agua, .flotante, .modo { display: none !important; }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: clamp(4.5rem, 13vw, 8.5rem) 0; }
.seccion-final { padding-bottom: clamp(4.5rem, 13vw, 8rem); }

.seccion h2 { margin-bottom: 1.25rem; }
.bajada {
  color: var(--text-soft);
  max-width: 38rem;
  margin-bottom: 2.25rem;
}

/* ---------- 1. Entrada ---------- */

.entrada {
  overflow-x: hidden;                 /* respaldo para navegadores viejos */
  overflow-x: clip;                   /* el resplandor del teléfono no ensancha la página */
  padding-top: clamp(1.75rem, 6vw, 4rem);
}
.entrada-grilla {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
.sobretitulo {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.entrada h1 { margin-bottom: 1.5rem; }
.entrada-bajada {
  color: var(--text-soft);
  max-width: 34rem;
  margin-bottom: 2rem;
}
.acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.acciones .enlace-secundario { align-self: center; }
@media (min-width: 600px) {
  .acciones { flex-direction: row; align-items: center; gap: 1.75rem; }
  .acciones .enlace-secundario { align-self: auto; }
}
.entrada .nota { text-align: center; }
@media (min-width: 600px) { .entrada .nota { text-align: left; } }

/* La maqueta: el teléfono de vidrio y la luz que sale de atrás. */
.entrada-maqueta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
}
.entrada-maqueta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(44rem, 150%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--luz-media), var(--luz-tenue) 50%, rgba(18, 185, 129, 0) 100%);
  pointer-events: none;
}
html.dia .entrada-maqueta::before {
  background: radial-gradient(closest-side, var(--luz-media), rgba(10, 125, 85, 0) 100%);
}

.telefono {
  width: min(19.5rem, 100%);
  padding: 0.55rem;
  border-radius: 2.9rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-telefono);
}
html.dia .telefono { background: #FFFFFF; border-color: var(--border-light); }

.telefono-pantalla {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2.75rem 0.8rem 1.25rem;
  border-radius: 2.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.telefono-isla {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 5.25rem;
  height: 1.35rem;
  margin-left: -2.625rem;
  border-radius: 1rem;
  background: #000000;
}
html.dia .telefono-isla { background: #141414; }

.mq-tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.8rem 0.95rem;
}
.mq-rotulo {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--text-soft);
  margin-bottom: 0.2rem;
}
.mq-monto {
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.mq-monto-grande { font-weight: 300; font-size: 2rem; }
.mq-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}
.mq-detalle {
  font-size: 0.875rem;
  color: var(--text-soft);
  padding-bottom: 0.15rem;
  white-space: nowrap;
}
.mq-barra + .mq-barra { margin-top: 0.55rem; }
.mq-barra-texto {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-soft);
  margin-bottom: 0.3rem;
}
.mq-barra-texto span:last-child { color: var(--text); }
.mq-pista {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.mq-relleno { display: block; height: 100%; border-radius: 999px; }
.mq-entra { background: var(--accent); box-shadow: 0 0 12px var(--luz-fuerte); }
.mq-sale { background: var(--text-muted); }
.mq-pie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-soft);
  padding: 0.35rem 0.4rem 0;
}
.mq-luz, .rubro-luz, .promo-luz {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--luz-fuerte);
}
.maqueta-nota {
  font-size: 1rem;
  color: var(--text-soft);
}

@media (min-width: 960px) {
  .entrada { padding-top: 3rem; }
  .entrada-grilla {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 4rem;
    min-height: min(46rem, calc(100vh - 6rem));
  }
  .telefono { width: 20.5rem; }
}

/* ---------- 2. ¿Te suena? ---------- */

.frases {
  display: grid;
  gap: 1.75rem;
  margin-block: 2.5rem 3rem;
}
.frases li {
  font-family: var(--letra-titulo);
  font-weight: 300;
  font-size: clamp(1.625rem, 5.6vw, 2.375rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border-light);
}
.cierre-suena {
  color: var(--text-soft);
  max-width: 36rem;
}

/* ---------- 3. Tres cosas ---------- */

.servicios {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
.servicio { padding: 1.75rem 1.5rem; }
.servicio h3 {
  font-size: 1.875rem;
  margin-bottom: 0.9rem;
}
.servicio-cuerpo > p {
  color: var(--text-soft);
  margin-bottom: 1.25rem;
}
.puntos { display: grid; gap: 0.6rem; }
.puntos li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text);
}
.puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.85rem;
  border-top: 1px solid var(--text-muted);
}
@media (min-width: 760px) {
  .servicio {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2.25rem 2.5rem;
  }
  .servicio h3 { margin-bottom: 0; font-size: 2rem; }
  .servicio-cuerpo { max-width: 40rem; }
}

/* ---------- 4. Rubros ---------- */

.rubros { display: grid; gap: 2rem; }
.rubros-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--letra-titulo);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text-soft);
  margin-bottom: 0.9rem;
}
.rubros-lista {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}
.rubro {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--brillo);
  border-radius: var(--radio);
  transition: border-color 0.15s ease;
}
html.dia .rubro, html.liviano .rubro { -webkit-backdrop-filter: none; backdrop-filter: none; }
.rubro:hover, .rubro[open] { border-color: var(--border-light); }
.rubro-cabeza {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.6rem 1.25rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radio);
}
.rubro-cabeza::-webkit-details-marker { display: none; }
.rubro-cabeza::marker { content: ""; }
.rubro-cabeza:focus-visible { outline-offset: -2px; border-radius: var(--radio); }
.rubro-nombre { flex: 1; min-width: 0; }
.rubro-anillo {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
}
.rubro-items .rubro-luz, .rubro-items .rubro-anillo { margin-top: 0.55em; }
/* La flechita: dos rayas que giran al abrir. */
.rubro-indicador {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.2rem;
  border-right: 1.5px solid var(--text-soft);
  border-bottom: 1.5px solid var(--text-soft);
  transform: translateY(-20%) rotate(45deg);
  transition: transform 0.2s ease;
}
.rubro[open] .rubro-indicador { transform: translateY(20%) rotate(-135deg); }
.rubro-cabeza:hover .rubro-indicador { border-color: var(--text); }
.rubro-cuerpo { padding: 0.25rem 1.25rem 1.25rem; }
.rubro-subtitulo {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin: 0.9rem 0 0.5rem;
}
.rubro-items { display: grid; gap: 0.5rem; }
.rubro-items li { display: flex; align-items: flex-start; gap: 0.7rem; }
.rubro-items-suave { color: var(--text-soft); }
.rubro-enlace { margin-top: 1rem; }
@media (min-width: 900px) {
  .rubros-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rubro, .rubro-indicador { transition: none; }
}
.rubros-final {
  margin-top: 2rem;
  color: var(--text-soft);
}

/* ---------- 5. Cómo empezamos ---------- */

.pasos {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
  counter-reset: none;
}
.paso {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
}
.paso-numero {
  grid-row: span 2;
  font-family: var(--letra-titulo);
  font-weight: 200;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--text-soft);
}
.paso h3 { margin-bottom: 0.4rem; }
.paso p { grid-column: 2; color: var(--text-soft); }
@media (min-width: 760px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .paso {
    display: block;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
  }
  .paso-numero { display: block; font-size: 4rem; margin-bottom: 1.25rem; }
}

/* ---------- 6. Ya está funcionando ---------- */

.caso { padding: 2rem 1.5rem; }
.caso h2 { margin-bottom: 1.25rem; }
.caso p {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  color: var(--text-soft);
  max-width: 44rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 760px) { .caso { padding: 3rem 3rem 2.5rem; } }

/* ---------- Capturas reales ----------
   Pantallas de verdad, en un marco sobrio. Una captura clara en una página oscura encandila:
   de noche el marco es un bisel oscuro con borde y sombra corta, y la imagen baja un poco el
   brillo; de día el bisel es casi negro para que la pantalla blanca no se pierda en el fondo. */

.captura {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.85rem;
}
.captura figcaption {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}
.captura img {
  width: 100%;
  height: auto;
  background: var(--border);           /* mientras carga, un gris quieto en vez de un hueco */
}
html:not(.dia) .captura img { filter: brightness(0.94); }

/* El teléfono de la entrada, en versión para capturas: sin isla ni desenfoque. */
.telefono.telefono-captura {
  width: 100%;
  padding: 0.4rem;
  border-radius: 2.2rem;
  background: var(--bg-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-captura);
}
html.dia .telefono.telefono-captura { background: #141414; border-color: #141414; }
.telefono-captura img { border-radius: 1.8rem; }
/* Las animaciones llenan el marco igual que una imagen. El póster se ve mientras no corre. */
.captura video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1280;
  border-radius: 1.8rem;
  background: #050607;
}

/* La ventana de la compu: una barra con la dirección y la página abajo. */
.navegador {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-captura);
}
html.dia .navegador { background: #141414; border-color: #141414; }
.navegador-barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
}
.navegador-puntos { display: flex; gap: 0.35rem; flex: none; }
.navegador-puntos span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border-light);
}
html.dia .navegador-puntos span { background: #3A3F45; }
.navegador-direccion {
  flex: 1;
  min-width: 0;
  max-width: 20rem;
  margin-inline: auto;
  padding: 0.1rem 0.8rem;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dia .navegador-direccion { background: #23272C; border-color: #2E3338; color: #C9CED3; }

/* ---------- 6. Ya está funcionando: las capturas ---------- */

/* La compu sólo se ve con pantalla ancha (y, con loading="lazy", en el celular ni se baja). */
.captura-compu { display: none; }
@media (min-width: 900px) {
  .caso {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
  }
  .caso p { margin-bottom: 1rem; }
  .captura-compu { display: grid; }
}

.capturas { margin-top: 1.75rem; }

/* En el celular: una fila que se desliza con el dedo, de borde a borde de la pantalla, y la
   pantalla siguiente asomando para que se note que hay más. */
.capturas-fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(68%, 17rem);
  gap: 1rem;
  margin-inline: calc(var(--margen) * -1);
  padding: 0.5rem var(--margen) 2.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.capturas-fila::-webkit-scrollbar { display: none; }
.capturas-fila > li { scroll-snap-align: start; }
.capturas-fila:focus-visible { outline-offset: -2px; border-radius: var(--radio); }
.capturas-indicio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: -1rem;
  font-size: 0.9375rem;
  color: var(--text-soft);
}

/* En la compu: lado a lado. */
@media (min-width: 760px) {
  .capturas { margin-top: 2.5rem; }
  .capturas-fila {
    grid-auto-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 50rem;
    margin-inline: auto;
    padding: 0.5rem 0 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .capturas-indicio { display: none; }
}

/* ---------- 3b. Así se ve ---------- */

/* Cada animación lleva un título y una línea debajo, en el mismo pie que las capturas. */
#asi-se-ve .captura figcaption strong { display: block; }
#asi-se-ve .captura figcaption strong {
  margin-bottom: 0.2rem;
  font-family: var(--letra-titulo);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text);
}
.asi-pie {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- 7. Apps ---------- */

.apps { display: grid; gap: 1rem; }
.app { padding: 1.75rem 1.5rem 2rem; }
.app h3 { margin-bottom: 0.75rem; }
.app p { color: var(--text-soft); }
.app .enlace-flecha { margin-top: 0.75rem; }
.captura-app { margin-top: 1.75rem; }
.captura-app .telefono-captura { width: min(14.5rem, 78%); }
.app .captura figcaption { color: var(--text-soft); }
@media (min-width: 760px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app { padding: 2.25rem 2.25rem 2.5rem; }
  .captura-app { margin-top: 2rem; }
  .captura-app .telefono-captura { width: min(16rem, 80%); }
}

/* ---------- 8. Cuánto sale ---------- */

.planes {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.plan { padding: 1.75rem 1.5rem; }
.plan h3 { margin-bottom: 1rem; }
.plan-precio { margin-bottom: 1.5rem; color: var(--text-soft); }
.plan-desde { display: block; font-size: 1rem; }
.plan-monto {
  display: inline-block;
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  margin-right: 0.35rem;
}
.plan-periodo { font-size: 1rem; white-space: nowrap; }
.plan-incluye {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vidrio-borde);
}
.plan-incluye li { position: relative; padding-left: 1.6rem; }
.plan-incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.85rem;
  border-top: 1px solid var(--text-muted);
}
/* El destacado, un poco más iluminado. */
.plan-destacado {
  border-color: rgba(18, 185, 129, 0.38);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px rgba(18, 185, 129, 0.12), 0 24px 70px var(--luz-media);
}
html.dia .plan-destacado {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px var(--luz-media);
}
.precios-pie {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-width: 40rem;
}
.precios-pie p { color: var(--text-soft); }
.precios-pie .promo {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--text);
}
.promo-luz { position: relative; top: -0.1em; }
.precios-pie .boton-principal { margin-top: 0.75rem; }
@media (max-width: 599px) {
  .precios-pie { justify-items: stretch; }
}
@media (min-width: 900px) {
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { padding: 2rem 1.75rem; min-height: 100%; }
}

/* ---------- 9. Lo que todavía no hacemos ---------- */

.no-hacemos { display: grid; gap: 0; border-top: 1px solid var(--border-light); }
.no-hacemos li {
  padding: 1.25rem 0 1.25rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--border-light);
}
.no-hacemos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.25rem + 0.8em);
  width: 0.85rem;
  border-top: 1px solid var(--text-muted);
}

/* ---------- 10. Quién ---------- */

.quien {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
}
.retrato {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--brillo);
}
.retrato-luz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(18, 185, 129, 0.85), 0 0 40px 10px var(--luz-media);
}
html.dia .retrato-luz { box-shadow: 0 0 18px 4px var(--luz-media); }
.retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quien-texto { display: grid; gap: 1.25rem; }
.quien-texto p { color: var(--text-soft); }
.quien-primera { color: var(--text) !important; }
.quien-cita {
  font-family: var(--letra-titulo);
  font-weight: 300;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text) !important;
  text-wrap: balance;
}
@media (min-width: 760px) {
  .quien { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .retrato { width: 9rem; height: 9rem; }
}

/* ---------- 11. Preguntas ---------- */

.preguntas {
  margin-top: 2rem;
  border-top: 1px solid var(--border-light);
}
.pregunta { border-bottom: 1px solid var(--border-light); }
.pregunta summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0.9rem 3rem 0.9rem 0;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::marker { content: ""; }
/* Un + de dos rayitas que se vuelve −. */
.pregunta summary::before,
.pregunta summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 1rem;
  border-top: 1.5px solid var(--text-soft);
  transition: transform 0.2s ease;
}
.pregunta summary::after { transform: rotate(90deg); }
.pregunta[open] summary::after { transform: rotate(0deg); }
.pregunta summary:hover::before,
.pregunta summary:hover::after { border-color: var(--text); }
.pregunta p {
  color: var(--text-soft);
  padding: 0 2.5rem 1.4rem 0;
}

/* ---------- 12. Charlemos ---------- */

.charlemos {
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}
.charlemos h2 { margin-bottom: 0; }
.charlemos p { color: var(--text-soft); max-width: 32rem; }
.charlemos .boton-principal { margin-top: 0.5rem; }
@media (max-width: 599px) {
  .charlemos .boton-principal { width: 100%; }
}
@media (min-width: 760px) { .charlemos { padding: 4rem 3rem; } }

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--border);
  padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.pie-grilla { display: grid; gap: 1.5rem; }
.marca-pie { font-size: 1.625rem; min-height: 0; }
.pie-lema { color: var(--text-soft); font-size: 1rem; margin-top: 0.15rem; }
.pie-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  color: var(--text-soft);
  font-size: 1rem;
}
.pie-datos a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-light);
  text-underline-offset: 0.3em;
}
.pie-datos a:hover { text-decoration-color: var(--text); }
/* Va con el texto suave y no con el apagado: el pie queda abajo de la pantalla, justo sobre el
   resplandor del agua, y ahí el apagado no llega a 4,5:1. */
.pie-legal {
  font-size: 0.9375rem;
  color: var(--text-soft);
  max-width: 40rem;
}
@media (min-width: 760px) {
  .pie-grilla { grid-template-columns: 1fr auto; align-items: center; }
  .pie-legal { grid-column: 1 / -1; }
}

/* ---------- Botón flotante (sólo celular) ---------- */

.flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0 1.4rem 0 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  box-shadow: var(--brillo-accion), 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.flotante svg { width: 1.5rem; height: 1.5rem; }
.flotante.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
html.dia .flotante { box-shadow: var(--brillo-accion), 0 4px 14px rgba(20, 20, 20, 0.18); }
@media (min-width: 960px) { .flotante { display: none; } }