/* =========================================================
   AW+ Holding | Landing con video de fondo
   Responsive: móviles, tablets, portátiles 14"+, escritorio, TV
   ========================================================= */

:root {
  --ink: #f2f4f4;          /* texto principal sobre el video */
  --ink-soft: #b9c0c1;     /* texto secundario */
  --stone: #1c1f20;        /* fondo base, tono del humo oscuro del video */
  --smoke: #4b5153;        /* gris medio del humo */
  --focus: #ffffff;

  --pad-x: clamp(1rem, 0.4rem + 2.4vw, 4.5rem);
  --pad-y: clamp(1rem, 0.5rem + 1.6vw, 3.5rem);
  --ctrl: clamp(2.75rem, 1.9rem + 1.7vw, 6.5rem);   /* 44px mínimo táctil, crece en TV */
  --fs-legal: clamp(0.8125rem, 0.6rem + 0.5vw, 2.25rem);

  /* Proporción del video original */
  --ratio: 1.7778; /* 16 / 9 */
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--stone);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
}

/* ---------- Escenario a pantalla completa ---------- */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;          /* respaldo */
  height: 100dvh;         /* navegadores modernos: ignora barras del navegador móvil */
  overflow: hidden;
  background: var(--stone);
  isolation: isolate;
}

/* ---------- Video de fondo ----------
   Por defecto llena toda la pantalla (equivalente a object-fit: cover)
   manteniendo el logo del video centrado. */
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  width: max(100vw, 177.78dvh);
  height: max(56.25vw, 100dvh);
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: 50% 50%;
  background: transparent;
  pointer-events: none;
}

.bg-video.nojs { position: fixed; }

/* Luz ambiental (solo visible cuando el video no cubre toda la pantalla) */
.ambient {
  position: absolute;
  inset: -10%;
  z-index: 0;
  width: 120%;
  height: 120%;
  filter: blur(40px) saturate(0.9);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Capa para legibilidad del pie y profundidad */
.shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 22%);
}

/* ---------- Pie con marca legal y controles ---------- */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:
    var(--pad-y)
    calc(var(--pad-x) + env(safe-area-inset-right, 0px))
    calc(var(--pad-y) + env(safe-area-inset-bottom, 0px))
    calc(var(--pad-x) + env(safe-area-inset-left, 0px));
}

.legal {
  margin: 0;
  font-size: var(--fs-legal);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.controls {
  display: flex;
  gap: calc(var(--ctrl) * 0.22);
}

.ctrl {
  display: grid;
  place-items: center;
  width: var(--ctrl);
  height: var(--ctrl);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(20, 22, 23, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ctrl:hover { background: rgba(20, 22, 23, 0.6); border-color: rgba(255, 255, 255, 0.55); }

.ctrl:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.i {
  width: 44%;
  height: 44%;
  fill: currentColor;
}

/* Estados de iconos */
.i-play, .i-sound { display: none; }
#btnPlay[aria-pressed="true"] .i-pause { display: none; }
#btnPlay[aria-pressed="true"] .i-play  { display: block; }
#btnSound[aria-pressed="true"] .i-muted { display: none; }
#btnSound[aria-pressed="true"] .i-sound { display: block; }

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

/* =========================================================
   Pantallas verticales angostas (celulares en vertical)
   Con "cover" el logo se recortaría por los lados; el video se
   escala para que el logo quepa completo y los bordes se funden
   con la luz ambiental.
   ========================================================= */
@media (max-aspect-ratio: 2/3) {
  .bg-video {
    width: 260vw;
    height: 146.25vw;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .ambient { opacity: 0.9; }
}

/* Celulares en horizontal (poca altura) */
@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --pad-y: 0.75rem;
    --ctrl: 2.75rem;
  }
}

/* Pantallas ultra panorámicas (más de 3:1): evita recortar el logo arriba y abajo */
@media (min-aspect-ratio: 3/1) {
  .bg-video {
    width: 231vh;
    height: 130vh;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .ambient { opacity: 0.9; }
}

/* Televisores y monitores grandes: el pie gana aire */
@media (min-width: 2560px) {
  .ctrl { border-width: 2px; }
}

/* Preferencia de movimiento reducido: se muestra el poster fijo */
@media (prefers-reduced-motion: reduce) {
  .ambient { transition: none; }
}