/*
  ============================================================
  VARIABLES GLOBALES DE LA PLANTILLA
  ============================================================

  La creatividad está diseñada a 1366 x 1024 px.

  --deck-width: ancho lógico del diseño.
  --deck-height: alto lógico del diseño.
  --deck-ratio: proporción ancho / alto.

  No cambiar salvo que cambie el tamaño base de las imágenes.
*/
:root {
  --deck-width: 1366;
  --deck-height: 1024;
  --deck-ratio: calc(var(--deck-width) / var(--deck-height));
}

/*
  ============================================================
  BASE DEL DOCUMENTO
  ============================================================

  Se elimina scroll, márgenes y selección de texto.
  Esto ayuda a que la experiencia se parezca a una app en iPad.
*/
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/*
  BODY FIJO A PANTALLA COMPLETA

  position: fixed + inset: 0 evita scroll accidental.
*/
body {
  position: fixed;
  inset: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/*
  ============================================================
  VIEWPORT GENERAL
  ============================================================

  Ocupa toda la pantalla del navegador.
  Centra la slide tanto horizontal como verticalmente.
*/
.viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

/*
  ============================================================
  DECK / STAGE
  ============================================================

  Este es el contenedor real de la slide.

  Mantiene siempre la proporción 1366 x 1024.
  Si la pantalla es más ancha o más alta, se adapta sin deformar.
*/
.deck {
  position: relative;
  width: min(100vw, calc(100vh * var(--deck-ratio)));
  height: min(100vh, calc(100vw / var(--deck-ratio)));
  overflow: hidden;
  background: #000;
}

/*
  ============================================================
  IMÁGENES FULL SCREEN
  ============================================================

  .bkg:
  imagen de fondo de cada slide.

  .popup-img:
  imagen de fondo de cada popup.

  Ambas ocupan exactamente el tamaño del deck.
*/
.bkg,
.popup-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/*
  ============================================================
  CAPA DE INTERACCIÓN
  ============================================================

  .ui contiene los hotspots de la slide.
  Está por encima del background.
*/
.ui {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/*
  ============================================================
  HOTSPOTS
  ============================================================

  Cada hotspot es un <a> posicionado encima de la imagen.

  Las medidas se controlan desde el HTML con variables inline:

  style="
    --left: 10%;
    --top: 20%;
    --width: 15%;
    --height: 8%;
  "

  Por defecto se ven en negro semitransparente para maquetar.

  Para dejar un hotspot invisible:
  --hotspot-bg: transparent;
*/
.hotspot {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);

  display: block;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  /*
    Color visible de debug/maquetación.
    Cambiar a transparent en producción o por hotspot individual.
  */
  background: var(--hotspot-bg, rgba(0, 0, 0, 0));

  cursor: pointer;
  text-decoration: none;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/*
  ESTADOS DE LOS HOTSPOTS

  Evita bordes, subrayados o efectos visuales al tocar/clicar.
*/
.hotspot:focus,
.hotspot:active,
.hotspot:visited {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

/*
  ============================================================
  POPUPS FULL SCREEN CON FADE IN / FADE OUT
  ============================================================

  El popup siempre existe en pantalla, pero por defecto está:
  - invisible
  - sin interacción
  - por detrás visualmente

  Cuando el JS añade .is-active:
  - aparece con fade in
  - permite interacción
*/
.popup {
  position: absolute;
  inset: 0;
  z-index: 20;

  background: #000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 400ms ease,
    visibility 0s linear 250ms;
}

/*
  POPUP ACTIVO

  El JS añade esta clase cuando se abre el popup.
*/
.popup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 400ms ease,
    visibility 0s linear 0s;
}

/*
  HOTSPOT DE CIERRE DEL POPUP

  Se coloca por encima de la imagen del popup.
*/
.popup-close {
  z-index: 30;
}

/*
  BLOQUEO DE INTERACCIÓN DE LA SLIDE

  Cuando hay un popup abierto:
  - la capa .ui de la slide deja de recibir clicks
  - el popup activo sí recibe clicks
*/
body.has-popup .ui {
  pointer-events: none;
}

body.has-popup .popup.is-active {
  pointer-events: auto;
}

/*
  ============================================================
  POPUP MULTIPÁGINA
  ============================================================

  Un popup puede tener varias .popup-page (p. ej. popup-02 con 2
  páginas y navegación interna ‹ / ›). Solo una visible a la vez.
  El JS alterna .is-active entre páginas con data-popup-page.
*/
.popup-page {
  position: absolute;
  inset: 0;
  display: none;
}

.popup-page.is-active {
  display: block;
}

/*
  ============================================================
  AVISO DE ORIENTACIÓN
  ============================================================

  .rotate-guard se muestra solo cuando el dispositivo está en vertical.
*/
.rotate-guard {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #000;
  color: #fff;
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}

/*
  ============================================================
  MODO VERTICAL
  ============================================================

  Si el iPad está en vertical:
  - se muestra el aviso
  - se oculta la presentación
*/
@media (orientation: portrait) {
  .rotate-guard {
    display: flex;
  }

  .viewport {
    visibility: hidden;
  }
}

/*
  ============================================================
  MODO HORIZONTAL
  ============================================================

  Si el iPad está en horizontal:
  - se oculta el aviso
  - se muestra la presentación
*/
@media (orientation: landscape) {
  .rotate-guard {
    display: none;
  }

  .viewport {
    visibility: visible;
  }
}