/* ============================================================================
   CC Fit — sistema visual del sitio público (ccfit.cl)

   Una sola hoja para las siete páginas. Cada HTML agrega sólo lo suyo en un
   <style> acotado.

   REBRANDING 2026-09-06 — el sitio dejó de vestirse con la paleta verde de la
   app (#0D3B2E / #2ECC8E sobre #F0F7F4) y pasó a vestirse con la de su PROPIO
   LOGO, que es menta (#91E0BD) y teal (#32ADA8). El logo no se tocó.

   Lo que cambió: papel cálido en vez de verde pálido, barra en píldora
   flotante en vez de franja oscura de borde a borde, líneas de 1 px en vez de
   sombras, radios más grandes, y dos tipografías propias.

   LA REGLA QUE SOSTIENE TODO SIGUE SIENDO LA MISMA, ahora con el teal del
   logo: el color de marca es una SUPERFICIE, nunca un texto sobre fondo claro.
   #32ADA8 sobre blanco da 2,7:1 y no pasa AA. Como relleno con --ink encima da
   5,4:1; la menta con --ink encima, 9,6:1. Para ESCRIBIR en teal está
   --teal-ink (#00736D), que da 5,3:1 sobre el papel. Sobre fondo oscuro se
   invierte y ahí el teal claro sí puede ser texto.

   FUENTES AUTOALOJADAS, NO DE CDN. La CSP de vercel.json no declara font-src,
   así que cae en `default-src 'self'`: los .woff2 tienen que venir del mismo
   origen. Están en /fuentes/, bajados del subconjunto latino de Google Fonts.
   Por eso el bloque de la CSP no cambió con el rediseño. Los dos son
   variables, así que un archivo por familia cubre todos los pesos.
   ============================================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fuentes/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fuentes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superficies y tinta. El papel es un blanco cálido, no el verde pálido de
     antes: deja que el teal del logo sea lo único con color en la pantalla. */
  --paper: #F8F7F4;
  --surface: #FFFFFF;
  --ink: #0F2C2A;
  --body: #425B59;
  /* 4,7:1 sobre --paper. El #6A7F7D que salía "natural" del cálculo en oklch
     daba 3,96:1 y no pasaba AA para texto normal. */
  --gray: #5E7371;
  --line: #DBE3E0;
  --line2: #C2CEC9;

  /* Los dos colores del logo, tal cual. */
  --teal: #32ADA8;
  --mint: #91E0BD;
  /* Versión escribible del teal: 5,3:1 sobre papel, 5,7:1 sobre blanco. */
  --teal-ink: #00736D;
  --teal-deep: #033633;
  --mint-soft: #DDF7ED;
  --mint-tint: #EEFAF5;

  /* Familia de aviso: lo único que se sale del teal. 7,7:1. */
  --warn-bg: #FDF1D8;
  --warn-line: #EDD5A3;
  --warn-ink: #6C4302;

  /* Sólo errores. 6,0:1. */
  --error-bg: #FFE7E4;
  --error-line: #F3C4BF;
  --error-ink: #A9231E;

  /* Texto sobre --ink: blanco en claro, papel oscuro en oscuro. */
  --on-ink: #FFFFFF;

  --r-chip: 10px;
  --r-field: 14px;
  --r-btn: 999px;
  --r-card: 24px;

  --sh-card: 0 1px 2px rgba(15, 44, 42, .05);
  --sh-raised: 0 30px 60px -28px rgba(15, 44, 42, .35);
  /* Sombra de "hay más a la derecha" de .tabla-scroll: dos paradas (color y su
     transparente, mismo tono para que el degradado no pase por gris). */
  --sombra-scroll: rgba(15, 44, 42, .16);
  --sombra-scroll-0: rgba(15, 44, 42, 0);

  --medida: 720px;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --texto: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #031A1A;
    --surface: #0E2626;
    --ink: #E5EDEA;
    --body: #B1C2BE;
    --gray: #869692;
    --line: #233A39;
    --line2: #2E4A48;

    /* Sobre oscuro el teal sí puede ser texto: 10,1:1. */
    --teal-ink: #6DD3C0;
    --teal-deep: #0E2626;
    --mint-soft: #0F3530;
    --mint-tint: #0B2C29;

    --warn-bg: #3A2A10;
    --warn-line: #6B4E1B;
    --warn-ink: #F5D9A8;

    --error-bg: #3B1A1A;
    --error-line: #6B2C2C;
    --error-ink: #F7C9C9;

    --on-ink: #031A1A;

    --sh-card: none;
    --sh-raised: none;
    --sombra-scroll: rgba(0, 0, 0, .55);
    --sombra-scroll-0: rgba(0, 0, 0, 0);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* CRÍTICO. confirmado.js, recuperar.js y admin.js muestran y ocultan secciones
   con la propiedad `hidden`. Varios de esos contenedores son flex o grid, y
   `display:flex` GANA sobre el atributo hidden: sin esta regla, la página
   mostraría todos los estados a la vez. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.025em;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a {
  color: var(--teal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--mint-soft);
  border-radius: 5px;
  padding: 1px 5px;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Etiqueta de sección: monoespaciada, en versalitas. Reemplaza al .label
   gris de antes y es lo que le da el aire "de sistema" al rediseño. */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-ink);
  line-height: 1.2;
}

/* Etiqueta con cápsula, para cuando va sola sobre el papel. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-ink);
  line-height: 1;
}
.eyebrow svg { width: 14px; height: 14px; flex: none; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: sólo aparece con el teclado. */
.saltar {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 40;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: top .12s;
}
.saltar:focus { top: 12px; color: var(--on-ink); }

/* ── Barra superior ───────────────────────────────────────────────────────── */

.topbar { padding-top: 14px; position: relative; z-index: 20; }

.navpill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  /* Translúcida: deja pasar el brillo del hero que corre por debajo. */
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px);
}
@supports not (backdrop-filter: blur(1px)) {
  .navpill { background: var(--surface); }
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  /* El logo es el enlace a la portada: objetivo táctil completo, no sólo la imagen. */
  min-height: 44px;
}
.marca:hover { color: var(--ink); }
.marca img { width: 32px; height: 32px; border-radius: 9px; }

.nav-links { display: none; align-items: center; gap: 26px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: 8px; }

/* Menú del teléfono. Es un <details> de verdad, sin JavaScript: se abre y se
   cierra solo con el teclado y el dedo. Antes los enlaces sencillamente
   desaparecían bajo 700px y no había forma de llegar a soporte o privacidad
   desde la portada en un teléfono. */
.menu { position: relative; }
.menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 20px; height: 20px; }
.menu[open] > summary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 20px 40px -18px rgba(15, 44, 42, .4);
  display: flex;
  flex-direction: column;
}
@media (prefers-color-scheme: dark) {
  .menu-panel { box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
}
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.menu-panel a:hover { background: var(--mint-tint); color: var(--ink); }
.menu-panel a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── Cabecera de página interior ──────────────────────────────────────────── */

.phead { padding: 40px 0 32px; }
.phead h1 {
  font-size: 34px;
  letter-spacing: -.032em;
  margin-top: 16px;
}
.phead p {
  color: var(--body);
  font-size: 17px;
  margin-top: 14px;
  max-width: var(--medida);
}
.phead-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--body);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
}
.chip svg { width: 14px; height: 14px; color: var(--teal-ink); flex: none; }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  border: 0;
  border-radius: var(--r-btn);
  padding: 15px 26px;
  min-height: 52px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--teal-deep); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--ancho { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid var(--line2);
  border-radius: var(--r-btn);
  padding: 13px 22px;
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost svg { width: 17px; height: 17px; flex: none; }
.btn-ghost:disabled { opacity: .55; cursor: default; }

/* Botón de tienda. Un solo componente para los dos estados: al publicar se
   quita data-pronto y se cambia el href — el resto no se toca. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-field);
  padding: 8px 18px 8px 14px;
  min-height: 52px;
}
.store:hover { color: var(--on-ink); }
.store svg { width: 22px; height: 22px; flex: none; }
.store .s-sub {
  display: block;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.25;
  opacity: .8;
}
.store .s-name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.store[data-pronto] {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line2);
}
.store[data-pronto]:hover { border-color: var(--ink); color: var(--ink); }
.store[data-pronto] .s-sub { color: var(--gray); opacity: 1; }

.tiendas { display: flex; gap: 10px; flex-wrap: wrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mint-soft);
  color: var(--teal-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* ── Tarjetas y notas ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 26px;
}

.note {
  display: flex;
  gap: 14px;
  background: var(--mint-tint);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
}
.note svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--teal-ink); }
.note p { font-size: 15px; line-height: 1.6; color: var(--body); }
.note p + p { margin-top: 10px; }
.note strong { color: var(--ink); }

.note--warn {
  background: var(--warn-bg);
  border-color: var(--warn-line);
}
.note--warn, .note--warn p, .note--warn strong { color: var(--warn-ink); }
.note--warn svg { color: var(--warn-ink); }
.note--warn a { color: var(--warn-ink); }

/* Ícono cuadrado de sección. */
.fico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mint-soft);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fico svg { width: 23px; height: 23px; }

/* ── Índice lateral ───────────────────────────────────────────────────────── */

.toc h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--body);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.toc a:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.toc .n { font-family: var(--mono); font-size: 12px; color: var(--gray); flex: none; padding-top: 2px; }

/* S-01 / P-02 — bajo 1000px el índice se pliega: son 8-12 enlaces que, abiertos, empujan el
   contacto o el primer párrafo fuera de la primera pantalla. Arranca cerrado en el HTML (sin
   `open`) para no mover nada al cargar — abrirlo y cerrarlo de golpe apenas carga es justo lo
   que castiga Cumulative Layout Shift; toc.js sólo lo ABRE cuando la pantalla ya es ancha. Sin
   JS, sigue pudiendo abrirse a mano tocando el resumen (conducta nativa de <details>). */
.toc-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding-bottom: 12px;
}
.toc-details > summary::-webkit-details-marker { display: none; }
.toc-details > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gray);
  border-bottom: 2px solid var(--gray);
  transform: rotate(45deg);
  transition: transform .15s;
}
.toc-details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc-details > summary > h2 { display: inline; margin: 0; }
@media (min-width: 1000px) {
  .toc-details > summary { cursor: default; pointer-events: none; }
  .toc-details > summary::after { display: none; }
}

/* ── Ruta dentro de la app ────────────────────────────────────────────────── */

.path {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--mint-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 13px;
  margin-top: 14px;
}
.path b { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.path svg { width: 14px; height: 14px; color: var(--teal-ink); flex: none; }

/* ── Formulario ───────────────────────────────────────────────────────────── */

.field { margin-top: 18px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  height: 52px;
  border: 1.5px solid var(--line2);
  border-radius: var(--r-field);
  background: var(--surface);
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.field input::placeholder { color: var(--gray); }
.field input:focus-visible {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 4px rgba(50, 173, 168, .22);
}

.hint { font-size: 13.5px; color: var(--gray); margin-top: 12px; line-height: 1.5; }

/* «Ver lo que escribo» (UX-011) — compartida por recuperar.html y admin.html (A-13).
   R-04: antes tenía un margen negativo que la pegaba al campo de arriba. */
.ver-clave { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; }
/* 24x24 mínimo (WCAG 2.2, objetivos táctiles). */
.ver-clave input { width: 24px; height: 24px; accent-color: var(--teal); margin: 0; }
/* R-01 — el gris fijo (#4b5563) daba 2,26:1 sobre el fondo oscuro. --body ya
   resuelve las dos apariencias. */
.ver-clave label { font-size: 14.5px; color: var(--body); margin: 0; font-weight: 500; }

/* R-06 — «Abrir CC Fit» usa un esquema ccfit:// que no existe en un computador: ahí se
   reemplaza por una nota, con el mismo criterio (puntero fino + hover) para no depender de
   analizar el user-agent. Compartida por confirmado.html y recuperar.html. */
.solo-escritorio {
  display: none;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-field);
  background: var(--mint-tint);
  border: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.5;
}
.solo-escritorio svg { width: 20px; height: 20px; color: var(--teal-ink); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-abrir-app { display: none; }
  .solo-escritorio { display: flex; }
}

/* #aviso de recuperar.html y de admin.html.

   Los dos scripts hacen `aviso.textContent = texto`, que BORRA cualquier hijo.
   Por eso el ícono va como ::before (background-image) y no como <svg> hijo:
   si fuera un elemento, desaparecería al primer error. Por lo mismo, este
   bloque no puede llevar ningún otro contenido en el HTML. */
.alerta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--error-bg);
  border: 1px solid var(--error-line);
  border-radius: var(--r-chip);
  padding: 12px 14px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--error-ink);
}
.alerta::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: var(--ico-alerta) center / contain no-repeat;
  mask: var(--ico-alerta) center / contain no-repeat;
}
:root {
  --ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.8v4.6'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --ico-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m4 17 5-4.5 3.5 3 3-2.5 5 4'/%3E%3C/svg%3E");
}

/* ── Pantallas de retorno del correo y pasos numerados ────────────────────── */

/* Columna angosta y centrada, pensada para el teléfono, que es desde donde casi
   siempre se abre el enlace del correo. La comparten /confirmado y /recuperar;
   antes cada una repetía estas reglas en su propio <style>. */
.estado { max-width: 520px; margin: 0 auto; padding: 24px 0 8px; }
.ico {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint-soft);
  color: var(--teal-ink);
}
.ico svg { width: 28px; height: 28px; }
.ico--ok { background: var(--mint); color: #0F2C2A; }
.ico--espera { background: var(--warn-bg); color: var(--warn-ink); }
.estado h2 { font-size: 26px; letter-spacing: -.028em; margin-top: 18px; }
.estado .sub { font-size: 16.5px; color: var(--body); margin-top: 10px; line-height: 1.6; }
.estado .btn { margin-top: 22px; }
.muted { font-size: 13.5px; color: var(--gray); margin-top: 14px; line-height: 1.55; }
.sep { height: 1px; background: var(--line); margin: 26px 0; }

/* Pasos numerados. Los usan la portada (Desafío 15 Días) y las dos pantallas
   de retorno del correo. */
.pasos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pasos li { display: flex; gap: 13px; align-items: flex-start; }
.pasos .n {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mint-soft); color: var(--teal-ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px;
}
.pasos p { font-size: 15.5px; color: var(--body); line-height: 1.55; }
.pasos strong, .pasos b { color: var(--ink); font-weight: 600; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 44px 0 36px;
}
.foot-grid { display: flex; flex-direction: column; gap: 30px; }
.foot .marca span { font-size: 17px; }
.foot-desc { color: var(--gray); font-size: 14.5px; margin-top: 14px; line-height: 1.6; max-width: 340px; }
.foot h2 {
  font-family: var(--mono);
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.foot li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
  font-size: 15px;
  text-decoration: none;
}
.foot li a:hover { color: var(--ink); }
.foot-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Pie corto de las pantallas de retorno del correo. */
.foot-min {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 18px;
  padding-bottom: 40px;
  color: var(--gray);
  font-size: 13px;
}
.foot-min ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}
/* R-03 — medían 18px de alto; con el relleno llegan a los ~44px recomendados para el dedo. */
.foot-min a { display: inline-block; padding: 11px 0; font-size: 13px; color: var(--body); text-decoration: none; }
.foot-min a:hover { color: var(--ink); text-decoration: underline; }

/* ── Contenido largo (soporte y privacidad) ───────────────────────────────── */

.doc { padding: 8px 0 8px; }
.doc main { max-width: var(--medida); }
.doc h2.s {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 25px;
  margin: 46px 0 0;
  scroll-margin-top: 20px;
}
.doc h2.s .n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-ink);
  letter-spacing: .06em;
  flex: none;
}
.doc h3.s {
  font-family: var(--texto);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 24px 0 0;
  color: var(--teal-ink);
}
/* Solo la prosa de primer nivel. Con `main p` a secas, esta regla ganaba por
   especificidad sobre los componentes con fondo propio (.contacto-final, .lead-card)
   y les imponía el color del cuerpo: texto gris sobre verde oscuro, 1,54:1. */
.doc main > p { font-size: 16.5px; color: var(--body); margin-top: 14px; line-height: 1.65; }
.doc main > p strong { color: var(--ink); }

ul.bullets { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
ul.bullets li { display: flex; gap: 11px; font-size: 16px; color: var(--body); line-height: 1.6; }
ul.bullets li strong, ul.bullets li b { color: var(--ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; margin-top: 11px; }

/* P-01 — sombra a los bordes que se recorta sola cuando ya no queda nada más que ver: dos capas
   que se desplazan con el contenido (background-attachment: local) tapan la sombra fija de abajo
   (scroll) apenas se llega al borde.
   CORREGIDO 06-09 — esto vivía en `.tabla-scroll` pero `table` de más abajo pintaba encima un
   fondo OPACO que ocupa todo el ancho: la sombra nunca se veía. El fondo/radio/borde de la
   tarjeta viven en `.tabla-scroll` (que ya recorta en las dos direcciones porque `overflow-x:auto`
   fuerza `overflow-y` a no ser `visible`) y `table` queda transparente para dejarlos ver. */
.tabla-scroll {
  overflow-x: auto;
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-card);
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--sombra-scroll), var(--sombra-scroll-0)),
    radial-gradient(farthest-side at 100% 50%, var(--sombra-scroll), var(--sombra-scroll-0)) 100% 0,
    var(--surface);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%, 100% 100%;
  background-attachment: local, local, scroll, scroll, local;
}
.scroll-pista {
  font-size: 13px;
  color: var(--gray);
  margin-top: 10px;
}
@media (min-width: 580px) {
  /* Medido: con el ancho mínimo de la tabla (520px) y el relleno de .wrap bajo 700px (20px por
     lado), el contenido ya no necesita scroll desde ~561px de viewport. */
  .scroll-pista { display: none; }
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}
th {
  font-family: var(--mono);
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line2);
}
td {
  padding: 15px 16px;
  font-size: 15px;
  color: var(--body);
  border-top: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
thead + tbody tr:first-child td { border-top: 0; }
td strong { color: var(--ink); }

/* Preguntas frecuentes */
.faq { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.q {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh-card);
  padding: 24px;
}
.q h3 {
  font-family: var(--texto);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  scroll-margin-top: 20px;
}
.q p { font-size: 16px; color: var(--body); margin-top: 12px; line-height: 1.6; }
.q em { color: var(--ink); font-style: italic; }

/* ── Anchos grandes ───────────────────────────────────────────────────────── */

@media (min-width: 700px) {
  body { font-size: 17px; }
  .wrap { padding: 0 32px; }
  .topbar { padding-top: 18px; }
  .navpill { min-height: 64px; padding: 0 8px 0 18px; }
  .marca { font-size: 18px; }
  .marca img { width: 34px; height: 34px; }
  .phead { padding: 56px 0 40px; }
  .phead h1 { font-size: 48px; }
  .phead p { font-size: 19px; }
  .doc h2.s { font-size: 27px; }
  .q { padding: 26px 28px; }
  .foot { margin-top: 96px; padding: 56px 0 40px; }
  .foot-grid { flex-direction: row; justify-content: space-between; gap: 40px; }
  .foot ul { gap: 0; }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .menu { display: none; }
}

@media (min-width: 1000px) {
  .doc .wrap {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .toc { position: sticky; top: 24px; }
}

/* Quien pide menos movimiento no debería recibir transiciones. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* P-03 — «Guardar como PDF» de la política (o de soporte) imprimía barra, índice y pie.
   Se ocultan y se muestra la URL de cada enlace, que en papel no se puede tocar. */
@media print {
  .topbar, .foot, .foot-min, .toc, .saltar, .menu { display: none !important; }
  .doc .wrap { display: block !important; }
  .phead { padding: 0 0 16px; }
  .phead h1, .phead .label, .phead p, .eyebrow { color: #000 !important; }
  .eyebrow, .chip { background: none !important; border: 1px solid #999; color: #000 !important; }
  body { background: #fff; }
  .card, .q, .note, .tabla-scroll { box-shadow: none !important; }
  /* Los dos bloques de tinta oscura del sitio (la tarjeta de contacto de la política y el
     aviso de la portada) se vacían: en papel son un rectángulo negro que se bebe el tóner
     y deja el texto ilegible en impresoras a blanco y negro. */
  .contacto-final, .confianza {
    background: none !important;
    border: 1px solid #999;
    border-radius: 0;
  }
  .contacto-final p, .contacto-final a, .confianza h2, .confianza h3, .confianza p, .confianza .label {
    color: #000 !important;
  }
  /* Sólo enlaces http(s): un mailto: impreso como "correo@… (mailto:correo@…)" es ruido, no
     ayuda — el correo ya se lee tal cual en el texto. */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-weight: 400;
    font-size: .82em;
    color: #555;
  }
}