/* Holdout · hoja única.
   Los colores se definen una sola vez en :root y se redefinen sólo como
   tokens en los dos bloques de tema. Ningún componente declara un color
   literal: si lo hiciera, en el otro tema quedaría texto de un juego sobre
   el fondo del otro. */

:root {
  --paper:    #F7F6F3;
  --card:  #FFFFFF;
  --ink:    #16161A;
  --muted:    #6B6B75;
  --line:    #E3E1DB;
  --highlight:   #EFEDE7;
  --accent:   #12121A;
  --accent-soft: #F1FBD4;
  --drop:     #146B45;
  --warm:    #9C5220;
  --shadow:   0 1px 2px rgba(20, 20, 26, .06), 0 8px 24px -16px rgba(20, 20, 26, .3);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --text:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --width: 62rem;
  --radius: 6px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #131317;
    --card: #1B1B21;
    --ink:   #EDECE8;
    --muted:   #8E8E98;
    --line:   #2A2A32;
    --highlight:  #212129;
    --accent:  #F2F1EC;
    --accent-soft: #23213C;
    --drop:    #52C08D;
    --warm:   #DC9A63;
    --shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:   #131317;
  --card: #1B1B21;
  --ink:   #EDECE8;
  --muted:   #8E8E98;
  --line:   #2A2A32;
  --highlight:  #212129;
  --accent:  #F2F1EC;
  --accent-soft: #23213C;
  --drop:    #52C08D;
  --warm:   #DC9A63;
  --shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

h1, h2 { font-family: var(--display); font-weight: 700; text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; margin: 0 0 .6rem; }
h2 { font-size: 1.2rem; margin: 0 0 .8rem; }

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.num, .figure, .figure-lg { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- armazón */

.site-header, main, .site-footer {
  max-width: var(--width);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.5rem 2rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em;
}
.brand-mark {
  /* El logo entra como máscara, no como imagen: así se pinta con var(--ink) y
     en tema oscuro se aclara solo. Con un <img> haría falta un segundo fichero
     claro, o un invert() que en oscuro deja la H gris sucia en vez de crema. */
  width: 1.19em; height: 1em; flex: none;
  background-color: var(--ink);
  -webkit-mask: url(/logo.png) center / contain no-repeat;
          mask: url(/logo.png) center / contain no-repeat;
}
.site-header nav { display: flex; align-items: center; gap: 1.25rem; font-size: .9rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }
/* En un móvil estrecho la marca y los tres enlaces no caben en una línea: se
   partían por dentro y quedaba «How it / works». Mejor la marca arriba y la
   navegación repartida debajo. */
@media (max-width: 30rem) {
  .site-header { flex-wrap: wrap; gap: .9rem; padding-block: 1.2rem 1.6rem; }
  .site-header nav { width: 100%; justify-content: space-between; gap: .75rem; }
  .site-header nav a { white-space: nowrap; }
}

main > * + * { margin-top: 3rem; }

/* El aviso del pie, a 62rem, pasaba de 120 caracteres por línea, y el enlace
   quedaba colgando solo debajo. El texto se queda con medida de lectura y el
   enlace se va a la otra columna: dos bloques, no tres párrafos apilados. */
.site-footer {
  margin-top: 5rem; padding-block: 2rem 3rem;
  border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 2.5rem; align-items: start;
}
.foot-text { max-width: 46rem; }
.site-footer p { margin: 0 0 .5rem; }
.site-footer p:last-child { margin-bottom: 0; }
.foot-links { margin: 0; }
/* Quién firma esto: debajo de los enlaces y en su misma columna. Es de la
   misma familia —lo que se consulta y no se pulsa—, y puesto bajo el texto
   quedaba colgando de un párrafo largo y se leía como una línea más del
   aviso. En una sola columna vuelve a la primera, o el grid se inventa una
   segunda para él solo. */
.foot-by { grid-column: 2; margin: .4rem 0 0; }
@media (max-width: 46rem) { .foot-by { grid-column: 1; } }
.site-footer strong { color: var(--ink); }
@media (max-width: 46rem) { .site-footer { grid-template-columns: minmax(0, 1fr); } }

.section-title {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink);
  margin: 2.5rem 0 .3rem; padding: 0; border: 0;
}

/* -------------------------------------------------------------- hero */

.hero { max-width: 40rem; }
.lede { font-size: 1.05rem; color: var(--muted); margin: 0 0 2rem; }

.signup {
  display: grid; gap: .75rem; align-items: end;
  grid-template-columns: 1fr 15rem auto;
  padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.signup.compact { grid-template-columns: 1fr auto; box-shadow: none; }
.field { display: grid; gap: .3rem; min-width: 0; }
.field > span {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.field input {
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: .55rem .65rem; width: 100%;
}
.field input::placeholder { color: var(--muted); opacity: .7; }

button, .button {
  font: 600 .92rem/1 var(--text); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 4px;
  padding: .7rem 1.1rem; cursor: pointer; text-decoration: none;
  display: inline-block; white-space: nowrap;
}
button:hover, .button:hover { background: var(--accent); border-color: var(--accent); }

.banner-ok {
  padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--line);
  font-size: .92rem; margin: 0 0 2rem;
}

.summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  margin: 2rem 0; overflow: hidden;
}
.summary div {
  display: grid; gap: .15rem; padding: 1.2rem 1.4rem;
  border-left: 1px solid var(--line);
}
.summary div:first-child { border-left: 0; }
@media (max-width: 620px) {
  .summary div:nth-child(odd) { border-left: 0; }
  .summary div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.summary .figure {
  font-family: var(--display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}
.summary span { font-size: .8rem; color: var(--muted); }

/* -------------------------------------------------------------- board */

.tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--line); margin-bottom: .5rem;
}
.tabs a {
  font-size: .82rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: .5rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }

.board { list-style: none; margin: 0; padding: 0; }
/* Las dos listas comparten carril. Con la primera columna en `auto`, cada una
   se alineaba por su cuenta —el chip del dominio mide más que la marca de
   enviado— y el nombre de un aviso abierto empezaba 5rem a la derecha del de
   uno enviado: dos listas de la misma página parecían dos componentes. Con la
   medida fija arrancan en la misma vertical. */
.row {
  display: grid; align-items: center; gap: 1.1rem;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  min-height: 5.4rem;
  padding: 1.1rem 1.4rem; margin-bottom: .7rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* El hover era un borde casi negro sobre fondo beige: dos cambios fuertes a la
   vez para decir algo que no lo es —«esto se puede pinchar»—, y en una lista de
   varias filas el puntero iba encendiendo carteles. Ahora la fila se levanta:
   se queda blanca, la línea sólo se oscurece un punto y la sombra hace el
   resto. La mezcla va sobre los tokens, así que en oscuro sale sola. */
.row:hover {
  border-color: color-mix(in srgb, var(--ink) 20%, var(--line));
  box-shadow: var(--shadow);
}
/* Los dos estados se distinguen antes de leer una palabra: lo abierto es
   tarjeta blanca con un raíl vivo al canto, lo enviado se hunde en el fondo y
   pierde el relieve. El ✓ solo no bastaba —era la única diferencia entre las
   dos listas— y obligaba a leer la fila para saber si todavía se podía entrar.
   Los 2px que se come el raíl se devuelven en el padding: si no, los nombres de
   una lista arrancan dos píxeles a la derecha de los de la otra. */
.row:not(.done) { border-left: 3px solid var(--drop); padding-left: calc(1.4rem - 2px); }
.row.done {
  background: var(--highlight); border-color: transparent;
  grid-template-columns: 10rem minmax(0, 1fr) auto auto;
}
.row.done:hover { border-color: transparent; box-shadow: none; }
/* Y una fila abierta abre la cuarta columna sólo si tiene algo que poner en
   ella. Ver la plantilla: a cero, la espera se cuenta dentro del cuerpo. */
.row.counted { grid-template-columns: 10rem minmax(0, 1fr) auto auto; }
/* Sin esto el chip se estira hasta llenar la columna: la rejilla convierte en
   bloque lo que es `inline-flex`, y el punto se despega del dominio. Y cada
   fila es su propia rejilla, así que la columna va con medida fija: con `auto`
   un dominio largo ensancha su fila y desalinea la lista entera. */
.row .chip-host { justify-self: start; max-width: 100%; overflow: hidden; }
/* Las tres variantes van nombradas una a una: una media query no añade
   especificidad, así que `.row` a secas pierde contra `.row.done` y contra
   `.row.counted`, y la fila con cifra se quedaba en cuatro columnas dentro del
   ancho de un móvil — el número y el botón encima del nombre. */
@media (max-width: 700px) {
  .row, .row.done, .row.counted {
    grid-template-columns: minmax(0, 1fr); gap: .75rem;
    min-height: 0; padding: 1.1rem 1.2rem;
  }
  .row .join, .row .link-arrow, .row .stat { justify-self: start; }
  .row .stat, .row .body { border: 0; padding-inline: 0; }
}
.row .body { gap: .25rem; }
.row .waiting-none { margin-top: .1rem; }
/* La cifra deja de ser una frase al final de la fila y pasa a ser columna:
   numeral arriba, unidad debajo. Así se comparan hacia abajo de un vistazo, que
   es lo que una lista ordenada por espera tiene que dejar hacer. El filete es
   lo que las hace leer como columnas y no como texto suelto. */
.row .stat {
  text-align: left; align-self: stretch; align-content: center;
  border-inline: 1px solid var(--line); padding-inline: 1.1rem;
}
/* Y el mismo filete separa el chip del dominio —o la marca de enviado— del
   nombre. Sin ellos la fila es una frase larga; con ellos son cuatro cosas
   distintas, que es lo que son. El botón no lleva ninguno: ya es un bloque
   macizo y una raya pegada a su canto se lee como parte del botón. */
.row .body { border-left: 1px solid var(--line); padding-left: 1.1rem; }
.row .stat strong { font-size: 1.25rem; }
.row .stat span {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em;
}

.rank {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  background: var(--highlight); border-radius: 6px;
  padding: .35em .6em; white-space: nowrap;
  max-width: 8rem; overflow: hidden; text-overflow: ellipsis;
}
.row.done .rank { background: #E7F2EC; color: var(--drop); text-align: center; }
:root[data-theme="dark"] .row.done .rank { background: var(--highlight); }
.body { display: grid; gap: .15rem; min-width: 0; text-decoration: none; color: inherit; }
.name {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.body:hover .name { color: var(--accent); }
/* El aviso literal debajo del nombre, y a una sola línea. Aquí sólo tiene que
   dejar ver de qué va la promesa: entera se lee en la ficha, que es donde
   alguien decide. Con `nowrap` y su elipsis, un aviso de 300 caracteres no
   descuadra la fila. */
.promise-line {
  font-size: .84rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store { font-size: .78rem; color: var(--muted); }
.drop { color: var(--drop); font-weight: 500; }

/* Las cuatro cifras del board. La de "canales" es la que mueve al
   marketer, así que ninguna se entierra: mismo peso, misma columna. */
.stat { display: grid; gap: .05rem; text-align: right; }
.stat strong {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 500;
}
.stat span { font-size: .68rem; color: var(--muted); }
/* Un band ("25–50") no es una figure: en mono y a tamaño de figure parte la
   row en dos líneas. Va más pequeño y en la tipografía de texto. */
.stat strong.band {
  font-family: var(--text); font-size: .78rem; font-weight: 500;
  line-height: 1.35; color: var(--muted);
}
.stat.bid strong { font-size: .85rem; color: var(--warm); }

/* --------------------------------------------------------------- sheet */

.crumbs { font-size: .8rem; color: var(--muted); margin: 0 0 .4rem; }
.sheet-body { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; }
/* Una ficha recién propuesta puede no traer foto todavía. Sin esto, los datos
   se meten en la columna de la foto y la ficha sale en un pilar de 12rem. */
.sheet-body.no-photo { grid-template-columns: minmax(0, 1fr); }
.photo {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem;
}
.facts { display: grid; gap: 1.25rem; align-content: start; }
.price-lg {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 2.2rem; font-weight: 500; margin: 0; letter-spacing: -.02em;
}
/* La bajada va pegada al precio grande y no en la lista de abajo: es lo que
   viene a ver quien llega desde un aviso, porque R-34 deja el "cuánto" fuera
   del mensaje. En em, para que siga el tamaño del precio y no se despegue. */
.price-was {
  font-size: .5em; color: var(--muted); margin-left: .5rem;
  text-decoration-thickness: 1px;
}
.price-drop {
  font-size: .45em; color: var(--drop); font-weight: 600; margin-left: .35rem;
}
/* Cuando la tienda no admite que publiquemos su precio, en el hueco del número
   grande queda sólo el hecho. Sin cifra no hacen falta ni la caja mono ni los
   2.2rem: se compone como un titular corto, no como el hueco de algo que
   falta. */
.price-lg.bare {
  font-size: 1.35rem; font-family: inherit; letter-spacing: 0;
}
.price-lg.bare .price-drop { font-size: 1em; margin-left: 0; }
.facts dl {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem;
  margin: 0; font-size: .88rem;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.watch-cta {
  display: grid; gap: .75rem; padding: 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.watch-cta .cta-label {
  margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.watch-cta .signup { padding: 0; border: 0; background: none; box-shadow: none; }
.button.telegram { background: var(--accent); border-color: var(--accent); text-align: center; }
.button.telegram:hover { background: var(--ink); border-color: var(--ink); }

/* Estado de comprobación de la ficha. Va antes del botón de alta a propósito:
   el usuario decide sabiendo si el precio lo ha mirado alguien o sólo lo ha
   declarado el canal que propuso la ficha. */
.state {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .75rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  font-size: .85rem; margin: 0; line-height: 1.45;
}
.state .state-mark { font-family: var(--mono); line-height: 1; }
.state.checked { border-color: var(--drop); }
.state.checked strong, .state.checked .state-mark { color: var(--drop); }
.state.pending { border-color: var(--warm); }
.state.pending strong, .state.pending .state-mark { color: var(--warm); }

.banner-channel {
  padding: .7rem 1rem; border-radius: var(--radius);
  background: var(--highlight); border: 1px solid var(--line);
  font-size: .85rem; color: var(--muted); margin: 0;
}
.banner-channel strong { color: var(--ink); }

.slot-panel {
  padding: 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
}
.slot-panel.taken { border-color: var(--warm); }
.slot-panel p { margin: 0; font-size: .92rem; }
.tag {
  display: inline-block; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--warm);
  border: 1px solid var(--warm); border-radius: 999px; padding: .1rem .45rem;
  margin-left: .35rem; vertical-align: 1px;
}

.plain-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.plain-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }

.history { width: 100%; border-collapse: collapse; font-size: .88rem; }
.history th {
  text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.history td { padding: .5rem 0; border-bottom: 1px solid var(--line); }
/* Sin anchos declarados las columnas se pegan y "Price" acaba tocando
   "In stock". Van fijas porque el contenido es corto y previsible. */
.history th, .history td { padding-right: 1.5rem; }
.history th:last-child, .history td:last-child { padding-right: 0; }
.history th:nth-child(1), .history td:nth-child(1) { width: 40%; }
.history th:nth-child(2), .history td:nth-child(2) { width: 22%; text-align: right; }
.history th:nth-child(3), .history td:nth-child(3) { width: 18%; }
.history .num { text-align: right; }

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1rem; }
.prose code {
  font-family: var(--mono); font-size: .88em; background: var(--highlight);
  padding: .1rem .3rem; border-radius: 3px;
}

.empty-state { text-align: center; padding: 3rem 0; }
.figure-lg { font-size: 3rem; color: var(--muted); margin: 0 0 .5rem; }

/* ------------------------------------------------------------ estrecho */

@media (max-width: 46rem) {
  .signup, .signup.compact { grid-template-columns: 1fr; }
  /* La fila la apila el bloque de 700px. Aquí sólo quedan los restos del
     tablero de precios, que ya no pinta ninguna plantilla. */
  .rank { display: none; }
  .stat { text-align: left; }
  .sheet-body { grid-template-columns: 1fr; }
  .photo { max-width: 12rem; }
  .summary { gap: 1.5rem; }
}

/* R-17: la ficha cerrada no es un error, así que no se pinta como una alarma.
   Se distingue del alta normal por el fondo, no por el color del texto. */
.watch-cta.closed { background: var(--highlight); border-style: dashed; }

/* Texto largo: la privacidad y lo que venga después. Ancho de lectura, que en
   la rejilla de la ficha se quedaría a 62rem y no se lee. */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

/* La promesa del canal, arriba del todo y a tamaño de titular: es la frase a la
   que alguien va a decir que sí, no un pie de página. Que se lea antes que el
   botón es lo que hace informado el consentimiento de R-06. */
.promise {
  margin: 0 0 1rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft, #fbede9);
  font-size: 1.25rem; line-height: 1.35; font-weight: 500;
  border-radius: 0 4px 4px 0;
}

/* El contador junto al título de sección: dice cuántos hay sin repetir la
   cifra grande de arriba, que decía lo mismo dos veces. */
.section-title .count {
  font-family: var(--mono); font-size: .7em; font-weight: 500;
  background: var(--highlight); color: var(--muted);
  border-radius: 999px; padding: .1em .6em; margin-left: .4em;
  vertical-align: middle;
}
.row .unit { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }
.row .go { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.row.done .rank { color: var(--verify, #2c6559); }

/* ---------- la ficha de un aviso ----------------------------------------
   Dos columnas: el contenido a la izquierda, la decisión a la derecha. Esta
   página tiene que dar ganas de compartirla — es la única vía de tráfico que
   no depende de nosotros—, así que el mensaje manda y todo lo demás le hace
   sitio. En móvil se apila y la decisión queda debajo de lo que la justifica. */
.alert-page { max-width: var(--width); margin: 0 auto; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: .3em .85em; border-radius: 999px;
  border: 1px solid currentColor; margin: 0 0 .9rem;
}
/* El estado de un aviso ya enviado: una línea de lado a lado con el rótulo en
   medio. Las dos rayas son pseudoelementos que se reparten lo que sobre, así
   que el rótulo queda centrado sin saber cuánto mide — y sigue centrado en
   inglés, que es dos palabras más corto. */
.banner-done {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 0 0 1.9rem; color: var(--drop);
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.banner-done::before, .banner-done::after {
  content: ""; flex: 1 1 0; height: 1px; background: currentColor; opacity: .4;
}
.banner-label { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
/* El disco va macizo y el palito en el color de la tarjeta: en claro sale
   blanco sobre verde y en oscuro, oscuro sobre verde claro. Los dos legibles
   sin declarar un color literal. */
.banner-mark {
  width: 1.2rem; height: 1.2rem; border-radius: 999px; flex: none;
  background: var(--drop); color: var(--card);
  display: grid; place-items: center;
}
.banner-mark svg { display: block; }
@media (max-width: 520px) {
  /* En estrecho las rayas se quedan sin sitio y el rótulo se parte en dos
     líneas con un trazo suelto a cada lado. Mejor sólo el rótulo. */
  .banner-done::before, .banner-done::after { display: none; }
  .banner-done { gap: 0; }
}

.pill-open { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.pill-done { color: var(--drop); background: #E7F2EC; border-color: transparent; }
.pill-wait { color: var(--warm); background: #F6EEE6; border-color: transparent; }
.pill-dead { color: var(--muted); background: var(--highlight); border-color: transparent; }
:root[data-theme="dark"] .pill-done,
:root[data-theme="dark"] .pill-wait { background: var(--highlight); }

/* El mensaje es el titular. Si se lee bien en una captura, el canal la enseña. */
.alert-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.022em; margin: 0 0 .7rem; text-wrap: balance;
}
.alert-meta {
  color: var(--muted); font-size: .95rem; margin: 0 0 2.2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.alert-meta .sep { color: var(--line); }
.count-inline {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); font-size: 1.15em; font-weight: 600;
}
/* Sin nadie apuntado, un «0» grande es un cartel de que esto no funciona.
   Mejor una invitación, que además es verdad. */
.be-first { color: var(--accent); font-weight: 600; }

/* La promesa como entradilla: el titular dice qué hay al otro lado y esto
   dice qué se ha puesto en juego. Va sola, sin enlace ni etiquetas al lado. */
.alert-lead {
  font-family: var(--display); font-weight: 700;
  font-size: 1.45rem; line-height: 1.3; letter-spacing: -.01em;
  margin: .2rem 0 .5rem; max-width: 42rem; text-wrap: balance;
}

/* La tira horizontal de cifras que vivía aquí —«3 apuntados · 37 visitas · 1
   envío»— se fue con la cabecera partida: las mismas dos cifras se pintan ahora
   con las piezas de la ficha cerrada (`.scoreboard`, `.fig`), al lado del
   titular. Eran dos maquetaciones para lo mismo, y la tira además metía de
   cifra una regla que siempre valía uno. */

.alert-cols {
  display: grid; grid-template-columns: minmax(0,1fr) 21rem;
  gap: 2.5rem; align-items: start;
}
@media (max-width: 860px) { .alert-cols { grid-template-columns: minmax(0,1fr); gap: 1.5rem; } }

.promise-card {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1.2rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 1.5rem 1.6rem; margin: 0 0 1rem; box-shadow: var(--shadow);
}
.promise-card .quote-mark {
  width: 3.4rem; height: 3.4rem; border-radius: 999px;
  background: var(--highlight); color: var(--muted);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.1rem; line-height: 1;
  padding-top: .5rem;
}
@media (max-width: 520px) {
  .promise-card { grid-template-columns: 1fr; }
  .promise-card .quote-mark { display: none; }
}
.promise-card .promise {
  margin: 0 0 .8rem; padding: 0; border: 0; background: none;
  font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.3;
}
.dest { margin: 0 0 .4rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.dest-host { font-family: var(--mono); font-size: .92rem; color: var(--ink); }
.dest-url { margin: 0 0 .8rem; word-break: break-all; font-size: .8rem; }
.dest-url code { background: var(--highlight); color: var(--muted); }
.ext { font-size: .92rem; font-weight: 500; }

/* La reconstrucción del mensaje enviado.
   
   Éste es el único componente de la casa que no obedece al tema, y va aparte
   a propósito: no es una pieza de Holdout pintada de verde, es una cita de
   cómo se ve otra aplicación, y lo de otra aplicación no cambia de color
   porque nuestro lector tenga el móvil en oscuro. Sus colores son suyos —el
   fondo por defecto de Telegram, el globo blanco, el azul de sus enlaces— y
   por eso se declaran una vez aquí y no se redefinen en los dos bloques de
   tema, que es justo lo contrario de lo que hace el resto del fichero.
   
   Lo que sigue sin imitarse es el contenido: ni botones, ni tarjeta de vista
   previa, ni los ✓✓. El fondo puede parecerse todo lo que quiera; lo que no
   puede es decir que pasó algo que no pasó. */
/* El marco del aparato. Es lo que hace que se lea como lo que es —un mensaje
   que llega a un móvil— en vez de como una captura de escritorio: quien mira
   esta página se reconoce en la pantalla en la que va a recibirlo, y de paso la
   URL se parte donde se parte de verdad.

   El bisel es negro y se queda negro en los dos temas, por lo mismo que el
   fondo del chat es verde: no es una pieza de Holdout, es la cita de un
   aparato, y un móvil no se aclara porque el lector tenga el ordenador en
   oscuro. */
.phone {
  /* Un poco más estrecho que la columna, y centrado. Los dos márgenes de los
     lados no son aire perdido: son lo que deja sitio a la sombra, y la sombra
     es lo que separa el móvil del papel — a ras del borde no había dónde
     ponerla. Y como todo lo de dentro se mide contra este ancho, estrechar el
     marco encoge el dibujo entero sin tocar una sola medida más.

     La sombra va sólo a los lados, con dos desplazamientos horizontales: una
     normal, centrada, se derramaría por debajo y dibujaría una línea justo en
     el corte, que es lo que hace que un recorte parezca un aparato acabado. */
  width: 84%; max-width: 30rem;
  /* El hueco de debajo separa el aparato de la letra pequeña que lo explica. A
     .9rem el pie parecía parte del dibujo. */
  margin: 0 auto 1.5rem;
  box-shadow: -13px 0 30px -13px rgba(20, 20, 26, .3),
               13px 0 30px -13px rgba(20, 20, 26, .3);
  /* Sin borde abajo y sin radio abajo: la pantalla se corta a ras, que es lo
     que la hace leerse como el trozo de arriba de un móvil y no como un móvil
     entero en miniatura. Y sin sombra, que dibujaría una línea justo en el
     corte y devolvería la sensación de aparato acabado.

     El marco es **el mismo filete que las demás tarjetas** —1px de `--line`—
     y no un bisel negro de ocho píxeles. El bisel imitaba mejor a un móvil,
     pero al lado de la tarjeta de «llegaste después» metía un segundo sistema
     de bordes en la misma fila y lo que se veía era el choque, no el móvil. Lo
     que hace que esto se lea como un teléfono no es el grosor: es la isla, la
     barra de estado y, sobre todo, **el radio de las esquinas**. Con 20px —el
     orden de una tarjeta— volvía a parecer una captura de escritorio, así que
     aquí el radio es lo único que se sale del sistema, y a propósito: es la
     pieza que hace el trabajo que antes hacía el bisel. */
  border: 1px solid var(--line); border-bottom: 0;
  background: var(--card); overflow: hidden;

  /* **Todo lo de dentro se mide contra el ancho del marco, no en píxeles de
     pantalla.** Es lo que faltaba para que se leyera como un primer plano: con
     medidas fijas, un marco de 575px enseñaba un reloj y unos iconos del tamaño
     que tendrían en un móvil de 390px de verdad, y el ojo lo lee como una
     captura de escritorio con adornos pequeños, no como un teléfono de cerca.
     Un móvil no funciona así: su isla ocupa un tercio del ancho **siempre**.

     Las proporciones salen de un iPhone de 393pt de ancho —isla 126pt = 32%,
     reloj 17pt = 4,3%, texto del mensaje 16pt = 4,1%— y por eso van en `cqw`,
     que es «por ciento del ancho de este contenedor». Efecto de regalo: en un
     móvil de verdad el marco mide lo que mide la pantalla, así que el dibujo
     sale a tamaño natural sin una sola media query.

     Cada medida lleva antes su valor en `rem`: un navegador que no entienda
     `cqw` se queda con el de antes en vez de con nada. */
  container-type: inline-size;
  /* **El radio es lo único de aquí dentro que NO va en proporción**, y es a
     propósito. Con un porcentaje del ancho, la curva crecía con el marco y en
     pantalla ancha se comía el cero del reloj y el pico de la batería. En un
     móvil de verdad eso no pasa porque la pantalla es mucho más alta que ancha
     y la barra de estado queda lejos de la esquina; aquí, recortados a la parte
     de arriba, esquina y barra están pegadas. Un valor fijo redondea igual a
     cualquier ancho y no invade nada. Se probó a 11cqw y a 7cqw: los dos
     entraban. */
  border-radius: 36px 36px 0 0;
}
.phone .chat { border: 0; border-radius: 0; margin: 0; box-shadow: none; }

/* La barra de estado. El reloj lleva la hora del envío en UTC —un dato de la
   base, no una hora inventada—; lo que no lleva, y no es un descuido, son los
   ✓✓, que dirían que alguien lo leyó. */
.phone-status {
  position: relative; background: var(--tg-bar);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--tg-ink);
  height: 2.6rem; height: 13.5cqw;
  /* El margen lateral lo manda la curva de la esquina, no el gusto. Con el
     radio en 7cqw, a 6,5cqw el contenido la libra entera a cualquier ancho.
     Si se toca el radio, se toca esto. */
  padding: 0 1.4rem; padding: 0 6.5cqw;
}
.phone-clock {
  font-weight: 600; letter-spacing: -.01em;
  font-size: .82rem; font-size: 4.3cqw;
}
/* La isla, más pequeña que en un móvil de verdad —allí ocupa un tercio del
   ancho— por lo mismo que el radio: en un recorte de la parte de arriba, a
   tamaño real es la mancha más negra de toda la página y se lleva la mirada
   antes que el mensaje, que es a lo que se viene. Basta con que se reconozca. */
.phone-island {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 999px; background: #000;
  top: .55rem; top: 3.4cqw;
  width: 5.6rem; width: 19cqw;
  height: 1.5rem; height: 5.6cqw;
}
.phone-icons {
  display: inline-flex; align-items: center;
  gap: .3rem; gap: 1.5cqw;
}
/* Alto en proporción y ancho automático: cada icono conserva la forma que le
   da su `viewBox`. */
.phone-icons svg { display: block; height: 3.2cqw; width: auto; }

.chat {
  --tg-bar:    #FFFFFF;
  --tg-bubble: #FFFFFF;
  --tg-out:    #EEFFDE;
  --tg-ink:    #1D1D1D;
  --tg-quiet:  #8A9A93;
  --tg-link:   #168ACD;
  --tg-pill:   rgba(0, 0, 0, .18);
  --tg-line:   rgba(0, 0, 0, .08);

  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 0 0 .8rem; box-shadow: var(--shadow);
}
.chat-back { color: var(--tg-ink); flex: none; display: flex; }
.chat-back svg { display: block; height: 5.6cqw; width: auto; }
.chat-bar {
  display: flex; align-items: center; background: var(--tg-bar);
  border-bottom: 1px solid var(--tg-line);
  gap: .75rem; gap: 3cqw;
  padding: .7rem 1.2rem .85rem; padding: 2.6cqw 4.5cqw 2.9cqw;
}
.chat-avatar {
  border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 700;
  width: 2.5rem; width: 10.2cqw;
  height: 2.5rem; height: 10.2cqw;
  font-size: 1.15rem; font-size: 4.6cqw;
}
.chat-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-who strong { color: var(--tg-ink); font-size: 1rem; font-size: 4.3cqw; }
.chat-who span { color: var(--tg-quiet); font-size: .78rem; font-size: 3.3cqw; }
/* Los iconos de la barra: decoración, y por eso van muertos y ocultos al
   lector de pantalla. Sin ellos la barra no se lee como una conversación. */
.chat-icons {
  margin-left: auto; padding-left: .4rem; flex: none;
  display: inline-flex; align-items: center;
  gap: .55rem; gap: 2.2cqw;
  color: var(--tg-quiet);
}
.chat-icons svg { display: block; height: 5.3cqw; width: auto; }

/* El fondo por defecto de Telegram: cuatro manchas de verde, no un gris. Los
   dibujitos no se copian —son suyos—, y sin ellos se reconoce igual. */
.chat-body {
  padding: 1.1rem 1.2rem 2.6rem;
  padding: 4cqw 4.5cqw 6cqw;
  background-color: #86B487;
  /* Cada mancha se apaga hacia su propio color con alfa 0 y no hacia
     `transparent`, que en sRGB pasa por un gris y deja el verde lavado. */
  background-image:
    radial-gradient(at 14% 8%, rgba(219, 221, 187, .60) 0%, rgba(219, 221, 187, 0) 48%),
    radial-gradient(at 92% 16%, rgba(213, 216, 141, .70) 0%, rgba(213, 216, 141, 0) 52%),
    radial-gradient(at 6% 96%, rgba(107, 165, 135, .95) 0%, rgba(107, 165, 135, 0) 58%),
    radial-gradient(at 98% 98%, rgba(124, 176, 124, .95) 0%, rgba(124, 176, 124, 0) 58%);
}
.chat-when {
  margin: 0 auto .8rem; margin: 0 auto 3cqw; width: max-content;
  background: var(--tg-pill); color: #FFFFFF;
  border-radius: 999px;
  font-size: .72rem; font-size: 3.2cqw;
  padding: .15rem .6rem; padding: .7cqw 2.6cqw;
}
/* El globo del mensaje. Ancho máximo por legibilidad, no por imitar: un texto
   de 300 caracteres a todo lo ancho de la columna no se lee como un mensaje. */
.bubble {
  position: relative;
  background: var(--tg-bubble); color: var(--tg-ink);
  /* Sin radio abajo a la izquierda: ahí es donde nace el rabito. */
  border-radius: 10px 10px 10px 0;
  border-radius: 3.2cqw 3.2cqw 3.2cqw 0;
  margin-left: 8px; margin-left: 2cqw;
  padding: .75rem .9rem; padding: 2.6cqw 3cqw;
  /* Ancho de lo que ocupa su texto, no de lo que da la columna. Era un margen
     derecho fijo, y con un solo mensaje daba igual; en la conversación del
     «cómo funciona» hay globos de una palabra —«4», «/fire»— y uno de esos a
     todo lo ancho no se lee como un mensaje, se lee como un párrafo. El tope
     sigue siendo por legibilidad y no por imitar: un aviso de 300 caracteres a
     lo ancho entero tampoco se lee. */
  width: fit-content; max-width: 86%;
  /* Por debajo de la proporción real —Telegram usa 17pt, que en un móvil de
     393pt son 4,3% del ancho—, y a sabiendas. El marco es más ancho que un
     móvil de verdad, así que a tamaño fiel todo sale mayor que la vida y un
     aviso de 280 caracteres, que es lo normal en un canal de chollos, se comía
     media página. A 3,6% pasa de ocho líneas a seis y se sigue leyendo como un
     mensaje: mucha gente lleva Telegram con la letra más pequeña. Más abajo no,
     que entonces el mensaje queda menor que el nombre del bot y en un móvil los
     dos miden casi lo mismo. */
  font-size: .92rem; font-size: 3.6cqw; line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
/* El rabito, que es lo que hace que un rectángulo blanco se lea como un
   mensaje recibido. Sin él la esquina quedaba sólo achatada y no engañaba a
   nadie.

   Es forma, no contenido — sigue sin imitarse nada de lo que Telegram diría
   por su cuenta: ni botones, ni vista previa, ni los ✓✓, que dirían que
   alguien lo leyó. Un rabito no afirma nada.

   Va con máscara y no con un SVG de color: así el blanco lo sigue poniendo
   `--tg-bubble` y hay un solo sitio donde está escrito el color del globo. Y
   con máscara y no con el truco de dos pseudoelementos, porque ése necesita
   pintar un trozo del fondo por encima y aquí el fondo son cuatro degradados:
   cualquier color liso encima se vería como una mancha.

   La curva es una Bézier y no un arco: con `A` el navegador elige entre las dos
   circunferencias posibles y salía la que no es, un pelo en vez de un rabito.
   Sale del borde del globo en vertical —por eso el primer punto de control
   sigue en x=8, para que empalme sin escalón— y cae a la punta de abajo a la
   izquierda. Se eligió comparando cinco a 5x contra una captura de Telegram. */
.bubble::before {
  content: "";
  position: absolute; bottom: 0;
  left: -8px; left: -2cqw;
  width: 8px; width: 2cqw;
  height: 10px; height: 2.6cqw;
  background: var(--tg-bubble);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 0C8 3 6 7 0 10L8 10Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 0C8 3 6 7 0 10L8 10Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* El teclado de debajo de un mensaje. Telegram lo pinta pegado al globo y
   separado por filetes, con el texto en azul y a todo el ancho: no es un botón
   de los nuestros, es parte del mensaje. Los márgenes negativos lo sacan del
   relleno del globo para que llegue a los bordes, y el radio de abajo repite el
   del globo — si no, asoman dos esquinas cuadradas.

   Va marcado como decoración: no se pulsa. La conversación es un ejemplo, y un
   botón que no hace nada es peor que un dibujo de un botón. */
.bubble .keys {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--tg-line);
  margin: 2.6cqw -3cqw -2.6cqw; border-top: 1px solid var(--tg-line);
  border-radius: 0 0 3.2cqw 3.2cqw; overflow: hidden;
}
.bubble .keys span {
  background: var(--tg-bubble); color: var(--tg-link);
  text-align: center; padding: 2.4cqw 1cqw;
}

/* El globo de quien escribe. Se cambia **el token** y no el fondo: el rabito
   se pinta con `--tg-bubble`, así que redefinirlo aquí dentro deja el globo y
   su rabito del mismo color sin escribirlo dos veces, que es justo lo que la
   variable venía a evitar. El rabito es el mismo dibujo espejado — la curva se
   eligió comparando contra una captura, y una segunda máscara «casi igual» se
   separaría de ella al primer retoque. */
.bubble.out {
  --tg-bubble: var(--tg-out);
  border-radius: 10px 10px 0 10px;
  border-radius: 3.2cqw 3.2cqw 0 3.2cqw;
  margin-left: auto; margin-right: 8px; margin-right: 2cqw;
}
.bubble.out::before { left: auto; right: -8px; right: -2cqw; transform: scaleX(-1); }
/* Dos mensajes seguidos del mismo lado son **un** grupo, y en Telegram sólo el
   último lleva rabito: los de arriba quedan redondos y más pegados. Sin esto,
   dos globos del bot con rabito cada uno se leen como dos conversaciones. */
.bubble.cont { border-radius: 10px; border-radius: 3.2cqw; }
.bubble.cont::before { content: none; }
.bubble + .bubble { margin-top: .55rem; margin-top: 2.2cqw; }
.bubble.cont + .bubble { margin-top: .2rem; margin-top: .8cqw; }
/* La franja de fecha vuelve a separar: entre dos días hay más aire que entre
   dos mensajes. */
.bubble + .chat-when { margin-top: 1rem; margin-top: 4cqw; }

/* La URL entera, sin recortar: enseñarla es la regla, y en un móvil sólo cabe
   si se le deja partir por donde sea. */
.bubble a { color: var(--tg-link); text-decoration: none; word-break: break-all; }
.bubble a:hover { text-decoration: underline; }
/* Un comando no lleva a ninguna parte fuera de Telegram, así que se ve azul
   pero no se pincha: pintarlo de enlace sería ofrecer algo que no hay. Vale
   igual para las URL de la conversación de ejemplo, que tampoco existen — y
   por eso parten como parten las de verdad. */
.bubble .cmd { color: var(--tg-link); word-break: break-all; }
/* Lo que hay que saber **antes** de mirar el móvil: que eso de dentro no es una
   maqueta. Va algo mayor que el pie a propósito — el pie es letra pequeña y
   esto es la frase que decide si te crees el dibujo.

   Y con aire por los dos lados. Con el título encima, la entradilla pegada y el
   móvil a un dedo, las tres piezas se leían como un párrafo largo con un dibujo
   dentro; separadas, cada una dice lo suyo: el título anuncia, la entradilla
   avisa de que aquello es real y el móvil se mira. El respiro de abajo lo pone
   `.phone`, que es el que toca al pie. */
.chat-lede {
  margin: .8rem 0 2rem; max-width: 42rem;
  font-size: .95rem; line-height: 1.65; color: var(--muted);
}
.chat-foot {
  margin: 0 0 1.2rem; font-size: .85rem; color: var(--muted); line-height: 1.6;
}

.under-cta { margin: .55rem 0 0; text-align: center; }
.under-cta .tag { margin: 0; }

/* Tres hechos, no tres promesas: sólo se pinta cuando ya han ocurrido. */
.facts {
  list-style: none; margin: 1.2rem 0 1rem; padding: 0;
  font-size: .9rem; border-top: 1px solid var(--line);
}
.facts li {
  padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--line);
  position: relative;
}
.facts li::before {
  content: "✓"; position: absolute; left: 0; top: .55rem;
  color: var(--drop); font-size: .85rem;
}

.checked-box {
  display: grid; grid-template-columns: 2rem 1fr; gap: .9rem;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1.1rem 1.3rem; background: var(--card);
}
/* En la ficha cerrada cuelga de la tarjeta de al lado, así que necesita su
   propia separación: dentro de la columna ancha se la daba el flujo. */
.alert-side .checked-box { margin-top: 1rem; }
/* Y con dos piezas en la columna, lo pegajoso pasa a ser **la columna** y no la
   tarjeta. Siendo la tarjeta la que se quedaba clavada, el sello de debajo
   subía por detrás de ella al bajar la página y desaparecía: una tarjeta
   pegajosa tiene fondo, y lo que va después en el flujo se le mete debajo. */
@media (min-width: 861px) {
  .alert-page.closed .alert-side, .alert-page.open .alert-side { position: sticky; top: 1.5rem; }
  .alert-page.closed .cta-card, .alert-page.open .cta-card { position: static; }
}
.checked-box .mark {
  width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid;
  place-items: center; font-size: .95rem;
  background: #E7F2EC; color: var(--drop);
}
.checked-box.dead .mark, .checked-box.wait .mark { background: var(--highlight); color: var(--muted); }
.checked-box p { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* La decisión. Pegajosa en pantalla ancha: el botón sigue a la vista mientras
   se lee lo de la izquierda, que es lo que lo justifica. */
.cta-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem;
  background: var(--card); box-shadow: var(--shadow);
  position: sticky; top: 1.5rem;
}
@media (max-width: 860px) { .cta-card { position: static; } }
.cta-card h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.2rem; margin: 0 0 .45rem; letter-spacing: -.01em;
}
.cta-card .button.big {
  display: block; text-align: center; width: 100%;
  margin: 1.1rem 0 0; padding: .85rem 1rem; font-size: 1rem; font-weight: 600;
}
.cta-card .fine { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.5; }
.cta-card.quiet { background: var(--highlight); box-shadow: none; }

/* Los tres pasos, con su hilo: se lee de un vistazo qué va a pasar y cuándo. */
.steps {
  list-style: none; padding: 0; margin: 1.2rem 0 1rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
  font-size: .93rem; counter-reset: s; position: relative;
}
.steps li {
  margin: 0 0 .85rem; padding-left: 2.2rem; position: relative;
  counter-increment: s; line-height: 1.35;
}
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1em;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
}
/* El hilo que une los pasos, como en la maqueta. */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: .72rem; top: 1.5rem; bottom: -.65rem;
  border-left: 1px dashed var(--line);
}

/* Compartir. Discreto pero presente: el autor tiene que verlo sin que le tape
   la promesa, que es lo que de verdad se comparte. */
.share {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.share-label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-right: .2rem;
}
.share-btn {
  font: inherit; font-size: .85rem; line-height: 1;
  padding: .5em .9em; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: .45em;
}
/* El fondo se repite a propósito: `button:hover` lo pinta de negro para los
   botones de decidir, y el de copiar es un `<button>`. Sin esta línea se queda
   negro sobre negro — y sólo él, porque los otros tres son enlaces. */
.share-btn:hover {
  background: var(--card); border-color: var(--accent); color: var(--accent);
}
/* Los de marca van sin texto, así que el botón se hace redondo y el icono
   manda. El color es el de cada casa —se reconocen por él— menos el de X, que
   es negro sobre blanco y blanco sobre negro: ahí toma el del tema.
   Va por variable y no por `color` suelto para que el hover pueda repetirlo:
   si no, al pasar por encima se lo comía el gris de arriba. */
.share-btn.icon { padding: .5em; border-radius: 999px; color: var(--brand); }
.share-btn.tg { --brand: #2AABEE; }
.share-btn.wa { --brand: #25D366; }
.share-btn.x  { --brand: var(--ink); }
.share-btn.icon:hover { color: var(--brand); border-color: var(--brand); }
.share-btn svg { display: block; flex: none; }

/* ---------- ficha cerrada -----------------------------------------------
   Lo que pasó, en el orden en que hay que entenderlo: el resultado arriba a la
   derecha, la prueba de que ocurrió en la columna ancha, lo que se ha perdido
   quien llega tarde al lado, y el relato completo cerrando la página.

   Las dos cifras grandes son las únicas que hay y por eso pueden ir así de
   grandes: cada una aguanta que la miren. Ninguna dice lo que se ganó — eso lo
   sabe el canal en su programa de afiliados, aquí no se insinúa. */

/* La cabecera partida. La usan la ficha cerrada y la abierta con las mismas
   medidas: son la misma página en dos momentos, y darles rejillas distintas era
   lo que hacía que se leyeran como dos plantillas.

   Misma rejilla que `.alert-cols`, y no una parecida: 21rem de pista y 2.5rem
   de hueco, clavadas. Con 25rem y 3rem —que es como nació— el marcador salía
   más ancho que la tarjeta de debajo, así que la mitad derecha de la página
   tenía dos bordes izquierdos distintos a dos palmos uno del otro y se leía
   desordenada. Si alguna vez se toca una de las dos rejillas, se tocan las dos.
   El corte también va al mismo ancho que el de abajo, por lo mismo. */
.closed-head, .open-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem;
  /* El aire de debajo separa dos cosas distintas: arriba, de qué iba esto y
     cómo acabó; abajo, la prueba y lo que se perdió quien llega tarde. Con
     2,4rem la fila de abajo empezaba pegada al marcador y las dos partes se
     leían como una sola. */
  gap: 1.4rem 2.5rem; align-items: start; margin: 0 0 4.2rem;
}
@media (max-width: 860px) {
  .closed-head, .open-head { grid-template-columns: minmax(0, 1fr); }
}
/* Y aquí el titular comparte fila con el marcador, así que pide menos de lo que
   pedía cuando tenía la página entera para él. */
.closed-head .alert-h1, .open-head .alert-h1 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.05rem); }
.closed-head .alert-meta, .open-head .alert-meta { margin-bottom: 1.1rem; }

.closed-lead {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.8rem); line-height: 1.2;
  letter-spacing: -.018em; margin: .2rem 0 .5rem; max-width: 24ch; text-wrap: balance;
}
/* El renglón gris de debajo de la entradilla. En la cerrada cuenta qué pasó y
   en la abierta dice la regla —una sola vez, sin repesca—, que es lo que hay
   que haber leído antes de decidir. Misma pieza, mismo sitio. */
.head-sub { margin: 0; color: var(--muted); font-size: .97rem; max-width: 40rem; line-height: 1.55; }
.head-sub strong { color: var(--ink); }
/* Debajo de una cabecera partida, el primer título de la columna ancha ya viene
   separado: sus 2,5rem se sumaban a los 4,2 de la cabecera y abrían un claro de
   dos dedos justo antes de lo primero que hay que leer. */
.open-head + .alert-cols .section-title:first-child { margin-top: 0; }

.scoreboard { justify-self: center; width: 100%; max-width: 21rem; }
/* Apilado, centrado en la página: con una sola cifra, pegarlo a un lado deja
   la mitad del ancho vacío al lado del número que la ficha viene a enseñar. */
@media (max-width: 860px) { .scoreboard { margin-inline: auto; } }
/* Las dos cifras, alineadas a la izquierda y separadas por un filete vertical.
   Centradas y con una chispa en medio pesaban más de lo que decían: el ojo
   tenía que buscar dónde empieza cada columna, y el lima —que en la casa marca
   una cosa— estaba haciendo de separador, que es trabajo de una línea.

   `stretch` iguala el alto de las dos, y por eso el filete llega abajo del todo
   aunque una etiqueta ocupe tres líneas y la otra dos. Y `flex: 1 1 0` las
   reparte a partes iguales sin saber cuánto miden: sola, una ocupa la pista
   entera y su etiqueta deja de partirse. */
.figures { display: flex; align-items: stretch; }
.fig {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; flex: 1 1 0; min-width: 0;
}
.fig:not(:only-child):first-child { padding-right: 1.5rem; }
.fig + .fig { border-left: 1px solid var(--line); padding-left: 1.5rem; }
/* El techo lo pone la pista, no el gusto: dos cifras y la chispa tienen que
   caber en las 21rem que mide la tarjeta de debajo, y «2.140» son cinco
   caracteres. Se prefiere una cifra algo menor a una pista más ancha, porque lo
   que ordena la página es que las dos columnas midan lo mismo. */
.fig-n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.2rem); line-height: .92;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.fig-label {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  line-height: 1.25; margin-top: .55rem; text-wrap: balance;
}
.fig-note {
  font-size: .78rem; color: var(--muted); line-height: 1.35;
  margin-top: .5rem; text-wrap: balance;
}

/* Quién estaba dentro. Siluetas idénticas y sin cara: de esa gente sabemos
   cuántos son y nada más —al canal tampoco se le dice otra cosa—, así que un
   rasgo cualquiera aquí sería un retrato inventado de alguien real. */
.who { display: inline-flex; align-items: center; flex: none; }
.who-dot {
  width: 2.1rem; height: 2.1rem; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; flex: none;
  background: var(--highlight); color: var(--muted);
  box-shadow: 0 0 0 2px var(--card);
}
.who-dot + .who-dot { margin-left: -.6rem; }
.who-dot svg { display: block; width: 100%; height: 100%; }
.who-more {
  margin-left: .5rem; font-family: var(--mono); font-size: .78rem; color: var(--muted);
}
.who-row { display: flex; align-items: center; gap: .85rem; margin: 1.1rem 0 .5rem; }
.who-row p { margin: 0; font-size: .95rem; line-height: 1.4; }
.who-note { margin: 0 0 1.2rem; font-size: .82rem; color: var(--muted); line-height: 1.45; }

.cta-card.closed h2 { font-size: 1.45rem; line-height: 1.14; margin: 0; }
.card-eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--drop); margin: 0 0 .5rem;
}
/* «Cerrado» es un estado, no un control: va como texto y no como un botón
   apagado, que sería ofrecer algo que no se puede pulsar. */
.locked {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 0 .8rem; padding: .75rem 1rem; border-radius: 6px;
  background: var(--highlight); color: var(--muted);
  font-size: .9rem; font-weight: 600;
}
.locked svg { flex: none; }
.cta-card.closed .button.big { margin-top: 0; }
/* El enlace del canal no se esconde: hay quien llega aquí queriendo ir a la
   tienda. Lo que cambia es el peso — quien llega tarde ya no tiene nada que
   decidir sobre este aviso. */
.offer-link { margin: .95rem 0 1.1rem; text-align: center; font-size: .93rem; }
.offer-link .tag { vertical-align: 1px; }

/* Las dos tarjetas de la fila —el móvil a la izquierda, «llegaste después» a la
   derecha— empiezan a la misma altura solas, porque ninguna lleva ya un título
   encima. Aquí hubo un desplazamiento calculado a mano para compensar el de
   «Así se recibió en Telegram»; al quitarse el título sobra, y con él se fue
   una medida frágil que había que mantener a la par con la interlínea. */

/* El recuento: tres columnas y dos filetes. La primera dice de qué va lo que
   viene al lado, y las otras dos se leen en paralelo.

   Antes esto era una llave dibujada con bordes y esquinas redondeadas saliendo
   de una tarjeta «Publicado». La llave contaba bien la bifurcación, pero
   repetía el canal y la fecha —que ya están en la cabecera— y obligaba a
   calcular alturas a mano para que cada rama apuntara a su cifra: media
   cejilla arriba, medio hueco abajo. Tres columnas dicen lo mismo sin dibujar
   nada y sin un solo número mágico. */
.tally {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem; margin: 3rem 0 0;
}
.tally-col { border-left: 1px solid var(--line); padding-left: 2.2rem; }
@media (max-width: 860px) {
  .tally { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  /* Apiladas, el filete pasa de separar columnas a separar bloques. */
  .tally-col { border-left: 0; border-top: 1px solid var(--line); padding: 1.3rem 0 0; }
}

.tally-eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--drop); margin: 0 0 1.1rem;
}
/* La vía pública no es un hito: su rótulo va en gris para que el verde quede
   sólo donde algo se cumplió. */
.tally-eyebrow.quiet { color: var(--muted); }

.tally-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.65rem); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 .9rem; text-wrap: balance;
}
.tally-p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.tally-fig { margin: 0 0 1.4rem; }
/* El apunte del final va pegado a su cifra, no flotando entre las dos. Con la
   separación de una cifra a otra parecía una tercera fila de la columna en vez
   del pie de la segunda. */
.tally-fig:last-of-type { margin-bottom: .8rem; }
.tally-n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 2.4rem; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tally-lab {
  display: block; margin-top: .35rem;
  font-size: .92rem; line-height: 1.4; color: var(--muted);
}
/* La segunda cifra de cada vía es el resultado, no el punto de partida: su
   etiqueta va en tinta y en la de titulares para que se lea antes. */
.tally-lab.strong {
  color: var(--ink); font-family: var(--display); font-weight: 700;
  font-size: .98rem;
}

/* El cierre de cada vía: la proporción a la izquierda y lo que se hizo esperar
   a la derecha. Los dos iguales, con filete y sin fondo.

   Llevaban fondo —lima uno y verde el otro— y se comían la atención de las
   cifras, que es lo que la columna viene a enseñar. Un apunte al pie de una
   cifra no necesita color: le basta con estar. Y siendo iguales se leen como lo
   que son, la misma clase de dato en las dos vías. */
.tally-chip {
  margin: 0; border-left: 2px solid var(--drop); padding-left: .7rem;
  color: var(--muted); font-size: .88rem; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
/* La caja se fue: con filete y esquinas redondeadas parecía un botón blanco, y
   no se puede pulsar. Lo que hay aquí es una anotación al pie de una cifra, así
   que basta con una marca al margen y el dato en negrita. */
.tally-chip strong { color: var(--ink); font-weight: 700; }

/* El relato: publicado → apuntados → enviado. En línea cuando cabe, en columna
   cuando no. El hilo va discontinuo porque entre un hito y otro pasó tiempo, y
   cuánto no lo dice la línea: lo dice la fecha de debajo. */

.story {
  list-style: none; margin: 2.6rem 0 0; padding: 1.4rem 1.7rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem 2.4rem; align-items: start;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.story li { display: flex; gap: .85rem; align-items: flex-start; position: relative; }
.story li:not(:last-child)::after {
  content: ""; position: absolute; right: -2rem; top: 1.15rem;
  width: 1.6rem; border-top: 1px dashed var(--line);
}
@media (max-width: 780px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story li:not(:last-child)::after { display: none; }
}
.story-mark {
  width: 2.3rem; height: 2.3rem; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--highlight); color: var(--muted);
}
.story-done .story-mark {
  background: color-mix(in srgb, var(--drop) 14%, var(--card)); color: var(--drop);
}
.story strong { display: block; font-size: .95rem; line-height: 1.3; }
.story-done strong { color: var(--drop); }
.story p { margin: .22rem 0 0; font-size: .87rem; color: var(--muted); line-height: 1.4; }
.story-when { font-family: var(--mono); font-size: .76rem; }

/* ---------- las dos preguntas -------------------------------------------
   Dos públicos, dos columnas y un filete entre ellas, como el recuento de la
   ficha cerrada: aquí el filete no separa dos vías sino dos lectores, y por eso
   cada columna se rotula. Va abajo del todo porque no es lo que se viene a
   leer — es lo que se busca cuando ya se ha leído y falta decidirse. */
.faq {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem; margin: 3.6rem 0 0;
  border-top: 1px solid var(--line); padding-top: 2.2rem;
}
@media (max-width: 860px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  /* En una columna el filete de al lado se convierte en el de arriba: sin él,
     las ocho respuestas se leen como una lista sola y se pierde de quién es
     cada mitad. */
  .faq-col + .faq-col { border-top: 1px solid var(--line); padding-top: 1.8rem; }
}
@media (min-width: 861px) {
  .faq-col + .faq-col { border-left: 1px solid var(--line); padding-left: 3rem; }
}
.faq-h {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.012em; margin: 0 0 1.2rem;
}
.faq dl { margin: 0; }
.faq dt {
  font-family: var(--display); font-weight: 700; font-size: .98rem;
  line-height: 1.3; margin-top: 1.4rem;
}
.faq dt:first-of-type { margin-top: 0; }
.faq dd { margin: .32rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.faq code {
  font-family: var(--mono); font-size: .88em; background: var(--highlight);
  padding: .1rem .3rem; border-radius: 3px;
}

/* ---------- portada -----------------------------------------------------
   Negro para lo que decide, lima sólo para señalar. El lima nunca lleva texto
   encima: no es un color legible, es una marca. */
.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1rem;
}
/* El hero pesaba arriba: el titular subía hasta 3.8rem y debajo el lede caía
   en tres líneas con una huérfana de dos palabras. Se le baja el techo al
   titular y se le da al lede más medida y `balance`, que reparte las líneas.
   Los dos bloques quedan de anchos parecidos y el hero se sostiene solo. */
.hero-wide { max-width: 46rem; margin: 0 auto; padding-top: .5rem; text-align: center; }
.hero-wide h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.35rem); line-height: 1.05;
  letter-spacing: -.028em; margin: 0 0 1.05rem;
}
.hero-wide .lede {
  font-size: 1.06rem; line-height: 1.55; margin: 0 auto 2rem;
  max-width: 36rem; text-wrap: balance;
}
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* Cierra el hero. Llevaba los estilos en línea y la clase del lede, que le
   daba una medida que no es la suya. */
.hero-note { font-size: .9rem; color: var(--muted); margin: 1.15rem 0 0; }
.button.solid {
  background: var(--ink); color: var(--paper); border: 0;
  padding: .9rem 1.6rem; font-size: 1rem; font-weight: 600; border-radius: 8px;
}
.button.solid:hover { opacity: .88; }
/* El subrayado iba en lima a 2px: un enlace de texto pintado con más fuerza
   que el botón negro que tiene al lado, y repetido en cada fila. Un enlace no
   necesita color propio para saberse enlace —le basta el subrayado— y el
   único acento fuerte de una fila tiene que ser la acción, que es el botón.
   Ahora es una raya fina de tinta rebajada que se cierra al pasar por encima:
   la señal aparece cuando se la busca, no antes. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding-bottom: .12rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  transition: border-color .12s ease;
}
.link-arrow:hover { border-bottom-color: var(--ink); }
.link-arrow .chip {
  color: var(--muted); font-size: .9rem; line-height: 1;
  transition: transform .12s ease, color .12s ease;
}
.link-arrow:hover .chip { color: var(--ink); transform: translateX(2px); }

/* La prueba social sólo cuando prueba algo. Por debajo del umbral, un número
   pequeño argumenta en contra: «3 avisados» se lee como «aquí no hay nadie». */
.proof {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 2.2rem 0 0; color: var(--muted); font-size: .95rem;
}
.proof .rule { flex: 0 1 8rem; height: 1px; background: var(--line); }
/* Los puntos son el remate de las dos rayas, así que van de su color: en lima
   eran lo más saturado de la portada para separar una frase. */
.proof .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--line); }

/* La fila, versión portada: el chip del dominio, la promesa y el botón. */
.row .chip-host {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--mono); font-size: .78rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: .45em .7em;
  background: var(--paper); white-space: nowrap;
}
/* La marca de la tienda, en tinta y no en su color de siempre. El naranja de
   Amazon dentro de un chip gris es la mancha más fuerte de la lista, y el chip
   dice a dónde lleva la fila: no es lo que tiene que mirarse primero. En
   `currentColor` se resuelve solo en oscuro y hereda el gris del chip.
   `em` y no `rem`: el chip encoge en móvil y el dibujo tiene que encoger con él. */
.row .chip-host .host-mark {
  width: 1.35em; height: 1.35em; flex: none; opacity: .85;
}
.row .waiting-none { color: var(--muted); font-size: .9rem; }
.row .join {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 8px;
  padding: .7rem 1.1rem; font-weight: 600; font-size: .92rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.row .join:hover { opacity: .88; }
/* En la fila enviada el chip va vacío por dentro: el fondo de la tarjeta es
   `--paper`, que sobre una fila hundida en `--highlight` sería lo más claro de
   la sección — y la regla es que lo ya enviado no pese más que un aviso vivo,
   que es el único donde alguien puede apuntarse todavía. Con el fondo fuera
   queda el contorno, que es lo que mantiene la columna alineada con la lista de
   arriba, y la tinta apagada se lleva también el logo, que va en `currentColor`.

   Aquí vivía `.done-mark`, el ✓ en un disco verde. Se fue con él: ocupaba esta
   misma columna —la que alinea las dos listas— para decir lo que ya dicen el
   título de la sección, el rótulo, la fila apagada y la palabra «NOTIFIED». */
.row.done .chip-host { background: transparent; color: var(--muted); }
/* El rótulo dice en qué estado está la lista que viene debajo, y en la abierta
   va del verde del raíl: el color repite lo que ya dice el canto de cada fila.
   Va en mono y a cuerpo pequeño porque es una etiqueta, no un título — el
   título de la sección ya está puesto dos líneas más arriba. */
.list-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem;
}
.list-label.open { color: var(--drop); }

/* La invitación a proponer vivía en una columna de 15rem al lado de la lista.
   Con pocos avisos la tarjeta era más alta que la lista y dejaba un hueco de
   medio palmo debajo; y estrechaba la lista abierta a un ancho que no era el
   de la de enviados, así que las dos listas de la portada no medían lo mismo.
   Ahora cierra la sección de lado a lado y los dos anchos coinciden. */
.suggest-card {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 1.1rem 1.4rem; margin-top: 1.1rem;
}
.suggest-card p { margin: 0; font-size: .95rem; }
.suggest-card .link-arrow { margin-left: auto; }
@media (max-width: 34rem) { .suggest-card .link-arrow { margin-left: 0; } }

/* El ritmo de la portada lo lleva la sección, no el título: `main > * + *` ya
   separaba 3rem y el margen de `.section-title` sumaba otros 2.5rem encima. */
main > .feed { margin-top: 3.75rem; }
.feed .section-title { margin: 0 0 .3rem; font-size: 1.35rem; }
.section-lead { margin: 0 0 1.15rem; color: var(--muted); font-size: .9rem; }
.list-note { margin: 1.1rem 0 0; }
/* Cada bloque y su conversación, uno al lado de la otra. Son tres —el alta, el
   envío y el disparo—, y el texto de cada uno va enfrente del trozo de chat que
   ilustra: con un solo móvil gigante al lado de la lista entera, el párrafo del
   /fire quedaba a la altura del /submit.

   La columna del móvil va en `rem` y no en fracción: dentro todo se mide contra
   el ancho del marco, así que una columna elástica cambiaría el cuerpo del
   texto del mensaje con el ancho de la ventana. A 22rem el marco mide 352 px,
   un pelo menos que un móvil de verdad, y el mensaje sale a su tamaño.

   Centrado y no arriba: ningún chat mide lo mismo que su texto —el del envío es
   el doble de largo— y alineados por arriba cada bloque dejaba su hueco debajo
   del párrafo. Centrados, el aire se reparte y se lee como una pieza. */
.how-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 0 3rem; align-items: center;
}
/* El rótulo de arriba ya despega el bloque; el margen del título sumaba otro
   dedo y separaba el título de su propio rótulo. */
.how-cols .section-title { margin-top: 0; }
.how-cols .how-side p { margin: 0 0 .9rem; }
.how-cols .how-side p:last-child { margin-bottom: 0; }
/* Los comandos, marcados. En un párrafo largo un «/submit» suelto se lee como
   una palabra más, y es lo único de la página que hay que teclear: sin resaltar,
   había que releer el párrafo entero para encontrar qué se escribe. Mismo
   tratamiento que en el FAQ y en el aviso legal —fondo, monoespaciada— para que
   sea el mismo objeto en todo el sitio, y negrita encima porque aquí compite con
   mucho más texto alrededor. */
.how-cols .how-side code {
  font-family: var(--mono); font-size: .88em; font-weight: 600;
  background: var(--highlight); padding: .1rem .3rem; border-radius: 3px;
}
.how-cols .phone { width: 100%; max-width: none; margin: 0 0 .9rem; }
/* Entre bloques, más aire que entre secciones normales: cada uno es una escena
   entera y a 3rem se leían como una sola lista larga. */
.how-block + .how-block { margin-top: 4.5rem; }
main > .how-flow + .how-tail { margin-top: 4.5rem; }

/* El hilo de los pasos. Tres bloques con un móvil al lado se leen como tres
   cosas sueltas; con un hilo y un número delante se leen como uno, dos y tres,
   que es lo que son. El hilo es **uno** y cruza los huecos entre bloques, así
   que cuelga de lo que los envuelve y no de cada uno.

   El sitio del número es el carril de la izquierda, y por eso hay hueco antes
   del texto en vez de una columna más en la rejilla: la rejilla centra sus
   piezas contra un móvil que mide el doble, y el número tiene que quedarse
   arriba, pegado a su rótulo, no en mitad de la nada. */
.how-flow { position: relative; padding-left: 5.5rem; }
.how-flow::before {
  content: ""; position: absolute; left: 1.6rem; top: .4rem; bottom: 1.5rem;
  width: 1px; background: var(--line);
}
.how-side { position: relative; }
/* El círculo tapa el hilo por detrás —de ahí el fondo de papel—, que es lo que
   hace que el hilo parezca pasar por él y no por encima. */
.how-step {
  position: absolute; left: -5.5rem; top: -1.05rem; margin: 0;
  width: 3.2rem; height: 3.2rem; border-radius: 999px;
  border: 1px solid var(--drop); background: var(--paper); color: var(--drop);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .85rem; letter-spacing: .04em;
}
/* La marca que ata el número a su bloque. Sin ella el círculo flota. */
.how-step::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 2.3rem; height: 1px; background: var(--line);
}
/* El rótulo es el comando que se escribe, y va del verde del hilo: los dos
   dicen «esto es un paso». */
.how-side .list-label { color: var(--drop); }
/* Una línea que resume el paso antes de los párrafos, para quien baja de
   prisa: con los tres subtítulos seguidos ya se sabe de qué va la página. */
.how-lede { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.4rem; }
/* La puerta al bot, en el paso uno. Se despega de su párrafo más de lo que se
   separan los párrafos entre sí: es una acción, no una frase más. */
.how-open { margin: 1.5rem 0 0; }
/* Y es el único rótulo largo del sitio, porque lleva el @ del bot dentro. El
   botón genérico va `white-space: nowrap`, así que en un móvil no cabía de una
   línea y se salía por la derecha: era el único desbordamiento de la web, y
   arrastraba la página entera en horizontal. Acortar el texto no era la
   salida —el @ es justo el dato que hace falta si el enlace no abre—, así que
   aquí se deja partir y se centra. */
.how-open .button { white-space: normal; text-align: center; }
/* Partido, hacen falta dos cosas más, y sólo donde parte: aire entre líneas
   —el botón hereda `line-height: 1` y pegaba una contra otra— y menos margen a
   los lados, que es lo que hace que quepa en dos líneas y no en tres. */
@media (max-width: 34rem) {
  .how-open .button { line-height: 1.3; padding-left: 1rem; padding-right: 1rem; }
}
/* Apilados, el móvil vuelve a ser un dibujo centrado y no una columna, y cae
   justo detrás del texto que ilustra — que es el orden en que ya está escrito
   en el HTML, así que no hay nada que reordenar. */
@media (max-width: 62rem) {
  .how-cols { grid-template-columns: minmax(0, 1fr); }
  .how-cols .phone { width: 84%; max-width: 30rem; margin: 2rem auto .9rem; }
  .how-chat .chat-foot { max-width: 30rem; margin-inline: auto; }
  /* El carril se estrecha en vez de irse: es lo que dice que son pasos. Lo que
     sí se va es la marca, que a este ancho pega el círculo con el texto. */
  .how-flow { padding-left: 3.4rem; }
  .how-flow::before { left: 1rem; }
  .how-step {
    left: -3.4rem; top: -.3rem;
    width: 2rem; height: 2rem; font-size: .7rem;
  }
  .how-step::after { content: none; }
}
/* El cierre: una línea y el botón, centrados. No es una sección más de texto,
   es la salida. */
.how-close { text-align: center; margin-top: 4rem; }
.how-close p { margin: 0 0 1.2rem; color: var(--muted); font-size: 1.02rem; }

/* Lo que cierra la página va a lo ancho, pero el texto no: a 62rem son 120
   caracteres por línea. */
.how-tail p { max-width: 44rem; }
.nav-cta {
  border: 1px solid var(--line); border-radius: 8px; padding: .5em 1em;
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.nav-cta:hover { border-color: var(--ink); }
/* Una tarjeta sin más: la de la promesa lleva columna para la comilla y aquí
   sólo hay texto. */
.plain-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow); max-width: var(--measure, 44rem);
}
.plain-card p { margin: 0; max-width: none; }

/* ------------------------------------------------- las cifras del cierre */

/* Cuatro columnas y ningún recuadro: la banda cierra la portada sobre el mismo
   papel que todo lo demás, y lo que la separa en partes son filetes, como en
   las filas. La primera columna dice de qué va y las otras tres cuentan; la
   última es la que decide, así que no se entierra al final por casualidad —va
   donde termina la lectura. */
.kpis {
  display: grid; gap: 0 1.7rem;
  /* La última columna pide algo más de aire: lleva tres líneas de texto bajo
     la cifra donde las otras llevan una. */
  grid-template-columns: 1.2fr 1fr 1.05fr 1.15fr;
  margin-top: 4.5rem; padding-top: .5rem;
}
.kpis > * + * { border-left: 1px solid var(--line); padding-left: 1.7rem; }
.kpis h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.75rem;
  line-height: 1.15; letter-spacing: -.03em; margin: .9rem 0 1.1rem;
  color: var(--ink); text-wrap: balance;
}
.kpi-lede { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }
/* El rótulo verde es el mismo recurso que el de las listas: mono, versalitas y
   el verde que en esta portada significa «esto está vivo». */
/* «IN PRIVATE · AT THE MOMENT» son 26 caracteres para una columna de 11rem:
   con el tracking de los otros rótulos se partía en dos líneas y dejaba la
   cifra descolgada. Aquí manda que quepa de una. */
.kpi-eyebrow {
  margin: 0; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--drop);
}
/* La cifra en la serif de los titulares y no en mono: aquí no es un dato de
   tabla que se compare hacia abajo, es lo que hay que leer primero. */
.kpis .figure { margin: 1.4rem 0 0; }
.kpis .figure strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 2.8rem; line-height: 1; letter-spacing: -.035em; color: var(--ink);
}
.kpis .figure span {
  display: block; margin-top: .5rem; font-family: var(--text);
  color: var(--muted); font-size: .95rem; line-height: 1.4;
}
/* «of affiliate commission» va pegada al 100% y con su peso: es parte de la
   frase, no el pie de la cifra. El pie es la línea de debajo. */
.kpis .figure span.tight {
  margin-top: .35rem; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.kpis .figure span.tight + span { margin-top: .3rem; }
.kpi-quote {
  margin: 1.6rem 0 0; padding-left: .9rem; font-size: .92rem; line-height: 1.5;
  border-left: 2px solid var(--drop); color: var(--ink);
}

/* De cuatro columnas a dos y luego a una. Al apilar, el filete deja de ir al
   costado —no separa nada— y pasa arriba, que es donde queda el corte. */
@media (max-width: 62rem) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
  .kpis > * + * { border-left: 0; padding-left: 0; }
  .kpis > .kpi-intro { grid-column: 1 / -1; }
  .kpis .figure strong { font-size: 2.6rem; }
}
@media (max-width: 34rem) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .kpis > .kpi-col + .kpi-col { border-top: 1px solid var(--line); padding-top: 1.6rem; }
}