body {
  font-family: 'Outfit', sans-serif;
  background-color: #F4F7F9; /* ice */
  color: #071830; /* navy */
  margin: 0;
  /* Flexbox para garantir que o footer fique embaixo */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Animação suave de entrada */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; opacity: 0; }
.delay-200 { animation-delay: 200ms; opacity: 0; }


/* ===== ESTILOS DO SLIDE BUTTON ===== */
.slide-button-container {
  width: 18rem;
  height: 3.5rem;
  background-color: #f3f4f6; /* gray-100 */
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  touch-action: none; /* Previne scroll no celular ao arrastar */
}

.slide-track {
  position: absolute;
  inset: 0;
}

.slide-progress {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5rem; /* Largura inicial, esconde atrás do handle */
  background-color: rgba(7, 24, 48, 0.7); /* navy com transparência */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
  z-index: 15;
}

.slide-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: #071830; /* navy */
  font-weight: 500;
  pointer-events: none;
  padding-left: 2rem; /* Espaço para o botão à esquerda */
}

.slide-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 3.5rem;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  cursor: grab;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  transition: transform 0.2s, background-color 0.3s;
  color: #0558A4; /* institutional */
}

.slide-handle:active {
  cursor: grabbing;
  transform: scale(1.05);
}

/* Quando o slide for completado, o texto some e o fundo do botão principal anima */
.slide-button-container.completed {
  background-color: #0558A4; /* institutional */
  transition: background-color 0.4s ease;
}

.slide-button-container.completed .slide-progress {
  width: 100% !important;
}

.slide-button-container.completed .slide-handle {
  background-color: transparent;
  box-shadow: none;
  color: white;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ==== DOCK ANIMATION ==== */
@keyframes float-inner {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-float-inner {
  animation: float-inner 4s ease-in-out infinite;
}

/* ==== DOCK PREMIUM ENTRANCE ANIMATION ==== */
/* 1. O fundo do dock surge e foca */
@keyframes dockReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.animate-dock-reveal {
  animation: dockReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom center;
}

/* 2. Os ícones "pulam" de forma independente */
@keyframes iconPop {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-icon-pop {
  animation: iconPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Delays para o efeito cascata (stagger) */
.delay-150 { animation-delay: 150ms; opacity: 0; }
.delay-250 { animation-delay: 250ms; opacity: 0; }
.delay-350 { animation-delay: 350ms; opacity: 0; }
.delay-450 { animation-delay: 450ms; opacity: 0; }

/* =========================================
   INTERACTIVE GRID E SPOTLIGHT
========================================= */
.interactive-grid-bg {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
    mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
}

.interactive-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(5, 88, 164, 0.08), transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.interactive-container:hover .interactive-spotlight {
    opacity: 1;
}

/* =========================================
   CURSOS PAGE ANIMATIONS (Lava Dental Style)
========================================= */

/* Hero Text Animation */
.hero-title.visible, .hero-subtitle.visible, .hero-video-container.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Fade Up General */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delays para animações simultâneas */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* Hide scrollbar for the horizontal section */
.horizontal-scroll-section::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-section {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}

/* =========================================
   EQUIPE DE MESTRES ANIMATIONS
========================================= */

/* Constellation Background (Equipe) */
.constellation-bg {
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Infinite Marquee Animation (Equipe) */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marquee-animation {
    animation: marquee 40s linear infinite;
}

/* Card Premium Effects (Equipe) */
.card-image-wrapper {
    position: relative;
}

.card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(7, 24, 48, 0.2);
    transition: background-color 0.5s ease;
    z-index: 10;
}

.group:hover .card-image-wrapper::after {
    background-color: transparent;
}

/* Custom Ken Burns effect for premium background video/image */
@keyframes kenburns {
    0% { transform: scale(1.05); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1.05); }
}

.animate-ken-burns {
    animation: kenburns 30s ease-in-out infinite;
}

#hero-scroll-container:hover .interactive-spotlight {
    opacity: 1;
}

/* Floating Animations for badges */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes float-medium {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-1.5deg); }
}

.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
    animation: float-medium 4.5s ease-in-out infinite;
}

#hero-clinica:hover .interactive-spotlight {
    opacity: 1;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 180s linear infinite;
}