/* ============================================================
   BEAUTY SUMMIT — Folha de Estilos Principal
   Versão: 1.0
   ============================================================ */


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

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

:root {
    /* === Design System Beauty Summit === */

    /* Cores Primárias */
    --color-primary:          #800020;
    --color-primary-dark:     #600018;
    --color-secondary:        #D4A574;
    --color-secondary-light:  #e8c99a;
    --color-secondary-dark:   #b8885a;

    /* Aliases (compatibilidade header) */
    --color-gold:        #D4A574;
    --color-gold-light:  #e8c99a;
    --color-gold-dark:   #b8885a;

    /* Neutros */
    --color-black:       #1D1E18;
    --color-dark:        #1D1E18;
    --color-dark-soft:   #2a2b25;
    --color-white:       #ffffff;
    --color-white-soft:  #FFEBF0;
    --color-text:        #1D1E18;
    --color-text-muted:  #777777;

    /* Tipografia */
    --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:     'Inter', Arial, Helvetica, sans-serif;

    /* Layout */
    --header-height:     80px;
    --container-width:   1280px;
    --container-padding: 2rem;

    /* Efeitos */
    --transition:        0.3s ease;
    --shadow-soft:       0 4px 24px rgba(0, 0, 0, 0.14);
    --shadow-gold:       0 4px 20px rgba(212, 165, 116, 0.35);
    --shadow-primary:    0 4px 20px rgba(128, 0, 32, 0.4);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}


/* ============================================================
   2. HEADER
   ============================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Scroll em seções escuras — tênue, glass puro */
.header.scrolled {
    background-color: rgba(13, 13, 13, 0.08);
    border-bottom-color: rgba(212, 165, 116, 0.08);
}

/* Header sobre seção clara — fundo escuro suficiente para legibilidade */
.header.header--dark-bg {
    background-color: rgba(13, 13, 13, 0.80);
    box-shadow: 0 2px 28px rgba(0, 0, 0, 0.30);
    border-bottom-color: rgba(212, 165, 116, 0.22);
}

/* Quando o menu mobile está aberto: reforça o header para mesmo tom do menu */
.header:has(.header__mobile-menu.is-open) {
    background-color: rgba(20, 3, 8, 0.86);
    border-bottom-color: rgba(212, 165, 116, 0.18);
}

/* Container interno do header */
.header__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}


/* ---- Logo ---- */

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: opacity var(--transition);
}

.header__logo:hover {
    opacity: 0.88;
}

/* Quando o logo real (imagem) for inserido */
.header__logo-img {
    height: 48px;
    width: auto;
}

/* Logo SVG oficial */
.header__logo-svg {
    height: 60px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.footer__logo-svg {
    height: 54px;
    width: auto;
    display: block;
}

/* Logo em tipografia (placeholder até o logo real) */
.header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    user-select: none;
}

.header__logo-beauty {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.header__logo-summit {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-white);
    line-height: 1;
}


/* ---- Navegação Desktop ---- */

.header__nav {
    display: flex;
    align-items: center;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header__nav-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    transition: color var(--transition);
}

/* Linha dourada no hover */
.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1.5px;
    background-color: var(--color-gold);
    border-radius: 2px;
    transition: width var(--transition);
}

.header__nav-link:hover {
    color: var(--color-white);
}

.header__nav-link:hover::after {
    width: calc(100% - 2rem);
}

/* CTA: Garantir meu Ingresso */
.header__nav-link--cta {
    background: linear-gradient(130deg, var(--color-gold-dark) 0%, var(--color-gold) 55%, var(--color-gold-light) 100%);
    color: var(--color-dark) !important;
    font-weight: 700;
    padding: 0.55rem 1.3rem;
    border-radius: 50px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 14px rgba(212, 165, 116, 0.28);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.header__nav-link--cta::after {
    display: none;
}

.header__nav-link--cta:hover {
    color: var(--color-dark) !important;
    filter: brightness(1.08);
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}

.header__nav-link--cta:active {
    transform: translateY(0);
}


/* ---- Botão Hambúrguer ---- */

.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background-color var(--transition);
}

.header__hamburger:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.header__hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
}

/* Animação para "X" quando aberto */
.header__hamburger.is-active .header__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header__hamburger.is-active .header__hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.header__hamburger.is-active .header__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ---- Menu Mobile ---- */

.header__mobile-menu {
    display: none;
    overflow: hidden;
    /* Tom quente escuro-carmim — deixa a cor do herói sangrar levemente,
       criando continuidade visual com a barra de nav acima */
    background: rgba(20, 3, 8, 0.86);
    /* Sem backdrop-filter próprio: evita duplo-blur sobre o do header pai */
    border-top: none;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        transform 0.28s ease;
}

.header__mobile-menu.is-open {
    max-height: 480px;
    opacity: 1;
    transform: translateY(0);
}

.header__mobile-list {
    padding: 0.5rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.header__mobile-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.header__mobile-item:last-child {
    border-bottom: none;
    padding-top: 1rem;
    margin-top: 0.25rem;
}

.header__mobile-link {
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.80rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    padding: 1rem 0;
    transition: color var(--transition);
    gap: 0;
}

.header__mobile-link::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    border-radius: 2px;
    transition: width 0.20s ease, margin-right 0.20s ease;
    flex-shrink: 0;
    margin-right: 0;
}

.header__mobile-link:hover {
    color: var(--color-gold-light);
}

.header__mobile-link:hover::before {
    width: 12px;
    margin-right: 0.5rem;
}

/* CTA mobile */
.header__mobile-link--cta {
    display: block;
    text-align: center;
    background: linear-gradient(130deg, var(--color-gold-dark) 0%, var(--color-gold) 55%, var(--color-gold-light) 100%);
    color: var(--color-dark) !important;
    font-weight: 700;
    padding: 0.85rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 2px 14px rgba(212, 165, 116, 0.25);
    transition: filter var(--transition), box-shadow var(--transition);
}

.header__mobile-link--cta::before { display: none; }

.header__mobile-link--cta:hover {
    color: var(--color-dark) !important;
    filter: brightness(1.08);
    box-shadow: var(--shadow-gold);
}


/* ============================================================
   3. MAIN
   ============================================================ */

.main {
    /* Sem margin-top: a hero sobe por baixo do header fixo,
       fornecendo conteúdo de fundo para o backdrop-filter do header */
}


/* ============================================================
   4. HERO
   ============================================================ */

.hero {
    background-color: var(--color-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Vídeo de fundo */
.hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* Overlay escuro sobre o vídeo — lado esquerdo mais escuro (legibilidade do texto)
   → lado direito mais transparente (elemento do vídeo visível) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 55% at 95% 55%, rgba(128, 0, 32, 0.18) 0%, transparent 65%),
        linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.0) 100%);
    z-index: 1;
}

/* Linha dourada decorativa na base da seção */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 165, 116, 0.35) 30%, rgba(212, 165, 116, 0.35) 70%, transparent 100%);
    z-index: 2;
}

.hero__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 5rem var(--container-padding);
    padding-top: calc(var(--header-height) + 3rem);
    display: flex;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    z-index: 2;
}


/* ---- Conteúdo ---- */

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 560px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-secondary);
    padding: 0.35rem 1rem;
    border: 1px solid rgba(212, 165, 116, 0.4);
    border-radius: 50px;
    width: fit-content;
}

.hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    /* Efeito gold com shimmer animado */
    background: linear-gradient(
        90deg,
        #b8865a 0%,
        #D4A574 20%,
        #f7dfb0 40%,
        #fff4d6 50%,
        #f7dfb0 60%,
        #D4A574 80%,
        #b8865a 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #D4A574;
    animation: hero-gold-shimmer 5s linear infinite;
}

.hero__subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

.hero__date {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 0.8rem 1.1rem;
    width: fit-content;
}

.hero__date-icon {
    flex-shrink: 0;
    color: var(--color-secondary);
    margin-top: 1px;
}

.hero__ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.25rem;
}

@keyframes hero-gold-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}


/* ============================================================
   5. BOTÕES (sistema global)
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 50px;
    padding: 0.9rem 2.1rem;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Preenchido — cor primária (vinho) */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(128, 0, 32, 0.38);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 6px 28px rgba(128, 0, 32, 0.55);
}

/* Preenchido — cor secundária (dourado) */
.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    border-color: var(--color-secondary);
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.38);
}

.btn--secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    box-shadow: 0 6px 28px rgba(212, 165, 116, 0.55);
}


@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.8); }
}


/* ============================================================
   6. RESPONSIVIDADE
   ============================================================ */

/* ---- Tablet / Mobile (≤ 980px) ---- */
@media (max-width: 980px) {

    /* Header */
    .header__nav        { display: none; }
    .header__hamburger  { display: flex; }
    .header__mobile-menu { display: block; }

    /* Hero */
    .hero__container {
        padding: 3.5rem var(--container-padding) 4rem;
        padding-top: calc(var(--header-height) + 2rem);
        justify-content: flex-start;
    }

    .hero__content {
        max-width: 100%;
    }
}

/* ---- Mobile médio (≤ 640px) ---- */
@media (max-width: 640px) {

    :root {
        --container-padding: 1.35rem;
    }

    .hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        text-align: center;
        padding: 0.9rem 1.5rem;
    }

    .hero__date {
        width: 100%;
    }

    /* Vídeo: assunto do vídeo alinhado à direita */
    .hero__bg-video {
        object-position: 68% center;
    }
}

/* ---- Smartphones pequenos (≤ 480px) ---- */
@media (max-width: 480px) {
    :root {
        --container-padding: 1.5rem;
        --header-height: 68px;
    }

    .header__logo-summit {
        font-size: 1.4rem;
    }

    .header__mobile-list {
        padding: 0.75rem 1.5rem 1.5rem;
    }

    .hero__headline {
        font-size: 1.8rem;
    }

    /* Vídeo: empurra o assunto para a direita em mobile */
    .hero__bg-video {
        object-position: 72% center;
    }

    /* Overlay mais suave em mobile para o assunto do vídeo aparecer */
    .hero::before {
        background:
            radial-gradient(ellipse 80% 55% at 100% 55%, rgba(128, 0, 32, 0.15) 0%, transparent 70%),
            linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.52) 38%, rgba(0,0,0,0.10) 72%, rgba(0,0,0,0.0) 100%);
    }
}


/* ============================================================
   7. SEÇÃO MARCAS
   ============================================================ */

.brands {
    background-color: var(--color-black); /* #1D1E18 */
    padding: 6rem 0 5rem;
    overflow: hidden;
    position: relative;
}

.brands__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}


/* ---- Heading ---- */

.brands__heading {
    text-align: center;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.brands__title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.brands__title em {
    font-style: italic;
    color: var(--color-secondary);
}

.brands__subtitle {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.50);
}


/* ---- Carousel de 3 posições ---- */

.brands__carousel {
    width: 100%;
    height: 260px;
    position: relative;
    overflow: hidden;
}

.brands__carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ---- Card base ---- */

.brands__card {
    position: absolute;
    top: 50%;
    width: 260px;
    height: 185px;
    border: 1px solid rgba(212, 165, 116, 0.45);
    border-radius: 16px;
    background: rgba(29, 30, 24, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition:
        left     0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity  0.80s ease,
        filter   0.80s ease,
        box-shadow 0.80s ease;
}

.brands__card--center {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0.45;
    filter: blur(5px);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.30), 0 8px 48px rgba(212, 165, 116, 0.20);
    z-index: 3;
}

.brands__card--side-left {
    left: calc(50% - 153px);
    transform: translateX(-50%) translateY(-50%) scale(0.78);
    opacity: 0.55;
    filter: blur(5px);
    z-index: 2;
}

.brands__card--side-right {
    left: calc(50% + 153px);
    transform: translateX(-50%) translateY(-50%) scale(0.78);
    opacity: 0.55;
    filter: blur(5px);
    z-index: 2;
}

.brands__card--far-left {
    left: calc(50% - 306px);
    transform: translateX(-50%) translateY(-50%) scale(0.60);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.brands__card--far-right {
    left: calc(50% + 306px);
    transform: translateX(-50%) translateY(-50%) scale(0.60);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---- Label "Em breve" flutuando SOBRE o carousel ---- */

.brands__soon-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    /* Gold shimmer via background-clip: text */
    background: linear-gradient(90deg, #b8865a 0%, #D4A574 20%, #f7dfb0 40%, #fff4d6 50%, #f7dfb0 60%, #D4A574 80%, #b8865a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-gold-shimmer 4s linear infinite;
    /* Tipografia */
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}


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

.brands__cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 165, 116, 0.18);
    width: 100%;
    max-width: 720px;
    text-align: center;
}

.brands__cta-title {
    font-family: var(--font-serif);
    font-size: clamp(1.85rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-white);
    letter-spacing: -0.02em;
}


/* ---- Responsividade ---- */

@media (max-width: 768px) {
    .brands__carousel {
        height: 220px;
    }

    .brands__card {
        width: 210px;
        height: 150px;
    }

    .brands__card--side-left {
        left: calc(50% - 124px);
    }

    .brands__card--side-right {
        left: calc(50% + 124px);
    }

    .brands__card--far-left {
        left: calc(50% - 248px);
    }

    .brands__card--far-right {
        left: calc(50% + 248px);
    }
}

@media (max-width: 480px) {
    .brands {
        padding: 4rem 0 3.5rem;
    }

    .brands__container {
        gap: 2.5rem;
    }

    .brands__carousel {
        height: 190px;
    }

    .brands__card {
        width: 170px;
        height: 120px;
    }

    .brands__card--side-left {
        left: calc(50% - 100px);
        opacity: 0.45;
    }

    .brands__card--side-right {
        left: calc(50% + 100px);
        opacity: 0.45;
    }

    .brands__card--far-left {
        left: calc(50% - 200px);
    }

    .brands__card--far-right {
        left: calc(50% + 200px);
    }
}


/* ============================================================
   8. SEÇÃO PROVA SOCIAL
   ============================================================ */

.proof {
    background-color: var(--color-primary);
    background-image:
        radial-gradient(ellipse 55% 40% at 100% 0%,   rgba(0, 0, 0, 0.38) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 0%   100%, rgba(0, 0, 0, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% -10%,  rgba(255, 255, 255, 0.09) 0%, transparent 55%),
        radial-gradient(circle 240px at 78% 55%,      rgba(212, 165, 116, 0.11) 0%, transparent 70%),
        radial-gradient(circle 170px at 16% 42%,      rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Linha decorativa no topo */
.proof::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 165, 116, 0.3) 30%, rgba(212, 165, 116, 0.3) 70%, transparent 100%);
}

.proof__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    z-index: 1;
}


/* ---- Heading ---- */

.proof__heading {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 680px;
}

.proof__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
}

.proof__subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(212, 165, 116, 0.70);
}


/* ---- Grid de cards ---- */

.proof__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: start;
}


/* ---- Card base ---- */

.proof__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.75rem 2.25rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 165, 116, 0.18);
    border-radius: 16px;
    overflow: hidden;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.proof__card:hover {
    background: rgba(0, 0, 0, 0.40);
    border-color: rgba(212, 165, 116, 0.40);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40);
}

/* Card em destaque (Card 2) — mesma aparência dos demais */
.proof__card--highlight {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(212, 165, 116, 0.35);
}

.proof__card--highlight:hover {
    background: rgba(0, 0, 0, 0.40);
    border-color: rgba(212, 165, 116, 0.55);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40);
}

/* Acento decorativo no canto inferior direito */
.proof__card-accent {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.proof__card--highlight .proof__card-accent {
    background: radial-gradient(circle, rgba(212, 165, 116, 0.12) 0%, transparent 70%);
}


/* ---- Ícone ---- */

.proof__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.18);
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: background-color var(--transition), border-color var(--transition);
}

.proof__card--highlight .proof__card-icon {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.18);
    color: var(--color-secondary);
}

.proof__card:hover .proof__card-icon {
    background: rgba(212, 165, 116, 0.1);
    border-color: rgba(212, 165, 116, 0.3);
}


/* ---- Tag ---- */

.proof__card-tag {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
    opacity: 0.8;
}


/* ---- Título do card ---- */

.proof__card-title {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-white);
    letter-spacing: -0.01em;
}


/* ---- Subtexto do card ---- */

.proof__card-text {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.58);
}

.proof__card--highlight .proof__card-text {
    color: rgba(255, 255, 255, 0.72);
}


/* ---- Responsividade ---- */

@media (max-width: 1024px) {
    .proof__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .proof {
        padding: 4rem 0;
    }

    .proof__grid {
        grid-template-columns: 1fr;
    }

    .proof__card {
        padding: 1.6rem 1.4rem 1.8rem;
    }

    .proof__heading {
        max-width: 100%;
    }
}


/* ============================================================
   9. SEÇÃO RETOMADA DE CONVERSÃO
   ============================================================ */

.conversion {
    background-color: #FAFAFA;
    background-image:
        radial-gradient(ellipse 55% 60% at -8% 50%,   rgba(128, 0, 32, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 108% 50%,  rgba(128, 0, 32, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 100%,  rgba(128, 0, 32, 0.05) 0%, transparent 55%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Detalhe decorativo de fundo */
.conversion::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(128, 0, 32, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.conversion__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}


/* ---- Heading ---- */

.conversion__heading {
    text-align: center;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.conversion__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.conversion__subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(128, 0, 32, 0.65);
}


/* ---- Split (2 cards + divisor) ---- */

.conversion__split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 960px;
}


/* ---- Cards ---- */

.conversion__card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.75rem 2.5rem 2.5rem;
    border-radius: 20px;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}

.conversion__card:hover {
    transform: translateY(-4px);
}

/* Card B2B — fundo escuro */
.conversion__card--b2b {
    background: var(--color-black);
    border: 1px solid rgba(212, 165, 116, 0.35);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.conversion__card--b2b:hover {
    box-shadow: 0 20px 60px rgba(212, 165, 116, 0.20);
}

/* Card B2C — fundo vinho */
.conversion__card--b2c {
    background: var(--color-primary);
    border: 1px solid rgba(212, 165, 116, 0.40);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20);
}

.conversion__card--b2c:hover {
    box-shadow: 0 20px 60px rgba(212, 165, 116, 0.25);
}


/* ---- Badge topo do card ---- */

.conversion__card-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
    background: rgba(212, 165, 116, 0.1);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 50px;
    padding: 0.3rem 0.85rem;
    width: fit-content;
}

.conversion__card-badge--light {
    color: var(--color-primary);
    background: rgba(128, 0, 32, 0.06);
    border-color: rgba(128, 0, 32, 0.2);
}


/* ---- Ícone ---- */

.conversion__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    flex-shrink: 0;
}

.conversion__card--b2b .conversion__card-icon {
    background: rgba(212, 165, 116, 0.12);
    border: 1px solid rgba(212, 165, 116, 0.30);
    color: var(--color-secondary);
}

.conversion__card--b2c .conversion__card-icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}


/* ---- Título do card ---- */

.conversion__card-title {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.conversion__card--b2b .conversion__card-title {
    color: var(--color-white);
}

.conversion__card--b2c .conversion__card-title {
    color: var(--color-white);
}


/* ---- Pills de benefícios ---- */

.conversion__card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.conversion__pill {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    white-space: nowrap;
    /* Default: pills para card escuro */
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pills para card claro */
.conversion__pill--dark {
    background: rgba(29, 30, 24, 0.06);
    color: rgba(29, 30, 24, 0.65);
    border: 1px solid rgba(29, 30, 24, 0.1);
}


/* ---- CTA do card ---- */

.conversion__card-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

/* Variante outline sobre fundo escuro */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn--outline-light:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Sólido branco — card vinho */
.btn--white {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.btn--white:hover {
    background-color: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
}


/* ---- Divisor central "ou" ---- */

.conversion__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}

.conversion__divider-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FAFAFA;
    border: 1px solid rgba(128, 0, 32, 0.20);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ---- Responsividade ---- */

@media (max-width: 860px) {
    .conversion__split {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .conversion__divider {
        padding: 1rem 0;
        flex-direction: row;
    }

    .conversion__divider::before,
    .conversion__divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(29, 30, 24, 0.12);
    }

    .conversion__divider-text {
        margin: 0 1rem;
    }
}

@media (max-width: 480px) {
    .conversion {
        padding: 4rem 0;
    }

    .conversion__card {
        padding: 2rem 1.5rem;
    }

    .conversion__split {
        max-width: 100%;
    }
}


/* ============================================================
   10. SEÇÃO INFRAESTRUTURA
   ============================================================ */

.infra {
    background-color: var(--color-black); /* #1D1E18 */
    padding: 6rem 0;
    position: relative;
}

.infra__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* ---- Heading ---- */

.infra__heading {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.infra__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
}

.infra__subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(212, 165, 116, 0.65);
}

/* ---- Grid ---- */

.infra__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---- Item ---- */

.infra__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 1.25rem 1.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.12);
    border-radius: 16px;
    cursor: default;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.infra__item:hover {
    border-color: rgba(212, 165, 116, 0.35);
    box-shadow: 0 8px 32px rgba(212, 165, 116, 0.10);
    transform: translateY(-3px);
}

.infra__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(212, 165, 116, 0.10);
    border: 1px solid rgba(212, 165, 116, 0.22);
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: background-color var(--transition), border-color var(--transition);
}

.infra__item:hover .infra__item-icon {
    background: rgba(212, 165, 116, 0.18);
    border-color: rgba(212, 165, 116, 0.40);
}

.infra__item-label {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: 0.01em;
}

/* ---- Responsividade ---- */

@media (max-width: 1024px) {
    .infra__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .infra {
        padding: 4rem 0;
    }

    .infra__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 360px) {
    .infra__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   11. SEÇÃO FAQ
   ============================================================ */

.faq {
    background-color: var(--color-primary); /* #800020 */
    background-image:
        radial-gradient(ellipse 55% 45% at 100% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 0%   0%,   rgba(255, 255, 255, 0.09) 0%, transparent 55%),
        radial-gradient(circle 240px at 28% 60%,      rgba(0, 0, 0, 0.20) 0%, transparent 65%),
        radial-gradient(circle 160px at 82% 18%,      rgba(212, 165, 116, 0.10) 0%, transparent 70%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.faq__container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    position: relative;
    z-index: 1;
}

/* ---- Heading ---- */

.faq__heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.faq__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
}

.faq__subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: rgba(212, 165, 116, 0.70);
    line-height: 1.6;
}

/* ---- Accordion ---- */

.faq__accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(212, 165, 116, 0.22);
    border-radius: 16px;
    overflow: hidden;
}

.faq__item {
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}

.faq__item:last-child {
    border-bottom: none;
}

/* ---- Botão pergunta ---- */

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.90);
    transition: background-color var(--transition), color var(--transition);
}

.faq__question:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--color-white);
}

.faq__question[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.18);
    color: var(--color-secondary);
}

/* Ícone "+" / "×" */
.faq__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(212, 165, 116, 0.30);
    flex-shrink: 0;
    position: relative;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-secondary);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

/* Linha horizontal */
.faq__icon::before {
    width: 12px;
    height: 1.5px;
}

/* Linha vertical */
.faq__icon::after {
    width: 1.5px;
    height: 12px;
}

/* Estado aberto — vira "×" */
.faq__question[aria-expanded="true"] .faq__icon {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(212, 165, 116, 0.55);
    transform: rotate(45deg);
}

/* ---- Resposta ---- */

.faq__answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
    padding: 0 1.75rem;
}

.faq__answer:not([hidden]) {
    max-height: 800px;
    opacity: 1;
    padding: 1.25rem 1.75rem 1.75rem;
    background: rgba(0, 0, 0, 0.18);
}

.faq__answer[hidden] {
    display: block !important; /* override hidden para animação funcionar */
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
}

.faq__answer p {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.75rem;
}

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

.faq__answer ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq__answer ul li {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    padding-left: 1.1rem;
    position: relative;
}

.faq__answer ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    opacity: 0.7;
}

/* ---- Responsividade ---- */

@media (max-width: 640px) {
    .faq {
        padding: 4rem 0;
    }

    .faq__question {
        padding: 1.2rem 1.25rem;
        font-size: 0.88rem;
    }

    .faq__answer {
        padding: 0 1.25rem;
    }

    .faq__answer:not([hidden]) {
        padding: 0 1.25rem 1.25rem;
    }
}


/* ============================================================
   12. SEÇÃO CONTATO
   ============================================================ */

.contact {
    background-color: #FAFAFA;
    background-image:
        radial-gradient(ellipse 55% 60% at -8% 50%,   rgba(128, 0, 32, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 108% 50%,  rgba(128, 0, 32, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 100%,  rgba(128, 0, 32, 0.05) 0%, transparent 55%);
    padding: 6rem 0;
}

.contact__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    position: relative;
    z-index: 1;
}

.contact__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

/* ---- Grid 2 colunas ---- */

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 4rem;
    align-items: start;
}

/* ---- Coluna 1: Info ---- */

.contact__info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

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

.contact__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(128, 0, 32, 0.08);
    border: 1px solid rgba(128, 0, 32, 0.16);
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact__info-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact__info-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact__info-value {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    transition: color var(--transition);
}

.contact__info-value:hover {
    color: var(--color-primary);
}

/* Ícones de redes sociais na seção de contato */

.contact__socials {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.contact__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(29, 30, 24, 0.07);
    border: 1px solid rgba(29, 30, 24, 0.1);
    color: var(--color-black);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.contact__social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ---- Apoiadores ---- */

.contact__supporters {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(29, 30, 24, 0.10);
}

.contact__supporters-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.contact__supporters-img {
    height: 100px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    opacity: 0.80;
    filter: grayscale(25%);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.contact__supporters-img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* ---- Coluna 2: Mapa + Formulário ---- */

.contact__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact__map-wrapper {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(29, 30, 24, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.contact__map {
    display: block;
    width: 100%;
    border: 0;
}

/* ---- Formulário ---- */

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact__form-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-black);
}

.contact__form-label span[aria-hidden] {
    color: var(--color-primary);
    margin-left: 1px;
}

.contact__form-optional {
    font-weight: 400;
    color: var(--color-text-muted);
}

.contact__form-input,
.contact__form-textarea {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-black);
    background: #ffffff;
    border: 1.5px solid rgba(29, 30, 24, 0.15);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    width: 100%;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.contact__form-input::placeholder,
.contact__form-textarea::placeholder {
    color: rgba(29, 30, 24, 0.3);
}

.contact__form-input:focus,
.contact__form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.contact__form-textarea {
    resize: vertical;
    min-height: 110px;
}

/* ---- Checkbox customizado ---- */

.contact__form-checkbox-group {
    margin-top: 0.25rem;
}

.contact__form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.contact__form-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact__form-checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(29, 30, 24, 0.25);
    background: #ffffff;
    flex-shrink: 0;
    transition: border-color var(--transition), background-color var(--transition);
}

.contact__form-checkbox-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
    transition: opacity var(--transition);
}

.contact__form-checkbox:checked + .contact__form-checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.contact__form-checkbox:checked + .contact__form-checkbox-custom::after {
    opacity: 1;
}

.contact__form-checkbox:focus-visible + .contact__form-checkbox-custom {
    box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.15);
}

.contact__form-checkbox-text {
    font-family: var(--font-sans);
    font-size: 0.83rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ---- Botão submit ---- */

.contact__form-submit {
    margin-top: 0.25rem;
    align-self: flex-start;
    padding: 0.9rem 2rem;
}

/* ---- Feedback do formulário ---- */

.contact__form-feedback {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 1.2em;
}

.contact__form-feedback.is-success { color: #217a3c; }
.contact__form-feedback.is-error   { color: var(--color-primary); }

/* ---- Estados animados do botão de envio ---- */

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.65s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.contact__form-submit.btn--state-loading,
.contact__form-submit.btn--state-success,
.contact__form-submit.btn--state-error,
.contact__form-submit.btn--state-warning {
    width: 100% !important;
    align-self: stretch !important;
    justify-content: center;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.contact__form-submit.btn--state-loading {
    background-color: #b8960c !important;
    border-color: #b8960c !important;
    color: var(--color-black) !important;
    cursor: wait;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(184, 150, 12, 0.38);
}

.contact__form-submit.btn--state-loading .btn-spinner {
    border-color: rgba(29, 30, 24, 0.25);
    border-top-color: var(--color-black);
}

.contact__form-submit.btn--state-success {
    background-color: #1f7a40 !important;
    border-color: #1f7a40 !important;
    color: var(--color-white) !important;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(31, 122, 64, 0.38);
}

.contact__form-submit.btn--state-error {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.contact__form-submit.btn--state-warning {
    background-color: var(--color-black) !important;
    border-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

/* ---- Responsividade ---- */

@media (max-width: 980px) {
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 640px) {
    .contact {
        padding: 4rem 0;
    }

    .contact__form-row {
        grid-template-columns: 1fr;
    }

    .contact__form-submit {
        align-self: stretch;
        justify-content: center;
    }
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.footer {
    background-color: var(--color-black);
    border-top: 1px solid rgba(212, 165, 116, 0.15);
    padding: 3.5rem 0 2rem;
}

.footer__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ---- Linha 1 — Logo ---- */

.footer__top {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ---- Linha 2 — Navegação + Sociais ---- */

.footer__middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer__logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    transition: opacity var(--transition);
}

.footer__logo:hover {
    opacity: 0.8;
}

.footer__logo-beauty {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(212, 165, 116, 0.6);
}

.footer__logo-summit {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: 0.03em;
}

.footer__copy {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}

/* ---- Linha 2 — Navegação ---- */

.footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__nav-link {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    padding: 0.25rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    transition: color var(--transition);
}

.footer__nav-list li:first-child .footer__nav-link {
    padding-left: 0;
}

.footer__nav-list li:last-child .footer__nav-link {
    border-right: none;
}

.footer__nav-link:hover {
    color: var(--color-secondary);
}

/* ---- Divisor ---- */

.footer__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0;
}

/* ---- Linha final — Legais + Copyright ---- */

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__legal-link {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    padding: 0.2rem 0.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    transition: color var(--transition);
}

.footer__legal li:first-child .footer__legal-link {
    padding-left: 0;
}

.footer__legal li:last-child .footer__legal-link {
    border-right: none;
}

.footer__legal-link:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ---- Redes sociais do footer ---- */

.footer__socials {
    display: flex;
    gap: 0.6rem;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.footer__social-link:hover {
    background: rgba(212, 165, 116, 0.12);
    border-color: rgba(212, 165, 116, 0.3);
    color: var(--color-secondary);
    transform: translateY(-2px);
}

/* ---- Responsividade ---- */

@media (max-width: 640px) {
    .footer__top {
        justify-content: center;
    }

    .footer__middle {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        text-align: center;
    }

    .footer__nav-list {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .footer__nav-link {
        padding: 0.4rem 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-align: center;
    }

    .footer__nav-list li:last-child .footer__nav-link {
        border-bottom: none;
    }

    .footer__socials {
        justify-content: center;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer__legal {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .footer__legal-link {
        padding: 0.3rem 0;
        border-right: none;
        text-align: center;
    }
}


/* ============================================================
   14. LOGO — ANIMAÇÃO DE ENTRADA
   ============================================================ */

/* transform-box e transform-origin só no ícone — os <text> já têm
   transform SVG próprio; CSS transform os sobrescreveria e os tiraria do lugar */
.logo-svg .bsl-icon {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* --- Estado inicial: todos os elementos invisíveis/ocultos --- */

.logo-svg .bsl-icon {
    opacity: 0;
    transform: scale(0.82) translateY(10px);
}

.logo-svg .bsl-line-top,
.logo-svg .bsl-line-bot-l {
    clip-path: inset(0 100% 0 0);
}

.logo-svg .bsl-line-bot-r {
    clip-path: inset(0 0 0 100%);
}

/* Texto: apenas opacity — sem CSS transform para não conflitar com o
   atributo transform="translate(...)" já presente nos elementos <text> do SVG */
.logo-svg .bsl-text-main {
    opacity: 0;
}

.logo-svg .bsl-text-sc {
    opacity: 0;
}

/* --- Animação dispara quando .logo-animated é adicionada --- */

/* Estágio 1 — Ícone surge com bounce */
.logo-svg.logo-animated .bsl-icon {
    animation: bsl-icon-reveal 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s both;
}

/* Estágio 2 — Linha superior se desenha da esquerda para a direita */
.logo-svg.logo-animated .bsl-line-top {
    animation: bsl-line-ltr 1.0s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

/* Estágio 3 — Texto principal aparece com fade */
.logo-svg.logo-animated .bsl-text-main {
    animation: bsl-text-fade 1.0s ease-out 1.7s both;
}

/* Estágio 4 — Linhas inferiores se abrem de dentro para fora */
.logo-svg.logo-animated .bsl-line-bot-l {
    animation: bsl-line-ltr 0.8s ease-out 2.0s both;
}

.logo-svg.logo-animated .bsl-line-bot-r {
    animation: bsl-line-rtl 0.8s ease-out 2.0s both;
}

/* Estágio 5 — "sc" aparece com fade */
.logo-svg.logo-animated .bsl-text-sc {
    animation: bsl-text-fade 0.75s ease-out 2.25s both;
}

/* Estágio 6 — Shimmer dourado animando o fill dos elementos SVG da logo. */

/* Header logo — elementos gold (.cls-1 = rects/paths, .cls-2 = texto principal, .cls-3 = texto "sc") */
.header__logo-svg .cls-1,
.header__logo-svg .cls-2,
.header__logo-svg .cls-3 {
    animation: bsl-logo-fill-shimmer 8s ease-in-out 3.5s infinite;
}

/* Footer logo — mesmos elementos com prefixo .fls- */
.footer__logo-svg .fls-1,
.footer__logo-svg .fls-2,
.footer__logo-svg .fls-3 {
    animation: bsl-logo-fill-shimmer 8s ease-in-out 5s infinite;
}

/* --- @keyframes --- */

@keyframes bsl-logo-fill-shimmer {
    0%, 100% { fill: #b8865a; }
    35%       { fill: #D4A574; }
    50%       { fill: #fff4d6; }
    65%       { fill: #D4A574; }
}

@keyframes bsl-icon-reveal {
    0%   { opacity: 0; transform: scale(0.82) translateY(10px); }
    65%  { opacity: 1; transform: scale(1.05) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bsl-line-ltr {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

@keyframes bsl-line-rtl {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0%); }
}

/* opacity-only: evita conflito com o atributo transform SVG dos <text> */
@keyframes bsl-text-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bsl-sparkle {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.2; transform: scale(0.55); }
}

/* Remove sparkle loop — mantido apenas para compatibilidade com prefers-reduced-motion */

/* Respeita preferência do sistema por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .logo-svg.logo-animated .bsl-icon,
    .logo-svg.logo-animated .bsl-line-top,
    .logo-svg.logo-animated .bsl-line-bot-l,
    .logo-svg.logo-animated .bsl-line-bot-r,
    .logo-svg.logo-animated .bsl-spark-a,
    .logo-svg.logo-animated .bsl-spark-b {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    /* Texto: sem transform:none para não sobrescrever o atributo SVG */
    .logo-svg.logo-animated .bsl-text-main,
    .logo-svg.logo-animated .bsl-text-sc,
    .logo-svg .bsl-text-main,
    .logo-svg .bsl-text-sc {
        animation: none;
        opacity: 1;
    }
}

/* ============================================================
   ANIMAÇÕES BSL — Scroll Reveal, Hero Entrance, Typewriter
   ============================================================ */

/* ── Scroll Reveal ── */
.bsl-will-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.bsl-will-reveal.bsl-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .bsl-will-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Hero Entrance (CSS-only, fires on page load) ── */
@keyframes bsl-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Subpages (.page-hero__*) */
.page-hero__badge    { animation: bsl-fade-up 0.65s 0.06s cubic-bezier(0.22,1,0.36,1) both; }
.page-hero__title    { animation: bsl-fade-up 0.65s 0.18s cubic-bezier(0.22,1,0.36,1) both; }
.page-hero__subtitle { animation: bsl-fade-up 0.65s 0.30s cubic-bezier(0.22,1,0.36,1) both; }
.page-hero__meta     { animation: bsl-fade-up 0.65s 0.44s cubic-bezier(0.22,1,0.36,1) both; }
.page-hero__stats    { animation: bsl-fade-up 0.65s 0.50s cubic-bezier(0.22,1,0.36,1) both; }

/* Homepage hero (.hero__*) */
.hero__headline { animation: bsl-fade-up 0.68s 0.08s cubic-bezier(0.22,1,0.36,1) both; }
.hero__subtitle { animation: bsl-fade-up 0.68s 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.hero__ctas     { animation: bsl-fade-up 0.68s 0.36s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
    .page-hero__badge, .page-hero__title, .page-hero__subtitle,
    .page-hero__meta, .page-hero__stats,
    .hero__headline, .hero__subtitle, .hero__ctas {
        animation: none;
    }
}

/* ── Typewriter cursor span (v2) ── */
.bsl-tw__cursor {
    display: inline;
    color: var(--color-secondary);
    margin-left: 2px;
    font-weight: 300;
    font-style: normal;
    animation: bsl-blink 0.7s step-end infinite;
}
@keyframes bsl-blink { 50% { opacity: 0; } }