/* ==========================================================================
   Victoria Espinela · Aviso emergente (toda la web)
   Solo se carga cuando el aviso está activado. Usa las variables de global.css,
   con valores de respaldo por si alguna página no lo carga.
   Usa <dialog>: el navegador lo pone por encima de todo, bloquea el fondo,
   cierra con Esc y devuelve el foco al cerrar.
   ========================================================================== */

.ve-aviso {
  --av-ink: var(--ve-ink, #151515);
  --av-muted: var(--ve-muted, #5E5C59);
  --av-bg: var(--ve-bg, #FBFBFA);
  --av-surface: var(--ve-stone, #E9E6E1);
  --av-ease: var(--ve-ease, cubic-bezier(.16, 1, .3, 1));
  width: min(100% - 32px, var(--av-w, 480px)); /* --av-w: tamaño elegido en el Personalizador */
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--av-ink);
  overflow: visible;
}
.ve-aviso.has-img { width: min(100% - 32px, var(--av-w, 800px)); }
.ve-aviso::backdrop { background: rgba(21, 21, 21, .55); opacity: 0; transition: opacity .4s ease; }
.ve-aviso.is-open::backdrop { opacity: 1; }

.ve-aviso__card {
  position: relative;
  display: grid;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--av-bg);
  box-shadow: 0 24px 64px rgba(21, 21, 21, .22);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .5s var(--av-ease), transform .6s var(--av-ease);
}
.ve-aviso.is-open .ve-aviso__card { opacity: 1; transform: none; }

/* Foto: arriba en móvil, a la izquierda en escritorio */
.ve-aviso__media { background: var(--av-surface); aspect-ratio: 16 / 10; overflow: hidden; }
.ve-aviso__img { display: block; width: 100%; height: 100%; max-width: none !important; object-fit: cover; }
@media (min-width: 720px) {
  .ve-aviso.has-img .ve-aviso__card { grid-template-columns: 9fr 11fr; }
  .ve-aviso.has-img .ve-aviso__media { aspect-ratio: auto; min-height: 380px; }
}

.ve-aviso__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px 28px 28px; }
@media (min-width: 720px) { .ve-aviso__body { padding: 56px 48px 44px; } }

.ve-aviso__title {
  margin: 0; padding-right: 24px;
  font-family: var(--ve-serif, Georgia, "Times New Roman", serif); font-weight: 400;
  font-size: clamp(30px, 24px + 1.6vw, 40px); line-height: 1.08; letter-spacing: -.01em;
  color: var(--av-ink); text-wrap: balance;
}
.ve-aviso__title em { font-style: italic; }
.ve-aviso__title--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ve-aviso__text { font-family: var(--ve-sans, system-ui, sans-serif); font-size: 16px; line-height: 1.6; color: var(--av-muted); text-wrap: pretty; }
.ve-aviso__text p { margin: 0 0 .7em; }
.ve-aviso__text p:last-child { margin-bottom: 0; }

.ve-aviso__actions { margin-top: 8px; }
.ve-aviso__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 30px;
  border: 0; border-radius: 999px; background: var(--av-ink); color: #FFF;
  font-family: var(--ve-sans, system-ui, sans-serif); font-size: 15px; font-weight: 500; line-height: 1.2;
  text-decoration: none; text-transform: none; cursor: pointer;
  transition: background-color .2s, transform .15s;
}
.ve-aviso__btn:hover, .ve-aviso__btn:focus { background: #333; color: #FFF; }
.ve-aviso__btn:active { transform: scale(.98); }
@media (max-width: 479px) { .ve-aviso__btn { width: 100%; } }

.ve-aviso__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--av-bg); color: var(--av-ink); cursor: pointer;
  transition: background-color .2s;
}
.ve-aviso__close:hover { background: var(--av-surface); }
.ve-aviso__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ve-aviso :focus-visible { outline: 2px solid var(--av-ink); outline-offset: 3px; }
.ve-aviso__card:focus, .ve-aviso__card:focus-visible { outline: none; }
.ve-aviso .ve-aviso__btn:focus-visible { outline-offset: 3px; }

/* Con el aviso abierto, la página de detrás no se desplaza */
html.ve-aviso-abierto { overflow: hidden; }

/* ---------- Tipo "Solo foto": la imagen entera, sin recuadro ----------
   Ancho = el tamaño elegido, pero nunca más del que cabe en el alto de la pantalla
   (--av-ratio = ancho / alto de la foto), así la foto siempre se ve completa. */
.ve-aviso--foto {
  width: min(100% - 32px, var(--av-w, 560px), (100dvh - 32px) * var(--av-ratio, 1));
}
.ve-aviso--foto .ve-aviso__card { display: block; background: transparent; overflow: visible; box-shadow: none; }
.ve-aviso__foto-link { display: block; line-height: 0; }
.ve-aviso__foto {
  display: block; width: 100%; height: auto; max-width: none !important;
  box-shadow: 0 24px 64px rgba(21, 21, 21, .3);
}
.ve-aviso--foto .ve-aviso__close { box-shadow: 0 2px 10px rgba(21, 21, 21, .18); }
.ve-aviso__foto-link:focus-visible { outline: 2px solid #FFF; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ve-aviso::backdrop, .ve-aviso__card { transition: none; }
  .ve-aviso__card { transform: none; }
}