/* ═══════════════════════════════════════════════════════════════════
   zensual — portada.

   Una portada que es la misma grilla que /todas-las-escorts-chile/
   desperdicia la URL más fuerte del dominio. Acá hay composición:
   entrada, destacadas, categorías, novedades, geografía y alta.
   ═══════════════════════════════════════════════════════════════════ */

/* .visualmente-oculto se mudó a base.css: la usan páginas que no cargan
   este archivo. */


/* ── Entrada ──────────────────────────────────────────────────────
   Compacta a propósito. Una portada cuyo primer pantallazo es solo un
   titular y un buscador se siente vacía: el carrusel de destacadas
   tiene que asomar antes del pliegue para que se vea que hay
   contenido.                                                        */

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

.hero__rotulo { margin-bottom: var(--e-4); }

/* En pantalla ancha el titular deja medio lienzo vacío a la derecha. Las
   cifras se mudan ahí, alineadas por la base con la bajada, y el buscador
   cruza el ancho completo debajo.

   El buscador ya no cabe en media columna: dejó de ser un campo con un
   botón y pasó a ser el panel de filtros que el tema viejo tenía en la
   barra derecha. Y sacar las cifras de su propia fila le quita una franja
   entera de alto a la entrada, que es lo que hace que el carrusel asome
   antes del pliegue en un portátil de 768 px. */
@media (min-width: 1080px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "rotulo   cifras"
      "titulo   cifras"
      "bajada   cifras"
      "alta     cifras"
      "buscador buscador";
    column-gap: var(--e-16);
    align-items: end;
  }
  .hero__rotulo   { grid-area: rotulo; }
  .hero__titulo   { grid-area: titulo; }
  .hero__bajada   { grid-area: bajada; margin-bottom: var(--e-2); }
  /* SIN ÁREA NO HAY LÍNEA: en un grid con `grid-template-areas`, un hijo sin
     área se coloca solo en la primera celda libre y desarma la composición.
     Es lo primero que rompe al agregarle un elemento a este bloque. */
  .hero__alta     { grid-area: alta; }
  .hero__buscador { grid-area: buscador; margin-top: var(--e-6); }
  .hero__cifras {
    grid-area: cifras;
    align-self: end;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    /* En columna las cifras se apilan; el filete pasa a ser vertical y
       hace de canto entre las dos mitades de la entrada. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-6);
    padding-left: var(--e-8);
    border-left: var(--grosor-filete) solid var(--neon-filete);
  }
}

.hero__titulo {
  /* 20ch y no 16: con el titular más grande del 29/08/2026 la segunda línea
     —«en Santiago y regiones»— necesita 646 px MEDIDOS a 96 px de cuerpo, y
     16ch se quedaba justo. La medida sale del texto, no de un número redondo:
     si cambia el título de la portada, hay que volver a medirlo. */
  max-width: 20ch;
  font-size: var(--t-hero);
  letter-spacing: var(--track-hero);
}

.hero__bajada {
  max-width: 46ch;
  margin-top: var(--e-5);
  color: var(--texto-2);
  font-size: var(--t-dato);
  line-height: var(--alto-medio);
}

/* Buscador de entrada. Solo posiciona al panel: el panel en sí vive en
   listado.css porque la página de búsqueda usa el mismo componente. */
.hero__buscador { margin-top: var(--e-8); }

/* Cifras del directorio. Separadas por filete vertical, en serif: son
   el argumento de que el sitio tiene contenido real. */
/* EN EL TELÉFONO VAN EN TRES COLUMNAS Y NO APILADAS. Con `flex-wrap` cada
   par ocupaba su fila —los rótulos son largos— y las tres cifras sumaban
   259 px a 320 px, que tras compactar el buscador pasaron a ser el bloque
   más grande entre la cabecera y el primer perfil.

   EL CUERPO DE LA CIFRA NO SE TOCA. Se subió el 29/08/2026 con motivo
   escrito —«son el argumento de que el sitio tiene contenido real», y a
   `--t-seccion` ese argumento se decía en voz baja— así que lo que cambia
   es la disposición, no la escala. Comprimir la cifra habría deshecho una
   decisión de hace un día para ganar el mismo espacio.

   `minmax(0, 1fr)` y no `1fr`: una celda de grid trae `min-width: auto` y
   «Regiones con perfiles» ensancharía la fila. Es la misma trampa que
   costó la ficha de 1.780 px el 15/08. */
.hero__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: var(--grosor-filete) solid var(--neon-filete);
}
/* ── La línea para quien viene a publicar ──────────────────────────────
   02/09/2026. UNA LÍNEA, no un bloque: el hero se compactó el 30/08 porque
   ocupaba el 51 % de una pantalla de 390, y esto no puede deshacer aquello.

   `flex-wrap` para que en un teléfono la pregunta y el enlace caigan en dos
   líneas en vez de estrujarse. El enlace va en CIAN y no en magenta: el
   magenta es del botón «Buscar», que está tres dedos más arriba, y dos
   llamadas del mismo color en la misma pantalla compiten. */
.hero__alta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-2);
  margin-top: var(--e-5);
  font-size: var(--t-menor);
}
.hero__alta-pregunta { color: var(--humo); }
.hero__alta-enlace {
  color: var(--neon-cian);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--neon-filete-cian);
}
.hero__alta-enlace:hover { text-decoration-color: currentColor; }
/* La flecha va en el CSS y no en la plantilla: es ornamento y no contenido,
   así que no tiene por qué leerla un lector de pantalla. */
.hero__alta-enlace::after { content: " \2192"; }

.hero__cifras div { display: grid; gap: var(--e-1); }
.hero__cifras dt {
  order: 2;
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.hero__cifras dd {
  order: 1;
  font-family: var(--serif);
  font-size: var(--t-cifra);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}


/* ── Secciones ────────────────────────────────────────────────────── */

.seccion { padding-block: var(--aire-corto); }


/* ── Categorías ───────────────────────────────────────────────────── */

/* ── Categorías ────────────────────────────────────────────────────────
   Rehechas el 30/08/2026. Victor: «el apartado de categorías también luce
   muy básico». Décima pieza en el sistema de TINTA: `--sup-1` con filete
   blanco y el conteo en `--humo`, justo debajo de unas tarjetas y una
   pieza de venta que son neón desde hace horas.

   Tres cosas, y sólo la primera es de color:

   1. La superficie pasa a neón, como el resto de la portada.
   2. EL CONTEO VA EN CIAN. Son literalmente datos duros —cuántos perfiles
      publicados hay en cada categoría— y «datos duros en cian» está escrito
      desde el 15/08. Es el mismo tratamiento de `.dato-celda` y de las
      cifras del directorio.
   3. EL ORO SALE DE ACÁ. El barrido `--oro-suave` del hover y el
      `--filete-oro` eran decoración: en este sistema el oro significa
      BENEFICIO PAGADO —principio 3, lo único que sobrevivió entero a la
      revisión de neón— y gastarlo en la navegación por género le quita
      significado justo donde sí lo tiene, que es la celda PREMIUM y el
      sello de verificada. El gesto de luz se conserva; cambia de color.

   La cifra ahora lleva su rótulo («4 perfiles»), porque un número suelto
   en una caja junto a un nombre no dice de qué es. */

.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--e-3);
}

.categoria {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-6);
  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);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--trans-media), box-shadow var(--trans-media);
}

/* Barrido de luz de izquierda a derecha al pasar el cursor. Sin
   translación de la caja: el gesto es la luz, no el salto. */
.categoria::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--neon-velo) 55%, transparent 85%);
  opacity: 0;
  transition: opacity var(--trans-suave);
}
.categoria:hover {
  transform: translateY(calc(var(--alza-2) * -1));
  box-shadow: var(--neon-halo-boton), inset 0 0 0 1px var(--neon-relleno);
  text-decoration: none;
}
.categoria:hover::before { opacity: 1; }
.categoria:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.categoria:active { transform: scale(.99); }

.categoria__nombre {
  position: relative;
  color: var(--hueso);
  font-family: var(--serif);
  font-size: var(--t-tarjeta);
  letter-spacing: var(--track-titulo);
}

.categoria__n {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  color: var(--neon-cian);
  font-family: var(--serif);
  font-size: var(--t-dato);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--neon-brillo-cifra);
  white-space: nowrap;
}
/* El rótulo es contexto, no dato: no compite con la cifra. */
.categoria__rotulo {
  color: var(--humo);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  text-shadow: none;
}

/* Sin perfiles publicados. Se apaga entera —cifra incluida— para que se
   distinga de un vistazo de las que sí tienen, sin dejar de ser un enlace
   navegable: son rutas del contrato de URLs. */
.categoria--vacia {
  box-shadow: inset 0 0 0 1px var(--filete);
  background: var(--neon-sup);
}
.categoria--vacia .categoria__nombre { color: var(--humo); }
/* `--humo` y NO `--humo-tenue`: el tenue da 3.62:1 a este cuerpo y AA pide
   4.5 para texto que no es grande —17 px no lo es, hace falta 24, o 18.66
   en negrita—. Es el token que `tokens.css` ya declara fuera de AA y que
   por esto mismo salió del pie el 16/08. Apagar no es bajar del mínimo. */
.categoria--vacia .categoria__n {
  color: var(--humo);
  text-shadow: none;
}
.categoria--vacia:hover {
  box-shadow: inset 0 0 0 1px var(--filete-vivo);
  transform: none;
}
.categoria--vacia:hover::before { opacity: 0; }


/* ── Regiones y colecciones ────────────────────────────────────────────
   La misma familia que las categorías —navegación por facetas con su
   conteo— y por eso van al mismo sistema el 30/08/2026. Quedarse a medias
   habría sido peor que no tocar ninguna: son dos secciones vecinas en la
   misma página, y una en neón junto a otra en tinta se lee como un error.

   Estaban en `--filete`, que es blanco al 7 %: sobre el fondo casi negro
   de la portada la pastilla apenas se veía. El conteo, además, es un dato
   duro y va en cian como el resto.

   `.region` sirve a los dos usos, y desde el 30/08/2026 LOS DOS LLEVAN
   CONTEO: «Colecciones» no lo tenía, así que tres de sus seis pastillas
   —PREMIUM, EN VIAJE, CONECTADAS— llevaban a un listado vacío sin avisar.
   Hasta ese día este comentario decía lo contrario. */

.regiones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.region {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-pastilla);
  background: var(--neon-sup);
  box-shadow: inset 0 0 0 1px var(--neon-filete);
  color: var(--hueso);
  font-size: var(--t-menor);
  text-decoration: none;
  transition: background var(--trans-rapida), box-shadow var(--trans-rapida);
}
.region:hover {
  background: var(--neon-velo);
  box-shadow: var(--neon-halo-pastilla), inset 0 0 0 1px var(--neon-relleno);
  color: var(--hueso);
  text-decoration: none;
}
.region:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.region:active { transform: scale(.985); }

.region__n {
  color: var(--neon-cian);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--neon-brillo-cifra);
}

/* UNA COLECCIÓN EN CERO SE DIBUJA APAGADA, NO SE ESCONDE. Es la misma regla
   que `.categoria--vacia`, y acá pesa más: PREMIUM y EN VIAJE son productos
   del catálogo. La colección vacía es justamente la que está en venta, así
   que esconderla sería dejar de ofrecer lo que la portada vende dos
   secciones más arriba.

   `--humo` y no `--humo-tenue`, por lo mismo que en las categorías: el
   tenue está declarado fuera de AA en `tokens.css`. Apagar no es bajar del
   mínimo. */
.region--vacia {
  background: var(--neon-sup);
  box-shadow: inset 0 0 0 1px var(--filete);
  color: var(--humo);
}
.region--vacia .region__n {
  color: var(--humo);
  text-shadow: none;
}
.region--vacia:hover {
  background: var(--neon-sup);
  box-shadow: inset 0 0 0 1px var(--filete-vivo);
  color: var(--humo);
}


/* ── Llamada al alta ──────────────────────────────────────────────── */

.alta {
  display: grid;
  gap: var(--e-8);
  align-items: center;
  padding: var(--e-12);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-2), var(--filo), var(--canto-oro);
}
@media (min-width: 820px) {
  .alta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.alta__titulo {
  font-size: var(--t-seccion);
  letter-spacing: var(--track-titulo);
}
.alta__texto {
  max-width: 52ch;
  margin-top: var(--e-4);
  color: var(--texto-2);
  line-height: var(--alto-medio);
}

.alta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
@media (min-width: 820px) { .alta__acciones { justify-content: end; } }


/* ── Pieza de promoción ───────────────────────────────────────────────
   Ocupa una celda de la grilla y calza con las tarjetas: mismo alto,
   mismo radio. Filete de oro porque vende el beneficio de oro.       */

/* ── La pieza que vende PREMIUM ────────────────────────────────────────
   Rehecha el 30/08/2026. Victor: «un banner que dice premium tu perfil al
   doble de tamaño, que por cierto es demasiado básico».

   Y lo era: `--sup-1` con `--canto-oro` y texto en `--oro`, o sea la pieza
   entera en el sistema de TINTA sobre una portada que es neón desde el
   15/08. Novena pieza de esa deuda — y encima es lo que vende el producto
   de perfil más visible del catálogo, viéndose como un aviso legal.

   Tres cosas cambian, y sólo una es de color:

   1. LA PIEZA DICE EL PRECIO. No lo decía. Un producto ofrecido sin cuánto
      cuesta obliga a registrarse para averiguarlo, que es justo donde se
      pierde a quien estaba dispuesto a pagar. El monto sale de `productos`
      —moderación puede cambiarlo— y no de esta hoja.
   2. EL ORO SE QUEDA, y no es nostalgia: es la marca del beneficio pagado
      —principio 3 del sistema, que sobrevivió a la revisión de neón— y es
      lo que hace que esta pieza se lea como el mismo producto que el
      filete de la celda PREMIUM. Lo que cambia es que ahora convive con el
      neón en vez de estar sola en el sistema viejo: superficie y halo de
      neón, canto y monto en oro.
   3. LA ACCIÓN ES UN BOTÓN. Era una línea de versalitas doradas sobre un
      filete: parecía el pie de una tarjeta, no algo que se aprieta.

   EL ORO VA EN LÍNEA, NUNCA EN RELLENO. El monto es texto dorado y el
   filete es un canto; un bloque dorado plano es la diferencia exacta entre
   premium y bisutería, que es lo que dice el sistema desde el 31/07. */

.promo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  height: 100%;
  aspect-ratio: var(--ratio-retrato);
  padding: var(--e-6);
  border-radius: var(--radio-2);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--neon-velo), transparent 60%),
    linear-gradient(160deg, var(--neon-sup-alta), var(--neon-fondo));
  box-shadow: var(--neon-halo), var(--canto-oro);
  text-decoration: none;
  transition: transform var(--trans-media), box-shadow var(--trans-media);
}
.promo:hover {
  transform: translateY(calc(var(--alza-3) * -1));
  box-shadow: var(--neon-halo-boton), var(--halo-oro);
  text-decoration: none;
}
.promo:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.promo:active { transform: scale(.99); }

/* Sin ninguna destacada la pieza es lo único de la fila, así que deja de
   fingir que es una tarjeta más: ocupa el ancho completo y se acuesta. El
   `aspect-ratio: auto` es obligatorio —hereda --ratio-retrato, que a ancho
   completo daría una franja de casi 2.000 px de alto—. No toca el token:
   `--ratio-retrato` está atado a RECORTES en edicion.py. */
.grilla__celda--ancha { grid-column: 1 / -1; }

.promo--sola { aspect-ratio: auto; }
@media (min-width: 820px) {
  .promo--sola {
    flex-direction: row;
    align-items: center;
    gap: var(--e-8);
  }
  .promo--sola .promo__cuerpo { margin-bottom: 0; }
  .promo--sola .promo__texto { max-width: 46ch; }
  /* Acostada, el canto de oro que en columna va bajo el texto se pone
     vertical y separa el precio del cuerpo. */
  .promo--sola .promo__precio {
    margin-left: auto;
    padding-left: var(--e-8);
    border-left: var(--grosor-filete) solid var(--filete-oro);
    align-self: stretch;
    align-items: center;
  }
  .promo--sola .promo__accion { align-self: center; }
}

.promo__marca { display: flex; }

/* Empuja el precio y la acción al fondo, que es donde la tarjeta de al
   lado lleva la tarifa. */
.promo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: auto;
}

.promo__titulo {
  font-family: var(--serif);
  font-size: var(--t-tarjeta);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-display);
  color: var(--hueso);
  text-shadow: var(--neon-brillo-nombre);
}

.promo__texto {
  color: var(--texto-2);
  font-size: var(--t-meta);
  line-height: var(--alto-medio);
}

/* El precio: cifra en serif tabular y oro, que es el tratamiento del
   tarifario —la pieza firma— y no el de un dato cualquiera. */
.promo__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.promo__monto {
  color: var(--oro-alto);
  font-family: var(--serif);
  font-size: var(--t-seccion);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.promo__periodo {
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

/* Un botón, no una línea de versalitas sobre un filete. */
.promo__accion {
  align-self: start;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-pastilla);
  background: var(--neon-gradiente);
  box-shadow: var(--neon-halo-pastilla);
  color: var(--tinta-0);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
}
.promo:hover .promo__accion { box-shadow: var(--neon-halo-boton-alto); }

/* «Publicar tu perfil es gratis. Esto es opcional.» Mismo color que la
   descripción de la pieza —`--texto-2`, 10.40:1— porque es texto y tiene que
   leerse; `--humo-tenue` está declarado fuera de AA en tokens.css y esta
   frase es justamente la que no puede pasar desapercibida.

   Va DESPUÉS del botón y en cuerpo menor: aclara la oferta, no la reemplaza.
   Si fuera más grande que el precio, la pieza dejaría de vender lo que vende. */
.promo__gratis {
  color: var(--texto-2);
  font-size: var(--t-etiqueta);
  line-height: var(--alto-medio);
}


/* ── Carrusel de destacadas ───────────────────────────────────────────
   Sangra a los bordes de la pantalla a propósito: que las tarjetas se
   corten en el margen es lo que le dice a la persona que hay más al
   costado. Es scroll-snap nativo, sin librería y sin el owl-carousel de
   90 KB que traía el tema viejo.                                      */

.carrusel-seccion {
  padding-top: var(--aire-corto);
  padding-bottom: var(--aire-corto);
}

/* Pegado a la entrada, los dos aires se suman y dan 108 px de nada justo
   donde tienen que aparecer las tarjetas. Entre dos bloques contiguos el
   espacio es uno, no dos. */
.hero + .carrusel-seccion { padding-top: 0; }

/* Y el título del carrusel se acerca a sus tarjetas: --aire-corto separa
   secciones, no un encabezado de lo que encabeza. Con esto la primera
   destacada asoma antes del pliegue en un portátil de 768 px, que es el
   único punto donde se decide si la portada se ve llena o vacía. */
.carrusel-seccion .seccion__cabeza { margin-bottom: var(--e-6); }

.carrusel__mandos {
  order: 3;
  flex: none;
  display: flex;
  gap: var(--e-2);
}

.carrusel__boton {
  width: var(--e-10);
  height: var(--e-10);
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--borde-vivo);
  border-radius: var(--radio-pastilla);
  background: var(--sup-1);
  box-shadow: var(--filo);
  color: var(--texto-2);
  font-size: var(--t-dato);
  line-height: 1;
  cursor: pointer;
  transition: color var(--trans-rapida), border-color var(--trans-rapida),
              box-shadow var(--trans-media), transform var(--trans-media);
}
.carrusel__boton:hover {
  color: var(--hueso);
  border-color: var(--filete-oro);
  box-shadow: var(--sombra-2), var(--filo-fuerte);
  transform: translateY(calc(var(--alza-1) * -1));
}
.carrusel__boton:active { transform: none; }

.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--e-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--paso);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* La envoltura le da el margen lateral; el padding vertical deja aire
     para que la tarjeta se levante en hover sin que se le corte la sombra. */
  padding-block: var(--e-2);
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
}

.carrusel__celda {
  flex: 0 0 auto;
  width: clamp(15rem, 26vw, 20rem);
  scroll-snap-align: start;
}

/* La tarjeta del carrusel es más alta que la de la grilla: acá la
   fotografía es el argumento y no hay tarifa que mostrar. */
.carrusel__celda .tarjeta__marco { aspect-ratio: var(--ratio-destacado); }
/* Un punto más que en la grilla: la tarjeta del carrusel es más ancha y
   el nombre la acompaña. Esta regla gana sobre la sección neón de
   `listado.css` por especificidad Y por orden de carga, así que el tamaño
   del carrusel se toca acá y en ningún otro lado. */
.carrusel__celda .tarjeta__nombre { font-size: var(--t-tarjeta-carrusel); }

/* La pieza de venta dentro del carrusel toma la proporción de la celda,
   no la de una tarjeta de grilla: si conservara `--ratio-retrato` sería
   más alta que sus vecinas y rompería la línea de la tira. */
.carrusel__celda--promo .promo { aspect-ratio: var(--ratio-destacado); }


/* ── 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 `.hero__cifras dd` 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 (#07070C): --neon-cian #00E5FF, 12.50:1 — el
   contraste más alto de la paleta neón. */
.hero__cifras dd {
  color: var(--neon-cian);
  text-shadow: var(--neon-brillo-cifra);
}


/* ── La celda PREMIUM dentro del carrusel ──────────────────────────────
   30/08/2026. La brasa y el filete de oro se pusieron ese día en
   `.grilla__celda--destacada`, que es la celda de la GRILLA: en el
   carrusel no llegaban, aunque la pastilla PREMIUM sí saliera. Lo notó
   Victor.

   Se repite el tratamiento y NO la clase, porque `grilla__celda--destacada`
   además ocupa dos columnas y dos filas del grid, y eso acá rompería la
   tira. Lo visual se comparte; la retícula no.

   Va en `portada.css` y no en `listado.css` porque `.carrusel__celda` es
   de esta página — y porque este archivo carga DESPUÉS, que es la trampa
   documentada: una regla equivalente en `listado.css` la pisaría ésta. */

.carrusel__celda--premium { position: relative; border-radius: var(--radio-2); }

.carrusel__celda--premium .tarjeta__marco::before {
  box-shadow: inset 0 0 0 1px var(--filete-oro);
}
.carrusel__celda--premium .tarjeta__enlace:hover .tarjeta__marco::before {
  box-shadow: inset 0 0 0 1px var(--oro);
}

.carrusel__celda--premium::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;
}

/* Quieta pero encendida, igual que en la grilla. */
@media (prefers-reduced-motion: reduce) {
  .carrusel__celda--premium::after { animation: none; opacity: .55; }
}