:root {
    --atf-primary: #00B2A9;
    --atf-secondary: #4619FF;
    --atf-accent: #A40CE8;
    --atf-orange: #FF7900;
    --atf-dark: #1a1a2e;
    --atf-light: #f7f9fc;
}

* { font-family: 'Poppins', sans-serif; }
body { background: #ffffff; color: #1a1a2e; }

.atf-navbar { background: linear-gradient(135deg, var(--atf-dark) 0%, #0f0f23 100%); padding: 0.75rem 0; }
.atf-logo { color: var(--atf-primary); font-weight: 800; }
.atf-logo-accent { color: #fff; font-weight: 300; }
.navbar-dark .nav-link { color: rgba(255,255,255,0.85); font-weight: 500; }
.navbar-dark .nav-link:hover { color: var(--atf-primary); }

.btn-atf-primary { background: var(--atf-primary); border: none; color: white; font-weight: 600; transition: all 0.3s ease; }
.btn-atf-primary:hover { background: #009690; color: white; transform: translateY(-2px); }

.atf-hero { background: linear-gradient(135deg, var(--atf-dark) 0%, #0a0a1a 50%, #1e0044 100%); position: relative; overflow: hidden; }
.atf-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(0,178,169,0.2) 0%, transparent 70%); }
.atf-highlight { background: linear-gradient(90deg, var(--atf-primary), var(--atf-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.atf-badge { background: rgba(0,178,169,0.2); color: var(--atf-primary); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 500; }
.atf-hero-visual { text-align: center; font-size: 12rem; color: var(--atf-primary); filter: drop-shadow(0 0 40px rgba(0,178,169,0.5)); }

.atf-page-header { background: linear-gradient(135deg, var(--atf-dark) 0%, var(--atf-secondary) 100%); padding: 2rem 0; }

.atf-ruta-card { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s ease; color: #1a1a2e; }
.atf-ruta-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.atf-ruta-icon { font-size: 3rem; }

.atf-curso-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s ease; }
.atf-curso-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.atf-curso-imagen { height: 160px; display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; }

.atf-benefit-icon { font-size: 2.5rem; color: var(--atf-primary); }
.atf-cta { background: linear-gradient(135deg, var(--atf-primary) 0%, var(--atf-dark) 100%); }
.atf-footer { background: var(--atf-dark); }
.atf-footer a { text-decoration: none; }
.atf-footer a:hover { color: var(--atf-primary) !important; }
.atf-badge-ruta { padding: 0.35rem 0.75rem; border-radius: 12px; font-weight: 600; font-size: 0.75rem; }