/* ═══════════════════════════════════════════════════════════════════
   gigolosos — armazón: reposición, grano, cabecera, pie, foco y las
   piezas que comparten varias páginas.

   Todo valor sale de tokens.css. Si acá aparece un literal, es un bug.
   ═══════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--noche);
  background-image: var(--luz-pagina);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-cuerpo);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano sobre todo y debajo de nada. Fijo al viewport: si scrollea se
   lee como textura de fondo; quieto, se lee como el material del que
   está hecha la pantalla. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: var(--grano);
  opacity: var(--grano-opacidad);
  pointer-events: none;
  mix-blend-mode: overlay;
}

img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lapis-velo); color: var(--hueso); }


/* ── Foco ─────────────────────────────────────────────────────────
   Visible siempre y en todos los estados, también sobre fotografía. */

:focus-visible {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
  border-radius: var(--radio);
}

.salto {
  position: fixed;
  left: var(--paso);
  top: var(--e-3);
  z-index: 60;
  padding: var(--e-3) var(--e-5);
  background: var(--carbon-2);
  border: var(--borde-vivo);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3), var(--filo);
  font-size: var(--t-menor);
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--trans-suave);
}
.salto:focus { transform: none; }


/* ── Envoltura ─────────────────────────────────────────────────────
   Contenedor único. Las páginas no vuelven a declarar ancho ni margen. */

.envoltura {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--paso);
}
.envoltura--medio { max-width: var(--ancho-medio); }


/* ── Cabecera ──────────────────────────────────────────────────────
   Pegada y de vidrio: la fotografía pasa por debajo y se ve.         */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-bottom: var(--borde);
  box-shadow: var(--filo);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-4) var(--paso);
}

.marca-sitio {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--serif);
  font-size: var(--t-seccion);
  line-height: 1;
  letter-spacing: var(--track-titulo);
  text-decoration: none;
  transition: opacity var(--trans-rapida);
}
.marca-sitio:hover { opacity: .78; }

/* El oso completo del logo original, desde el 15/09/2026; antes era sólo la
   cabeza. A 48 px se leen la silueta, el moño y el tarro, y a 40 ya no.
   Alto fijo para que la cabecera no cambie de medida mientras carga. */
.marca-sitio__beso {
  flex: none;
  width: auto;
  height: var(--e-12);
}


/* La palabra de la marca es la imagen dorada del logo del WordPress. Antes
   era una palabra en serif con un punto de oro detrás; el punto se
   fue con ella.

   DOS ALTOS, Y EL MÁS CHICO ES EL DE ESCRITORIO. A 24 px la palabra mide 283
   de ancho —la palabra en serif medía unos 85— y en una pantalla de 1280 le quitaba a
   la navegación el espacio de la octava categoría: «Strippers» quedaba bajo
   la máscara (medido el 14/09/2026). A 18 px mide 212 y caben las ocho. En
   el teléfono la navegación va en su propia fila, así que ahí la palabra
   recupera los 24. */
.marca-sitio__palabra {
  flex: none;
  width: auto;
  height: calc(var(--e-6) * .75);
}
/* EN EL TELÉFONO LA PALABRA SE ACHICA, NUNCA SE ESCONDE (14/09/2026).

   Hasta hoy, bajo 380 px se ocultaba y quedaba sólo la cabeza del oso: lo vio
   Victor en su teléfono. Ese corte venía de zensual, donde la palabra era
   texto de 85 px; acá es la imagen dorada de 283, y justo los teléfonos más
   comunes —360 en Android, 375 en iPhone SE y mini— caían debajo. Un sitio
   cuya marca en el teléfono es un oso sin nombre no se reconoce.

   Mide lo que queda en la fila: la pantalla menos los dos márgenes, el oso
   (--e-12 de alto con la proporción 431:680 del archivo) y el hueco, con el
   tope de 283 px. A 360 queda en 23.5 px de alto y a 320 en 20; `height: auto`
   conserva la proporción desde los atributos del <img>. */
@media (max-width: 620px) {
  .marca-sitio__palabra {
    width: min(283px, calc(100vw - 2 * var(--paso) - var(--e-12) * 431 / 680 - var(--e-3)));
    height: auto;
  }
}

/* La navegación de categorías desborda en horizontal antes que
   envolverse en tres líneas. En un teléfono se arrastra con el dedo, y
   la máscara avisa que hay más a la derecha. */
.nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--e-8)), transparent);
}
.nav::-webkit-scrollbar { display: none; }
/* Con JS (js/nav.js) la máscara sigue al desplazamiento: se desvanece el
   lado por el que queda algo, y ninguno si todo cabe. Sin JS vale la de
   arriba, que siempre avisa a la derecha. Antes del 14/09/2026 la máscara
   era fija: con la tira desplazada hasta el final, la última categoría
   seguía medio borrada, y lo que quedaba a la izquierda no se anunciaba. */
.nav--js { mask-image: none; }
.nav--js.nav--despues {
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--e-8)), transparent);
}
.nav--js.nav--antes {
  mask-image: linear-gradient(90deg, transparent, #000 var(--e-8));
}
.nav--js.nav--antes.nav--despues {
  mask-image: linear-gradient(90deg, transparent, #000 var(--e-8),
                              #000 calc(100% - var(--e-8)), transparent);
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: max-content;
}

/* El filete inferior crece de izquierda a derecha y es de oro. Es la
   única animación de la navegación. */
.nav__lista a {
  position: relative;
  display: block;
  padding: var(--e-2) 0;
  color: var(--humo);
  font-size: var(--t-menor);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--trans-rapida);
}
.nav__lista a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--grosor-foco);
  background: var(--oro-linea);
  border-radius: var(--radio-pastilla);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-suave);
}
.nav__lista a:hover { color: var(--hueso); }
.nav__lista a:hover::after { transform: scaleX(1); }
/* La categoría en la que estás. Era solo el filete de oro de 2 px, y en
   un teléfono a la luz del día eso no se ve: la tira se arrastra, así que
   hay que poder localizar de un vistazo dónde estás parado sin leer las
   seis palabras. Se le suma una pastilla de velo de oro, que es el mismo
   acento en su otra forma —el oro va en línea y en velo, nunca en relleno
   sólido: un bloque dorado plano es la diferencia exacta entre premium y
   bisutería. */
.nav__lista a[aria-current="page"] {
  color: var(--hueso);
  font-weight: var(--peso-medio);
}
.nav__lista a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 620px) {
  .nav__lista a {
    padding-inline: var(--e-3);
    border-radius: var(--radio-pastilla);
  }
  .nav__lista a[aria-current="page"] {
    background: var(--oro-velo);
    box-shadow: inset 0 0 0 1px var(--filete-oro);
  }
  /* Con la pastilla puesta, el filete de abajo sobraría: repetir la misma
     señal dos veces la hace más ruidosa, no más clara. */
  .nav__lista a[aria-current="page"]::after { display: none; }
}

/* ── La navegación baja a su propia fila en el teléfono ──────────────
   En la misma línea que el logo y la cuenta le quedaban unos 135 px de
   los 390 de un teléfono corriente —el beso se lleva 57, «Publicar
   perfil» unos 110, y los márgenes y huecos el resto—, y las seis
   categorías necesitan cerca de 380. Alcanzaba a verse «Todas» y media
   palabra más, y aunque la tira se arrastra con el dedo, nadie arrastra
   lo que no sabe que está ahí.

   Sola en su fila tiene el ancho completo: pasa de ~135 px a ~350, que es
   casi todo el contenido. La máscara de la derecha sigue avisando que hay
   más. */
@media (max-width: 620px) {
  .cabecera__interior {
    flex-wrap: wrap;
    row-gap: var(--e-3);
  }
  .nav {
    order: 3;
    flex-basis: 100%;
    /* Sangra hasta los bordes de la pantalla: en una tira que se arrastra
       con el dedo, el margen lateral corta el gesto antes de tiempo. El
       padding devuelve la alineación de la primera opción con el logo, y
       deja aire al final para que la última no quede pegada al canto. */
    margin-inline: calc(var(--paso) * -1);
    padding-inline: var(--paso);
  }
}

.nav-cuenta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.nav-cuenta a {
  color: var(--humo);
  font-size: var(--t-menor);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--trans-rapida);
}
.nav-cuenta a:hover { color: var(--hueso); }

/* La única llamada a la acción de la cabecera. Filete de marca y fondo
   apenas teñido: presente sin competir con la fotografía, y a un palmo
   del logo, con el que ahora comparte tono.

   El selector lleva `a` a propósito. `.nav-cuenta a` pesa 0-1-1 y
   `.nav-cuenta__alta` pesa 0-1-0, así que el gris de la navegación le
   ganaba y este botón nunca mostró su color de acento — tampoco cuando
   era de oro. Solo el :hover funcionaba, porque ese sí llevaba `a`. */
.nav-cuenta a.nav-cuenta__alta {
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio);
  background: var(--magenta-suave);
  box-shadow: var(--canto-magenta);
  color: var(--magenta-claro);
  font-weight: var(--peso-medio);
  transition: box-shadow var(--trans-media), color var(--trans-rapida);
}
.nav-cuenta a.nav-cuenta__alta:hover {
  box-shadow: var(--halo-magenta);
  color: var(--hueso);
}

/* La burbuja de moderación. Idea de Victor (03/09/2026): sin ella, entre
   que algo entra a la cola y el resumen diario sale a las 04:19 pueden
   pasar 24 horas, y quien está mirando el sitio no tiene forma de saberlo.

   --tinta-0 sobre --neon-magenta da 6.02:1, que es el par YA MEDIDO en
   tokens.css. Ojo con el otro magenta: sobre `--magenta` el mismo texto da
   3.62:1 y no llega a AA, y por eso ahí el relleno lleva --hueso. */
.nav-cuenta__burbuja {
  display: inline-block;
  min-width: 1.35em;
  margin-left: var(--e-2);
  padding: 0 .35em;
  border-radius: 1em;
  background: var(--neon-magenta);
  color: var(--tinta-0);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: center;
  /* No hereda el gris de `.nav-cuenta a`: el <span> vive dentro del <a>. */
  vertical-align: baseline;
}

/* En pantalla angosta la navegación de cuenta se reduce a lo esencial
   para que la de categorías conserve su espacio. */
@media (max-width: 760px) {
  .nav-cuenta__opcional { display: none; }
}


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

/* ── El pie ────────────────────────────────────────────────────────────
   Rehecho el 30/08/2026. Victor: «no tiene logo y también es algo básico,
   debemos mejorarlo a algo más pro».

   Undécima pieza en el sistema de TINTA y la MÁS visible de todas, porque
   sale en todas las páginas: iba sobre `--sup-1`, que es un gris azulado
   MÁS CLARO que el fondo del sitio. El resultado era un bloque gris pegado
   al final de una página casi negra, como si fuera de otro sitio.

   Ahora la superficie sube desde el fondo en vez de despegarse de él, y el
   filete de arriba es de neón y no blanco.

   La marca vuelve a ser el emblema: ver el comentario de la plantilla. */

.pie {
  position: relative;
  z-index: 2;
  margin-top: var(--aire);
  border-top: var(--grosor-filete) solid var(--neon-filete);
  background: linear-gradient(180deg, var(--neon-sup), var(--neon-fondo));
}

.pie__interior {
  display: grid;
  gap: var(--e-10);
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-16) var(--paso) var(--e-12);
}
@media (min-width: 860px) {
  .pie__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}

/* `.marca-sitio` trae el tamaño de la cabecera; acá sólo se separa del
   texto que la sigue. El emblema es un enlace a la portada, como arriba. */
.pie__marca { margin-bottom: var(--e-4); }

.pie__texto {
  max-width: var(--ancho-texto);
  color: var(--humo);
  font-size: var(--t-meta);
  line-height: var(--alto-medio);
}

.pie__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e-8);
}

/* El rótulo de columna pasa a rosa, que es el color de rótulo del sistema
   —`.dato-celda dt`, los del panel— y lo separa de los enlaces, que hasta
   ahora iban del mismo color: título y opciones en `--humo` se leían como
   una sola lista de siete cosas.

   NO ES `--humo-tenue`: tokens.css lo declara fuera de AA y esto es texto,
   no ornamento. Fue la corrección del 16/08 y sigue en pie. */
.pie__titulo {
  margin-bottom: var(--e-4);
  color: var(--neon-rosa);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

.pie__enlaces { display: grid; gap: var(--e-3); justify-items: start; }
.pie__enlaces a {
  color: var(--texto-2);
  font-size: var(--t-menor);
  text-decoration: none;
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.pie__enlaces a:hover { color: var(--neon-cian); text-decoration: underline; }
.pie__enlaces a:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
  border-radius: var(--radio);
}

.pie__legal {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-5) var(--paso);
  border-top: var(--grosor-filete) solid var(--neon-filete);
  /* Mismo motivo que .pie__titulo: el aviso legal es texto y tiene que
     poder leerse. */
  color: var(--humo);
  font-size: var(--t-meta);
}


/* ═══ PIEZAS COMPARTIDAS ═══════════════════════════════════════════
   Las usan varias páginas. Viven acá para no duplicarse.            */

/* Texto solo para lectores de pantalla.
   Estaba declarada en portada.css, pero la usan _tarjeta.html (el conteo
   de fotos y el rótulo del video) y el buscador, y ni el listado ni la
   búsqueda ni las landings geográficas cargan portada.css: en todas esas
   páginas el texto se veía crudo dentro de la señal. Vive acá porque no
   pertenece a ninguna página. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Versalita: el rótulo que ordena la página. */
.rotulo {
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

/* Cabeza de sección: título, filete que ocupa el resto del ancho, y
   opcionalmente un enlace al final. */
.seccion__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e-5);
  margin-bottom: var(--aire-corto);
}
.seccion__cabeza::after {
  content: "";
  flex: 1 1 auto;
  order: 2;
  height: var(--grosor-filete);
  background: var(--filete);
}
.seccion__titulo {
  order: 1;
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: var(--peso-normal);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
}
.seccion__enlace {
  order: 3;
  flex: none;
  color: var(--humo);
  font-size: var(--t-menor);
  text-decoration: none;
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.seccion__enlace:hover { color: var(--hueso); text-decoration: underline; }

/* Título expresivo. El texto se desvanece hacia abajo: profundidad sin
   agregar color. */
.titular {
  font-family: var(--serif);
  font-weight: var(--peso-normal);
  line-height: var(--alto-titular);
  letter-spacing: var(--track-titular);
  background: linear-gradient(175deg, var(--hueso) 40%, var(--texto-2) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Sin esto se recorta el descendente de la 'g' y la 'j'. */
  padding-bottom: .08em;
}


/* ── Botones ───────────────────────────────────────────────────────
   Tres pesos: el magenta de la marca para la acción que sostiene el
   negocio, filete para la secundaria, desnudo para la terciaria.     */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  border: var(--borde-vivo);
  border-radius: var(--radio);
  background: var(--sup-1);
  box-shadow: var(--filo);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--trans-media), box-shadow var(--trans-media),
              border-color var(--trans-rapida), background var(--trans-rapida);
}
.boton:hover {
  border-color: var(--filete-vivo);
  background: var(--sup-2);
  box-shadow: var(--sombra-2), var(--filo-fuerte);
  transform: translateY(calc(var(--alza-1) * -1));
}
.boton:active { transform: none; box-shadow: var(--sombra-1); }

/* La acción primaria lleva el vino del logo, no el oro. El oro se
   reserva para lo que significa beneficio pagado y verificación: si el
   botón de "Buscar" y la señal de PREMIUM comparten color, el color deja
   de decir nada.

   Se llama --marca y no --magenta porque nombra la función, igual que el
   resto del sistema. */
.boton--marca {
  border-color: transparent;
  background: var(--magenta-linea);
  box-shadow: var(--sombra-1);
  color: var(--blanco);
  font-weight: var(--peso-fuerte);
}
.boton--marca:hover {
  background: var(--magenta-linea);
  box-shadow: var(--halo-magenta), var(--sombra-2);
}

.boton--desnudo {
  padding-inline: 0;
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--lapis);
}
.boton--desnudo:hover {
  background: none;
  box-shadow: none;
  border-color: transparent;
  color: var(--hueso);
  text-decoration: underline;
  text-underline-offset: var(--offset-subrayado);
}

.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }


/* ── Señales sobre fotografía ─────────────────────────────────────── */

.senal {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--radio-pastilla);
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.7;
}
.senal--verificado { color: var(--oro-alto); box-shadow: var(--canto-oro); }
.senal--premium    { color: var(--oro-alto); box-shadow: var(--halo-oro); }
.senal--destacada  { color: var(--oro-alto); box-shadow: var(--halo-oro); }
.senal--tour       { color: var(--rosa);     box-shadow: var(--canto-rosa); }
.senal--fotos      { color: var(--texto-2);  font-variant-numeric: tabular-nums; }
/* «En línea». El punto va como ::before y no como carácter en la plantilla
   para que no lo lea un lector de pantalla: la palabra ya lo dice. */
.senal--online     { color: var(--presencia); }
.senal--online::before {
  content: "";
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: currentColor;
}
/* DESTACADO comparte el oro con PREMIUM porque comparte el significado
   —beneficio pagado— y el acento va por función, no por producto. En la
   tarjeta los dos se dibujan igual (_tarjeta.html:41) y lo que los separa
   es el tamaño de la celda; acá, en la tabla de moderación, los separa el
   texto. El filete y no el halo, para que en una lista de veinte filas el
   oro no se lea como veinte alarmas. */
.senal--destacado  { color: var(--oro-alto); box-shadow: var(--canto-oro); }


/* ── Estado vacío ──────────────────────────────────────────────────
   Con dos categorías sin ningún perfil y cuatro tablas vacías, esta no
   es una vista de borde: es una vista habitual y se diseña como tal. */

.vacio {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  max-width: var(--ancho-texto);
  margin-inline: auto;
  padding: var(--e-20) var(--e-8);
  border: var(--borde);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-1), var(--filo);
  text-align: center;
}
.vacio__marca {
  font-family: var(--serif);
  font-size: var(--t-titulo);
  line-height: 1;
  color: var(--humo-tenue);
}
.vacio__texto { color: var(--texto-2); font-size: var(--t-dato); }


/* ── Miga y separadores ────────────────────────────────────────────── */

.miga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  color: var(--humo);
  font-size: var(--t-meta);
}
.miga a {
  text-decoration: none;
  text-underline-offset: var(--offset-subrayado);
  transition: color var(--trans-rapida);
}
.miga a:hover { color: var(--hueso); text-decoration: underline; }
.miga__sep { color: var(--humo-tenue); }

.punto::before { content: "·"; margin: 0 .5ch; color: var(--humo-tenue); }
.tenue { color: var(--humo); }


/* ── Bloque de sección dentro de una página ────────────────────────
   Lo usan la ficha, el panel y las secciones. Vive acá porque no
   pertenece a ninguna de las tres en particular.                     */

.bloque { margin-top: var(--aire-corto); }

.bloque__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
  color: var(--humo);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.bloque__titulo::after {
  content: "";
  flex: 1 1 auto;
  height: var(--grosor-filete);
  background: var(--filete);
}

.bloque__nota {
  margin-top: var(--e-4);
  color: var(--humo);
  font-size: var(--t-meta);
}


/* ═══════════════════════════════════════════════════════════════════
   Primitivas de formulario

   Viven acá y no en pagina.css porque las usan cuatro sitios distintos:
   los formularios de pagina, la edicion de perfil, moderacion y —desde
   que se puede reseñar— la ficha publica. base.css lo carga todo el
   sitio, asi que ninguna pagina arrastra una hoja entera por un campo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Campos ───────────────────────────────────────────────────────── */

.campo {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
}

.campo label {
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

.campo input,
.campo select,
.campo textarea {
  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-cuerpo);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.campo textarea { resize: vertical; line-height: var(--alto-cuerpo); }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--humo-tenue); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--filete-vivo); }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--lapis);
  box-shadow: var(--halo-lapis);
}

/* El error se marca con filete y texto, nunca solo con color: el color
   por sí solo no es un canal accesible. */
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { color: var(--error); font-size: var(--t-meta); }
.campo__ayuda { color: var(--humo); font-size: var(--t-meta); }

/* Trampa para robots. Fuera de pantalla en vez de display:none, porque
   algunos robots ignoran los campos ocultos. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* NO ES FLEX, y eso costó un bug que estuvo a la vista sin que nadie lo
   viera (corregido el 26/08/2026). Con `display: flex` cada nodo de texto y
   cada etiqueta inline de adentro se convierte en un ítem del contenedor:
   un aviso que dice «Tienes el plan <strong>TOUR</strong> activo» se rompe
   en tres cajas que se acomodan por su cuenta, con el <strong> partido en
   dos líneas y el texto de alrededor flotando a media altura.

   No se notaba porque el uso corriente es `<p class="aviso">{{ mensaje }}</p>`
   —un solo nodo de texto, donde flex y block se ven idénticos—. Se veía
   deforme en `editar_viajes.html`, que es la única pantalla vieja que mete
   un <strong> y un <a> dentro del aviso, y que nadie había mirado con el
   plan TOUR puesto.

   Un aviso es un párrafo. Si alguna vez lleva un icono al lado, el flex va
   en un contenedor propio, no acá. */
.aviso {
  margin-bottom: var(--e-6);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  background: var(--sup-1);
  font-size: var(--t-menor);
  line-height: var(--alto-medio);
}
.aviso--exito { box-shadow: inset 0 0 0 1px var(--exito); color: var(--exito); }
.aviso--error { box-shadow: inset 0 0 0 1px var(--error); color: var(--error); }

/* La ficha que un admin abre sin estar publicada. Lleva el filete de error
   pero NO el texto en rojo, al revés que las dos de arriba: esas dicen el
   resultado de una acción en una línea, y ésta es un párrafo con dos enlaces
   que alguien tiene que leer entero antes de decidir. Es el mismo criterio
   ya escrito para la confirmación de borrado —filete de error, sin relleno
   rojo: la advertencia tiene que leerse—.

   Sus dos enlaces NO llevan color propio: el primer intento fue `--lapis` y
   medido daba lo mismo que el texto, porque `.aviso a { color: inherit }`
   viene después y con la misma especificidad. Es la decisión del componente
   y está bien: acá el enlace se distingue por el subrayado, y colorearlo
   pedía ganarle por orden a una regla que existe a propósito. */
.aviso--previa { box-shadow: inset 0 0 0 1px var(--error); }
.aviso a { color: inherit; text-underline-offset: var(--offset-subrayado); }


/* ── Confirmación de borrado ───────────────────────────────────────
   Un paso irreversible pide su propia pantalla. Se marca con el filete
   de error, sin relleno rojo: la advertencia tiene que leerse, no
   gritar. Lo usan moderación y la galería de fotos del perfil. */

.confirmar {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--radio);
  background: var(--tinta-0);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--error);
}

.confirmar__texto {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--t-menor);
  line-height: var(--alto-medio);
}

.boton--peligro {
  border-color: var(--error);
  color: var(--error);
}
.boton--peligro:hover {
  border-color: var(--error);
  color: var(--hueso);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--error),
              var(--sombra-2);
}


/* ── Tabla de perfiles ─────────────────────────────────────────────
   Para la última columna de una tabla, que suele traer formularios
   apilados: sin esto heredarían el text-align: right de
   .tabla td:last-child y quedarían a la deriva. Lo usan moderación y la
   edición de perfil. */

.linea-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
}
.linea-accion + .linea-accion { margin-top: var(--e-2); }

.linea-accion select {
  padding: var(--e-2) var(--e-3);
  border: var(--borde-vivo);
  border-radius: var(--radio);
  background: var(--tinta-0);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-meta);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.linea-accion select:hover { border-color: var(--filete-vivo); }
.linea-accion select:focus-visible {
  outline: none;
  border-color: var(--lapis);
  box-shadow: var(--halo-lapis);
}

.celda-tenue { color: var(--humo); font-size: var(--t-meta); }


/* ── Casillas ──────────────────────────────────────────────────────
   24 servicios. En lista vertical son dos pantallas de scroll; en
   rejilla entran de una sola mirada.                                */

.casillas {
  margin: 0 0 var(--e-8);
  padding: 0;
  border: 0;
}

.casillas__titulo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding: 0;
  color: var(--humo);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

.casillas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--e-2) var(--e-5);
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio);
  color: var(--texto-2);
  font-size: var(--t-menor);
  line-height: var(--alto-medio);
  cursor: pointer;
  transition: background var(--trans-rapida), color var(--trans-rapida);
}
.casilla:hover { background: var(--carbon-2); color: var(--hueso); }

/* accent-color pinta el control nativo sin reimplementarlo: una casilla
   propia son 40 líneas de CSS y un estado de foco que hay que rehacer. */
.casilla input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--lapis);
  cursor: pointer;
}
.casilla input:focus-visible {
  outline: var(--grosor-foco) solid var(--lapis);
  outline-offset: var(--sep-foco);
}
.casilla:has(input:checked) { color: var(--hueso); }




/* ── WhatsApp de soporte ───────────────────────────────────────────
   Pastilla fija abajo a la derecha, en todas las páginas salvo las dos
   fichas. El porqué de dónde va y de qué color es está en base.html.

   VIDRIO Y NO RELLENO DE COLOR: es soporte, no la acción principal. El
   primer principio del sistema dice que la fotografía manda, y en un
   listado esta pastilla convive con doce fotos y con la señal verde de
   «está conectada». Un botón verde o magenta acá le compite al producto
   desde una capa que está siempre encima.

   `min-height` de 2.75rem y no relleno más grueso: es el mismo objetivo
   táctil que `.enlace-boton` estrena el 26/08, y el texto de una línea
   no alcanza los 44 px sólo con `padding`.

   El `bottom` lleva `env(safe-area-inset-bottom)` por la barra de gestos
   del iPhone, igual que la barra de contacto de la ficha. */
.soporte {
  position: fixed;
  z-index: 35;
  right: var(--paso);
  /* `--soporte-subir` lo pone js/soporte.js cuando una barra fija de
     guardar ocupa el borde de abajo: la pastilla se corre por encima en vez
     de taparle un botón. */
  bottom: calc(max(var(--e-5), env(safe-area-inset-bottom)) + var(--soporte-subir, 0px));
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio-pastilla);
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-4), var(--filo),
              inset 0 0 0 var(--grosor-filete) var(--filete);
  color: var(--texto-2);
  font-size: var(--t-menor);
  text-decoration: none;
  transition: color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.soporte:hover {
  color: var(--hueso);
  box-shadow: var(--sombra-4), var(--filo),
              inset 0 0 0 var(--grosor-filete) var(--neon-filete);
}
/* Se hunde al tocarlo: en un teléfono `:hover` no existe, y sin esto la
   pastilla no acusa recibo hasta que carga WhatsApp. Es la corrección
   del 15/08 aplicada a una pieza nueva. */
.soporte:active { transform: scale(.97); }

/* ── Verificación de edad ──────────────────────────────────────────────
   Capa por encima del contenido, no en lugar de él: la página se sirve
   entera y esto la tapa. Ver el comentario en base.html y edad.py.

   `position: fixed` y no `absolute` para que no se pueda pasar haciendo
   scroll, y el backdrop lleva `--grano` como el resto de las superficies
   oscuras del sitio: sin grano, una capa plana a pantalla completa se ve
   digital, que es justo lo que el sistema visual evita. */
.edad {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: var(--tinta-0);
  overflow-y: auto;
}

/* El grano va en un pseudo-elemento con su opacidad, NO como
   background-image del propio bloque. El SVG de `--grano` ya trae
   `opacity: .5` adentro: puesto directo se ve al 50 % y convierte la
   tinta en un gris sucio de pantalla vieja. Es el mismo patrón que
   body::before, y se corrigió mirándolo con Chromium — leyendo el CSS
   parecía correcto. */
.edad::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: var(--grano-opacidad);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.edad__caja { position: relative; }

.edad__caja {
  max-width: 30rem;
  padding: var(--e-8);
  border-radius: var(--radio-2);
  background: var(--sup-1);
  box-shadow: var(--sombra-2), var(--filo), inset 0 0 0 1px var(--filete);
  text-align: center;
}

.edad__titulo {
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: var(--peso-normal);
  letter-spacing: var(--track-titulo);
  color: var(--hueso);
}

.edad__texto {
  margin-top: var(--e-4);
  color: var(--texto-2);
  line-height: var(--alto-medio);
}

.edad__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--e-8);
}

/* «Salir» no usa el azul de --boton--desnudo: ahí ese azul es el color de
   la acción secundaria y funciona, pero junto al botón de marca y sin más
   contexto se lee como un enlace suelto del navegador, no como la otra
   mitad de una decisión. Va en humo, que es lo que el sistema usa para lo
   secundario, y con área de toque propia. */
.edad__acciones .boton--desnudo {
  padding: var(--e-3) var(--e-5);
  color: var(--humo);
}
.edad__acciones .boton--desnudo:hover { color: var(--hueso); }

.edad__legal {
  margin-top: var(--e-6);
  color: var(--humo);
  font-size: var(--t-meta);
}


/* ═══════════════════════════════════════════════════════════════════
   RESPUESTA AL TOQUE
   ═══════════════════════════════════════════════════════════════════

   En el teléfono `:hover` no existe. El sitio tenía 43 reglas de hover y
   3 de active —y las tres solo ANULABAN el hover, sin dar nada propio—,
   así que tocar una categoría, una tarjeta o un botón no producía ningún
   efecto visible hasta que cargaba la página siguiente. Todo el
   movimiento estaba escrito para un ratón.

   Esto es aditivo a propósito: no reescribe los hover, les pone al lado
   el estado que faltaba. `:active` sí se dispara con el dedo, y en
   escritorio no estorba porque solo dura lo que dura el clic.

   La transición es la rápida: un acuse de recibo que tarda se siente
   como lentitud, no como respuesta. */

/* ── Lo que se toca se hunde ─────────────────────────────────────── */

.nav__lista a,
.nav-cuenta a,
.tarjeta__enlace,
.boton,
.enlace-boton,
.carrusel__boton,
.galeria__miniatura {
  -webkit-tap-highlight-color: transparent;
}

/* El filete de oro aparece entero mientras el dedo está encima: es la
   misma señal que el hover del escritorio, disparada por otro gesto. */
.nav__lista a:active { color: var(--hueso); }
.nav__lista a:active::after { transform: scaleX(1); }

.boton:active,
.enlace-boton:active,
.carrusel__boton:active { transform: scale(.97); }

/* La tarjeta se hunde en vez de levantarse: el alza es del cursor que
   flota por encima, y el dedo empuja hacia adentro. */
.tarjeta__enlace:active .tarjeta__marco {
  transform: scale(.985);
  box-shadow: var(--sombra-1), var(--halo-lapis);
}
.galeria__miniatura:active { transform: scale(.96); }

.nav-cuenta a:active { color: var(--hueso); }

/* ── Sin ratón, nada se queda pegado ─────────────────────────────
   En táctil, iOS deja el `:hover` puesto después de tocar: la tarjeta se
   queda levantada hasta que tocas otra cosa. Se anulan solo los efectos
   de posición, que son los que se notan; el color no molesta. */
@media (hover: none) {
  .tarjeta__enlace:hover .tarjeta__marco { transform: none; }
  .ficha-corta:hover { transform: none; }
  .boton:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   NEÓN — dirección elegida el 15/08/2026
   ═══════════════════════════════════════════════════════════════════

   Va al final y sobreescribe, en vez de reescribir el sistema entero:
   así el cambio de dirección se lee de un vistazo, se revierte de un
   vistazo, y la escala de tinta sigue debajo sosteniendo lo que este
   bloque no toca.

   Tres cosas que NO cambia, y no por conservadurismo:

   1. **WCAG AA.** Todos los pares están medidos en tokens.css. La
      pastilla rellena lleva texto oscuro porque el blanco encima da
      3.34:1 y no llega.
   2. **La fotografía sigue mandando.** El neón vive en filetes, halos y
      pastillas —nunca encima de una foto ni detrás de un párrafo largo.
   3. **prefers-reduced-motion.** Lo que se mueva, se detiene. */

body { background-color: var(--neon-fondo); }

/* Las casillas que se dibujan nativas —las del panel de moderación—
   venían con el azul de fábrica del navegador, el único color de la
   pantalla que no salía de este sistema. Una línea estándar, sin JS y
   sin reemplazar el control: lo que se pinta sigue siendo la casilla del
   sistema operativo, con su foco y su semántica intactos. Va en esta
   sección y no arriba porque el valor es de la dirección actual: si el
   neón se revierte, esto se revierte con él. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--neon-relleno); }

/* Las señales de la tarjeta y la ficha */
.senal--verificado {
  color: var(--tinta-0);
  background: var(--neon-verde);
  box-shadow: var(--neon-halo-verde);
}
/* DESTACADA conserva el rosa relleno, que es lo que era `senal--premium`
   hasta el 30/08/2026: las dos compartían pastilla, así que dos productos
   —$19.900 y $29.900— llevaban el mismo distintivo y no había forma de
   distinguirlos en una tarjeta. */
.senal--destacada {
  color: var(--tinta-0);
  background: var(--neon-gradiente);
  box-shadow: var(--neon-halo);
}

/* PREMIUM PASA A ORO, y lo pidió Victor: «que el banner en vez de rosado sea
   dorado». Encaja con el sistema mejor que el rosa — el oro es la marca del
   beneficio pagado (principio 3, lo único que sobrevivió entero a la revisión
   de neón) y es el mismo oro del filete que ya rodea la celda doble de esta
   misma tarjeta. La pastilla y el marco pasan a decir lo mismo.

   EN LÍNEA, NO EN RELLENO. El sistema lo tiene escrito desde el 31/07: «un
   bloque dorado plano es la diferencia exacta entre premium y bisutería». Así
   que el cuerpo lo dan el vidrio de la señal y un velo de oro encima; el oro
   sólido va en el filete y en el texto. */
/* EL VELO VA APILADO SOBRE EL VIDRIO, NO EN SU LUGAR. La primera versión de
   esto ponía `background: var(--oro-velo)` a secas, y `background` REEMPLAZA:
   la pastilla se quedaba con un dorado al 10 % de opacidad y NADA detrás, o
   sea casi transparente sobre la fotografía. Sobre una foto clara el texto
   daba 1.32:1 — ilegible. Lo vio Victor a ojo; yo lo había medido bien pero
   sobre una composición que el CSS no hacía, así que el número era falso.

   Y EL CONTORNO EXTERIOR ES OSCURO, no dorado, que es lo que pidió. Es la
   misma lección que la marca de agua: un color fijo falla contra la foto del
   color contrario, así que van los dos —oscuro por fuera para separarla de
   una foto clara, oro por dentro para que se lea sobre una oscura—. */
.senal--premium {
  color: var(--oro-alto);
  background: linear-gradient(var(--oro-velo), var(--oro-velo)), var(--vidrio-denso);
  box-shadow: var(--canto-oscuro),
              inset 0 0 0 var(--grosor-foco) var(--filete-oro),
              var(--resplandor-oro);
}
.senal--online { color: var(--neon-verde); }

/* Botón de acción: el gradiente completo, con halo. El texto va oscuro
   —ver la medición en tokens.css— y por eso se declara acá el color, que
   en el sistema de tinta era blanco. */
.boton--marca,
.nav-cuenta a.nav-cuenta__alta {
  color: var(--tinta-0);
  background: var(--neon-gradiente);
  border-color: transparent;
  box-shadow: var(--neon-halo-boton);
}
.boton--marca:hover,
.nav-cuenta a.nav-cuenta__alta:hover {
  box-shadow: var(--neon-halo-boton-alto);
}

/* La categoría activa, en neón */
.nav__lista a[aria-current="page"] { color: var(--neon-magenta); }
.nav__lista a[aria-current="page"]::after { background: var(--neon-relleno); }
@media (max-width: 620px) {
  .nav__lista a[aria-current="page"] {
    background: var(--neon-velo);
    box-shadow: inset 0 0 0 1px var(--neon-filete);
  }
}
.nav__lista a::after { background: var(--neon-relleno); }

/* Títulos de sección: el filete corto que los precede es lo que da el
   pulso de neón sin tocar la legibilidad del texto. */
.bloque__titulo {
  color: var(--neon-magenta);
  text-shadow: var(--neon-brillo);
}

/* ── El titular, encendido ──────────────────────────────────────────────
   Elegido el 29/08/2026 entre cinco variantes miradas en pantalla, sobre
   la portada y un listado reales. Es «composición + acento»: el tamaño y
   el apriete van arriba, en `.titular`; acá va el color.

   EL ACENTO ES SÓLO LA SEGUNDA MITAD, y esa es toda la decisión. Con el
   degradado sobre el título entero —la variante que se probó— la portada
   quedaba con tres cosas rosadas compitiendo: el título, la pastilla
   PREMIUM y el botón. El sistema dice que el color marca funciones; un
   título entero en el color de la acción principal la diluye.

   El `<span>` lo pone el filtro `acento` de listados.py, que se aplica a
   23 plantillas y **deja intactos los títulos que no se pueden partir**.
   No lo llaman las tres que imprimen un nombre propio: el nombre de la
   escort no se pinta a medias.

   Medido sobre el fondo computado (#0D0D0D), no estimado:
     --neon-rosa           #F1C28E  11.89:1   AA normal
     --neon-violeta-claro  #C77BFF   7.13:1   AA normal
   Los dos extremos, que es donde falla un degradado — nunca el medio. */
.titular__acento {
  /* Miel → dorado, 16/09/2026. La parada de cierre era --neon-violeta-claro
     (#C77BFF, el moño del logo) y sobre el fondo oscuro se leía ROSADA: es lo
     primero que se ve al entrar y Victor lo pidió en amarillo. Ahora cierra en
     --neon-cian, que en esta paleta NO es cian sino el dorado de la palabra
     del logo (#DFAC6E) — los nombres de los tokens se conservan de zensual a
     propósito, ver tokens.css. Contraste sobre --noche: 11.89:1 en la miel y
     9.50:1 en el dorado, AAA en las dos paradas. */
  background: linear-gradient(100deg, var(--neon-rosa), var(--neon-cian));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* El filete que precede al título. Mismo gesto que ya usa `.bloque__titulo`
   para los títulos de sección, subido al titular de la página.

   NO va en `.titular` a secas: lo llevan los tres titulares de página
   —`pagina__titulo`, `encabezado__titulo` (los once listados) y
   `hero__titulo`—, y NO el nombre de la escort en la ficha ni el de una
   página de error. Son TRES clases y no una porque el sistema ya las tenía
   separadas; escribir sólo dos dejaba los once listados sin filete, que fue
   justo lo que pasó en el primer intento. En la ficha el filete competiría con el sello de verificada, que
   es una señal que sí significa algo. */
.pagina__titulo::before,
.encabezado__titulo::before,
.hero__titulo::before {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin-bottom: var(--e-5);
  border-radius: 2px;
  background: var(--neon-gradiente);
  box-shadow: var(--neon-halo-pastilla);
}

/* El icono de una señal: acompaña al dato, no compite con él. `flex: none`
   porque `.senal` es un inline-flex y sin eso el SVG se aplasta cuando la
   pastilla se estrecha. La opacidad lo deja medio tono por detrás del
   número, que es lo que se lee. */
.senal__icono {
  flex: none;
  opacity: .75;
}

/* ── Continuar con Google ──────────────────────────────────────────────
   30/08/2026. El botón de una marca ajena, y por eso es el único del sitio
   que NO usa el degradado de la casa: un botón magenta con la G de Google
   dentro se lee como si Google fuera parte del sitio. Superficie neutra,
   filete y el logotipo en sus colores.

   Sus cuatro colores van LITERALES y es la única excepción a la regla de
   que todo sale de tokens.css: son propiedad de Google, no del sistema, y
   meterlos como `--google-azul` los haría parecer parte de la paleta. Van
   en el SVG de la plantilla, no acá. */

.boton--google {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--neon-sup-alta);
  box-shadow: inset 0 0 0 var(--grosor-filete) var(--neon-filete);
  color: var(--hueso);
}
.boton--google:hover {
  background: var(--neon-velo);
  box-shadow: var(--neon-halo-pastilla),
              inset 0 0 0 var(--grosor-filete) var(--neon-relleno);
  color: var(--hueso);
}
.boton--google:focus-visible {
  outline: var(--grosor-foco) solid var(--neon-cian);
  outline-offset: var(--sep-foco);
}
.boton__icono { flex: none; }

/* El «o» entre las dos formas de entrar. Filete a los dos lados, sin caja:
   separa sin pesar más que los botones que divide. */
.o-bien {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin: var(--e-6) 0;
  color: var(--humo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
.o-bien::before,
.o-bien::after {
  content: "";
  flex: 1;
  height: var(--grosor-filete);
  background: var(--neon-filete);
}