/* ===================================================== */
/* core/css/base.css — CANVAS, TOKENS, SCROLL, NAV, RESPONSIVE */
/* ===================================================== */

/* ===================================================== */
/* TOKENS GLOBALES */
/* ===================================================== */
:root {
  /* Colores principales */
  --bg: #0b0b0b;              /* Fondo oscuro global */
  --fg: #ffffff;              /* Texto claro */
  --accent: #d81e1e;          /* Rojo MMA */

  /* Fuentes */
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial;

  /* Espaciado y animación */
  --u: 10px;                  /* Unidad base para padding, gap, etc. */
  --type-scale: 1.0;          /* Escala tipográfica */
  --ease-pro: cubic-bezier(.22, .61, .36, 1); /* Curva suave de animación */

  /* Scrollbar */
  --scrollbar-w: 6px;         /* Ancho del scrollbar */
  --scrollbar-thumb: color-mix(in srgb, var(--fg, #fff) 38%, transparent);
  --scrollbar-track: transparent;
  --scrollbar-gutter: stable both-edges;

  /* Canvas */
  --canvas-max-width: min(92vw, 1600px);
  --canvas-aspect: 16 / 9;
  --canvas-border-radius: 18px;
  --canvas-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

/* ===================================================== */
/* RESET Y LAYOUT GLOBAL */
/* ===================================================== */
* { 
  box-sizing: border-box; 
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

.app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2vmin;
}

/* ===================================================== */
/* CANVAS 16:9 GLOBAL */
/* ===================================================== */
.slide-16x9 {
  width: var(--canvas-max-width);
  aspect-ratio: var(--canvas-aspect);
  background: #000;
  border-radius: var(--canvas-border-radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--canvas-shadow);
}

/* ===================================================== */
/* RESPONSIVE GLOBAL */
/* ===================================================== */

/* Desktop: 16:9 fijo */
@media (min-width: 1025px) {
  .slide-16x9 { 
    aspect-ratio: var(--canvas-aspect); 
  }
}

/* Tablet: 16:9 flexible */
@media (max-width: 1024px) and (min-width: 481px) {
  .slide-16x9 {
    width: 95vw;
    aspect-ratio: var(--canvas-aspect);
    border-radius: 14px;
  }
}

/* Móvil real: 9:16 full vertical */
@media (max-width: 480px) {
  .slide-16x9 {
    width: 100vw !important;
    height: 100dvh !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .slide-16x9 > * {
    width: 100vw;
    height: 100dvh;
    padding: clamp(1.5rem, 6vw, 3rem);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .slide-16x9 .scroll-reserved {
    height: 100dvh;
    padding: clamp(1.5rem, 6vw, 3rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .nav-arrow {
    width: 36px;
    height: 36px;
    bottom: 1rem;
  }
  .nav-arrow svg {
    width: 20px;
    height: 20px;
  }
  .nav-arrow.left { left: 1rem; }
  .nav-arrow.right { right: 1rem; }
}

/* Ventana vertical en navegador: 9:16 */
@media (max-width: 900px) and (max-height: 800px) {
  .slide-16x9 {
    width: 100vw !important;
    height: 100dvh !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .slide-16x9 > * {
    width: 100vw;
    height: 100dvh;
    padding: clamp(1.5rem, 6vw, 3rem);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .slide-16x9 .scroll-reserved {
    height: 100dvh;
    padding: clamp(1.5rem, 6vw, 3rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .nav-arrow {
    width: 36px;
    height: 36px;
    bottom: 1rem;
  }
  .nav-arrow svg {
    width: 20px;
    height: 20px;
  }
  .nav-arrow.left { left: 1rem; }
  .nav-arrow.right { right: 1rem; }
}

/* ===================================================== */
/* NAV-ARROWS GLOBALES */
/* ===================================================== */
.nav-arrows { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  z-index: 10; 
}

.nav-arrow {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  pointer-events: auto; 
  background: none; 
  border: none; 
  padding: 0;
  color: rgba(255,255,255,.72);
  cursor: pointer; 
  transition: color 160ms ease, transform 160ms ease, opacity 160ms ease;
  width: 44px; 
  height: 44px;
}
.nav-arrow:hover { 
  color: rgba(255,255,255,.98); 
  transform: translateY(-50%) scale(1.05); 
}
.nav-arrow:active { 
  transform: translateY(-50%) scale(.97); 
}
.nav-arrow[disabled] { 
  opacity: .25; 
  pointer-events: none; 
}
.nav-arrow.left { left: 16px; }
.nav-arrow.right { right: 16px; }
.nav-arrow svg { 
  width: 28px; 
  height: 28px; 
  display: block; 
}

/* Tablet: flechas abajo */
@media (max-width: 980px) {
  .nav-arrow.right { top: auto; bottom: 14px; right: 14px; transform: none; }
  .nav-arrow.left  { top: auto; bottom: 14px; left: 14px;  transform: none; }
}

/* Móvil: flechas más pequeñas */
@media (max-width: 700px) {
  .nav-arrow svg { width: 24px; height: 24px; }
  .nav-arrow.right { right: 12px; bottom: 12px; }
  .nav-arrow.left  { left: 12px;  bottom: 12px; }
}

.is-hidden { display: none !important; }

/* Animación de llamada en flecha derecha */
@keyframes nudge-right {
  0%, 100% { transform: translateX(0); opacity: .9; }
  50%      { transform: translateX(6px); opacity: 1; }
}
.nav-arrow.right svg {
  animation: nudge-right 1.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.nav-arrow:hover svg,
.nav-arrow:focus-visible svg {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .nav-arrow.right svg { animation: none; }
}

/* ===================================================== */
/* ANIM-IN GLOBAL */
/* ===================================================== */
.anim-in {
  --in-dy: 18%;
  --in-blur: 6px;
  --in-dur: .8s;
  opacity: 0;
  transform: translateY(var(--in-dy));
  filter: blur(var(--in-blur));
  transition:
    transform var(--in-dur) var(--ease-pro),
    opacity   var(--in-dur) ease,
    filter    var(--in-dur) ease;
  will-change: transform, opacity, filter;
}
.anim-in.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.anim-in.fast { --in-dur: .55s; }
.anim-in.slow { --in-dur: 1.1s; }

/* ===================================================== */
/* SCROLL-RESERVED GLOBAL */
/* ===================================================== */
.scroll-reserved {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: var(--scrollbar-gutter);
  padding-right: var(--scrollbar-w);
  scrollbar-width: thin;
  scrollbar-color: transparent var(--scrollbar-track);
  -ms-overflow-style: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-reserved::-webkit-scrollbar {
  display: block !important;
  width: var(--scrollbar-w);
  background: var(--scrollbar-track);
}
.scroll-reserved::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.scroll-reserved::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0;
}
.scroll-reserved:hover {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.scroll-reserved:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reserved {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
  }
  .scroll-reserved::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}