/* Agrandir es la tipografía del diseño de Canva (Pangram Pangram).
   Coloca los .woff2 con licencia en assets/fonts/ para verla exacta;
   mientras tanto se usa Archivo expandida como sustituto. */
@font-face { font-family: "Agrandir"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/Agrandir-Regular.woff2") format("woff2"); }
@font-face { font-family: "Agrandir"; font-weight: 700; font-display: swap;
  src: url("assets/fonts/Agrandir-Bold.woff2") format("woff2"); }

:root {
  --agr: "Agrandir", "Archivo", system-ui, sans-serif;
  --spartan: "League Spartan", "Agrandir", sans-serif;
  --paper: #f8f8f8;
  --grad: linear-gradient(90deg, #8461f4 0%, #d996dc 100%);
  --letterbox: #16121c;
  --ui: rgba(20, 16, 28, .72);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--letterbox);
  color: #000;
  font-family: var(--agr);
  font-stretch: 112%; /* acerca el ancho de Archivo al de Agrandir */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Escenario 1920×1080 (medidas del Canva) ---------- */
.deck { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; }
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, .5));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.track {
  display: flex; height: 100%;
  transform: translateX(calc(var(--i, 0) * -1920px));
  transition: transform .7s var(--ease);
}
.track.dragging { transition: none; }
.slide { position: relative; flex: 0 0 1920px; height: 1080px; overflow: hidden; }
.slide.light { background: var(--paper); }
.slide.grad  { background: var(--grad); }

/* Elementos posicionados en px del diseño */
.box, .frame, .t { position: absolute; margin: 0; }
.frame { overflow: hidden; display: block; isolation: isolate; }
.frame > img, .frame > video {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.t { white-space: pre; font-weight: 400; color: inherit; text-decoration: none; }
div.t { white-space: normal; } /* bloque con varios párrafos */
.t p { margin: 0; white-space: pre; }
.t b { font-weight: 700; }
a.t:hover { text-decoration: underline; }
.email { background: var(--grad); transition: filter .2s; }
.email:hover { filter: brightness(1.08); }
img { -webkit-user-drag: none; }

/* Indicador de sonido sobre videos */
.frame video { cursor: pointer; }

/* ---------- Controles (fuera del escenario, no escalan) ---------- */
.nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--ui); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  transition: opacity .3s, background .2s;
}
.nav:hover { background: rgba(132, 97, 244, .9); }
.nav svg, .icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.prev { left: max(16px, env(safe-area-inset-left)); }
.next { right: max(16px, env(safe-area-inset-right)); }
.nav:disabled { opacity: 0 !important; pointer-events: none; }

.bar {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: var(--ui); color: #fff; backdrop-filter: blur(8px);
  font: 600 14px/1 system-ui, sans-serif; font-stretch: 100%;
  transition: opacity .3s;
}
.dots { display: flex; gap: 7px; }
.dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .4); cursor: pointer;
  transition: width .3s var(--ease), background .3s;
}
.dots button[aria-selected="true"] { width: 24px; background: #fff; }
.count { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.icon {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center;
}
.icon:hover { background: rgba(255, 255, 255, .15); }
.icon svg { width: 20px; height: 20px; }
#sound .w { display: none; }
#sound[aria-pressed="true"] .w { display: inline; }
#sound[aria-pressed="true"] .x { display: none; }

.idle .nav, .idle .bar { opacity: 0; }
.idle { cursor: none; }
button:focus-visible { outline: 2px solid #d996dc; outline-offset: 2px; }

@media (max-width: 640px) {
  .nav { width: 40px; height: 40px; }
  .dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .track { transition: none; } }