:root{--navy:#0a192f;--orange:#f97316;--orange-light:#fff7ed;--orange-hover:#ea580c;--lime:#bef264}
body{font-family:'Poppins',sans-serif;scroll-behavior:smooth;background-color:#fff}
*{border-radius:0!important}
.bg-navy{background-color:var(--navy)}
.text-navy{color:var(--navy)}
.bg-brand-orange{background-color:var(--orange)}
.text-brand-orange{color:var(--orange)}
.hero-pattern{background-color:var(--navy);background-image:radial-gradient(rgba(249,115,22,.08) 1px,transparent 1px);background-size:40px 40px}
.hero-section{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;min-height:auto}
@media(min-width:1024px){.hero-section{min-height:calc(100vh - 6rem)}}
.hero-section::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,47,.58),rgba(10,25,47,.86));pointer-events:none}
.hero-panel{position:relative;z-index:1;border:1px solid rgba(255,255,255,.15);background:rgba(15,23,42,.78);transition:transform .3s ease,box-shadow .3s ease,width .3s ease}
.hero-panel:hover{transform:translateY(-4px);box-shadow:0 36px 80px rgba(15,23,42,.18)}
.hero-accent{position:absolute;top:0;right:0;pointer-events:none;z-index:0}
.about-card{position:relative;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background-color .35s ease;will-change:transform,box-shadow}
.about-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 40px 90px rgba(15,23,42,.16)}
.about-card:focus-within{outline:2px solid rgba(249,115,22,.25);outline-offset:6px}
.about-image-frame{min-height:320px;max-height:560px}
.about-image-frame img{width:100%;height:100%;display:block;object-fit:cover}
.portal-section{position:relative}
.portal-grid{opacity:0;transform:translateY(35px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;transition:opacity .8s ease-out,transform .8s ease-out;}
.portal-grid.visible{opacity:1;transform:translateY(0)}
.portal-card{position:relative;overflow:hidden;border-radius:1.75rem;color:white;background-size:cover;background-position:center center;background-repeat:no-repeat;border:2px solid rgba(255,255,255,.18);padding:2rem;display:flex;flex-direction:column;justify-content:space-between;transition:transform .45s cubic-bezier(0.22,1,0.36,1),box-shadow .45s cubic-bezier(0.22,1,0.36,1),border-color .35s ease,background-size .45s cubic-bezier(0.22,1,0.36,1),filter .35s ease;will-change:transform,background-size;}
.portal-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.08) 0%,rgba(15,23,42,.78) 100%);pointer-events:none;opacity:1;transition:opacity .35s ease;}
.portal-card-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;height:100%;}
.portal-card h3{color:white;}
.portal-card p{color:rgba(255,255,255,.95);}
.portal-card:hover{transform:translateY(-12px) scale(1.06);box-shadow:0 50px 110px rgba(15,23,42,.25);border-color:rgba(249,115,22,.55);background-size:122%;z-index:2;}
.portal-card-large{grid-column:span 7;min-height:420px;}
.portal-card-short{grid-column:span 5;min-height:250px;}
.portal-card-compact{grid-column:span 5;min-height:300px;}
.portal-card-medium{grid-column:span 7;min-height:280px;}
@media(max-width:1024px){.portal-grid{grid-template-columns:1fr}.portal-card-large,.portal-card-short,.portal-card-compact,.portal-card-medium{grid-column:span 1!important}} 
.btn-fun:hover{transform:translateY(-3px);box-shadow:0 24px 40px rgba(15,23,42,.18);filter:brightness(1.05)}
.btn-fun:active{transform:translateY(-1px);box-shadow:0 16px 24px rgba(15,23,42,.14)}
.nav-link{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#475569;transition:all .25s ease;padding:14px 18px;border-radius:1rem;position:relative}
.nav-link:hover{color:var(--orange);background-color:rgba(249,115,22,.12);box-shadow:0 0 0 1px rgba(249,115,22,.12)}
.nav-login{background:linear-gradient(135deg,rgba(249,115,22,1),rgba(251,146,60,1));color:white!important;border-radius:1rem;padding:14px 22px!important;font-size:1rem!important;margin-left:0!important;box-shadow:0 16px 35px rgba(249,115,22,.12);transition:all .25s ease}
.nav-login:hover{background:linear-gradient(135deg,rgba(251,146,60,1),rgba(249,115,22,1));transform:translateY(-1px);box-shadow:0 20px 45px rgba(249,115,22,.18)}
.nav-cta{background:linear-gradient(135deg,rgba(15,23,47,1),rgba(30,41,59,1));color:white;border-radius:1rem;padding:14px 24px;font-size:1rem;box-shadow:0 16px 35px rgba(15,23,47,.16);border:1px solid rgba(15,23,47,.15)}
.nav-cta:hover{background:linear-gradient(135deg,rgba(30,41,59,1),rgba(15,23,47,1));transform:translateY(-1px);box-shadow:0 20px 45px rgba(15,23,47,.22)}
.course-list-item{display:flex;flex-direction:column;padding:1.5rem;background:white;border:1px solid #e2e8f0;transition:all .4s cubic-bezier(.34,.1,.64,.1);position:relative;overflow:hidden;height:100%;z-index:10;opacity:0;animation:slideInUp .6s ease-out forwards}
.course-list-item:nth-child(1){animation-delay:.1s}
.course-list-item:nth-child(2){animation-delay:.2s}
.course-list-item:nth-child(3){animation-delay:.3s}
.course-list-item:not(.arrow-card):hover{border-color:var(--orange);transform:translateY(-8px);box-shadow:0 15px 30px -5px rgba(249,115,22,.2);filter:brightness(1.02)}
.course-tag{font-size:.6rem;font-weight:800;padding:2px 8px;text-transform:uppercase;letter-spacing:1px}
.card-fun{border:1px solid #e2e8f0;background:white;transition:all .4s cubic-bezier(.34,.1,.64,.1)}
.card-fun:hover{border-color:var(--orange);box-shadow:12px 12px 0px var(--navy);transform:translateY(-6px);filter:brightness(1.02)}
.section-tag{background:var(--orange-light);color:var(--orange);padding:4px 16px;font-size:.75rem;font-weight:700;text-transform:uppercase;display:inline-block;margin-bottom:1rem}
.sketch-underline{position:relative;display:inline-block}
.sketch-underline::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:var(--orange);opacity:.3}
.mentor-slide{display:none;animation:fadeIn .5s ease-out forwards}
.mentor-slide.active{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse-glow{0%{box-shadow:0 0 0 0 rgba(249,115,22,.7)}70%{box-shadow:0 0 0 10px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float{0%{transform:translate(0,0)}25%{transform:translate(15px,-10px)}50%{transform:translate(-10px,15px)}75%{transform:translate(10px,10px)}100%{transform:translate(0,0)}}
@keyframes subtleFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,-8px) scale(1.005)}}
@keyframes fadeInSlow{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes textGlow{0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}50%{text-shadow:0 0 20px rgba(249,115,22,.15)}}
@keyframes heroWave{0%{background-position:0 0}100%{background-position:250px 250px}}
.animate-bounce{animation:bounce 2s infinite}
.animate-float{animation:float 20s infinite ease-in-out}
.animate-soft-float{animation:subtleFloat 16s infinite ease-in-out}
.fade-in{opacity:0;animation:fadeIn .6s ease-out forwards}
.fade-in-slow{opacity:0;animation:fadeInSlow .7s ease-out forwards}
.fade-in-slow.delay-1{animation-delay:.15s}
.fade-in-slow.delay-2{animation-delay:.35s}
.fade-in-slow.delay-3{animation-delay:.55s}
.heading-soft-glow{animation:textGlow 10s ease-in-out infinite}
.slide-in-up{opacity:0;animation:slideInUp .6s ease-out forwards}
.slide-in-left{opacity:0;animation:slideInFromLeft .6s ease-out forwards}
.slide-in-right{opacity:0;animation:slideInFromRight .6s ease-out forwards}
.whatsapp-float{position:fixed;bottom:20px;right:20px;background:#25d366;color:white;width:60px;height:60px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:998;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 8px 20px rgba(37,211,102,.3)}
.mobile-sticky-cta{position:fixed;bottom:0;left:0;right:0;background:white;padding:10px;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:999;display:none;border-top:2px solid var(--orange)}
@media(max-width:768px){.mobile-sticky-cta{display:block}body{padding-bottom:80px}.whatsapp-float{bottom:90px}}
.logo-container{display:flex;align-items:center;transition:transform .2s ease;background:transparent;padding:0}
.logo-container:hover{transform:scale(1.05)}
.logo-image{height:48px;width:auto;display:block}
@media(min-width:1024px){.logo-image{height:56px}}
@media(max-width:640px){.logo-image{height:42px}}
.logo-hero-wrapper{display:inline-flex;align-items:center;justify-content:center;}
.logo-hero{height:96px;width:auto;display:block;background:transparent;animation:logoFloat 6s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(249,115,22,.18));}
@media(min-width:1024px){.logo-hero{height:140px;}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.nav-login{background-color:var(--orange);color:white!important;border-radius:1rem;padding:14px 20px!important;margin-left:0!important;font-size:1rem!important;transition:all .2s ease}
.nav-login:hover{background-color:var(--orange-hover);color:white!important;transform:scale(1.03)}
@media(min-width:768px){.arrow-card{position:relative;clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%,10% 50%);padding-left:3rem!important;padding-right:3rem!important;margin-right:-2rem;border:none!important;background:#f8fafc;transition:all .4s cubic-bezier(.34,.1,.64,.1)}.arrow-card:first-child{clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%);padding-left:1.5rem!important}.arrow-card:last-child{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%,10% 50%);margin-right:0}.arrow-card:hover{background:white;z-index:20;transform:scale(1.04) translateY(-8px);box-shadow:0 25px 40px -5px rgba(249,115,22,.15);filter:brightness(1.02)}.arrow-card.active-arrow{background:var(--orange-light);border-bottom:4px solid var(--orange)!important;transform:scale(1.02);box-shadow:0 15px 30px -5px rgba(249,115,22,.2)}}
.carousel-container{position:relative;overflow:hidden;border-radius:0}
.carousel-wrapper{display:flex;transition:transform .6s ease-in-out}
.carousel-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;min-width:0}
.carousel-image-wrapper{width:100%;max-height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f8fafc}
.carousel-image{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;object-position:center}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:var(--orange);color:white;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10;font-weight:bold}
.carousel-btn:hover{background:var(--orange-hover);transform:translateY(-50%) scale(1.1)}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}


a, button, input {
  box-shadow: none !important;
}
a:hover, a:focus, a:active, a:visited {
  box-shadow: none !important;
}
