/* * -------------------------------------------
 * 1. CONFIGURAÇÕES E FONTES
 * -------------------------------------------
 */
@font-face {
  font-family: 'Ralesha';
  src: url('Ralesha.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  
}

:root {
    --verde-1: #7f826e;
    --verde-2: #80a088;
    --cinza-box: #f4f4f4;
    --font-titulo: 'Ralesha', serif;
    --font-copy: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow-x: hidden; background: #fff; }

/* * -------------------------------------------
 * 2. SEÇÃO HERO (DESKTOP)
 * -------------------------------------------
 */
.hero-section {
    width: 100%;
    height: 100vh; 
    display: flex;
    align-items: center; 
    position: relative; 
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 100%; 
    padding: 0 5%;
    position: relative;
    z-index: 20; 
}

.hero-content {
    max-width: 60rem; 
    margin-left: -1rem; 
    margin-right: auto; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

.main-title {
    font-family: var(--font-titulo);
    line-height: 1.0;
    font-weight: 450;
    font-size: clamp(3.5rem, 7vw, 8.2rem); 
    background: linear-gradient(90deg, var(--verde-1) 0%, var(--verde-2) 50%, var(--verde-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    width: 100%;
}

.main-title .prefix {
    display: block;
    font-size: 0.5em;
    margin-bottom: 0.5rem;
}

.copy-box {
    background-color: var(--cinza-box);
    width: 100%;
    max-width: 52rem;
    padding: 2.5rem 3.5rem;
    border-radius: 2px;
}

.copy-box p {
    font-family: var(--font-copy);
    font-size: 1.90rem; 
    color: #333;
    text-align: justify;
    line-height: 1.1;
}

/* AJUSTE: EXTRA IMAGE CONTAINER (TAMANHO RECUPERADO E GAP ZERO) */
.extra-image-container {
    margin-top: 0; 
    display: flex;
    justify-content: center;
    width: 100%;
}

.extra-image-container img {
    width: 300px; /* Tamanho mais visível e elegante */
    height: auto;
}

/* FOTO DESKTOP (ORIGINAL) */
.hero-image-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 105vh; 
    z-index: 10; 
    display: flex;
    align-items: flex-end;
}

.hero-image {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* * -------------------------------------------
 * 3. RESPONSIVIDADE - NOTEBOOK E DESKTOP GRANDE
 * -------------------------------------------
 */
@media (min-width: 64.01em) and (max-width: 96em) {
    .main-title { 
        font-size: 6.8rem; 
        margin-bottom: 1.2rem;
        letter-spacing: -2px; 
    }

    .hero-content { 
        max-width: 48rem; 
    }

    .copy-box { 
        max-width: 44rem; 
        padding: 2rem 2.8rem; 
    }

    .copy-box p {
        font-size: 1.36rem; 
        line-height: 1.1;
    }

    .extra-image-container img {
        width: 250px;
    }
}

/* * -------------------------------------------
 * 4. MOBILE E TABLETS
 * -------------------------------------------
 */
@media (max-width: 64em) {
    .hero-section {
        height: auto;
        min-height: 100vh; 
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
        padding: 3rem 1rem;
        gap: 1.2rem;
        overflow-y: visible;
    }

    .container, .hero-content {
        display: contents;
    }

    .main-title {
        order: 1;
        font-size: clamp(2.8rem, 10vw, 4.2rem); 
        margin: 0;
        text-align: center;
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .hero-image-wrapper {
        position: relative;
        order: 2;
        height: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-image {
        content: url('magalimobile.png');
        width: 100%;
        max-width: 320px; 
        height: auto;
        border-radius: 30px;
        display: block;
    }

    .copy-box {
        order: 3;
        max-width: 100%;
        padding: 1.5rem 1rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .copy-box p {
        font-size: 0.95rem; 
        text-align: justify;
        line-height: 1.1;
        margin: 0;
        max-width: 500px; 
    }

    .extra-image-container {
        order: 4;
        margin-top: 0; 
    }

    .extra-image-container img {
        width: 250px; /* Tamanho proporcional para mobile */
    }
}

/* EFEITOS DE HOVER */
.glass-container {
    transition: transform 0.4s ease;
}

.text-box-gradient {
    transition: all 0.4s ease;
}

.glass-container:hover {
    transform: translateY(-5px);
}

.glass-container:hover .text-box-gradient {
    box-shadow: 25px 25px 50px rgba(0,0,0,0.12);
    filter: brightness(1.1);
}

.essencia-section {
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.essencia-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
    flex: 1;
    display: flex;
    align-items: center;
}

.essencia-content {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

.essencia-title {
    font-family: var(--font-titulo);
    font-size: clamp(3rem, 5vw, 5.8rem);
    background: linear-gradient(90deg, #7f826e 0%, #80a088 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    font-weight: 400;
}

.essencia-title .underline {
    display: inline-block;
    position: relative;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.essencia-title .underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 100%;
    height: 8px;
    background-color: #7f826e;
    -webkit-text-fill-color: initial;
    z-index: -1;
}

.glass-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bg-box-light {
    position: absolute;
    right: -80px;
    width: 75%;
    top: -40px;
    height: calc(100% + 80px);
    background-color: #f8f4f0;
    z-index: 1;
}

.text-box-gradient {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #6e715d 0%, #5e614e 100%);
    padding: 3rem 4rem;
    color: #fff;
    width: 95%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.06);
    text-align: justify; /* Ajuste solicitado: texto justificado */
}

.text-box-gradient p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.45rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

/* --- BARRA DE SERVIÇOS AJUSTADA PARA IMAGEM --- */
.services-bar {
    width: 100%;
    background: #6e715d;
    padding: 0; 
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    height: 80px; 
}

.services-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

.brand-logo {
    height: 100%; 
    width: auto;
    display: block;
    object-fit: contain; 
}

.service-item {
    font-family: var(--font-copy);
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* * -------------------------------------------
 * AJUSTES NOTEBOOK (64em a 96em)
 * -------------------------------------------
 */
@media (min-width: 64.01em) and (max-width: 96em) {
    .essencia-content {
        gap: 2.5rem; 
        max-width: 1250px;
        margin: 0 auto;
    }

    .essencia-title {
        font-size: 4.9rem; 
        text-align: left;
    }

    .glass-container {
        height: 250px; 
        transform: translateX(-60px); 
    }

    .bg-box-light {
        right: -40px; 
        width: 65%;   
        top: -20px;   
        height: calc(100% + 40px); 
    }

    .text-box-gradient {
        width: 85%; 
        padding: 2.2rem 3rem;
        min-height: 200px; 
    }

    .text-box-gradient p {
        font-size: 1.00rem; 
    }
    
    .services-bar {
        height: 60px; 
    }
}

/* * -------------------------------------------
 * AJUSTES MOBILE & TABLET (ATÉ 64em)
 * -------------------------------------------
 */
@media (max-width: 64em) {
    .essencia-section {
        height: auto; 
        min-height: auto;
    }

    .essencia-container {
        padding: 4rem 5%;
        display: block;
    }

    .essencia-content {
        grid-template-columns: 1fr;
        padding-bottom: 4rem;
        gap: 2rem;
    }

    .essencia-title {
        text-align: center;
        font-size: clamp(2.5rem, 8vw, 3.5rem); 
        margin-bottom: 1rem;
    }

    .essencia-title .underline::after {
        height: 4px;
        bottom: 4px;
    }

    .bg-box-light { display: none !important; }

    .glass-container { height: auto; justify-content: center; }

    .text-box-gradient {
        width: 100%;
        padding: 2rem 1.5rem;
        min-height: auto;
    }
    
    .text-box-gradient p {
        font-size: 1.2rem; 
    }

    .services-bar {
        padding: 0.8rem 0; 
        overflow: hidden;
    }

    .services-wrapper {
        width: max-content;
        display: flex;
        align-items: center; 
        gap: 3.5rem;
        padding-left: 2rem;
        animation: marqueeMobile 25s linear infinite;
    }

    .brand-logo {
        height: 1.8rem; 
        width: auto;
        display: block;
    }

    .service-item { 
        white-space: nowrap; 
        font-size: 0.85rem;
    }

    @keyframes marqueeMobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } 
    }
}

/* ==========================================================================
   SEÇÃO 3 - PROPORCIONAR 
   ========================================================================== */

.proporcionar-section {
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: #6e715d;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.proporcionar-container {
    width: 100%;
    max-width: 1600px;
    padding: 0 5%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.proporcionar-main-title {
    font-family: var(--font-titulo);
    background: linear-gradient(90deg, #ebe7da 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.2rem, 3.5vw, 3.5rem);
    text-align: center;
    margin-bottom: 2rem;
}

.proporcionar-content-box {
    border: 1px solid #ebe7da; 
    position: relative; 
    height: 600px; 
    margin-top: 2rem;
    overflow: visible;
}

.proporcionar-grid {
    display: grid;
    grid-template-columns: 28% 72%; 
    height: 100%;
}

.img-facial-overlap {
    position: absolute;
    z-index: 10;
    height: 105%; 
    width: auto;
    left: -110px; 
    bottom: 30px; 
}

.proporcionar-list {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    height: 100%;
    padding: 2rem 0 2rem 2rem; 
    position: relative;
    z-index: 20;
}

.benefit-item {
    display: flex;
    gap: 1.5rem;
    align-items: stretch; 
    padding-bottom: 2.2rem; 
    width: 100%; 
}

.benefit-item:last-child {
    padding-bottom: 0;
}

.icon-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px; 
    flex-shrink: 0;
}

.benefit-star {
    font-size: 2rem; 
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
}

.line-down {
    width: 1px;
    background: rgba(255,255,255,0.4);
    flex-grow: 1; 
}

.benefit-text {
    flex-grow: 1; 
}

.benefit-text h3 {
    font-family: 'Gotham', sans-serif; 
    font-weight: 700;
    background: linear-gradient(90deg, #e9dccd 0%, #dcdcdc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.7rem; 
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.benefit-text p {
    font-family: 'Inter', sans-serif; 
    color: #ffffff; 
    font-size: 1.15rem; 
    line-height: 1.4;
    opacity: 0.95;
    width: 95%; 
}

/* DESKTOP NOTEBOOK */
@media (min-width: 64.01em) and (max-width: 96em) {
    .proporcionar-section {
        height: auto !important;
        min-height: 100vh;
        padding: 4rem 0;
        display: flex;
        align-items: center;
    }

    .proporcionar-content-box {
        height: 32rem !important; 
        background: transparent !important; 
        border-left: 2px solid var(--verde-1); 
        position: relative;
        display: block !important;
    }

    .proporcionar-grid {
        display: grid;
        grid-template-columns: 30% 70%;
        height: 100%;
    }

    .img-facial-overlap {
        position: absolute !important;
        height: 110% !important; 
        width: auto !important;
        bottom: 1 !important; 
        left: -3.5rem !important; 
        object-fit: contain;
        z-index: 10;
    }

    .proporcionar-list {
        padding: 2.5rem 2rem 1rem 5.5rem !important;
        gap: 0.5rem !important;
    }

    .benefit-item { padding-bottom: 0.8rem !important; }
    .benefit-text h3 { font-size: 1.4rem !important; }
    .benefit-text p { font-size: 1.1rem !important; }
}

/* ==========================================================================
   SEÇÃO 3 - MOBILE & TABLET (ATÉ 64em)
   ========================================================================== */
@media (max-width: 64em) {
    .proporcionar-section {
        height: auto; /* Remove altura fixa */
        min-height: auto; /* Evita forçar tela gigante em SE */
        padding: 4rem 0;
        display: block;
        overflow: visible;
    }

    .proporcionar-container {
        padding: 0 1.2rem;
    }

    .proporcionar-main-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem); /* Reduzido levemente para telas estreitas */
        margin-bottom: 2rem;
        display: block;
    }

    .proporcionar-content-box {
        height: auto;
        border: 1px solid #ebe7da; 
        margin-top: 3rem; 
        padding: 0;
        overflow: visible;
        display: block;
        position: relative;
    }

    .proporcionar-grid {
        display: block; 
        width: 100%;
    }

    /* FOTO */
    .img-facial-overlap {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -15%); 
        width: 90%;
        /* GARANTE QUE CAIBA EM IPHONE SE */
        max-width: 260px; 
        height: auto;
        z-index: 10;
        display: block;
    }

    /* LISTA */
    .proporcionar-list {
        display: block;
        /* Padding calculado para empurrar texto abaixo da foto, mas sem exageros */
        padding: 240px 1.5rem 3rem 1.5rem; 
    }

    .benefit-item {
        display: flex;
        gap: 1rem;
        padding-bottom: 2.5rem;
        position: relative;
    }

    .benefit-item:last-child {
        padding-bottom: 0;
    }

    .icon-connector {
        width: 30px;
        position: relative;
    }

    .benefit-star {
        font-size: 1.6rem;
        background: #6e715d;
        z-index: 2;
    }

    .benefit-item:not(:last-child) .icon-connector::after {
        content: "";
        position: absolute;
        top: 1.6rem; 
        bottom: -1.5rem; 
        width: 1px;
        background: rgba(255, 255, 255, 0.3);
        z-index: 1;
    }

    .benefit-text h3 {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }

    .benefit-text p {
        font-size: 1rem;
        opacity: 0.9;
        margin: 0;
    }
}
/* ==========================================================================
   SEÇÃO 4 - DRA. MAGALI (CORRIGIDA)
   ========================================================================== */

/* DESKTOP PADRÃO - MANTIDO */
@media (min-width: 64.01em) {
    .sobre-section {
        height: auto !important; 
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem 5% !important; 
        background-color: #ffffff;
        overflow: hidden; 
    }

    .sobre-container {
        display: flex !important;
        align-items: center; 
        justify-content: center;
        width: 100%;
        max-width: 1500px; 
        margin: 0 auto;
        gap: 0 !important;
        position: relative;
    }

    .sobre-content {
        flex: 1.3; 
        display: flex;
        flex-direction: column;
        z-index: 10;
        margin-right: -12rem; 
        text-align: left;
    }

    .sobre-title {
        font-family: var(--font-titulo);
        color: var(--verde-1);
        font-size: 6.2rem !important; 
        line-height: 0.95;
        margin-bottom: 2.5rem;
        width: 150%; 
        letter-spacing: 0px !important;
        white-space: nowrap; 
    }

    .sobre-text-box {
        border-left: 3px solid var(--verde-1);
        padding: 1rem 0 1rem 3.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: 600px;
    }

    .text-foto {
        font-family: 'Montserrat', sans-serif !important;
        color: #b7ada1 !important;
        font-size: 1.6rem !important;
        line-height: 0.97 !important;
        font-weight: 400;
        text-align: justify;
    }

    .text-preto {
        font-family: 'Montserrat', sans-serif !important;
        color: #444444 !important;
        font-size: 1.6rem !important;
        line-height: 0.97 !important;
        font-weight: 400 !important;
        text-align: justify;
    }

    .sobre-logo {
        width: 160px !important;
        margin-top: 4rem;
    }

    .sobre-image-wrapper {
        flex: 1;
        min-height: 850px; 
        max-height: 95vh;
        border-radius: 30px;
        overflow: hidden;
        z-index: 1;
        margin-left: -5rem; 
    }

    .sobre-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* NOTEBOOKS - MANTIDO */
@media (min-width: 64.01em) and (max-width: 90em) {
    .sobre-section {
        padding: 4rem 5% !important; 
        min-height: auto !important;
    }
    
    .sobre-container {
        max-width: 1200px; 
    }

    .sobre-title { 
        font-size: 4rem !important; 
        margin-bottom: 1.5rem;
        width: 130%; 
    }

    .text-foto, .text-preto { 
        font-size: 1.25rem !important; 
        line-height: 0.97 !important;
    }

    .sobre-text-box {
        gap: 1.2rem;
        padding-left: 2rem;
        max-width: 450px;
    }

    .sobre-content { margin-right: -8rem; }
    .sobre-image-wrapper { min-height: 550px; margin-left: -3rem; }
    .sobre-logo { width: 110px !important; margin-top: 2rem; }
}

/* MOBILE & TABLET (AJUSTADO PARA A IMAGEM NÃO VAZAR) */
@media (max-width: 64em) {
    .sobre-section {
        padding: 3rem 5% !important; 
        height: auto !important; 
        min-height: auto !important;
        display: block; 
        background-color: #ffffff;
        overflow: hidden; /* Corta qualquer coisa que tente vazar lateralmente */
    }

    .sobre-container {
        display: flex !important;
        flex-direction: column;
        align-items: center; /* Garante que tudo fique no centro */
        gap: 2rem; 
        width: 100%;
        margin: 0 auto;
    }

    .sobre-title {
        order: 1;
        font-family: var(--font-titulo);
        color: var(--verde-1);
        font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
        line-height: 1.1;
        width: 100%;
        text-align: center; 
        margin-bottom: 0.5rem;
        white-space: normal; /* Permite quebra de linha no mobile */
    }

    /* FIX DA IMAGEM GIGANTE */
    .sobre-image-wrapper {
        order: 2;
        width: 100%;
        max-width: 400px; /* Limita a largura para não ficar gigante */
        height: auto !important; /* Reseta altura fixa */
        min-height: auto !important; /* Reseta min-height do desktop */
        aspect-ratio: 1 / 1.2; /* Define uma proporção bonita para a foto */
        margin: 0 auto !important; 
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        left: 0 !important; /* Reseta deslocamentos do desktop */
    }

    .sobre-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    .sobre-text-box {
        order: 3;
        border: none !important; 
        padding: 0 !important; 
        gap: 1.5rem;
        display: flex;       
        flex-direction: column;
        width: 100%;
        text-align: justify;
    }

    .text-foto {
        font-family: 'Montserrat', sans-serif !important;
        color: #b7ada1 !important; 
        font-size: 1.15rem !important; 
        line-height: 0.97 !important;
        text-align: justify;
    }

    .text-preto {
        font-family: 'Montserrat', sans-serif !important;
        color: #444444 !important;
        font-size: 1.15rem !important;
        line-height: 0.97 !important;
        text-align: justify;
    }

    .sobre-logo {
        order: 4;
        width: 110px !important;
        margin: 2rem auto 0 auto; 
        display: block;
    }
}

/* ==========================================================================
   SEÇÃO 5 - CURRÍCULO (Verde Arredondado Topo, Reto Baixo)
   ========================================================================== */

/* 1. GERAL / DESKTOP (> 96em) */
.curriculo-section {
    width: 100%;
    background-color: #5d604e; /* Verde Escuro */
    
    /* Cor do texto geral (caso vaze algo) */
    color: #ebe7da; 
    
    /* ARREDONDADO APENAS EM CIMA */
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    /* MARGEM NEGATIVA: Faz o verde "subir" na seção branca anterior */
    margin-top: -60px; 
    
    position: relative;
    z-index: 20; 
    
    /* Padding para o texto não bater na borda redonda */
    padding-top: 7rem; 
    padding-bottom: 0;
    overflow: hidden;
}

.curriculo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5% 4rem 5%;
}

.curriculo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.curriculo-col {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.curriculo-item {
    /* Linha vertical ao lado do texto (mais sutil agora com a cor bege) */
    border-left: 1px solid rgba(235, 231, 218, 0.4); 
    padding-left: 1.8rem;
}

/* --- ESTILO DO TEXTO ALTERADO --- */
.curriculo-item p {
    /* Se você tiver o arquivo Argument Sans, mude 'Montserrat' para 'Argument Sans' */
    font-family: 'Montserrat', sans-serif; 
    
    /* A COR QUE VOCÊ PEDIU */
    color: #ebe7da; 
    
    font-size: 1.13rem;
    line-height: 1.6;
    font-weight: 400;
}

/* RODAPÉ RETO */
.curriculo-footer {
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}

.img-bandeiras {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* 2. NOTEBOOKS (64em até 96em) */
@media (min-width: 64em) and (max-width: 96em) {
    .curriculo-section {
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        margin-top: -50px;
        padding-top: 6rem;
    }
    
    .curriculo-container {
        padding-bottom: 3rem;
    }

    .curriculo-grid {
        gap: 3rem;
    }

    .curriculo-item p {
        font-size: 1.1rem;
    }
}


/* 3. MOBILE & TABLETS (Até 64em) - iPhone SE Blindado */
@media (max-width: 64em) {
    .curriculo-section {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        margin-top: -40px;
        padding-top: 4.5rem; 
    }

    .curriculo-container {
        padding: 0 1.5rem 3rem 1.5rem;
    }

    .curriculo-grid {
        grid-template-columns: 1fr; 
        gap: 2rem;
    }

    .curriculo-col {
        gap: 2rem;
    }

    .curriculo-item {
        padding-left: 1.2rem;
    }

    .curriculo-item p {
        font-size: 1.05rem; 
        line-height: 1.5;
    }

    .img-bandeiras {
        height: 130px; 
        object-fit: cover;
    }
}

/* ==========================================================================
   SEÇÃO 6 - HÍBRIDA (IMAGEM NO DESKTOP / LAYOUT NO MOBILE)
   ========================================================================== */

/* Configuração geral da seção */
.section-principios-clean {
    width: 100%;
    background-color: #fff;
    /* No desktop, removemos padding e altura mínima para a imagem ditar o tamanho */
    padding: 0;
    min-height: auto;
    overflow-x: hidden;
}


/* ----------------------------------------------------------
   ESTILOS DA VERSÃO DESKTOP (A Imagem Única)
---------------------------------------------------------- */
.versao-desktop-img {
    display: block;
    width: 100%;
    
    /* ADICIONE ESSAS DUAS LINHAS: */
    max-width: 1400px;  /* <--- Aqui você define o tamanho máximo (pode ser 1200px, 1600px...) */
    margin: 0 auto;     /* <--- Isso centraliza a imagem na tela */
}

.img-full-desk {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Garante que a imagem apareça inteira */
}

/* ----------------------------------------------------------
   ESTILOS DA VERSÃO MOBILE (Escondida por padrão)
---------------------------------------------------------- */
.versao-mobile-layout {
    display: none; /* ESCONDE por padrão em telas grandes */
}


/* ==========================================================================
   MEDIA QUERY - MOBILE (DO JEITO QUE TAVA + CORREÇÃO DO TÍTULO)
   ========================================================================== */
@media (max-width: 1200px) {

    /* 1. ALTERNÂNCIA DE VERSÕES (Desktop x Mobile) */
    .versao-desktop-img { display: none; }
    .versao-mobile-layout { display: block; }

    /* 2. ESPAÇAMENTO GERAL */
    .section-principios-clean {
        padding: 4rem 0;
        height: auto;
        min-height: auto;
    }

    .container-clean {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza horizontalmente */
        gap: 3rem;
        padding: 0 5%;
    }

    /* --- 3. CORREÇÃO DO TÍTULO (O QUE VOCÊ PEDIU) --- */
    .clean-col-esq {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza o bloco todo */
        margin: 0;
    }

   .titulo-clean {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;

  font-family: 'Playfair Display', serif;
}

.box-clean {
  display: inline-block;
  width: auto;
  white-space: nowrap;

  font-size: 2.2rem;
  line-height: 1.15;
  font-weight: 500;

  background: linear-gradient(90deg, #834121 0%, #d78056 100%);
  color: #f4f4f4;

  padding: 0.55rem 1.25rem;
  border-radius: 4px;
}


    .intro-clean {
        border-left: 3px solid #d78056; /* Mantém o risco lateral que você tinha */
        /* Mas centralizamos o bloco visualmente */
        margin-top: 2rem;
        padding-left: 1rem;
        max-width: 100%;
        text-align: left; /* Mantém a leitura do texto alinhada à esquerda para ficar bonito com o risco */
        
        /* Se preferir centralizado sem risco, apague as linhas acima e use: text-align: center; */
    }
    
    .intro-clean p {
        font-size: 1.15rem;
        color: #834121;
        font-weight: 500;
    }

    /* --- 4. FOTO (COMO TAVA ANTES) --- */
    .clean-col-meio {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
    }
    
    .img-clean {
        width: 100%;
        max-width: 350px; /* Tamanho controlado */
        height: auto;
    }

    /* --- 5. LISTA (CENTRALIZADA) --- */
    .clean-col-dir {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Itens no centro */
        gap: 2rem;
        padding: 0;
        margin: 0;
    }

    .item-clean {
        display: flex;
        flex-direction: column;
        align-items: center; /* Título e texto alinhados ao centro */
        text-align: center;
        gap: 0.5rem;
    }

    .item-clean h3 {
        font-family: var(--font-titulo);
        color: #834121;
        font-size: 1.8rem;
        margin: 0;
    }
    
    .item-clean p {
        font-size: 1.05rem;
        max-width: 90%;
    }
}

/* ==========================================================================
   SEÇÃO 7 - A BELEZA ATRAVÉS DO TEMPO (Ajuste Fino)
   ========================================================================== */

.beleza-tempo-section {
    width: 100%;
    background-color: #fff;
    padding: 6rem 0;
    overflow: hidden; 
}

.beleza-container {
    width: 100%;
    max-width: 1600px; 
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- CABEÇALHO --- */
.beleza-header {
    text-align: center;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.beleza-logo {
    width: 60px;
    margin-bottom: 1.5rem;
    display: block;
}

.beleza-title {
    font-family: var(--font-titulo);
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.1;
    background: linear-gradient(90deg, #6e715d 0%, #5e614e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    text-align: center;
}

.beleza-separator {
    width: 100%;
    max-width: 600px; 
    height: 1px;
    background-color: #6e715d;
    opacity: 0.5;
}

/* --- CARROSSEL --- */
.carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-viewport {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    
    /* AQUI ESTÁ O AJUSTE DA MARGEM PEQUENA */
    gap: 4px; 
    
    cursor: grab;
}

.carousel-track:active {
    cursor: grabbing;
}

/* Slides Desktop */
.carousel-slide {
    min-width: 42%; /* Desktop: Aparece 2 e um pedaço */
    height: 550px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

/* Botões */
.carousel-btn {
    background: #fff;
    border: 1px solid #6e715d;
    color: #6e715d;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
.carousel-btn:hover { background: #6e715d; color: #fff; }
.btn-prev { left: -25px; }
.btn-next { right: -25px; }


/* --- 2. NOTEBOOKS (64em até 96em) --- */
@media (min-width: 64em) and (max-width: 96em) {
    
    /* 1. Reduz o espaçamento geral da seção para caber na tela */
    .beleza-tempo-section {
        padding: 2rem 0; 
    }

    /* 2. Reduz um pouco o título para proporcionalidade */
    .beleza-title {
        font-size: 3.5rem;
    }
    
    /* 3. O AJUSTE DAS FOTOS: */
    .carousel-slide {
        /* 42% garante que caibam 2 fotos inteiras e sobre um pedaço da 3ª */
        min-width: 42%; 
        
        /* Reduzi a altura (era 450px) para 350px ou 380px para caber na tela do note */
        height: 380px;
    }
}

/* --- 3. MOBILE & TABLETS (Até 64em) --- */
@media (max-width: 64em) {
    .beleza-tempo-section {
        padding: 3rem 0;
    }

    .beleza-header {
        margin-bottom: 2rem;
    }

    .beleza-title {
        font-size: clamp(2rem, 8vw, 3rem);
        padding: 0 1rem;
    }

    /* AJUSTE DO CONTAINER NO MOBILE */
    .carousel-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* Margem de segurança lateral */
        box-sizing: border-box;
        position: relative;
    }

    .carousel-viewport {
        border-radius: 15px;
        overflow: hidden; /* Esconde as imagens que estão fora da tela */
        width: 100%;
    }

    .carousel-track {
        display: flex;
        /* IMPORTANTE: gap 0 para o cálculo de 100% do JS ser exato */
        gap: 0px !important; 
        width: 100%;
    }

    /* CARD DA IMAGEM NO MOBILE */
    .carousel-slide {
        /* Ocupa exatamente a largura do viewport */
        min-width: 100% !important; 
        width: 100% !important;
        height: 400px; /* Podes ajustar a altura conforme as tuas fotos */
        flex-shrink: 0;
        margin: 0;
    }

    .carousel-slide img {
        width: 100%;
        height: 100%;
        /* 'cover' para preencher o espaço sem deixar bordas brancas */
        object-fit: cover; 
        object-position: center;
    }

    /* BOTÕES NO MOBILE (Ajustados para não sobrepor o centro da foto) */
    .carousel-btn {
        display: flex !important;
        width: 40px;
        height: 40px;
        font-size: 1rem;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        z-index: 100;
        border: none;
    }

    .btn-prev { left: 5px; }
    .btn-next { right: 5px; }
}

/* ==========================================================================
   SEÇÃO PROTOCOLOS - AJUSTE DE COLUNAS
   ========================================================================== */

/* --- EFEITO REFINADO NO BOTÃO --- */
.protocolos-btn {
    display: inline-block;
    background-color: #7f826f; /* Cor original mantida */
    color: #fff;
    text-decoration: none;
    padding: 1.6rem 6rem; 
    border-radius: 60px;
    font-family: var(--font-copy);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    
    /* Preparação para o efeito */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(127, 130, 111, 0.2);
}

.protocolos-btn:hover {
    background-color: #6a6d5c; /* Escurece levemente o verde */
    transform: translateY(-3px); /* Flutua suavemente */
    box-shadow: 0 8px 25px rgba(127, 130, 111, 0.4);
    letter-spacing: 3px; /* Expande sutilmente o texto */
}

/* Efeito de brilho (shimmer) que passa pelo botão */
.protocolos-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
    z-index: -1;
}

.protocolos-btn:hover::after {
    left: 100%;
}

.protocolos-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(127, 130, 111, 0.3);
}

.protocolos-section {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.protocolos-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.protocolos-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4%;
    text-align: center;
}

.protocolos-horizontal-aligner {
    width: 100%;
    max-width: 1100px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.protocolos-title {
    font-family: var(--font-titulo);
    font-size: clamp(3.5rem, 6vw, 5.8rem); 
    line-height: 1.05;
    margin-bottom: 3.5rem;
    color: #4a4d3f;
    font-weight: 400;
}

/* --- AJUSTE NAS COLUNAS E CENTRALIZAÇÃO --- */
.protocolos-list-wrapper {
    border: 1px solid #d1d1d1;
    padding: 3.5rem 2rem; /* Reduzi o padding lateral do box */
    margin-bottom: 3.5rem;
    width: 100%;
    max-width: 850px; /* Reduzido para centralizar e compactar as colunas */
    display: flex;
    justify-content: center; /* Centraliza a lista dentro do box */
}

.protocolos-list {
    display: grid;
    grid-template-columns: auto auto; /* Ajusta ao tamanho do texto */
    gap: 2rem 4rem; /* Reduzido de 5rem para 4rem para aproximar as colunas */
    list-style: none;
    text-align: left;
}

.protocolos-list li {
    font-family: var(--font-copy);
    color: #333;
    font-size: 1.45rem; 
    font-weight: 500;
    position: relative;
    padding-left: 2.2rem;
    white-space: nowrap; /* Evita que o texto quebre linha e afaste as colunas */
}

.protocolos-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #7f826e;
    font-size: 1.8rem;
    top: -4px;
}

.protocolos-btn {
    display: inline-block;
    background-color: #7f826f;
    color: #fff;
    text-decoration: none;
    padding: 1.6rem 6rem; 
    border-radius: 60px;
    font-family: var(--font-copy);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    transition: all 0.3s ease;
}

/* --- IMAGEM PC (SEM ALTERAÇÃO) --- */
.protocolos-image-side {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4vh 4vh 4vh 0; 
}

.protocolos-image-side .img-fluid {
    height: 92vh; 
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   NOTEBOOK
   ========================================================================== */
@media (min-width: 64.01em) and (max-width: 96em) {
    .protocolos-title { font-size: 3.8rem; }
    .protocolos-list li { font-size: 1.15rem; }
    .protocolos-list-wrapper { 
        padding: 2.5rem 2rem; 
        max-width: 700px; /* Mais compacto em notebooks */
    }
    .protocolos-image-side .img-fluid { height: 88vh; }
}

/* ==========================================================================
   MOBILE & TABLET (SEM ALTERAÇÃO NA ESTRUTURA)
   ========================================================================== */
@media (max-width: 64em) {
    .protocolos-section { 
        height: auto; 
        min-height: 100vh;
        padding: 3rem 1.5rem; 
        display: block;
    }

    .protocolos-container { 
        display: flex;
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .protocolos-content, 
    .protocolos-horizontal-aligner { 
        display: contents; 
    }

    .protocolos-title { 
        order: 1;
        font-size: 2.2rem; 
        margin-bottom: 2rem;
        width: 100%;
        line-height: 1.2;
    }

    .protocolos-image-side { 
        order: 2; 
        width: 100%;
        padding: 0 0 2rem 0;
        display: flex;
        justify-content: center;
    }

    .protocolos-image-side .img-fluid { 
        width: 100%; 
        max-width: 220px; 
        height: auto;
    }

    .protocolos-list-wrapper { 
        order: 3;
        padding: 1.8rem 1rem; 
        margin-bottom: 2rem;
        width: 100%;
        max-width: 450px;
        border: 1px solid #d1d1d1;
        justify-content: flex-start; /* Alinha à esquerda no mobile */
    }

    .protocolos-list { 
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .protocolos-list li {
        font-size: 1.1rem;
        padding-left: 1.5rem;
        white-space: normal; /* Permite quebra no mobile */
    }

    .protocolos-btn-row {
        order: 4;
        width: 100%;
        max-width: 450px;
    }

    .protocolos-btn { 
        display: block;
        width: 100%; 
        padding: 1.4rem 1rem;
        font-size: 1rem;
        border-radius: 50px;
    }
}

/* ==========================================================================
   SEÇÃO WELLNESS - COMPLETA
   ========================================================================== */

.wellness-section {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    overflow: hidden;
}

.wellness-container {
    width: 100%;
    max-width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.wellness-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Mantém o bloco de texto encostado na foto */
    padding-left: 5%;
    padding-right: 4%;
}

.wellness-text-wrapper {
    max-width: 950px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTRALIZA O TÍTULO EM RELAÇÃO AO TEXTO */
    text-align: left; /* Mantém o alinhamento das frases à esquerda */
}

.wellness-img-title {
    width: 100%;
    max-width: 480px; 
    height: auto;
    margin-bottom: 0.1rem;
    display: block;
}

.wellness-copy p {
    font-family: var(--font-copy);
    font-size: 1.6rem; 
    line-height: 1.4;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.wellness-image-side {
    flex: 0 0 45%; 
    min-width: 600px;
    height: 100%;
}

.wellness-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}

/* =============================================================
   RESPONSIVIDADE WELLNESS - NOTEBOOK (PADRÃO 64.01em a 96em)
   ============================================================= */

@media (min-width: 64.01em) and (max-width: 96em) {
    
    .wellness-text-wrapper {
        max-width: 800px;
        align-items: center; /* Garante centralização do título no note */
    }

    .wellness-img-title {
        max-width: 380px;
        margin-bottom: 0.1rem !important;
    }

    .wellness-copy p {
        /* 👇 AQUI AJUSTAS O TAMANHO DA FONTE NO NOTEBOOK */
        font-size: 1.32rem !important; 
        /* ---------------------------------------------- */
        line-height: 1.45;
    }

    .wellness-image-side {
        flex: 0 0 45%;
        min-width: 550px;
    }
}

/* AJUSTE PARA DESKTOP NÃO DUPLICAR O TÍTULO */
.wellness-header-mobile { display: none; }

@media (max-width: 64em) {
    .wellness-section {
        height: auto !important;
        padding: 40px 0 !important;
        display: block !important;
    }

    .wellness-container {
        display: flex !important;
        flex-direction: column !important; /* Empilha tudo */
        align-items: center !important;
    }

    /* 1. ORDEM: TÍTULO NO TOPO */
    .wellness-header-mobile {
        display: block !important;
        width: 100% !important;
        order: 1 !important; /* FORÇA SER O PRIMEIRO */
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    .wellness-header-mobile .wellness-img-title {
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    /* 2. ORDEM: FOTO NO MEIO (CENTRALIZADA E MENOR) */
    .wellness-image-side {
        display: block !important;
        order: 2 !important; /* FORÇA SER O SEGUNDO */
        width: 75% !important; /* Margens laterais para não ocupar tudo */
        max-width: 350px !important; /* Impede de ficar gigante */
        margin: 0 auto 30px auto !important; /* Centraliza e dá espaço pro texto */
        flex: none !important;
        min-width: unset !important; /* Remove a trava do desktop */
        height: auto !important;
    }
    
    .wellness-main-img.mobile-only {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* 3. ORDEM: TEXTO POR ÚLTIMO */
    .wellness-content {
        order: 3 !important; /* FORÇA SER O TERCEIRO */
        width: 100% !important;
        padding: 0 25px !important;
        text-align: center !important;
        flex: none !important;
    }

    .wellness-text-wrapper {
        align-items: center !important;
        text-align: center !important;
    }

    .wellness-copy p {
        font-size: 1.1rem !important;
        text-align: center !important;
        line-height: 1.6 !important;
    }

    /* ESCONDE O QUE NÃO DEVE APARECER */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}

.reviews-section {
    background-color: var(--verde-1);
    padding: 100px 0;
    overflow: hidden;
}

.reviews-header {
    text-align: center;
    margin-bottom: 60px;
}

.reviews-title {
    font-family: var(--font-titulo);
    color: #ebe7da;
    font-size: 4rem;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}

.reviews-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ebe7da;
}

/* Centralizador com espaço para setas laterais */
.reviews-outer-wrapper {
    position: relative;
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 60px; /* Calha para as setas não baterem no card */
}

.reviews-slider-container {
    width: 100%;
    overflow: hidden;
}

.reviews-track {
    display: flex;
    gap: 30px; /* Gap fixo */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* CÁLCULO PARA 3 CARDS NO DESKTOP */
.review-card {
    background: #fff;
    /* (100% da largura - 2 espaços de 30px) / 3 cards */
    flex: 0 0 calc((100% - 60px) / 3); 
    min-height: 380px;
    padding: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05);
}

/* ESTILO DO AVATAR REFINADO */
.review-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: #f9f8f4;
    border: 1px solid #ebe7da;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--verde-1);
}

/* SETAS NAS CALHAS */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid #ebe7da;
    color: #ebe7da;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.nav-btn.prev { left: 0; }
.nav-btn.next { right: 0; }

/* MOBILE: 1 CARD POR VEZ */
@media (max-width: 64em) {
    .reviews-title { font-size: 2.3rem; }
    .reviews-outer-wrapper { padding: 0 50px; }
    
    .review-card {
        flex: 0 0 100%; /* Ocupa a tela toda */
        min-height: 420px;
    }
}

/* Efeito de flutuação e borda sutil ao passar o mouse */
.review-card:hover {
    transform: translateY(-10px);
    background-color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #ebe7da;
}

/* Efeito no Avatar quando o Card recebe hover */
.review-card:hover .user-avatar {
    background: var(--verde-1);
    color: #fff;
    transform: rotate(10deg) scale(1.1);
    border-color: var(--verde-1);
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: #f9f8f4;
    border: 1px solid #ebe7da;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--verde-1);
    /* Transição para o efeito do hover */
    transition: all 0.4s ease;
}

/* Efeito nas Setas (Nav-Btns) */
.nav-btn {
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #ebe7da;
    color: var(--verde-1);
    transform: translateY(-50%) scale(1.1);
}

/* Estilo para as aspas (detalhe extra de design) */
.review-card::before {
    content: "“";
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 5rem;
    color: #f1f1f1;
    font-family: serif;
    line-height: 1;
    transition: color 0.4s ease;
}

.review-card:hover::before {
    color: #ebe7da; /* As aspas ganham cor no hover */
}

/* ==========================================================================
   SEÇÃO CRONOCLINIC - AJUSTE FINAL E DEFINITIVO DE LARGURA
   ========================================================================== */

.cronoclinic-section {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    overflow: hidden;
}

.cronoclinic-container {
    width: 100%;
    max-width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 !important;
}

/* IMAGEM PRESERVADA NA ESQUERDA */
.cronoclinic-image-side {
    flex: 0 0 45%; 
    min-width: 600px;
    height: 100%;
}

.cronoclinic-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.cronoclinic-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; 
    padding-left: 6%;
    padding-right: 4%;
}

/* O WRAPPER AGORA É O DONO DA LARGURA */
.cronoclinic-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content; /* O container terá o tamanho exato do título */
    max-width: 100%; 
}

/* TÍTULO - A RÉGUA QUE DITA O TAMANHO */
.cronoclinic-title {
    font-family: var(--font-titulo);
    font-size: 9rem; 
    color: var(--verde-1);
    line-height: 0.85;
    margin-bottom: 1.5rem;
    
    white-space: nowrap; /* Proíbe o título de quebrar, forçando a largura */
}

/* TAGLINE - FUNDO SÓ NO TEXTO E ALINHADO */
.cronoclinic-tagline {
    font-family: var(--font-copy);
    font-size: 1.8rem; 
    background-color: #7f826f; 
    color: #e2dcd5; 
    display: inline-block;
    padding: 10px 25px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 500;
    margin-bottom: 3rem;
}

/* O TRUQUE PARA O COPY NUNCA PASSAR DO TÍTULO */
.cronoclinic-copy {
    display: block;
    width: 0; /* Começa com zero */
    min-width: 100%; /* Mas é forçado a ocupar 100% do PAI (que é o tamanho do título) */
}

.cronoclinic-copy p {
    font-family: var(--font-copy);
    font-size: 1.6rem; 
    line-height: 1.5;
    color: #333;
    margin-bottom: 0.8rem;
    font-weight: 400;
    text-align: left;
    white-space: normal; /* Permite a quebra de linha normal */
}

/* =============================================================
   RESPONSIVIDADE CRONOCLINIC - NOTEBOOK (64.01em a 96em)
   ============================================================= */

@media (min-width: 64.01em) and (max-width: 96em) {
    .cronoclinic-title {
        font-size: 6.5rem !important;
    }
    .cronoclinic-tagline {
        font-size: 1.4rem !important;
    }
    .cronoclinic-copy p {
        font-size: 1.35rem !important;
    }
}

/* =============================================================
   REFAZENDO O MOBILE DO ZERO - CRONOCLINIC
   ============================================================= */

@media (max-width: 64em) {
    /* 1. RESET DA SEÇÃO */
    .cronoclinic-section {
        height: auto !important;
        padding: 50px 0 !important;
        display: block !important;
        overflow-x: hidden !important; /* Mata qualquer vazamento lateral */
    }

    .cronoclinic-container {
        display: flex !important;
        flex-direction: column !important; /* Empilha tudo */
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Permite reordenar os elementos ignorando as divs pai */
    .cronoclinic-content, 
    .cronoclinic-text-wrapper {
        display: contents !important; 
    }

    /* --- ORDEM 1: TÍTULO --- */
    .cronoclinic-title {
        order: 1 !important;
        width: 100% !important;
        max-width: 90% !important; /* Respiro nas laterais */
        font-size: 3rem !important;
        text-align: center !important;
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
        white-space: normal !important; /* Permite que o <br> funcione */
        padding: 0 !important;
    }

    /* --- ORDEM 2: TAGLINE --- */
    .cronoclinic-tagline {
        order: 2 !important;
        background-color: #7f826f !important;
        color: #e2dcd5 !important;
        font-size: 1.1rem !important;
        padding: 8px 25px !important;
        margin-bottom: 30px !important;
        display: inline-block !important; /* Fundo só no texto */
        text-align: center !important;
        letter-spacing: 2px !important;
        width: auto !important; /* Não deixa ocupar a tela toda */
    }

    /* --- ORDEM 3: IMAGEM (CENTRALIZADA E SEM VAZAR) --- */
    .cronoclinic-image-side {
        order: 3 !important;
        display: block !important;
        width: 85% !important; /* Largura da foto (margens laterais) */
        max-width: 400px !important; /* Limite para não ficar gigante */
        
        /* RESET TOTAL DO DESKTOP: */
        min-width: 0 !important; 
        flex: none !important;
        height: auto !important;
        
        margin: 0 auto 30px auto !important; /* CENTRALIZA TOTAL */
        padding: 0 !important;
    }

    .cronoclinic-main-img.desktop-only { 
        display: none !important; 
    }

    .cronoclinic-main-img.mobile-only { 
        display: block !important;
        width: 100% !important; /* Ocupa os 85% do pai */
        height: auto !important; /* Mantém proporção (SEM CORTAR) */
        max-width: 100% !important;
    }

    /* --- ORDEM 4: TEXTO (COPY) --- */
    .cronoclinic-copy {
        order: 4 !important;
        width: 90% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .cronoclinic-copy p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        color: #333;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
}

/* =============================================================
   SEÇÃO SKINCARE - VERSÃO FINAL COM LINHA SUBORDINADA
   ============================================================= */
/* --- EFEITO REFINADO NO GRID DE PRODUTOS --- */

.product-item {
    /* Mantendo suas bases e adicionando transição */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.product-item:hover {
    /* Efeito de profundidade e cor */
    transform: scale(1.03); /* Aumenta sutilmente */
    background-color: #f9f9f7; /* Um off-white que harmoniza com o verde */
    
    /* Sombra suave acompanhando o tom do gradiente */
    box-shadow: 0 10px 20px rgba(110, 113, 93, 0.15);
    
    /* Ajuste de cor do texto no hover para dar mais destaque */
    color: #4a4d3f; 
}

/* Linha de brilho interna opcional */
.product-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    z-index: -1;
}

.product-item:hover::before {
    opacity: 1;
}

/* Responsividade: desabilita o scale no mobile para não quebrar o layout */
@media (max-width: 64em) {
    .product-item:hover {
        transform: none;
    }
}

.skincare-section {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.skincare-container {
    display: flex;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

/* IMAGEM PROTAGONISTA */
.skincare-image-side {
    flex: 0 0 60%; 
    padding: 30px 40px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.skincare-main-img {
    width: 100%;
    height: 85vh;
    max-width: 900px;
    object-fit: cover;
}

/* CONTEÚDO PC */
.skincare-content {
    flex: 1;
    padding-left: 30px; 
    padding-right: 5%; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skincare-text-wrapper {
    width: 100%;
    max-width: 550px;
    text-align: center;
}

/* TÍTULO COM GRADIENTE E LINHA EMBAIXO */
.skincare-title {
    font-family: var(--font-titulo);
    font-size: 7.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    letter-spacing: normal;
    
    /* Gradiente no Texto */
    background: linear-gradient(90deg, #6e715d, #5e614e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* A LINHAZINHA AQUI: */
    border-bottom: 1.5px solid #6e715d; 
    padding-bottom: 10px; 
}

.skincare-subtitle {
    font-family: var(--font-titulo);
    font-size: 2.2rem;
    font-style: italic;
    color: #333;
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

.skincare-copy p {
    font-family: var(--font-copy);
    font-size: 1.45rem;
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* GRID */
.skincare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.product-item {
    border: 2px solid;
    border-image-source: linear-gradient(90deg, #6e715d, #5e614e);
    border-image-slice: 1;
    padding: 20px;
    font-size: 1.15rem;
    color: #5e614e;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================
   RESPONSIVIDADE - NOTEBOOK (CONTEÚDO REDUZIDO)
   ============================================================= */

@media (min-width: 64.01em) and (max-width: 96em) {
    .skincare-image-side { 
        flex: 0 0 58%; 
        padding: 20px;
    }

    .skincare-main-img { 
        height: 85vh !important; 
        max-width: 650px;
    }
    
    .skincare-text-wrapper { 
        max-width: 380px !important; 
    }

    .skincare-title { 
        font-size: 4.5rem !important; 
        margin-bottom: 1.2rem !important;
        padding-bottom: 6px !important; /* Linha mais próxima no note */
    }

    .skincare-subtitle { 
        font-size: 1.5rem !important; 
    }

    .skincare-copy p { 
        font-size: 1.1rem !important; 
    }

    .product-item {
        padding: 10px !important;
        font-size: 0.95rem !important;
    }
}

/* =============================================================
   RESPONSIVIDADE - MOBILE
   ============================================================= */

@media (max-width: 64em) {
    .skincare-section { height: auto !important; padding: 50px 0 !important; display: block !important; }
    .skincare-container { flex-direction: column !important; }
    .skincare-content, .skincare-text-wrapper { display: contents !important; }

    .skincare-title {
        order: 1 !important;
        font-size: 3.2rem !important;
        text-align: center !important;
        margin: 0 auto 20px auto !important; /* Adicionado auto para centralizar */
        width: auto !important; 
        display: table !important; /* Table ou inline-block funcionam bem para a linha */
        
        border-bottom: 1.5px solid #6e715d !important; 
        padding-bottom: 8px !important;

        background: linear-gradient(90deg, #6e715d, #5e614e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .skincare-subtitle { order: 2 !important; font-size: 1.35rem !important; padding: 0 25px !important; margin-bottom: 30px !important; }
    .skincare-image-side { order: 3 !important; width: 100% !important; padding: 0 30px !important; margin-bottom: 30px !important; }
    .skincare-main-img { height: auto !important; max-height: 45vh !important; object-fit: contain !important; }
    
    .skincare-copy { 
        order: 4 !important; 
        padding: 0 30px !important; 
    }

    /* REDUÇÃO DO GAP AQUI */
    .skincare-copy p {
        margin-bottom: 5px !important; /* Reduzi a margem do parágrafo */
    }

    .skincare-grid { 
        order: 5 !important; 
        width: 90% !important; 
        margin: 10px auto 0 auto !important; /* Zerei o margin-top que estava em 25px */
        gap: 10px !important; /* Diminuí o espaço entre os próprios quadrados */
    }
}
/* =============================================================
   FOOTER COMPLETO - FOTOS GIGANTES E LINKS SEM AZUL
   ============================================================= */

/* 1. SEÇÃO DE FOTOS (Mural Colado) */
.beleza-tempo-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

.beleza-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 fotos lado a lado */
    gap: 0; /* REMOVE TODA MARGEM ENTRE FOTOS */
    width: 100%;
}

.beleza-item {
    width: 100%;
    line-height: 0; /* Remove respiro branco na base */
}

.beleza-item img {
    width: 100%;
    height: 500px; /* Fotos bem grandes */
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.beleza-item:hover img {
    transform: scale(1.03);
}

/* 2. ESTRUTURA DO RODAPÉ */
footer.main-footer {
    background-color: var(--verde-1); /* */
    color: #fff;
    padding: 60px 5% 40px;
    width: 100%;
}

/* 3. LOGOS (MAGALI E CRONOCLINIC) */
.footer-brand-row {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
}

.brand-magali img, 
.brand-cronoclinic img {
    height: 360px !important; /* Logos grandes */
    width: auto;
}

/* 4. COLUNAS DE INFORMAÇÃO */
.footer-info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col h3 {
    font-family: var(--font-titulo); /* */
    font-size: 1.4rem;
    margin-bottom: 20px;
}

/* 5. MATA O AZUL DOS LINKS (Telefones e Endereço) */
.footer-col p, 
.footer-col a {
    color: #fff !important; /* Força o branco em tudo */
    text-decoration: none !important; /* Tira sublinhado azul */
    font-family: var(--font-copy); /* */
    font-size: 1.1rem;
    transition: opacity 0.3s;
}

.footer-col a:hover {
    opacity: 0.7;
}

/* 6. ÍCONES REDES SOCIAIS */
.social-icons {
    display: flex;
    gap: 25px;
}

.social-icons a i {
    font-size: 2.5rem !important; /* Ícones bem grandes */
    color: #fff !important;
}

/* 7. CARD DO MAPA (Real) */
.map-card {
    border-radius: 8px;
    overflow: hidden;
    height: 180px;
    background: #fff;
    margin-bottom: 10px;
}

.map-info strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 5px;
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .beleza-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-brand-row { gap: 20px; }
}

@media (max-width: 600px) {
    .beleza-grid { grid-template-columns: 1fr; }
    .beleza-item img { height: 350px; }
    .footer-brand-row { flex-direction: column; align-items: center; }
    .footer-info-row { text-align: center; }
    .social-icons { justify-content: center; }
}

/* SEÇÃO CTA - ESTILO EDITORIAL */
.cta-ref-section {
    width: 100%;
    height: 100vh; /* Ocupa a tela toda */
    display: flex;
    align-items: center; 
    padding-left: 8%; /* Espaçamento da esquerda */
    
    /* Background Desktop */
    background: url('image_5d9832.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: scroll; /* Imagem estática */
    position: relative;
}

/* Container que dita a largura da linha */
.cta-ref-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha tudo na esquerda */
    z-index: 2;
}

.cta-ref-title {
    font-family: var(--font-titulo);
    font-size: clamp(4rem, 10vw, 8rem); /* Aumentado consideravelmente */
    color: #ebe7da;
    line-height: 0.9; /* Deixa as linhas bem próximas, estilo editorial */
    margin-bottom: 0;
    font-weight: normal;
    text-transform: none;
}

/* A LINHA (Largura dinâmica baseada no título) */
.cta-ref-line {
    width: 100%; /* Ela vai ocupar 100% do wrapper (que tem a largura do texto) */
    height: 2px;
    background-color: var(--verde-1);
    margin: 40px 0; /* Espaço entre título e botão */
}

.cta-ref-button {
    display: inline-block;
    font-family: var(--font-copy);
    text-decoration: none;
    color: #ebe7da;
    background-color: var(--verde-1);
    padding: 22px 50px;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cta-ref-button:hover {
    background-color: var(--verde-2);
    transform: scale(1.05);
}

/* RESPONSIVO MOBILE - FOCO EM LEGIBILIDADE E IMPACTO */
@media (max-width: 768px) {
    .cta-ref-section {
        padding: 0 25px; /* Espaçamento lateral */
        justify-content: center; 
        background-image: url('bg-mobile.jpg'); /* Sua imagem do Canva */
        background-attachment: scroll;
    }

    /* CAMADA PARA ESCURECER O FUNDO (MAIS OPACA) */
    .cta-ref-section::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        /* Aumentei para 0.4 para o texto verde/branco "saltar" da tela */
        background: rgba(0, 0, 0, 0.4); 
        z-index: 1;
    }

    .cta-ref-wrapper {
        align-items: center; 
        text-align: center;
        z-index: 2;
        width: 100%;
    }

    .cta-ref-title {
        /* Título monumental no celular */
        font-size: 4.5rem; 
        line-height: 0.85; /* Letras bem próximas para estilo luxo */
        margin-bottom: 10px;
        /* Sombra leve no texto para garantir que ele seja lido em qualquer foto */
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    }

    .cta-ref-line {
        width: 80%; /* Linha um pouco maior que a anterior, mas ainda menor que o texto */
        height: 2px;
        background-color: var(--verde-1);
        margin: 20px auto 35px auto;
    }

    .cta-ref-button {
        padding: 14px 30px; /* Botão mais delicado */
        font-size: 0.8rem;
        width: auto;
        min-width: 200px; /* Garante que não fique pequeno demais para clicar */
    }
}

.brand-magali img, 
.brand-cronoclinic img {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.brand-magali img:hover, 
.brand-cronoclinic img:hover {
    filter: brightness(1.2); /* Dá um leve destaque na logo */
    transform: translateY(-3px);
}

/* =========================================================
   BLOQUEIO TOTAL DE DARK MODE AUTOMÁTICO (FORÇADO)
   - iOS Safari / Android Chrome / Samsung Internet
   - Mantém o site exatamente como foi desenhado
========================================================= */

/* Diz ao navegador que o site é LIGHT (não oferecer dark) */
:root { 
  color-scheme: light !important;
}

/* Evita qualquer inversão automática de cores */
html, body {
  background: #ffffff !important;
  -webkit-text-size-adjust: 100%;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Se o sistema estiver em dark, mantém LIGHT do mesmo jeito */
@media (prefers-color-scheme: dark) {
  :root { 
    color-scheme: light !important;
  }

  html, body {
    background: #ffffff !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* evita “clarear/escurecer” elementos automaticamente */
  * {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* * -------------------------------------------
 * BOTAO WHATSAPP FLUTUANTE
 * -------------------------------------------
 */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: transparent; /* A imagem já deve ter o fundo ou ser redonda */
    border-radius: 50px;
    text-align: center;
    z-index: 9999; /* Garante que fique acima de tudo */
    transition: transform 0.3s ease;
}

.whatsapp-icon {
    width: 100%;
    height: auto;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Dá um pulinho quando passa o mouse */
}

/* Ajuste para telas menores */
@media (max-width: 64em) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}