/* NIDI · hoja compartida de la web. Identidad «Tinta y marfil»: lujo por contención. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/recursos/outfit.woff2') format('woff2');
}

:root {
  --fondo: #F7F5F0;
  --tarjeta: #FFFFFF;
  --piedra: #ECE8E0;
  --tinta: #111418;
  --tenue: #5A5E65;
  --borde: rgba(17, 20, 24, 0.10);
  --borde-fuerte: rgba(17, 20, 24, 0.22);
  --acento: #1F5C55;
  --acento-suave: rgba(31, 92, 85, 0.10);
  --boton: #111418;
  --boton-texto: #F7F5F0;
  /* Color de acción (Guardar, Continuar, Entrar…): el verde de acento. --boton queda para lo elegido (pestañas, chips, menú activo). */
  --accion: #1F5C55;
  --accion-texto: #FFFFFF;
  --ambar: #8A5A00;
  --ambar-suave: rgba(176, 116, 0, 0.12);
  --rojo: #A3312A;
  --rojo-suave: rgba(163, 49, 42, 0.09);
  --banda: #111418;
  --banda-texto: #F2EFE8;
  --banda-tenue: rgba(242, 239, 232, 0.62);
  --banda-borde: rgba(242, 239, 232, 0.14);
  --sombra: 0 1px 2px rgba(17, 20, 24, 0.04), 0 12px 40px -18px rgba(17, 20, 24, 0.18);
  --radio: 18px;
  --ancho: 1120px;
  --letra: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0E0F11;
    --tarjeta: #18191C;
    --piedra: #25272B;
    --tinta: #F2EFE8;
    --tenue: #A4A29B;
    --borde: rgba(242, 239, 232, 0.10);
    --borde-fuerte: rgba(242, 239, 232, 0.24);
    --acento: #6CC0B1;
    --acento-suave: rgba(108, 192, 177, 0.12);
    --boton: #F2EFE8;
    --boton-texto: #111418;
    --accion: #6CC0B1;
    --accion-texto: #111418;
    --ambar: #E3AE55;
    --ambar-suave: rgba(227, 174, 85, 0.13);
    --rojo: #F08A80;
    --rojo-suave: rgba(240, 138, 128, 0.12);
    --banda: #18191C;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acento-suave); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
p { margin: 0 0 1em; }
strong { font-weight: 550; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--boton); color: var(--boton-texto); padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------- Marca (siempre dibujada, nunca con fuente) ---------- */
.marca-claro { display: block; }
.marca-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  .marca-claro { display: none; }
  .marca-oscuro { display: block; }
}

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
}
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 22px; width: auto; }
.navegacion { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.navegacion a { text-decoration: none; color: var(--tenue); }
/* Solo los enlaces de texto cambian de color al pasar el mouse: los botones conservan el suyo (antes «Probar gratis»
   quedaba con letra tinta sobre fondo tinta y desaparecía). */
.navegacion .enlace-nav:hover { color: var(--tinta); }
.navegacion .boton, .navegacion .boton:hover { color: var(--accion-texto); }
.navegacion .boton-linea, .navegacion .boton-texto,
.navegacion .boton-linea:hover, .navegacion .boton-texto:hover { color: var(--tinta); }
@media (max-width: 760px) {
  .navegacion .enlace-nav { display: none; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--accion);
  background: var(--accion); color: var(--accion-texto);
  font: inherit; font-size: 16px; font-weight: 450; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Al pasar el mouse, cada botón cambia su fondo, nunca el color de su letra: el texto siempre se lee. */
.boton:hover {
  text-decoration: none; color: var(--accion-texto);
  background: color-mix(in srgb, var(--accion) 82%, var(--fondo)); border-color: color-mix(in srgb, var(--accion) 82%, var(--fondo));
}
.boton:active { transform: scale(0.98); }
.boton[disabled], .boton[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }
.boton[disabled]:hover { background: var(--accion); border-color: var(--accion); }
.boton-chico { min-height: 40px; padding: 0 18px; font-size: 15px; }
.boton-grande { min-height: 56px; padding: 0 32px; font-size: 17px; }
.boton-linea { background: transparent; color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-linea:hover { background: var(--piedra); border-color: var(--tinta); color: var(--tinta); }
.boton-linea[disabled]:hover { background: transparent; border-color: var(--borde-fuerte); }
.boton-texto { background: transparent; border-color: transparent; color: var(--tinta); padding: 0 12px; }
.boton-texto:hover { background: var(--piedra); border-color: transparent; color: var(--tinta); }
.boton-peligro { background: var(--rojo); border-color: var(--rojo); color: #FFFFFF; }
.boton-peligro:hover { color: #FFFFFF; background: color-mix(in srgb, var(--rojo) 86%, #000000); border-color: color-mix(in srgb, var(--rojo) 86%, #000000); }
@media (prefers-color-scheme: dark) {
  .boton-peligro, .boton-peligro:hover { color: #111418; }
  .boton-peligro:hover { background: color-mix(in srgb, var(--rojo) 86%, #FFFFFF); border-color: color-mix(in srgb, var(--rojo) 86%, #FFFFFF); }
}
.flecha { display: inline-block; margin-left: 10px; transition: transform 0.2s ease; }
.boton:hover .flecha { transform: translateX(3px); }

/* ---------- Tipos de texto ---------- */
.antetitulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue);
}
.antetitulo::before { content: ''; width: 6px; height: 6px; background: var(--acento); border-radius: 1px; }
.titulo-seccion { font-size: clamp(34px, 5vw, 56px); font-weight: 300; letter-spacing: -0.03em; margin: 18px 0 20px; }
.entrada { font-size: clamp(18px, 2vw, 21px); color: var(--tenue); font-weight: 300; max-width: 620px; }
.tenue { color: var(--tenue); }
.punto-final { color: var(--acento); }
.etiqueta {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; background: var(--piedra); color: var(--tinta); white-space: nowrap;
}
.etiqueta-verde { background: var(--acento-suave); color: var(--acento); }

/* ---------- Héroe ---------- */
.heroe { padding: clamp(40px, 8vw, 112px) 0 clamp(64px, 8vw, 112px); }
.heroe .envoltura { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.heroe-simbolo { width: 64px; height: 64px; margin-bottom: 32px; }
.heroe h1 { font-size: clamp(46px, 8vw, 100px); font-weight: 250; letter-spacing: -0.045em; line-height: 0.98; }
.heroe .entrada { margin: 26px 0 36px; font-size: clamp(19px, 2.2vw, 23px); color: var(--tinta); font-weight: 300; max-width: 560px; }
.heroe .entrada span { display: block; }
.heroe .entrada span + span { margin-top: 2px; }
.heroe .entrada .tenue { color: var(--tenue); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nota-precio { font-size: 15px; color: var(--tenue); margin: 20px 0 0; }
.nota-precio strong { color: var(--tinta); font-weight: 500; }
.heroe-visual { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .heroe .envoltura { grid-template-columns: 1fr; gap: 56px; }
  .heroe-visual .telefono { width: min(270px, 70vw); }
}

/* Teléfono: marco elegante en tinta, para el héroe y el video. */
.telefono {
  position: relative; width: min(300px, 76vw); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 48px;
  background: #111418; box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.9), 0 40px 80px -36px rgba(17, 20, 24, 0.45), 18px 18px 0 0 var(--piedra);
}
@media (prefers-color-scheme: dark) {
  .telefono { background: #2A2C31; box-shadow: 0 0 0 1px rgba(242, 239, 232, 0.16), 0 40px 80px -30px rgba(0, 0, 0, 0.8), 18px 18px 0 0 var(--piedra); }
}
.telefono::before {
  content: ''; position: absolute; z-index: 2; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px;
  border-radius: 999px; background: #050607;
}
.telefono-pantalla { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--fondo); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(72px, 10vw, 128px) 0; }
.seccion-borde { border-top: 1px solid var(--borde); }
.seccion-piedra { background: color-mix(in srgb, var(--piedra) 55%, var(--fondo)); }

/* Cuatro pasos, solo texto, numerados. */
.pasos-texto { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 0; counter-reset: paso; }
.pasos-texto li { counter-increment: paso; padding: 0 22px; border-left: 1px solid var(--borde); }
.pasos-texto li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.pasos-texto li:nth-child(4n) { padding-right: 0; }
.pasos-texto li::before { content: counter(paso); display: block; font-size: 40px; font-weight: 300; line-height: 1; color: var(--tenue); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.pasos-texto h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 10px; }
.pasos-texto p { color: var(--tenue); font-size: 16px; margin: 0; }
@media (max-width: 860px) {
  .pasos-texto { grid-template-columns: 1fr; margin-top: 32px; gap: 0; }
  .pasos-texto li, .pasos-texto li:nth-child(n) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; border-left: 0; border-top: 1px solid var(--borde); }
  .pasos-texto li:last-child { border-bottom: 1px solid var(--borde); }
  .pasos-texto li::before { grid-row: 1 / span 2; font-size: 32px; margin: 0; }
}

/* Así se ve NIDI: capturas reales en filas alternadas. La imagen va dentro de un marco (ventana o teléfono) hecho con estilos. */
.capturas { display: grid; gap: clamp(48px, 6vw, 80px); margin-top: 56px; }
.captura { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 440px); justify-content: start; gap: clamp(32px, 5vw, 64px); align-items: center; margin: 0; }
.captura:nth-child(even) { grid-template-columns: minmax(0, 440px) minmax(0, 380px); }
.captura:nth-child(even) .captura-escena { order: -1; }
.captura-numero { display: block; font-size: 15px; letter-spacing: 0.08em; color: var(--acento); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.captura h3 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 14px; }
.captura p { color: var(--tenue); font-size: clamp(17px, 1.6vw, 19px); margin: 0; max-width: 420px; }
.captura img, .heroe-captura img { display: block; width: 100%; height: auto; }
.captura-ventana { border: 1px solid var(--borde-fuerte); border-radius: 14px; overflow: hidden; background: var(--tarjeta); box-shadow: 0 2px 4px rgba(17, 20, 24, 0.05), 0 40px 80px -32px rgba(17, 20, 24, 0.4); }
.captura-barra { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; background: var(--piedra); border-bottom: 1px solid var(--borde); }
.captura-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); }
.captura-telefono { width: min(280px, 100%); margin: 0 auto; padding: 9px; border-radius: 42px; background: #111418; box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.9), 0 40px 80px -36px rgba(17, 20, 24, 0.5); }
.captura-telefono img { border-radius: 33px; }
/* Escenario de cada pantalla: un fondo suave con dos luces (verde y arena) y la pantalla encima; la app se asoma sobre la web. */
.captura-escena { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 2.6vw, 28px); border-radius: 30px; border: 1px solid var(--borde); background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--acento) 15%, transparent), transparent 62%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, #C9A86A 24%, transparent), transparent 64%), var(--piedra); }
.captura-escena .captura-ventana { width: 100%; }
.captura-escena.con-app { padding-bottom: clamp(44px, 7vw, 72px); }
.captura-escena.con-app .captura-ventana { width: 82%; margin-right: auto; }
.captura-escena:has(.captura-telefono) { width: min(100%, 320px); justify-self: start; padding-block: clamp(22px, 3vw, 34px); }
.captura-app { position: absolute; right: clamp(10px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); width: clamp(128px, 31%, 210px); border-radius: 22px; overflow: hidden; background: #111418; border: 3px solid #111418; box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.7), 0 30px 60px -22px rgba(17, 20, 24, 0.6); }
.captura-app img { display: block; width: 100%; height: auto; }
.heroe-escena { width: min(100%, 640px); }
.heroe-confianza { margin: 18px 0 0; font-size: 14.5px; letter-spacing: 0.01em; color: var(--tenue); }
@media (prefers-color-scheme: dark) {
  .captura-ventana { box-shadow: 0 0 0 1px rgba(242, 239, 232, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.85); }
  .captura-app { background: #2A2C31; border-color: #2A2C31; box-shadow: 0 0 0 1px rgba(242, 239, 232, 0.16), 0 30px 60px -22px rgba(0, 0, 0, 0.85); }
  .captura-telefono { background: #2A2C31; box-shadow: 0 0 0 1px rgba(242, 239, 232, 0.16), 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
}
@media (max-width: 860px) {
  .captura, .captura:nth-child(even) { grid-template-columns: minmax(0, 440px); gap: 28px; }
  .captura:nth-child(even) .captura-escena { order: 0; }
  .captura-escena:has(.captura-telefono) { justify-self: center; }
  .captura p { max-width: none; }
}

/* Clases de los dibujos: siguen al modo claro y oscuro. */
.d-cuerpo { fill: var(--tarjeta); stroke: var(--tinta); stroke-width: 2; }
.d-pantalla { fill: var(--fondo); }
.d-tinta { fill: var(--tinta); }
.d-gris { fill: var(--piedra); }
.d-tenue { fill: var(--tenue); }
.d-acento { fill: var(--acento); }
.d-acento-suave { fill: var(--acento-suave); }
.d-trazo { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-trazo-acento { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d-trazo-boton { fill: none; stroke: var(--boton-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-papel { fill: #FFFFFF; stroke: rgba(17, 20, 24, 0.14); stroke-width: 1; }
.d-firma { fill: none; stroke: #111418; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-texto { fill: var(--tinta); font-family: var(--letra); }
.d-texto-tenue { fill: var(--tenue); font-family: var(--letra); }

/* Video de la app real dentro de un teléfono. */
.demo .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.demo-marco { display: flex; justify-content: center; }
.demo .telefono { width: min(320px, 78vw); }
.demo video, .demo .portada { display: block; width: 100%; height: 100%; object-fit: cover; background: #111418; border: 0; }
.demo-pronto { position: relative; height: 100%; }
.demo-pronto p {
  position: absolute; left: 14px; right: 14px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 16px;
  background: rgba(247, 245, 240, 0.94); color: #111418; font-size: 14px; line-height: 1.4; text-align: center;
}
.demo-lista { list-style: none; padding: 0; margin: 28px 0 0; }
.demo-lista li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--borde); color: var(--tenue); font-size: 16.5px; }
.demo-lista li:first-child { border-top: 1px solid var(--borde); }
.demo-lista b { flex: none; width: 24px; font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .demo .envoltura { grid-template-columns: 1fr; gap: 48px; }
  .demo-marco { order: 2; }
}

/* Lo que ya funciona y lo que viene. */
.beta { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 48px 0 0; }
.beta-caja { padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; }
.beta-caja h3 { font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; color: var(--tenue); }
.beta-caja.tarjeta h3 { color: var(--acento); }
.beta-despues { border: 1px dashed var(--borde-fuerte); }
.lista-check, .lista-punto { list-style: none; padding: 0; margin: 0; }
.lista-check { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.lista-check li, .lista-punto li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borde); font-size: 16px; line-height: 1.45; }
.lista-check li::before { content: '✓'; flex: none; color: var(--acento); font-weight: 600; }
.lista-punto li { color: var(--tenue); }
.lista-punto li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 1px; background: var(--borde-fuerte); }
.beta-nota { margin: 20px 0 0; font-size: 14.5px; color: var(--tenue); }
@media (max-width: 900px) {
  .beta { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lista-check { grid-template-columns: 1fr; }
}

/* Especialidades como etiquetas. */
.chips { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta);
  font-size: 15.5px; line-height: 1.3; letter-spacing: 0.005em;
}
/* Para quién es: especialidades en cuatro familias. */
.familias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--borde-fuerte); }
.familia { padding: 28px 24px 8px 0; }
.familia + .familia { padding-left: 24px; border-left: 1px solid var(--borde); }
.familia h3 { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.35; color: var(--tinta); margin: 0 0 18px; }
.familia h3 span { display: block; font-size: 12.5px; letter-spacing: 0.16em; color: var(--acento); margin-bottom: 8px; }
.familia ul { list-style: none; padding: 0; margin: 0; }
.familia li { padding: 9px 0; border-top: 1px solid var(--borde); font-size: 16px; font-weight: 300; line-height: 1.35; }
.familias-pie { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--borde-fuerte); color: var(--tenue); font-size: 16px; }
.familias-pie span { color: var(--tinta); font-weight: 500; }
@media (max-width: 980px) {
  .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familia:nth-child(3) { padding-left: 0; border-left: 0; }
  .familia:nth-child(n+3) { border-top: 1px solid var(--borde-fuerte); }
}
@media (max-width: 560px) {
  .familias { grid-template-columns: 1fr; }
  .familia, .familia + .familia { padding-left: 0; border-left: 0; }
  .familia + .familia { border-top: 1px solid var(--borde-fuerte); }
  .familia h3 { min-height: 0; }
}
.frase-grande { margin: 44px 0 0; font-size: clamp(24px, 3.2vw, 36px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; max-width: 760px; }
.frase-grande span { color: var(--acento); }

.heroe .antetitulo { margin-bottom: 18px; }

/* «En palabras sencillas»: la idea en una frase y el antes y el después. */
.idea { font-size: clamp(24px, 3.2vw, 36px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.3; max-width: 820px; margin: 18px 0 0; }
.idea + .entrada { margin-top: 20px; }
.idea strong { font-weight: 400; color: var(--acento); }

.preguntas .pasos-lista { color: var(--tenue); max-width: 720px; margin: -6px 0 28px; padding-left: 22px; }
.preguntas .pasos-lista li { margin-bottom: 6px; }

/* Palabras raras, explicadas. */

/* Banda en tinta: lo que NIDI nunca hace. */
.banda { background: var(--banda); color: var(--banda-texto); }
@media (prefers-color-scheme: dark) { .banda { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); } }
.banda .antetitulo { color: var(--banda-tenue); }
.banda .antetitulo::before { background: #5FB3A5; }
.banda .entrada { color: var(--banda-tenue); }
.banda-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.banda-cabeza img { width: 64px; height: 64px; }
.nunca { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nunca li { border: 1px solid var(--banda-borde); border-radius: var(--radio); padding: 28px 26px 26px; }
.nunca h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 10px; }
.nunca p { color: var(--banda-tenue); font-size: 16px; margin: 0; }
.nunca .marca-x { display: block; width: 28px; height: 1px; background: currentColor; margin-bottom: 24px; opacity: 0.7; }
.principio { margin: 56px 0 0; font-size: clamp(26px, 3.6vw, 42px); font-weight: 250; letter-spacing: -0.025em; line-height: 1.2; }
.principio span { color: var(--banda-tenue); }
@media (max-width: 1000px) { .nunca { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nunca { grid-template-columns: 1fr; } }

/* Guía paso a paso. */
.guia-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 44px); }
.guia-tarjeta h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 8px; }
.guia-tarjeta p { margin: 0; color: var(--tenue); }
.guia-tarjeta .acciones { justify-content: flex-end; }
.documento { width: 72px; height: auto; }
@media (max-width: 860px) {
  .guia-tarjeta { grid-template-columns: 1fr; gap: 20px; }
  .guia-tarjeta .acciones { justify-content: flex-start; }
}

/* Precio */
.precio-rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra); }
.tarjeta-precio { padding: clamp(28px, 4vw, 44px); }
.tarjeta-precio .plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; }
.tarjeta-precio .plan span:first-child { font-size: 15px; font-weight: 500; }
.cifra { display: flex; align-items: flex-start; gap: 6px; line-height: 1; }
.cifra .moneda { font-size: 30px; font-weight: 300; margin-top: 10px; }
.cifra .monto { font-size: clamp(76px, 10vw, 104px); font-weight: 200; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.cifra-pie { color: var(--tenue); margin: 12px 0 30px; font-size: 16px; }
.lista-incluye { list-style: none; padding: 0; margin: 0 0 32px; border-top: 1px solid var(--borde); }
.lista-incluye li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); font-size: 16px; }
.lista-incluye li::before { content: '✓'; color: var(--acento); font-weight: 600; flex: none; }
.tarjeta-precio .boton { width: 100%; }
.letra-chica { font-size: 14px; color: var(--tenue); margin: 16px 0 0; text-align: center; }
@media (max-width: 900px) { .precio-rejilla { grid-template-columns: 1fr; gap: 40px; } }

/* Preguntas frecuentes (details/summary: sin JavaScript) */
.preguntas { margin-top: 48px; border-top: 1px solid var(--borde-fuerte); max-width: 860px; }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-size: clamp(19px, 2.2vw, 23px); font-weight: 350; letter-spacing: -0.01em;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ''; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s ease;
}
.preguntas details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.preguntas details p { color: var(--tenue); max-width: 720px; margin: -6px 0 28px; }

/* Cierre */
.cierre { text-align: center; }
.cierre img { width: 64px; height: 64px; margin: 0 auto 32px; }
.cierre h2 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 250; letter-spacing: -0.04em; margin-bottom: 20px; }
.cierre .entrada { margin: 0 auto 36px; }
.cierre .acciones { justify-content: center; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); padding: 48px 0 56px; font-size: 14.5px; color: var(--tenue); }
.pie .envoltura { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.pie-marca img { height: 18px; width: auto; margin-bottom: 14px; }
.pie-marca p { margin: 0; }
.pie nav { display: flex; gap: 28px; flex-wrap: wrap; }
.pie nav a { text-decoration: none; }
.pie nav a:hover { color: var(--tinta); text-decoration: underline; }

/* ---------- Registro ---------- */
.registro { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.registro .envoltura { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.registro-intro h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 250; letter-spacing: -0.04em; margin: 18px 0 20px; }
.registro-intro .lista-incluye { margin-top: 36px; }
.registro-intro .tranquilo { font-size: 15px; color: var(--tenue); }
@media (min-width: 901px) { .registro-intro { position: sticky; top: 112px; } }
@media (max-width: 900px) {
  .registro .envoltura { grid-template-columns: 1fr; }
  .registrado .registro-intro { display: none; }
}

.formulario { padding: clamp(24px, 4vw, 44px); }
.formulario h2 { font-size: 26px; font-weight: 400; margin-bottom: 6px; }
.formulario .tenue { font-size: 15px; margin-bottom: 28px; }
.campo { margin-bottom: 22px; }
.campo label, .campo .etiqueta-campo { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.campo .ayuda { display: block; font-size: 13.5px; color: var(--tenue); margin-top: 7px; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .doble { grid-template-columns: 1fr; } }

input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='number'], input[type='search'], input[type='date'], select, textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 13px;
  border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--tinta);
  font: inherit; font-size: 17px; font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select {
  padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: 0.7; }
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); background: var(--tarjeta); box-shadow: 0 0 0 4px var(--acento-suave); }
[aria-invalid='true'] { border-color: var(--rojo) !important; }
[aria-invalid='true']:focus { box-shadow: 0 0 0 4px var(--rojo-suave); }
.error-campo { display: flex; gap: 7px; font-size: 14px; color: var(--rojo); margin-top: 8px; }
.error-campo:empty { display: none; }

.campo label.casilla, .casilla { display: flex; margin: 0; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; background: var(--piedra); cursor: pointer; }
.casilla input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--borde-fuerte);
  background: var(--tarjeta); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-content: center;
}
.casilla input::before { content: ''; width: 11px; height: 6px; border-left: 2px solid var(--boton-texto); border-bottom: 2px solid var(--boton-texto); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.casilla input:checked { background: var(--boton); border-color: var(--boton); }
.casilla input:checked::before { opacity: 1; }
.casilla span { font-size: 15.5px; line-height: 1.5; font-weight: 350; }

/* Campo trampa: fuera de la vista de las personas y de los lectores de pantalla. */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.aviso {
  display: flex; gap: 12px; padding: 16px 18px; border-radius: 14px; font-size: 15px; line-height: 1.5; margin: 0 0 20px;
  background: var(--rojo-suave); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--rojo) 30%, transparent);
}
.aviso::before { content: '!'; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo); color: var(--tarjeta); display: grid; place-content: center; font-size: 13px; font-weight: 700; }
.aviso-info { background: var(--piedra); border-color: var(--borde); }
.aviso-info::before { content: 'i'; background: var(--tinta); font-style: italic; }
.formulario .boton-grande { width: 100%; margin-top: 8px; }
.cargando::after {
  content: ''; margin-left: 10px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.pie-formulario { font-size: 13.5px; color: var(--tenue); text-align: center; margin: 18px 0 0; }
.promesa-respuesta { font-size: 15px; text-align: center; margin: 4px 0 12px; }

/* Éxito */
.exito { padding: clamp(28px, 4vw, 48px); }
.exito .sello { width: 56px; height: 56px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: grid; place-content: center; font-size: 26px; font-weight: 600; margin-bottom: 24px; }
.exito h2 { font-size: clamp(30px, 4vw, 40px); font-weight: 300; letter-spacing: -0.03em; margin-bottom: 10px; }
.entrada-exito { font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.entrada-exito strong { font-weight: 550; white-space: nowrap; }
.exito .aviso { margin-bottom: 30px; }
.exito-subtitulo { font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin: 0 0 18px; }
.codigo-caja { margin: 28px 0 14px; padding: 26px 20px; border-radius: 18px; background: var(--fondo); border: 1px dashed var(--borde-fuerte); text-align: center; }
.codigo-caja small { display: block; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin-bottom: 12px; }
.codigo {
  display: block; font-family: var(--mono); font-size: clamp(24px, 6.4vw, 38px); font-weight: 600; letter-spacing: 0.08em;
  word-break: break-all; user-select: all; -webkit-user-select: all; line-height: 1.25;
}
.codigo-acciones { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.copiado { font-size: 14px; color: var(--acento); }
.datos-exito { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 30px; }
.datos-exito div { padding: 16px 18px; border-radius: 14px; background: var(--piedra); }
.datos-exito span { display: block; font-size: 13px; color: var(--tenue); }
.datos-exito strong { display: block; font-size: 16px; font-weight: 500; margin-top: 2px; }
@media (max-width: 560px) { .datos-exito { grid-template-columns: 1fr; } }
.pasos-exito { list-style: none; padding: 0; margin: 0 0 26px; counter-reset: p; }
.pasos-exito li { position: relative; padding: 0 0 20px 48px; counter-increment: p; }
.pasos-exito li::before {
  content: counter(p); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--borde-fuerte); display: grid; place-content: center; font-size: 14px; font-weight: 500;
}
.pasos-exito li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 4px; width: 1px; background: var(--borde); }
.pasos-exito strong { display: block; font-weight: 500; }
.pasos-exito span { color: var(--tenue); font-size: 15.5px; }

/* ---------- Páginas legales ---------- */
.banda-borrador { background: var(--ambar-suave); border-bottom: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent); color: var(--tinta); font-size: 14.5px; }
.banda-borrador .envoltura { display: block; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; }
.banda-borrador strong { margin-right: 6px; }
.banda-borrador strong { color: var(--ambar); font-weight: 600; letter-spacing: 0.02em; }
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.legal .envoltura { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
.legal-indice { position: sticky; top: 104px; font-size: 14.5px; }
.legal-indice p { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin-bottom: 14px; }
.legal-indice ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--borde); }
.legal-indice a { display: block; padding: 6px 0 6px 16px; color: var(--tenue); text-decoration: none; line-height: 1.4; }
.legal-indice a:hover { color: var(--tinta); }
.legal-texto { max-width: 720px; }
.legal-texto h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 250; letter-spacing: -0.04em; margin: 18px 0 16px; }
.legal-texto .actualizacion { color: var(--tenue); font-size: 15px; margin-bottom: 40px; }
.legal-texto .resumen { padding: 24px 26px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--borde); margin-bottom: 48px; }
.legal-texto .resumen p:last-child, .legal-texto .resumen ul:last-child { margin-bottom: 0; }
.legal-texto h2 { font-size: 24px; font-weight: 450; letter-spacing: -0.015em; margin: 52px 0 16px; padding-top: 28px; border-top: 1px solid var(--borde); scroll-margin-top: 96px; }
.legal-texto h2 .num { color: var(--tenue); font-weight: 300; margin-right: 10px; font-variant-numeric: tabular-nums; }
.legal-texto h3 { font-size: 18px; font-weight: 500; margin: 26px 0 10px; letter-spacing: 0; }
.legal-texto p, .legal-texto li { color: color-mix(in srgb, var(--tinta) 84%, var(--fondo)); }
.legal-texto ul, .legal-texto ol { padding-left: 22px; margin: 0 0 1em; }
.legal-texto li { margin-bottom: 8px; }
.marcador { background: var(--ambar-suave); color: var(--ambar); padding: 1px 6px; border-radius: 5px; font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) {
  .legal .envoltura { grid-template-columns: 1fr; gap: 0; }
  .legal-indice { display: none; }
}

/* ---------- Pantallas chicas ---------- */
@media (max-width: 480px) {
  .envoltura { padding: 0 20px; }
  .cabecera .envoltura { height: 64px; }
  .boton-grande { width: 100%; }
  .acciones .boton { width: 100%; }
}

/* ---------- Empezar y Listo: el camino de la cuenta en pasos ---------- */
.alta { padding: clamp(32px, 6vw, 80px) 0 clamp(64px, 9vw, 112px); }
.alta .envoltura { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.alta-intro h1 { font-size: clamp(38px, 5.4vw, 62px); font-weight: 250; letter-spacing: -0.04em; margin: 18px 0 20px; }
.alta-intro .lista-incluye { margin-top: 32px; }
.alta-intro .tranquilo { font-size: 15px; color: var(--tenue); }
/* Sin columna fija: con la imagen del antes y después, la columna es más alta que la pantalla y se cortaría. */
@media (max-width: 900px) {
  .alta .envoltura { grid-template-columns: 1fr; gap: 28px; }
  .alta-intro .lista-incluye, .alta-intro .tranquilo, .alta-intro .captura-registro { display: none; }
  .alta-intro .entrada { margin-bottom: 0; }
}

/* Los pasos numerados, siempre a la vista. */
.camino { list-style: none; padding: 0; margin: 0 0 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: c; }
.camino-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.camino-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camino li { counter-increment: c; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--tenue); }
.camino li::before {
  content: counter(c); display: grid; place-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--borde-fuerte); font-size: 13px; font-weight: 500; color: var(--tenue); background: var(--tarjeta);
}
.camino li::after { content: ''; order: -1; height: 2px; border-radius: 1px; background: var(--borde); margin-bottom: 4px; }
.camino li.hecho::after, .camino li[aria-current='step']::after { background: var(--tinta); }
.camino li.hecho::before { content: '✓'; color: var(--acento); border-color: var(--acento); }
.camino li[aria-current='step'] { color: var(--tinta); font-weight: 500; }
.camino li[aria-current='step']::before { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.camino-titulo { font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin: 0 0 14px; }

.alta-tarjeta { padding: clamp(24px, 4vw, 44px); }
.alta-tarjeta .camino-bloque { padding-bottom: 26px; margin-bottom: 28px; border-bottom: 1px solid var(--borde); }
.paso h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 350; letter-spacing: -0.02em; margin-bottom: 8px; }
.paso > .tenue { font-size: 16px; margin-bottom: 26px; }
.paso .boton-grande { width: 100%; margin-top: 8px; }
.paso:focus { outline: none; }
.cargando-texto { display: flex; align-items: center; gap: 12px; color: var(--tenue); padding: 24px 0; }
.cargando-texto::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde-fuerte); border-right-color: var(--tinta);
  animation: girar 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .cargando-texto::before, .cargando::after { animation-duration: 2.4s; } }

.explica { list-style: none; padding: 0; margin: 0 0 26px; }
.explica li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--borde); font-size: 16px; line-height: 1.5; }
.explica li:last-child { border-bottom: 1px solid var(--borde); }
.explica b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--piedra); display: grid; place-content: center; font-size: 13px; font-weight: 500; }
.sello-mp { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 13.5px; color: var(--tenue); text-align: center; }

/* Elegir teléfono: dos tarjetas grandes (radios de verdad, accesibles con teclado). */
.opciones { border: 0; padding: 0; margin: 0 0 22px; }
.opciones legend { font-size: 15px; font-weight: 500; margin-bottom: 12px; padding: 0; }
.opciones-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-caja {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 12px 20px; border-radius: 18px;
  border: 1.5px solid var(--borde-fuerte); background: var(--fondo); text-align: center; transition: border-color 0.15s ease, background 0.15s ease;
}
.opcion-caja svg { width: 34px; height: 56px; }
.opcion-caja strong { font-size: 18px; font-weight: 500; }
.opcion-caja small { font-size: 13.5px; color: var(--tenue); line-height: 1.35; }
.opcion:hover .opcion-caja { border-color: var(--tenue); }
.opcion input:checked + .opcion-caja { border-color: var(--tinta); background: var(--tarjeta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion input:focus-visible + .opcion-caja { outline: 2px solid var(--acento); outline-offset: 3px; }
.opciones[aria-invalid='true'] .opcion-caja { border-color: var(--rojo); }
/* En el registro: pregunta visible con su ayuda, como los demás campos. */
.opciones-registro legend { margin-bottom: 4px; }
.opciones-registro .ayuda { display: block; font-size: 13.5px; color: var(--tenue); margin: 0 0 12px; }
.opciones-registro .opcion-caja { padding: 18px 12px 16px; gap: 10px; }
.opciones-registro .opcion-caja svg { width: 28px; height: 46px; }

/* Paso final: código y descarga. */
.listo-sello { width: 56px; height: 56px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: grid; place-content: center; font-size: 26px; font-weight: 600; margin-bottom: 22px; }
.descarga { margin: 28px 0 0; padding: 24px; border-radius: 18px; background: var(--piedra); }
.descarga h3 { font-size: 20px; font-weight: 450; margin-bottom: 16px; }
.descarga .pasos-exito { margin-bottom: 20px; }
.descarga .boton { width: 100%; }
.estado { text-align: left; }
.estado .boton { margin-top: 8px; }

/* ---------- Guía en línea ---------- */
.plataformas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 26px; }
.plataforma { padding: 18px 20px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); }
.plataforma h4 { font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin: 0 0 8px; }
.plataforma p { margin: 0; font-size: 15.5px; }
@media (max-width: 620px) { .plataformas { grid-template-columns: 1fr; } }
.guia-descarga { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 44px; }
.legal-texto .pasos-exito { padding-left: 0; }
.legal-texto .pasos-exito li { margin-bottom: 0; }
.legal-texto .lista-check { display: block; padding-left: 0; }
.legal-texto .lista-check li { margin: 0; }
.recuadro { padding: 20px 22px; border-radius: 16px; background: var(--acento-suave); margin: 0 0 1em; }
.recuadro p:last-child { margin-bottom: 0; }

/* ---------- Registro que se mudó ---------- */
.mudanza { padding: clamp(64px, 12vw, 160px) 0; text-align: center; }
.mudanza h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 250; letter-spacing: -0.03em; margin-bottom: 16px; }
.mudanza .entrada { margin: 0 auto 32px; }
.alta-tarjeta .formulario, .alta-tarjeta .exito { padding: 0; }
@media (max-width: 480px) {
  .alta-tarjeta { padding: 22px 20px 26px; border-radius: 20px; }
  .camino { gap: 4px; }
  .camino li { font-size: 12px; }
}

/* ---------- Registro en vivo (/empezar): revisión → código → activada ---------- */
.seguimiento .sello-espera { position: relative; background: var(--piedra); }
.seguimiento .sello-espera span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borde-fuerte); border-top-color: var(--tinta); animation: girar 1.4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seguimiento .sello-espera span { animation-duration: 4s; } }
.seguimiento .sello-aviso { background: var(--ambar-suave); color: var(--ambar); }
.seguimiento-nota { font-size: 15px; margin: -8px 0 22px; }
.seguimiento .descarga { margin-bottom: 26px; }
.seguimiento .descarga .pasos-exito { margin-bottom: 4px; }
.seguimiento .descarga .boton { margin-top: 16px; }

/* Botones al pie del registro en vivo: «Volver al inicio» y «Registrarme con otros datos». */
.acciones-seguimiento { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
#vista-codigo p { margin: 0 0 14px; }
#form-codigo { margin: 16px 0 12px; }
#form-codigo .boton { margin-top: 12px; width: 100%; }
#codigo-correo { font-size: 28px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.pf-aviso-cedula { margin: 0; padding: 10px 16px; font-size: 14px; text-align: center; background: var(--aviso-fondo, #ece7dd); border-bottom: 1px solid var(--linea, #d9d2c3); }
.boton-enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.boton-enlace:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
#vista-codigo .boton { margin-top: 6px; }
.pie-marca .pie-loom { margin-top: 6px; font-size: 13px; letter-spacing: 0.04em; opacity: 0.8; }
.pie-marca .pie-contacto { margin-top: 10px; font-size: 13.5px; }
.pie-contacto a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pie-contacto a:hover { color: var(--tinta); }