/* Importação de Fontes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Configuração Básica */
body {
    background-color: #020617; /* Slate 950 */
    color: #e2e8f0; /* Slate 200 */
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Scrollbar Customizada */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a; 
}
::-webkit-scrollbar-thumb {
    background: #334155; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #dc2626; 
}

/* Efeitos Visuais */
.glass {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gradient-text {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    #display: inline-block;
}

/* Animações do Hero (Sistema Solar) */
@keyframes orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

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

/* Utilitários de Animação */
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Classes para controlar a órbita via CSS (serão aplicadas inline no HTML para facilitar o raio variável, mas a base está aqui) */
.orbit-container {
    animation: orbit linear infinite;
}
.counter-rotate {
    animation: counter-orbit linear infinite;
}



/* --- ADICIONAR AO FINAL DO STYLE.CSS --- */

/* Utilitários de Animação (Simulando tailwindcss-animate) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-in {
    animation-fill-mode: forwards;
    opacity: 0; /* Começa invisível */
}

.fade-in {
    animation-name: fadeIn;
}

.slide-in-from-left {
    animation-name: slideInLeft;
}

.slide-in-from-right {
    animation-name: slideInRight;
}

.slide-in-from-bottom {
    animation-name: slideInUp;
}

.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* Delay utilitários */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }


/* Whatsappb */
      
#robbu-whatsapp-button {
	display: flex;
	position: fixed;
	background: #25d366;
	bottom: 20px;
	border-radius: 50%;
	width: 58px;
	height: 58px;
	box-shadow: 2px 2px 12px rgba(22,124,60,.2);
	transition: .4s;
	align-items: center;
	justify-content: center
}

#robbu-whatsapp-button>.rwb-tooltip {
	position: absolute;
	bottom: 100%;
	margin-bottom: 20px;
	border-radius: 4px;
	padding: 15px;
	color: #2d2d2d;
	font-size: 16px;
	white-space: nowrap;
	box-shadow: 2px 2px 12px rgba(0,0,0,.2);
	opacity: 0;
	transition: .4s;
	pointer-events: none;
	background-color: white;
	z-index: 1;
}

#robbu-whatsapp-button>.rwb-tooltip:after {
	display: block;
	content: "";
	position: absolute;
	top: 85%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 7px 0 7px;
	border-color: #fff transparent transparent transparent;
	transition: .4s
}

#robbu-whatsapp-button.left {
	left: 25px;
	z-index: 1;
}

#robbu-whatsapp-button.left>.rwb-tooltip {
	left: 0;
	transform: translateX(-10%)
}

#robbu-whatsapp-button.left>.rwb-tooltip:after {
	left: 23px
}

#robbu-whatsapp-button:not(.left) {
	right: 25px
}

#robbu-whatsapp-button:not(.left)>.rwb-tooltip {
	right: 0;
	transform: translateX(10%)
}

#robbu-whatsapp-button:not(.left)>.rwb-tooltip:after {
	right: 23px
}

#robbu-whatsapp-button>img {
	display: block;
	width: 34px;
	height: 34px
}

#robbu-whatsapp-button:hover {
	background: #21bd5c;
	box-shadow: 3px 3px 12px rgba(14,81,39,.4)
}

#robbu-whatsapp-button:hover>.rwb-tooltip {
	opacity: 1;
	transform: translateX(0)
}

#robbu-whatsapp-button:hover>.rwb-tooltip:after {
	top: 100%;
	transition-delay: .4s
}