/* ==========================================================================
   PSICÓLOGA MARTHA DIAS FENATO

   Índice
   01. Variáveis
   02. Reset e base
   03. Utilitários e tipografia de seção
   04. Componentes
   05. Header e navegação
   06. Seções
   07. Rodapé e botão flutuante
   08. Responsivo

========================================================================== */


/* ==========================================================================
   01. VARIÁVEIS
========================================================================== */


:root {


    --background: #FAF8F5;
    --background-alt: #F2ECE6;

    --white: #FFFFFF;


    --primary: #B695C0;
    --primary-hover: #A684B2;
    --primary-soft: rgba(182, 149, 192, .12);


    --secondary: #95B68C;
    --secondary-hover: #82A47A;
    --secondary-soft: rgba(149, 182, 140, .12);


    --text: #5E5652;
    --text-light: #8B8079;


    --border: #E8DFD7;



    --font-display:
        "Cormorant Garamond",
        Georgia,
        serif;


    --font-body:
        "Poppins",
        system-ui,
        sans-serif;



    --shadow:
        0 15px 40px rgba(0, 0, 0, .07);



    --radius-sm: 18px;
    --radius: 26px;
    --radius-lg: 40px;



    --header-height: 90px;


    --section-space: 110px;


    --transition: .35s ease;


}







/* ==========================================================================
   02. RESET E BASE
========================================================================== */



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


    margin: 0;
    padding: 0;

    box-sizing: border-box;


}





html {


    scroll-behavior: smooth;


}





body {


    background: var(--background);

    color: var(--text);


    font-family: var(--font-body);


    line-height: 1.6;


    overflow-x: hidden;


}





img {


    display: block;

    width: 100%;

    height: auto;


}





a {


    color: inherit;

    text-decoration: none;


}





ul {


    list-style: none;


}





button,
input,
textarea {


    font: inherit;

    color: inherit;


}





:focus-visible {


    outline: 2px solid var(--primary);

    outline-offset: 3px;

    border-radius: 4px;


}





section[id],
main[id] {


    scroll-margin-top:
        calc(var(--header-height) + 20px);


}









/* ==========================================================================
   03. UTILITÁRIOS E TIPOGRAFIA DE SEÇÃO
========================================================================== */



.container {


    width: min(1180px, 92%);


    margin-inline: auto;


}





main > section {


    padding:
        var(--section-space)
        0;


}





.sr-only {


    position: absolute;


    width: 1px;

    height: 1px;


    padding: 0;


    overflow: hidden;


    clip: rect(0, 0, 0, 0);


    white-space: nowrap;


    border: 0;


}





.skip-link {


    position: absolute;


    left: -9999px;


    top: 0;


    z-index: 1000;


    background: var(--primary);


    color: var(--white);


    padding: 12px 20px;


    border-radius:
        0 0 var(--radius-sm) 0;


}





.skip-link:focus {


    left: 0;


}





.section-tag {


    display: inline-block;


    margin-bottom: 18px;


    color: var(--primary);


    font-size: .9rem;


    font-weight: 600;


    letter-spacing: 2px;


    text-transform: uppercase;


}





.eyebrow {


    color: var(--secondary);


    font-size: .9rem;


    font-weight: 600;


    letter-spacing: 2px;


    text-transform: uppercase;


}





.section-title {


    margin-bottom: 55px;


    font-family: var(--font-display);


    font-size:
        clamp(2.3rem, 5vw, 3rem);


    font-weight: 600;


    line-height: 1.2;


}





h2:not(.section-title) {


    margin-bottom: 28px;


    font-family: var(--font-display);


    font-size:
        clamp(2.4rem, 5vw, 3.2rem);


    font-weight: 600;


    line-height: 1.2;


}





h3 {


    font-family: var(--font-display);


    font-weight: 600;


}

/* ==========================================================================
   04. COMPONENTES
========================================================================== */


/* --------------------------------------------------------------------------
   Botões
-------------------------------------------------------------------------- */


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;



    padding: 18px 36px;


    border: 1px solid transparent;


    border-radius: 999px;



    font-weight: 500;


    cursor: pointer;



    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);


}





.btn--sm {


    padding: 14px 28px;


}





.btn--primary {


    background: var(--primary);


    color: var(--white);


}





.btn--primary:hover {


    background: var(--primary-hover);


    transform: translateY(-3px);


}





.btn--outline {


    border-color: var(--secondary);


    color: var(--secondary);


}





.btn--outline:hover {


    background: var(--secondary);


    color: var(--white);


}









/* --------------------------------------------------------------------------
   Acordeão
-------------------------------------------------------------------------- */


.accordion {


    max-width: 900px;


    margin-inline: auto;


}





.accordion__heading {


    margin: 0;


    font-family: inherit;


    font-weight: inherit;


}





.accordion__trigger {


    display: flex;


    align-items: center;


    justify-content: space-between;



    gap: 20px;


    width: 100%;



    background: none;


    border: none;


    text-align: left;


    cursor: pointer;



    color: var(--text);


}





.accordion__icon {


    color: var(--primary);


    transition:
        transform var(--transition);


}





.accordion__item.is-open .accordion__icon {


    transform: rotate(45deg);


}





.accordion__panel {


    max-height: 0;


    overflow: hidden;


    transition:
        max-height var(--transition);


}





.accordion__content p {


    color: var(--text-light);


    line-height: 1.9;


}







/* --------------------------------------------------------------------------
   Acordeão minimalista
-------------------------------------------------------------------------- */


.accordion--minimal .accordion__item {


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


}





.accordion--minimal .accordion__trigger {


    padding: 30px 0;


    font-family: var(--font-display);


    font-size: 2rem;


    font-weight: 600;


}





.accordion--minimal .accordion__icon {


    font-size: 2rem;


    line-height: 1;


}





.accordion--minimal .accordion__content {


    max-width: 700px;


    padding-bottom: 30px;


    font-size: 1.05rem;


}








/* --------------------------------------------------------------------------
   Acordeão em cartão - FAQ
-------------------------------------------------------------------------- */


.faq{
    background: var(--background);
    position: relative;
}

.faq .section-title{
    margin-bottom: 50px;
}


.accordion--card .accordion__item {


    margin-bottom: 20px;


    background: var(--white);


    border-radius: 24px;


    box-shadow: var(--shadow);


    overflow: hidden;


}





.accordion--card .accordion__trigger {


    padding: 28px 32px;


    font-size: 1.05rem;


    font-weight: 500;


}





.accordion--card .accordion__content {


    padding: 0 32px 28px;


}









/* --------------------------------------------------------------------------
   Animação de entrada
-------------------------------------------------------------------------- */


.reveal {


    opacity: 0;


    transform: translateY(24px);


    transition:


        opacity .7s ease,


        transform .7s ease;


}





.reveal.is-visible {


    opacity: 1;


    transform: none;


}







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


    html {


        scroll-behavior: auto;


    }



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


        animation-duration: .01ms !important;


        transition-duration: .01ms !important;


    }



    .reveal {


        opacity: 1;


        transform: none;


    }


}









/* ==========================================================================
   05. HEADER E NAVEGAÇÃO
========================================================================== */



.header {


    position: fixed;


    inset: 0 0 auto 0;


    z-index: 999;



    transition:


        background var(--transition),


        box-shadow var(--transition);


}





.header.is-scrolled {


    background:
        rgba(250, 248, 245, .96);



    backdrop-filter: blur(14px);



    box-shadow:
        0 10px 25px rgba(0, 0, 0, .05);


}





.header__inner {


    display: flex;


    align-items: center;


    justify-content: space-between;



    height: var(--header-height);


}





.logo {


    font-family: var(--font-display);


    font-size: 2rem;


    font-weight: 600;


}





.logo span {


    color: var(--primary);


}





.menu {


    display: flex;


    gap: 38px;


}





.menu a {


    position: relative;


    transition:
        color var(--transition);


}





.menu a::after {


    content: "";


    position: absolute;



    left: 0;


    bottom: -8px;



    width: 0;


    height: 2px;



    background: var(--primary);



    transition:
        width var(--transition);


}





.menu a:hover::after,
.menu a.is-open::after {


    width: 100%;


}





.menu a.is-open {


    color: var(--primary);


}





.menu-toggle {


    display: none;


    background: none;


    border: none;



    font-size: 1.6rem;


    cursor: pointer;


}

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


/* --------------------------------------------------------------------------
   HERO
-------------------------------------------------------------------------- */

.hero{
    position:relative;
    display:flex;
    align-items:center;

    min-height:100vh;

    background:var(--background);

    overflow:hidden;

    isolation:isolate;
}

.hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:url("img/bg.png");
    background-repeat:repeat;
    background-size:700px;

    opacity:.08;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 120px,
        black
    );

    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent,
        black 120px,
        black
    );

    pointer-events:none;

    z-index:0;
}

/* =========================
   FLORAIS
========================= */

.shape--1{
   content:"";

    position:absolute;

    top:0px;
    left:100px;

    width:350px;
    height:350px;

    background:url("img/floral roxo.png") no-repeat;
    background-size:contain;

    opacity:80;

    z-index:1;

    pointer-events:none;
}

/* =========================
   CONTEÚDO
========================= */

.hero__grid{
    position:relative;

    z-index:3;

    display:grid;
    grid-template-columns:1.1fr .9fr;

    gap:80px;
    align-items:center;
}

/* =========================
   TEXTO
========================= */

.hero__text h1{
    margin:18px 0 30px;

    font-family:var(--font-display);
    font-size:clamp(2.5rem,7vw,4.5rem);
    font-weight:600;
    line-height:1.05;
}

.hero__text h1 span{
    color:var(--primary);
}

.hero__text p{
    max-width:560px;

    color:var(--text-light);

    text-align: justify;

    font-size:1.1rem;

    line-height:1.9;
}

.hero__actions{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;
}

/* =========================
   FOTO
========================= */

.hero__image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    transform: translateX(30px);

    isolation: isolate; /* importante */
}

.hero__image img{
    position: relative;

    width: 100%;
    max-width: 650px;
    height: auto;

    display: block;

    border-radius: 0;
    box-shadow: none;
    background: none;

    transform: scaleX(-1) scale(1.15) translateY(50px);
    transform-origin: bottom center;

    filter: drop-shadow(0 25px 35px rgba(0,0,0,.12));

    z-index: 2; /* Martha */
}

/* Floral verde */

.hero__image::before{
    content: "";

    position: absolute;

    right: -160px;
    bottom: -40px;

    width: 350px;
    height: 350px;

    background: url("img/floral verde.png") no-repeat center;
    background-size: contain;

    opacity: 80;

    z-index: 3; /* na frente da Martha */

    pointer-events: none;
}









/* --------------------------------------------------------------------------
   SOBRE
-------------------------------------------------------------------------- */

.about{
    position:relative;
    background:var(--background);
}

.about__grid {


    display: grid;



    grid-template-columns: .95fr 1.05fr;



    gap: 90px;



    align-items: center;


}


.about::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:url("img/bg.png");
    background-repeat:repeat;
    background-size:700px;

    opacity:.08;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 120px,
        black
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 120px,
        black
    );

    pointer-events:none;
}

.about__image {


    position: relative;


}




.about__text p {


    margin-bottom: 24px;



    color: var(--text-light);



    font-size: 1.05rem;



    text-align: justify;


    line-height: 2;


}





.about__text .btn {


    margin-top: 18px;


}


.about::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-1px;

    width:100%;
    height:200px; 

    background:url("img/div.png") repeat-x 80px bottom;
    background-size:auto 200px;

    opacity: 0.5;

    pointer-events:none;
    z-index:5;
}


/* --------------------------------------------------------------------------
   COMO POSSO AJUDAR
-------------------------------------------------------------------------- */

.help .accordion{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.accordion__item{
    width:100%;
}


/* --------------------------------------------------------------------------
   PROCESSO TERAPÊUTICO
-------------------------------------------------------------------------- */

.process{
    position: relative;

    background: var(--background);

    overflow: hidden;
}


/* =========================
   TEXTURA
========================= */

.process::before{
    content: "";

    position: absolute;
    inset: 0;

    background-image: url("img/bg.png");
    background-repeat: repeat;
    background-size: 700px;

    opacity: .08;

    pointer-events: none;
}


/* =========================
   GRID
========================= */

.process__grid{
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 90px;

    align-items: center;
}


/* =========================
   TEXTO
========================= */

.process__text p{
    margin-bottom: 35px;

    color: var(--text-light);

    text-align: justify;

    line-height: 2;
}


/* =========================
   LISTA
========================= */

.check-list{
    display: flex;

    flex-direction: column;

    gap: 22px;
}

.check-list li{
    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 1.02rem;
}

.check-list i{
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    background: var(--secondary-soft);

    border-radius: 50%;

    color: var(--primary);
}


/* =========================
   ÁREA DO CARROSSEL
========================= */

.process__image{
    position: relative;

    width: 100%;
}


/* =========================
   CARROSSEL
========================= */

.carousel{
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 36px;

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


/* Faixa das imagens */

.carousel__track{
    display: flex;

    width: 100%;
    height: 100%;

    transition: transform .5s ease;
}


/* Imagens */

.carousel__track img{
    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================
   BOTÕES
========================= */

.carousel__button{
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.85);

    color: var(--primary);

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition);
}

.carousel__button:hover{
    background: var(--white);

    transform: translateY(-50%) scale(1.05);
}

.carousel__button--prev{
    left: 18px;
}

.carousel__button--next{
    right: 18px;
}


/* =========================
   INDICADORES
========================= */

.carousel__dots{
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 18px;
}

.carousel__dot{
    width: 8px;
    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: var(--secondary);

    opacity: .35;

    cursor: pointer;

    transition:
        opacity var(--transition),
        transform var(--transition);
}

.carousel__dot.active{
    opacity: 1;

    transform: scale(1.3);
}


/* =========================
   FLORAL DECORATIVO
========================= */

.process__image::after{
    content: "";

    position: absolute;

    right: -110px;
    bottom: -50px;

    width: 260px;
    height: 260px;

    background: url("img/floral\ verde\ 2.png")
        no-repeat
        center;

    background-size: contain;

    pointer-events: none;

    z-index: 2;
}
/* --------------------------------------------------------------------------
   ESPECIALIDADES + CONSTELAÇÃO.;
-------------------------------------------------------------------------- */

.specialties {

background: var(--background-alt);

}

.specialties__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:55px;
}

.specialty{
    padding:40px;
    background:var(--white);
    border-radius:30px;
    box-shadow:var(--shadow);
    text-align:center;
}

.specialty i{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    border-radius:50%;
    background:var(--secondary-soft);
    color:var(--primary);
    font-size:1.7rem;
}

.specialty h3{
    margin-bottom:15px;
    font-size:2rem;
}

.specialty p{
    color:var(--text-light);
    line-height:1.8;
    text-align: justify;
}

.constellation{
    position: relative;
    background: var(--background-alt);
    overflow: hidden;
}

/* Textura */

.constellation::before{
    content: "";

    position: absolute;
    inset: 0;

    background-image: url("img/bg2.png");
    background-repeat: repeat;
    background-size: 700px;

    opacity: .08;

    pointer-events: none;
}

.constellation__grid{
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    gap: 90px;
    align-items: center;
}

.constellation img{
    border-radius:35px;
    box-shadow:var(--shadow);
}

.constellation__image::before{
    content:"";

    position:absolute;

    left:1000px;
    top:-90px;

    width:260px;
    height:260px;

    background:url("img/floral\ roxo\ 2.png") no-repeat center;
    background-size:contain;
    opacity: 0.8;

    transform:rotate(-60deg) scaleX(-1);

    pointer-events:none;
}

.constellation p{
    margin-bottom:22px;
    color:var(--text-light);
    line-height:1.9;
    text-align: justify;
}

/* --------------------------------------------------------------------------
   BENEFÍCIOS
-------------------------------------------------------------------------- */


.benefits {


    background: var(--background-alt);


}





.benefits__grid {


    display: grid;



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



    gap: 35px;


}





.benefit {


    padding: 45px 40px;



    background: var(--white);



    border-radius: 30px;



    box-shadow: var(--shadow);



    transition:
        transform var(--transition);


}





.benefit:hover {


    transform: translateY(-8px);


}





.benefit h3 {


    margin-bottom: 18px;



    font-size: 2rem;


}





.benefit p {


    color: var(--text-light);

    text-align: justify;

    line-height: 1.9;


}









/* --------------------------------------------------------------------------
   CITAÇÃO
-------------------------------------------------------------------------- */


.quote {


    text-align: center;

    background: var(--background);

}

.quote__box {


    max-width: 900px;



    margin-inline: auto;



    padding: 70px 60px;



    background: var(--white);



    border-radius: 35px;



    box-shadow: var(--shadow);


}





.quote__box i {


    margin-bottom: 25px;



    color: var(--secondary);



    font-size: 3rem;


}





.quote__box p {


    margin-bottom: 25px;



    font-family: var(--font-display);



    font-size:
        clamp(1.6rem, 3.5vw, 2.1rem);



    line-height: 1.6;


}





.quote__box figcaption {


    color: var(--text-light);



    letter-spacing: 1px;


}









/* --------------------------------------------------------------------------
   CTA
-------------------------------------------------------------------------- */


.cta {


    background: var(--background-alt);


}


.cta__box {


    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 60px;



    padding: 70px;



    background: var(--white);



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



    box-shadow: var(--shadow);


}





.cta__box h2 {


    margin: 15px 0 20px;
    


}





.cta__box p {


    max-width: 600px;


    text-align: justify;



    color: var(--text-light);



    line-height: 1.9;


}









/* --------------------------------------------------------------------------
   CONTATO
-------------------------------------------------------------------------- */

.contact{
    position:relative;

    background:var(--background);

    overflow:hidden;
}

.contact::before{
    content: "";

    position: absolute;
    inset: 0;

    background-image: url("img/bg2.png");
    background-repeat: repeat;
    background-size: 700px;

    opacity: .05;

    pointer-events: none;
}


.contact__grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}


/* =========================
   INFORMAÇÕES
========================= */

.contact__info h2{
    margin:15px 0 25px;

    font-family:var(--font-display);

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

    line-height:1.1;
}

.contact__info > p{
    max-width:550px;

    margin-bottom:40px;

    text-align: justify;

    color:var(--text-light);

    font-size:1.05rem;

    line-height:1.9;
}


/* =========================
   LISTA
========================= */

.contact__list{
    display:flex;

    flex-direction:column;

    gap:25px;
}

.contact__item{
    display:flex;

    align-items:center;

    gap:18px;
}

.contact__item > i{
    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    width:50px;
    height:50px;

    border-radius:50%;

    background:var(--secondary-soft);

    color:var(--primary);

    font-size:1.2rem;
}

.contact__item div{
    display:flex;

    flex-direction:column;

    gap:5px;
}

.contact__item strong{
    font-size:1rem;
}

.contact__item span,
.contact__item a{
    color:var(--text-light);

    line-height:1.5;
}

.contact__item a{
    transition:color var(--transition);
}

.contact__item a:hover{
    color:var(--primary);
}


/* =========================
   CARD
========================= */

.contact__card{
    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

    padding:60px;

    background:var(--white);

    border-radius:40px;

    box-shadow:var(--shadow);

    overflow:hidden;

    isolation:isolate;
}



/* Conteúdo */

.contact__card-content{
    position:relative;

    z-index:2;
    text-align: justify;
    max-width:480px;
}

.contact__card-tag{
    display:block;

    margin-bottom:15px;

    color:var(--primary);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.contact__card h3{
    margin-bottom:20px;

    font-family:var(--font-display);

    font-size:2.5rem;

    line-height:1.15;
}

.contact__card p{
    margin-bottom:18px;

    color:var(--text-light);

    line-height:1.8;
}

.contact__card .btn{
    display:flex;
    width:max-content;
    margin:25px auto 0;
    justify-content:center;
}

.contact__card .btn i{
    margin-right:8px;
}

/* ==========================================================================
   07. RODAPÉ E BOTÃO FLUTUANTE
========================================================================== */

.footer{
    position:relative;
    overflow:hidden;

    padding-top:80px;

    background:#EFE7DF;
}

/* =========================
   FLORAIS
========================= */

/* Floral esquerdo */

.footer::before{
    content:"";

    position:absolute;

    left:-80px;
    bottom:-60px;

    width:380px;
    height:380px;

    background:url("img/flores.png") no-repeat left bottom;
    background-size:contain;

    transform:rotate(20deg);

    opacity:.28;

    pointer-events:none;
}

/* Floral direito */

.footer::after{
    content:"";

    position:absolute;

    right:-60px;
    bottom:-80px;

    width:380px;
    height:380px;

    background:url("img/flores 2.png") no-repeat right bottom;
    background-size:contain;

    opacity:.28;

    pointer-events:none;
}

/* =========================
   CONTEÚDO
========================= */

.footer__grid,
.footer__copyright{
    position:relative;
    z-index:2;
}

.footer__grid{
    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:45px;

    align-items:start;

    padding-bottom:50px;
}

/* =========================
   TEXTOS
========================= */

.footer__grid h3{
    margin-bottom:15px;

    font-size:2rem;
}

.footer__grid h4{
    margin-bottom:18px;
}

.footer__grid p{
    color:var(--text-light);
    line-height:1.8;
}

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

.footer__nav{
    display:flex;
    flex-direction:column;

    gap:12px;
}

.footer__nav a{
    color:var(--text-light);

    transition:color var(--transition);
}

.footer__nav a:hover{
    color:var(--primary);
}

/* =========================
   REDES SOCIAIS
========================= */

.social{
    display:flex;

    gap:15px;

    margin-top:15px;
}

.social a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:45px;
    height:45px;

    background:var(--white);

    border-radius:50%;

    color:var(--primary);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.social a:hover{
    background:var(--primary);
    color:var(--white);

    transform:translateY(-3px);
}

/* =========================
   COPYRIGHT
========================= */

.footer__copyright{
    padding:25px;

    border-top:1px solid rgba(182,149,192,.20);

    color:var(--text-light);

    font-size:.9rem;

    text-align:center;
}

.footer__copyright a{
    color:var(--primary);

    font-weight:500;

    transition:color var(--transition);
}

.footer__copyright a:hover{
    color:var(--secondary);
}


/* --------------------------------------------------------------------------
   WhatsApp flutuante
-------------------------------------------------------------------------- */


.whatsapp-float {


    position: fixed;



    right: 30px;



    bottom: 30px;



    z-index: 999;



    display: flex;



    align-items: center;



    justify-content: center;



    width: 65px;



    height: 65px;



    background: var(--secondary);



    border-radius: 50%;



    color: var(--white);



    font-size: 2rem;



    box-shadow:
        0 15px 30px rgba(0, 0, 0, .15);



    transition:
        transform var(--transition),
        background var(--transition);


}





.whatsapp-float:hover {


    background: var(--secondary-hover);



    transform: scale(1.08);


}









/* ==========================================================================
   08. RESPONSIVO
========================================================================== */

@media (max-width: 900px) {

    /* --------------------------------------------------------------------------
       GERAL
    -------------------------------------------------------------------------- */

    :root {
        --header-height: 80px;
        --section-space: 65px;
    }

    html {
        font-size: 15px;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        width: 90%;
        max-width: 1180px;
    }

    main > section {
        padding: var(--section-space) 0;
    }


    /* --------------------------------------------------------------------------
       TIPOGRAFIA
    -------------------------------------------------------------------------- */

    .section-tag,
    .eyebrow {
        font-size: .75rem;
        letter-spacing: 1.5px;
    }

    .section-title,
    h2:not(.section-title) {
        font-size: 2.15rem;
        line-height: 1.15;
    }

    .section-title {
        margin-bottom: 35px;
    }

    h2:not(.section-title) {
        margin-bottom: 22px;
    }


    /* --------------------------------------------------------------------------
       BOTÕES
    -------------------------------------------------------------------------- */

    .btn {
        min-height: 52px;
        padding: 15px 26px;
    }

    .btn--sm {
        padding: 13px 22px;
    }


 /* --------------------------------------------------------------------------
   HEADER
-------------------------------------------------------------------------- */

.header__inner {
    height: var(--header-height);
}

.nav {
    justify-content: space-between;
    gap: 0;
    padding: 14px 6%;
}

.logo {
    font-size: 1.45rem;
}

.logo img {
    height: 38px;
}

.menu-toggle {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    background: none;
    border: none;

    font-size: 1.6rem;

    cursor: pointer;
}


/* --------------------------------------------------------------------------
   MENU MOBILE
-------------------------------------------------------------------------- */

.header__nav {
    position: fixed;

    top: var(--header-height);
    right: 6%;
    left: auto;

    width: 230px;

    padding: 30px 20px;

    background: rgba(250, 248, 245, .98);

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

    border-radius: 22px;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-10px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

    z-index: 1000;
}


/* MENU ABERTO */

.header__nav.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.menu {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 20px;
}


.menu a {
    font-size: 1.05rem;
}


.menu a::after {
    bottom: -6px;
}


/* --------------------------------------------------------------------------
   BOTÃO DA HEADER
-------------------------------------------------------------------------- */

.header .btn,
.nav .btn {
    width: auto;

    min-height: 0;

    padding: 9px 14px;

    font-size: .82rem;
}


.menu .btn {
    width: 100%;

    max-width: 280px;

    margin-top: 10px;
}


/* --------------------------------------------------------------------------
   BOTÃO DA HEADER
-------------------------------------------------------------------------- */

.header .btn,
.nav .btn {
    width: auto;

    min-height: 0;

    padding: 9px 14px;

    font-size: .82rem;
}

.menu .btn {
    width: 100%;

    max-width: 280px;

    margin-top: 10px;
}

    /* --------------------------------------------------------------------------
       HERO
    -------------------------------------------------------------------------- */

    .hero {
        min-height: auto;

        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 55px;
    }

    .hero__grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;

        text-align: center;
    }

    /*
       Mantém a ordem:
       tag → título → imagem → texto → botões
    */

    .hero__text {
        display: contents;
    }

    .hero__text .eyebrow {
        order: 1;
    }

    .hero__text .section-tag {
        order: 1;

        display: block;

        margin-bottom: 2px !important;
    }

    .hero__text h1 {
        order: 2;

        margin: 0 0 22px !important;

        font-size: clamp(2.45rem, 12vw, 3.2rem);

        line-height: 1.05;
    }

    .hero__text p {
        order: 4;

        max-width: 560px;

        margin-inline: auto;

        font-size: 1rem;
        line-height: 1.8;
    }

   .hero__actions {
        order: 5;

        display: flex;

        justify-content: center;
        align-items: center;

        flex-direction: row;

        gap: 10px;

        margin-top: 28px;
    }

    .hero__actions .btn {
        width: auto;
        flex: 0 1 auto;

        min-width: 0;
        max-width: none;

        padding: 11px 16px;

        font-size: .82rem;
    }


    /* Floral roxo */

    .shape--1 {
        top: 80px;
        left: -40px;

        width: 200px;
        height: 200px;

        opacity: .80;
    }


    /* Imagem */

    .hero__image {
        order: 3;

        display: flex;

        justify-content: center;
        align-items: flex-end;

        transform: none;

        margin: 5px 0 25px;
    }

    .hero__image img {
        width: min(100%, 330px);
        max-width: 330px;

        height: auto;

        transform: scaleX(-1);
        transform-origin: bottom center;
    }


    /* Floral verde */

    .hero__image::before {
        right: -55px;
        bottom: -15px;

        width: 200px;
        height: 200px;

        opacity: .80;

        transform: rotate(10deg); 
    }


    /* --------------------------------------------------------------------------
       SOBRE
    -------------------------------------------------------------------------- */

    .about {
        padding-top: 75px;
        padding-bottom: 105px;
    }

    .about__grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;
    }

    .about__text {
        display: contents;

    }

    .about__text .section-tag {
        order: 1;

        display: block;

        margin-bottom: 2px !important;
    }

    .about__text h2 {
        order: 2;

        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .about__image {
        order: 3;

        display: flex;

        justify-content: center;
        align-items: center;

        margin: 5px 0 35px;
    }

    .about__image img {
        width: min(100%, 330px);
        max-width: 330px;

        margin-inline: auto;
    }

    .about__text p {
        order: 4;

        margin-bottom: 20px;

        font-size: 1rem;
        line-height: 1.9;

        text-align: justify;
    }

    .about__text .btn {
        order: 5;

        width: auto;

        margin: 8px auto 0;

        justify-self: center;
    }

    .about::after {
        height: 110px;

        background-size: auto 110px;
        background-position: center bottom;
    }


    /* --------------------------------------------------------------------------
       COMO POSSO AJUDAR
    -------------------------------------------------------------------------- */

    .help .section-title {
        max-width: 100%;
    }

    .help .accordion {
        margin-top: 20px;
    }

    .accordion--minimal .accordion__trigger {
        padding: 24px 0;

        gap: 15px;

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

        line-height: 1.2;
    }

    .accordion--minimal .accordion__icon {
        flex-shrink: 0;

        font-size: 1.7rem;
    }

    .accordion--minimal .accordion__content {
        padding-bottom: 24px;

        font-size: .98rem;
    }


    /* --------------------------------------------------------------------------
       PROCESSO TERAPÊUTICO
    -------------------------------------------------------------------------- */

    .process__grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .process__text {
        text-align: left;
    }

    .process__text p {
        margin-bottom: 28px;

        line-height: 1.9;
    }

    .check-list {
        gap: 18px;

        text-align: left;
    }

    .check-list li {
        align-items: flex-start;

        gap: 14px;

        font-size: .98rem;
        line-height: 1.6;
    }

    .check-list i {
        width: 32px;
        height: 32px;

        margin-top: 1px;

        font-size: .9rem;
    }


    /* Carrossel do consultório */

    .process__image,
    .carousel {
        width: 100%;
        max-width: 430px;

        margin-inline: auto;
    }

    .process__image img,
    .carousel {
        aspect-ratio: 1 / 1;
    }

    .process__image img {
        width: 100%;

        object-fit: cover;

        border-radius: 28px;
    }

    .process__image::after {
        right: -45px;
        bottom: -35px;

        width: 170px;
        height: 170px;
    }


    /* --------------------------------------------------------------------------
       ESPECIALIDADES
    -------------------------------------------------------------------------- */

    .specialties__grid {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 35px;

        max-width: 380px;
    }

    .specialty {
        padding: 30px 22px;

        border-radius: 24px;
    }

    .specialty i {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;

        font-size: 1.4rem;
    }

    .specialty h3 {
        margin-bottom: 12px;

        font-size: 1.55rem;
    }

    .specialty p {
        font-size: .95rem;

        line-height: 1.8;
    }


    /* --------------------------------------------------------------------------
       CONSTELAÇÃO
    -------------------------------------------------------------------------- */

    .constellation__grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .constellation__image {
        position: relative;

        width: 100%;
        max-width: 430px;

        margin-inline: auto;
    }

    .constellation img {
        border-radius: 28px;
    }

    .constellation__image::before {
        left: auto;
        right: -55px;
        top: -45px;

        width: 170px;
        height: 170px;

        opacity: .5;
    }

    .constellation__text {
        text-align: center;
    }

    .constellation p {
        margin-bottom: 18px;

        font-size: 1rem;
        line-height: 1.85;
    }


    /* --------------------------------------------------------------------------
       BENEFÍCIOS
    -------------------------------------------------------------------------- */

    .benefits__grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .benefit {
        padding: 30px 22px;

        border-radius: 24px;
    }

    .benefit h3 {
        margin-bottom: 14px;

        font-size: 1.65rem;
    }

    .benefit p {
        font-size: .98rem;

        line-height: 1.8;
    }


    /* --------------------------------------------------------------------------
       CITAÇÃO
    -------------------------------------------------------------------------- */

    .quote__box {
        padding: 38px 20px;

        border-radius: 28px;
    }

    .quote__box i {
        margin-bottom: 18px;

        font-size: 2.5rem;
    }

    .quote__box p {
        margin-bottom: 20px;

        font-size: 1.5rem;

        line-height: 1.5;
    }

    .quote__box figcaption {
        font-size: .9rem;
    }


    /* --------------------------------------------------------------------------
       CTA
    -------------------------------------------------------------------------- */

    .cta__box {
        flex-direction: column;

        align-items: center;

        gap: 30px;

        padding: 38px 22px;

        text-align: center;

        border-radius: 30px;
    }

    .cta__box h2 {
        margin: 14px 0 18px;
    }

    .cta__box p {
        max-width: 100%;

        line-height: 1.85;
    }

    .cta__box .btn {
        width: 100%;
        max-width: 280px;
    }


    /* --------------------------------------------------------------------------
       FAQ
    -------------------------------------------------------------------------- */

    .faq .section-title {
        margin-bottom: 35px;
    }

    .faq .accordion {
        display: flex;

        flex-direction: column;

        gap: 16px;
    }

    .accordion--card .accordion__item {
        margin-bottom: 0;

        border-radius: 20px;
    }

    .accordion--card .accordion__trigger {
        padding: 20px 18px;

        gap: 16px;

        font-size: .95rem;

        line-height: 1.5;
    }

    .accordion--card .accordion__icon {
        flex-shrink: 0;

        font-size: 1.6rem;
    }

    .accordion--card .accordion__content {
        padding: 0 18px 22px;
    }

    .accordion--card .accordion__content p {
        font-size: .96rem;

        line-height: 1.8;
    }


    /* --------------------------------------------------------------------------
       CONTATO
    -------------------------------------------------------------------------- */

    .contact__grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact__info {
        text-align: left;
    }

    .contact__info > p {
        margin-bottom: 30px;

        line-height: 1.85;

        text-align: justify;
    }

    .contact__item {
        align-items: flex-start;

        gap: 12px;

        margin-bottom: 22px;

        text-align: left;
    }

    .contact__item > i {
        width: 44px;
        height: 44px;

        font-size: 1rem;
    }

    .contact__item div {
        gap: 4px;
    }

    /*
       Caso ainda exista algum formulário no HTML,
       ele fica confortável no mobile.
    */

    .contact__form {
        padding: 25px 18px;

        border-radius: 24px;
    }

    .contact__form input,
    .contact__form textarea {
        padding: 16px;

        font-size: .98rem;

        border-radius: 16px;
    }

    .contact__form textarea {
        min-height: 140px;
    }


    /* --------------------------------------------------------------------------
       RODAPÉ
    -------------------------------------------------------------------------- */

    .footer {
        padding-top: 40px;
    }


    /* Florais */

    .footer::before {
        left: -90px;
        bottom: -80px;

        width: 300px;
        height: 300px;

        opacity: .20;
    }

    .footer::after {
        right: -70px;
        bottom: -70px;

        width: 300px;
        height: 300px;

        opacity: .20;
    }


    /*
       Martha ocupa a primeira linha.
       Navegação e Atendimento ficam lado a lado.
       Redes sociais ficam abaixo.
    */

    .footer__grid {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 35px 30px;

        align-items: start;

        padding-bottom: 40px;

        text-align: left;
    }


    /* Martha */

    .footer__grid > div:first-child {
        grid-column: 1 / -1;

        text-align: left;
    }

    .footer__grid > div:first-child h3 {
        margin-bottom: 12px;

        font-size: 1.9rem;
    }


    /* Navegação + Atendimento */

    .footer__grid nav {
        width: 100%;

        text-align: left;
    }

    .footer__grid nav h4 {
        margin-bottom: 14px;
    }

    .footer__grid nav a {
        margin-bottom: 10px;
    }


    /* Redes sociais */

    .footer__grid > div:last-child {
        grid-column: 1 / -1;

        padding-top: 5px;

        text-align: left;
    }

    .footer__grid > div:last-child .social {
        justify-content: flex-start;

        margin-top: 15px;
    }


    /* Copyright */

    .footer__copyright {
        padding: 22px 15px;

        font-size: .82rem;

        line-height: 1.7;
    }


    /* --------------------------------------------------------------------------
       WHATSAPP FLUTUANTE
    -------------------------------------------------------------------------- */

    .whatsapp-float {
        right: 15px;
        bottom: 15px;

        width: 54px;
        height: 54px;

        font-size: 1.55rem;
    }


    /* --------------------------------------------------------------------------
       TOQUE / MOBILE
    -------------------------------------------------------------------------- */

    .btn,
    .menu a,
    .accordion__trigger,
    .social a {
        -webkit-tap-highlight-color: transparent;
    }

}