:root{
    --bg:#0b0d12; --panel:#11141b; --panel-alt:#0e1117; --text:#e8edf7; --muted:#434343; --brand:#6ad1ff; --brand-2:#9c2c50; --stroke:#1b2130;
}

.container{
    width:min(1120px, 92%);
    margin-inline:auto;
}

.eyebrow{
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brand);
    font-weight:600;
    margin: 0 0 2.5rem
}

.hero__grid{display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:2rem;
    margin: 0 auto 20px;
}

.hero__text h1{
    font-size:clamp(2rem, 3.6vw, 3rem);
    line-height:1.1;
    margin:.25rem 0 2rem
}

.hero__text .nm{
    color:var(--brand-2)
}

#downloads {
    padding-top: 0;
    margin: 0;
}

h1{
    color: var(--panel);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.lead{
    font-size:1.125rem;
    color:var(--muted);
    max-width:60ch
}

.hero__cta{
    margin-top:1.25rem;
    display:flex;
    gap:.75rem;
    flex-wrap:wrap
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.8rem 1rem;
    border-radius:.875rem;
    border:1px solid var(--stroke);
    font-weight:600;
    text-decoration:none;
    color:var(--text);
}

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

.btn-primary{
    background:var(--brand-2);
    color: var(--text);
    border-color:transparent;
    margin: 22px auto;
}

.btn-primary:hover{
    box-shadow: 1px 1px 0.6px var(--text);
    text-decoration: none;
}

.btn-outline{
    background:transparent
}

.hero__media{
    justify-self:end;
    max-width:520px;
    background:radial-gradient(120px 160px at 68% 32%, #193a42 0%, transparent 60%);
}

.hero__media .prod{
    width:100%;
    height:auto;
    display:block;
    /*filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));*/
}

.hero__media figcaption{
    font-size:.85rem;
    color:var(--panel);
    margin-top: 1.5rem;
    font-weight: bold;
}

.section{
    padding:3.5rem 0
}

.section.alt{
    background: var(--panel-alt)
}

.section__header{
    margin-bottom:2.2rem
}

.section__header h2{
    font-size:1.8rem;
    margin:0 0 .5rem;
    color: var(--text)
}

.section__header p{
    color: var(--ink);
}

.content-card{
    background:var(--panel);
    border:1px solid var(--stroke);
    padding:1.25rem;
    border-radius:1rem;
    box-shadow:0 8px 24px rgba(0,0,0,.24)
}

.content-card h3{
    margin-top:0
}

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

.grid-3{
    grid-template-columns:repeat(2, 1fr);
    gap: 3rem;
}

.grid-4{
    grid-template-columns:repeat(3, 1fr);
    margin: 4rem auto 2rem auto;
    gap: 3.4rem;
}

.grid-4 .card{
    padding: 1.2rem 1.6rem;
}

.card__body{
    padding:1rem
}

.card__title{
    margin:.25rem 0 .5rem;
    color: var(--panel)
}

.card__text{
    color:var(--muted)
}

.card__footer{
    padding:0 1rem 1rem
}

.btn-sm{
    padding:.6rem .85rem;
    border-radius:.75rem;
    background-color: var(--brand-2);
    border: transparent;
}

.btn-sm:hover{
    box-shadow: 1px 1px 0.6px var(--stroke);
    text-decoration: none;
}

.ratio-16x9{
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#0c121c
}

.ratio-16x9 iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0
}

.card{
    padding: 1rem;
}

.title-bg-claro{
    font-size:1.8rem;
    margin:0 0 .5rem;
    color: var(--bg) !important
}

.subtitle-bg-claro{
    color: var(--panel) !important
}

.link-card__title{
    margin:.25rem 0 .5rem;
    color: var(--panel)
}

.link-card__text{
    color:var(--muted)
}

.link-card__link{
    display:inline-block;
    margin-top:.5rem;
    color:var(--brand-2);
    font-weight: bold;
}

.cta{
    padding:3.5rem 0;
    background:#0f172a;
    border-top:1px solid var(--stroke)
}

.cta__box{
    display:grid;
    gap:.5rem;
    text-align:center
}

.cta .btn{
    justify-self:center
}


/* ======= RESPONSIVO ======= */
@media (max-width: 980px){
    .hero__grid{grid-template-columns:1fr}
    .hero__media{justify-self:start; max-width:min(520px, 100%)}
    .grid-3, .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
    .grid-3, .grid-4{grid-template-columns:1fr}
    .lead{font-size:1rem}
}