/* ---------------------------------------------------------------------------
   MONITAS — pagina de enlaces (/links/)
   Extraido del <style> inline del HTML para cumplir el CSP (style-src 'self').
   Reglas identicas a las que ya estaban; no se cambio ningun valor.
   --------------------------------------------------------------------------- */

:root {
  --purple-900: #4C1D6E;
  --purple-800: #5B1E86;
  --purple:     #6B21A8;
  --magenta:    #BE2D87;
  --gold:       #F59E0B;
  --cream:      #FFF8F0;
  --ink:        #2A1733;
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: #fff;
  min-height: 100dvh;
  background: var(--purple-900);
  overflow-x: hidden;
}

/* ---------- Video de fondo (loop continuo, pantalla completa) ---------- */
.bg-blurvid, .bg-video, .bg-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
}
/* Capa trasera: el MISMO video difuminado y en movimiento rellena toda la
   pantalla en monitores anchos (efecto ambilight). Si no reproduce, muestra
   el poster difuminado como respaldo. */
.bg-blurvid {
  object-fit: cover;
  background: url("img/linktree-poster.webp") center / cover no-repeat var(--purple-900);
  filter: blur(26px) brightness(.72) saturate(1.15);
  transform: scale(1.15); /* evita bordes claros del blur */
}
/* Video principal: el arte completo, sin recortes, centrado */
.bg-video { object-fit: contain; }

/* Pantallas verticales (celulares): el video llena todo, sin capa extra */
@media (max-aspect-ratio: 3/4) {
  .bg-blurvid { display: none; }
  .bg-video { object-fit: cover; }
}
.bg-overlay {
  /* Oscurece y tiñe de morado para legibilidad de los botones */
  background:
    linear-gradient(180deg, rgba(30,10,45,.55) 0%, rgba(30,10,45,.30) 30%, rgba(30,10,45,.72) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(107,33,168,.30), transparent 60%);
  z-index: 1;
}

/* ---------- Contenido ---------- */
.wrap {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  padding-top: calc(clamp(1.5rem, 5vw, 2.5rem) + env(safe-area-inset-top));
}

/* selector idioma */
.lang {
  align-self: flex-end;
  display: inline-flex; border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 999px; overflow: hidden; backdrop-filter: blur(4px);
  background: rgba(30,10,45,.25);
}
.lang__btn {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .8rem;
  padding: .45rem .8rem; min-height: 34px; line-height: 1;
  display: inline-flex; align-items: center;
}
.lang__btn.is-active { background: #fff; color: var(--purple-900); }

/* marca */
.brand { text-align: center; margin: clamp(1.2rem, 5vh, 2.6rem) 0 clamp(1.4rem, 5vh, 2.4rem); }
.brand__mark {
  width: 74px; height: 74px; border-radius: 999px; display: grid; place-items: center;
  margin: 0 auto .8rem; background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.45); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand__mark img { width: 46px; height: 46px; display: block; }
.brand__name {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1; letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.brand__o { color: var(--gold); }
.brand__sub {
  margin-top: .5rem; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.9);
}
.brand__loc {
  margin-top: .7rem; font-size: .9rem; color: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; gap: .35rem;
}
.brand__loc svg { width: 15px; height: 15px; opacity: .9; }

/* botones */
.links { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: .85rem; }
.link {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; min-height: 60px; padding: .9rem 1.15rem;
  border-radius: 16px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.13);
  border: 1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.link:hover, .link:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.55);
  outline: none;
}
.link:active { transform: translateY(0) scale(.99); }
.link:focus-visible { box-shadow: 0 0 0 3px rgba(245,158,11,.7), 0 8px 24px rgba(0,0,0,.22); }
.link__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(255,255,255,.16);
}
.link__icon svg { width: 22px; height: 22px; }
.link__text { flex: 1; }
.link__chev { flex: none; opacity: .6; }
.link__chev svg { width: 18px; height: 18px; }

/* Acentos de color por botón (barrita/icon tint) */
.link--review .link__icon { background: rgba(245,158,11,.28); color: var(--gold); }
.link--facebook .link__icon { background: rgba(59,130,246,.30); color: #93c5fd; }
.link--menu .link__icon { background: rgba(190,45,135,.32); color: #f9a8d4; }
.link--call .link__icon { background: rgba(34,197,94,.28); color: #86efac; }
.link--directions .link__icon { background: rgba(124,58,237,.34); color: #c4b5fd; }
.link--order .link__icon { background: rgba(245,158,11,.28); color: var(--gold); }

.link--menu {
  background: rgba(190,45,135,.30);
  border-color: rgba(255,255,255,.55);
}
.link--menu:hover, .link--menu:focus-visible { background: rgba(190,45,135,.45); }

/* footer */
.foot { margin-top: auto; padding-top: 1.8rem; text-align: center; }
.foot__hours { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.5; }
.foot__hours strong { color: #fff; }
.foot__copy { margin-top: .5rem; font-size: .72rem; color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce) {
  /* Con "movimiento reducido" activo NO se oculta el fondo:
     el video queda en pausa mostrando el arte (poster) de forma estática. */
  .link { transition: none; }
}

/* Enlaces legales (privacidad y accesibilidad) */
.foot__legal {
  margin-top: .7rem; display: flex; flex-wrap: wrap;
  gap: .3rem .9rem; justify-content: center;
}
.foot__legal a {
  color: rgba(255,255,255,.78); font-size: .78rem;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25);
}
.foot__legal a:hover, .foot__legal a:focus-visible { color: #fff; border-bottom-color: #fff; }

/* Transicion suave al navegar entre paginas (CSS puro, sin JS) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }