/* ═══════════════════════════════════════════════════════════════════
   gigolosos — listados y tarjeta de perfil.

   La tarjeta es fotografía de borde a borde con el texto encima. Nada
   de caja con la foto adentro: eso reduce la imagen a ilustración de
   una ficha. Acá la imagen ES la tarjeta y la interfaz es la luz que
   la enmarca.

   El tamaño sigue codificando el beneficio pagado: una celda PREMIUM
   ocupa el doble de ancho y lleva filete de oro.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Encabezado de la vista ───────────────────────────────────────── */

.encabezado {
  display: grid;
  gap: var(--e-5);
  padding-top: var(--aire);
  padding-bottom: var(--aire-corto);
}

.encabezado__titulo {
  max-width: 18ch;
  font-size: var(--t-display);
}

.encabezado__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
}

/* La cuenta va en cifra grande y serif, con el sustantivo en versalita
   al lado: un dato tratado como dato, no como texto de relleno. */
.encabezado__cifra {
  font-family: var(--serif);
  font-size: var(--t-cifra);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}


/* ── Filtro ───────────────────────────────────────────────────────── */

.filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--e-4);
  margin-bottom: var(--aire-corto);
  padding: var(--e-5) var(--e-6);
  border: var(--borde);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-1), var(--filo);
}

.filtro__campo {
  display: grid;
  gap: var(--e-2);
  min-width: 0;
}

.filtro select,
.filtro input[type="search"] {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  border: var(--borde-vivo);
  border-radius: var(--radio);
  background: var(--tinta-0);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-menor);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.filtro select:hover,
.filtro input[type="search"]:hover { border-color: var(--filete-vivo); }
.filtro select:focus-visible,
.filtro input[type="search"]:focus-visible { box-shadow: var(--halo-lapis); }

.filtro__boton { align-self: end; }

.filtro__limpiar {
  align-self: center;
  color: var(--lapis);
  font-size: var(--t-menor);
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.filtro__limpiar:hover { color: var(--hueso); }


/* ── Buscador rápido ──────────────────────────────────────────────
   El filtro de entrada. Lo cargan la portada y la página de búsqueda —
   las dos incluyen este archivo—, así que se declara una sola vez.

   Es un panel, no una barra de campos sueltos: mismo material que el
   filtro del listado (superficie, filete y filo de luz) para que se lean
   como la misma familia y no como dos formularios distintos.          */

.buscador-rapido {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--radio-2);
  background: linear-gradient(160deg, var(--neon-sup), var(--neon-fondo));
  box-shadow: var(--neon-halo), inset 0 0 0 1px var(--neon-filete);
}

/* LA BARRA: el campo de texto y el botón, juntos y en una sola fila. Es
   la pieza que ahorra el espacio, y con `flex-wrap` el botón cae debajo
   sólo si el campo no puede achicarse más — a 320 px todavía caben los
   dos. */
/* La barra se define al final del archivo: ver «La barra de búsqueda». */

.buscador-rapido__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--e-3);
}

.buscador-rapido__campo {
  display: grid;
  gap: var(--e-2);
  flex: 1 1 9rem;
  min-width: 0;
}
/* El texto manda: se lleva el espacio sobrante y nunca baja de un ancho
   donde deje de caber un nombre. */
.buscador-rapido__campo--texto { flex: 3 1 13rem; }

.buscador-rapido select,
.buscador-rapido input[type="search"] {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  border: var(--grosor-filete) solid var(--neon-filete);
  border-radius: var(--radio);
  background: var(--neon-fondo);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-menor);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
/* --humo y no --humo-tenue. El marcador de posición es texto, no
   ornamento: sobre el fondo, --humo-tenue no llega a los 4.5:1 que pide
   AA. --humo sí. */
.buscador-rapido input[type="search"]::placeholder { color: var(--humo); }
.buscador-rapido select:hover,
.buscador-rapido input[type="search"]:hover { border-color: var(--neon-relleno); }
.buscador-rapido select:focus-visible,
.buscador-rapido input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--neon-magenta);
  box-shadow: var(--neon-halo-pastilla);
}

/* El botón deja de ser `.boton--marca` con relleno lateral de sobra: en la
   barra tiene que medir lo justo para no comerse el campo. */
.buscador-rapido__enviar {
  flex: 0 0 auto;
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--radio);
  background: var(--neon-gradiente);
  box-shadow: var(--neon-halo-pastilla);
  color: var(--tinta-0);
  font-family: inherit;
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: box-shadow var(--trans-suave);
}
.buscador-rapido__enviar:hover { box-shadow: var(--neon-halo-boton-alto); }
.buscador-rapido__enviar:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.buscador-rapido__enviar:active { transform: scale(.985); }

/* Segunda fila: las tres condiciones a la izquierda, el enlace a la
   búsqueda completa empujado al extremo. */
.buscador-rapido__fila--marcas {
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-4);
  border-top: var(--grosor-filete) solid var(--neon-filete);
}

.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  margin: 0;
  border: 0;
}

/* Casilla como conmutador de filete. Marcada NO se rellena de color: se
   enciende con velo y filete de lapislázuli, que es el acento de
   interacción. El oro no se toca acá — significa beneficio pagado y
   verificación, y una casilla dorada que solo dice "filtrando" le roba
   el significado a la señal de la tarjeta. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: var(--borde-vivo);
  border-radius: var(--radio-pastilla);
  color: var(--texto-2);
  font-size: var(--t-menor);
  cursor: pointer;
  user-select: none;
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              background-color var(--trans-rapida);
}
.marca:hover { color: var(--hueso); border-color: var(--filete-vivo); }

/* El tilde ocupa su lugar desde el principio: si apareciera al marcar,
   la pastilla cambiaría de ancho y la fila entera se movería. */
.marca__tilde {
  font-size: var(--t-meta);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--trans-rapida);
}

.marca__casilla:checked + .marca {
  border-color: var(--lapis);
  background: var(--lapis-velo);
  color: var(--hueso);
}
.marca__casilla:checked + .marca .marca__tilde {
  opacity: 1;
  color: var(--lapis);
}

/* La casilla real está oculta a la vista pero sigue recibiendo foco: el
   anillo se dibuja sobre la etiqueta. Sin esto, navegar con teclado deja
   el foco invisible, que es justo lo que WCAG AA no permite. */
.marca__casilla:focus-visible + .marca {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
}

/* «Búsqueda avanzada» era un <a> subrayado suelto al lado de tres pastillas:
   no tenía forma de control, y encima pintaba con --lapis, del sistema de
   tinta anterior al neón.

   AHORA ES UNA PASTILLA, PERO NO LA MISMA QUE LAS MARCAS, y esa distinción es
   toda la decisión. Las marcas llevan `--borde-vivo` y al encenderse se
   rellenan de velo: son CONDICIONES, y tienen dos estados. Ésta lleva el
   filete tenue y nunca se enciende, porque no es una condición sino una
   salida — lleva a otra pantalla. Si las cuatro se vieran igual, la fila
   diría que hay cuatro filtros y uno de ellos te saca de la página.

   El chevron es lo que dice «esto va a otra parte», y es el mismo signo que
   usa el <summary> de «Más filtros» tres reglas más abajo: son la misma
   función —ver más filtros— en las dos pantallas donde vive el buscador. */
.buscador-rapido__avanzada {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: var(--borde);
  border-radius: var(--radio-pastilla);
  color: var(--texto-2);
  font-size: var(--t-menor);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              background-color var(--trans-rapida);
}
.buscador-rapido__avanzada::after {
  content: "\203A";                        /* › */
  font-size: var(--t-cuerpo);
  line-height: 1;
  color: var(--humo);
  transition: transform var(--trans-rapida), color var(--trans-rapida);
}
.buscador-rapido__avanzada:hover {
  color: var(--hueso);
  border-color: var(--neon-magenta);
  background: var(--neon-velo);
}
.buscador-rapido__avanzada:hover::after {
  color: var(--neon-magenta);
  transform: translateX(2px);
}
.buscador-rapido__avanzada:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-magenta);
  outline-offset: var(--sep-foco);
}
@media (prefers-reduced-motion: reduce) {
  .buscador-rapido__avanzada:hover::after { transform: none; }
}

/* En la portada el aire lo pone la entrada; dentro de una página el panel
   tiene que separarse de lo que devuelve. */
.pagina .buscador-rapido { margin-bottom: var(--e-6); }

.buscador-rapido__cuenta { margin-bottom: var(--e-6); }


/* ── Filtros avanzados ────────────────────────────────────────────────
   Solo en /busqueda-de-escorts-en-chile/. <details> nativo: sin JS, con
   el estado que el lector de pantalla necesita ya puesto.               */

.avanzados {
  padding-top: var(--e-4);
  border-top: var(--borde);
}

/* La misma pastilla que «Búsqueda avanzada» de la portada: son la misma
   función en las dos pantallas donde vive el buscador, y hasta el 29/08/2026
   se veían distintas —una era texto subrayado y la otra texto pelado— además
   de pintar las dos con --lapis. */
.avanzados__resumen {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  width: fit-content;
  padding: var(--e-2) var(--e-4);
  border: var(--borde);
  border-radius: var(--radio-pastilla);
  color: var(--texto-2);
  font-size: var(--t-menor);
  cursor: pointer;
  list-style: none;          /* el triángulo por defecto se dibuja abajo */
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              background-color var(--trans-rapida);
}
.avanzados__resumen::-webkit-details-marker { display: none; }
.avanzados__resumen:hover {
  color: var(--hueso);
  border-color: var(--neon-magenta);
  background: var(--neon-velo);
}
.avanzados__resumen:hover::before { color: var(--neon-magenta); }
.avanzados__resumen:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-magenta);
  outline-offset: var(--sep-foco);
  border-radius: var(--radio);
}

/* Marcador propio: gira al abrir. Va antes del texto y no después porque
   el signo es lo que dice que esto se despliega. */
.avanzados__resumen::before {
  content: "\203A";                       /* › */
  display: inline-block;
  font-size: var(--t-cuerpo);
  line-height: 1;
  transition: transform var(--trans-rapida);
}
.avanzados[open] > .avanzados__resumen::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .avanzados__resumen::before { transition: none; }
}

/* Cuántos filtros hay marcados adentro. Cerrado, es lo único que delata
   que la búsqueda está acotada por algo que no se ve. */
.avanzados__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  padding: 0 var(--e-1);
  border: var(--borde-vivo);
  border-color: var(--lapis);
  border-radius: var(--radio-pastilla);
  background: var(--lapis-velo);
  color: var(--hueso);
  font-size: var(--t-meta);
}

.avanzados__cuerpo {
  display: grid;
  gap: var(--e-5);
  padding-top: var(--e-5);
}

.avanzados__grupo {
  display: grid;
  gap: var(--e-3);
  padding: 0;
  margin: 0;
  border: 0;
}

.avanzados__titulo { padding: 0; }

.avanzados__nota {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--t-meta);
}

/* Los 24 servicios en columnas automáticas: en escritorio caben cuatro o
   cinco por fila y en teléfono quedan dos, sin un breakpoint que mantener. */
.marcas--grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--e-2);
}
.marcas--grilla .marca { justify-content: space-between; }

/* Cuántos perfiles publicados ofrecen el servicio. Tono secundario: es un
   dato de apoyo, no la etiqueta. */
.marca__n {
  color: var(--humo);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}
.marca__casilla:checked + .marca .marca__n { color: var(--texto-2); }

/* Un servicio que hoy no ofrece nadie se muestra apagado en vez de
   desaparecer: que el catálogo esté completo dice más sobre el sitio que
   una lista recortada, y marcar la casilla solo devolvería cero. */
.marca__casilla:disabled + .marca {
  opacity: .45;
  cursor: not-allowed;
}
.marca__casilla:disabled + .marca:hover {
  color: var(--texto-2);
  border-color: var(--filete-vivo);
}

.avanzados__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--e-3);
}
.avanzados__fila .buscador-rapido__campo { flex: 1 1 12rem; }

/* En teléfono el panel se apila entero: dos desplegables lado a lado en
   360 px dejan cada uno con seis caracteres visibles.

   EL BOTÓN QUEDA FUERA DE ESA REGLA desde el 30/08/2026, y es el detalle
   que casi arruina la barra nueva: con `flex: 1 1 100%` el botón crecía
   igual que el campo y se repartían la barra a medias — medido, el campo
   quedaba en 149 px de 390 y el marcador de posición se cortaba a la
   mitad. Dentro de una barra el botón mide lo que mide su texto. */
@media (max-width: 560px) {
  .buscador-rapido__campo { flex: 1 1 100%; }
  .buscador-rapido__fila:not(.buscador-rapido__barra) > .buscador-rapido__enviar {
    flex: 1 1 100%;
  }
  .buscador-rapido__fila--marcas { justify-content: flex-start; }
}


/* ── Grilla ───────────────────────────────────────────────────────── */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-tarjeta), 100%), 1fr));
  gap: var(--e-8) var(--e-5);
}

/* Entrada escalonada. --i lo pone la plantilla. Se corta a las 12
   primeras para que la última fila no espere un segundo entero. */
@media (prefers-reduced-motion: no-preference) {
  .grilla__celda {
    animation: subir var(--trans-lenta) both;
    animation-delay: calc(min(var(--i, 0), 12) * 40ms);
  }
  @keyframes subir {
    from { opacity: 0; transform: translateY(var(--e-5)); }
    to   { opacity: 1; transform: none; }
  }
}


/* ── Tarjeta ──────────────────────────────────────────────────────── */

.tarjeta__enlace {
  display: block;
  border-radius: var(--radio-2);
  text-decoration: none;
}

.tarjeta__marco {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: var(--ratio-retrato);
  border-radius: var(--radio-2);
  background: var(--carbon);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--trans-suave), transform var(--trans-suave);
}

/* El canto va por dentro y no como `border`: un borde real deja ver la
   esquina de la foto contra el radio y se lee sucio. */
.tarjeta__marco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--filete);
  pointer-events: none;
  transition: box-shadow var(--trans-suave);
}

.tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-lenta);
}

.tarjeta__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--velo-foto);
  pointer-events: none;
  transition: background var(--trans-suave);
}

/* Marcador para los 5 perfiles sin ninguna foto: inicial en serif sobre
   superficie con volumen. Parte del diseño, no un parche, y sin
   petición de red. */
.tarjeta__foto--vacia {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--sup-1);
}
.tarjeta__foto--vacia span {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 1;
  color: var(--humo-tenue);
}

.senales {
  position: absolute;
  z-index: 2;
  top: var(--e-3);
  inset-inline: var(--e-3);
  display: flex;
  align-items: start;
  gap: var(--e-2);
}
.senales .senal--fotos { margin-left: auto; }

.tarjeta__pie {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: var(--e-5) var(--e-4) var(--e-4);
}

.tarjeta__nombre {
  font-family: var(--serif);
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-normal);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
  color: var(--hueso);
}

/* Filete de oro que crece bajo el nombre al pasar el cursor. Es el
   gesto que hace que la tarjeta se sienta viva sin mover nada de sitio. */
.tarjeta__nombre::after {
  content: "";
  display: block;
  width: var(--e-8);
  height: var(--grosor-foco);
  margin-top: var(--e-2);
  border-radius: var(--radio-pastilla);
  background: var(--oro-linea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-suave);
}

.tarjeta__meta {
  margin-top: var(--e-2);
  color: var(--texto-2);
  font-size: var(--t-meta);
}

/* Tarifa: filete arriba y cifra tabular. Es el dato más consultado del
   listado y se trata como dato, no como etiqueta de precio. */
.tarjeta__desde {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: var(--grosor-filete) solid var(--filete-vivo);
}
.tarjeta__desde-rotulo {
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.tarjeta__desde-cifra {
  color: var(--hueso);
  font-size: var(--t-dato);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}


/* ── Estados de la tarjeta ─────────────────────────────────────────
   Se levanta, la foto se acerca, el velo se cierra para que el nombre
   gane contraste, y aparece el filete de oro.                        */

.tarjeta__enlace:hover .tarjeta__marco {
  transform: translateY(calc(var(--alza-3) * -1));
  box-shadow: var(--sombra-3);
}
.tarjeta__enlace:hover .tarjeta__marco::before {
  box-shadow: inset 0 0 0 1px var(--filete-vivo);
}
.tarjeta__enlace:hover .tarjeta__foto { transform: scale(var(--zoom-foto)); }
.tarjeta__enlace:hover .tarjeta__velo { background: var(--velo-foto-hover); }
.tarjeta__enlace:hover .tarjeta__nombre::after { transform: scaleX(1); }

.tarjeta__enlace:active .tarjeta__marco { transform: none; }

.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta__enlace:focus-visible .tarjeta__marco { box-shadow: var(--halo-lapis); }
.tarjeta__enlace:focus-visible .tarjeta__marco::before {
  box-shadow: inset 0 0 0 var(--grosor-foco) var(--lapis);
}


/* ── PREMIUM ──────────────────────────────────────────────────────────
   Doble de celda, proporción más abierta, nombre más grande y filete de
   oro. El oro va en el canto por dentro, nunca como relleno.          */

/* Ocupa dos columnas Y dos filas. Sin el `span 2` vertical, la celda
   doble estira la fila entera y las tarjetas normales que la acompañan
   quedan flotando arriba con medio contenedor vacío debajo — que es
   exactamente lo que pasaba.

   La proporción cuadra sola: dos columnas de --col-tarjeta más el hueco
   miden lo mismo que dos filas de una tarjeta 3/4 más el hueco. Por eso
   acá se suelta el aspect-ratio y se estira a la altura de la celda. */
@media (min-width: 520px) {
  .grilla__celda--destacada {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grilla__celda--destacada .tarjeta,
  .grilla__celda--destacada .tarjeta__enlace,
  .grilla__celda--destacada .tarjeta__marco { height: 100%; }
  .grilla__celda--destacada .tarjeta__marco { aspect-ratio: auto; }
  .grilla__celda--destacada .tarjeta__nombre { font-size: var(--t-tarjeta-destacada); }
  .grilla__celda--destacada .tarjeta__pie { padding: var(--e-8) var(--e-6) var(--e-6); }
}

/* En una grilla donde TODAS son PREMIUM —la sección Destacadas de la
   portada— el tamaño doble no codifica nada: si todas son grandes,
   ninguna destaca. Ahí la celda vuelve a tamaño normal. */
.grilla--uniforme .grilla__celda--destacada {
  grid-column: auto;
  grid-row: auto;
}
.grilla--uniforme .grilla__celda--destacada .tarjeta__marco {
  aspect-ratio: var(--ratio-retrato);
  height: auto;
}

.grilla__celda--destacada .tarjeta__marco { box-shadow: var(--sombra-2); }
.grilla__celda--destacada .tarjeta__marco::before {
  box-shadow: inset 0 0 0 1px var(--filete-oro);
}
.grilla__celda--destacada .tarjeta__enlace:hover .tarjeta__marco {
  box-shadow: var(--halo-oro), var(--sombra-3);
}
.grilla__celda--destacada .tarjeta__enlace:hover .tarjeta__marco::before {
  box-shadow: inset 0 0 0 1px var(--oro);
}
/* En PREMIUM el filete bajo el nombre ya viene puesto: el beneficio se
   ve sin necesidad de pasar el cursor. */
.grilla__celda--destacada .tarjeta__nombre::after { transform: scaleX(1); }


/* ── Cierre de la portada ─────────────────────────────────────────── */

.ver-todos {
  display: flex;
  justify-content: center;
  margin-top: var(--aire-corto);
}


/* ── Paginador ────────────────────────────────────────────────────────
   Mismo criterio que las casillas del buscador: la página actual no se
   rellena de color, se enciende con filete y velo de lapislázuli. El oro
   queda donde significa algo —beneficio pagado y verificación— y un
   número dorado que solo dice "estás acá" se lo robaría.               */

.paginacion {
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  margin-top: var(--aire-corto);
  padding-top: var(--e-6);
  border-top: var(--borde);
}

/* «41–80 de 137». Va arriba y no escondido en un costado: sin esto, la
   única forma de saber cuánto falta es contar los números. */
.paginacion__rango { color: var(--texto-2); }

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

.paginacion__numero,
.paginacion__paso {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;   /* objetivo táctil: WCAG AA pide 24px, esto da 40 */
  padding: var(--e-2) var(--e-3);
  border: var(--borde-vivo);
  border-radius: var(--radio);
  color: var(--texto-2);
  font-size: var(--t-menor);
  font-variant-numeric: tabular-nums;
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              background-color var(--trans-rapida);
}

.paginacion__paso {
  gap: var(--e-2);
  grid-auto-flow: column;
  padding-inline: var(--e-4);
}

.paginacion__numero:hover,
.paginacion__paso:hover {
  color: var(--hueso);
  border-color: var(--filete-vivo);
  background: var(--sup-2);
}

.paginacion__numero:focus-visible,
.paginacion__paso:focus-visible {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
}

.paginacion__numero--actual {
  border-color: var(--lapis);
  background: var(--lapis-velo);
  color: var(--hueso);
  cursor: default;
}

/* El paso que no lleva a ninguna parte se queda en su lugar apagado: si
   apareciera y desapareciera, los números se correrían en cada página. */
.paginacion__paso--muerto {
  opacity: .35;
  cursor: default;
}

.paginacion__salto {
  display: inline-block;
  min-width: 1.5rem;
  color: var(--humo);
  text-align: center;
}

/* En teléfono los pasos se llevan la fila entera y los números quedan
   debajo: «‹ Anterior 1 2 3 Siguiente ›» en 360 px deja cada objetivo
   por debajo del ancho del pulgar. */
@media (max-width: 480px) {
  .paginacion__numero,
  .paginacion__paso { min-width: 2.75rem; }
  .paginacion__paso { padding-inline: var(--e-3); }
}


/* ── Por comuna ────────────────────────────────────────────────────
   Los enlaces a las landings geográficas, al pie del listado.

   Van como pastillas y no como párrafo de enlaces: son navegación, no
   prosa, y una tira de pastillas se barre con la vista buscando la
   comuna propia — que es exactamente lo que hace quien llega acá.

   El número al lado no es decoración: dice cuánto hay antes de hacer
   clic, igual que las opciones del buscador. Un enlace a una comuna con
   uno solo se lee distinto que a una con doce.                       */

.por-lugar {
  margin-top: var(--aire);
  padding-top: var(--e-8);
  border-top: var(--borde);
}

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

.por-lugar__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.por-lugar__lista a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio-pastilla);
  background: var(--sup-1);
  box-shadow: inset 0 0 0 1px var(--filete);
  color: var(--texto-2);
  font-size: var(--t-menor);
  text-decoration: none;
  transition: color var(--trans-rapida), box-shadow var(--trans-rapida),
              background var(--trans-rapida);
}
.por-lugar__lista a:hover {
  background: var(--carbon-2);
  box-shadow: inset 0 0 0 1px var(--filete-vivo);
  color: var(--hueso);
}
/* En un teléfono no hay hover: lo tocable se hunde, como el resto. */
.por-lugar__lista a:active { transform: scale(.985); }

.por-lugar__n {
  color: var(--humo);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}


/* Texto propio de la categoría, bajo el encabezado. Ancho de lectura
   acotado —es prosa, no grilla— y con el mismo tratamiento que .prosa,
   que es lo que ya usan las páginas de texto del sitio. */
.encabezado__intro {
  max-width: var(--ancho-texto);
  margin-top: var(--e-5);
  color: var(--texto-2);
  font-size: var(--t-menor);
  line-height: var(--alto-cuerpo);
}
.encabezado__intro strong { color: var(--hueso); font-weight: var(--peso-medio); }
.encabezado__intro em { color: var(--texto-2); font-style: italic; }
.encabezado__intro a {
  color: var(--lapis);
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.encabezado__intro a:hover { color: var(--hueso); }


/* ── Las cifras del directorio, en cian ─────────────────────────────────
   «Datos duros en cian» es de la revisión del 15/08/2026, y hasta el 29/08
   se cumplía en UN solo sitio: `.dato-celda` de la ficha. Las cifras de la
   portada y las de los once listados iban en `--hueso`, o sea fuera del
   sistema — el mismo desajuste que tenía el titular.

   Es coherencia, no una idea nueva: el tratamiento es el de `.dato-celda dd`,
   incluido `--neon-brillo-cifra`, que existía desde el 15/08 y sólo usaba esa
   regla.

   LA ETIQUETA SE QUEDA EN `--humo` Y NO PASA A ROSA, aunque `.dato-celda dt`
   sí lo haga. Se probó en pantalla: con las dos en color el rótulo grita tanto
   como el número y se pierde la jerarquía del par. En la ficha funciona porque
   va dentro de una celda con fondo y halo propios que la contienen; suelta
   sobre el fondo, compite — y ese rosa ya lo usa el titular.

   VA AL FINAL DE ESTE ARCHIVO Y NO EN LA SECCIÓN NEÓN DE base.css, y eso NO
   es una preferencia: `base.css` se carga ANTES que los CSS de página
   (`{% block css %}` va después), así que una regla suya con la misma
   especificidad que `.encabezado__cifra` pierde siempre. Se escribió primero
   ahí y la cifra siguió saliendo en hueso, sin ningún error. Es el mismo
   motivo por el que `perfil.css` tiene su propia sección neón al final.

   Medido sobre el fondo real (#0D0D0D): --neon-cian #DFAC6E, 9.50:1. El
   contraste más alto de la paleta lo tiene --neon-rosa. */
.encabezado__cifra {
  color: var(--neon-cian);
  text-shadow: var(--neon-brillo-cifra);
}


/* ── El buscador deja de parecer un formulario del sistema ──────────────
   Rehecho el 29/08/2026. Lo que lo delataba no era el color: eran los
   `<select>` NATIVOS. Traen la flecha del sistema operativo, se ven
   distintos en cada plataforma y **no obedecen al alto** — medido, el
   select daba 47 px contra 50,75 del input de al lado. Cuatro píxeles de
   desajuste en una fila de controles es exactamente lo que se lee como
   «formulario sin diseñar».

   Se eligió mirando cuatro niveles en pantalla sobre la portada real.

   LA FLECHA SE DIBUJA CON BORDES, NO CON UN SVG, y eso es una decisión de
   sistema: un SVG en data-URI lleva el color codificado dentro, así que
   quedaría fuera de `tokens.css` y no cambiaría con la dirección visual.
   Un pseudo-elemento con `border` hereda del token y responde al hover y
   al foco.                                                              */

/* `appearance: none` APAGA la flecha nativa. Si `:has()` no estuviera
   disponible, el pseudo-elemento que dibuja la nuestra tampoco lo estaría
   y el desplegable se quedaría SIN NINGÚN indicador de que se abre. Por eso
   las dos cosas van juntas bajo el mismo @supports: o hay flecha propia, o
   se conserva la del sistema. */
@supports selector(:has(*)) {
  .buscador-rapido select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--e-10);
  }
  .buscador-rapido__campo { position: relative; }
  .buscador-rapido__campo:has(select)::after {
    content: "";
    position: absolute;
    right: var(--e-4);
    bottom: 1.3rem;
    width: .45rem;
    height: .45rem;
    pointer-events: none;
    border-right: 2px solid var(--humo);
    border-bottom: 2px solid var(--humo);
    transform: rotate(45deg);
    transition: border-color var(--trans-rapida);
  }
  .buscador-rapido__campo:has(select:hover)::after,
  .buscador-rapido__campo:has(select:focus-visible)::after {
    border-color: var(--neon-magenta);
  }
}

/* Las dos alturas, iguales y declaradas: es lo que el select nativo no
   respetaba. */
.buscador-rapido select,
.buscador-rapido input[type="search"] {
  height: 3rem;
  padding-block: 0;
}

/* De cuatro cajas a una barra.
   Sólo desde 860 px: por debajo los campos se apilan, y apilados cada uno
   necesita su propio borde para leerse como control separado. En un
   teléfono una barra horizontal con filetes internos no existe. */
@media (min-width: 860px) {
  .buscador-rapido__fila {
    gap: 0;
    align-items: stretch;
    /* --e-2 y no --e-1: con .25rem el botón queda a cuatro píxeles del filete
       y se lee como si se saliera de la barra. El aire de un contenedor tiene
       que ser mayor que el radio de lo que contiene. */
    padding: var(--e-2);
    border: var(--borde-vivo);
    border-radius: var(--radio-2);
    background: var(--tinta-0);
  }

  /* El campo pasa a ser una celda de la barra: el rótulo y el valor van
     juntos, y el filete de la izquierda es lo único que los separa. */
  .buscador-rapido__campo {
    gap: 0;
    padding: var(--e-3) var(--e-4);
  }
  .buscador-rapido__campo + .buscador-rapido__campo {
    border-left: var(--borde);
  }

  /* Los controles pierden su caja: la caja ahora es la barra. */
  .buscador-rapido select,
  .buscador-rapido input[type="search"] {
    height: 1.6rem;
    padding-inline: 0;
    border: 0;
    background: transparent;
    font-size: var(--t-dato);
  }
  .buscador-rapido select:hover,
  .buscador-rapido input[type="search"]:hover { border-color: transparent; }

  /* El foco ilumina LA CELDA, no el control: sin caja propia, un halo sobre
     el control no se ve. Sigue siendo `:focus-visible` quien lo dispara —
     `:focus-within` se encendería también con el ratón. */
  .buscador-rapido select:focus-visible,
  .buscador-rapido input[type="search"]:focus-visible {
    box-shadow: none;
    border-color: transparent;
  }
  /* EL FILETE DEL FOCO VA OPACO, y esto se corrigió midiendo: `--neon-filete`
     es `rgba(241,196,15,.35)`, y compuesto sobre el fondo de la barra da
     rgb(93,77,14) — **2.34:1**, cuando WCAG 2.2 SC
     1.4.11 pide 3:1 para un
     indicador no textual. Se veía bien en la captura y no cumplía: un color
     con alfa no se juzga por el token, se juzga por la mezcla.

     `--neon-magenta` opaco, y 2 px en vez de 1: el indicador de foco es lo
     que usa quien navega con teclado para saber dónde está. */
  .buscador-rapido__campo:has(:focus-visible) {
    border-radius: var(--radio);
    background: var(--sup-1);
    box-shadow: inset 0 0 0 2px var(--neon-magenta);
  }

  .buscador-rapido__campo:has(select)::after { bottom: 1rem; }

  .buscador-rapido__enviar {
    align-self: center;
    margin-left: var(--e-2);
  }
}

/* El desplegable ABIERTO lo dibuja el navegador, no nosotros: `color-scheme`
   en tokens.css es lo que lo pone en oscuro. Estas dos reglas son el cinturón
   —Firefox y Chrome en Linux sí las respetan— para que la lista no dependa de
   una sola cosa. El `<optgroup>` de las comunas lleva su propio color porque
   hereda del `<select>` y no del `<option>`. */
.buscador-rapido select option {
  background: var(--tinta-0);
  color: var(--hueso);
}
.buscador-rapido select optgroup {
  background: var(--tinta-0);
  color: var(--humo);
  font-style: normal;
}


/* ── Las marcas encendidas ──────────────────────────────────────────────
   «Si se seleccionan no quedan en ningún color, solo un check», y era
   cierto: el estado marcado existía desde siempre pero pintaba con
   `--lapis` y `--lapis-velo`, o sea el acento de interacción del sistema
   de TINTA — el anterior a la dirección neón del 15/08/2026. Sobre el
   fondo casi negro, ese azul apagado no se ve.

   Es el mismo desajuste que tenían el titular, las cifras y el foco del
   buscador: piezas que se quedaron en el sistema viejo cuando cambió la
   dirección.

   SIGUE SIN RELLENARSE DE COLOR, y eso es de la nota original: la marca
   se enciende con velo y filete, no con relleno. El relleno con degradado
   es del botón que ejecuta la búsqueda, y dos cosas rellenas en la misma
   barra compiten por decir cuál es la acción. Una condición activa no es
   una acción.

   El filete va OPACO: `--neon-filete` tiene alfa .35 y compuesto no llega
   a 3:1, que es lo que WCAG 2.2 SC 1.4.11 pide para un indicador no
   textual. Es exactamente el fallo que ya apareció en el foco. */
.marca__casilla:checked + .marca {
  border-color: var(--neon-magenta);
  background: var(--neon-velo);
  color: var(--hueso);
  box-shadow: var(--neon-halo-pastilla);
}
.marca__casilla:checked + .marca .marca__tilde { color: var(--neon-magenta); }

/* El foco de la casilla también estaba en lápiz. Va sobre el `<label>`,
   que es el objetivo real: el `<input>` está visualmente oculto. */
.marca__casilla:focus-visible + .marca {
  outline: 2px solid var(--neon-magenta);
  outline-offset: 2px;
}


/* ── El pie de la tarjeta entra a la dirección neón ─────────────────────
   30/08/2026. La sexta pieza que se había quedado en el sistema de TINTA,
   después del titular, las cifras, el foco y las marcas del buscador y
   «Búsqueda avanzada». Victor lo describió como «letras demasiado
   básicas», que es como se ve una pieza que nombra tokens de la dirección
   anterior: no da ningún error, sólo desentona.

   Lo que estaba pasando, y ninguno de los tres es una idea nueva:

   1. El nombre iba en `--hueso` plano, mientras `.ficha__nombre` tiene
      `--neon-brillo-nombre` desde el 15/08. El token existía, con un
      comentario que explica por qué se permite brillo sobre un nombre, y
      lo usaba UNA sola regla en todo el sitio.
   2. La comuna y la edad eran un párrafo gris de 13 px sin ningún
      tratamiento — dos líneas más abajo, en la misma tarjeta, el rótulo
      DESDE sí tiene versalitas y tracking. Dos idiomas tipográficos en la
      misma pieza, y el peor le tocaba al dato de la persona.
   3. La edad iba en el mismo gris que la comuna, pegada con un punto. El
      sistema dice «datos duros en cian» y la ficha ya lo cumple en
      `.dato-celda`: rótulo rosa, valor cian. Son un lugar y una cifra.

   VA AL FINAL DE ESTE ARCHIVO por el mismo motivo que las cifras de
   arriba: `base.css` carga antes que los CSS de página y perdería.

   LA PASTILLA ES LA VARIANTE QUE ELIGIÓ VICTOR, sobre las tarjetas reales
   y contra otras dos. Se le advirtió lo que cuesta —arriba de la foto ya
   hay pastillas de señal, y el principio dice que la fotografía manda— y
   la reafirmó. La convivencia se resolvió por peso, no quitando ninguna:
   las señales van rellenas y opacas, éstas son velo con filete, así que se
   leen como dos capas distintas y no como seis pastillas iguales. */

.tarjeta__nombre {
  line-height: 1;
  letter-spacing: var(--track-display);
  text-shadow: var(--neon-brillo-nombre);
}

/* La meta deja de ser un párrafo y pasa a ser una fila de datos. `wrap`
   no es decorativo: «Pedro Aguirre Cerda» más la edad no caben en una
   tarjeta de 232 px, y sin esto la segunda pastilla se sale del pie. */
.tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

/* El relleno va en `em` y no en la escala de espaciado: la pastilla tiene
   que crecer con su texto, y este texto es el único del sitio a
   `--t-etiqueta` dentro de una caja propia. */
.tarjeta__comuna,
.tarjeta__edad {
  padding: .3em .7em;
  border-radius: var(--radio-pastilla);
}
.tarjeta__comuna {
  color: var(--neon-rosa);
  background: var(--neon-velo);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--neon-filete);
}
.tarjeta__edad {
  color: var(--neon-cian);
  background: var(--neon-velo-cian);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--neon-filete-cian);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ── El buscador de la PORTADA en el teléfono ──────────────────────────
   30/08/2026. Victor: «la barra de búsqueda sigue siendo pobre… ¿hay
   forma de que no ocupe tanto espacio en responsive y que no haya que
   hacer tanto scroll para llegar a los perfiles?».

   MEDIDO ANTES DE TOCAR NADA, que es lo que decidió el resto: el
   formulario ocupaba 532 px en una pantalla de 390 —el 51 % del hero— y
   había que bajar 1,47 pantallas hasta el primer perfil. A 320 px, 2,56.

   Lo primero que se intentó fue poner los dos desplegables lado a lado, y
   ESO YA ESTABA DECIDIDO AL REVÉS: la media query de 560 px los apila con
   su motivo escrito —«dos desplegables lado a lado en 360 px dejan cada
   uno con seis caracteres visibles»—. Se retiró el intento. Una decisión
   vieja con su porqué anotado vale más que una corazonada nueva.

   Lo que sí sobra en la PORTADA, y sólo ahí:

   · El desplegable de CATEGORÍA repite la navegación de la cabecera, que
     en el teléfono está a dos dedos de distancia.
   · Las tres marcas y el de comuna son refinamiento, y su destino natural
     —la búsqueda completa— ya está enlazado ahí mismo.

   Así que en el teléfono la portada deja la barra y el enlace. No es
   esconder función: es que la portada ofrece el atajo y
   `/busqueda-de-escorts-en-chile/` ofrece el detalle, con los mismos
   controles y sin recortar. En la propia página de búsqueda no se aplica
   nada de esto — el macro sólo lo recibe desde la portada.

   Va con `display: none` y no con una clase de ocultar visual: un control
   que no se ve pero se anuncia a un lector de pantalla es peor que no
   tenerlo. */

@media (max-width: 560px) {
  .buscador-rapido--compacto .buscador-rapido__fila:not(.buscador-rapido__fila--marcas),
  .buscador-rapido--compacto .marcas {
    display: none;
  }
  /* Sin las marcas, la fila de abajo es sólo el enlace: pierde el filete
     que la separaba de ellas y se centra bajo la barra. */
  .buscador-rapido--compacto .buscador-rapido__fila--marcas {
    justify-content: center;
    padding-top: 0;
    border-top: 0;
  }
}


/* ── La barra de búsqueda ──────────────────────────────────────────────
   30/08/2026. Victor: «en escritorio el botón buscar aparece demasiado
   grande y no se nota dónde insertar el texto».

   LOS DOS DEFECTOS LOS INTRODUJE YO ESE MISMO DÍA, al sacar el campo de
   `.buscador-rapido__fila` para hacer la barra:

   1. Al botón le puse `flex: 1 0 auto` para que llenara la línea cuando la
      barra envuelve a 320 px — y `flex-grow: 1` también aplica cuando NO
      envuelve. Medido: el botón se llevaba el 46 % de la barra a 1440 px,
      o sea 542 px de ancho para la palabra «Buscar».
   2. Desde 860 px hay una regla que le quita la caja a los controles
      porque «la caja ahora es la barra» — pero esa barra era
      `.buscador-rapido__fila`, y el campo se había mudado a una barra
      nueva que no tenía ninguna caja. Resultado: el campo de texto se
      dibujaba sin borde ni fondo, como un título flotando, mientras los
      dos desplegables de abajo sí tenían la suya. De ahí «no se nota
      dónde insertar el texto».

   Ahora la barra ES una caja en todos los anchos, con el campo dentro sin
   caja propia y el botón pegado a la derecha. Va AL FINAL DEL ARCHIVO
   porque la sección de 860 px tiene la misma especificidad sobre el
   `input` y ganaría por orden: es la trampa que este proyecto lleva
   documentada tres veces. */

.buscador-rapido__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border: var(--grosor-filete) solid var(--neon-filete);
  border-radius: var(--radio-2);
  background: var(--neon-fondo);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.buscador-rapido__barra:hover { border-color: var(--neon-relleno); }

/* El foco ilumina LA BARRA y no el campo: el campo ya no tiene caja propia,
   así que un halo sobre él no se vería. Filete OPACO, por lo mismo que el de
   los desplegables: `--neon-filete` compuesto da 1.60:1 y SC 1.4.11 pide 3:1
   para un indicador no textual.

   VA DENTRO DE `@supports`, y el campo conserva su propio `outline` fuera de
   él. Sin esa red, en un navegador sin `:has()` no habría NINGÚN indicador de
   foco en el buscador — que es el control por el que entra media visita al
   sitio. Es el mismo cuidado que la flecha de los `<select>`: apagar el
   indicador nativo sin poder dibujar el propio deja el control mudo. */
@supports selector(:has(*)) {
  .buscador-rapido__barra:has(input:focus-visible) {
    border-color: var(--neon-magenta);
    box-shadow: var(--neon-halo-pastilla);
  }
  .buscador-rapido__barra:has(input:focus-visible) .buscador-rapido__lupa {
    color: var(--neon-magenta);
  }
  .buscador-rapido .buscador-rapido__barra input[type="search"]:focus-visible {
    outline: none;
  }
}

.buscador-rapido__lupa {
  flex: none;
  margin-left: var(--e-3);
  color: var(--humo);
  transition: color var(--trans-rapida);
}
/* `8rem` de base, MEDIDO y no elegido: con 11rem la barra envolvía a 390 px
   —la lupa, el campo y el botón sumaban 312 sobre 294 disponibles— y el
   botón se iba a una segunda línea que no hacía falta. Con 8rem entra todo
   en una línea desde 380 px, y por debajo envuelve, que ahí sí conviene.

   EL CUERPO SE QUEDA EN `--t-menor` HASTA 860 px, que es lo que hacía el CSS
   original y yo había roto subiéndolo siempre: a 17 px el marcador de
   posición pide 159 px y en un teléfono no caben. Desde 860 hay sitio de
   sobra y sube, que es donde el campo se lee como la pieza principal. */
.buscador-rapido .buscador-rapido__barra input[type="search"] {
  flex: 1 1 8rem;
  min-width: 0;
  height: 2.75rem;
  padding-inline: var(--e-2);
  border: 0;
  background: transparent;
  font-size: var(--t-menor);
}
@media (min-width: 860px) {
  .buscador-rapido .buscador-rapido__barra input[type="search"] {
    font-size: var(--t-dato);
  }
}
.buscador-rapido .buscador-rapido__barra input[type="search"]:hover {
  border: 0;
  box-shadow: none;
}
/* El respaldo: sin `:has()` el campo se marca a sí mismo. */
.buscador-rapido .buscador-rapido__barra input[type="search"]:focus-visible {
  border: 0;
  box-shadow: none;
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: calc(var(--sep-foco) * -1);
}

/* `0 0 auto`: el botón mide lo que mide su texto. Sólo crece cuando la
   barra envuelve, que es el único caso en que tiene una línea para él. */
.buscador-rapido__barra .buscador-rapido__enviar {
  flex: 0 0 auto;
  height: 2.75rem;
}
/* 22rem = 352 px, y el corte está MEDIDO: por encima, la lupa (29), el campo
   (128 de base) y el botón (91) más sus dos huecos suman 264 sobre los 304
   que hay a 360 px, así que entran en una línea. Por debajo no, y ahí el
   botón toma la suya para que el campo conserve el ancho que su marcador de
   posición necesita —133 px más el relleno—. */
@media (max-width: 22rem) {
  .buscador-rapido__barra .buscador-rapido__enviar { flex: 1 0 auto; }
}


/* ── La brasa de la celda PREMIUM ──────────────────────────────────────
   30/08/2026. Victor la eligió entre tres variantes vistas EN MOVIMIENTO:
   un resplandor fijo, éste que respira, y una luz recorriendo el borde.
   Una captura no distingue las tres — hubo que mirarlas moverse.

   SE MUEVE, Y ESO REVISA UNA REGLA ESCRITA. El sistema decía que no se
   hace «animación ambiental» para que la fotografía siga siendo lo único
   que llama la atención. Ésta es la variante que menos la contradice: no
   hay nada que recorra ni que salte, sólo un resplandor que sube y baja
   sobre el borde de la única celda que pagó por destacar. La opción que
   sí la rompía —la luz girando— se descartó por eso.

   VA EN UN PSEUDO-ELEMENTO CON `opacity`, no en el `box-shadow` del marco,
   y es la diferencia entre esto y el prototipo. Dos motivos:

     · `box-shadow` animado obliga al navegador a repintar en cada
       fotograma; `opacity` la compone la GPU y no repinta nada.
     · el `box-shadow` del marco YA lo cambia el hover. Animarlo habría
       hecho que pasar el cursor peleara con el ciclo.

   NO SE APLICA EN `.grilla--uniforme` —la sección PREMIUM de la portada—
   por lo mismo que ahí la celda no es doble: si todas laten, ninguna
   destaca. */

.grilla__celda--destacada {
  position: relative;
  border-radius: var(--radio-2);
}
.grilla__celda--destacada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--brasa-alta);
  opacity: .45;
  pointer-events: none;
  animation: brasa-premium var(--brasa-ciclo) ease-in-out infinite;
}
@keyframes brasa-premium {
  0%, 100% { opacity: .30; }
  50%      { opacity: 1; }
}
.grilla--uniforme .grilla__celda--destacada::after { content: none; }

/* Quieta pero encendida: quien pidió menos movimiento no pierde la señal
   de que ese perfil pagó, sólo el latido. */
@media (prefers-reduced-motion: reduce) {
  .grilla__celda--destacada::after {
    animation: none;
    opacity: .55;
  }
}