/* ==========================================================================
   FICHA DEL ANUNCIO — solo roles de tokens.css. Primero celular; escritorio al final.
   ========================================================================== */

@layer componentes {
  /* Deja sitio a la barra fija de contacto para que no tape el final del pie.
     El sujeto NO puede ser <body>: medido el 2026-09-21, una regla sobre body dentro
     de una @layer no se aplica (una sin capa sí). Se apoya en el pie, que sí funciona. */
  body:has(.contacto-fijo) .pie { padding-bottom: calc(var(--mel-espacio-seccion) + var(--mel-barra-contacto-alto)); }

  /* Cabecera de la ficha */
  .ficha__cab { padding-block: var(--mel-espacio-dentro); }
  .ficha__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mel-espacio-dentro); }
  .ficha__nombre { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); }
  .ficha__edad strong { font-size: var(--mel-texto-subtitulo); color: var(--mel-color-titulo); }
  .ficha__meta { margin-top: var(--mel-espacio-optico); align-items: center; font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); }
  .ficha__verificado { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro-min); }
  .ficha__verificado .mel-icono { color: var(--mel-color-marca); }
  .ficha__contacto { display: none; }

  /* Galería: pestañas */
  .galeria__tabs { display: flex; border-top: var(--mel-borde-fino) solid var(--mel-color-borde); }
  /* padding: 0 no sobra: el navegador le pone 1px 6px a todo <button> y esos cuatro valores no salen de ningún token. */
  .galeria__tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--mel-espacio-dentro); min-height: var(--mel-control-alto); padding: 0; border: 0; background: var(--mel-color-fondo-inactivo); color: var(--mel-color-texto); font-size: var(--mel-texto-pequeno); cursor: pointer; }
  .galeria__tab[aria-selected="true"] { background: var(--mel-color-fondo); color: var(--mel-color-enlace); font-weight: var(--mel-peso-medio); }
  .galeria__tab:disabled { color: var(--mel-color-texto-deshabilitado); cursor: default; }

  /* Galería: visor. El alto queda reservado antes de que cargue la foto (sin saltos). */
  .galeria__visor { position: relative; aspect-ratio: var(--mel-ratio-ficha); background: var(--mel-color-fondo-medios); overflow: hidden; }
  .galeria__pista { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .galeria__pista::-webkit-scrollbar { display: none; }
  .galeria__foto { flex: none; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .galeria__ampliar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
  .galeria__ampliar img { width: 100%; height: 100%; object-fit: cover; }
  /* Flecha: dibujo de 23 px como en el sitio; el área que responde al dedo llega a 30. */
  .galeria__flecha { position: absolute; top: 50%; translate: 0 -50%; z-index: var(--mel-capa-elevada); display: grid; place-items: center; width: var(--mel-tactil-min); height: var(--mel-tactil-min); padding: 0; border: 0; background: none; color: var(--mel-color-texto-inverso); cursor: pointer; }
  .galeria__flecha::before { content: ""; position: absolute; inset: var(--mel-espacio-optico); border-radius: var(--mel-radio-pildora); background: var(--mel-color-velo); }
  .galeria__flecha .mel-icono { position: relative; }
  .galeria__flecha--izq { inset-inline-start: var(--mel-espacio-dentro-min); }
  .galeria__flecha--der { inset-inline-end: var(--mel-espacio-dentro-min); }
  .galeria__contador, .visor__contador { border-radius: var(--mel-radio-pildora); position: absolute; inset-inline-end: var(--mel-espacio-grupo); bottom: var(--mel-espacio-grupo); z-index: var(--mel-capa-elevada); padding: 0 var(--mel-espacio-grupo); border-radius: var(--mel-radio-pildora); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-pequeno); font-variant-numeric: tabular-nums; }

  /* Galería: miniaturas */
  .galeria__minis { display: flex; gap: var(--mel-espacio-dentro); margin: 0; padding: var(--mel-espacio-dentro); list-style: none; overflow-x: auto; scrollbar-width: none; }
  .galeria__minis::-webkit-scrollbar { display: none; }
  .galeria__mini { display: block; flex: none; width: var(--mel-miniatura); aspect-ratio: var(--mel-ratio-miniatura); padding: 0; border: 0; border-radius: var(--mel-radio-sm); overflow: hidden; background: var(--mel-color-fondo-inactivo); cursor: pointer; opacity: .7; transition: opacity var(--mel-mov-rapido) var(--mel-curva-entra); }
  .galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
  .galeria__mini[aria-current="true"] { opacity: 1; outline: var(--mel-borde-grueso) solid var(--mel-color-marca); outline-offset: calc(var(--mel-borde-grueso) * -1); }

  /* Galería: videos */
  /* Va dentro de un .galeria__visor, como las fotos: con sus mismas flechas (ficha.php) y su mismo
     deslizamiento (de uno en uno aunque el gesto sea rápido; al llegar al borde no arrastra la página). */
  .galeria__videos { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: var(--mel-color-fondo-medios); }
  .galeria__videos::-webkit-scrollbar { display: none; }
  .galeria__video { flex: none; width: 100%; aspect-ratio: var(--mel-ratio-ficha); scroll-snap-align: center; scroll-snap-stop: always; }
  .galeria__video video { width: 100%; height: 100%; object-fit: contain; }

  /* Sección principal */
  .ficha__titular { margin-top: var(--mel-espacio-titulo); margin-bottom: var(--mel-espacio-dentro); }
  .ficha__descripcion p + p { margin-top: var(--mel-espacio-dentro); }
  [data-plegar] { margin-top: var(--mel-espacio-dentro-min); }
  .ficha__descripcion[data-plegada] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }

  /* Servicios */
  .lista-check { list-style: none; padding: 0; }
  .lista-check li { display: flex; align-items: center; gap: var(--mel-espacio-dentro); padding-block: var(--mel-espacio-dentro-min); }
  .lista-check li:first-child { padding-top: 0; }
  .lista-check li:last-child { padding-bottom: 0; }
  .lista-check .mel-icono { color: var(--mel-color-marca); }
  .lista-check small { color: var(--mel-color-texto-secundario); }

  /* Precios: etiqueta ····· valor */
  .precios { margin: 0; }
  .precios__fila { display: flex; align-items: baseline; gap: var(--mel-espacio-dentro); padding-block: var(--mel-espacio-dentro-min); }
  .precios__fila:first-child { padding-top: 0; }
  .precios__fila:last-child { padding-bottom: 0; }
  .precios dt { flex: 1; display: flex; align-items: baseline; gap: var(--mel-espacio-dentro); }
  .precios dt::after { content: ""; flex: 1; border-bottom: var(--mel-borde-fino) dotted var(--mel-color-borde-control); }
  .precios dd { margin: 0; color: var(--mel-color-enlace); font-size: var(--mel-texto-enfasis); font-weight: var(--mel-peso-medio); font-variant-numeric: tabular-nums; }
  .pagos { display: flex; flex-wrap: wrap; gap: var(--mel-espacio-dentro) var(--mel-espacio-bloque); list-style: none; padding: 0; }
  .pagos li { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro); }
  .pagos .mel-icono { color: var(--mel-color-marca); }

  /* Barra fija de contacto: la acción principal, siempre a la vista y al alcance del pulgar. Del ancho de la
     columna del sitio y centrada, como la página (decisión 0029). */
  .contacto-fijo { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--mel-capa-fija); max-inline-size: var(--mel-columna); margin-inline: auto; padding-block: var(--mel-espacio-dentro); padding-bottom: max(var(--mel-espacio-dentro), env(safe-area-inset-bottom)); border-top: var(--mel-borde-fino) solid var(--mel-color-borde); background: var(--mel-color-fondo); box-shadow: var(--mel-sombra-barra); }
  .contacto-fijo .boton { padding-inline: var(--mel-espacio-dentro); }

  /* Visor ampliado */
  .visor { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--mel-color-fondo-medios); }
  .visor::backdrop { background: var(--mel-color-fondo-medios); }
  .visor__pista { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .visor__pista::-webkit-scrollbar { display: none; }
  .visor__pista li { flex: none; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; }
  .visor__pista img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .visor__cerrar { position: absolute; top: var(--mel-espacio-dentro); inset-inline-end: var(--mel-espacio-dentro); z-index: var(--mel-capa-elevada); display: grid; place-items: center; width: var(--mel-tactil-min); height: var(--mel-tactil-min); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); cursor: pointer; }
  .visor__contador { inset-inline: 0; margin-inline: auto; width: fit-content; }

  /* Hasta el 2026-10-13 la ficha tenía su versión de escritorio desde 1024 px (galería quieta a la izquierda,
     datos a la derecha, sin barra de contacto). Se quitó: el sitio es una columna de celular en cualquier
     pantalla (decisión 0029). Está en el historial de git si algún día se diseña la computadora. */
}