/* Proyectos Arquitectónicos · pantalla de espera · base común de las cuatro propuestas */

/* letras alojadas en el propio servidor (sin peticiones a terceros), un archivo fijo por grosor:
   así todos los navegadores pintan el mismo grosor */
@font-face { font-family: "PA Montserrat"; src: url("fuentes/montserrat-250.woff2") format("woff2"); font-weight: 250; font-style: normal; font-display: swap; }
@font-face { font-family: "PA Montserrat"; src: url("fuentes/montserrat-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "PA Montserrat"; src: url("fuentes/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PA Montserrat"; src: url("fuentes/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "PA Montserrat"; src: url("fuentes/montserrat-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "PA Cormorant"; src: url("fuentes/cormorant-italica-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --negro: #04070a;
  --noche: #070c12;
  --azul-noche: #0b1622;
  --plata: #e9eef3;
  --plata-2: #b7c3ce;
  --gris: #8794a3;
  --tenue: #566472;
  --cian: #8fd6ff;
  --cian-vivo: #46b4ff;
  --cian-brillo: rgba(70, 180, 255, .55);
  --sans: "PA Montserrat", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --serif: "PA Cormorant", "Cormorant Garamond", Georgia, "Times New Roman",
    "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  /* el logo mide 774 × 560 (proporción 1,382) */
  --ancho-logo: min(56vw, 600px, calc(48vh * 1.382));
  --pie: 86px;
  --curva-salida: cubic-bezier(.16, .84, .3, 1);
  --curva-muelle: cubic-bezier(.34, 1.36, .5, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--negro);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  background: var(--negro);
  color: var(--plata);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(70, 180, 255, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Escena decorativa (nunca crea scroll) ---------- */
.escena {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Composición principal ---------- */
.marca {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 26px);
  padding:
    calc(env(safe-area-inset-top, 0px) + 4vh)
    calc(env(safe-area-inset-right, 0px) + 20px)
    calc(env(safe-area-inset-bottom, 0px) + var(--pie) + 1vh)
    calc(env(safe-area-inset-left, 0px) + 20px);
  text-align: center;
}

.logo-caja {
  position: relative;
  width: var(--ancho-logo);
  aspect-ratio: 774 / 560;
  flex: none;
}
.logo-caja > img,
.logo-caja > canvas,
.logo-caja > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.textos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  max-width: 100%;
}

.nombre {
  margin: 0;
  font-weight: 500;
  font-size: clamp(11.5px, 1.45vw, 18px);
  line-height: 1.4;
  letter-spacing: .44em;
  padding-left: .44em;
  text-transform: uppercase;
  color: var(--plata);
  white-space: nowrap;
}
.nombre .letra { display: inline-block; }
.nombre .hueco { display: inline-block; width: .5em; }

.proximamente {
  margin: 0;
  font-weight: 250;
  font-size: clamp(30px, 5.2vw, 66px);
  line-height: 1.08;
  letter-spacing: .05em;
  color: #f5f8fb;
  white-space: nowrap;
}
.proximamente:lang(zh) { font-weight: 300; letter-spacing: .3em; padding-left: .3em; }

.frase {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 23px);
  line-height: 1.35;
  color: var(--plata-2);
  text-wrap: balance;
}
.frase:lang(zh) { font-style: normal; letter-spacing: .12em; }

/* ---------- Botones de cristal (relieve, volumen y profundidad) ----------
   Tres acabados en <html data-botones>: c = borde de luz (el elegido, por defecto), a = cristal líquido, b = cristal ahumado.
   Capas de cada botón: el cristal (fondo translúcido que desenfoca lo de detrás), el canto de luz (borde degradado de 1 px),
   el brillo que sigue al puntero, el volumen (luces y sombras interiores) y la sombra que lo despega del fondo.
   Referencias: Liquid Glass de Apple, la capa de brillo de Keyshot y la «Liquid Glass Card» de Kokonut UI (ya usada en BÖLIVER). */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

html[data-botones="a"] {
  /* A · cristal líquido: claro, brillo vivo arriba y un reflejo cian abajo (la luz de la base del logo) */
  --cristal-fondo: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 50%, rgba(170, 215, 255, .08) 100%);
  --cristal-filtro: blur(16px) saturate(190%) brightness(1.15);
  --cristal-canto: linear-gradient(140deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .05) 46%, rgba(190, 230, 255, .14) 72%, rgba(200, 236, 255, .7) 100%);
  --cristal-canto-ancho: 1px;
  --cristal-volumen:
    inset 0 1px 1.5px rgba(255, 255, 255, .55),
    inset 0 10px 14px -12px rgba(255, 255, 255, .3),
    inset 0 -1px 1px rgba(200, 236, 255, .25),
    inset 0 -12px 16px -12px rgba(110, 200, 255, .45);
  --cristal-sombra: 0 12px 28px -10px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
  --cristal-tinta: #ffffff;
  --cristal-luz: rgba(255, 255, 255, .32);
  --cristal-activo: 0 0 0 1px rgba(143, 214, 255, .75), 0 0 24px rgba(70, 180, 255, .42);
  --cristal-panel: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 100%), rgba(8, 13, 20, .9);
}
html[data-botones="b"] {
  /* B · cristal ahumado: oscuro, doble bisel y un fondo de luz cian */
  --cristal-fondo: linear-gradient(160deg, rgba(44, 60, 80, .55) 0%, rgba(10, 16, 24, .7) 58%, rgba(4, 8, 14, .82) 100%);
  --cristal-filtro: blur(20px) saturate(150%);
  --cristal-canto: linear-gradient(150deg, rgba(200, 236, 255, .8) 0%, rgba(200, 236, 255, .12) 30%, rgba(0, 0, 0, 0) 56%, rgba(70, 180, 255, .55) 100%);
  --cristal-canto-ancho: 1px;
  --cristal-volumen:
    inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .45),
    inset -1.5px -1.5px 1px -.5px rgba(0, 0, 0, .7),
    inset 0 9px 14px -11px rgba(200, 236, 255, .28),
    inset 0 -9px 14px -9px rgba(70, 180, 255, .42);
  --cristal-sombra: 0 16px 32px -12px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4);
  --cristal-tinta: #dcf0ff;
  --cristal-luz: rgba(143, 214, 255, .22);
  --cristal-activo: 0 0 0 1px rgba(143, 214, 255, .85), 0 0 28px rgba(70, 180, 255, .5);
  --cristal-panel: linear-gradient(160deg, rgba(34, 48, 64, .9) 0%, rgba(5, 9, 14, .94) 100%);
}
:root,
html[data-botones="c"] {
  /* C · borde de luz (el elegido por Erik el 17-oct: va por defecto): casi transparente, con un canto luminoso que gira despacio */
  --cristal-fondo: radial-gradient(130% 120% at 50% 0%, rgba(190, 225, 250, .12) 0%, rgba(120, 160, 200, .04) 62%, rgba(120, 160, 200, .02) 100%);
  --cristal-filtro: blur(26px) saturate(170%) brightness(1.06);
  --cristal-canto: conic-gradient(from var(--giro), rgba(143, 214, 255, 1), rgba(255, 255, 255, .22) 20%, rgba(143, 214, 255, .04) 48%, rgba(255, 255, 255, .85) 72%, rgba(143, 214, 255, 1));
  --cristal-canto-ancho: 1.5px;
  --cristal-volumen:
    inset 0 1px 1px rgba(255, 255, 255, .25),
    inset 0 0 20px rgba(143, 214, 255, .12);
  --cristal-sombra: 0 12px 30px -12px rgba(0, 0, 0, .85), 0 0 22px -6px rgba(70, 180, 255, .5);
  --cristal-tinta: #f0f9ff;
  --cristal-luz: rgba(190, 230, 255, .2);
  --cristal-activo: 0 0 0 1px rgba(143, 214, 255, .9), 0 0 32px rgba(70, 180, 255, .55);
  --cristal-panel: radial-gradient(140% 100% at 50% 0%, rgba(180, 215, 240, .12) 0%, rgba(180, 215, 240, 0) 70%), rgba(8, 13, 20, .9);
}

.boton3d {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 46px;
  min-width: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cristal-fondo);
  -webkit-backdrop-filter: var(--cristal-filtro);
  backdrop-filter: var(--cristal-filtro);
  color: var(--cristal-tinta);
  font: 500 13px/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--cristal-volumen), var(--cristal-sombra);
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* canto de luz: borde degradado de 1 px recortado con máscara */
.boton3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: var(--cristal-canto-ancho, 1px);
  border-radius: inherit;
  background: var(--cristal-canto);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* reflejo arriba y luz que sigue al puntero */
.boton3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 130% at var(--mx) var(--my), var(--cristal-luz), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%);
  opacity: .8;
  transition: opacity .3s ease;
  pointer-events: none;
}
.boton3d svg { width: 19px; height: 19px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.boton3d:hover { transform: translateY(-1.5px) scale(1.045); color: #fff; }
.boton3d:hover::after { opacity: 1; }
.boton3d:active { transform: scale(.93); transition-duration: .12s; }
.boton3d:focus-visible { outline: none; box-shadow: var(--cristal-volumen), var(--cristal-sombra), var(--cristal-activo); }
.boton3d[aria-pressed="true"],
.boton3d[aria-selected="true"] { color: #fff; box-shadow: var(--cristal-volumen), var(--cristal-sombra), var(--cristal-activo); }
.boton3d::before { animation: girarCanto 9s linear infinite; }
html[data-botones="a"] .boton3d::before, html[data-botones="b"] .boton3d::before, .pa-quieto .boton3d::before { animation: none; }
@keyframes girarCanto { to { --giro: 360deg; } }
.boton-icono { padding: 0; width: 46px; }

/* Cerrar = cancelar: cristal rojo */
.boton-cerrar {
  width: 36px; min-width: 36px; min-height: 36px;
  padding: 0;
  --cristal-fondo: linear-gradient(180deg, rgba(236, 96, 76, .82) 0%, rgba(178, 48, 34, .86) 100%);
  --cristal-canto: linear-gradient(140deg, rgba(255, 214, 204, .95), rgba(255, 180, 170, .18) 42%, rgba(255, 140, 120, .5));
  --cristal-luz: rgba(255, 224, 214, .32);
  --cristal-tinta: #fff;
  --cristal-sombra: 0 8px 18px -6px rgba(150, 40, 28, .75), 0 2px 5px rgba(0, 0, 0, .35);
}
.boton-cerrar svg { width: 14px; height: 14px; }

/* ---------- Pie: redes, idioma y pausa ---------- */
.pie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding:
    0
    calc(env(safe-area-inset-right, 0px) + 22px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 22px);
  pointer-events: none;
}
.pie > * { pointer-events: auto; }
.redes, .controles { display: flex; align-items: center; gap: 10px; }
.boton-idioma .nombre-idioma { min-width: 5.6em; text-align: left; }
.boton-idioma .flecha { width: 12px; height: 12px; transition: transform .2s ease; }
.boton-idioma[aria-expanded="true"] .flecha { transform: rotate(180deg); }
.boton-pausa .icono-play { display: none; }
.boton-pausa[aria-pressed="true"] .icono-pausa { display: none; }
.boton-pausa[aria-pressed="true"] .icono-play { display: block; }

.idiomas-panel {
  position: fixed;
  z-index: 30;
  isolation: isolate;
  right: calc(env(safe-area-inset-right, 0px) + 22px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  width: min(344px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 26px;
  background: var(--cristal-panel);
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, .3),
    inset 0 18px 30px -24px rgba(255, 255, 255, .25),
    0 30px 70px rgba(0, 0, 0, .65),
    0 8px 20px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  transform-origin: 100% 100%;
  animation: panelEntra .22s var(--curva-salida) both;
}
.idiomas-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: var(--cristal-canto-ancho, 1px);
  border-radius: inherit;
  background: var(--cristal-canto);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.idiomas-panel[hidden] { display: none; }
.marca { transition: opacity .25s ease; }
.pa-panel-abierto .marca { opacity: .18; }
@keyframes panelEntra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.idiomas-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 4px;
}
.idiomas-cabecera p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.idiomas-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.idiomas-lista .boton3d { justify-content: flex-start; width: 100%; font-size: 14px; }
.idiomas-lista .marca-activa {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cian-vivo);
  box-shadow: 0 0 8px var(--cian-vivo);
  flex: none;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.idiomas-lista .boton3d[aria-pressed="true"] .marca-activa { opacity: 1; transform: none; }

/* ---------- Pantallas ---------- */
@media (max-width: 600px) {
  :root { --ancho-logo: min(88vw, calc(42vh * 1.382)); --pie: 82px; }
  .nombre { letter-spacing: .3em; padding-left: .3em; font-size: clamp(10.5px, 3.05vw, 13px); }
  .pie { justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .redes, .controles { gap: 8px; }
  .boton-idioma .nombre-idioma { min-width: 0; }
  .idiomas-panel { left: 12px; right: 12px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  :root { --ancho-logo: min(80vw, 720px, calc(40vh * 1.382)); }
  .nombre { font-size: clamp(14px, 2.2vw, 20px); }
  .proximamente { font-size: clamp(44px, 7.6vw, 80px); }
  .frase { font-size: clamp(19px, 2.9vw, 27px); }
}
@media (max-width: 360px) {
  .nombre { letter-spacing: .22em; padding-left: .22em; }
  .redes .boton3d { width: 40px; min-width: 40px; }
}
@media (max-height: 520px) and (min-width: 601px) {
  :root { --ancho-logo: min(52vw, calc(52vh * 1.382)); --pie: 70px; }
  .marca { gap: 8px; padding-top: 2vh; }
  .frase { display: none; }
}

/* ---------- Pausa (navegadores sin getAnimations) ---------- */
.pa-pausa-css.pa-pausa *,
.pa-pausa-css.pa-pausa *::before,
.pa-pausa-css.pa-pausa *::after { animation-play-state: paused !important; }