/* Styles specifiques a formation.html */

body,p,li,span{font-family:var(--font-b),"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

.rules-list{text-align:left}

.rule-item{display:flex;align-items:center;gap:0.8rem;padding:0.8rem 0;font-size:1rem;color:#fff;font-weight:500}

.rule-item:not(:last-of-type){border-bottom:1px solid rgba(139,92,246,0.2)}

.rule-item>i:first-child{font-size:1.2rem;min-width:24px}

.rule-item>i.fa-check{color:#10b981}

.rule-item>i.fa-xmark{color:#ef4444}

.rule-item .fa-arrow-right{color:#8b5cf6;margin:0 0.5rem;font-size:0.9rem}

.rule-footer{margin-top:1rem;text-align:center;font-style:italic}

.hero-page{padding:150px 0 80px;text-align:center;position:relative;background:transparent}

.hero-page-content h1{font-size:3.5rem;margin:1.5rem 0;line-height:1.2;font-weight:800;letter-spacing:-0.03em}

.hero-icon{font-size:0.9em;color:var(--primary);margin-right:0.3em;vertical-align:middle}

.hero-subtitle{font-weight:400}

.hero-subtitle i{color:var(--primary);margin-right:0.5rem}

.hero-page .badge{font-size:0.95rem;padding:0.7rem 1.5rem;background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(168,85,247,0.15));border:1px solid rgba(99,102,241,0.4);box-shadow:0 4px 15px rgba(99,102,241,0.25);font-weight:600}

.hero-features{margin-top:40px;display:flex;gap:30px;flex-wrap:wrap;justify-content:center;align-items:center}

.hero-feature{display:flex;align-items:center;gap:12px;padding:1rem 1.8rem;background:rgba(15,15,25,0.5);backdrop-filter:blur(10px);border:1px solid rgba(99,102,241,0.2);border-radius:12px;transition:all 0.3s ease}

.hero-feature:hover{transform:translateY(-3px);border-color:rgba(99,102,241,0.5);box-shadow:0 8px 20px rgba(99,102,241,0.3)}

.hero-feature i{font-size:1.3rem;color:var(--primary)}

.hero-feature span{font-size:1rem;font-weight:500;color:#fff}

.section{padding:80px 0;background:transparent}

.section-header{text-align:center;margin-bottom:60px}

.section-header h2{font-size:2.5rem;margin-bottom:1rem}

.section-header p{font-size:1.2rem;color:var(--text-muted);max-width:700px;margin:0 auto}

.grid{display:grid;gap:2rem}

.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{background:rgba(15,15,25,0.6);backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,0.15);border-radius:20px;padding:2.5rem;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05)}

.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent);opacity:0;transition:opacity 0.5s ease}

.card::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(99,102,241,0.3),rgba(168,85,247,0.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity 0.5s ease;pointer-events:none;z-index:1}

.card:hover{transform:translateY(-12px) scale(1.02);border-color:rgba(99,102,241,0.5);box-shadow:0 25px 50px -12px rgba(99,102,241,0.4),0 0 40px rgba(99,102,241,0.15),inset 0 1px 0 rgba(255,255,255,0.1);background:rgba(20,20,35,0.8)}

.card:hover::before{opacity:1}

.card:hover::after{opacity:1}

.card-icon{width:65px;height:65px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:1.5rem;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(0,0,0,0.6),inset 0 0 0 1px rgba(139,92,246,0.3);position:relative}

.card-icon::before{content:"";position:absolute;inset:2px;border-radius:12px;background:linear-gradient(135deg,rgba(139,92,246,0.1),transparent)}

.card:hover .card-icon{transform:translateY(-5px) rotate(3deg) scale(1.05);box-shadow:0 8px 30px rgba(139,92,246,0.6),inset 0 0 0 1px rgba(139,92,246,0.5)}

.card-icon i{color:#8b5cf6;position:relative;z-index:1}

.nike-icon svg{width:80%;height:80%;object-fit:contain}

.card h3{font-size:1.3rem;margin-bottom:1rem;color:#fff;font-weight:700;letter-spacing:-0.02em;line-height:1.3;position:relative;z-index:2}

.card p{color:rgba(148,163,184,0.9);line-height:1.8;font-size:0.95rem;font-weight:400;position:relative;z-index:2}

.card ul li::before{content:"\2192";color:var(--primary);font-weight:bold}

.card-toggle:hover{background:rgba(99,102,241,0.15);border-color:rgba(99,102,241,0.5);transform:translateY(-2px)}

.card .card-icon{background:#000}

.section h2{background:linear-gradient(135deg,#fff 0%,var(--primary) 50%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.fa-telegram,.fa-message{transition:all 0.3s ease}

.fa-telegram:hover{transform:scale(1.2) rotate(10deg);color:#0088cc!important;filter:drop-shadow(0 0 15px #0088cc)}

.fa-message:hover{transform:scale(1.2) rotate(-10deg);color:#00ff88!important;filter:drop-shadow(0 0 15px #00ff88)}

@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

main{position:relative;background:transparent}

main::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(99,102,241,0.02) 0%,rgba(168,85,247,0.03) 30%,rgba(6,182,212,0.02) 60%,rgba(99,102,241,0.02) 100%);background-size:100% 200%;animation:gradientFlow 20s ease infinite;z-index:0;pointer-events:none}

main>*{z-index:1}

.hero-page::before{display:none}

@media (max-width:768px){.hero-page-content h1{font-size:2.5rem}.section-header h2{font-size:2rem}.grid-3{grid-template-columns:1fr}.card{padding:1.5rem}.card-icon{width:60px;height:60px;font-size:1.7rem}.hero-page-content>div{flex-direction:column!important}}

@media (max-width:480px){.hero-page-content h1{font-size:2rem}.hero-page-content p{font-size:1.1rem}.section{padding:60px 0}.section-header{margin-bottom:40px}}

.card:hover .card-glow{opacity:1}

.btn-primary{box-shadow:0 4px 15px rgba(99,102,241,0.4);transition:all 0.3s ease}

.btn-primary:hover{box-shadow:0 6px 25px rgba(99,102,241,0.6);transform:translateY(-2px)}

.card h3{display:flex;align-items:center;gap:0.5rem}

.badge-new,.badge-hot{display:inline-block;padding:0.25rem 0.6rem;font-size:0.7rem;font-weight:700;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;margin-left:0.5rem;vertical-align:middle}

.badge-new{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,0.4)}

.badge-hot{background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,0.4);animation:pulse 2s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.8}}

.pricing-section{text-align:center;max-width:900px;margin:0 auto;padding:60px 40px;background:rgba(15,15,25,0.6);backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,0.2);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}

.pricing-section h2{font-size:3rem;margin-bottom:1.5rem;font-weight:800}

.pricing-section h2 i{color:var(--primary);margin-right:0.5rem}

.pricing-subtitle{font-size:1.4rem;margin-bottom:1rem;color:#00ff88;font-weight:600}

.pricing-description{font-size:1.1rem;margin-bottom:40px;opacity:0.8;color:var(--text-muted)}

.contact-methods{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:50px}

.contact-card{text-align:center;padding:2rem;min-width:200px;transition:transform 0.3s ease}

.contact-card:hover{transform:translateY(-5px)}

.contact-icon{width:80px;height:80px;margin:0 auto 1.5rem;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;box-shadow:0 8px 30px rgba(0,0,0,0.3);transition:all 0.4s ease}

.telegram-icon{background:linear-gradient(135deg,#0088cc,#0066aa);color:#fff}

.signal-icon{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff}

.contact-card:hover .contact-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 40px rgba(99,102,241,0.5)}

.contact-card h3{font-size:1.5rem;margin-bottom:1rem;font-weight:700}

.contact-card .btn-primary{display:inline-block;margin-top:0.5rem}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.card{animation:fadeInUp 0.6s ease-out forwards}

.card:nth-child(1){animation-delay:0.1s}

.card:nth-child(2){animation-delay:0.15s}

.card:nth-child(3){animation-delay:0.2s}

.card:nth-child(4){animation-delay:0.25s}

.card:nth-child(5){animation-delay:0.3s}

.card:nth-child(6){animation-delay:0.35s}

.card:nth-child(7){animation-delay:0.4s}

.card:nth-child(8){animation-delay:0.45s}

.card:nth-child(9){animation-delay:0.5s}

.card:nth-child(n+10){animation-delay:0.6s}

@keyframes slide-in-one-tap{from{transform:translateY(80px)}to{transform:translateY(0px)}}