@import url('common.css');

.navbar-top {
    background: var(--surface-inverse);
}

.navbar-top .navbar-brand .logo-h {
    background-image: url('/img/brand/iso_w.svg');
}

.navbar-top .navbar-nav a,
.navbar-top .selector-current {
    color: var(--surface-inverse-text);
}

.navbar-top .navbar-nav a:hover,
.navbar-top .navbar-nav a.active {
    color: var(--accent-primary);
    text-decoration: none;
}

.navbar-top .btn-navbar {
    background: var(--surface-inverse-text);
    border-color: var(--surface-inverse-text);
    color: var(--surface-inverse);
}

.navbar-top .btn-navbar:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--color-carbon);
}

@media (prefers-color-scheme: dark) {
    .navbar-top .navbar-brand .logo-h {
        background-image: url('/img/brand/iso.svg');
    }
}


.hero .buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 3rem; }

.hero {
    min-height: min(50rem, 100vh);
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    .heading, .copy { display: flex; flex-direction: column; justify-content: center; }
    .heading { padding: clamp(9rem, 18vh, 12rem) 6vw 7rem 12vw; background: var(--surface-inverse); color: var(--surface-inverse-text); }
    .heading h1 { margin: 0; color: inherit; }
    .copy { padding: clamp(9rem, 18vh, 12rem) 10vw 7rem 5vw; background: var(--bg-elevated); border-left: 4px solid var(--accent-primary); }
    .copy > p { margin: 0; }
}


.jump { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 1rem auto; 
    padding: 2rem 12vw; 
    background: var(--bg-elevated); 
}
.jump a { 
    font-size: .85rem; 
    margin-inline: auto; 
    color: var(--color-barro); 
}


/**************************** Offers ****************************/

.offer {
    scroll-margin-top: var(--menu-height);
    .split { --split-left: 5fr; --split-right: 5fr; --gap: clamp(3rem, 7vw, 7rem); }
    .description p { margin-bottom: 0; line-height: 1.6; }
    .delivery { padding: clamp(2rem, 4vw, 3rem); background: var(--bg-elevated); }
    .delivery > p { line-height: 1.7; color: var(--text-secondary); }
    details { margin-top: 2rem; }
    .details { padding-top: 1.5rem; font-size: .9rem; line-height: 1.7; }
    .details ul { margin-top: 0; padding-left: 1.2rem; }
    .details li { margin-bottom: 1rem; }
    .details h4 { margin: 2rem 0 1rem; }
    .details p { margin-bottom: 0; }
    &:nth-of-type(3) { background: var(--bg-elevated); }
    &:nth-of-type(3) .delivery { background: var(--surface-inverse); color: var(--surface-inverse-text); }
    &:nth-of-type(3) .delivery p, &:nth-of-type(3) .details li { color: var(--surface-inverse-muted); }
    .proof {
        margin-top: 4rem;
        padding: 2rem clamp(2rem, 4vw, 3rem);
        background: var(--surface-teal-wash);
    }
    .proof h3 { margin-bottom: 1rem; }
    .proof p { color: var(--text-secondary); line-height: 1.7; }
    .proof a { display: inline-block; margin-top: .5rem; }
}

.hero .heading .kicker { color: var(--surface-inverse-text); }

/**************************** Disclosures ****************************/

summary {
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 500;
    line-height: 1.5;
}
summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: .4rem;
}

/**************************** FAQ ****************************/

.faq {
    .content { max-width: 48rem; margin-inline: auto; }
    h2 { margin-bottom: 3rem; }
    details { border-top: 1px solid var(--border-color); padding-block: 1.5rem; }
    summary { font-size: 1.15rem; }
    .details { padding-top: 1rem; }
    p { margin: 0; line-height: 1.7; color: var(--text-secondary); }
}

/**************************** Final ****************************/

.final {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    .heading {
        background: var(--surface-inverse);
        color: var(--surface-inverse-text);
        padding: 6rem 5vw 6rem 12vw;
        display: flex;
        align-items: center;
    }
    h2 { color: inherit; margin: 0; }
    .copy { background: var(--bg-main); padding: 6rem 12vw 6rem 5vw; }
    .copy p { margin: 0 0 2.5rem; line-height: 1.6; }
}

@media (max-width: 1199px) {
    .hero { .heading { padding-left: 10vw; } .copy { padding-right: 8vw; } }
    .jump { padding-inline: 10vw; }
    .final { .heading { padding-left: 10vw; } .copy { padding-right: 10vw; } }
}
@media (max-width: 991px) {
    .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        .heading { padding: 9rem 8vw 5rem; }
        .copy { padding: 4rem 8vw 5rem; border-left: 0; border-top: 4px solid var(--accent-primary); }
    }
    .jump { padding-inline: 8vw; }
    .final { .heading { padding-left: 8vw; } .copy { padding-right: 8vw; } }
}
@media (max-width: 767px) {
    .offer .split { grid-template-columns: 1fr; gap: 3rem; }
    .jump { padding-inline: 6vw; }
    .final {
        grid-template-columns: 1fr;
        .heading, .copy { padding: 4rem 6vw; }
    }
}
@media (max-width: 575px) {
    .hero { .heading { padding: 8rem 4vw 4rem; } .copy { padding: 3rem 4vw 4rem; } }
    .jump { padding-inline: 4vw; }
    .final .heading, .final .copy { padding: 3rem 4vw; }
}