:root {
  --slider-bg: #0b0f14;
  --slider-fg: #e6edf3;
  --slider-muted: #a9b4c0;
  --slider-accent: #7cacf8;
  --slider-dot: #3a4859;
  --slider-dot-active: linear-gradient(45deg, #95d595, #CDDC39);
  --slider-pad: clamp(16px, 3vw, 40px);
  --slider-duration: 800ms;
}

/* Viewport y Stack para el slider */
.fullscreen-viewport {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

.fullscreen-stack {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

/* Secciones a pantalla completa */
.fullscreen-panel {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  isolation: isolate;
}

/* Dots navegación */
.fullscreen-dots {
  position: fixed;
  right: clamp(12px, 2.4vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1050;
  pointer-events: auto;
}

.fullscreen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: inherit;
  background: var(--slider-dot);
  opacity: 0.65;
  border: 1px solid #48576a;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.fullscreen-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.fullscreen-dot:focus-visible::after {
  border-color: var(--slider-accent);
}

.fullscreen-dot:hover {
  background: var(--slider-dot-active) !important;
  transform: scale(1.2);
  opacity: 0.9;
}

.fullscreen-dot.active {
  background: var(--slider-dot-active) !important;
  opacity: 1;
  transform: scale(1.25);
}

/* Etiquetas de los dots */
.fullscreen-dot-label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--slider-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.fullscreen-dot:hover + .fullscreen-dot-label,
.fullscreen-dot:focus-visible + .fullscreen-dot-label {
  opacity: 1;
}

/* Animaciones de entrada */
@keyframes slideUpReveal {
  from {
      opacity: 0;
      transform: translateY(24px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.fullscreen-reveal > * {
  opacity: 0;
  transform: translateY(24px);
}

.fullscreen-reveal.is-visible > * {
  animation: slideUpReveal var(--slider-duration) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fullscreen-reveal.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.fullscreen-reveal.is-visible > *:nth-child(2) { animation-delay: 120ms; }
.fullscreen-reveal.is-visible > *:nth-child(3) { animation-delay: 220ms; }
.fullscreen-reveal.is-visible > *:nth-child(4) { animation-delay: 320ms; }
.fullscreen-reveal.is-visible > *:nth-child(5) { animation-delay: 420ms; }

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .fullscreen-reveal > * {
      opacity: 1;
      transform: none;
      animation: none !important;
  }
  .fullscreen-viewport {
      scroll-behavior: auto;
  }
}

/* Ajustes para el header fijo */
.header {
  z-index: 1100;
}

/* Ajustes específicos para las secciones en modo fullscreen */
.fullscreen-panel.hero-slider {
  padding-top: 0;
}

.fullscreen-panel.pricing,
.fullscreen-panel.features,
.fullscreen-panel.signup,
.fullscreen-panel.why-us {
  padding: var(--slider-pad);
}

/* Asegurar que el contenido se centre correctamente */
.fullscreen-panel .pricing__grid,
.fullscreen-panel .features__timeline,
.fullscreen-panel .why-us__grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* Indicador de scroll para usuarios */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-align: center;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
  }
  40% {
      transform: translateX(-50%) translateY(-10px);
  }
  60% {
      transform: translateX(-50%) translateY(-5px);
  }
}

/* Ocultar scroll indicator en móviles */
@media (max-width: 768px) {
  .scroll-indicator {
      display: none;
  }
}

.frog-animated {
  position: absolute;
  overflow: hidden;
}

.frog-animated video {
  width: 700px;
  object-fit: cover;      /* hace zoom y recorta */
  object-position: center;/* centra el video */
}

@media (max-width: 1920px) {
  .frog-animated {
    bottom: -190px;
    left: -240px;
  }
}

@media (max-width: 1367px) {
  .frog-animated {
    bottom: -220px;
    left: -235px;
  }
}