/* ==========================================================================
   AVISO +18 (partes/aviso18.php): en la página de ciudad y, desde el 2026-10-11, en la portada de país
   (/ec/, /co/, /mx/), porque sus tarjetas enseñan fotos de los anuncios (riesgo 22). Es el mismo aviso
   en las dos: estas reglas vivían en ciudad-v2.css y se pasaron aquí tal cual; lo abre aviso18.js.
   Regla: SOLO tokens (--mel-*). La ventana es la del sistema (.ventana, componentes.css).
   ========================================================================== */
@layer componentes {
  /* La ventana del sistema con el chip, el enlace a los términos y los dos botones del
     sitio actual. Su velo, además, desenfoca la página hasta que se confirma la edad.
     Ícono → chip → título, 15 y 15 (el paso ícono → título); cada letra con su interlineado. */
  .v2-aviso::backdrop { backdrop-filter: blur(var(--mel-desenfoque-velo)); -webkit-backdrop-filter: blur(var(--mel-desenfoque-velo)); }
  .v2-aviso__chip { inline-size: fit-content; margin: var(--mel-espacio-grupo) auto 0; padding: var(--mel-espacio-optico) 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-micro); }
  .v2-aviso .ventana__texto a { color: var(--mel-color-enlace); }
  .v2-aviso__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-seccion); }
  .v2-aviso__boton { display: flex; align-items: center; justify-content: center; min-block-size: var(--mel-control-alto); padding: 0 var(--mel-espacio-grupo); border: var(--mel-borde-grueso) solid var(--mel-color-marca); border-radius: var(--mel-radio-sm); background: var(--mel-color-fondo); color: var(--mel-color-enlace); font-size: var(--mel-texto-micro); line-height: var(--mel-interlineado-micro); font-weight: var(--mel-peso-medio); text-decoration: none; cursor: pointer; }
  .v2-aviso__boton--entrar { background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
}