/* ============================================
   Saint Germain - Custom Styles
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primary: #0C2340;
    --primary-light: #1E3A8A;
    --primary-lighter: #2563EB;
    --accent: #EAB308;
    --accent-light: #FDE047;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --dark: #111827;
    --gray: #6B7280;
    --light: #F9FAFB;
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: #1F2937; overflow-x: hidden; }

/* Gradients & Glass */
.gradient-hero {
    position:relative; overflow:hidden;
    background:
        radial-gradient(ellipse 80% 60% at 10% 90%, rgba(37,99,235,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(30,58,138,0.5) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 50% 50%, rgba(212,168,83,0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(37,99,235,0.2) 0%, transparent 40%),
        linear-gradient(160deg, #06142a 0%, #0C2340 25%, #132f5a 50%, #1E3A8A 75%, #1a3270 100%);
}
.gradient-hero::before {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.gradient-hero::after {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, rgba(6,20,42,0.4) 0%, transparent 30%, transparent 70%, rgba(6,20,42,0.5) 100%);
}
.gradient-accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); }
.gradient-card { background: linear-gradient(180deg, rgba(12,35,64,0) 0%, rgba(12,35,64,0.85) 100%); }
.glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.2); }
.glass-dark { background: rgba(12,35,64,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.top-bar-gradient { background:linear-gradient(90deg, #050e1a 0%, #0C2340 50%, #0a1c36 100%); border-bottom:1px solid rgba(212,168,83,0.15); }

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 5px rgba(212,168,83,0.4)} 50%{box-shadow:0 0 20px rgba(212,168,83,0.8)} }
@keyframes slide-up { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-in-right { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes wave { 0%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} 60%,100%{transform:rotate(0)} }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
.animate-wave { animation: wave 2.5s ease-in-out infinite; transform-origin: 70% 70%; }

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }

/* Interactive */
.card-hover { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
.card-hover:hover .card-image { transform: scale(1.05); }
.card-image { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }

/* Buttons */
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; padding:0.75rem 2rem; border-radius:9999px; font-weight:600; transition:all 0.3s ease; display:inline-flex; align-items:center; gap:0.5rem; position:relative; overflow:hidden; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 25px -5px rgba(12,35,64,0.4); }
.btn-accent { background:linear-gradient(90deg,var(--accent),var(--accent-light)); color:var(--primary); padding:0.75rem 2rem; border-radius:9999px; font-weight:700; transition:all 0.3s ease; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 10px 25px -5px rgba(234,179,8,0.4); }
.btn-whatsapp { background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; padding:0.75rem 2rem; border-radius:9999px; font-weight:600; transition:all 0.3s; display:inline-flex; align-items:center; gap:0.5rem; }
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 10px 25px -5px rgba(37,211,102,0.4); }

/* Section Decorator */
.section-decorator { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-bottom:0.5rem; }
.section-decorator .line { width:2rem; height:2px; background:var(--accent); border-radius:1px; }
.section-decorator .diamond { width:8px; height:8px; background:var(--accent); transform:rotate(45deg); }

/* Counter Divider */
.counter-box { position:relative; }
.counter-box::after { content:''; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:60%; background:rgba(255,255,255,0.2); }
.counter-box:last-child::after { display:none; }

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:2rem; right:2rem; width:60px; height:60px; background:linear-gradient(135deg,#25D366,#128C7E); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(37,211,102,0.4); transition:all 0.3s; z-index:999; }
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 25px rgba(37,211,102,0.6); }
.whatsapp-float svg { width:32px; height:32px; fill:white; }

/* Nav Links */
.nav-link { position:relative; font-weight:500; transition:color 0.3s; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Ensino Cards */
.ensino-card { position:relative; overflow:hidden; border-radius:1.5rem; height:380px; cursor:pointer; }
.ensino-card .overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,35,64,0) 40%,rgba(12,35,64,0.9) 100%); transition:all 0.4s; }
.ensino-card:hover .overlay { background:linear-gradient(180deg,rgba(12,35,64,0.2) 0%,rgba(12,35,64,0.95) 100%); }
.ensino-card:hover img { transform:scale(1.1); }
.ensino-card img { transition:transform 0.6s; }

/* Forms */
.form-input { width:100%; padding:0.75rem 1rem; border:2px solid #E5E7EB; border-radius:0.75rem; font-size:0.95rem; transition:all 0.3s; background:#fff; }
.form-input:focus { outline:none; border-color:var(--primary-lighter); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.form-label { display:block; font-weight:600; font-size:0.875rem; color:#374151; margin-bottom:0.5rem; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-light); }

/* Admin Sidebar */
.admin-sidebar { background:linear-gradient(180deg,var(--primary),#0A1929); min-height:100vh; }
.admin-sidebar .nav-item { padding:0.75rem 1.25rem; color:rgba(255,255,255,0.7); border-radius:0.5rem; transition:all 0.2s; display:flex; align-items:center; gap:0.75rem; }
.admin-sidebar .nav-item:hover,.admin-sidebar .nav-item.active { background:rgba(255,255,255,0.1); color:#fff; }
.admin-sidebar .nav-item.active { border-left:3px solid var(--accent); }

/* Data Table */
.data-table { width:100%; border-collapse:collapse; }
.data-table thead th { background:#F9FAFB; padding:0.75rem 1rem; text-align:left; font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:#6B7280; border-bottom:2px solid #E5E7EB; }
.data-table tbody td { padding:0.75rem 1rem; border-bottom:1px solid #F3F4F6; font-size:0.9rem; }
.data-table tbody tr:hover { background:#F9FAFB; }

.stat-card { background:#fff; border-radius:1rem; padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition:all 0.3s; border:1px solid #F3F4F6; }
.stat-card:hover { box-shadow:0 10px 25px -5px rgba(0,0,0,0.1); transform:translateY(-2px); }

/* Video */
.video-card { position:relative; overflow:hidden; border-radius:1rem; aspect-ratio:16/9; }
.video-card .play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.video-card:hover .play-btn { transform:translate(-50%,-50%) scale(1.15); background:#fff; box-shadow:0 0 30px rgba(0,0,0,0.2); }

/* Hero Slider */
.hero-slide { position:absolute; inset:0; display:flex; align-items:center; }

.hero-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:20;
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
    color:#fff; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.25);
    cursor:pointer; transition:all 0.3s ease;
}
.hero-slider-arrow:hover { background:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.1); }
.hero-slider-arrow--prev { left:1.5rem; }
.hero-slider-arrow--next { right:1.5rem; }

.hero-slider-dot {
    width:12px; height:12px; border-radius:50%;
    background:rgba(255,255,255,0.35); border:2px solid rgba(255,255,255,0.5);
    cursor:pointer; transition:all 0.3s ease; padding:0;
}
.hero-slider-dot--active {
    background:var(--accent); border-color:var(--accent);
    width:32px; border-radius:6px;
    box-shadow:0 0 10px rgba(212,168,83,0.5);
}

@media (max-width: 768px) {
    .hero-slider-arrow { width:36px; height:36px; }
    .hero-slider-arrow--prev { left:0.75rem; }
    .hero-slider-arrow--next { right:0.75rem; }
}