/* =========================================================
   STUDIO VOAR
   CSS PRINCIPAL
   Mobile First
========================================================= */


/* =========================================================
   1. VARIÁVEIS
========================================================= */

:root {

    --purple: #6A1BB1;
    --purple-dark: #40116F;
    --purple-light: #8C45D0;

    --pink: #E83E9F;
    --pink-light: #F7D8EC;

    --white: #FFFFFF;
    --background: #FAF8FB;

    --text: #242027;
    --text-light: #625B67;

    --border: rgba(64, 17, 111, 0.10);

    --shadow-soft:
        0 12px 40px rgba(64, 17, 111, 0.08);

    --shadow-medium:
        0 20px 60px rgba(64, 17, 111, 0.13);

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;

    --container: 1180px;

    --header-height: 76px;

    --transition:
        0.3s ease;

}


/* =========================================================
   2. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


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


body {
    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;

    max-width: 100%;

    height: auto;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


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


h1,
h2,
h3 {
    line-height: 1.15;
}


/* =========================================================
   3. ACESSIBILIDADE
========================================================= */

:focus-visible {

    outline:
        3px solid var(--pink);

    outline-offset:
        4px;

}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   4. CONTAINER
========================================================= */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin-inline:
        auto;

}


/* =========================================================
   5. HEADER
========================================================= */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    height:
        var(--header-height);

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


.header-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    height:
        100%;

}


/* =========================================================
   LOGO
========================================================= */

.logo-link {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.logo {

    width:
        auto;

    height:
        52px;

    object-fit:
        contain;

}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.main-navigation {

    position:
        fixed;

    top:
        var(--header-height);

    left:
        0;

    width:
        100%;

    padding:
        24px 20px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    background:
        var(--white);

    border-bottom:
        1px solid var(--border);

    box-shadow:
        var(--shadow-soft);

    transform:
        translateY(-120%);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        var(--transition);

}


.main-navigation.is-open {

    transform:
        translateY(0);

    opacity:
        1;

    visibility:
        visible;

}


.main-navigation a {

    display:
        block;

    padding:
        13px 16px;

    color:
        var(--text);

    font-size:
        0.95rem;

    font-weight:
        600;

    border-radius:
        10px;

    transition:
        var(--transition);

}


.main-navigation a:hover {

    color:
        var(--purple);

    background:
        var(--pink-light);

}


/* =========================================================
   CTA HEADER
========================================================= */

.header-cta {

    display:
        none;

}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle {

    width:
        44px;

    height:
        44px;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    background:
        transparent;

    border:
        0;

}


.menu-toggle span {

    width:
        23px;

    height:
        2px;

    display:
        block;

    background:
        var(--purple-dark);

    border-radius:
        10px;

    transition:
        var(--transition);

}


.menu-toggle.is-active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.is-active span:nth-child(2) {

    opacity:
        0;

}


.menu-toggle.is-active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   6. HERO
========================================================= */

.hero {

    position:
        relative;

    min-height:
        calc(100svh - var(--header-height));

    display:
        flex;

    align-items:
        center;

    padding:
        70px 0 80px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FAF8FB 55%,
            #F7D8EC 100%
        );

}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    right:
        -180px;

    top:
        30px;

    border-radius:
        50%;

    background:
        rgba(232, 62, 159, 0.12);

    filter:
        blur(4px);

}


.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    left:
        -150px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(106, 27, 177, 0.10);

}


.hero-container {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    gap:
        50px;

}


.hero-content {

    max-width:
        650px;

}


.hero-label,
.section-label {

    margin-bottom:
        14px;

    color:
        var(--pink);

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

}


.hero h1 {

    margin-bottom:
        22px;

    color:
        var(--purple-dark);

    font-size:
        clamp(
            2.5rem,
            10vw,
            5rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.04em;

}


.hero h1 span {

    display:
        block;

    color:
        var(--pink);

}


.hero-subtitle {

    margin-bottom:
        18px;

    color:
        var(--purple);

    font-size:
        clamp(
            1.15rem,
            4vw,
            1.55rem
        );

    font-weight:
        700;

}


.hero-description {

    max-width:
        570px;

    margin-bottom:
        32px;

    color:
        var(--text-light);

    font-size:
        1.05rem;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-media {

    min-width:
        0;

}


.hero-image-wrapper {

    position:
        relative;

    max-width:
        520px;

    margin:
        0 auto;

}


.hero-image-wrapper::before {

    content:
        "";

    position:
        absolute;

    inset:
        -12px;

    border:
        1px solid rgba(
            106,
            27,
            177,
            0.15
        );

    border-radius:
        50% 50% 45% 45%;

    transform:
        rotate(4deg);

}


.hero-image {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 5;

    object-fit:
        cover;

    border-radius:
        48% 48% 28% 28%;

    box-shadow:
        var(--shadow-medium);

}


/* =========================================================
   7. BOTÕES
========================================================= */

.button {

    min-height:
        50px;

    padding:
        13px 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        0.9rem;

    font-weight:
        700;

    text-align:
        center;

    transition:
        var(--transition);

}


.button-primary {

    color:
        var(--white);

    background:
        var(--purple);

    box-shadow:
        0 10px 24px
        rgba(106, 27, 177, 0.22);

}


.button-primary:hover {

    background:
        var(--purple-dark);

    transform:
        translateY(-2px);

}


.button-secondary {

    color:
        var(--purple);

    background:
        var(--white);

    border-color:
        rgba(106, 27, 177, 0.18);

}


.button-secondary:hover {

    color:
        var(--white);

    background:
        var(--purple);

    transform:
        translateY(-2px);

}


.button-light {

    color:
        var(--purple-dark);

    background:
        var(--white);

}


.button-light:hover {

    background:
        var(--pink-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   8. SEÇÕES
========================================================= */

.section {

    padding:
        90px 0;

}


.section-heading {

    max-width:
        680px;

    margin-bottom:
        48px;

}


.section-heading h2,
.section-intro h2 {

    margin-bottom:
        18px;

    color:
        var(--purple-dark);

    font-size:
        clamp(
            2rem,
            6vw,
            3.4rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.035em;

}


.section-heading > p:last-child {

    color:
        var(--text-light);

}


/* =========================================================
   9. SOBRE
========================================================= */

.about-section {

    background:
        var(--white);

}


.about-container {

    display:
        grid;

    gap:
        35px;

}


.about-content {

    max-width:
        700px;

}


.about-content p {

    color:
        var(--text-light);

    font-size:
        1.05rem;

}


.about-content .about-highlight {

    color:
        var(--text);

    font-size:
        clamp(
            1.15rem,
            3vw,
            1.45rem
        );

    font-weight:
        600;

}


/* =========================================================
   10. MODALIDADES
========================================================= */

.modalities-section {

    background:
        var(--background);

}


.modalities-list {

    display:
        grid;

    gap:
        50px;

}


.modality {

    display:
        grid;

    gap:
        30px;

    align-items:
        center;

}


.modality-image {

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        var(--pink-light);

}


.modality-image img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    transition:
        transform
        0.6s ease;

}


.modality:hover .modality-image img {

    transform:
        scale(1.035);

}


.modality-content {

    padding:
        10px 0;

}


.modality-number {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        var(--pink);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.modality-content h3 {

    margin-bottom:
        16px;

    color:
        var(--purple-dark);

    font-size:
        clamp(
            1.7rem,
            5vw,
            2.5rem
        );

}


.modality-content p {

    max-width:
        560px;

    margin-bottom:
        20px;

    color:
        var(--text-light);

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--purple);

    font-weight:
        700;

}


.text-link::after {

    content:
        "→";

    margin-left:
        8px;

    transition:
        var(--transition);

}


.text-link:hover::after {

    transform:
        translateX(5px);

}


/* =========================================================
   11. DIFERENCIAIS
========================================================= */

.differentials-section {

    background:
        var(--purple-dark);

    color:
        var(--white);

}


.differentials-section
.section-label {

    color:
        var(--pink-light);

}


.differentials-section
.section-heading h2 {

    color:
        var(--white);

}


.differentials-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        0;

}


.differential {

    padding:
        28px 18px;

    border-top:
        1px solid
        rgba(255,255,255,0.14);

}


.differential:nth-child(odd) {

    border-right:
        1px solid
        rgba(255,255,255,0.14);

}


.differential-number {

    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--pink);

    font-size:
        0.75rem;

    font-weight:
        800;

}


.differential h3 {

    margin-bottom:
        10px;

    color:
        var(--white);

    font-size:
        1.2rem;

}


.differential p {

    margin:
        0;

    color:
        rgba(255,255,255,0.72);

    font-size:
        0.92rem;

}


/* =========================================================
   12. GALERIA
========================================================= */

.gallery-section {

    background:
        var(--white);

}


.gallery-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.gallery-item {

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        var(--pink-light);

}


.gallery-item img {

    width:
        100%;

    height:
        100%;

    min-height:
        180px;

    object-fit:
        cover;

    transition:
        transform
        0.6s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.04);

}


.gallery-large,
.gallery-wide {

    grid-column:
        span 2;

}


.gallery-large img {

    aspect-ratio:
        16 / 9;

}


.gallery-wide img {

    aspect-ratio:
        16 / 8;

}


/* =========================================================
   13. AULA EXPERIMENTAL
========================================================= */

.experimental-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );

}


.experimental-section::before {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    right:
        -180px;

    top:
        -160px;

    border-radius:
        50%;

    background:
        rgba(232,62,159,0.25);

}


.experimental-section::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        -90px;

    bottom:
        -80px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.08);

}


.experimental-container {

    position:
        relative;

    z-index:
        1;

}


.experimental-content {

    max-width:
        760px;

}


.experimental-content .section-label {

    color:
        var(--pink-light);

}


.experimental-content h2 {

    margin-bottom:
        20px;

    color:
        var(--white);

    font-size:
        clamp(
            2.2rem,
            7vw,
            4rem
        );

    letter-spacing:
        -0.04em;

}


.experimental-content p {

    max-width:
        600px;

    margin-bottom:
        30px;

    color:
        rgba(255,255,255,0.82);

    font-size:
        1.05rem;

}


.butterfly-decoration {

    position:
        absolute;

    right:
        2%;

    bottom:
        0;

    color:
        rgba(255,255,255,0.12);

    font-size:
        8rem;

    transform:
        rotate(-15deg);

}


/* =========================================================
   14. CONTATO
========================================================= */

.contact-section {

    background:
        var(--background);

}


.contact-layout {

    display:
        grid;

    gap:
        50px;

}


.contact-info {

    display:
        grid;

    gap:
        22px;

}


.contact-item {

    padding-bottom:
        20px;

    border-bottom:
        1px solid var(--border);

}


.contact-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--pink);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.contact-item a {

    color:
        var(--purple);

    font-weight:
        700;

}


.contact-item p {

    margin:
        0;

    color:
        var(--text-light);

}


/* =========================================================
   15. FORMULÁRIO
========================================================= */

.contact-form {

    padding:
        28px;

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow-soft);

}


.form-field {

    margin-bottom:
        18px;

}


.form-field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text);

    font-size:
        0.88rem;

    font-weight:
        700;

}


.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

    padding:
        13px 14px;

    color:
        var(--text);

    background:
        var(--background);

    border:
        1px solid
        rgba(64,17,111,0.14);

    border-radius:
        10px;

    outline:
        none;

    transition:
        var(--transition);

}


.form-field textarea {

    resize:
        vertical;

    min-height:
        120px;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--purple);

    background:
        var(--white);

    box-shadow:
        0 0 0 3px
        rgba(106,27,177,0.08);

}


.form-submit {

    width:
        100%;

}


.form-submit:disabled {

    cursor:
        not-allowed;

    opacity:
        0.65;

    transform:
        none;

}


.form-status {

    min-height:
        24px;

    margin:
        14px 0 0;

    font-size:
        0.88rem;

    font-weight:
        600;

}


/* =========================================================
   16. INSTAGRAM
========================================================= */

.instagram-section {

    padding:
        75px 0;

    background:
        var(--pink-light);

}


.instagram-container {

    text-align:
        center;

}


.instagram-content {

    max-width:
        650px;

    margin:
        0 auto;

}


.instagram-content h2 {

    margin-bottom:
        15px;

    color:
        var(--purple-dark);

    font-size:
        clamp(
            1.9rem,
            6vw,
            3rem
        );

}


.instagram-content p:not(.section-label) {

    margin-bottom:
        25px;

    color:
        var(--text-light);

}


/* =========================================================
   17. FOOTER
========================================================= */

.site-footer {

    padding:
        55px 0 25px;

    color:
        rgba(255,255,255,0.75);

    background:
        #24102F;

}


.footer-container {

    display:
        grid;

    gap:
        30px;

}


.footer-brand {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-logo {

    width:
        auto;

    height:
        48px;

    object-fit:
        contain;

}


.footer-brand p {

    max-width:
        320px;

    margin:
        0;

    font-size:
        0.9rem;

}


.footer-navigation {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 20px;

}


.footer-navigation a,
.footer-social a {

    color:
        rgba(255,255,255,0.78);

    font-size:
        0.88rem;

    font-weight:
        600;

    transition:
        var(--transition);

}


.footer-navigation a:hover,
.footer-social a:hover {

    color:
        var(--pink-light);

}


.footer-bottom {

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(255,255,255,0.12);

}


.footer-bottom p {

    margin:
        0;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.78rem;

}


/* =========================================================
   18. WHATSAPP
========================================================= */

.whatsapp-link {

    position:
        relative;

}


[data-whatsapp][hidden] {

    display:
        none !important;

}


/* =========================================================
   19. TABLETS
========================================================= */

@media (min-width: 700px) {


    :root {

        --header-height:
            82px;

    }


    .container {

        width:
            min(
                calc(100% - 64px),
                var(--container)
            );

    }


    .section {

        padding:
            110px 0;

    }


    .hero {

        padding:
            90px 0;

    }


    .hero-container {

        grid-template-columns:
            1fr 0.85fr;

        align-items:
            center;

        gap:
            60px;

    }


    .hero-content {

        order:
            1;

    }


    .hero-media {

        order:
            2;

    }


    .about-container {

        grid-template-columns:
            0.7fr 1.3fr;

        gap:
            70px;

        align-items:
            start;

    }


    .modality {

        grid-template-columns:
            1.05fr 0.95fr;

        gap:
            60px;

    }


    .modality-reverse
    .modality-image {

        order:
            2;

    }


    .modality-reverse
    .modality-content {

        order:
            1;

    }


    .contact-layout {

        grid-template-columns:
            0.8fr 1.2fr;

        align-items:
            start;

    }


    .contact-form {

        padding:
            35px;

    }


    .footer-container {

        grid-template-columns:
            1.5fr 1fr 0.7fr;

        align-items:
            start;

    }


    .footer-bottom {

        grid-column:
            1 / -1;

    }

}


/* =========================================================
   20. DESKTOP
========================================================= */

@media (min-width: 1024px) {


    .menu-toggle {

        display:
            none;

    }


    .main-navigation {

        position:
            static;

        width:
            auto;

        padding:
            0;

        display:
            flex;

        flex-direction:
            row;

        align-items:
            center;

        gap:
            4px;

        background:
            transparent;

        border:
            0;

        box-shadow:
            none;

        transform:
            none;

        opacity:
            1;

        visibility:
            visible;

    }


    .main-navigation a {

        padding:
            8px 13px;

        font-size:
            0.86rem;

    }


    .header-cta {

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            42px;

        padding:
            9px 17px;

        color:
            var(--white);

        background:
            var(--purple);

        border-radius:
            999px;

        font-size:
            0.82rem;

        font-weight:
            700;

        transition:
            var(--transition);

    }


    .header-cta:hover {

        background:
            var(--purple-dark);

        transform:
            translateY(-2px);

    }


    .hero {

        min-height:
            700px;

    }


    .hero-container {

        grid-template-columns:
            1.05fr 0.95fr;

        gap:
            80px;

    }


    .hero-image-wrapper {

        max-width:
            560px;

    }


    .differentials-list {

        grid-template-columns:
            repeat(4, 1fr);

    }


    .differential {

        padding:
            35px 28px;

        border-top:
            1px solid
            rgba(255,255,255,0.14);

        border-right:
            1px solid
            rgba(255,255,255,0.14);

    }


    .differential:last-child {

        border-right:
            0;

    }


    .differential:nth-child(odd) {

        border-right:
            1px solid
            rgba(255,255,255,0.14);

    }


    .gallery-grid {

        grid-template-columns:
            1.2fr 0.8fr 0.8fr;

        grid-auto-rows:
            240px;

        gap:
            14px;

    }


    .gallery-large {

        grid-column:
            span 2;

        grid-row:
            span 2;

    }


    .gallery-wide {

        grid-column:
            span 2;

    }


    .gallery-item img {

        min-height:
            100%;

    }


    .experimental-section {

        padding:
            120px 0;

    }


    .butterfly-decoration {

        right:
            8%;

        font-size:
            12rem;

    }

}


/* =========================================================
   21. TELAS GRANDES
========================================================= */

@media (min-width: 1280px) {


    :root {

        --header-height:
            86px;

    }


    .logo {

        height:
            58px;

    }


    .main-navigation {

        gap:
            10px;

    }


    .main-navigation a {

        padding:
            8px 15px;

    }


    .hero {

        padding:
            100px 0;

    }


    .hero-container {

        gap:
            110px;

    }


    .section {

        padding:
            125px 0;

    }

}


/* =========================================================
   22. TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 359px) {


    .container {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );

    }


    .hero {

        padding-top:
            55px;

    }


    .hero h1 {

        font-size:
            2.2rem;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .button {

        width:
            100%;

    }


    .differentials-list {

        grid-template-columns:
            1fr;

    }


    .differential:nth-child(odd) {

        border-right:
            0;

    }

}