/* ========================================================================== FICHA DEL ANUNCIO, VERSIÓN 2 (/ec/escorts/anuncio/micaela/v2/): auditoría del 2026-09-26. Se carga ENCIMA de ficha.css y solo corrige lo que la auditoría marcó (siete puntos, aprobados por Sebas). Todo cuelga de .ficha--v2, que pone ficha-v2.php: la ficha de siempre no cambia. Regla: solo tokens del sistema, y cada tamaño de texto con SU interlineado. ========================================================================== */ /* --- Tokens propios de la ficha ------------------------------------------ Como los de la página de ciudad (ciudad.css): valores de esta pantalla que lee también su JavaScript. */ @layer tokens { .ficha--v2 { --ficha-leer-mas-renglones: 7; /* N: renglones a la vista con la descripción plegada (Sebas; el sitio anterior mostraba 5). ficha.js lo lee de aquí */ --ficha-leer-mas-margen: 1; /* M: «Leer más» sale solo si el texto pasa de N + M renglones; con N + M o menos se ve entero (Sebas, 2026-10-10). ficha.js lo lee de aquí */ } } @layer componentes { /* --- 1. Jerarquía de títulos: el nombre manda -------------------------------------------- Antes el titular (18,8, negrita, tres renglones) y los títulos de sección (18,8) pesaban más que el nombre (17,6). Ahora el nombre se queda en 17,6 (subtítulo, como en ficha.css) y el titular y las secciones bajan a etiqueta; el titular en semi porque es una frase, las secciones en negrita porque ordenan. */ .ficha--v2 .ficha__titular { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-semi); } .ficha--v2 .mel-seccion__titulo { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); } /* --- 2. La edad no compite con el nombre: la misma cifra que en las tarjetas --------------- */ .ficha--v2 .ficha__edad strong { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); } /* --- 7. Interlineados en pareja con su tamaño (heredaban el del cuerpo, 1,6) --------------- */ .ficha--v2 .ficha__meta { line-height: var(--mel-interlineado-micro); } .ficha--v2 .galeria__contador, .ficha--v2 ~ .visor .visor__contador { line-height: var(--mel-interlineado-pequeno); } .ficha--v2 .chip { line-height: var(--mel-interlineado-pequeno); } .ficha--v2 .precios dd { line-height: var(--mel-interlineado-enfasis); } /* --- 5. Pestañas «20 imágenes / 6 videos»: las de la ciudad v2 ----------------------------- Dos píldoras centradas en su mitad, con el filo vertical en medio (como .ciu-pestanas__linea). La activa, morada suave con borde; la otra, gris. Alto: el del chip más el ajuste óptico (28 px, a medio píxel de las de la ciudad, que usan un relleno de 3 px que no es token). */ .ficha--v2 .galeria__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding-block: var(--mel-espacio-dentro); background: var(--mel-color-fondo); } .ficha--v2 .galeria__tabs::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: var(--mel-borde-fino); height: var(--mel-separador-alto); translate: -50% -50%; background: var(--mel-color-borde); } .ficha--v2 .galeria__tab { position: relative; flex: none; gap: var(--mel-espacio-dentro-min); min-height: calc(var(--mel-chip-alto) + var(--mel-espacio-optico)); padding: 0 var(--mel-canal); border: var(--mel-borde-fino) solid var(--mel-color-fondo-sutil); border-radius: var(--mel-radio-pildora); background: var(--mel-color-fondo-sutil); color: var(--mel-color-titulo); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); font-weight: var(--mel-peso-medio); transition: background-color var(--mel-mov-normal) var(--mel-curva-entra), border-color var(--mel-mov-normal) var(--mel-curva-entra), color var(--mel-mov-normal) var(--mel-curva-entra); } .ficha--v2 .galeria__tab[aria-selected="true"] { background: var(--mel-color-marca-suave); border-color: var(--mel-color-marca-borde); color: var(--mel-color-enlace); } .ficha--v2 .galeria__tab:disabled { color: var(--mel-color-texto-deshabilitado); } /* Píldora que se desliza (la crea ficha-v2.js): la activa le cede su fondo y su borde. Sin JavaScript no existe y la activa se pinta sola, con la regla de arriba. */ .ficha--v2 .galeria__tabs--deslizante .galeria__tab[aria-selected="true"] { background: transparent; border-color: transparent; } .galeria__indicador { position: absolute; inset-block-start: 0; inset-inline-start: 0; border: var(--mel-borde-fino) solid var(--mel-color-marca-borde); border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca-suave); pointer-events: none; transition: transform var(--mel-mov-lento) var(--mel-curva-entra), width var(--mel-mov-lento) var(--mel-curva-entra); } /* --- 3. La barra de contacto, como en el sitio anterior ------------------------------------ No está fija a la ventana: está en el cuerpo (ficha-v2.php) y va pegada abajo con `sticky`. Un elemento sticky no sale de su contenedor, y el cuerpo empieza donde terminan las miniaturas: por eso no se ve mientras la galería ocupa la pantalla y sube con el contenido cuando las miniaturas pasan. Al final, «¿Te animas a conocerme?» (encima, con fondo y la altura de la barra de margen negativo) pasa por encima y la tapa: sus mismos botones ya están a la vista. Sin JavaScript funciona igual. ficha-v2.js solo la quita del foco mientras está tapada. La barra ya no tapa el pie, así que el pie deja de reservarle sitio. En la computadora es igual: el sitio es una columna de celular (decisión 0029). */ .ficha--v2 .contacto-fijo { position: sticky; z-index: var(--mel-capa-base); margin-inline: calc(-1 * var(--mel-canal)); } .ficha--v2 .contacto-fijo--oculta { visibility: hidden; } .ficha--v2 [data-ficha-contacto] { position: relative; z-index: var(--mel-capa-elevada); margin-top: calc(-1 * var(--mel-barra-contacto-alto)); background: var(--mel-color-fondo); } body:has(.ficha--v2) .pie { padding-bottom: var(--mel-espacio-seccion); } /* --- 8. «Toca para expandir la imagen», como en el sitio anterior (Sebas, 2026-09-26) --------- La misma píldora de antes (blanco sobre negro al 60 %, 13,6 px, 20 px a los lados), pero de paso: sube y aparece, se queda unos segundos y se va (los tiempos, en ficha-v2.js). Va a 50 px del borde y no a 30 como antes, para no montarse sobre el contador «1 / 20», que antes no había. No recibe toques (pointer-events): el toque llega a la foto. Sin JavaScript no aparece nunca. La salida usa la curva de salida; la entrada, la de entrada (la transición es la del estado al que se va). */ .ficha--v2 .galeria__aviso { position: absolute; inset-inline: 0; bottom: var(--mel-espacio-bloque); z-index: var(--mel-capa-elevada); width: max-content; margin: 0 auto; padding: var(--mel-espacio-dentro-min) var(--mel-espacio-titulo); border-radius: var(--mel-radio-pildora); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); white-space: nowrap; pointer-events: none; opacity: 0; translate: 0 var(--mel-espacio-dentro); transition: opacity var(--mel-mov-lento) var(--mel-curva-sale), translate var(--mel-mov-lento) var(--mel-curva-sale); } .ficha--v2 .galeria__aviso--visible { opacity: 1; translate: 0 0; transition-timing-function: var(--mel-curva-entra); } /* --- 9. Miniaturas de la galería (Sebas, 2026-09-26) ----------------------------------------- Más chicas (56 px en vez de 70), rectas y sin el marco morado. La elegida se reconoce porque es la única a todo color y sin velo; las demás, apagadas y casi en gris, como en el sitio anterior. El foco de teclado conserva su anillo (:focus-visible): solo se quita el marco de «elegida». */ .ficha--v2 .galeria__mini { width: var(--mel-miniatura-chica); border-radius: 0; opacity: var(--mel-opacidad-inactiva); filter: grayscale(var(--mel-gris-inactivo)); transition: opacity var(--mel-mov-rapido) var(--mel-curva-entra), filter var(--mel-mov-rapido) var(--mel-curva-entra); } .ficha--v2 .galeria__mini[aria-current="true"] { opacity: 1; filter: none; } .ficha--v2 .galeria__mini[aria-current="true"]:not(:focus-visible) { outline: 0; } /* Al deslizar la foto con el dedo, el brillo pasa de una miniatura a la siguiente AL MISMO RITMO que el dedo: ficha-v2.js pone en cada una --activa (1 = la foto que se ve, 0 = lejos, y entre medias mientras se desliza). Sin transición: seguir al dedo ya es la animación, y una transición encima la retrasaría. Sin JavaScript manda aria-current, arriba. */ .ficha--v2 .galeria__minis--fluidas .galeria__mini, .ficha--v2 .galeria__minis--fluidas .galeria__mini[aria-current="true"] { opacity: calc(var(--mel-opacidad-inactiva) + (1 - var(--mel-opacidad-inactiva)) * var(--activa, 0)); filter: grayscale(calc(var(--mel-gris-inactivo) * (1 - var(--activa, 0)))); transition: none; } /* --- 10. La multimedia, una sección cerrada (Sebas, 2026-09-26; como el sitio anterior) ------- Encabezado (nombre, edad, publicado) | multimedia (pestañas, foto o videos, miniaturas) | información. La línea de arriba ya la pone .galeria__tabs; esta la cierra por abajo, con el mismo filo y a todo el ancho, en fotos y en videos. En escritorio la galería ya tiene su marco. */ .ficha--v2 .galeria { border-bottom: var(--mel-borde-fino) solid var(--mel-color-borde); } /* --- 11. Miniaturas de los videos (Sebas, 2026-09-26) ------------------------------------------ Las mismas que las de las fotos (tamaño, apagadas, siguen al dedo); dentro, el primer cuadro del video y un triángulo de «play» sobre un círculo oscuro, para que se lean como video y no como foto. El círculo es el velo del contador y las flechas: blanco sobre negro al 60 %. */ .ficha--v2 .galeria__mini--video { position: relative; } .ficha--v2 .galeria__mini video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ficha--v2 .galeria__mini--video .mel-icono { position: absolute; inset: 0; margin: auto; box-sizing: content-box; padding: var(--mel-espacio-dentro-min); border-radius: var(--mel-radio-pildora); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); } /* --- 12. Sección de información: etiquetas dentro de una sección (Sebas, 2026-09-26) ---------- «Dirección:» y «Formas de pago:» son etiquetas DENTRO de su sección, no títulos: un escalón por debajo del título de sección (16,5 → 15,5, énfasis) y a 20 de lo anterior en vez de 30, que es el escalón entre secciones y las hacía parecer secciones sueltas sin línea. A 10 de su valor. */ .ficha--v2 .ficha__cuerpo .etiqueta { margin-top: var(--mel-espacio-titulo); font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-enfasis); } /* Íconos de las formas de pago al tamaño de los demás íconos junto a texto de la ficha (check, pin). */ .ficha--v2 .pagos .mel-icono { width: var(--mel-icono-sm); height: var(--mel-icono-sm); } /* Entre una forma de pago y la siguiente, 20 (antes 50, el escalón entre bloques: «Efectivo» y «Transferencia» se veían sueltos). El doble del hueco ícono-texto (10): cada pareja se lee como una unidad y se distingue de la siguiente. */ .ficha--v2 .pagos { column-gap: var(--mel-espacio-titulo); } /* --- 13. «Leer más»: más aire y un despliegue suave (Sebas, 2026-09-26) ---------------------- · A 10 del texto (antes 5): el escalón de un párrafo al siguiente; con 5 se leía pegado. · Plegada con alto máximo de N renglones (--ficha-leer-mas-renglones, arriba) en vez de line-clamp: line-clamp no se puede animar (el resto aparecía de golpe) y un alto sí. ficha-v2.js anima de un alto al otro. · Cuándo se pliega lo decide ficha.js, en renglones: solo si el texto pasa de N + M (Sebas, 2026-10-10). · Sin «…» (sin line-clamp no hay puntos suspensivos): el último renglón visible se desvanece, la señal de que el texto sigue. El velo se queda mientras se abre, para que el texto «entre» por abajo, y se quita al terminar. La máscara solo usa la opacidad: currentColor (opaco) es «se ve», transparent es «no». */ .ficha--v2 [data-plegar] { margin-top: var(--mel-espacio-dentro); } .ficha--v2 .ficha__descripcion { overflow: hidden; transition: max-height var(--mel-mov-lento) var(--mel-curva-entra); } .ficha--v2 .ficha__descripcion[data-plegada] { display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: calc(var(--mel-texto-cuerpo) * var(--mel-interlineado-cuerpo) * var(--ficha-leer-mas-renglones)); } .ficha--v2 .ficha__descripcion[data-plegada], .ficha--v2 .ficha__descripcion--abriendo { mask-image: linear-gradient(to bottom, currentColor calc(100% - var(--mel-texto-cuerpo) * var(--mel-interlineado-cuerpo)), transparent); } /* --- 14. Ubicación en vez de la tarjeta de ciudad (Sebas, 2026-09-26) ------------------------- La sección empieza con el titular (sin la tarjeta de arriba, su margen superior sobra: el aire ya lo da el relleno de la sección). La ubicación: ícono de 14 en el color de marca, a 5 del texto (el pin es parte de la frase, como en los chips; los 10 de servicios y pagos son de lista, donde el ícono hace de viñeta. Con 10 se veían 12,3: el pin dibujado mide 9,3). La ciudad es un enlace dentro del texto: subrayado, para no depender solo del color (WCAG 1.4.1). */ .ficha--v2 .ficha__titular { margin-top: 0; } .ficha--v2 .ficha__ubicacion { display: flex; align-items: center; gap: var(--mel-espacio-dentro-min); } .ficha--v2 .ficha__ubicacion .mel-icono { color: var(--mel-color-marca); } /* --- 15. Características con peso (Sebas, 2026-09-26, opción B) -------------------------------- Solo contorno, las píldoras pesaban tan poco que el bloque «flotaba» dentro del mismo aire que las demás secciones. Con el relleno lila suave (el de la pestaña activa y .chip--activo) ganan cuerpo sin cambiar el espaciado, que sigue siendo el de todas las secciones. */ .ficha--v2 .chips .chip { background: var(--mel-color-marca-suave); } /* --- 17. Servicios: renglones más juntos (Sebas, 2026-09-26) --------------------------------- Con el título a 15 (sección compacta), los renglones a 33 px de paso (≈ 23 visibles entre letras) quedaban más separados entre sí que la lista de su título: por proximidad, al revés de lo correcto. Relleno de 5 → 2 por lado: paso de 27 px (≈ 17 visibles). */ .ficha--v2 .lista-check li { padding-block: var(--mel-espacio-optico); } .ficha--v2 .lista-check li:first-child { padding-top: 0; } .ficha--v2 .lista-check li:last-child { padding-bottom: 0; } /* Precios, igual (Sebas, 2026-09-26): mismas filas de 5 + 5 de relleno, mismo arreglo. */ .ficha--v2 .precios__fila { padding-block: var(--mel-espacio-optico); } .ficha--v2 .precios__fila:first-child { padding-top: 0; } .ficha--v2 .precios__fila:last-child { padding-bottom: 0; } /* --- 18. El cierre: «¿Te animas a conocerme?» y «Control y verificación» (Sebas, 2026-09-26) -- Otro bloque (centrado; actuar y confiar, no datos del anuncio): título un escalón más grande, 17,6 (subtítulo). No empata con el nombre en la práctica: nunca están en pantalla a la vez. Y el final: la página sumaba el relleno de la última sección (30) y el margen general de
(50): 80 px vacíos antes del pie. Sin el de
, 30 hasta la línea, como las demás. */ .ficha--v2 .bloque-centro .mel-seccion__titulo { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); } main:has(.ficha--v2) { padding-bottom: 0; } /* --- 19. «¿Cómo verificamos los anuncios?» en ventana (Sebas, 2026-09-26) --------------------- Aquí nació el aspecto aprobado (entrada con zoom, escudo de 50, título 16,5 en negrita, párrafos 13,6 con `pretty`, relleno 40/20, foco al título). Desde el mismo día es la ventana de todo el sitio: vive en sistema/componentes.css (.ventana) y el marcado en partes/ventana-verificacion.php, compartido con «Conoce más.» de la ciudad v2. Aquí ya no queda nada que añadir. */ } @layer utilidades { /* --- 16. Secciones compactas (Sebas, 2026-09-26: probado en Características, aprobado; se extiende sección por sección: también Servicios, Precios y la Descripción): 25 entre las líneas y el contenido (antes 30) y 15 del título al contenido (antes 20). En la capa `utilidades`, como `.mel-seccion` y `.mel-seccion__titulo` (base.css): desde `componentes` no ganaban. */ .ficha--v2 .ficha__seccion--compacta { padding-block: var(--mel-espacio-seccion-compacta); } .ficha--v2 .ficha__seccion--compacta .mel-seccion__titulo { margin-bottom: var(--mel-espacio-grupo); } }