/* ---------------------------- FONTES ---------------------------- */
@font-face {
    font-family: 'PlayfairDisplay-Bold';
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.woff2') format('woff2'),
         url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Julius Sans One';
    src: url('../fonts/Julius_Sans_One/JuliusSansOne-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/Open_Sans/OpenSansCondensed-Bold.woff2') format('woff2'),
         url('../fonts/Open_Sans/OpenSansCondensed-Bold.woff') format('woff');
    font-display: swap;
}

/* ---------------------------- ROOT VARIABLES ---------------------------- */
:root {
    /* --- Cores --- */
    --cor-fundo-branco: #ffffff;
    --cor-fundo-creme: #fdfdfa;
    --cor-dourado: #D4B483;
    --cor-vinho: #8C1F1F;
    --cor-vinho-escuro: #771010;
    --cor-whatsapp-verde: #25D366;
    --cor-texto-tooltip: var(--cor-fundo-branco);
    --cor-texto-titulo: #333333;
    --cor-texto-corpo: #6b6657;
    --cor-texto-neutro: #555555;
    --gradiente-vinho: linear-gradient(to right, var(--cor-vinho), var(--cor-vinho-escuro), var(--cor-dourado));

    /* --- Fontes --- */
    --fonte-titulo: 'PlayfairDisplay-Bold', serif;
    --fonte-corpo: 'OpenSans-Bold', sans-serif;
    --fonte-destaque: 'Julius Sans One', sans-serif;

    /* --- Transições --- */
    --transition-duration: 0.3s;
    --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-rapida: 0.3s ease;

    /* --- Tamanhos de Texto (Tipografia) --- */
    /* NOTA: Duas declarações de --tamanho-texto-base e --tamanho-texto-pequeno existem no código original. A última de cada prevalecerá. */
    --tamanho-texto-base: clamp(1rem, 1.5vw, 1.1rem);
    --tamanho-texto-pequeno: clamp(0.8rem, 1vw, 0.9rem);
    --tamanho-h1: clamp(2.5rem, 6vw, 4.5rem);
    --tamanho-h2: clamp(2rem, 5vw, 3.5rem);
    --tamanho-h3: clamp(1.5rem, 4vw, 2.2rem);
    --tamanho-h4: clamp(1.2rem, 3vw, 1.8rem);
    --tamanho-texto-base: 1.0rem; 
    --tamanho-subtitulo: 1.1rem;
    --tamanho-botao: 1.0rem;
    --tamanho-link: 1.0rem;
    --tamanho-texto-pequeno: 0.9rem;

    /* --- Espaçamentos --- */
    --espacamento-xs: clamp(0.25rem, 0.5vw, 0.4rem);
    --espacamento-pequeno: clamp(0.5rem, 1vw, 0.75rem);
    --espacamento-medio: clamp(1rem, 2vw, 1.5rem);
    --espacamento-grande: clamp(2rem, 4vw, 3rem);
    --espacamento-xl: clamp(3.5rem, 7vw, 5rem);
    --espacamento-lateral-mobile: 1.5rem;
    --espacamento-secao: clamp(4rem, 8vw, 6rem);
}

/* ---------------------------- RESET & ESTILOS BASE ---------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar,
main::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-texto-base);
    line-height: 1.6;
    color: var(--cor-texto-corpo);
    background-color: var(--cor-fundo-creme);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    width: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--cor-vinho);
    text-decoration: none;
    transition: color var(--transition-rapida);
}

/* --- Hierarquia de Títulos & Parágrafos --- */
/* NOTA: Regras duplicadas para h1-h6 foram unificadas. As propriedades da última declaração foram mantidas. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--cor-texto-titulo);
    line-height: 1.2;
    text-align: center;
    margin-bottom: var(--espacamento-md);
}

h1 { font-size: var(--tamanho-h1); }
h2 { font-size: var(--tamanho-h2); }
h3 { font-size: var(--tamanho-h3); }

p {
    font-size: var(--tamanho-texto-base);
    color: var(--cor-texto-corpo);
    margin-bottom: var(--espacamento-medio);
    text-align: center;
}

p:last-child {
    margin-bottom: 0;
}

h1 + p, h2 + p, h3 + p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- Classes Utilitárias de Layout --- */
.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--espacamento-md);
}

.text-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.controle_geral {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding-left: var(--espacamento-lateral-mobile);
    padding-right: var(--espacamento-lateral-mobile);
}

section {
    padding: var(--espacamento-secao) 0;
}

.pagina__geral section:first-of-type {
    padding-top: 0;
}

/* ---------------------------- ANIMAÇÕES E ACESSIBILIDADE ---------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* =================================================================== */
/* ======================== SEÇÕES DO SITE =========================== */
/* =================================================================== */
/* =================================================================== */
/* === CSS FINAL DO CABEÇALHO v2.3 (VERSÃO SEM OVERLAY)              === */
/* =================================================================== */

/* --- 1. ESTILOS BASE DO CABEÇALHO (PARA TODAS AS TELAS) --- */
.cabecalho {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 0 var(--espacamento-lateral-mobile) 0 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.cabecalho--scrolled {
    background-color: var(--cor-fundo-creme);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: var(--espacamento-pequeno) 0;
}

.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espacamento-lateral-mobile);
}

.cabecalho__logo {
    width: 120px;
    height: auto;
    transition: width 0.3s ease;
}

.cabecalho--scrolled{
    padding: 0 var(--espacamento-lateral-mobile);
}

.cabecalho--scrolled .cabecalho__logo {
    width: 100px;
}

.cabecalho__nav, .cabecalho__cta {
    display: none;
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--espacamento-medio);
}


/* --- 2. ESTILOS PARA TELAS MOBILE (max-width: 1023px) --- */
@media (max-width: 1023px) {

    /* --- O Menu Deslizante --- */
    .cabecalho__nav {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background-color: var(--cor-fundo-creme);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 2000; /* Menu fica acima de todo o conteúdo */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
    }

    /* Estado do menu quando o body tem a classe .menu-aberto */
    .menu-aberto .cabecalho__nav {
        transform: translateX(0);
        visibility: visible;
    }

    /* --- Lista e Links dentro do Menu Mobile --- */
    .cabecalho__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; text-align: center; gap: var(--espacamento-grande); }
    .cabecalho__link { font-family: var(--fonte-titulo); font-size: 1.8rem; color: var(--cor-texto-titulo); padding: 0.5rem 1rem; text-decoration: none; }
    .cabecalho__link--cta { background: var(--gradiente-vinho); color: var(--cor-fundo-branco); padding: 0.8rem 2.5rem; border-radius: 50px; font-family: var(--fonte-corpo); font-size: 1.2rem; font-weight: bold; text-transform: uppercase; display: inline-block; }

    /* --- Botão Hamburguer e Animação para "X" --- */
    .cabecalho__toggle {
        display: flex; flex-direction: column; justify-content: space-around; width: 28px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0;
        z-index: 2100; /* Botão fica acima de tudo */
    }
    .menu-aberto .cabecalho__toggle {
        position: fixed; right: var(--espacamento-lateral-mobile);
    }
    .cabecalho__toggle .hamburguer { width: 100%; height: 3px; background-color: var(--cor-vinho-escuro); border-radius: 2px; display: block; position: relative; transition: all 0.25s ease-in-out; }
    .cabecalho__toggle .hamburguer::before, .cabecalho__toggle .hamburguer::after { content: ''; position: absolute; width: 100%; height: 3px; background-color: var(--cor-vinho-escuro); border-radius: 2px; transition: all 0.25s ease-in-out; }
    .cabecalho__toggle .hamburguer::before { transform: translateY(-8px); }
    .cabecalho__toggle .hamburguer::after { transform: translateY(8px); }
    .menu-aberto .hamburguer { background-color: transparent; }
    .menu-aberto .hamburguer::before { transform: rotate(45deg); }
    .menu-aberto .hamburguer::after { transform: rotate(-45deg); }
}

/* --- 3. ESTILOS PARA DESKTOP (min-width: 1024px) --- */
@media (min-width: 1024px) {
    .cabecalho__toggle { display: none !important; }
    .cabecalho__nav, .cabecalho__cta { display: block; }
    .cabecalho__nav { margin: 0 auto; }
    .cabecalho__lista { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--espacamento-grande); }
    .cabecalho__link { font-family: var(--fonte-corpo); font-size: var(--tamanho-texto-base); font-weight: bold; color: var(--cor-texto-titulo); text-decoration: none; padding: 0.5rem 0; position: relative; transition: color var(--transition-rapida); }
    .cabecalho__link--cta { display: none; }
    .cabecalho__link:not(.cabecalho__link--cta)::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradiente-vinho); transition: width var(--transition-rapida); }
    .cabecalho__link:hover:not(.cabecalho__link--cta) { color: var(--cor-vinho); }
    .cabecalho__link:hover:not(.cabecalho__link--cta)::after { width: 100%; }
    .cabecalho__cta { display: inline-block; background: var(--gradiente-vinho); color: var(--cor-fundo-branco); padding: 0.7rem 1.5rem; border-radius: var(--espacamento-pequeno); font-family: var(--fonte-corpo); font-weight: bold; transition: transform 0.2s ease, filter 0.2s ease; text-decoration: none; }
    .cabecalho__cta:hover { transform: scale(1.05); filter: brightness(1.1); }
}

/* ---------------------------- SEÇÃO PRINCIPAL (HERO) ---------------------------- */
.secao-principal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-color: var(--cor-fundo-creme);
    padding: 0;
    padding-top: 6em;
}

.secao-principal__fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    display: flex;
    z-index: 1;
}

#fundo01,
#fundo02 {
    width: 50%;
    height: 465px;
    display: flex;
    align-items: center;
}

#fundo01 {
    justify-content: start;
    background-color: var(--cor-fundo-branco);
}

#fundo02 {
    justify-content: end;
    background-color: var(--cor-dourado);
}

.secao-principal__fundo__paragrafo {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: var(--fonte-destaque);
    font-size: 3.5rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.07);
    text-transform: uppercase;
    line-height: 1.3;
    user-select: none;
    border-left: 2px solid rgba(0, 0, 0, 0.06);
    border-right: 2px solid rgba(0, 0, 0, 0.06);
    padding: var(--espacamento-xl) 0;
    transition: color var(--transition-duration) ease;
}

.secao-principal__conteudo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 4rem;
    padding: 0 var(--espacamento-lateral-mobile);
}

.foto-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 150%;
    z-index: 2;
}

.foto-wrapper::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 200%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--cor-fundo-creme) 100%);
    z-index: 3;
    pointer-events: none;
}

.secao-principal__foto {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1/1;
    object-fit: cover;
    z-index: 2;
    border-radius: var(--espacamento-pequeno);
}

.textos-titulo {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.nome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--espacamento-pequeno);
}

.nome {
    line-height: 1;
    margin: -0.1em;
    font-weight: bold;
}

.nayra {
    font-family: var(--fonte-destaque);
    font-size: 2.2em;
    color: var(--cor-vinho);
}

.ananias {
    font-family: var(--fonte-titulo);
    font-size: 3.2em;
    color: var(--cor-vinho-escuro);
}

.secao-principal__subtitulo {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-subtitulo);
    font-weight: 400;
    color: var(--cor-texto-titulo);
    margin: var(--espacamento-pequeno) var(--espacamento-grande);
}

.linha {
    position: absolute;
    width: 2px;
    background-color: var(--cor-vinho-escuro);
    z-index: 10;
}

.linha-superior {
    height: 20px;
    top: 0;
    transform: translateY(calc(-100% - 5px));
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    color: var(--cor-vinho-escuro);
    margin-top: var(--espacamento-pequeno);
    padding-bottom: var(--espacamento-grande);
}

.scroll-text {
    font-size: var(--tamanho-texto-pequeno);
    margin-bottom: var(--espacamento-pequeno);
}

.mouse-scroll {
    position: relative;
    width: 24px;
    height: 40px;
    border: 2px solid var(--cor-vinho-escuro);
    border-radius: 12px;
}

.wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: var(--cor-vinho-escuro);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: wheelMove 1.5s infinite;
}

@keyframes wheelMove {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    50% { opacity: 1; transform: translate(-50%, 0px); }
    100% { opacity: 0; transform: translate(-50%, 0px); }
}

.palavras_destaques {
    color: var(--cor-vinho-escuro);
    font-weight: bold;
}

/* =================================================================== */
/* ====== CSS PARA OS NOVOS ELEMENTOS DE TEXTO E BOTÃO DO HERO ======= */
/* =================================================================== */

/* Classe para esconder o H1 de SEO corretamente */
.titulo-seo-escondido {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* Estilo do novo título visível (H2) */
.secao-principal__titulo-impacto {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-subtitulo);
    font-weight: 400;
    color: var(--cor-texto-titulo);
    margin-top: var(--espacamento-medio);
    margin-bottom: var(--espacamento-grande);
    max-width: 90%;
    text-align: center;
}

/* Estilo do novo botão de ação */
.botao-principal {
    display: inline-block;
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-botao);
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(140, 31, 31, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.botao-principal:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(140, 31, 31, 0.4);
    color: var(--cor-fundo-branco);
}

/* ---------------------------- SEÇÃO CATÁLOGO ---------------------------- */
.catalogo {
    width: 100%;
    background-color: var(--cor-fundo-creme);
    font-family: var(--fonte-corpo);
    text-align: center;
    overflow: hidden;
}

.catalogo__intro {
    margin-bottom: var(--espacamento-grande);
}

.catalogo__intro:last-child {
    margin-bottom: 0;
}

.catalogo__carrossel + .catalogo__intro {
    margin-top: var(--espacamento-grande);
}

.catalogo .container__conteudo__titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h2);
    margin-bottom: var(--espacamento-medio);
    text-align: center;
}

.catalogo .container__conteudo__descricao {
    color: var(--cor-texto-corpo);
    font-size: var(--tamanho-texto-base);
    line-height: 1.6;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--espacamento-grande);
    text-align: center;
}

.catalogo__menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--espacamento-medio);
    margin-top: var(--espacamento-grande);
    margin-bottom: var(--espacamento-grande);
}

.catalogo__botao {
    background-color: var(--cor-dourado);
    color: var(--cor-fundo-branco);
    border: none;
    padding: 0.7rem 1.5rem;
    font-size: var(--tamanho-texto-base);
    font-family: var(--fonte-corpo);
    font-weight: bold;
    border-radius: var(--espacamento-pequeno);
    cursor: pointer;
    transition: background-color var(--transition-duration) ease, transform 0.2s ease;
}

.catalogo__botao:hover,
.catalogo__botao.ativo {
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    transform: scale(1.05);
}

.catalogo__carrossel {
    display: flex;
    overflow-x: auto;
    gap: var(--espacamento-medio);
    width: calc(100% + (var(--espacamento-lateral-mobile) * 2));
    margin-left: calc(-1 * var(--espacamento-lateral-mobile));
    margin-right: calc(-1 * var(--espacamento-lateral-mobile));
    padding: 0.5rem var(--espacamento-lateral-mobile) 2.5rem var(--espacamento-lateral-mobile);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--cor-vinho-escuro) var(--cor-dourado);
}

.catalogo__carrossel::-webkit-scrollbar {
    height: 8px;
    background-color: var(--cor-fundo-branco);
    border-radius: 25px;
}

.catalogo__carrossel::-webkit-scrollbar-thumb {
    background: var(--gradiente-vinho);
    border-radius: 25px;
}

.catalogo__card {
    flex: 0 0 85%;
    max-width: 340px;
    scroll-snap-align: center;
    background-color: var(--cor-fundo-branco);
    border: 1px solid #efefef;
    border-radius: var(--espacamento-medio);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    display: flex;
    flex-direction: column;
}

.catalogo__card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
}

.catalogo__card.destacado {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    z-index: 1;
}

.catalogo__card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.catalogo__card__conteudo {
    padding: var(--espacamento-medio);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espacamento-xs);
    flex-grow: 1;
}

.catalogo__card__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.2rem;
    color: var(--cor-vinho);
    margin-bottom: var(--espacamento-xs);
    line-height: 1.3;
}

.catalogo__card__descricao {
    font-size: var(--tamanho-texto-base);
    color: var(--cor-texto-corpo);
    line-height: 1.5;
    margin-bottom: var(--espacamento-pequeno);
    flex-grow: 1;
}

.catalogo__card__caracteristicas {
    display: flex;
    gap: var(--espacamento-pequeno);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--espacamento-medio);
}

.catalogo__card__caracteristicas span {
    background-color: var(--cor-dourado);
    color: var(--cor-fundo-branco);
    padding: 0.2rem 0.8rem;
    border-radius: var(--espacamento-pequeno);
    font-size: 0.8rem;
    font-weight: bold;
}

.catalogo__cta {
    margin-top: auto;
    width: 100%;
}

.catalogo__cta a {
    display: inline-block;
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: var(--espacamento-pequeno);
    font-size: var(--tamanho-botao);
    font-family: var(--fonte-corpo);
    font-weight: bold;
    transition: filter var(--transition-duration) ease, transform 0.2s ease;
}

.catalogo__cta a:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.container__conteudo__descricao {
    margin-bottom: var(--espacamento-xs);
}

/* =================================================================== */
/* ============== CSS PARA O EFEITO DE ARRASTAR O CARROSSEL ========== */
/* =================================================================== */

.catalogo__carrossel {
    cursor: grab; /* Cursor de mão aberta por padrão */
    user-select: none; /* Impede a seleção de texto ao arrastar */
}

.catalogo__carrossel.active {
    cursor: grabbing; /* Cursor de mão fechada ao clicar */
    cursor: -webkit-grabbing;
}


/* =================================================================== */
/* ============= CSS COMPLETO DA SEÇÃO DE COMBOS (FINAL) ============= */
/* =================================================================== */

.combos {
    background-color: var(--cor-fundo-branco); /* Ou a cor de fundo que preferir para a seção */
    padding: var(--espacamento-secao) 0;
}

.combos .container__conteudo__descricao {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.combos__container {
    display: grid;
    /* Cria colunas responsivas: 1 no mobile, 2 em tablets, etc. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--espacamento-grande);
    margin-top: var(--espacamento-grande);
    align-items: stretch; /* Garante que os cards na mesma linha tenham a mesma altura */
    padding: 0 var(--espacamento-lateral-mobile);
    justify-content: center;
}

.combo-card {
    background-color: var(--cor-fundo-branco);
    border: 1px solid #eee;
    border-radius: var(--espacamento-medio);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%; 
}

.combo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.combo-card__imagem {
    width: 100%;
    height: 220px; /* Altura fixa para a imagem */
    overflow: hidden;
}

.combo-card__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    transition: transform 0.4s ease;
}

.combo-card:hover .combo-card__imagem img {
    transform: scale(1.05);
}

.combo-card__conteudo {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz este bloco ocupar o espaço disponível */
}

.combo-card__title {
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-h3);
    color: var(--cor-texto-titulo);
    margin-bottom: var(--espacamento-pequeno);
    min-height: 2.5em; /* Evita que o layout quebre com títulos de 1 ou 2 linhas */
}

.combo-card__description {
    color: var(--cor-texto-corpo);
    font-size: var(--tamanho-texto-base);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Ocupa espaço para alinhar os botões */
}

.combo-card__servicos {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.combo-card__servicos li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-texto-neutro);
}

.combo-card__servicos .fa-check {
    color: var(--cor-dourado);
}

.combo-card__cta {
    display: inline-block;
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    text-decoration: none;
    padding: 0.9rem 1.5rem;
    border-radius: var(--espacamento-pequeno);
    font-size: var(--tamanho-botao);
    font-family: var(--fonte-corpo);
    font-weight: bold;
    text-transform: uppercase;
    transition: filter 0.3s ease, transform 0.3s ease;
    margin-top: auto; /* Empurra o botão para o final do card */
}

.combo-card__cta:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
    color: var(--cor-fundo-branco); /* Garante que a cor não mude */
}

/* Estilos do card em destaque */
.combo-card.destaque {
    border: 2px solid var(--cor-dourado);
    transform: scale(1.03);
    background-color: var(--cor-fundo-creme);
}

.combo-card.destaque:hover {
    transform: scale(1.05) translateY(-5px);
}

.combo-card__badge {
    position: absolute;
    top: 15px;
    right: -40px;
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}

/* =================================================================== */
/* ============= CSS REFINADO DA SEÇÃO DE CURSOS (v2.0) ============== */
/* =================================================================== */

.cursos {
    background-color: #fcfaf7;
    padding: var(--espacamento-secao) 0;
    border-top: 1px solid #f0e9e0;
    border-bottom: 1px solid #f0e9e0;
}

/* --- Bloco "Sobre a Educadora" --- */
.educadora__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 var(--espacamento-lateral-mobile);
}

.educadora__foto {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--cor-dourado);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.educadora__texto .cursos__titulo {
    margin-bottom: 1rem;
}

.educadora__texto .container__conteudo__descricao {
    max-width: 65ch;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- Lista de Cursos --- */
.cursos__lista {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--espacamento-lateral-mobile);
}

/* --- Card de Curso (Estilo Principal Refinado) --- */
.curso-card {
    background-color: var(--cor-fundo-branco);
    border: 1px solid #F0EFEF;
    border-radius: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 8px 25px rgba(0,0,0,0.04);
    transition: all 0.3s ease-in-out;
}

.curso-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07), 0 12px 40px rgba(0,0,0,0.07);
    border-color: #EAE3D9;
}

/* --- Parte Visível do Card (Preview) --- */
.curso-card__preview {
    display: flex;
    flex-direction: column; /* Começa como coluna para mobile (mobile-first) */
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

/* CORREÇÃO PRINCIPAL APLICADA AQUI */
.curso-card__imagem {
    width: 100%; /* Tamanho maior para o mobile */
    height: 150px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0; /* IMPEDE que a imagem seja esmagada */
}

.curso-card__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza no mobile */
    flex-grow: 1; /* Permite que o texto ocupe o espaço */
}

.curso-card__info h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    color: var(--cor-vinho);
    margin: 0 0 0.25rem 0;
    text-align: center; /* Centraliza no mobile */
}

.curso-card__info p {
    font-size: 1rem;
    margin: 0 0 1.25rem 0;
    text-align: center; /* Centraliza no mobile */
    color: var(--cor-texto-corpo);
}


/* =================================================================== */
/* ============= CSS PARA OS BOTÕES DUPLOS DOS CURSOS ================ */
/* =================================================================== */

/* Container que alinha os dois botões lado a lado */
.card-botoes-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha em telas mínimas */
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Botão Secundário: "Ver Detalhes" */
.curso-card__toggle-btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--cor-fundo-branco);
    color: var(--cor-texto-neutro);
    border: 1px solid #DCDCDC;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.curso-card__toggle-btn:hover {
    border-color: var(--cor-vinho);
    color: var(--cor-vinho);
    background-color: #fdf5f5;
}

/* Botão Principal: "Falar com Nayra" */
.botao-whatsapp-curso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem; /* Levemente maior para mais destaque */
    font-family: var(--fonte-corpo);
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    background: var(--gradiente-vinho);
    color: white;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.botao-whatsapp-curso:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    color: white;
}
.botao-whatsapp-curso i {
    font-size: 1rem;
}


/* --- Área Expansível dos Detalhes --- */
.curso-card__detalhes {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0 1.5rem;
}

.curso-card.expandido .curso-card__detalhes {
    max-height: 1200px;
    padding: 2rem 1.5rem;
    border-top: 1px solid #f0e9e0;
}

/* ... (as regras de .detalhes__grid, h4, ul, li, etc. permanecem as mesmas) ... */
.detalhes__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.detalhes__grid h4 { font-family: var(--fonte-titulo); color: var(--cor-vinho-escuro); margin: 0 0 0.75rem 0; text-align: left; border-left: 3px solid var(--cor-dourado); padding-left: 0.75rem; }
.detalhes__grid ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.detalhes__grid li { margin-bottom: 0.6rem; color: var(--cor-texto-neutro); line-height: 1.5; }
.detalhes__grid li .fa-check { color: var(--cor-dourado); margin-right: 0.5rem; }
.detalhes__cta-final { margin-top: 2.5rem; text-align: center; }

/* =================================================================== */
/* ======================= SEÇÃO DE PROPÓSITO V3 ===================== */
/* =================================================================== */

.proposito-v2 {
    background-color: var(--cor-fundo-creme);
    padding: var(--espacamento-secao) var(--espacamento-lateral-mobile);
    text-align: center;
}

.proposito-v2 .container__conteudo__descricao {
    color: var(--cor-texto-corpo);
    max-width: 700px;
    margin: 0 auto var(--espacamento-grande) auto;
    font-size: var(--tamanho-subtitulo);
}

.proposito-v2__container {
    display: flex;
    justify-content: center;
    gap: var(--espacamento-grande);
    flex-wrap: wrap;
    margin-top: var(--espacamento-grande);
}

.proposito-v2__card {
    position: relative;
    flex: 0 1 300px;
    max-width: 350px;
    padding: var(--espacamento-grande) var(--espacamento-medio);
    background-color: var(--cor-fundo-branco);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Remove a animação de hover para focar na de entrada */
    transition: box-shadow var(--transition-rapida);
}
.proposito-v2__card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* O conteúdo dentro do card começa invisível */
.proposito-v2__conteudo {
    position: relative;
    z-index: 2; /* Garante que o conteúdo fique acima da linha animada */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; /* Animação atrasada */
}

/* O SVG que contém a linha animada */
.adorno-borda-animada {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Impede que o SVG bloqueie o mouse */
}

.adorno-borda-animada path {
    fill: none;
    stroke: var(--cor-dourado);
    stroke-width: 1.5;
    /* Efeito de brilho na linha */
    filter: drop-shadow(0 0 3px var(--cor-dourado));
    
    /* Prepara a animação de desenho */
    stroke-dasharray: 1500; /* Um valor alto para cobrir todo o caminho */
    stroke-dashoffset: 1500;
    
    /* A transição que fará a mágica acontecer */
    transition: stroke-dashoffset 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Adiciona a classe para animar o conteúdo (fade in) */
.proposito-v2__card.conteudo-revelado .proposito-v2__conteudo {
    opacity: 1;
    transform: translateY(0);
}

/* Adiciona a classe para animar a borda (desenho) */
.proposito-v2__card.borda-animada .adorno-borda-animada path {
    stroke-dashoffset: 0;
}

/* Atraso na animação do segundo e terceiro cards para um efeito escalonado */
.proposito-v2__card:nth-child(2) .adorno-borda-animada path {
    transition-delay: 0.2s;
}
.proposito-v2__card:nth-child(3) .adorno-borda-animada path {
    transition-delay: 0.4s;
}
.proposito-v2__card:nth-child(2).conteudo-revelado .proposito-v2__conteudo {
    transition-delay: 1s;
}
.proposito-v2__card:nth-child(3).conteudo-revelado .proposito-v2__conteudo {
    transition-delay: 1.2s;
}

/* --- ESTILOS DO CONTEÚDO (semelhantes aos anteriores) --- */
.proposito-v2__icon-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--cor-dourado), var(--cor-vinho));
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
    margin: 0 auto var(--espacamento-medio) auto;
}
.proposito-v2__icon-wrapper i {
    font-size: 2.3rem;
    color: var(--cor-fundo-branco);
}
.proposito-v2__titulo {
    font-family: var(--fonte-destaque);
    color: var(--cor-texto-titulo);
    text-transform: uppercase;
}
.proposito-v2__texto {
    font-family: var(--fonte-corpo);
    color: var(--cor-texto-corpo);
}

/* =================================================================== */
/* === CSS COMPLETO E REFEITO DA SEÇÃO DE AGENDAMENTO (v3.0) ========= */
/* =================================================================== */

/* --- 1. Estilos Gerais da Seção --- */
.agendamento {
    padding: var(--espacamento-secao) 0;
    background-color: var(--cor-fundo-creme);
}

.agendamento__titulo-secao {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* --- 2. O Card Principal (que será centralizado) --- */
.agendamento__card-container {
    max-width: 500px; /* Largura máxima no mobile */
    margin: 0 auto; /* Garante a centralização */
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* --- 3. Layout Mobile (Vertical) --- */
.agendamento__imagem-wrapper img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.agendamento__conteudo {
    background-color: var(--cor-fundo-branco);
    padding: 2rem;
    border-radius: 8px;
}

.agendamento__descricao {
    font-size: 1.1rem;
    color: var(--cor-texto-corpo);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.agendamento__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.info-item i {
    font-size: 1.2rem;
    color: var(--cor-vinho);
    margin-top: 0.2rem;
}

.info-item span {
    font-size: 1rem;
    color: var(--cor-texto-neutro);
}

.info-item strong {
    font-family: var(--fonte-corpo);
    font-weight: bold;
    color: var(--cor-texto-titulo);
    display: block; /* Garante que a quebra de linha funcione bem */
    margin-bottom: 0.2rem;
}

.agendamento__link {
    display: block; /* Ocupa a largura toda */
    text-align: center;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--gradiente-vinho);
    color: var(--cor-fundo-branco);
    border-radius: var(--espacamento-pequeno);
    text-decoration: none;
    transition: all 0.3s ease;
}
.agendamento__link:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
    color: var(--cor-fundo-branco);
}

/* =================================================================== */
/* ============= CSS DO CARROSSEL DE FEEDBACKS INFINITO ============== */
/* =================================================================== */

.feedbacks {
    padding: var(--espacamento-secao) 0;
}

.feedback-section-title {
    text-align: center;
    font-size: clamp(1.8rem, 4.5vw, var(--tamanho-h2));
    margin-bottom: 2rem;
}

/* --- O Container Principal do "Letreiro" --- */
.scroller {
    max-width: 100%; /* Ocupa a largura total disponível */
    overflow: hidden;
    /* Efeito de degradê nas laterais para suavizar a entrada e saída dos cards */
    -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem; /* Espaço entre os cards */
}

/* Animação de rolagem */
@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.75rem)); /* Move metade da largura total */
    }
}

/* Aplicação da animação */
.scroller[data-animated="true"] .scroller__inner {
    width: max-content; /* Faz o container interno ser largo o suficiente */
    flex-wrap: nowrap;
    animation: scroll 60s linear infinite; /* Ajuste o tempo (40s) para mais rápido ou mais lento */
}

/* Estilo do Card de Feedback (adaptado do seu) */
.tag-list li {
    list-style: none; /* Garante que não haja bolinhas de lista */
}

.card-feedback {
    background-color: var(--cor-fundo-branco);
    border-radius: var(--espacamento-medio);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    padding: 1.5rem;
    width: 350px; /* Largura fixa para cada card */
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease;
}

/* O resto dos seus estilos de .card-feedback, header, user-info, etc. se encaixam aqui perfeitamente */
.card-feedback__header {
    display: flex; align-items: center; gap: 1rem;
}
.card-feedback__header img {
    width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--cor-dourado);
}
.user-info { display: flex; flex-direction: column; text-align: left; }
.user-info strong { color: var(--cor-texto-titulo); font-size: 1.1rem; font-weight: bold; }
.rating-source { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }
.estrelas { color: #FFC700; font-size: 0.9rem; }
.source i { font-size: 1.1rem; color: #aaa; }
.frase-destaque { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: bold; color: var(--cor-texto-titulo); line-height: 1.4; text-align: left; }
.texto-completo { font-size: 0.95rem; color: var(--cor-texto-corpo); line-height: 1.6; text-align: left; padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed #eee; }

/* Convite para novos feedbacks */
.novos-feedbacks__chamada {
    text-align: center; margin-top: .5rem; font-family: var(--fonte-corpo); font-size: 1.1rem; color: var(--cor-texto-neutro);
}
.novos-feedbacks__chamada a {
    color: var(--cor-vinho); font-weight: bold; text-decoration: underline; text-decoration-color: var(--cor-dourado);
}

/* ---------------------------- SEÇÃO DE LOCALIZAÇÃO ---------------------------- */
.location {
    text-align: center;
    padding: var(--espacamento-grande) var(--espacamento-medio);
    background-color: var(--cor-fundo-creme);
    color: var(--cor-texto-neutro);
    border-radius: var(--espacamento-pequeno);
}

.location h2 {
    font-size: clamp(1.8rem, 4.5vw, var(--tamanho-h2));
    color: var(--cor-vinho); 
    font-family: var(--fonte-titulo);
    margin-bottom: var(--espacamento-grande);
    font-weight: bold;
}

.location p {
    font-size: var(--tamanho-texto-base); 
    color: var(--cor-texto-corpo);
    font-family: var(--fonte-corpo); 
    line-height: 1.6;
    margin-bottom: var(--espacamento-grande);
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.map-container {
    margin-bottom: var(--espacamento-grande);
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--espacamento-medio);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 350px;
    border: none;
    display: block;
}

.location-details {
    margin-top: var(--espacamento-medio);
}

.location-address {
    font-weight: bold;
    color: var(--cor-vinho);
    font-size: var(--tamanho-subtitulo);
    font-family: var(--fonte-corpo);
    line-height: 1.5;
    margin-bottom: 0;
}

.location-address i {
    margin-right: var(--espacamento-pequeno);
    color: var(--cor-vinho);
}

/* ---------------------------- RODAPÉ ---------------------------- */
.site-footer {
    background-color: var(--cor-fundo-creme);
    color: var(--cor-texto-corpo);
    text-align: center;
    padding: 0 var(--espacamento-lateral-mobile); 
    box-sizing: border-box;
    width: 100%;
}

.site-footer__container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer p,
.site-footer a {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-texto-pequeno);
    line-height: 1.4;
}

.site-footer a {
    color: var(--cor-vinho);
    text-decoration: none;
    font-weight: bold;
    transition: color var(--transition-duration) var(--transition-timing);
}

.site-footer a:hover {
    color: var(--cor-vinho-escuro);
}

.footer-credits p { 
    margin-bottom: var(--espacamento-medio); 
}

.footer-social {
    margin-top: var(--espacamento-pequeno);
    padding-bottom: var(--espacamento-pequeno); 
}

.footer-social a {
    margin: 0 var(--espacamento-pequeno);
    color: var(--cor-vinho);
    font-size: 1.3rem; 
    transition: transform var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing);
}

.footer-social a:hover {
    color: var(--cor-vinho-escuro);
    transform: scale(1.2);
}

/* ---------------------------- COMPONENTES FLUTUANTES ---------------------------- */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 60px;
    height: 60px;
    background-color: var(--cor-whatsapp-verde, #25D366);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateX(calc(100% + 30px));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
                opacity 0.3s ease-out, 
                visibility 0s linear 0.3s;
    will-change: transform, opacity;
}

.whatsapp-button img {
    width: 100%;
    height: auto;
    display: block;
}

.whatsapp-button.visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                opacity 0.3s ease-in 0.1s,
                visibility 0s linear 0s;
}

.whatsapp-button.hidden {
    transform: translateX(calc(100% + 30px));
    opacity: 0;
    visibility: hidden;
}

.whatsapp-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    transform: translateY(10px);
    background-color: var(--cor-whatsapp-verde, #25D366);
    color: var(--cor-texto-tooltip, white);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    will-change: opacity, transform;
    z-index: -1;
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: var(--cor-whatsapp-verde, #25D366) transparent transparent transparent;
}

.whatsapp-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}

.whatsapp-tooltip.fade-out {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out; 
}

/* =================================================================== */
/* ================== MEDIA QUERIES (VERSÃO FINAL OTIMIZADA) ========= */
/* =================================================================== */

/* --- Breakpoint: Tablets (Retrato) e Celulares Maiores (>= 600px) --- */
@media (min-width: 600px) {
    /* --- SEÇÃO CURSOS: Correção do layout que quebrava --- */
    .curso-card__preview {
        flex-direction: row; /* Volta para o layout lado a lado */
        text-align: left;
    }
    .curso-card__imagem {
        width: 180px; /* Tamanho fixo e menor para a imagem */
        height: 200px;
    }
    .curso-card__info {
        align-items: flex-start; /* Alinha o conteúdo à esquerda */
    }
    .curso-card__info h3, .curso-card__info p {
        text-align: left; /* Alinha os textos à esquerda */
    }
    .card-botoes-container {
        justify-content: flex-start; /* Alinha os botões à esquerda */
    }
    .detalhes__grid {
        grid-template-columns: 1fr 1fr; /* Detalhes em duas colunas */
    }
}


/* --- Breakpoint: Tablets (Paisagem) e Acima (>= 900px) --- */
@media (min-width: 900px) {
    /* --- GERAL --- */
    .whatsapp-button {
        width: 70px;
        height: 70px;
        bottom: 30px;
        right: 30px;
    }

    /* --- SEÇÃO DE COMBOS --- */
    .combos__container {
        /* Garante no máximo 3 colunas em telas de tablet */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- SEÇÃO DE AGENDAMENTO: Ativa o layout de sobreposição corrigido --- */
    .agendamento__card-container {
        max-width: 980px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: center;
    }
    .agendamento__imagem-wrapper {
        grid-column: 1 / 8;
        grid-row: 1;
        height: 100%;
    }
    .agendamento__imagem-wrapper img {
        height: 100%;
        min-height: 580px;
    }
    .agendamento__conteudo {
        grid-column: 7 / 13;
        grid-row: 1;
        z-index: 2;
        padding: 2.5rem;
    }
}


/* --- Breakpoint: Desktops Pequenos e Acima (>= 1024px) --- */
@media (min-width: 1024px) {
    /* --- SEÇÃO HERO --- */
    .secao-principal__fundo { height: 790px; }
    .secao-principal__fundo__paragrafo { font-size: 48px; }
    .textos-titulo { margin-top: 1rem; }
    .nome.nayra { font-size: 2.5rem; }
    .nome.ananias { font-size: 3.5rem; }
    .secao-principal__titulo-impacto { font-size: 1.4rem; max-width: 40ch; }
    .botao-principal { font-size: calc(var(--tamanho-botao) * 1.1); padding: 1rem 2.8rem; }
    
    /* --- CATÁLOGO --- */
    .catalogo__carrossel {
        /* Desativa o padding negativo e centraliza a seção */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0.5rem 0 2.5rem 0;
    }
    .carrossel__trilha {
        justify-content: center; /* Centraliza os cards quando não há scroll */
    }

    /* --- CURSOS --- */
    .curso-card__imagem { width: 140px; height: 140px; }
    .curso-card__info h3 { font-size: 1.8rem; }
    .detalhes__grid h4 { font-size: 1.2rem; }
    
    /* --- FEEDBACKS --- */
    .card-feedback { width: 380px; }
    .scroller[data-animated="true"] .scroller__inner { animation-duration: 60s; } /* Mais lento no desktop */
    
    /* --- LOCALIZAÇÃO --- */
    .map-container { max-width: 100%; } /* Ocupa a largura total do controle_geral */

    /* --- RODAPÉ --- */
    .site-footer__container { display: flex; justify-content: space-between; align-items: center; }
}

/* --- Breakpoint: Desktops Grandes (>= 1200px) --- */
@media (min-width: 1200px) {
    /* --- SEÇÃO HERO --- */
    .secao-principal__foto { max-width: 250px; }
    .nome.nayra { font-size: 3rem; }
    .nome.ananias { font-size: 4rem; }
    .secao-principal__titulo-impacto { font-size: 1.5rem; }

    /* --- SEÇÃO DE AGENDAMENTO --- */
    .agendamento__card-container { max-width: 1100px; }
    .agendamento__conteudo { padding: 3.5rem; }
}


/* --- Breakpoint: Desktops MUITO Grandes / TVs (>= 1600px) --- */
@media (min-width: 1600px) {
    /* --- SEÇÃO HERO --- */
    .secao-principal__fundo { height: 910px; }
    .secao-principal__fundo__paragrafo { font-size: 65px; }
    .secao-principal__foto { max-width: 300px; }
    .nome.nayra { font-size: 3.5rem; }
    .nome.ananias { font-size: 5rem; }
    .secao-principal__titulo-impacto { font-size: 1.8rem; }

    /* --- SEÇÃO DE AGENDAMENTO --- */
    .agendamento__card-container { max-width: 1200px; }
    .agendamento__imagem-wrapper img { min-height: 620px; }
    .agendamento__conteudo { padding: 4rem }
}