/* ==========================================================================
   PÁGINA DE CIUDAD (/ec/escorts/guayaquil/) — igual que la del sitio actual.
   Orden de Sebas, 2026-09-23. Medidas tomadas de miescort.lat/escorts/guayaquil/ a
   412 px (evidencia en documentos/auditoria/evidencia-2026-09-23/).
   Esta hoja solo se carga en la página de ciudad. No toca ninguna otra pantalla.
   ========================================================================== */

/* --- Tokens propios de esta página ---------------------------------------
   Los valores del sitio actual que no están en la escala del sistema. Cada uno dice de
   dónde sale; los demás usan los tokens de siempre. */
@layer tokens {
  .pagina-ciudad {
    --ciu-fondo-bandas: var(--mel-color-fondo-inactivo);   /* #E8E8E8: el gris que asoma entre bloques */
    --ciu-banda: var(--mel-esp-5);                          /* franja gris entre bloques y entre anuncios */
    --ciu-esp-1: 0.0625rem;                                 /* 1: relleno vertical de pestañas e insignia */
    --ciu-esp-4: 0.25rem;                                   /* 4: extracto y «/ hora» */
    --ciu-esp-7: 0.4375rem;                                 /* 7: hueco de pestañas y contadores */
    --ciu-esp-13: 0.8125rem;                                /* 13: párrafos de la ventana; aire del cierre del panel */
    --ciu-esp-17: 1.0625rem;                                /* 17: encima del título de la ventana */
    --ciu-foto-alto: 14.0625rem;                            /* 225: alto del carrusel de la tarjeta */
    --ciu-carrusel-a-la-vista: 3;                           /* casillas a la vista en el carrusel de la tarjeta (antes 2; Sebas, 2026-10-04). ciudad.js lo lee de aquí */
    --ciu-fondo-carrusel: #111111;                          /* fondo del carrusel mientras carga la foto */
    --ciu-flecha: var(--mel-icono-lg);                      /* 23: flechas del carrusel que se mueve */
    --ciu-boton-flecha: var(--mel-esp-50);                  /* 50: botones del carrusel quieto */
    --ciu-boton-flecha-lado: -0.1875rem;                    /* -3: el carrusel quieto los saca 3 px */
    --ciu-icono-pestana: 0.84875rem;                        /* 13,58 */
    --ciu-icono-verificado: var(--mel-icono-sm);            /* 14 */
    --ciu-icono-buscar: 1.125rem;                           /* 18 */
    --ciu-icono-filtrar: 0.9375rem;                         /* 15 */
    --ciu-icono-pin: 0.75rem;                               /* 12 */
    --ciu-icono-pin-tarjeta: 0.670625rem;                   /* 10,73 */
    --ciu-icono-escudo: var(--mel-esp-50);                  /* 50 */
    --ciu-icono-mas18: 3.4375rem;                           /* 55 */
    --ciu-glifo-camara: var(--mel-icono-md);                /* 17 */
    --ciu-glifo-video: 0.9375rem;                           /* 15 */
    --ciu-glifo-contador-fotos: var(--mel-esp-15);          /* 15: los contadores de la tarjeta bajan con su texto a */
    --ciu-glifo-contador-videos: var(--mel-icono-sm);       /* 14  --mel-texto-minimo (antes 17 y 15; Sebas, 2026-10-04) */
    --ciu-glifo-cerrar: var(--mel-icono-lg);                /* 23 */
    --ciu-glifo-cerrar-ventana: 1.5625rem;                  /* 25 */
    --ciu-cerrar-ventana-arriba: 1rem;                      /* 16 */
    --ciu-cerrar-ventana-lado: 1.3125rem;                   /* 21 */
    --ciu-cerrar-panel-lado: 1.3125rem;                     /* 21 */
    --ciu-fila-filtro: 3.4375rem;                           /* 55: alto de cada lista del panel */
    --ciu-texto-campo: 0.9375rem;                           /* 15: lo que se escribe en el buscador */
    --ciu-fuente-campo: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* el buscador del actual usa la del sistema */
    --ciu-interlineado-contador: 1.7;                       /* 21,66 sobre 12,74 */
    --ciu-interlineado-opcion: 1.2;                         /* opciones del panel */
    --ciu-panel-ancho: 80%;
    --ciu-velo-panel: rgb(0 0 0 / .5);
    --ciu-velo-aviso: rgb(0 0 0 / .565);
    --ciu-desenfoque-aviso: 8px;
    --ciu-opacidad-apagada: .5;
    --ciu-opacidad-flecha: .75;
    --ciu-escala-toque: .9;
    --ciu-mov-panel: var(--mel-mov-normal);                 /* 200 ms */
    --ciu-curva-panel: cubic-bezier(.25, 0, .25, 1);
    --ciu-mov-ventana: 300ms;
    --ciu-mov-galon: 100ms;
    /* Pestaña «Videos» */
    --ciu-glifo-play: var(--mel-esp-60);                    /* 60: el play sobre la miniatura */
    --ciu-glifo-play-casilla: var(--mel-esp-40);            /* 40: el mismo play, en la casilla de video del carrusel (Sebas, 2026-10-04) */
    --ciu-color-play: rgb(255 255 255 / .8);
    --ciu-color-punto: #616161;                             /* el punto entre ciudad y fecha */
    --ciu-punto: 0.125rem;                                  /* 2 */
    --ciu-esp-3: 0.1875rem;                                 /* 3: la edad se sube 3 px hacia el nombre */
    --ciu-glifo-ubicacion: var(--mel-esp-10);               /* 10 */
    --ciu-glifo-ojo-ventana: var(--ciu-esp-13);             /* 13 */
    --ciu-cerrar-circulo: var(--ciu-glifo-cerrar-ventana);  /* 25 */
    --ciu-verde-whatsapp: #0AB248;                          /* el verde del botón del actual (ver decisión 0012) */
  }
}

@layer componentes {

  /* El gris de detrás es el que asoma en las franjas: como en el actual, los bloques son
     blancos y el hueco entre ellos deja ver el fondo. */
  .pagina-ciudad main { padding-bottom: 0; }
  .ciu { background: var(--ciu-fondo-bandas); }

  /* --- Pestañas Anuncios / Videos --- */
  .ciu-pestanas { display: flex; align-items: center; padding: var(--mel-espacio-dentro) var(--mel-canal); margin-bottom: var(--mel-borde-fino); background: var(--mel-color-fondo); }
  .ciu-pestanas__mitad { flex: 1; display: flex; justify-content: center; }
  .ciu-pestanas__linea { flex: none; width: var(--mel-borde-fino); height: var(--mel-separador-alto); background: var(--mel-color-borde); }
  .ciu-pestana { display: inline-flex; align-items: center; gap: var(--ciu-esp-7); padding: var(--ciu-esp-1) var(--mel-canal); border: var(--mel-borde-fino) solid var(--mel-color-fondo); border-radius: var(--mel-radio-pildora); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); font-weight: var(--mel-peso-medio); color: var(--mel-color-titulo); text-decoration: none; }
  .ciu-pestana span { padding-top: var(--mel-espacio-optico); }
  .ciu-pestana--activa { background: var(--mel-color-marca-suave); border-color: var(--mel-color-marca-borde); color: var(--mel-color-enlace); }
  .ciu-pestana__icono { width: var(--ciu-icono-pestana); height: var(--ciu-icono-pestana); object-fit: contain; }

  /* --- Franja «Anuncios 100% verificados. Conoce más.» --- */
  .ciu-verificado { padding: var(--mel-espacio-dentro) var(--mel-canal); margin-bottom: var(--ciu-banda); background: var(--mel-color-fondo); }
  .ciu-verificado__fila { display: flex; align-items: center; justify-content: center; gap: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); }
  .ciu-verificado__texto { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro-min); }
  .ciu-verificado__icono { width: var(--ciu-icono-verificado); height: var(--ciu-icono-verificado); margin-bottom: var(--mel-borde-fino); object-fit: contain; }
  .ciu-verificado__mas { padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; font-weight: var(--mel-peso-medio); color: var(--mel-color-enlace); cursor: pointer; }

  /* --- Título, buscador y acciones --- */
  .ciu-cabeza { display: flex; flex-direction: column; padding: var(--mel-espacio-titulo) var(--mel-canal) var(--mel-espacio-dentro); background: var(--mel-color-fondo); }
  .ciu-titulo { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-semi); color: var(--mel-color-enlace); text-align: center; }
  .ciu-buscador { display: flex; align-items: center; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-grupo); padding-inline: var(--mel-espacio-grupo); border: var(--mel-borde-fino) solid var(--mel-color-marca); border-radius: var(--mel-radio-pildora); }
  .ciu-buscador__icono { flex: none; width: var(--ciu-icono-buscar); height: var(--ciu-icono-buscar); object-fit: contain; }
  .ciu-buscador input { flex: 1; min-width: 0; height: var(--mel-esp-40); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: var(--mel-color-fondo); font-family: var(--ciu-fuente-campo); font-size: var(--ciu-texto-campo); color: var(--mel-color-texto); }
  .ciu-buscador input::placeholder { font-size: var(--mel-texto-pequeno); color: var(--mel-color-texto); }
  .ciu-buscador input:focus { outline: 0; }
  .ciu-buscador:focus-within { box-shadow: var(--mel-contorno-foco) var(--mel-color-marca); }
  .ciu-cabeza__linea { height: var(--mel-borde-fino); margin-top: var(--mel-espacio-titulo); background: var(--mel-color-borde); }
  .ciu-acciones { display: flex; align-items: center; margin-top: var(--mel-espacio-dentro); }
  .ciu-acciones__linea { flex: none; width: var(--mel-borde-fino); height: var(--mel-separador-alto); background: var(--mel-color-borde); }
  .ciu-accion { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--ciu-esp-7); height: var(--mel-separador-alto); padding: 0; border: 0; background: none; font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto); text-decoration: none; cursor: pointer; }
  .ciu-accion:first-child { gap: var(--mel-espacio-dentro); }
  .ciu-accion:hover span, .ciu-accion:active span { color: var(--mel-color-enlace); text-decoration: underline; }
  .ciu-accion__icono { flex: none; object-fit: contain; }
  .ciu-accion__icono--filtrar { width: var(--ciu-icono-filtrar); height: var(--ciu-icono-filtrar); }
  .ciu-accion__icono--pin { width: var(--ciu-icono-pin); height: var(--ciu-icono-pin); }

  /* --- Lista: bloques blancos sobre el gris --- */
  .ciu-lista { display: flex; flex-direction: column; gap: var(--ciu-banda); padding-block: var(--ciu-banda); }
  .ciu-lista[aria-busy="true"] { opacity: var(--ciu-opacidad-flecha); }

  /* --- Tarjeta --- */
  .ciu-tarjeta { padding: var(--mel-espacio-titulo) var(--mel-canal); background: var(--mel-color-fondo); }
  .ciu-tarjeta__medios { position: relative; height: var(--ciu-foto-alto); border-radius: var(--mel-radio-sm); overflow: hidden; }
  .ciu-carrusel { position: relative; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: pointer; }
  .ciu-carrusel--auto { background: var(--ciu-fondo-carrusel); }
  .ciu-carrusel__pista { display: flex; height: 100%; will-change: transform; }
  .ciu-carrusel__foto { flex: none; width: calc(100% / var(--ciu-carrusel-a-la-vista)); height: 100%; overflow: hidden; }
  .ciu-carrusel__foto img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
  /* Casilla de video: quieta, nunca se reproduce ni se descarga aquí. Su portada (o, mientras no la
     tenga, el negro de los medios, como la pestaña «Videos») y encima el play de esa pestaña, más chico. */
  .ciu-carrusel__foto--video { position: relative; background: var(--mel-color-fondo-medios); }
  .ciu-carrusel__foto--video .ciu-glifo--play { font-size: var(--ciu-glifo-play-casilla); }

  /* Flechas del carrusel que se mueve solo: solo el trazo, blanco, sin fondo. */
  .ciu-carrusel__flecha { position: absolute; top: 50%; z-index: var(--mel-capa-elevada); display: flex; align-items: center; justify-content: center; width: var(--ciu-flecha); height: var(--ciu-flecha); padding: 0; border: 0; background: none; color: var(--mel-color-texto-inverso); cursor: pointer; transform: translateY(-50%); transition: opacity var(--mel-mov-rapido), transform var(--mel-mov-rapido); touch-action: manipulation; }
  .ciu-carrusel__flecha svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .ciu-carrusel__flecha--atras { left: var(--mel-espacio-dentro); }
  .ciu-carrusel__flecha--adelante { right: var(--mel-espacio-dentro); }
  .ciu-carrusel__flecha:hover { opacity: var(--ciu-opacidad-flecha); }
  .ciu-carrusel__flecha:active { transform: translateY(-50%) scale(var(--ciu-escala-toque)); }

  /* Botones del carrusel quieto: 50 × 50 con la flecha de Ionicons. */
  .ciu-carrusel__boton { position: absolute; top: 50%; z-index: var(--mel-capa-elevada); display: flex; align-items: center; justify-content: center; width: var(--ciu-boton-flecha); height: var(--ciu-boton-flecha); padding: 0; border: 0; background: none; color: var(--mel-color-texto-inverso); cursor: pointer; transform: translateY(-50%); touch-action: manipulation; }
  .ciu-carrusel__boton--atras { left: var(--ciu-boton-flecha-lado); }
  .ciu-carrusel__boton--adelante { right: var(--ciu-boton-flecha-lado); }

  /* Glifos de Ionicons: el ancho es su avance; el alto, un em. */
  .ciu-glifo { flex: none; width: calc(var(--ciu-glifo-avance) * 1em); height: 1em; overflow: visible; }
  .ciu-glifo--flecha { font-size: var(--mel-icono-lg); }
  .ciu-glifo--camara { font-size: var(--ciu-glifo-contador-fotos); }
  .ciu-glifo--video { font-size: var(--ciu-glifo-video); }
  .ciu-glifo--galon { font-size: var(--ciu-glifo-camara); color: var(--mel-color-marca); transition: transform var(--ciu-mov-galon); }
  .ciu-glifo--cerrar { font-size: var(--ciu-glifo-cerrar); }
  .ciu-glifo--cerrar-ventana { font-size: var(--ciu-glifo-cerrar-ventana); }

  /* Insignia y contadores, abajo sobre la foto. No reciben el dedo: el toque es de la foto. */
  .ciu-tarjeta__sobre { position: absolute; inset-inline: 0; bottom: 0; z-index: var(--mel-capa-elevada); display: flex; align-items: flex-end; gap: var(--mel-espacio-dentro); padding: var(--mel-espacio-dentro); pointer-events: none; }
  .ciu-insignia { padding: var(--ciu-esp-1) var(--mel-espacio-dentro); border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-minimo); line-height: var(--mel-interlineado-minimo); }
  .ciu-contadores { display: flex; gap: var(--ciu-esp-7); margin-left: auto; }
  .ciu-contadores > span { display: flex; align-items: center; gap: var(--ciu-esp-7); padding-inline: var(--ciu-esp-7); border-radius: var(--mel-radio-xs); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-minimo); line-height: var(--ciu-interlineado-contador); }
  .ciu-contadores .ciu-glifo--video { font-size: var(--ciu-glifo-contador-videos); } /* el de «Videos» sigue en 15 */

  /* Datos: el enlace del nombre cubre todo este bloque, como la tarjeta entera del actual. */
  .ciu-tarjeta__info { position: relative; margin-top: var(--mel-espacio-grupo); }
  .ciu-tarjeta__nombre { font-size: var(--mel-texto-titulo); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); text-wrap: wrap; }
  .ciu-tarjeta__nombre a { color: inherit; text-decoration: none; }
  .ciu-tarjeta__nombre a::after { content: ""; position: absolute; inset: 0; }
  .ciu-tarjeta__extracto { margin-top: var(--ciu-esp-4); font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-texto); }
  .ciu-tarjeta__datos { display: flex; justify-content: space-between; align-items: flex-end; margin-top: var(--mel-esp-8); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-etiqueta); }
  .ciu-tarjeta__precio strong { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); }
  .ciu-tarjeta__edad strong { font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); }
  .ciu-tarjeta__datos span span { margin-left: var(--ciu-esp-4); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-etiqueta); color: var(--mel-color-texto); }
  .ciu-tarjeta__linea { height: var(--mel-borde-fino); margin-block: var(--mel-esp-8); background: var(--mel-color-borde); }
  .ciu-tarjeta__lugar { display: flex; align-items: center; gap: var(--mel-espacio-dentro-min); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-texto); }
  .ciu-tarjeta__lugar b { font-weight: var(--mel-peso-medio); color: var(--mel-color-enlace); }
  .ciu-tarjeta__pin { flex: none; width: var(--ciu-icono-pin-tarjeta); height: var(--ciu-icono-pin-tarjeta); object-fit: contain; }

  /* --- Paginación: «1 2 3 … 6 →», y aquí los enlaces sí abren. Cada número ocupa un círculo
     del mismo tamaño, que es también su área táctil (30); la página actual lo rellena de
     morado (orden de Sebas, 2026-09-24). --- */
  .ciu-paginacion { padding: var(--mel-espacio-grupo) var(--mel-canal); background: var(--mel-color-fondo); }
  .ciu-paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mel-espacio-optico); margin: 0; padding: 0; list-style: none; }
  .ciu-paginacion .page-numbers { display: grid; place-items: center; min-width: var(--mel-tactil-min); height: var(--mel-tactil-min); border-radius: var(--mel-radio-pildora); font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); font-variant-numeric: tabular-nums; color: var(--mel-color-texto); text-decoration: none; transition: color var(--mel-mov-rapido); }
  .ciu-paginacion a.page-numbers:hover, .ciu-paginacion a.page-numbers:active { color: var(--mel-color-marca); }
  /* Las flechas son íconos, no texto: van al tamaño de ícono grande para que se vean y se toquen bien. */
  .ciu-paginacion .prev, .ciu-paginacion .next { font-size: var(--mel-icono-lg); line-height: 1; color: var(--mel-color-marca); } /* morado: Sebas, 2026-09-24 */
  /* La actual no se toca (no es enlace): su círculo puede ser algo menor, 25. */
  .ciu-paginacion .current { min-width: var(--mel-esp-25); height: var(--mel-esp-25); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }

  .ciu-vacio { padding: var(--mel-espacio-bloque) var(--mel-canal); background: var(--mel-color-fondo); text-align: center; }
  .ciu-vacio h2 { font-size: var(--mel-texto-titulo); line-height: var(--mel-interlineado-titulo); }
  .ciu-vacio p { margin-top: var(--mel-espacio-grupo); }

  /* --- Ventanas: «Conoce más.» y aviso +18 --- */
  .ciu-ventana { margin: auto; width: calc(100% - var(--mel-espacio-titulo)); max-width: var(--mel-ancho-ventana); padding: var(--mel-espacio-cabecera) var(--mel-espacio-titulo); border: 0; border-radius: 0; background: var(--mel-color-fondo); color: var(--mel-color-texto); text-align: center; overflow: visible; }
  .ciu-ventana[open] { animation: ciu-acercar var(--ciu-mov-ventana) both; }
  .ciu-ventana::backdrop { background: var(--ciu-velo-panel); }
  .ciu-ventana--aviso::backdrop { background: var(--ciu-velo-aviso); backdrop-filter: blur(var(--ciu-desenfoque-aviso)); -webkit-backdrop-filter: blur(var(--ciu-desenfoque-aviso)); }
  .ciu-ventana__in { display: flex; flex-direction: column; align-items: center; }
  /* Al abrir, el foco entra en la ventana entera (para el teclado y el lector), sin marco: el
     actual no enseña ninguno. Los botones y enlaces de dentro sí lo enseñan al recorrerlos. */
  .ciu-ventana__in:focus, .ciu-panel__in:focus { outline: 0; }
  .ciu-ventana__cerrar { position: absolute; top: var(--ciu-cerrar-ventana-arriba); right: var(--ciu-cerrar-ventana-lado); display: flex; padding: 0; border: 0; background: none; color: var(--mel-color-marca); cursor: pointer; }
  .ciu-ventana__icono { object-fit: contain; }
  .ciu-ventana__icono--escudo { width: var(--ciu-icono-escudo); height: var(--ciu-icono-escudo); }
  .ciu-ventana__icono--mas18 { width: var(--ciu-icono-mas18); height: var(--ciu-icono-mas18); }
  .ciu-ventana__titulo { margin: var(--ciu-esp-17) 0 var(--ciu-esp-13); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-enlace); }
  .ciu-ventana__textos { display: flex; flex-direction: column; gap: var(--ciu-esp-13); }
  .ciu-ventana__textos p, .ciu-aviso18__texto, .ciu-aviso18__terminos p { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto); }

  .ciu-aviso18__chip { margin-block: var(--mel-espacio-titulo); padding: 0 var(--mel-espacio-dentro); border: var(--mel-borde-fino) solid var(--mel-color-marca-borde); border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca-suave); color: var(--mel-color-enlace); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); }
  .ciu-aviso18__titulo { margin: 0 0 var(--mel-espacio-dentro); }
  .ciu-aviso18__terminos { display: flex; flex-direction: column; gap: var(--mel-espacio-dentro-min); margin-top: var(--mel-espacio-grupo); }
  .ciu-aviso18__terminos a { color: var(--mel-color-enlace); }
  .ciu-aviso18__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-seccion); }
  .ciu-aviso18__boton { display: flex; align-items: center; justify-content: center; padding: var(--mel-espacio-dentro) var(--mel-espacio-grupo); border: var(--mel-borde-grueso) solid var(--mel-color-marca); border-radius: var(--mel-radio-sm); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); font-weight: var(--mel-peso-medio); text-decoration: none; cursor: pointer; }
  .ciu-aviso18__boton--entrar { background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
  .ciu-aviso18__boton--salir { background: var(--mel-color-fondo); color: var(--mel-color-enlace); }

  /* --- Panel «Filtrar anuncios»: entra por la izquierda --- */
  .ciu-panel { position: fixed; inset: 0 auto 0 0; width: var(--ciu-panel-ancho); max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--mel-espacio-cabecera) var(--mel-espacio-seccion); border: 0; background: var(--mel-color-fondo); color: var(--mel-color-texto); overflow-y: auto; }
  .ciu-panel[open] { animation: ciu-entrar var(--ciu-mov-panel) var(--ciu-curva-panel) both; }
  .ciu-panel.ciu-saliendo { animation: ciu-salir var(--ciu-mov-panel) var(--ciu-curva-panel) both; }
  .ciu-panel::backdrop { background: var(--ciu-velo-panel); }
  .ciu-panel__in { display: flex; flex-direction: column; gap: var(--mel-espacio-seccion); }
  .ciu-panel__cerrar { position: absolute; top: var(--ciu-esp-13); right: var(--ciu-cerrar-panel-lado); display: flex; padding: 0; border: 0; background: none; color: var(--mel-color-marca); cursor: pointer; }
  .ciu-panel__titulo { display: flex; align-items: center; gap: var(--mel-espacio-grupo); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-medio); color: var(--mel-color-enlace); }
  .ciu-panel__icono { width: var(--ciu-icono-buscar); height: var(--ciu-icono-buscar); object-fit: contain; }
  .ciu-filtro { border-bottom: var(--mel-borde-fino) solid var(--mel-color-borde); }
  .ciu-filtro__titulo { display: flex; align-items: center; justify-content: space-between; min-height: var(--ciu-fila-filtro); list-style: none; font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-micro); color: var(--mel-color-titulo); cursor: pointer; }
  .ciu-filtro__titulo::-webkit-details-marker { display: none; }
  .ciu-filtro[open] .ciu-glifo--galon { transform: rotate(90deg); }
  .ciu-filtro__opciones { display: flex; flex-wrap: wrap; gap: var(--mel-espacio-dentro); margin: 0; padding: var(--mel-espacio-dentro) 0 var(--mel-espacio-seccion); list-style: none; }
  .ciu-opcion { position: relative; display: flex; cursor: pointer; }
  .ciu-opcion input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
  .ciu-opcion span { display: inline-flex; padding: .5em var(--mel-pildora-relleno); border: var(--mel-borde-fino) solid var(--mel-color-marca); border-radius: var(--mel-radio-pildora); font-size: var(--mel-texto-micro); line-height: var(--ciu-interlineado-opcion); color: var(--mel-color-texto); }
  .ciu-opcion input:checked + span { background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
  .ciu-opcion input:focus-visible + span { outline: var(--mel-foco-ancho) solid var(--mel-foco-color); outline-offset: var(--mel-foco-separacion); }
  .ciu-opcion:has(input:disabled) { opacity: var(--ciu-opacidad-apagada); cursor: default; }

  /* --- Pestaña «Videos»: tarjetas pegadas unas a otras sobre el gris, como en el actual --- */
  .ciu-lista--videos { gap: 0; }
  .ciu-video { position: relative; padding: var(--mel-espacio-titulo) var(--mel-canal); background: var(--mel-color-fondo); }
  .ciu-video__medios { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--mel-radio-sm); overflow: hidden; background: var(--mel-color-fondo-medios); }
  .ciu-video__mini { width: 100%; height: 100%; object-fit: contain; }
  .ciu-glifo--play { position: absolute; top: 50%; left: 50%; font-size: var(--ciu-glifo-play); color: var(--ciu-color-play); transform: translate(-50%, -50%); }
  .ciu-video__sobre { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mel-espacio-dentro); padding: var(--mel-espacio-dentro); }
  .ciu-video__sobre > span { display: flex; align-items: center; gap: var(--ciu-esp-7); padding-inline: var(--ciu-esp-7); border-radius: var(--mel-radio-xs); background: var(--mel-color-velo); color: var(--mel-color-texto-inverso); font-size: var(--mel-texto-micro); line-height: var(--ciu-interlineado-contador); }
  .ciu-video__info { margin-top: var(--mel-espacio-grupo); }
  .ciu-video__quien { font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-enlace); }
  .ciu-video__titulo { margin-top: var(--mel-espacio-optico); font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); text-wrap: wrap; }
  .ciu-video__meta { display: flex; align-items: center; gap: var(--mel-espacio-dentro-min); margin-top: var(--ciu-esp-4); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-texto); }
  .ciu-video__meta > span:first-child { margin-bottom: var(--mel-borde-fino); }
  .ciu-video__punto { flex: none; width: var(--ciu-punto); height: var(--ciu-punto); border-radius: var(--mel-radio-pildora); background: var(--ciu-color-punto); }
  /* Toda la tarjeta se toca, como en el actual: un botón que la cubre entera. */
  .ciu-video__abrir { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }

  /* --- Ventana del video --- */
  .ciu-video-ventana { margin: auto; width: calc(100% - var(--mel-espacio-titulo)); max-width: var(--mel-ancho-ventana); padding: 0; border: 0; border-radius: 0; background: var(--mel-color-fondo); color: var(--mel-color-texto); overflow: visible; }
  .ciu-video-ventana[open] { animation: ciu-acercar var(--ciu-mov-ventana) both; }
  .ciu-video-ventana::backdrop { background: var(--ciu-velo-aviso); }
  .ciu-video-ventana__in { position: relative; }
  .ciu-video-ventana__in:focus { outline: 0; }
  .ciu-video-ventana__cerrar { position: absolute; top: var(--mel-espacio-dentro); right: var(--mel-espacio-dentro); z-index: var(--mel-capa-elevada); display: flex; align-items: center; justify-content: center; width: var(--ciu-cerrar-circulo); height: var(--ciu-cerrar-circulo); padding: 0; border: 0; border-radius: var(--mel-radio-pildora); background: var(--mel-color-fondo); color: var(--mel-color-marca); cursor: pointer; }
  .ciu-glifo--cerrar-video { font-size: var(--mel-icono-md); }
  .ciu-video-ventana__medio { aspect-ratio: 16 / 9; background: var(--mel-color-fondo-medios); }
  .ciu-video-ventana__medio video { width: 100%; height: 100%; object-fit: contain; }
  .ciu-video-ventana__datos { padding: var(--mel-espacio-titulo); }
  .ciu-video-ventana__fila { display: flex; gap: var(--mel-espacio-dentro); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-enlace); }
  .ciu-video-ventana__fila > span { display: flex; align-items: center; gap: var(--mel-espacio-dentro-min); }
  .ciu-glifo--ubicacion { font-size: var(--ciu-glifo-ubicacion); }
  .ciu-glifo--ojo { font-size: var(--ciu-glifo-ojo-ventana); }
  .ciu-video-ventana__titulo { margin: var(--mel-esp-8) 0 var(--ciu-esp-4); font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-enfasis); font-weight: var(--mel-peso-negrita); color: var(--mel-color-titulo); } /* «énfasis», un escalón abajo (Sebas, 2026-10-10) */
  .ciu-video-ventana__perfil { display: flex; align-items: center; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-titulo); }
  .ciu-video-ventana__perfil img { flex: none; width: var(--mel-esp-40); height: var(--mel-esp-40); border-radius: var(--mel-radio-pildora); object-fit: cover; }
  .ciu-video-ventana__nombre { font-size: var(--mel-texto-enfasis); line-height: var(--mel-interlineado-etiqueta); font-weight: var(--mel-peso-semi); color: var(--mel-color-titulo); }
  .ciu-video-ventana__anos { margin-top: calc(var(--ciu-esp-3) * -1); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-cuerpo); color: var(--mel-color-titulo); }
  .ciu-video-ventana__linea { height: var(--mel-borde-fino); margin-block: var(--mel-espacio-grupo); background: var(--mel-color-borde); }
  .ciu-video-ventana__botones { display: flex; gap: var(--mel-espacio-dentro); }
  .ciu-video-ventana__boton { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--mel-espacio-dentro); padding: var(--mel-esp-8) 1em; border-radius: var(--mel-radio-sm); font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); font-weight: var(--mel-peso-medio); color: var(--mel-color-texto-inverso); text-decoration: none; }
  .ciu-video-ventana__boton--wa { background: var(--ciu-verde-whatsapp); }
  .ciu-video-ventana__boton--llamar { background: var(--mel-color-marca); }
  .ciu-glifo--boton { font-size: var(--mel-icono-md); }
  /* `hidden` necesita ayuda: la base pone `display` a imágenes y enlaces y le gana al navegador. */
  [data-ciu-campo-caja][hidden], .ciu-video-ventana__boton[hidden], .ciu-video-ventana__perfil img[hidden] { display: none; }

  @keyframes ciu-acercar { from { opacity: 0; transform: scale(.3); } 50% { opacity: 1; } }
  @keyframes ciu-entrar { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes ciu-salir { from { transform: none; } to { transform: translateX(-100%); } }
}