:root {
    --bg: #030d10;
    --panel: #071a1e;
    --green: #00ff0d;
    --cyan: #22dbde;
    --text: #e9f4f4;
    --muted: #a4b9bb;
    --border: rgba(76, 231, 202, .23)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    font: 400 16px/1.7 Poppins, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

button {
    font: inherit;
    cursor: pointer
}

img,
video {
    display: block;
    max-width: 100%
}

.container {
    width: min(1160px, calc(100% - 40px));
    margin-inline: auto
}

section {
    position: relative
}

main,
header,
footer {
    position: relative;
    z-index: 1
}

.tech-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 12% 10%, #063029 0, transparent 30%), radial-gradient(circle at 85% 75%, #07313a 0, transparent 35%), #030d10
}

.tech-bg__grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(15, 241, 155, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 241, 155, .065) 1px, transparent 1px);
    background-size: 57px 57px;
    animation: gridShift 24s linear infinite
}

.tech-bg__glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse at 70% 20%, rgba(34, 219, 222, .09), transparent 35%), radial-gradient(ellipse at 15% 70%, rgba(34, 255, 85, .09), transparent 30%);
    animation: glowMove 14s ease-in-out infinite alternate
}

.tech-bg__dots {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(35, 255, 127, .25) 1px, transparent 2px);
    background-size: 110px 110px;
    opacity: .65
}

@keyframes gridShift {
    to {
        background-position: 57px 57px
    }
}

@keyframes glowMove {
    to {
        transform: translate3d(3%, -3%, 0)
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: rgba(3, 12, 15, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.header-inner {
    width: min(1200px, calc(100% - 32px));
    min-height: 82px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--green);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .07em;
    font-weight: 700
}

.brand img {
    width: 56px;
    height: 56px;
    object-fit: contain
}

.brand strong {
    color: #fff;
    font-size: 13px
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    font-weight: 600;
    font-size: 13px
}

.site-menu>a:hover {
    color: var(--green)
}

.site-menu .nav-contact {
    padding: 10px 16px;
    border: 1px solid var(--green);
    border-radius: 9px;
    color: var(--green)
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--green);
    border-radius: 8px;
    color: var(--green);
    font-size: 23px;
    width: 43px;
    height: 43px
}

.hero {
    overflow: hidden;
    background: linear-gradient(110deg, rgba(1, 14, 15, .96), rgba(2, 31, 27, .52));
    border-bottom: 1px solid var(--border)
}

.hero__inner {
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: 25px;
    padding-block: 90px
}

.eyebrow {
    color: var(--green);
    font-size: 12px;
    letter-spacing: .17em;
    font-weight: 800
}

.signal {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--green);
    border-radius: 50%;
    margin-right: 9px;
    box-shadow: 0 0 12px var(--green)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.hero h1 {
    margin: 22px 0;
    font-size: clamp(38px, 5.2vw, 68px);
    line-height: 1.09;
    letter-spacing: -.047em;
    font-weight: 900
}

.hero h1 em,
h2 em {
    font-style: normal;
    color: var(--green)
}

.hero__copy>p {
    max-width: 660px;
    color: #bdced0;
    font-size: 17px
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 29px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    padding: 13px 19px;
    font-size: 13px;
    font-weight: 800;
    transition: transform .2s, box-shadow .2s
}

.btn:hover {
    transform: translateY(-3px)
}

.btn--primary {
    background: var(--green);
    color: #03200e;
    box-shadow: 0 0 24px rgba(34, 255, 85, .23)
}

.btn--outline {
    border: 1px solid rgba(6, 248, 228, 0.768);
    color: #e1ffff;
    background: rgba(5, 20, 21, .6)
}

.btn--wide {
    width: 100%
}

.hero__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 36px;
    font-size: 11px;
    font-weight: 600;
    color: #abc5c0
}

.hero__metrics i {
    font-size: 18px;
    color: var(--cyan);
    vertical-align: middle;
    margin-right: 4px
}

.hero__visual {
    position: relative;
    width: min(360px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: auto;
    background: radial-gradient(circle, rgba(17, 245, 92, .13) 1%, transparent 66%)
}

.orbit {
    position: absolute;
    border: 1px solid rgba(14, 249, 69, 0.832);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(34, 255, 85, .08), inset 0 0 25px rgba(34, 255, 85, .04)
}

.orbit--outer {
    inset: 3%;
    border-style: dashed;
    animation: spin 36s linear infinite
}

.orbit--inner {
    inset: 18%;
    border-color: rgba(0, 251, 255, 0.55);
    animation: spin 24s linear infinite reverse
}

.hero__badge {
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 900;
    letter-spacing: -.1em;
    color: var(--green);
    text-shadow: 0 0 30px rgba(234, 105, 40, 0.35);
    line-height: 1
}

.hero__badge span {
    color: var(--cyan)
}

.hero__label {
    position: absolute;
    bottom: 19%;
    font-size: 11px;
    letter-spacing: .25em;
    text-align: center;
    color: #a6d0c9;
    font-weight: 700
}

.hero__dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan)
}

.hero__dot.one {
    top: 8%;
    right: 29%
}

.hero__dot.two {
    bottom: 18%;
    left: 15%;
    background: var(--green)
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.section {
    padding: 98px 0
}

.section-heading {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 45px
}

.section-heading h2 {
    font-size: clamp(29px, 4.5vw, 49px);
    line-height: 1.12;
    letter-spacing: -.04em;
    margin: 12px 0 17px
}

.section-heading p {
    color: var(--muted);
    font-size: 15px
}

.program-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 24px
}

.panel,
.video-card,
.cert-gallery {
    border: 1px solid var(--border);
    background: linear-gradient(140deg, rgba(11, 41, 45, .88), rgba(4, 20, 25, .91));
    box-shadow: 0 20px 50px rgba(0, 0, 0, .19)
}

.panel {
    border-radius: 20px;
    padding: 34px
}

.panel-kicker {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--cyan)
}

.panel-kicker i {
    font-size: 20px
}

.panel h3 {
    font-size: 25px;
    margin: 18px 0 22px
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 15px
}

.feature-list li {
    position: relative;
    padding-left: 29px;
    font-size: 14px;
    color: #d4e3e3;
    overflow-wrap: anywhere
}

.feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green);
    font-weight: 900
}

.feature-list--compact {
    margin-bottom: 35px
}

.videos-section {
    background: rgba(1, 10, 16, .5)
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px
}

.video-card {
    border-radius: 19px;
    overflow: hidden
}

.video-card__media {
    background: #000;
    aspect-ratio: 16/9
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.video-card__body {
    padding: 20px 24px
}

.video-card__body span {
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em
}

.video-card__body h3 {
    font-size: 19px;
    margin: 6px 0 0
}

.cert-gallery {
    border-radius: 20px;
    padding: 20px;
    max-width: 910px;
    margin: auto
}

.cert-stage {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    gap: 13px;
    align-items: center
}

.cert-photo {
    height: clamp(280px, 52vw, 560px);
    display: grid;
    place-items: center;
    background: rgba(1, 8, 10, .65);
    border-radius: 12px;
    overflow: hidden
}

.cert-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.gallery-arrow {
    height: 48px;
    width: 48px;
    border: 1px solid rgba(34, 255, 85, .45);
    background: rgba(7, 45, 38, .65);
    color: var(--green);
    border-radius: 50%;
    font-size: 27px
}

.gallery-arrow:hover {
    background: var(--green);
    color: #05120b
}

.cert-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 17px;
    color: #a8c4bf;
    font-size: 12px;
    font-weight: 800
}

.cert-dots {
    display: flex;
    gap: 8px
}

.cert-dots button {
    border: 0;
    border-radius: 100px;
    width: 9px;
    height: 9px;
    background: #355956;
    padding: 0
}

.cert-dots button.active {
    width: 26px;
    background: var(--green)
}

.cta-section {
    padding: 30px 0 100px
}

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 40px;
    border: 1px solid rgba(34, 255, 85, .4);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(7, 52, 39, .95), rgba(5, 25, 30, .95));
    box-shadow: 0 0 48px rgba(34, 255, 85, .09)
}

.cta-panel h2 {
    font-size: clamp(24px, 3.1vw, 35px);
    line-height: 1.2;
    max-width: 710px;
    margin: 13px 0
}

.cta-panel p {
    color: #b1ccca;
    margin: 0
}

.cta-panel>.btn {
    flex-shrink: 0
}

.site-footer {
    padding: 52px 0 0;
    border-top: 1px solid var(--border);
    background: rgba(1, 10, 12, .87)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr .8fr;
    gap: 50px
}

.footer-brand img {
    width: 105px;
    height: 105px;
    object-fit: contain
}

.site-footer h3 {
    color: var(--green);
    font-size: 15px
}

.site-footer p {
    font-size: 13px;
    color: #b5c4c6
}

.social-links {
    display: flex;
    gap: 13px
}

.social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(34, 255, 85, .3);
    border-radius: 50%;
    color: var(--green);
    font-size: 21px
}

.copyright {
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: 37px;
    padding-block: 18px;
    color: #859da0;
    font-size: 12px
}

@media(max-width:900px) {
    .menu-toggle {
        display: grid;
        place-items: center
    }

    .site-menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        background: #061618;
        border-bottom: 1px solid var(--border)
    }

    .site-menu.is-open {
        display: flex
    }

    .hero__inner {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .hero__visual {
        width: min(270px, 75%);
        margin-top: 5px
    }

    .hero h1 {
        max-width: 700px
    }

    .program-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:620px) {
    .container {
        width: min(100% - 30px, 1160px)
    }

    .header-inner {
        min-height: 70px
    }

    .brand {
        font-size: 10px
    }

    .brand strong {
        font-size: 11px
    }

    .brand img {
        width: 48px;
        height: 48px
    }

    .hero__inner {
        padding-block: 68px 50px;
        gap: 15px
    }

    .hero h1 {
        font-size: clamp(32px, 9vw, 45px)
    }

    .hero__copy>p {
        font-size: 14px
    }

    .hero__actions {
        flex-direction: column
    }

    .hero__actions .btn {
        width: 100%
    }

    .hero__visual {
        width: 190px
    }

    .hero__label {
        font-size: 8px
    }

    .section {
        padding: 70px 0
    }

    .section-heading {
        margin-bottom: 30px
    }

    .panel {
        padding: 25px 20px
    }

    .video-grid {
        grid-template-columns: 1fr
    }

    .cert-gallery {
        padding: 12px
    }

    .cert-stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 4px
    }

    .gallery-arrow {
        width: 32px;
        height: 38px;
        border-radius: 8px;
        font-size: 20px
    }

    .cert-photo {
        height: 330px
    }

    .cta-section {
        padding: 0 0 70px
    }

    .cta-panel {
        padding: 28px 22px;
        display: block
    }

    .cta-panel .btn {
        margin-top: 25px;
        width: 100%
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .site-footer {
        text-align: center
    }

    .footer-brand img {
        margin: auto
    }

    .social-links {
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .tech-bg__grid,
    .tech-bg__glow,
    .orbit {
        animation: none !important
    }

    .btn {
        transition: none !important
    }
}

/* Galería de videos de cursos */
.course-library {
    background: linear-gradient(180deg, rgba(3, 16, 20, .6), rgba(4, 27, 29, .65));
    border-block: 1px solid var(--border)
}

.course-library__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.course-library__card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(34, 255, 85, .26);
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(10, 37, 41, .92), rgba(3, 18, 23, .95));
    box-shadow: 0 12px 38px rgba(0, 0, 0, .3);
    transition: transform .25s, border-color .25s, box-shadow .25s
}

.course-library__card:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .32), 0 0 22px rgba(34, 255, 85, .14)
}

.course-library__video {
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden
}

.course-library__video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000
}

.course-library__info {
    padding: 22px
}

.course-library__info span {
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: .12em;
    font-weight: 800
}

.course-library__info span i {
    font-size: 15px;
    vertical-align: middle
}

.course-library__info h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 10px 0
}

.course-library__info p {
    font-size: 13px;
    color: var(--muted);
    margin: 0
}

@media(max-width:900px) {
    .course-library__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .site-menu {
        gap: 15px
    }
}

@media(max-width:620px) {
    .course-library__grid {
        grid-template-columns: 1fr
    }

    .course-library__info {
        padding: 18px
    }
}

@media(prefers-reduced-motion:reduce) {
    .course-library__card {
        transition: none
    }
}