:root { /* Colors */ --color-carbon-black: #0B0C10; --color-electric-cyan: #00E0FF; --color-pure-white: #FFFFFF; --color-premium-grey: #A9B1B7; --color-darker-black: #050608; /* Fonts */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; /* Spacing */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 80px; --spacing-xxl: 160px; /* Borders & Glow */ --border-cyan: 1px solid var(--color-electric-cyan); --glow-cyan-soft: 0 0 14px rgba(0, 224, 255, 0.45); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: 1px solid rgba(255, 255, 255, 0.1); --glass-blur: blur(10px); } 
/* Reset básico */ 
* { margin: 0; padding: 0; box-sizing: border-box; } 
body { background-color: var(--color-carbon-black); color: var(--color-pure-white); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } 
/* Tipografia */ 
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-pure-white); } 
h1 { font-size: 4rem; line-height: 1.1; letter-spacing: -1px; margin-bottom: var(--spacing-md); } 
h2 { font-size: 2.5rem; margin-bottom: var(--spacing-md); } 
h3 { font-size: 1.8rem; } 
.subtitle { font-family: var(--font-heading); font-weight: 400; color: var(--color-premium-grey); font-size: 1.1rem; margin-bottom: var(--spacing-sm); line-height: 1.4; } 
.description { font-size: 1.2rem; font-weight: 500; color: var(--color-pure-white); margin-bottom: var(--spacing-lg); } 
p { color: var(--color-premium-grey); font-size: 1rem; } 
a { text-decoration: none; color: inherit; transition: all 0.3s ease; } 
ul { list-style: none; } 
/* Utilitários */ 
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } 
.text-highlight { color: var(--color-electric-cyan); } 
.text-cyan { color: var(--color-electric-cyan); } 
.text-grey { color: var(--color-premium-grey); } 
.text-center { text-align: center; } 
.flex { display: flex; } 
.flex-col { flex-direction: column; } 
.items-center { align-items: center; } 
.justify-center { justify-content: center; } 
.justify-between { justify-content: space-between; } 
.grid { display: grid; } 
.grid-2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } 
.gap-md { gap: var(--spacing-md); } 
.gap-lg { gap: var(--spacing-lg); } 
.relative { position: relative; } 
.z-10 { z-index: 10; } 
/* Botões */ 
.btn { display: inline-block; padding: 16px 32px; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; background-color: var(--color-electric-cyan); border: none; border-radius: 12px; color: #000000; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--glow-cyan-soft); } 
.btn:hover { background-color: #33E6FF; box-shadow: 0 0 20px rgba(0, 224, 255, 0.6); transform: translateY(-1px); } 
/* Cards */ 
.card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); padding: var(--spacing-lg); border-radius: 16px; transition: all 0.4s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; height: 100%; } 
.card:hover { transform: translateY(-5px); border-color: var(--color-electric-cyan); box-shadow: 0 0 20px rgba(0, 224, 255, 0.3); } 
.card.text-center { text-align: center; align-items: center; } 
/* Agent Card */ 
.agent-card { transition: all 0.3s ease; text-align: center; } 
.agent-card:hover { border-color: var(--color-electric-cyan); box-shadow: 0 0 15px rgba(0, 224, 255, 0.3); transform: scale(1.02); } 
.agent-card:hover h3 { color: var(--color-electric-cyan); } 
/* Footer */ 
.footer-content { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-lg); flex-wrap: nowrap; } 
.footer-column { flex: 1; min-width: 180px; } 
.footer-links-list li { margin-bottom: 12px; } 
.footer-links-list a { color: var(--color-premium-grey); font-size: 0.95rem; transition: color 0.3s ease; } 
.footer-links-list a:hover { color: var(--color-electric-cyan); text-shadow: 0 0 8px rgba(0, 224, 255, 0.4); } 
/* Seções */ 
section { padding: var(--spacing-xl) 0; position: relative; } 
/* HERO GERAL */ 
.hero { min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-premium-grey); font-family: monospace; transition: all 0.3s ease; position: relative; } 
/* HERO HOME */ 
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-carbon-black); z-index: 0; overflow: hidden; } 
.hero-bg::before { content: none !important; display: none !important; background: none !important; animation: none !important; } 
.hero-bg canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } 
.hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(0, 224, 255, 0.05) 0%, transparent 80%); pointer-events: none; z-index: 2; } 
/* Container HERO */ 
.hero .container { background-color: rgba(11, 12, 16, 0.85); backdrop-filter: blur(5px); padding: var(--spacing-lg); border-radius: 24px; border: 1px solid rgba(0, 224, 255, 0.1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); position: relative; z-index: 10; } 
/* HERO INTERNAS */ 
.hero-internal .container { max-width: 900px; } 
.hero-internal p, .hero-internal li { font-size: 1.2rem; } 
/* Placeholders */ 
.placeholder-logo { width: 180px; height: 60px; } 
.placeholder-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; margin-top: var(--spacing-xl); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); border: 1px solid var(--color-electric-cyan); box-shadow: 0 0 30px rgba(0, 224, 255, 0.2); position: relative; z-index: 20; } 
.placeholder-video::after { content: '▶'; font-size: 5rem; color: var(--color-electric-cyan); filter: drop-shadow(0 0 20px var(--color-electric-cyan)); } 
.placeholder-avatar { width: 140px; height: 140px; border-radius: 50%; margin-bottom: var(--spacing-md); border: 2px solid var(--color-electric-cyan); box-shadow: 0 0 20px rgba(0, 224, 255, 0.3); background-color: #111; } 
.placeholder-image-atendente { width: 100%; height: 500px; border-radius: 24px; background: #1a1a1a; border: 1px solid #333; display: flex; align-items: center; justify-content: center; color: #666; } 
/* Grid agentes */ 
.agents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-xl); } 
/* Steps */ 
.step { position: relative; padding: var(--spacing-md); } 
.step h3 { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--color-electric-cyan); color: var(--color-electric-cyan) !important; display: flex; align-items: center; justify-content: center; font-size: 1.5rem !important; margin: 0 auto var(--spacing-md); box-shadow: 0 0 15px rgba(0, 224, 255, 0.3); background: transparent; } 
/* Ícones sociais */ 
.social-link { color: var(--color-premium-grey); transition: color 0.3s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; } 
.social-link:hover { color: var(--color-electric-cyan); transform: translateY(-2px); } 
/* CTA WhatsApp */ 
.whatsapp-cta-container { display: flex; align-items: center; gap: var(--spacing-md); } 
/* RESPONSIVO */ 
@media (max-width: 1024px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } .footer-content { flex-wrap: wrap; } } 
@media (max-width: 768px) { .hero h1 { font-size: 2.8rem; } .grid-2-cols { grid-template-columns: 1fr; text-align: center; } .footer-content { flex-direction: column; gap: var(--spacing-lg); } .whatsapp-cta-container { justify-content: center; } .agents-grid { grid-template-columns: 1fr; } .hero-internal p, .hero-internal li { font-size: 1.1rem; } } 
/* Fix para páginas internas */ 
.hero-internal { flex-direction: column; }

/* ==========================================================
   🔥 ADIÇÃO FINAL — SEM ALTERAR NADA DO SEU CÓDIGO ACIMA 🔥
   ========================================================== */

/* Caixa do vídeo — substitui placeholder sem quebrar nada */
.video-wrapper {
    width: 100%;
    border-radius: 24px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-electric-cyan);
    box-shadow: 0 0 30px rgba(0,224,255,0.2);
    overflow: hidden;
    margin-top: var(--spacing-xl);
}

/* Mantém o 16:9 e deixa o vídeo MAIOR */
.video-wrapper .video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

/* Iframe ocupa 100% da caixa */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}