/* ==========================================================================
   PÁGINA DE CIUDAD, VERSIÓN 2 (/ec/escorts/guayaquil/v2/): decisión 0013.
   Solo lo nuevo: cabecera (título, descripción, buscador), «Anuncios con video», pestañas.
   La ventana del video ya no lleva «Ver anuncio»: es la misma para las historias y la pestaña «Videos».
   Lo de siempre se pinta con ciudad.css, como en la v1.
   Regla: aquí SOLO tokens del sistema (--mel-*). Nada de --ciu-*: eso es paridad con el actual.
   ========================================================================== */
@layer componentes {

  /* `hidden` gana siempre: estas piezas se muestran y esconden desde ciudad.js */
  .v2-contador[hidden], .v2-historias[hidden] { display: none; }

  /* --- 1-3. Cabecera: título, descripción y buscador ------------------------ */
  .v2-cabeza { display: flex; flex-direction: column; align-items: center; gap: var(--mel-espacio-grupo); padding: var(--mel-espacio-seccion) var(--mel-canal) var(--mel-espacio-titulo); background: var(--mel-color-fondo); text-align: center; }
  .v2-cabeza__textos { display: flex; flex-direction: column; align-items: center; gap: var(--mel-espacio-dentro-min); }
  .v2-titulo { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); }
  .v2-descripcion { font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); color: var(--mel-color-texto); }
  /* base.css pone todo svg en bloque (reinicio); este va dentro de la frase. */
  /* El escudo del sitio actual, como en la v1. `middle` lo centra con las minúsculas; la frase empieza
     con mayúscula y cifra («Anuncios 100%»), así que se sube 1 px para centrarlo con ellas (ajuste óptico, medido). */
  .v2-descripcion__icono { position: relative; inset-block-start: calc(-1 * var(--mel-borde-fino)); display: inline-block; vertical-align: middle; inline-size: var(--mel-icono-sm); block-size: var(--mel-icono-sm); object-fit: contain; }
  .v2-descripcion__mas { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--mel-peso-medio); color: var(--mel-color-enlace); cursor: pointer; }

  /* PRUEBA (Sebas, 2026-09-26): gris claro sin borde, íconos en gris medio, como la referencia de Instagram. Antes: fondo blanco, borde morado, íconos casi negros. */
  /* La fila: el buscador ocupa lo que sobra y el botón «Filtros» va aparte, a 10 (Sebas, 2026-09-27). */
  .v2-busqueda { align-self: stretch; display: flex; gap: var(--mel-espacio-dentro); }
  .v2-buscador { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--mel-espacio-dentro); block-size: var(--mel-control-alto); padding-inline-start: var(--mel-espacio-grupo); border: var(--mel-borde-fino) solid transparent; border-radius: var(--mel-radio-pildora); background: var(--mel-color-fondo-sutil); color: var(--mel-color-texto-secundario); }
  /* Foco: se vuelve campo blanco con filo gris, sin violeta (auditoría 2026-10-10, opción B; la misma regla
     que .buscador en listado.css). 3,45 : 1 contra el blanco de dentro y de fuera. Fundamentos §8. */
  .v2-buscador:focus-within { background: var(--mel-color-fondo); border-color: var(--mel-color-borde-control); }
  .v2-buscador input { flex: 1; min-inline-size: 0; text-overflow: ellipsis; block-size: 100%; padding: 0; border: 0; background: none; font-family: var(--mel-fuente); font-size: var(--mel-texto-campo); line-height: var(--mel-interlineado-campo); color: var(--mel-color-texto); }
  .v2-buscador input::placeholder { font-size: var(--mel-texto-pequeno); color: var(--mel-color-texto-secundario); }
  .v2-buscador input:focus { outline: 0; }
  /* «Filtrar»: sin píldora (Sebas, 2026-09-27), ícono y palabra centrados en vertical con el buscador; la
     palabra con el tamaño y el peso del texto de ayuda (13,6, normal), en morado como las demás acciones de texto
     («Conoce más.»), ícono incluido (Sebas, 2026-09-27). Conserva
     los 43 de alto del buscador como área táctil. El número de filtros activos, al lado. */
  .v2-filtros { display: inline-flex; flex: none; align-items: center; gap: var(--mel-espacio-dentro-min); block-size: var(--mel-control-alto); padding: 0; border: 0; background: none; color: var(--mel-color-enlace); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); font-weight: var(--mel-peso-normal); cursor: pointer; }
  .v2-contador { display: grid; place-items: center; min-inline-size: var(--mel-contador); block-size: var(--mel-contador); border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); font-weight: var(--mel-peso-semi); }

  /* --- 4. «Anuncios con video» ------------------------------------------------ */
  /* Arriba no suma nada (ya van los 20 de la cabecera); abajo, otros 20 hasta las pestañas: la fila queda centrada entre los dos. */
  .v2-historias { padding-block: 0 var(--mel-espacio-seccion); background: var(--mel-color-fondo); }
  .v2-historias__titulo .mel-icono { color: var(--mel-color-marca); }
  .v2-historias__titulo { display: flex; align-items: center; gap: var(--mel-espacio-dentro-min); padding-inline: var(--mel-canal); font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-enfasis); font-weight: var(--mel-peso-semi); color: var(--mel-color-titulo); }
  /* Sin relleno a la derecha, a propósito: el ancho de cada tarjeta se calcula sobre la fila
     entera menos el canal izquierdo, para que la última tarjeta a la vista asome a medias
     (--mel-historias-a-la-vista: con 3,6, la cuarta). */
  .v2-historias__fila { display: flex; gap: var(--mel-espacio-historias); margin: var(--mel-espacio-dentro) 0 0; padding: 0 0 0 var(--mel-canal); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--mel-canal); scrollbar-width: none; }
  .v2-historias__fila::-webkit-scrollbar { display: none; }
  /* Al final, el mismo aire que el canal: hueco (dentro) + este relleno = canal. */
  .v2-historias__fila::after { content: ""; flex: none; inline-size: calc(var(--mel-canal) - var(--mel-espacio-historias)); }
  .v2-historias__fila > li { flex: none; inline-size: calc(100% / var(--mel-historias-a-la-vista) - var(--mel-espacio-historias)); scroll-snap-align: start; }

  .v2-historia { position: relative; display: block; inline-size: 100%; aspect-ratio: var(--mel-ratio-historia); padding: 0; overflow: hidden; border: 0; border-radius: var(--mel-radio-sm); color: var(--mel-color-texto-inverso); text-align: start; cursor: pointer; }
  .v2-historia__foto, .v2-historia__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .v2-historia > .mel-icono { position: absolute; inset-block-start: var(--mel-espacio-dentro-min); inset-inline-start: var(--mel-espacio-dentro-min); color: var(--mel-color-texto-inverso); }
  /* El nombre sobre un degradado propio: se lee sobre cualquier foto. Hasta 2 renglones. */
  .v2-historia__nombre { position: absolute; inset-inline: 0; inset-block-end: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: var(--mel-espacio-grupo) var(--mel-espacio-dentro-min) var(--mel-espacio-dentro-min); background: linear-gradient(to top, var(--mel-color-velo), transparent); font-size: var(--mel-texto-minimo); line-height: var(--mel-interlineado-minimo); font-weight: var(--mel-peso-normal); overflow-wrap: anywhere; }

  /* --- 5. Pestañas ------------------------------------------------------------- */
  /* Mismo diseño que la v1 (ciudad.css). Aquí solo la franja gris de 5 px encima: empiezan su propio bloque. */
  /* 20 arriba (hasta la franja) y 20 abajo (los pone la tarjeta): píldoras en el centro de su espacio (Sebas, 2026-09-26). */
  .ciu--v2 .ciu-pestanas { position: relative; margin-block-start: var(--mel-espacio-dentro-min); margin-block-end: 0; padding-block: var(--mel-espacio-titulo) 0; }
  /* Sin los 2 px de relleno del actual: el ícono queda centrado con las mayúsculas (medido). */
  .ciu--v2 .ciu-pestana span { padding-top: 0; }
  /* Píldora que se desliza (la crea ciudad.js): la activa cede su fondo a la píldora, y los colores cambian suave. */
  /* 1 px más arriba y abajo que la píldora original de 26,4 (Sebas) → 28,4 px. El texto ya no lleva su relleno de 2 px (centrado), por eso aquí 3 px: 1,5 × el ajuste óptico. */
  .ciu--v2 .ciu-pestana { padding-block: calc(1.5 * var(--mel-espacio-optico)); position: relative; 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); }
  .v2-pestanas--deslizante .ciu-pestana--activa { background: transparent; border-color: transparent; }
  /* Los dos íconos de cada pestaña: se ve el activo en la marcada y el inactivo en la otra. */
  .ciu--v2 .ciu-pestana .v2-icono-activo, .ciu--v2 .ciu-pestana--activa .v2-icono-inactivo { display: none; }
  .ciu--v2 .ciu-pestana--activa .v2-icono-activo { display: block; }
  .v2-pestanas__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); }
  /* --- Carga de esqueleto (Sebas, 2026-09-26) -----------------------------------
     Mientras llegan los resultados (ciudad.js pone dos tarjetas de esqueleto) o las fotos de las
     historias: formas grises con un brillo que las recorre. Con «reducir movimiento», sin brillo. */
  .v2-esqueleto { display: flex; flex-direction: column; gap: var(--mel-espacio-dentro); padding: var(--mel-espacio-titulo) var(--mel-canal); background: var(--mel-color-fondo); }
  .v2-esqueleto__medio, .v2-esqueleto__linea, .v2-historia { background: linear-gradient(90deg, var(--mel-color-fondo-inactivo), var(--mel-color-fondo-sutil), var(--mel-color-fondo-inactivo)); background-size: 200% 100%; animation: v2-brillo var(--mel-mov-latido) linear infinite; }
  /* Cargada (o fallida): sin brillo y otra vez sobre negro, para que el nombre blanco se lea aunque no haya foto. */
  .v2-historia--lista { animation: none; background: var(--mel-color-fondo-medios); }
  /* La v1 atenúa la lista mientras carga (ciudad.css); aquí la sustituye el esqueleto. */
  .ciu--v2 .ciu-lista[aria-busy="true"] { opacity: 1; }
  .v2-esqueleto__medio { aspect-ratio: var(--mel-ratio-tarjeta); border-radius: var(--mel-radio-sm); }
  .v2-esqueleto__linea { block-size: var(--mel-texto-cuerpo); border-radius: var(--mel-radio-xs); }
  .v2-esqueleto__linea--titulo { inline-size: 40%; block-size: var(--mel-texto-titulo); }
  .v2-esqueleto__linea--corta { inline-size: 60%; }
  @keyframes v2-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  /* Unidas a la lista (Sebas, 2026-09-26): sin franja gris entre las pestañas y el primer resultado; son su cabecera. */
  .ciu--v2 .ciu-lista { padding-block-start: 0; }
  /* La no seleccionada, también en píldora, en el gris del buscador (Sebas, 2026-09-26). */
  .ciu--v2 .ciu-pestana:not(.ciu-pestana--activa) { background: var(--mel-color-fondo-sutil); border-color: var(--mel-color-fondo-sutil); }
}

/* PRUEBA (Sebas, 2026-09-26): escudo de «Anuncios 100% verificados» oculto por un momento. Se quita borrando este bloque. */
@layer componentes { .v2-descripcion__icono { display: none; } }

/* --- 6. Tarjeta de anuncio en la v2 (auditoría, Sebas, 2026-09-26) ---------------------------
   La tarjeta es la de la v1 (partes/tarjeta-ciudad.php + ciudad.css, copiada del sitio actual);
   aquí solo se corrige lo que la auditoría marcó, con tokens del sistema. La v1 no cambia. */
@layer componentes {
  /* Nombre y descripción un escalón más pequeños (Sebas): el título de la página queda por encima. */
  .ciu--v2 .ciu-tarjeta__nombre { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); }
  .ciu--v2 .ciu-tarjeta__extracto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mel-grande-lineas); overflow: hidden; margin-top: var(--mel-espacio-dentro-min); font-size: var(--mel-grande-descripcion); line-height: var(--mel-grande-descripcion-interlineado); } /* la «Lista» pone sus propios renglones y tamaño (vistas.css) */
  /* Precio y edad, las dos cifras de la fila, del mismo tamaño; el nombre queda por encima. */
  .ciu--v2 .ciu-tarjeta__datos { margin-top: var(--mel-espacio-dentro); line-height: var(--mel-interlineado-pequeno); }
  .ciu--v2 .ciu-tarjeta__precio strong, .ciu--v2 .ciu-tarjeta__edad strong { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); }
  .ciu--v2 .ciu-tarjeta__datos span span { margin-left: var(--mel-espacio-dentro-min); line-height: var(--mel-interlineado-pequeno); }
  .ciu--v2 .ciu-tarjeta__datos .ciu-tarjeta__precio span { margin-left: var(--mel-grande-precio-hueco); } /* «$60/hora»; la edad sigue con su espacio */
  .ciu--v2 .ciu-tarjeta__linea { margin-block: var(--mel-espacio-dentro); }
  /* La zona es un dato clave: sube de micro a pequeño, con su interlineado y el pin a juego. */
  .ciu--v2 .ciu-tarjeta__lugar { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); }
  /* El pin a escala del texto, en la proporción del sitio actual (10,73 / 12,74 = 0,84): con 14 px pesaba más que la frase. */
  .ciu--v2 .ciu-tarjeta__pin { width: calc(var(--mel-texto-pequeno) * 0.84); height: calc(var(--mel-texto-pequeno) * 0.84); }
  .ciu--v2 .ciu-insignia { padding-block: var(--mel-espacio-optico); }
  /* La llama blanca de los destacados delante de la palabra (Sebas, 2026-10-11), sin cambiar el alto de la píldora: el
     ícono (14 px) cabe en su línea (16,7 px). En la «Lista» la píldora de la foto no se ve (vistas.css). */
  .ciu--v2 .ciu-insignia { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro-min); font-weight: var(--mel-peso-medio); } /* 500 (Sebas, 2026-10-11) */
  .ciu--v2 .ciu-insignia .mel-icono { flex: none; inline-size: var(--mel-icono-sm); block-size: var(--mel-icono-sm); }
  /* El dibujo de la llama empieza 1,75 px dentro de su caja (viewBox x = 3 de 24): con el mismo relleno a los dos lados, el
     aire visible a la izquierda era 11,75 px y a la derecha 10. Se le resta el ajuste óptico (Sebas, 2026-10-11, medido). */
  .ciu--v2 .ciu-insignia:has(.mel-icono) { padding-inline-start: calc(var(--mel-espacio-dentro) - var(--mel-espacio-optico)); }
  .ciu--v2 .ciu-contadores { gap: var(--mel-espacio-dentro-min); }
  .ciu--v2 .ciu-contadores > span { gap: var(--mel-espacio-dentro-min); padding: var(--mel-espacio-optico) var(--mel-espacio-dentro-min); line-height: var(--mel-interlineado-micro); }
  .ciu--v2 .ciu-carrusel--auto { background: var(--mel-color-fondo-medios); }
  /* Flechas del carrusel: el dibujo sigue igual (23 px, mismo sitio); el área que responde al dedo sube a 30
     con un ::after invisible, el patrón del sistema (como las migas). */
  .ciu--v2 .ciu-carrusel__flecha::after { content: ""; position: absolute; inset: calc((var(--mel-icono-lg) - var(--mel-tactil-min)) / 2); }
}

/* --- 7. Tarjeta de video en la v2 (auditoría, Sebas, 2026-09-26) -----------------------------
   La de la v1 (partes/tarjeta-video.php + ciudad.css); aquí solo lo que marcó la auditoría,
   con tokens del sistema y a juego con la tarjeta de anuncio. La v1 no cambia. */
@layer componentes {
  /* Entre tarjetas, la misma franja gris de 5 px que entre anuncios. */
  .ciu--v2 .ciu-lista--videos { gap: var(--mel-espacio-dentro-min); }
  .ciu--v2 .ciu-video__quien { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); }
  /* La píldora «Destacado» de un video destacado: en su propio renglón, encima del nombre, con el ancho de su contenido. */
  .ciu--v2 .ciu-video__info .ciu-insignia { display: flex; inline-size: fit-content; margin-bottom: var(--mel-espacio-dentro-min); }
  /* El titular: es una frase, así que va un escalón por debajo del nombre en los anuncios (Sebas). */
  /* En «etiqueta» y como mucho 2 renglones, igual que el título de la ventana (Sebas, 2026-10-10: probó «énfasis» y lo subió). */
  .ciu--v2 .ciu-video__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mel-ventana-video-lineas); overflow: hidden; margin-top: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); }
  .ciu--v2 .ciu-video__meta { margin-top: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto-secundario); }
  .ciu--v2 .ciu-video__meta > span:first-child { margin-bottom: 0; }
  .ciu--v2 .ciu-video__punto { background: var(--mel-color-texto-secundario); }
  .ciu--v2 .ciu-video__sobre > span { gap: var(--mel-espacio-dentro-min); padding: var(--mel-espacio-optico) var(--mel-espacio-dentro-min); line-height: var(--mel-interlineado-micro); }
  /* Pestañas: del ícono al texto, 5 px del sistema (el actual usa 7, suelto). */
  .ciu--v2 .ciu-pestana { gap: var(--mel-espacio-dentro-min); }
}

/* --- 8. Ventanas de la v2 con las prácticas de la ventana del sistema (Sebas, 2026-09-26) -------
   La referencia es «¿Cómo verificamos los anuncios?» de la ficha v2, hoy .ventana (componentes.css).
   «Conoce más.» ES esa ventana (partes/ventana-verificacion.php). El aviso +18 también
   (partes/aviso18.php), con lo suyo en aviso18.css. El panel de filtros y la ventana del video son los
   de la v1 (ciudad.css) con 'v2' => true en su parte; aquí se les pone lo que les faltaba, con
   tokens del sistema: el velo, la entrada, la cruz de 30 con el ícono de 23 y el título sin anillo
   (recibe el foco al abrir). Esta hoja solo se carga en la v2: la v1 no cambia. */
@layer componentes {
  .ciu-video-ventana::backdrop { background: var(--mel-color-velo); }

  /* Ventana del video: se acerca como las demás, con sus esquinas y su sombra. El video se recorta
     arriba con la misma curva (la ventana no recorta: su contenido puede necesitar desplazarse). */
  .ciu-video-ventana { border-radius: var(--mel-radio-md); box-shadow: var(--mel-sombra-flotante); }
  .ciu-video-ventana[open] { animation: mel-ventana-acercar var(--mel-mov-lento) var(--mel-curva-entra) both; }
  .ciu-video-ventana__medio { border-start-start-radius: var(--mel-radio-md); border-start-end-radius: var(--mel-radio-md); overflow: hidden; }
  .ciu-video-ventana__cerrar { inline-size: var(--mel-tactil-min); block-size: var(--mel-tactil-min); }
  .ciu-video-ventana__titulo:focus { outline: 0; }
  /* Por dentro, cada tamaño con su interlineado (el auditor los marcaba: micro con el del cuerpo,
     énfasis con el de etiqueta) y los huecos sueltos del actual (8, 4 y el -3 que subía la edad)
     con el paso de 5 del sistema, como en la tarjeta de video de la v2. */
  .ciu-video-ventana__fila { line-height: var(--mel-interlineado-micro); }
  .ciu-video-ventana__titulo { margin-block: var(--mel-espacio-dentro-min); }
  /* El título del anuncio, completo pero en 2 renglones como máximo (Sebas, 2026-10-10): lo más largo se
     corta con «…» y no empuja «Escríbeme» y «Llamar» fuera de la pantalla. El mismo recorte que la descripción
     de la tarjeta (--mel-grande-lineas), con su propio token. */
  .ciu-video-ventana__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mel-ventana-video-lineas); overflow: hidden; }
  /* «Ciudad · zona» en un renglón: una zona larga se corta con «…» y las vistas no se mueven. */
  .ciu-video-ventana__fila [data-ciu-campo-caja="ciudad"] { min-inline-size: 0; }
  .ciu-video-ventana__fila [data-ciu-campo="ciudad"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ciu-video-ventana__fila [data-ciu-campo-caja="vistas"] { flex: none; }
  .ciu-video-ventana__nombre { line-height: var(--mel-interlineado-enfasis); }
  .ciu-video-ventana__anos { margin-top: 0; line-height: var(--mel-interlineado-micro); }

  /* Aviso +18: vive en aviso18.css desde el 2026-10-11, porque sale también en la portada de país. */
}

/* --- 10. La hoja de filtros (Sebas, 2026-09-27; referencia kinky.nl) ---------------------------
   Sube desde abajo hasta --mel-hoja-alto y se arrastra (ciudad.js) hasta --mel-hoja-alto-max o hacia
   abajo para cerrarse. Cabeza fija (barrita, «Filtros», cruz), cuerpo que se desplaza y pie fijo con
   «Limpiar» y «Ver anuncios». Las opciones son píldoras como las pestañas: gris sin marcar; lila con
   borde, marcadas. */
@layer componentes {
  /* Del ancho de la columna del sitio y centrada, como la página (decisión 0029); en un celular, toda la pantalla. */
  .hoja { position: fixed; inset: auto 0 0; display: none; flex-direction: column; inline-size: 100%; max-inline-size: var(--mel-columna); block-size: var(--mel-hoja-alto); max-block-size: var(--mel-hoja-alto-max); margin: 0 auto; padding: 0; border: 0; border-start-start-radius: var(--mel-radio-hoja); border-start-end-radius: var(--mel-radio-hoja); background: var(--mel-color-fondo); color: var(--mel-color-texto); box-shadow: var(--mel-sombra-flotante); overflow: hidden; transition: block-size var(--mel-mov-normal) var(--mel-curva-entra); }
  .hoja[open] { display: flex; animation: hoja-subir var(--mel-mov-lento) var(--mel-curva-entra) both; }
  .hoja.hoja--grande { block-size: var(--mel-hoja-alto-max); }
  .hoja.hoja--arrastrando { transition: none; }
  .hoja.hoja--saliendo { animation: hoja-bajar var(--mel-mov-normal) var(--mel-curva-sale) both; }
  .hoja::backdrop { background: var(--mel-color-velo); }
  @keyframes hoja-subir { from { transform: translateY(100%); } }
  @keyframes hoja-bajar { to { transform: translateY(100%); } }

  .hoja__asa { display: grid; place-items: center; padding-block-start: var(--mel-espacio-dentro); cursor: grab; touch-action: none; }
  .hoja__asa span { inline-size: var(--mel-asa-ancho); block-size: var(--mel-asa-alto); border-radius: var(--mel-radio-pildora); background: var(--mel-color-borde-control); }
  .hoja__cabeza { display: flex; align-items: center; justify-content: space-between; padding: var(--mel-espacio-dentro-min) var(--mel-canal) var(--mel-espacio-dentro); touch-action: none; }
  .hoja__cabeza > form { display: contents; }
  .hoja__titulo { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); }
  .hoja__titulo:focus { outline: 0; }
  .hoja__cerrar { display: grid; place-items: center; inline-size: var(--mel-tactil-min); block-size: var(--mel-tactil-min); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: none; color: var(--mel-color-titulo); cursor: pointer; }

  .hoja__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--mel-espacio-titulo); padding: var(--mel-espacio-dentro-min) var(--mel-canal) var(--mel-espacio-titulo); overflow-y: auto; overscroll-behavior: contain; }
  .hoja__seccion { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .hoja__subtitulo { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--mel-espacio-dentro); padding: 0; font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); font-weight: var(--mel-peso-semi); color: var(--mel-color-titulo); }
  .hoja__plegable > summary { min-block-size: var(--mel-tactil-min); margin-block-end: 0; list-style: none; cursor: pointer; }
  .hoja__plegable > summary::-webkit-details-marker { display: none; }
  .hoja__plegable > summary .mel-icono { color: var(--mel-color-texto-secundario); transition: rotate var(--mel-mov-normal) var(--mel-curva-entra); }
  .hoja__plegable[open] > summary { margin-block-end: var(--mel-espacio-dentro); }
  .hoja__plegable[open] > summary .mel-icono { rotate: 90deg; }
  .hoja__opciones { display: flex; flex-wrap: wrap; gap: var(--mel-espacio-dentro); }

  .hoja-opcion { position: relative; display: inline-flex; cursor: pointer; }
  .hoja-opcion input { position: absolute; inline-size: 0; block-size: 0; margin: 0; opacity: 0; } /* sigue recibiendo el foco del teclado */
  .hoja-opcion span { display: inline-flex; align-items: center; min-block-size: var(--mel-tactil-min); padding-inline: var(--mel-espacio-grupo); 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-texto); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); transition: background-color var(--mel-mov-rapido) var(--mel-curva-entra), border-color var(--mel-mov-rapido) var(--mel-curva-entra), color var(--mel-mov-rapido) var(--mel-curva-entra); }
  .hoja-opcion input:checked + span { border-color: var(--mel-color-marca-borde); background: var(--mel-color-marca-suave); color: var(--mel-color-enlace); }
  .hoja-opcion input:focus-visible + span { outline: var(--mel-foco-ancho) solid var(--mel-foco-color); outline-offset: var(--mel-foco-separacion); }
  .hoja-opcion:has(input:disabled) { opacity: var(--mel-opacidad-apagado); cursor: default; }

  .hoja__pie { display: flex; align-items: center; gap: var(--mel-espacio-titulo); padding: var(--mel-espacio-dentro) var(--mel-canal); padding-block-end: max(var(--mel-espacio-dentro), env(safe-area-inset-bottom)); border-block-start: var(--mel-borde-fino) solid var(--mel-color-borde); background: var(--mel-color-fondo); }
  .hoja__limpiar { min-block-size: var(--mel-tactil-min); padding: 0; border: 0; background: none; color: var(--mel-color-enlace); font: inherit; font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); font-weight: var(--mel-peso-medio); cursor: pointer; }
  .hoja__ver { flex: 1; }

  /* En «Videos» solo se busca: los demás filtros son de anuncios. */
  .hoja--videos .hoja__solo-anuncios { display: none; }

  /* El buscador de afuera abre la hoja: se ve igual, pero es una puerta (cursor de botón). */
  .v2-buscador input[readonly] { cursor: pointer; }

  /* --- Botón flotante «Publicar anuncio» (Sebas, 2026-10-18): partes/publicar-flotante.php -------------------
     Abajo a la derecha, elegido entre tres esquinas. Morado con letra y «+» blancos: es .boton--marca, con su tono al tocarlo
     (Sebas, 2026-10-18; lo probó en blanco con el «+» morado y volvió al morado). La sombra lo separa de las fotos; el filo
     es transparente y solo conserva el alto que tenía con el filo gris.
     Pequeño y en píldora (Sebas, 2026-10-18: «menos padding»): 5 arriba y abajo, 10 a los lados, ≈ 32 de alto con la letra
     pequeña; nunca menos que el mínimo táctil (30). Antes, el alto del botón del sistema (43) y 15 a los lados. Flota a un
     canal del borde de la COLUMNA, no de la pantalla: en la laptop queda dentro de los 600 px (la cuenta del menú, en
     componentes.css). El aviso de cookies (capa de aviso) lo tapa entero hasta que se cierra, a propósito: primero la
     decisión de privacidad. Las ventanas (filtros, menú, +18) van en la capa superior del navegador y también lo tapan. */
  .publicar-flotante { position: fixed; inset-block-end: calc(var(--mel-canal) + env(safe-area-inset-bottom)); inset-inline-end: calc((100% - min(100%, var(--mel-columna))) / 2 + var(--mel-canal)); z-index: var(--mel-capa-fija); min-height: var(--mel-tactil-min); gap: var(--mel-espacio-dentro-min); padding: var(--mel-espacio-dentro-min) var(--mel-espacio-dentro); border: var(--mel-borde-fino) solid transparent; border-radius: var(--mel-radio-pildora); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); box-shadow: var(--mel-sombra-flotante); }
}

/* Debajo de los anuncios: texto de la ciudad, preguntas frecuentes y enlaces (partes/ciudad-guia.php; etapa 3 del plan SEO,
   2026-10-20). Un bloque blanco más de la página, separado de la paginación por la franja gris de siempre. Sin tokens nuevos:
   secciones (.mel-seccion), desplegable (<details>) y chips del sistema. Cada pregunta es una fila del alto de un enlace de
   lista, con la flecha «abajo» que gira al abrirse. */
@layer componentes {
  .ciu-guia { margin-top: var(--mel-espacio-dentro-min); padding-inline: var(--mel-canal); background: var(--mel-color-fondo); }
  .ciu-guia__texto p + p { margin-top: var(--mel-espacio-dentro); }
  .ciu-guia__pregunta { border-bottom: var(--mel-borde-fino) solid var(--mel-color-borde); }
  .ciu-guia__pregunta:last-of-type { border-bottom: 0; } /* la raya de la sección siguiente ya cierra la lista */
  .ciu-guia__pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--mel-espacio-dentro); min-height: var(--mel-fila-enlace); padding-block: var(--mel-espacio-dentro); font-weight: var(--mel-peso-medio); color: var(--mel-color-titulo); cursor: pointer; }
  .ciu-guia__pregunta summary .mel-icono { flex: none; color: var(--mel-color-texto-secundario); transition: rotate var(--mel-mov-rapido); }
  .ciu-guia__pregunta[open] summary .mel-icono { rotate: 180deg; }
  .ciu-guia__respuesta { padding-bottom: var(--mel-espacio-dentro); color: var(--mel-color-texto-secundario); }
}