/**
 * Presentación — Transformación Digital
 * Metodología: bloque principal `.deck`, elementos `__`, modificadores `--`
 * Paleta: Neon Corp (negro / rojo #ff0000 / blanco)
 */

/* =============================================================================
   1 · Design tokens (variables CSS)
   ============================================================================= */
:root {
  /* —— Neon Corp (Rojo / Blanco / Negro) —— */
  --color-bg-deep: #000000;
  --color-bg-panel: #0a0a0a;
  --color-accent-ai-1: #ff0000;
  --color-accent-ai-2: #ffffff;
  --color-gradient-ai: linear-gradient(90deg, #ffffff 0%, #ff0000 100%);
  --color-gradient-ai-linear: linear-gradient(90deg, #ffffff 0%, #ff0000 100%);

  --color-border-neon: rgba(255, 0, 0, 0.45);
  --color-border-light: rgba(255, 255, 255, 0.22);

  --color-bg-elevated: rgba(10, 10, 10, 0.96);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.88);
  --color-text-subtle: rgba(230, 230, 230, 0.72);
  --color-scrim: rgba(0, 0, 0, 0.65);

  /* —— Tipografía —— */
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-weight-display-bold: 700;
  --font-weight-display-black: 900;
  --font-weight-body: 400;
  --font-weight-body-semibold: 600;
  --letter-spacing-display-tight: 0.12em;
  --letter-spacing-display-wide: 0.22em;
  --letter-spacing-body: 0.02em;
  --line-height-body: 1.65;
  --line-height-tight: 1.15;

  --shadow-text-display:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(255, 0, 0, 0.45),
    0 0 48px rgba(255, 0, 0, 0.22);
  --shadow-text-project-neon:
    0 0 15px rgba(255, 0, 0, 0.8),
    0 0 30px rgba(255, 0, 0, 0.4);
  --shadow-text-body: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 18px rgba(0, 0, 0, 0.6);

  /* —— Espaciado y layout —— */
  --space-slide: clamp(1.5rem, 4vw, 3rem);
  --space-glass: clamp(1.5rem, 3vw, 2.5rem);
  --max-content: 1100px;
  --radius-glass: 20px;
  --radius-hologram: 16px;

  /* —— Superficies (glass sobre #0a0a0a) —— */
  --glass-fill: linear-gradient(
    155deg,
    rgba(14, 14, 14, 0.94) 0%,
    rgba(10, 10, 10, 0.9) 50%,
    rgba(6, 6, 6, 0.96) 100%
  );
  --glass-blur: 24px;
  --glass-border: rgba(255, 0, 0, 0.32);
  --glass-border-alt: rgba(255, 255, 255, 0.18);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-shadow-outer:
    0 8px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 0, 0, 0.12),
    0 0 48px rgba(255, 0, 0, 0.14),
    0 0 72px rgba(255, 255, 255, 0.04);

  /* —— Movimiento —— */
  --ease-float: ease-in-out;
  --dur-float-slow: 8s;
  --dur-float-mid: 6s;
  --dur-float-fast: 5s;
}

/* =============================================================================
   2 · Reset mínimo + documento
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  letter-spacing: var(--letter-spacing-body);
  background: var(--color-bg-deep);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================================
   3 · Fondo (canvas)
   ============================================================================= */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

/* =============================================================================
   4 · Deck (contenedor de diapositivas + snap)
   ============================================================================= */
.deck {
  position: relative;
  z-index: 1;
}

.deck-slide {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-slide);
  position: relative;
}

.deck-slide__inner {
  width: 100%;
  max-width: var(--max-content);
  opacity: 0;
  transform: translateY(40px) scale(0.96);
}

.deck-slide__inner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.deck-slide__inner--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* =============================================================================
   5 · Portada (hero)
   ============================================================================= */
.deck-logo {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto 2rem;
  filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 0, 0, 0.55));
}

.deck-hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-black);
  font-size: clamp(2rem, 7vw, 4.25rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display-wide);
  text-transform: uppercase;
  text-align: center;
  background: var(--color-gradient-ai);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: var(--shadow-text-display);
  filter: drop-shadow(0 0 24px rgba(255, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
  animation: deck-float-title var(--dur-float-mid) var(--ease-float) infinite;
}

.deck-hero__subtitle {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  background: var(--color-gradient-ai);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: var(--shadow-text-body);
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.35));
  animation: deck-float-sub calc(var(--dur-float-mid) + 0.5s) var(--ease-float) infinite 0.25s;
}

/* =============================================================================
   6 · Proyectos — glass + tipografía
   ============================================================================= */
.deck-glass {
  background: var(--glass-fill), var(--color-scrim);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border-radius: var(--radius-glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-outer), var(--glass-highlight);
  padding: var(--space-glass);
  animation: deck-float-panel var(--dur-float-slow) var(--ease-float) infinite;
}

.deck-slide:nth-child(even) .deck-glass {
  animation-delay: -2s;
  border-color: var(--glass-border-alt);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(255, 255, 255, 0.06),
    0 0 64px rgba(255, 0, 0, 0.08),
    var(--glass-highlight);
}

.deck-project__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-bold);
  font-size: clamp(1.5rem, 3.5vw, 2.35rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display-tight);
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: var(--shadow-text-project-neon);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
  animation: deck-float-text var(--dur-float-fast) var(--ease-float) infinite;
}

.deck-project__desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: clamp(1rem, 1.75vw, 1.125rem);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
  max-width: 720px;
  margin-bottom: 1.75rem;
  text-shadow: var(--shadow-text-body);
  animation: deck-float-text calc(var(--dur-float-mid) + 0.25s) var(--ease-float) infinite 0.15s;
}

/* =============================================================================
   7 · Ventana Cyber + overlay IA + capturas (.deck-hologram-img)
   ============================================================================= */
.deck-hologram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: min(36vh, 300px);
  height: min(48vh, 480px);
  max-height: min(48vh, 480px);
  padding: calc(25px + clamp(0.65rem, 2vw, 1.1rem)) clamp(0.65rem, 2vw, 1.1rem) clamp(0.65rem, 2vw, 1.1rem);
  border-radius: var(--radius-hologram);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(12, 12, 12, 0.98), rgba(0, 0, 0, 0.99));
  border: 1px solid rgba(255, 0, 0, 0.35);
  box-shadow:
    0 0 40px rgba(255, 0, 0, 0.12),
    0 0 80px rgba(255, 0, 0, 0.06),
    0 0 24px rgba(255, 255, 255, 0.04),
    inset 0 0 48px rgba(255, 0, 0, 0.03);
  animation: deck-float-holo calc(var(--dur-float-slow) - 0.5s) var(--ease-float) infinite 0.35s;
}

/* Superposición IA: cuadrícula de análisis + scanline en movimiento (sobre la zona de captura) */
.deck-hologram::before {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: calc(25px + clamp(0.65rem, 2vw, 1.1rem));
  left: clamp(0.65rem, 2vw, 1.1rem);
  right: clamp(0.65rem, 2vw, 1.1rem);
  bottom: clamp(0.65rem, 2vw, 1.1rem);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.05) 0 1px,
      transparent 1px 36px
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 43%,
      rgba(255, 0, 0, 0.12) 48.5%,
      rgba(255, 0, 0, 1) 50%,
      rgba(255, 0, 0, 0.95) 50.35%,
      rgba(255, 0, 0, 0.18) 52%,
      transparent 56%,
      transparent 100%
    );
  background-size: auto, auto, 100% 320%;
  background-position: 0 0, 0 0, 0 -40%;
  background-repeat: repeat, repeat, no-repeat;
  animation: deck-ai-overlay-scan 3.4s linear infinite;
}

.deck-hologram__chrome {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  z-index: 6;
  background: rgba(0, 0, 0, 0.82);
  border-radius: var(--radius-hologram) var(--radius-hologram) 0 0;
  border-bottom: 1px solid rgba(255, 0, 0, 0.35);
  pointer-events: none;
}

.deck-hologram__chrome::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-ai-1);
  box-shadow:
    14px 0 0 0 var(--color-accent-ai-2),
    28px 0 0 0 var(--color-accent-ai-1);
}

.deck-hologram__media {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-hologram-img {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  margin: 0 auto;
  object-fit: scale-down;
  object-position: center;
  border: 1px solid rgba(255, 0, 0, 0.5);
  border-radius: 0 0 12px 12px;
  background: rgba(0, 0, 0, 0.75);
  box-shadow:
    0 0 24px rgba(255, 0, 0, 0.2),
    0 0 48px rgba(255, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.deck-hologram-img:hover {
  box-shadow:
    0 0 36px rgba(255, 0, 0, 0.45),
    0 0 64px rgba(255, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateZ(0) scale(1.02);
}

/* =============================================================================
   7b · Ventana Neon + iframe (Avatar IA)
   ============================================================================= */
.deck-iframe-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: calc(25px + clamp(0.65rem, 2vw, 1.1rem) + 550px + clamp(0.65rem, 2vw, 1.1rem));
  padding: calc(25px + clamp(0.65rem, 2vw, 1.1rem)) clamp(0.65rem, 2vw, 1.1rem) clamp(0.65rem, 2vw, 1.1rem);
  border-radius: var(--radius-hologram);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(12, 12, 12, 0.98), rgba(0, 0, 0, 0.99));
  border: 1px solid rgba(255, 0, 0, 0.35);
  box-shadow:
    0 0 40px rgba(255, 0, 0, 0.12),
    0 0 80px rgba(255, 0, 0, 0.06),
    0 0 24px rgba(255, 255, 255, 0.04),
    inset 0 0 48px rgba(255, 0, 0, 0.03);
  animation: deck-float-holo calc(var(--dur-float-slow) - 0.5s) var(--ease-float) infinite 0.35s;
}

.deck-iframe-container__frame {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 550px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.deck-iframe-container__embed {
  flex: 1;
  width: 100%;
  min-height: 550px;
  height: 100%;
  border: 2px solid var(--color-accent-ai-1);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
  background: #000000;
}

/* =============================================================================
   8 · UI fija (progreso + hint)
   ============================================================================= */
.deck-hint {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--font-weight-body-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.deck-progress {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.deck-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.deck-progress__dot:hover {
  transform: scale(1.2);
  background: rgba(255, 255, 255, 0.25);
}

.deck-progress__dot.is-active {
  background: #ff0000;
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 0, 0, 0.75), 0 0 10px rgba(255, 255, 255, 0.35);
  transform: scale(1.35);
}

.deck-progress__dot:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 3px;
}

/* =============================================================================
   9 · Keyframes (micro-flotación)
   ============================================================================= */
@keyframes deck-float-title {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes deck-float-sub {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes deck-float-panel {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}

@keyframes deck-float-text {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes deck-float-holo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes deck-ai-overlay-scan {
  0% {
    background-position: 0 0, 0 0, 0 -55%;
  }
  100% {
    background-position: 0 0, 0 0, 0 155%;
  }
}