nativo, sin JS. */
.reportar {
margin-top: var(--e-8);
padding-top: var(--e-6);
border-top: var(--borde);
}
.reportar__abrir {
color: var(--humo);
font-size: var(--t-meta);
cursor: pointer;
}
.reportar__abrir:hover { color: var(--texto-2); }
.reportar__abrir:focus-visible {
outline: var(--grosor-foco) solid var(--lapis);
outline-offset: var(--sep-foco);
}
.reportar__forma { margin-top: var(--e-5); }
.reportar__forma .casillas { display: grid; gap: var(--e-2); }
/* ═══════════════════════════════════════════════════════════════════
LA FICHA EN EL TELÉFONO
═══════════════════════════════════════════════════════════════════
Medido con Chromium a 390×844 el 15/08/2026, no estimado: la ficha
medía 3.826 px de alto y **el nombre aparecía pasados unos 1.200**,
detrás de la foto grande y de ocho miniaturas en grilla. Casi tres
pantallas de fotos antes de saber de quién es el perfil, si está
verificada, dónde está o cuánto cobra.
El orden del HTML —galería y después datos— es el correcto para la
pantalla ancha, donde son dos columnas y se ven a la vez. En una sola
columna se convierte en un muro.
Se reordena SIN TOCAR EL HTML: `display: contents` disuelve el
contenedor de datos y sus hijos pasan a ser celdas del mismo grid que
la galería, donde `order` los coloca. El HTML sigue sirviendo el
contenido en el orden que le conviene al escritorio y a un lector de
pantalla que lea el documento de arriba abajo.
`.ficha__datos` es un sin semántica, así que disolverlo no quita
ningún rol del árbol de accesibilidad. */
@media (max-width: 899px) {
/* `minmax(0, 1fr)` y `min-width: 0` NO son adorno: al disolver el
contenedor, sus hijos pasan a ser celdas del grid, y una celda de
grid trae `min-width: auto`, que le prohíbe encogerse por debajo de
su contenido. La tabla del tarifario ensanchaba entonces la columna
—y con ella la página entera— a 1.780 px en un teléfono de 390.
Medido con Chromium; a ojo es invisible hasta que se ve. */
.ficha__cuerpo { grid-template-columns: minmax(0, 1fr); }
.ficha__datos { display: contents; }
.ficha__cuerpo > * { min-width: 0; }
/* Quién es, primero. Lo demás puede esperar al scroll; esto no. */
.ficha__datos > header { order: 1; }
.ficha__galeria { order: 2; }
/* Contacto y tarifas antes que el texto: son las dos cosas que se
vienen a buscar. El tarifario es además la pieza firma del sistema
visual y estaba enterrado bajo el muro de fotos. */
.ficha__datos > [aria-labelledby="t-contacto"] { order: 3; }
.ficha__datos > [aria-labelledby="t-tarifas"] { order: 4; }
.ficha__datos > .ficha__descripcion { order: 5; }
.ficha__datos > [aria-labelledby="t-servicios"] { order: 6; }
.ficha__datos > [aria-labelledby="t-datos"] { order: 7; }
.ficha__datos > [aria-labelledby="t-resenas"] { order: 8; }
/* Lo que quede sin orden explícito va al final, no al principio. */
.ficha__datos > * { order: 9; }
/* La cabecera se pega al borde superior del contenido: con el nombre
arriba, el aire que había entre la miga y la foto ya no separa nada. */
.ficha__cuerpo { gap: var(--e-6); }
}
/* La tira de miniaturas, en tira de verdad ───────────────────────────
En una grilla de tres columnas, ocho miniaturas se apilan en tres filas
y empujan todo lo demás casi mil píxeles hacia abajo. En horizontal
ocupan una sola fila y se recorren con el dedo, que es el gesto que ya
hace cualquiera con una galería en un teléfono.
Es el mismo patrón del carrusel de la portada —scroll-snap nativo, sin
una línea de JS— y sangra hasta los bordes por el mismo motivo: el
margen lateral corta el gesto antes de tiempo. */
@media (max-width: 899px) {
.galeria__tira {
display: flex;
gap: var(--e-2);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin-inline: calc(var(--paso) * -1);
padding-inline: var(--paso);
/* La máscara avisa que hay más a la derecha, igual que en la barra
de categorías. */
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--e-8)), transparent);
}
.galeria__tira::-webkit-scrollbar { display: none; }
.galeria__tira > li {
flex: 0 0 auto;
width: 5.5rem;
scroll-snap-align: start;
}
}
/* ── Neón en la ficha (15/08/2026) ──────────────────────────────────
Cada sección pasa a ser una superficie con halo, en vez de flotar
sobre el fondo. El cian queda para los datos duros —altura, peso,
medidas— y el magenta para los títulos: dos familias que separan de
un vistazo «lo que se lee» de «lo que se mide». */
.ficha__datos .bloque {
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);
}
.dato-celda {
background: linear-gradient(160deg, var(--neon-sup-alta), var(--neon-sup));
box-shadow: var(--neon-halo-cian), inset 0 0 0 1px var(--neon-filete-cian);
}
.dato-celda dt { color: var(--neon-rosa); }
.dato-celda dd {
color: var(--neon-cian);
text-shadow: var(--neon-brillo-cifra);
}
.dato-celda__unidad { color: var(--neon-rosa); }
/* Los servicios pasan a pastilla rellena. Es lo que el sistema de tinta
evitaba por parecerse al resto del rubro; acá es la decisión tomada.
Texto oscuro encima, que es lo que la deja en AA. */
.servicios li {
color: var(--tinta-0);
background: var(--neon-gradiente);
border-color: transparent;
box-shadow: var(--neon-halo-pastilla);
}
.ficha__nombre { text-shadow: var(--neon-brillo-nombre); }
/* La foto lleva halo pero NO velo de color encima: la fotografía sigue
siendo lo único saturado de la pantalla, y teñirla sería competir con
lo que la escort vino a mostrar. */
.galeria__principal { box-shadow: var(--neon-halo-foto); }
/* El tarifario conserva sus filetes y sus cifras en serif —es la pieza
firma— y solo cambia de acento. Rellenarlo lo convertiría en una
tabla de colores. */
.tarifario td { color: var(--neon-cian); }
.tarifario th[scope="row"] { color: var(--neon-rosa); }