html[data-product="cursos-de-extensao"] {--blue: #2f80ed; --blue-2: #195fc3; --blue-deep: #082942; --blue-darker: #051a2a; --green: #00b388; --green-2: #2bd4a8; --ink: #102939; --muted: #667085; --surface: #ffffff; --surface-soft: #f5f9fc; --surface-blue: #edf7ff; --border: rgba(16, 41, 57, 0.12); --header: rgba(255, 255, 255, 0.92); --shadow: 0 24px 70px rgba(8, 41, 66, 0.14); --max: 1240px; scroll-behavior: smooth; background: rgb(7, 31, 47); color-scheme: light;}
html[data-product="cursos-de-extensao"][data-theme="dark"] {--ink: #f6fbff; --muted: #a7bac8; --surface: #071b2a; --surface-soft: #0b2335; --surface-blue: #0d2a40; --border: rgba(236, 247, 255, 0.12); --header: rgba(6, 24, 37, 0.92); --shadow: 0 24px 70px rgba(0, 0, 0, 0.36); color-scheme: dark;}
html[data-product="cursos-de-extensao"] body {margin: 0px; overflow-x: hidden; color: var(--ink); background: var(--surface); font-family: Inter, "Segoe UI", Arial, sans-serif;}
html[data-product="cursos-de-extensao"] .cex-hero-visual {position: relative; min-height: 470px; perspective: 1200px;}
html[data-product="cursos-de-extensao"] .cex-section {padding: 110px 0px; border-top: 1px solid color-mix(in srgb, var(--green) 13%, var(--border));}
html[data-product="cursos-de-extensao"] .cex-section:nth-of-type(2n) {background: var(--surface-soft);}
html[data-product="cursos-de-extensao"] .cex-section-head {margin-bottom: 45px; text-align: center;}
html[data-product="cursos-de-extensao"] .cex-section h2 {position: relative; width: max-content; max-width: 100%; margin: 18px auto 0px; padding-bottom: 17px; color: var(--ink); line-height: 1.16; letter-spacing: -0.035em; text-transform: uppercase; font-size: 26px !important; font-weight: 500 !important;}
html[data-product="cursos-de-extensao"] .cex-section h2::after {content: ""; position: absolute; left: 50%; bottom: 0px; width: clamp(120px, 38%, 195px); height: 4px; border-radius: 999px; background: linear-gradient(90deg,var(--blue),var(--green)); transform: translateX(-50%);}
html[data-product="cursos-de-extensao"] .cex-section-head > p {max-width: 720px; margin: 20px auto 0px; color: var(--muted); font-size: 14px; line-height: 1.7;}
@keyframes cex-pulse { 
  0%, 100% { transform: scale(0.88); opacity: 0.75; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes cex-orbit { 
  100% { transform: rotate(360deg); }
}
@keyframes cex-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 1080px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {width: min(760px, 100%); margin: 0px auto;}
}
@media (max-width: 760px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 390px;}
html[data-product="cursos-de-extensao"] .cex-section {padding: 82px 0px;}
}
@media (max-width: 520px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 320px;}
html[data-product="cursos-de-extensao"] .cex-section h2 {font-size: 26px !important;}
}
@media (prefers-reduced-motion: reduce) {
html[data-product="cursos-de-extensao"] *,
html[data-product="cursos-de-extensao"] ::before,
html[data-product="cursos-de-extensao"] ::after {animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;}
}
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 500px;}
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 520px; perspective: 1400px;}
@keyframes cex-device-float { 
  0%, 100% { transform: translate3d(0px, 0px, 0px) rotateY(-1deg); }
  50% { transform: translate3d(0px, -10px, 0px) rotateY(1deg); }
}
@media (max-width: 1080px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 570px;}
}
@media (max-width: 760px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 430px;}
}
@media (max-width: 520px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 330px;}
}
html[data-product="cursos-de-extensao"] .cex-hero-visual {position: relative; min-height: 560px; perspective: none;}
html[data-product="cursos-de-extensao"] .cex-platform-card {position: absolute; z-index: 1; top: 42px; right: -120px; width: 650px; overflow: hidden; border: 1px solid rgba(217, 239, 250, 0.22); border-radius: 24px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.34) 0px 36px 90px; transform: perspective(1300px) rotateY(-9deg) rotateX(2deg); animation: 7s ease-in-out 0s infinite normal none running cex-screen-float;}
html[data-product="cursos-de-extensao"] .cex-platform-bar {height: 36px; padding: 0px 14px; display: flex; align-items: center; gap: 7px; color: rgb(70, 102, 121); background: rgb(238, 245, 248); font-size: 9px; font-weight: 850; letter-spacing: 0.08em;}
html[data-product="cursos-de-extensao"] .cex-platform-bar i {width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: rgb(104, 213, 94);}
html[data-product="cursos-de-extensao"] .cex-platform-bar i:nth-child(2) {background: rgb(8, 181, 160);}
html[data-product="cursos-de-extensao"] .cex-platform-bar i:nth-child(3) {margin-right: 5px; background: rgb(47, 128, 237);}
html[data-product="cursos-de-extensao"] .cex-platform-course {position: relative; height: 365px; overflow: hidden; background: rgb(7, 31, 47);}
html[data-product="cursos-de-extensao"] .cex-platform-course::after {content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(5, 30, 45, 0.03) 38%, rgba(5, 30, 45, 0.82) 100%); pointer-events: none;}
html[data-product="cursos-de-extensao"] .cex-platform-course > img {width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.45s;}
html[data-product="cursos-de-extensao"] .cex-hero-visual:hover .cex-platform-course > img {transform: scale(1.045); filter: saturate(1.08) contrast(1.03);}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy {position: absolute; z-index: 2; left: 28px; bottom: 29px; max-width: 52%; color: rgb(255, 255, 255);}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy small,
html[data-product="cursos-de-extensao"] .cex-platform-course-copy strong {display: block;}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy small {color: rgb(114, 228, 192); font-size: 8px; font-weight: 900; letter-spacing: 0.13em;}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy strong {margin-top: 7px; font-size: 19px; line-height: 1.2;}
html[data-product="cursos-de-extensao"] .cex-platform-play {position: absolute; z-index: 2; right: 32px; bottom: 29px; width: 49px; height: 49px; display: grid; place-items: center; padding-left: 3px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(21, 152, 199), rgb(8, 181, 160)); box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 9px, rgba(8, 181, 160, 0.42) 0px 0px 28px; font-size: 14px;}
html[data-product="cursos-de-extensao"] .cex-hero-students {position: absolute; z-index: 3; right: -200px; bottom: -222px; width: 820px; max-width: none; filter: drop-shadow(rgba(0, 0, 0, 0.34) 0px 28px 26px); pointer-events: none;}
html[data-product="cursos-de-extensao"] .cex-floating-chip {position: absolute; z-index: 5; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 13px; color: rgb(255, 255, 255); background: rgba(7, 35, 49, 0.82); box-shadow: rgba(0, 0, 0, 0.22) 0px 16px 34px; backdrop-filter: blur(12px); font-size: 11px; font-weight: 850; animation: 5s ease-in-out 0s infinite normal none running cex-float;}
html[data-product="cursos-de-extensao"] .cex-chip-one {top: 98px; left: -12px; min-width: 235px; padding: 9px 16px 9px 10px; display: flex; align-items: center; gap: 11px; overflow: hidden; border-color: rgba(103, 230, 186, 0.58); border-radius: 17px; background: radial-gradient(circle at 14% 50%, rgba(103, 230, 186, 0.23), transparent 35%), linear-gradient(135deg, rgba(8, 57, 72, 0.96), rgba(5, 34, 49, 0.96)); box-shadow: rgba(0, 0, 0, 0.3) 0px 22px 48px, rgba(103, 230, 186, 0.09) 0px 0px 0px 1px, rgba(103, 230, 186, 0.24) 0px 0px 30px; font-size: 12px; letter-spacing: 0.04em;}
html[data-product="cursos-de-extensao"] .cex-chip-one::before {content: ""; position: absolute; top: -35%; bottom: -35%; left: -32%; width: 18%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent); filter: blur(2px); transform: skewX(-18deg); animation: 3.8s ease-in-out 0s infinite normal none running cex-flag-light;}
html[data-product="cursos-de-extensao"] .cex-chip-one i {width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 13px; color: rgb(6, 43, 61); background: linear-gradient(135deg, rgb(140, 240, 203), rgb(67, 212, 170)); box-shadow: rgba(103, 230, 186, 0.46) 0px 0px 22px; font-size: 23px; font-style: normal; font-weight: 900; line-height: 1;}
html[data-product="cursos-de-extensao"] .cex-chip-one strong {color: rgb(255, 255, 255); font-size: 12px; font-weight: 900; line-height: 1.25; letter-spacing: 0.055em;}
html[data-product="cursos-de-extensao"] .cex-chip-two {right: -24px; bottom: 55px; animation-delay: -2.2s;}
@keyframes cex-screen-float { 
  0%, 100% { transform: perspective(1300px) rotateY(-9deg) rotateX(2deg) translateY(0px); }
  50% { transform: perspective(1300px) rotateY(-7deg) rotateX(2deg) translateY(-10px); }
}
@keyframes cex-flag-light { 
  0%, 36% { left: -32%; opacity: 0; }
  48% { opacity: 1; }
  68%, 100% { left: 122%; opacity: 0; }
}
@media (max-width: 1120px) {
html[data-product="cursos-de-extensao"] .cex-platform-card {right: -200px;}
html[data-product="cursos-de-extensao"] .cex-hero-students {right: -230px; width: 800px;}
}
@media (max-width: 1080px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 560px;}
html[data-product="cursos-de-extensao"] .cex-platform-card {top: 72px; right: 2%; width: 86%;}
html[data-product="cursos-de-extensao"] .cex-hero-students {right: -2%; bottom: -65px; width: 800px;}
html[data-product="cursos-de-extensao"] .cex-chip-one {top: 108px; left: 2%;}
html[data-product="cursos-de-extensao"] .cex-chip-two {right: 3%; bottom: 40px;}
}
@media (max-width: 680px) {
html[data-product="cursos-de-extensao"] .cex-hero-visual {min-height: 445px;}
html[data-product="cursos-de-extensao"] .cex-platform-card {top: 72px; right: -27%; width: 122%; transform: none; animation-name: cex-screen-float-mobile;}
html[data-product="cursos-de-extensao"] .cex-platform-course {height: 260px;}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy {left: 18px; bottom: 20px;}
html[data-product="cursos-de-extensao"] .cex-platform-course-copy strong {font-size: 15px;}
html[data-product="cursos-de-extensao"] .cex-platform-play {right: 22px; bottom: 20px; width: 42px; height: 42px;}
html[data-product="cursos-de-extensao"] .cex-hero-students {right: -12.5vw; bottom: -5px; width: min(820px, 125vw);}
html[data-product="cursos-de-extensao"] .cex-floating-chip {font-size: 9px;}
html[data-product="cursos-de-extensao"] .cex-chip-one {top: 94px; left: 0px; min-width: 202px; padding: 7px 12px 7px 8px;}
html[data-product="cursos-de-extensao"] .cex-chip-one i {width: 37px; height: 37px; font-size: 20px;}
html[data-product="cursos-de-extensao"] .cex-chip-one strong {font-size: 10px;}
html[data-product="cursos-de-extensao"] .cex-chip-two {right: 0px; bottom: 25px;}
}
@keyframes cex-screen-float-mobile { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

html[data-product="cursos-de-extensao"] .cex-platform-course--video::after {display: none;}
html[data-product="cursos-de-extensao"] .cex-platform-course--video > video {display: block; width: 100%; height: 100%; object-fit: contain; background: #eef4f8;}