/* ═══════════════════════════════════════════════════════════════════
   gigolosos — páginas de texto, formularios, panel y secciones.

   Legales, contacto, auth, listas de agencias / avisos / reseñas.
   Ancho de lectura acotado: --ancho-texto no se excede en un párrafo.
   ═══════════════════════════════════════════════════════════════════ */

.pagina {
  padding-top: var(--aire);
  padding-bottom: var(--aire);
}

.pagina__titulo {
  max-width: 20ch;
  margin-bottom: var(--aire-corto);
  font-size: var(--t-titulo);
}

.pagina__bajada {
  max-width: var(--ancho-texto);
  margin-top: calc(var(--aire-corto) * -1 + var(--e-5));
  margin-bottom: var(--aire-corto);
  color: var(--texto-2);
  font-size: var(--t-dato);
  line-height: var(--alto-medio);
}

.pagina__nota {
  margin-top: var(--e-6);
  color: var(--humo);
  font-size: var(--t-menor);
}
.pagina__nota a {
  color: var(--lapis);
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.pagina__nota a:hover { color: var(--hueso); }
.pagina__nota strong { color: var(--texto-2); font-weight: var(--peso-medio); }


/* ── Prosa ────────────────────────────────────────────────────────── */

.prosa {
  max-width: var(--ancho-texto);
  color: var(--texto-2);
  line-height: var(--alto-cuerpo);
}

.prosa p, .prosa ul { margin-bottom: var(--e-5); }

.prosa h2 {
  margin-top: var(--e-16);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-3);
  border-bottom: var(--borde);
  color: var(--hueso);
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: var(--peso-normal);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
}

.prosa h3 {
  margin-top: var(--e-8);
  margin-bottom: var(--e-3);
  color: var(--hueso);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
}

.prosa ul { padding-left: var(--e-5); list-style: none; }
.prosa li { position: relative; margin-bottom: var(--e-3); }
/* Viñeta de filete, no de disco: el disco es el default del navegador. */
.prosa li::before {
  content: "";
  position: absolute;
  left: calc(var(--e-5) * -1);
  top: .62em;
  width: var(--e-3);
  height: var(--grosor-filete);
  background: var(--humo-tenue);
}

.prosa strong { color: var(--hueso); font-weight: var(--peso-medio); }

.prosa a {
  color: var(--lapis);
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.prosa a:hover { color: var(--hueso); }

.prosa__fecha {
  margin-bottom: var(--e-8);
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

/* Ficha técnica de una fuente citada, debajo de la tabla que la usa. Va en
   --humo y no en --humo-tenue: esto es contenido —de quién es la cifra y
   sobre cuánta gente se midió— y el tenue no cumple AA. */
.prosa__nota {
  color: var(--humo);
  font-size: var(--t-meta);
}


/* ── Columnas de formulario + ayuda ───────────────────────────────── */

.columnas {
  display: grid;
  gap: var(--e-12);
  align-items: start;
}
@media (min-width: 900px) {
  .columnas { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e-16); }
}

.forma { max-width: var(--ancho-texto); }


/* ── Panel lateral de ayuda ───────────────────────────────────────── */

.ayuda-caja {
  padding: var(--e-8);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-1), var(--filo), inset 0 0 0 1px var(--filete);
}

.ayuda { font-size: var(--t-menor); }
.ayuda dt {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: var(--borde);
  color: var(--hueso);
  font-weight: var(--peso-medio);
}
.ayuda dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ayuda dd {
  margin-top: var(--e-2);
  color: var(--humo);
  line-height: var(--alto-medio);
}


/* ── Tablas de panel ──────────────────────────────────────────────── */

/* `position: relative` NO es decoración (15/09/2026). Las etiquetas
   `.visualmente-oculto` de adentro van en `position: absolute`, y si la
   envoltura no está posicionada se miden contra la página: la tabla se
   desplazaba bien dentro de su caja, pero moderación entera medía 1.071 px
   en un teléfono de 390. Con la envoltura como bloque contenedor, su
   `overflow` las recorta junto con la tabla. */
.tabla-envoltura { position: relative; overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-menor);
}
.tabla th, .tabla td {
  padding: var(--e-4) var(--e-3);
  border-bottom: var(--borde);
  text-align: left;
  white-space: nowrap;
}
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child,  .tabla td:last-child  { padding-right: 0; text-align: right; }

.tabla thead th {
  padding-top: 0;
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.tabla td { color: var(--texto-2); }
.tabla tbody tr { transition: background var(--trans-rapida); }
.tabla tbody tr:hover { background: var(--lapis-velo); }
.tabla .num { font-variant-numeric: tabular-nums; }
.tabla a {
  color: var(--lapis);
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.tabla a:hover { color: var(--hueso); }

/* Estado como punto de color más versalita: el punto da el canal
   redundante que el color solo no entrega. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.estado::before {
  content: "";
  width: var(--e-2);
  height: var(--e-2);
  border-radius: var(--radio-pastilla);
  background: currentColor;
}
.estado--publicado, .estado--pagada    { color: var(--exito); }
.estado--suspendido, .estado--fallida,
.estado--cancelada                     { color: var(--error); }
.estado--borrador, .estado--pendiente  { color: var(--humo); }

.marca-ok { color: var(--oro); }

/* Un formulario de una sola acción, en línea con el texto. */
.en-linea { display: inline; }
.enlace-boton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lapis);
  font-family: var(--sans);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: var(--offset-subrayado);
  cursor: pointer;
  transition: color var(--trans-rapida);
}
.enlace-boton:hover { color: var(--hueso); }

/* ÁREA DE TOQUE, sin mover nada de sitio.
   Medido el 26/08/2026: un `.enlace-boton` mide exactamente lo que mide su
   texto, porque lleva `padding: 0`. Los más cortos —el «+1» del cupo de una
   agencia— quedaban de 13 px de ancho. **Cumplen WCAG 2.2 SC 2.5.8 por la
   excepción de espaciado** —hay 133 px entre sus centros, medido— así que
   esto no arregla un incumplimiento: arregla un botón de 13 px, que con un
   pulgar es fastidioso conforme o no.

   El pseudo-elemento y no `padding`: estos botones viven dentro de celdas de
   tabla y de párrafos, y darles relleno los correría de línea. Así el área
   crece hacia afuera y el texto se queda donde estaba. */
.enlace-boton { position: relative; }
.enlace-boton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100%, 2.75rem);
  height: max(100%, 2.75rem);
}


/* ── Fichas cortas: agencias, avisos, reseñas, listas negras ──────── */

.lista-fichas { display: grid; gap: var(--e-4); }

.ficha-corta {
  position: relative;
  padding: var(--e-6) var(--e-8);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-1), var(--filo), inset 0 0 0 1px var(--filete);
  transition: box-shadow var(--trans-media), transform var(--trans-media);
}
.ficha-corta:hover {
  transform: translateY(calc(var(--alza-2) * -1));
  box-shadow: var(--sombra-2), var(--filo-fuerte), inset 0 0 0 1px var(--filete-vivo);
}

/* Filete de oro en el canto izquierdo, que crece al pasar el cursor. */
.ficha-corta::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--e-6);
  bottom: var(--e-6);
  width: var(--grosor-foco);
  border-radius: var(--radio-pastilla);
  background: var(--oro-linea);
  transform: scaleY(0);
  transition: transform var(--trans-suave);
}
.ficha-corta:hover::before { transform: scaleY(1); }

.ficha-corta h2 {
  font-family: var(--serif);
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-normal);
  letter-spacing: var(--track-titulo);
}
.ficha-corta h2 a {
  text-decoration: none;
  text-underline-offset: var(--offset-subrayado);
}
.ficha-corta h2 a:hover { text-decoration: underline; }

.ficha-corta__meta {
  margin-top: var(--e-2);
  color: var(--humo);
  font-size: var(--t-meta);
}
.ficha-corta__texto {
  max-width: var(--ancho-texto);
  margin-top: var(--e-4);
  color: var(--texto-2);
  font-size: var(--t-menor);
  line-height: var(--alto-medio);
}

/* ── Logo de agencia ───────────────────────────────────────────────────
   Va sobre lienzo CLARO y no sobre la superficie oscura del sitio. Es la
   única pieza que rompe la escala de tinta, y con motivo: un logo
   entregado en PNG casi siempre es tinta oscura sobre transparencia, y
   sobre --sup-2 desaparecería entero. Un JPG trae su propio fondo blanco
   dentro del archivo, así que un lienzo claro hace juego con él en vez de
   recortarse como un parche.

   EL LIENZO ES --hueso Y NO --blanco, y eso se decidió mirando los dos
   renders (15/08/2026), no de memoria. Con blanco puro el JPG se funde
   perfecto —desaparece el escalón entre su fondo y el lienzo— pero un
   logo blanco sobre transparencia, que es el otro caso frecuente, se
   vuelve INVISIBLE del todo. Con --hueso ese logo queda débil pero
   legible y el escalón del JPG es apenas perceptible. Ningún fondo sirve
   para los dos casos; este es el único que no pierde ninguno entero. */
.logo-agencia {
  flex: none;
  display: block;
  width: var(--logo-agencia);
  height: var(--logo-agencia);
  padding: var(--e-3);
  border-radius: var(--radio-2);
  background: var(--hueso);
  object-fit: contain;
  box-shadow: inset 0 0 0 1px var(--filete);
}
.logo-agencia--mini {
  width: var(--logo-agencia-mini);
  height: var(--logo-agencia-mini);
  padding: var(--e-2);
}

.agencia-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}

/* Con logo, la ficha del listado pasa a dos columnas. Sin logo se queda
   como estaba: son 4 agencias y hasta hoy ninguna tenía imagen. */
.ficha-corta--con-logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
}

.estrellas {
  color: var(--oro);
  letter-spacing: .1em;
}


/* ── Pestañas ─────────────────────────────────────────────────────── */

/* ── Pestañas ──────────────────────────────────────────────────────
   Rehechas el 30/08/2026. Victor: «las fotos, tarifas, idiomas, viajes,
   verificación y planes deberían ser más vistosos, son letras muy
   pequeñas y poco distinguidas».

   Y era otra pieza en el sistema de TINTA —`--humo` sobre nada, con un
   filete de `--oro-linea` bajo la activa—, la octava. Tres cosas fallaban
   a la vez:

   1. `--t-menor` en `--humo` es el tratamiento de un texto secundario, y
      esto es la navegación principal de la pantalla: son siete destinos y
      el único camino a las fotos y las tarifas.
   2. LA ACTIVA SE MARCABA CON UN FILETE DE 2 px. Es exactamente lo que el
      proyecto ya había aprendido el 15/08 con la navegación de categorías
      —«a la luz del día un filete de 2 px no se ve y una pastilla sí»— y
      que allá se arregló y acá no.
   3. El objetivo táctil era el ancho del texto, sin relleno lateral.
      «Datos» daba 41 px de ancho; conformaba por espaciado, pero con un
      pulgar es incómodo igual. Es el mismo caso que los botones de 13 px
      del cupo de agencia, del 26/08.

   EL LENGUAJE ES EL QUE YA EXISTE: la pastilla de velo de `.nav__lista` y
   el relleno con `--neon-gradiente` de los botones, cuyo par con
   `--tinta-0` está medido (5.85:1 y 7.17:1 en los dos extremos).

   SIGUEN ENVOLVIENDO, NO SE DESLIZAN. Una tira con scroll horizontal cabe
   en una línea y esconde la mitad de los destinos sin avisar, que es
   justo el defecto que se le arregló a la tabla de compras el mismo día.
   Siete pastillas cortas se acomodan en dos filas y se ven todas.

   Cambia las cuatro pantallas que las usan —perfil, agencia, avisos y el
   filtro de moderación—, que es lo correcto: es un componente. */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--aire-corto);
}

.pestanas a {
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-pastilla);
  background: var(--neon-sup-alta);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--neon-filete);
  color: var(--hueso);
  font-size: var(--t-cuerpo);
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--trans-suave), box-shadow var(--trans-suave),
              color var(--trans-suave);
}

.pestanas a:hover {
  background: var(--neon-velo);
  box-shadow: var(--neon-halo-pastilla),
              inset 0 0 0 var(--grosor-filete) var(--neon-relleno);
  color: var(--hueso);
  text-decoration: none;
}
.pestanas a:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.pestanas a:active { transform: scale(.985); }

/* La activa va RELLENA, no subrayada: es la única forma que se lee de un
   vistazo en un teléfono a la luz del día. Texto oscuro encima, que es lo
   que la deja en AA sobre el degradado. */
.pestanas a[aria-current="page"] {
  background: var(--neon-gradiente);
  box-shadow: var(--neon-halo-pastilla);
  color: var(--tinta-0);
  font-weight: var(--peso-medio);
}
.pestanas a[aria-current="page"]:hover {
  box-shadow: var(--neon-halo-boton);
  color: var(--tinta-0);
}

/* El contador del filtro de moderación. Existía en la plantilla desde
   siempre y no tenía ninguna regla: salía como texto pegado al rótulo. */
.pestanas__n {
  margin-left: var(--e-2);
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-variant-numeric: tabular-nums;
}
/* SIN `opacity` sobre la activa, y no es un detalle: al 75 % el contador
   daría 6.29:1 contra el extremo dorado del degradado y pasaría, pero con
   otra paleta ya cayó bajo AA una vez, y el próximo cambio no avisa. Se
   distingue del rótulo por tamaño, que ya alcanza. Las dos mitades de la
   trampa juntas: un color con alfa se juzga por la mezcla, y en un
   degradado el punto que falla es un extremo, nunca el medio. */
.pestanas a[aria-current="page"] .pestanas__n { color: var(--tinta-0); }


/* ── Buscador ─────────────────────────────────────────────────────── */

.buscador { margin-bottom: var(--aire-corto); }
.buscador .filtro__campo { flex: 1 1 22rem; }


/* ── Aviso de vencimiento ──────────────────────────────────────────
   Un beneficio pagado que está por vencer. Filete de oro y no relleno:
   el oro va en línea, y acá además tiene que leerse como aviso y no
   como una medalla más.                                             */

.por-vencer {
  display: inline-block;
  margin-left: var(--e-2);
  padding: 0 var(--e-2);
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--filete-oro);
  color: var(--oro);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
}


/* Visitas de los últimos 7 días, bajo el acumulado en el panel. En línea
   aparte y en tono secundario: el acumulado es el número grande, esto es
   la tendencia. */
.panel__semana {
  display: block;
  color: var(--humo);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}


/* ── Páginas de error ──────────────────────────────────────────────
   Centrada y corta. Lo que importa no es el número sino la salida: la
   mayoría de quienes caen acá vienen de una URL vieja de WordPress y
   necesitan un camino de vuelta, no un diagnóstico.               */

.error {
  display: grid;
  justify-items: center;
  max-width: var(--ancho-texto);
  padding-block: var(--aire);
  text-align: center;
}

/* El código en serif y grande, pero en tono de fondo: es ornamento, no
   información. Va aria-hidden en la plantilla. */
.error__codigo {
  margin: 0;
  color: var(--filete-vivo);
  font-family: var(--serif);
  font-size: var(--t-hero);
  line-height: 1;
  letter-spacing: var(--track-hero);
}

.error__titulo { margin-block: var(--e-5) var(--e-4); }

.error__bajada {
  margin: 0;
  color: var(--texto-2);
  line-height: var(--alto-cuerpo);
}

/* `.pago__salidas` comparte esta regla y NO usa `.pagina__nota`, que era
   donde estaba el botón en el primer intento. El motivo es de especificidad
   y es de los que no se ven leyendo: `.pagina__nota a` pesa (0,2,0) contra
   (0,1,0) de `.boton--marca`, así que le ganaba el color y el botón salía
   con el texto en --lapis sobre el gradiente magenta, en vez del --tinta-0
   oscuro que es el que está medido para ese fondo. */
.error__salidas,
.pago__salidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

/* La de error va centrada porque toda esa pantalla lo está; la de pago
   sigue el eje del texto que tiene encima. */
.pago__salidas { justify-content: flex-start; }


/* ── Artículo ──────────────────────────────────────────────────────
   Lo usa `/autos-para-sexo-en-chile/`, el único texto que se rescató
   del blog de WordPress. Vive acá y no en un archivo propio porque es
   una sola página: un `articulo.css` para 40 líneas es una petición de
   red más para nada.

   Todo esto reemplaza a los estilos en línea que traía el editor de
   WordPress —`style="max-width:100%; border-radius:8px"` y compañía—,
   que declaraban medidas y colores literales.                        */

.articulo__foto {
  margin-block: var(--e-8);
  /* Rompe el ancho de lectura de .prosa: la foto de cabecera manda, como
     en el resto del sitio, y encerrarla en la columna de texto la deja
     mezquina. El tope es el ancho del contenedor, no el del párrafo. */
  max-width: none;
  width: 100%;
}
.articulo__foto img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-2);
}

/* La tabla de países hereda de .tabla. Solo cambia el ancho: seis filas
   de dos datos cortos no necesitan ocupar la pantalla entera. */
.tabla--paises { max-width: var(--ancho-texto); }

/* Los diez autos: foto a la izquierda, nombre y descripción a la
   derecha. Es la misma composición de la cola de moderación —imagen
   fija, texto que fluye— y por el mismo motivo: lo que se mira primero
   es la foto. */
/* Dos columnas donde quepan. Con diez autos en una sola, la página se
   iba a 5.180 px y la mitad derecha quedaba vacía: .prosa limita el ancho
   de LECTURA, que es lo correcto para un párrafo y no para una grilla de
   fichas.

   El ancho de columna y el tamaño de la foto se eligieron comparando tres
   variantes renderizadas. Una sola columna se lee mejor —el texto entra en
   dos líneas— pero deja la página en 5.034 px; dos columnas con la foto a
   9rem apretaban la descripción a seis líneas. Esto es el punto medio:
   4.202 px, tres líneas de texto y el auto todavía reconocible. */
.autos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--e-4);
  max-width: none;
  margin-bottom: var(--e-8);
  padding-left: 0;
  list-style: none;
}

.auto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e-5);
  margin-bottom: 0;
  padding: var(--e-4);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--filo);
}
/* .prosa dibuja una viñeta de filete antes de cada <li>. Acá la foto ya
   cumple esa función y la viñeta queda flotando fuera de la caja.

   OJO CON EL SELECTOR: `.auto::before` NO alcanza. `.prosa li::before`
   tiene dos clases de especificidad (0,2,1) contra una de `.auto::before`
   (0,1,1), así que gana la viñeta y sigue dibujándose. Se vio en la
   captura: un guion gris flotando a la izquierda de cada tarjeta. Hay que
   igualar o superar la especificidad, no confiar en el orden. */
.prosa .auto::before { content: none; }

/* `contain` y no `cover`, que es la misma regla del logo de agencia y por
   el mismo motivo: estas once no son fotografía editorial sino fotos de
   catálogo, y un producto recortado deja de mostrar lo que se está
   nombrando. Con `cover` al Chevrolet le cortaba el techo y el capó.

   Se decidió mirando las tres variantes renderizadas. El lienzo va en
   --carbon-2 y no en --hueso —el que se eligió para el logo de agencia—
   porque acá el caso es el contrario: allá el problema era un logo blanco
   sobre transparencia, que desaparecía; estas fotos traen el fondo blanco
   QUEMADO, no transparente, así que un lienzo claro no las funde y sí
   agrega un marco cálido que se lee como suciedad contra ese blanco. */
.auto__foto {
  width: var(--foto-auto);
  height: auto;
  aspect-ratio: var(--ratio-auto);
  object-fit: contain;
  padding: var(--e-2);
  border-radius: var(--radio);
  background: var(--carbon-2);
}

.auto__texto strong {
  display: block;
  margin-bottom: var(--e-1);
  color: var(--hueso);
  font-weight: var(--peso-medio);
}
.auto__texto p { margin-bottom: 0; font-size: var(--t-menor); }

@media (max-width: 520px) {
  .auto { gap: var(--e-4); padding: var(--e-3); }
}

/* ── Resumen de la orden en /pago/resultado ─────────────────────────────
   Un <dl> y no una tabla: son pares etiqueta-valor, no una matriz. Va con
   filetes y sin cajas, que es la misma decisión del tarifario de la ficha
   —la pieza firma— y por el mismo motivo: una caja alrededor de cuatro
   datos se lee como formulario, y esto es un comprobante.

   La cifra en serif y tabular por lo mismo que ahí: es un monto en pesos y
   tiene que poder leerse de un vistazo sin que los dígitos bailen. */
.datos-pago {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-5);
  margin: var(--e-6) 0;
  padding: var(--e-4) 0;
  border-top: var(--grosor-filete) solid var(--filete);
  border-bottom: var(--grosor-filete) solid var(--filete);
}

.datos-pago dt {
  color: var(--humo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

.datos-pago dd {
  margin: 0;
  color: var(--hueso);
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
}

/* El número de orden es lo único que la persona nos va a tener que
   copiar si algo sale mal, así que se dibuja para ser leído a mano:
   monoespaciado, y sin la caja de código que le pone base.css al resto. */
.datos-pago code {
  padding: 0;
  background: none;
  color: var(--texto-2);
  font-size: var(--t-menor);
  letter-spacing: var(--track-etiqueta);
}

@media (max-width: 520px) {
  .datos-pago { grid-template-columns: 1fr; gap: 0; }
  .datos-pago dt { margin-top: var(--e-3); }
}

/* ── Sitios partner ─────────────────────────────────────────────────────
   Intercambio de banners. Lo que aquí manda es que los banners son de
   otros y no se pueden rediseñar: llegan con su propio color, su propio
   tipo de letra y su propio ruido. La página no compite con ellos —cada
   uno va sobre un lienzo neutro con filete, separado del siguiente— y
   toda la voz del sitio queda en el texto de alrededor. */

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  margin: var(--e-6) 0;
  padding: 0;
  list-style: none;
}

/* `.prosa li::before` dibuja una viñeta a la izquierda de cada <li>, y acá
   sobra. Se necesita la misma especificidad para ganarle: la misma trampa
   que ya documenta `.prosa .auto::before` más arriba. */
.prosa .partners__sitio::before { content: none; }

.partners__sitio {
  margin: 0;
  padding: 0;
}

.partners__sitio a {
  display: block;
  padding: var(--e-2);
  border-radius: var(--radio);
  background: var(--carbon-2);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--filete);
  transition: box-shadow var(--trans-rapida), transform var(--trans-media);
}
.partners__sitio a:hover {
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--filete-vivo),
              var(--sombra-2);
  transform: translateY(calc(var(--alza-1) * -1));
}
/* En un teléfono `:hover` no existe: lo tocable se hunde. Misma regla que
   las tarjetas y las categorías. */
.partners__sitio a:active { transform: scale(.985); }

.banner-propio {
  margin: var(--e-8) 0;
  padding-top: var(--e-6);
  border-top: var(--grosor-filete) solid var(--filete);
}
.banner-propio h3 { margin-bottom: var(--e-4); }

/* `height: auto` NO ES DECORATIVO Y NO SE PUEDE SACAR. Estos <img> traen
   los atributos `width` y `height`, que el HTML mapea a las propiedades
   CSS como pistas de presentación: una regla de autor que declara `width`
   sin `height` deja pasar la pista y la imagen queda con la altura en
   píxeles del archivo. Es exactamente la regresión que costó la galería en
   tiras el 10/08/2026. */
.partners__sitio img,
.banner-propio img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radio);
}

.banner-propio .boton { margin-top: var(--e-4); }

/* El código para copiar. Monoespaciado y con el texto a la vista entero:
   lo que se copia tiene que poder leerse antes de pegarlo en otro sitio. */
.codigo-banner {
  display: block;
  width: 100%;
  margin-top: var(--e-4);
  padding: var(--e-4);
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--tinta-0);
  color: var(--texto-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-menor);
  line-height: var(--alto-medio);
  resize: vertical;
}
.codigo-banner:focus-visible {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
}

/* `balance` reparte el título en líneas parejas, y en un titular de dos o tres
   palabras eso es la diferencia entre un corte casual y uno compuesto.

   VA ACÁ Y NO EN `.titular`: el titular de la portada trae un `<br>` propio, y
   `balance` PELEA con un salto explícito — reparte igual y saca una tercera
   línea que nadie pidió. Pasó el 29/08/2026 y costó una medición entender que
   el culpable no era el `max-width`. */
.pagina__titulo,
.encabezado__titulo { text-wrap: balance; }