/*
 * Duda Flex - Design System Simplificado e Adaptado
 */

:root {
    /* ==========================================
       1. CORES (COLOR TOKENS - Duda Flex)
       ========================================== */
    --color-primary: #b90404;
    --color-primary-dark: #8a0303;
    --color-primary-deep: #520202;
    --color-primary-soft: rgba(185, 4, 4, 0.06);
    --color-primary-border: rgba(185, 4, 4, 0.15);

    --color-white: #ffffff;
    --color-off-white: #f8f7f6;
    --color-light: #efeeed;
    --color-mid: #d6d5d3;
    --color-dark: #1c1b1a;
    --color-dark-soft: #2e2d2c;

    /* Semântica de Cores */
    --color-bg-body: var(--color-white);
    --color-bg-surface: var(--color-white);
    --color-bg-alt: var(--color-off-white);
    --color-border: var(--color-mid);

    --color-text-main: var(--color-dark);
    --color-text-secondary: #6b6967;
    --color-text-muted: #9e9c9a;
    --color-text-white: var(--color-white);

    /* Cores Complementares */
    --color-primary-light: #e60000;
    --color-primary-bright: #ff4d4d;
    --color-shine: rgba(255, 255, 255, 0.4);
    --color-shadow-primary: rgba(185, 4, 4, 0.35);
    --color-icon-bg-light: rgba(255, 255, 255, 0.16);
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #20ba5a;
    --color-shadow-whatsapp: rgba(37, 211, 102, 0.3);

    /* ==========================================
       2. TIPOGRAFIA RESPONSIVA (TYPOGRAPHY TOKENS)
       ========================================== */
    --font-primary:
        "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;

    /* Font Sizes Responsivos (Fórmula clamp fluida) */
    --text-xs: clamp(0.7rem, 0.65rem + 0.15vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
    --text-lg: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
    --text-2xl: clamp(1.4rem, 1.3rem + 0.6vw, 1.8rem);
    --text-3xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.4rem);
    --text-4xl: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);

    --text-12: 12px;

    /* Pesos de Fonte */
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

    /* Alturas de Linha */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ==========================================
       3. ESPAÇAMENTO RESPONSIVO (SPACING TOKENS)
       ========================================== */
    --space-xs: clamp(4px, 1vw, 8px);
    --space-sm: clamp(8px, 1.5vw, 12px);
    --space-md: clamp(12px, 2vw, 20px);
    --space-lg: clamp(20px, 3vw, 32px);
    --space-xl: clamp(32px, 4vw, 48px);
    --space-xxl: clamp(48px, 6vw, 80px);

    /* Espaçamentos Fixos */
    --s4: 4px;
    --s8: 8px;
    --s12: 12px;
    --s16: 16px;
    --s20: 20px;
    --s24: 24px;
    --s28: 28px;
    --s32: 32px;
    --s36: 36px;
    --s40: 40px;
    --s44: 44px;
    --s48: 48px;
    --s56: 56px;
    --s64: 64px;
    --s80: 80px;
    --s96: 96px;

    /* Margens/Paddings das Laterais da Página */
    --page-pad-left: clamp(32px, 4.5vw, 72px);
    --page-pad-right: clamp(32px, 4.5vw, 72px);

    /* ==========================================
       4. RAIO DE BORDA (BORDER RADIUS)
       ========================================== */
    --radius-sm: 8px; /* radius-s */
    --radius-md: 16px; /* radius-m */
    --radius-lg: 24px; /* radius-l */
    --radius-full: 999px;

    /* ==========================================
       5. TRANSIÇÕES (TRANSITION TOKENS)
       ========================================== */
    --transition-fast: 150ms ease;
    --transition-quick: 180ms ease;
    --transition-normal: 220ms ease;
    --transition-moderate: 260ms ease;
    --transition-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-smooth: 420ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-super-slow: 1000ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ==========================================
       6. SOMBRAS (SHADOW TOKENS)
       ========================================== */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04); /* shadow-soft */
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06); /* shadow-elevated */
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08); /* shadow-float */

    /* ==========================================
       7. TOKENS GLOBAIS ADICIONAIS (GLOBAL TOKENS)
       ========================================== */

    /* Outros Tokens Globais */
    --letter-spacing-sm: 0.3px;
    --letter-spacing-md: 0.8px;
    --stroke-width-sm: 1.5;
    --stroke-width-md: 2;
    --border-width: 1px;
    --border-width-strong: 3px;
    --skew-angle: -20deg;
    --anim-duration-shift: 8s;
    --anim-duration-sweep: 6s;
    --brightness-hover: 1.15;

    /* Transparências e Efeitos */
    --color-white-translucent-18: rgba(255, 255, 255, 0.18);
    --color-white-translucent-28: rgba(255, 255, 255, 0.28);
    --color-white-translucent-42: rgba(255, 255, 255, 0.42);
    --color-white-translucent-72: rgba(255, 255, 255, 0.72);
    --color-white-translucent-76: rgba(255, 255, 255, 0.76);
    --color-white-translucent-82: rgba(255, 255, 255, 0.82);
    --blur-sm: 12px;

    /* Tokens de Cabeçalho e Drawer Mobile */
    --color-backdrop: rgba(28, 27, 26, 0.42);
    --drawer-width: min(84vw, 340px);
    --submenu-min-width: 180px;
    --header-z-index: 99;
    --drawer-z-index: 1000;
    --header-height-desktop: 88px;
    --header-height-mobile: 76px;
}

@media (max-width: 768px) {
    :root {
        --page-pad-left: 16px;
        --page-pad-right: 16px;
    }
}

/* ==========================================
   ESTILOS BASE
   ========================================== */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    line-height: var(--line-height-normal);
}

p {
    margin: 0 0 var(--space-md);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-main);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

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

/* ==========================================
   CONTEÚDO DO EDITOR (WordPress / Gutenberg) — GLOBAL
   ========================================== */
.entry-content,
.editor-content,
.page-content__editor,
.single-content__editor,
.about-intro__content .sec__desc,
.about-details__content .sec__desc {
    max-width: 880px;
    margin: 0 auto;
    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.entry-content > *,
.editor-content > *,
.page-content__editor > *,
.single-content__editor > *,
.about-intro__content .sec__desc > *,
.about-details__content .sec__desc > * {
    margin: 0 0 var(--space-md);
}

.entry-content > *:last-child,
.editor-content > *:last-child,
.page-content__editor > *:last-child,
.single-content__editor > *:last-child,
.about-intro__content .sec__desc > *:last-child,
.about-details__content .sec__desc > *:last-child {
    margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.page-content__editor h2,
.page-content__editor h3,
.page-content__editor h4,
.single-content__editor h2,
.single-content__editor h3,
.single-content__editor h4,
.about-intro__content .sec__desc h2,
.about-intro__content .sec__desc h3,
.about-intro__content .sec__desc h4,
.about-details__content .sec__desc h2,
.about-details__content .sec__desc h3,
.about-details__content .sec__desc h4 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
    margin: var(--space-lg) 0 var(--space-md);
}

.entry-content h2,
.editor-content h2,
.page-content__editor h2,
.single-content__editor h2,
.about-intro__content .sec__desc h2,
.about-details__content .sec__desc h2 {
    font-size: var(--text-2xl);
}

.entry-content h3,
.editor-content h3,
.page-content__editor h3,
.single-content__editor h3,
.about-intro__content .sec__desc h3,
.about-details__content .sec__desc h3 {
    font-size: var(--text-xl);
}

.entry-content h4,
.editor-content h4,
.page-content__editor h4,
.single-content__editor h4,
.about-intro__content .sec__desc h4,
.about-details__content .sec__desc h4 {
    font-size: var(--text-lg);
}

.entry-content ul,
.entry-content ol,
.editor-content ul,
.editor-content ol,
.page-content__editor ul,
.page-content__editor ol,
.single-content__editor ul,
.single-content__editor ol,
.about-intro__content .sec__desc ul,
.about-intro__content .sec__desc ol,
.about-details__content .sec__desc ul,
.about-details__content .sec__desc ol {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-lg);
}

.entry-content ul,
.editor-content ul,
.page-content__editor ul,
.single-content__editor ul,
.about-intro__content .sec__desc ul,
.about-details__content .sec__desc ul {
    list-style-type: disc;
}

.entry-content ol,
.editor-content ol,
.page-content__editor ol,
.single-content__editor ol,
.about-intro__content .sec__desc ol,
.about-details__content .sec__desc ol {
    list-style-type: decimal;
}

.entry-content li,
.editor-content li,
.page-content__editor li,
.single-content__editor li,
.about-intro__content .sec__desc li,
.about-details__content .sec__desc li {
    margin-bottom: var(--space-xs);
}

.entry-content li::marker,
.editor-content li::marker,
.page-content__editor li::marker,
.single-content__editor li::marker,
.about-intro__content .sec__desc li::marker,
.about-details__content .sec__desc li::marker {
    color: var(--color-primary);
}

.entry-content li:last-child,
.editor-content li:last-child,
.page-content__editor li:last-child,
.single-content__editor li:last-child,
.about-intro__content .sec__desc li:last-child,
.about-details__content .sec__desc li:last-child {
    margin-bottom: 0;
}

.entry-content a,
.editor-content a,
.page-content__editor a,
.single-content__editor a,
.about-intro__content .sec__desc a,
.about-details__content .sec__desc a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: opacity var(--transition-fast);
}

.entry-content a:hover,
.editor-content a:hover,
.page-content__editor a:hover,
.single-content__editor a:hover,
.about-intro__content .sec__desc a:hover,
.about-details__content .sec__desc a:hover {
    opacity: 0.8;
}

.entry-content strong,
.editor-content strong,
.page-content__editor strong,
.single-content__editor strong,
.about-intro__content .sec__desc strong,
.about-details__content .sec__desc strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.entry-content em,
.editor-content em,
.page-content__editor em,
.single-content__editor em,
.about-intro__content .sec__desc em,
.about-details__content .sec__desc em {
    font-style: italic;
}

.entry-content blockquote,
.editor-content blockquote,
.page-content__editor blockquote,
.single-content__editor blockquote,
.about-intro__content .sec__desc blockquote,
.about-details__content .sec__desc blockquote {
    border-left: var(--border-width-strong) solid var(--color-primary);
    padding-left: var(--space-md);
    margin: var(--space-md) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.entry-content img,
.editor-content img,
.page-content__editor img,
.single-content__editor img,
.about-intro__content .sec__desc img,
.about-details__content .sec__desc img {
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: var(--space-md) 0;
}

.entry-content figure,
.editor-content figure,
.page-content__editor figure,
.single-content__editor figure,
.about-intro__content .sec__desc figure,
.about-details__content .sec__desc figure {
    margin: var(--space-md) 0;
}

.entry-content figcaption,
.editor-content figcaption,
.page-content__editor figcaption,
.single-content__editor figcaption,
.about-intro__content .sec__desc figcaption,
.about-details__content .sec__desc figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-xs);
}

.entry-content table,
.editor-content table,
.page-content__editor table,
.single-content__editor table,
.about-intro__content .sec__desc table,
.about-details__content .sec__desc table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
}

.entry-content th,
.entry-content td,
.editor-content th,
.editor-content td,
.page-content__editor th,
.page-content__editor td,
.single-content__editor th,
.single-content__editor td,
.about-intro__content .sec__desc th,
.about-intro__content .sec__desc td,
.about-details__content .sec__desc th,
.about-details__content .sec__desc td {
    padding: var(--space-sm);
    border: var(--border-width) solid var(--color-mid);
    text-align: left;
}

.entry-content th,
.editor-content th,
.page-content__editor th,
.single-content__editor th,
.about-intro__content .sec__desc th,
.about-details__content .sec__desc th {
    font-weight: var(--font-weight-bold);
    background: var(--color-light);
    color: var(--color-text-main);
}

/* ==========================================
   ESTILOS DE SEÇÃO E CABEÇALHOS (.sec)
   ========================================== */
.section {
    padding-top: var(--s96);
    padding-bottom: var(--s96);
}

@media (max-width: 640px) {
    .section {
        padding-top: var(--s64);
        padding-bottom: var(--s64);
    }
}

.section-alt {
    background-color: var(--color-bg-alt);
}

.sec {
    display: flex;
    flex-direction: column;
    gap: var(--s12);
    max-width: 620px;
    text-align: left;
}

.sec__label {
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
}

.sec__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-none);
    color: var(--color-text-main);
}

.sec__desc {
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

/* ==========================================
   CLASSES UTILITÁRIAS
   ========================================== */

/* Container adaptado */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-pad-left);
    padding-right: var(--page-pad-right);
}

/* Flexbox */
.d-flex {
    display: flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-col {
    flex-direction: column;
}
.align-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}

/* Grid */
.grid {
    display: grid;
    gap: var(--space-md);
}
.grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Espaçamentos Dinâmicos */
.m-0 {
    margin: 0;
}
.mb-xs {
    margin-bottom: var(--space-xs);
}
.mb-sm {
    margin-bottom: var(--space-sm);
}
.mb-md {
    margin-bottom: var(--space-md);
}
.mb-lg {
    margin-bottom: var(--space-lg);
}
.mb-xl {
    margin-bottom: var(--space-xl);
}

.p-0 {
    padding: 0;
}
.py-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}
.py-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.py-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Compensação para cabeçalho fixo no topo da primeira seção da página */
.pt-first-section {
    padding-top: calc(var(--space-xl) + var(--header-height-desktop));
}
@media (max-width: 768px) {
    .pt-first-section {
        padding-top: calc(var(--space-xl) + var(--header-height-mobile));
    }
}

.px-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}
.px-sm {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}
.px-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}
.px-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}
.px-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

/* Gaps (Espaçamento Flex/Grid) */
.gap-xs {
    gap: var(--space-xs);
}
.gap-sm {
    gap: var(--space-sm);
}
.gap-md {
    gap: var(--space-md);
}
.gap-lg {
    gap: var(--space-lg);
}
.gap-xl {
    gap: var(--space-xl);
}

/* Tipografia */
.text-xs {
    font-size: var(--text-xs);
}
.text-sm {
    font-size: var(--text-sm);
}
.text-base {
    font-size: var(--text-base);
}
.text-lg {
    font-size: var(--text-lg);
}
.text-xl {
    font-size: var(--text-xl);
}
.text-2xl {
    font-size: var(--text-2xl);
}
.text-3xl {
    font-size: var(--text-3xl);
}
.text-4xl {
    font-size: var(--text-4xl);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-heavy {
    font-weight: var(--font-weight-heavy);
}

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

.lh-none {
    line-height: var(--line-height-none);
}
.lh-tight {
    line-height: var(--line-height-tight);
}
.lh-normal {
    line-height: var(--line-height-normal);
}
.lh-relaxed {
    line-height: var(--line-height-relaxed);
}

/* Linhas limpas de borda */
.border-t {
    border-top: 1px solid var(--color-light);
}
.border-b {
    border-bottom: 1px solid var(--color-light);
}

/* ==========================================
   COMPONENTES BÁSICOS
   ========================================== */

/* Botões do Design */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s8);
    font-family: var(--font-primary);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--s12) var(--s28);
    cursor: pointer;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    white-space: nowrap;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn span {
    line-height: inherit;
}

.btn svg {
    width: var(--s16);
    height: var(--s16);
    flex-shrink: 0;
    stroke-width: var(--stroke-width-sm);
}

/* Botão Primário Vermelho Gradiente Animado */
.btn-primary {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-light) 25%,
        var(--color-primary) 50%,
        var(--color-primary-bright) 75%,
        var(--color-primary) 100%
    );
    background-size: 400% 400%;
    color: var(--color-text-white);
    position: relative;
    overflow: hidden;
    animation: btnGradientShift var(--anim-duration-shift) ease infinite;
    transition: all var(--transition-normal);
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: var(--s80);
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-shine),
        transparent
    );
    transform: var(--skew-angle);
    animation: btnShineSweep var(--anim-duration-sweep) infinite ease-in-out;
    pointer-events: none;
    z-index: 3;
}

.btn-primary:hover {
    transform: translateY(calc(var(--s4) * -0.5));
    box-shadow: 0 var(--s8) var(--s24) var(--color-shadow-primary);
    filter: brightness(var(--brightness-hover));
    color: var(--color-text-white);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Botão Escuro Sólido */
.btn-dark {
    background: var(--color-dark);
    color: var(--color-text-white);
}
.btn-dark:hover {
    background: var(--color-dark-soft);
    color: var(--color-text-white);
}

/* Botão Claro Sólido */
.btn-light {
    background: var(--color-light);
    color: var(--color-text-main);
}
.btn-light:hover {
    background: var(--color-mid);
    color: var(--color-text-main);
}

/* Botão Outline */
.btn-outline {
    background: transparent;
    border: var(--border-width) solid var(--color-mid);
    color: var(--color-text-main);
    padding: calc(var(--s12) - var(--border-width))
        calc(var(--s28) - var(--border-width));
}

/* Botão Outline Vermelho */
.btn-outline-red {
    background: transparent;
    border: var(--border-width) solid var(--color-primary-border);
    color: var(--color-primary);
    padding: calc(var(--s12) - var(--border-width))
        calc(var(--s28) - var(--border-width));
}

/* Tamanhos de Botões (Pequeno, Médio, Grande) */
.btn-sm {
    padding: var(--s8) var(--s20);
}
.btn-sm.btn-outline,
.btn-sm.btn-outline-red {
    padding: calc(var(--s8) - var(--border-width))
        calc(var(--s20) - var(--border-width));
}

.btn-md {
    padding: var(--s12) var(--s28);
}
.btn-md.btn-outline,
.btn-md.btn-outline-red {
    padding: calc(var(--s12) - var(--border-width))
        calc(var(--s28) - var(--border-width));
}

.btn-lg {
    padding: var(--s16) var(--s36);
}
.btn-lg.btn-outline,
.btn-lg.btn-outline-red {
    padding: calc(var(--s16) - var(--border-width))
        calc(var(--s36) - var(--border-width));
}

/* Botão com Ícone Circular */
.btn-with-icon {
    padding: var(--s4) var(--s4) var(--s4) var(--s28);
    gap: var(--s12);
    justify-content: space-between;
}

.btn-with-icon.btn-outline,
.btn-with-icon.btn-outline-red {
    padding: calc(var(--s4) - var(--border-width))
        calc(var(--s4) - var(--border-width))
        calc(var(--s4) - var(--border-width))
        calc(var(--s28) - var(--border-width));
}

.btn-icon {
    width: var(--s44);
    height: var(--s44);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--color-icon-bg-light);
    color: currentColor;
    transition: all var(--transition-fast);
}

.btn-icon svg {
    width: var(--s16);
    height: var(--s16);
    stroke-width: var(--stroke-width-sm);
}

.btn-icon-dark {
    background: var(--color-dark);
    color: var(--color-text-white);
}

.btn-icon-dark svg {
    width: var(--s16);
    height: var(--s16);
    fill: currentColor;
    stroke: none;
}

/* Botão WhatsApp */
.btn-whatsapp {
    gap: 0;
    padding: var(--s4) var(--s28);
    overflow: hidden;
    justify-content: space-between;
    transition: all var(--transition-fast);
}

.btn-whatsapp.btn-outline {
    padding: calc(var(--s4) - var(--border-width))
        calc(var(--s28) - var(--border-width));
}

.btn-whatsapp .btn-icon {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(var(--s40));
    transition: all var(--transition-fast);
}

/* Hovers e Estados Responsivos Consolidados */
@media (min-width: 1025px) {
    .btn-outline:hover {
        border-color: var(--color-dark);
        background: var(--color-light);
        color: var(--color-text-main);
    }

    .btn-outline-red:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary-dark);
    }

    .btn-primary.btn-with-icon:hover {
        gap: var(--s16);
    }

    .btn-whatsapp:hover {
        gap: var(--s12);
        padding-right: var(--s4);
    }

    .btn-whatsapp.btn-outline:hover {
        padding-right: calc(var(--s4) - var(--border-width));
    }

    .btn-whatsapp:hover .btn-icon {
        width: var(--s44);
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1180px) {
    .btn-whatsapp {
        padding: var(--s4) var(--s4) var(--s4) var(--s28);
        gap: var(--s12);
    }

    .btn-whatsapp.btn-outline {
        padding: calc(var(--s4) - var(--border-width))
            calc(var(--s4) - var(--border-width))
            calc(var(--s4) - var(--border-width))
            calc(var(--s28) - var(--border-width));
    }

    .btn-whatsapp .btn-icon {
        width: var(--s44);
        overflow: visible;
        opacity: 1;
        transform: none;
    }
}

@keyframes btnGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes btnShineSweep {
    0% {
        left: -150%;
    }
    20% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* Cartões de Posts do Blog */
.card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-light);
    padding: var(--space-lg);
    transition:
        all var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Ícones (Icones Helper) */
.ic {
    width: var(--s44);
    height: var(--s44);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.ic-gray {
    background: var(--color-light);
    color: var(--color-text-secondary);
}

.ic-red {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ic-dark {
    background: var(--color-dark-soft);
    color: var(--color-white);
}

.ic svg,
.ic img,
.service-card__icon-img {
    width: var(--s16);
    height: var(--s16);
    object-fit: contain;
    display: block;
}

.ic svg {
    stroke-width: var(--stroke-width-sm);
}

/* Custom Logo */
.custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 40px; /* Altura máxima segura para o cabeçalho */
}

/* ==========================================
   TAGS / ETIQUETAS
   ========================================== */
.tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: var(--s8) var(--s16);
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-md);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-outline {
    border: var(--border-width) solid var(--color-mid);
    color: var(--color-text-secondary);
    background: var(--color-white);
}

.tag-red {
    border: var(--border-width) solid var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.tag-dark {
    background: var(--color-dark);
    color: var(--color-white);
    border: none;
}

/* ==========================================
   CONTROLES E SETAS (CAROUSEL & HERO ARROWS)
   ========================================== */
.arrow-hero {
    width: var(--s40);
    height: var(--s40);
    display: grid;
    place-items: center;
    border: var(--border-width) solid var(--color-white-translucent-42);
    border-radius: var(--radius-full);
    background: var(--color-white-translucent-18);
    color: var(--color-text-white);
    cursor: pointer;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    transition: all var(--transition-fast);
}

.arrow-hero svg {
    width: var(--s16);
    height: var(--s16);
    stroke-width: var(--stroke-width-sm);
}

.controls-carousel {
    display: flex;
    align-items: center;
    gap: var(--s8);
    width: fit-content;
    padding: var(--s4);
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-full);
    background: var(--color-white);
}

.arrow-carousel {
    width: var(--s40);
    height: var(--s40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-main);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.arrow-carousel svg {
    width: var(--s16);
    height: var(--s16);
    stroke-width: var(--stroke-width-md);
}

.arrow-carousel-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.arrow-carousel:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    opacity: 0.45;
    cursor: default;
}

@media (min-width: 1025px) {
    .arrow-hero:hover {
        background: var(--color-white-translucent-28);
        border-color: var(--color-white-translucent-72);
    }

    .arrow-carousel:not(:disabled):hover {
        background: var(--color-dark);
        border-color: var(--color-dark);
        color: var(--color-text-white);
    }
}

/* ==========================================
   CARDS (COMPONENTES)
   ========================================== */

/* Service Card */
.service-card {
    position: relative;
    isolation: isolate;
    aspect-ratio: 3 / 3.5;
    min-height: calc(
        var(--s80) * 4 + var(--s64)
    ); /* 384px: Previne corte de conteúdo dinâmico em cards mais estreitos */
    border-radius: var(--radius-md);
    background: transparent;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.service-card__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-md);
    background: var(--color-light);
    overflow: hidden;
    transform: scale(1);
    transform-origin: center;
    transition: all var(--transition-smooth);
}

.service-card__photo {
    position: absolute;
    inset: 0;
    background: var(--color-light);
    overflow: hidden;
}

.service-card__photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(28, 27, 26, 0) 0%,
        rgba(28, 27, 26, 0.74) 100%
    );
}

.service-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--service-img-pos, center);
    display: block;
}

.service-card__tag {
    position: absolute;
    left: var(--s20);
    bottom: var(--s20);
    z-index: 2;
    width: fit-content;
    max-width: calc(100% - var(--s40));
    pointer-events: none;
    transition: all var(--transition-normal);
}

.service-card__panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--radius-md);
    overflow: hidden;
    pointer-events: none;
    box-shadow: none;
    transition: all var(--transition-quick);
}

.service-card__panel-surface {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s24);
    min-height: 100%;
    padding: var(--s28);
    background: var(--color-dark);
    border-radius: inherit;
    color: var(--color-text-white);
    position: absolute;
    top: calc(100% + var(--border-width));
    right: 0;
    left: 0;
    box-shadow: inset 0 0 0 var(--border-width) transparent;
    transition: all var(--transition-slow);
}

.service-card__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s12);
    text-align: left;
}

.service-card__icon {
    flex-shrink: 0;
}

.service-card__panel-surface .service-card__icon {
    background: var(--color-dark-soft);
    color: var(--color-text-white);
}

.service-card__kicker {
    display: block;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-white-translucent-72);
}

.service-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    margin: 0;
}

.service-card__text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-mid);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card__link {
    align-self: flex-start;
}

.service-card__panel-surface .btn-outline-red {
    border-color: var(--color-white-translucent-18);
    color: var(--color-text-white);
}

/* Mobile full-card link */
.service-card__mobile-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}

@media (min-width: 1025px) {
    .service-card__mobile-link {
        display: none;
    }

    .service-card:hover .service-card__cover,
    .service-card:focus-within .service-card__cover {
        transform: scale(0.94);
    }

    .service-card:hover .service-card__panel,
    .service-card:focus-within .service-card__panel {
        pointer-events: auto;
    }

    .service-card:hover .service-card__panel-surface,
    .service-card:focus-within .service-card__panel-surface {
        top: 0;
        box-shadow:
            inset 0 0 0 var(--border-width) rgba(255, 255, 255, 0.08),
            inset 0 calc(var(--s24) * -1)
                calc(var(--s40) + var(--border-width) * 2)
                rgba(255, 255, 255, 0.04);
    }

    .service-card__panel-surface .btn-outline-red:hover {
        background: var(--color-white-translucent-18);
        border-color: var(--color-white-translucent-42);
        color: var(--color-text-white);
    }
}

/* Mobile & Tablet Overrides for Service Card */
@media (max-width: 1024px) {
    .service-card {
        min-height: 0;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
    .service-card__cover {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 10;
        transform: none;
        z-index: auto;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .service-card__photo {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
    .service-card__photo::after {
        display: none;
    }
    .service-card__tag {
        display: none;
    }
    .service-card__panel {
        position: static;
        inset: auto;
        z-index: auto;
        pointer-events: auto;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        overflow: visible;
    }
    .service-card__panel-surface {
        position: static;
        min-height: auto;
        top: auto;
        padding: var(--s24);
        border-radius: inherit;
    }
    .service-card__panel-surface .service-card__icon {
        position: absolute;
        top: var(--s16);
        left: var(--s16);
        z-index: 3;
        background: var(--color-white);
        color: var(--color-primary);
    }
    .service-card__panel-surface .service-card__link {
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--color-white);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.34);
        text-underline-offset: 4px;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .service-card__cover {
        aspect-ratio: 16 / 9;
    }
    .service-card__panel-surface {
        padding: var(--s20);
    }
    .service-card__title {
        font-size: var(--text-xl);
    }
    .service-card__text {
        font-size: var(--text-base);
    }
    .service-card__link {
        width: auto;
        white-space: normal;
    }
}

/* ==========================================
   PRODUCT CARDS (COMPONENTES)
   ========================================== */
.product-card {
    position: relative;
    isolation: isolate;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    background: var(--color-light);
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(28, 27, 26, 0.46);
    opacity: 0;
    transition: all var(--transition-moderate);
}

.product-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--product-img-pos, center);
    display: block;
    transform: scale(1);
    transition: all var(--transition-smooth);
}

.product-card__body {
    position: absolute;
    right: var(--s16);
    bottom: var(--s16);
    left: var(--s16);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s12);
    padding: var(--s20);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-dark);
    text-align: left;
    transition: all var(--transition-normal);
}

.product-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: inherit;
    margin: 0;
}

.product-card__text {
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: 0;
    transition: all var(--transition-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card__link {
    align-self: flex-start;
}

/* Mobile full-card link */
.product-card__mobile-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}

@media (min-width: 1025px) {
    .product-card__mobile-link {
        display: none;
    }

    .product-card:hover::after,
    .product-card:focus-within::after {
        opacity: 1;
    }

    .product-card:hover .product-card__media img,
    .product-card:focus-within .product-card__media img {
        transform: scale(1.08);
    }

    .product-card:hover .product-card__body,
    .product-card:focus-within .product-card__body {
        background: var(--color-dark);
        color: var(--color-white);
    }

    .product-card:hover .product-card__text,
    .product-card:focus-within .product-card__text {
        color: var(--color-white-translucent-72);
    }

    .product-card:hover .btn-outline-red,
    .product-card:focus-within .btn-outline-red {
        border-color: var(--color-white-translucent-18);
        color: var(--color-text-white);
    }

    .product-card:hover .btn-outline-red:hover,
    .product-card:focus-within .btn-outline-red:hover {
        background: var(--color-white-translucent-18);
        border-color: var(--color-white-translucent-42);
        color: var(--color-text-white);
    }
}

@media (max-width: 768px) {
    .product-card__body {
        right: var(--s12);
        bottom: var(--s12);
        left: var(--s12);
        padding: var(--s16);
    }
    .product-card__title {
        font-size: var(--text-xl);
    }
    .product-card__text {
        font-size: var(--text-base);
    }
}

/* ==========================================
   BLOG CARD (COMPONENTE)
   ========================================== */
.blog-card {
    display: flex;
    flex-direction: column;
    isolation: isolate;
    position: relative;
    border-radius: var(--radius-md);
    background: var(--color-dark);
    border: var(--border-width) solid var(--color-mid);
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.blog-card__cover {
    width: 100%;
    background: var(--color-dark);
    overflow: hidden;
}

.blog-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition-super-slow);
}

.blog-card:hover .blog-card__image {
    transform: scale(1.04);
}

.blog-card__tag {
    position: absolute;
    left: var(--s16);
    top: var(--s16);
    z-index: 2;
}

.blog-card__body {
    padding: var(--s24);
    background: var(--color-dark);
    color: var(--color-text-white);
    display: flex;
    flex-direction: column;
    gap: var(--s20);
    flex: 1 1 auto;
    position: relative;
    z-index: 1; /* Renderiza o corpo do card sobre a imagem, ocultando qualquer sobreposição ou fresta física no hover de forma perfeita */
}

.blog-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--s12);
    flex: 1 1 auto;
}

.blog-card__date {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-md);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-white-translucent-72);
}

.blog-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-mid);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__link {
    align-self: flex-start;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-text-white);
    text-decoration: underline;
    text-decoration-color: var(--color-white-translucent-42);
    text-underline-offset: 4px;
    transition: all var(--transition-fast);
}

.blog-card__link:hover {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

@media (max-width: 768px) {
    .blog-card__body {
        padding: var(--s20);
    }
    .blog-card__title {
        font-size: var(--text-lg);
    }
}

/* ==========================================
   TESTIMONIAL CARD (COMPONENTE)
   ========================================== */
.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s16);
    padding: var(--s24);
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-align: left;
    width: 100%;
}

.testimonial-card__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s16);
}

.testimonial-card__avatar {
    width: var(--s40);
    height: var(--s40);
    flex: 0 0 var(--s40);
    border: var(--border-width) solid var(--color-primary-border);
    border-radius: var(--radius-full);
    object-fit: cover;
    display: block;
}

.testimonial-card__person {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s4);
}

.testimonial-card__name {
    display: block;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.testimonial-card__role {
    display: block;
    font-size: var(--text-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.testimonial-card__source {
    flex: 0 0 auto;
    align-self: flex-start;
}

.testimonial-card__stars {
    display: flex;
    align-items: center;
    gap: var(--s8);
    color: var(--color-primary);
}

.testimonial-card__stars svg {
    width: var(--s16);
    height: var(--s16);
    fill: currentColor;
    stroke: none;
}

.testimonial-card__text {
    max-height: calc(1.5em * 3);
    overflow: hidden;
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: 0;
    transition: all var(--transition-moderate);
}

.testimonial-card.is-expanded .testimonial-card__text {
    max-height: var(--testimonial-text-open, calc(var(--s80) * 4));
    overflow: visible;
}

.testimonial-card__more {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--color-primary-border);
    text-underline-offset: var(--s4);
}

.testimonial-card.has-overflow .testimonial-card__more {
    display: block;
}

@media (max-width: 768px) {
    .testimonial-card {
        padding: var(--s20);
    }
}

/* ==========================================
   SEÇÃO DE FAQ (.faq)
   ========================================== */
.faq {
    background-color: var(--color-bg-body);
    display: flex;
    flex-direction: column;
    gap: var(--s48);
}

@media (max-width: 640px) {
    .faq {
        gap: var(--s32);
    }
}

.faq__head {
    max-width: calc(var(--s80) * 9 + var(--s40));
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.faq__container {
    max-width: calc(var(--s80) * 10);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    text-align: left;
}

/* ==========================================
   ACORDEÃO DE FAQ (COMPONENTE)
   ========================================== */
.faq-item {
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all var(--transition-normal);
}

.faq-item:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s16);
    padding: var(--s24);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
    text-align: left;
    transition: all var(--transition-normal);
}

.faq-item.is-open .faq-item__trigger {
    color: var(--color-primary);
}

.faq-item__icon {
    width: var(--s24);
    height: var(--s24);
    border-radius: var(--radius-full);
    background: var(--color-light);
    color: var(--color-text-main);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all var(--transition-moderate);
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
    background: var(--color-primary);
    color: var(--color-white);
}

.faq-item__icon svg {
    width: var(--s12);
    height: var(--s12);
    stroke-width: 2;
}

.faq-item__content {
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-moderate);
}

.faq-item.is-open .faq-item__content {
    max-height: var(--faq-height, calc(var(--s80) * 6 + var(--s20)));
}

.faq-item__inner {
    overflow: hidden;
}

.faq-item__answer {
    padding: 0 var(--s24) var(--s24) var(--s24);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .faq-item__trigger {
        padding: var(--s20);
    }
    .faq-item__answer {
        padding: 0 var(--s20) var(--s20) var(--s20);
    }
}

/* ==========================================
   ITENS DE MENU / NAVEGAÇÃO (COMPONENTE)
   ========================================== */

/* Menu do Cabeçalho (Header Menu Link) */
.menu-link-header {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--s24);
    color: var(--color-text-secondary);
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.menu-link-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: all var(--transition-fast);
}

.menu-link-header:hover,
.menu-link-header:focus-visible,
.menu-link-header.is-active {
    color: var(--color-text-main);
    text-decoration: none;
}

.menu-link-header:hover::after,
.menu-link-header:focus-visible::after,
.menu-link-header.is-active::after {
    width: 100%;
}

/* Menu do Rodapé (Footer Menu Link) */
.menu-link-footer {
    font-size: var(--text-sm);
    color: var(--color-mid);
    position: relative;
    display: inline-block;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.menu-link-footer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: all var(--transition-fast);
}

.menu-link-footer:hover,
.menu-link-footer:focus-visible,
.menu-link-footer.is-active {
    color: var(--color-white);
    text-decoration: none;
}

.menu-link-footer:hover::after,
.menu-link-footer:focus-visible::after,
.menu-link-footer.is-active::after {
    width: 100%;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
    display: inline-flex;
}

.breadcrumb__list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.breadcrumb__item:not(.breadcrumb__item--current)::after {
    content: "/";
    margin-left: var(--space-xs);
    color: var(--color-white-translucent-42);
}

.breadcrumb__link {
    display: inline-flex;
    color: var(--color-white-translucent-72) !important;
    text-decoration: none;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    color: var(--color-white) !important;
    text-decoration: none;
}

.breadcrumb__current {
    color: var(--color-white);
}

/* Tema claro */
.breadcrumb--light .breadcrumb__item:not(.breadcrumb__item--current)::after {
    color: var(--color-mid);
}

.breadcrumb--light .breadcrumb__link {
    color: var(--color-text-secondary) !important;
}

.breadcrumb--light .breadcrumb__link:hover,
.breadcrumb--light .breadcrumb__link:focus-visible {
    color: var(--color-dark) !important;
}

.breadcrumb--light .breadcrumb__current {
    color: var(--color-text-primary);
}

/* ==========================================================================
   CLASSES UTILITÁRIAS DE TOKENS (CORES, BORDAS, SOMBRAS, ESPAÇAMENTOS E TRANSIÇÕES)
   ========================================================================== */

/* Cores de Fundo (Background Colors) */
.bg-primary {
    background: var(--color-primary);
}
.bg-primary-dark {
    background: var(--color-primary-dark);
}
.bg-primary-deep {
    background: var(--color-primary-deep);
}
.bg-primary-soft {
    background: var(--color-primary-soft);
}
.bg-primary-border {
    background: var(--color-primary-border);
}
.bg-primary-light {
    background: var(--color-primary-light);
}
.bg-primary-bright {
    background: var(--color-primary-bright);
}
.bg-white {
    background: var(--color-white);
}
.bg-off-white {
    background: var(--color-off-white);
}
.bg-light {
    background: var(--color-light);
}
.bg-mid {
    background: var(--color-mid);
}
.bg-dark {
    background: var(--color-dark);
}
.bg-dark-soft {
    background: var(--color-dark-soft);
}

/* Arredondamento (Border Radius) */
.radius-sm {
    border-radius: var(--radius-sm);
}
.radius-md {
    border-radius: var(--radius-md);
}
.radius-lg {
    border-radius: var(--radius-lg);
}
.radius-full {
    border-radius: var(--radius-full);
}

/* Sombras (Box Shadow) */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* Larguras de Espaçamento Fixo (Fixed Spacing Widths) */
.w-s4 {
    width: var(--s4);
}
.w-s8 {
    width: var(--s8);
}
.w-s12 {
    width: var(--s12);
}
.w-s16 {
    width: var(--s16);
}
.w-s20 {
    width: var(--s20);
}
.w-s24 {
    width: var(--s24);
}
.w-s28 {
    width: var(--s28);
}
.w-s32 {
    width: var(--s32);
}
.w-s36 {
    width: var(--s36);
}
.w-s40 {
    width: var(--s40);
}
.w-s44 {
    width: var(--s44);
}
.w-s48 {
    width: var(--s48);
}
.w-s56 {
    width: var(--s56);
}
.w-s64 {
    width: var(--s64);
}
.w-s80 {
    width: var(--s80);
}
.w-s96 {
    width: var(--s96);
}

/* Larguras de Espaçamento Dinâmico (Fluid Spacing Widths) */
.w-space-xs {
    width: var(--space-xs);
}
.w-space-sm {
    width: var(--space-sm);
}
.w-space-md {
    width: var(--space-md);
}
.w-space-lg {
    width: var(--space-lg);
}
.w-space-xl {
    width: var(--space-xl);
}
.w-space-xxl {
    width: var(--space-xxl);
}

/* Velocidades de Transição (Transition Timings) */
.transition-fast {
    transition: all var(--transition-fast);
}
.transition-quick {
    transition: all var(--transition-quick);
}
.transition-normal {
    transition: all var(--transition-normal);
}
.transition-moderate {
    transition: all var(--transition-moderate);
}
.transition-slow {
    transition: all var(--transition-slow);
}
.transition-smooth {
    transition: all var(--transition-smooth);
}

/* Texturas de Background */
.bg-texture-1-lt {
    background:
        linear-gradient(
            90deg,
            transparent 24%,
            rgba(28, 27, 26, 0.01) 24%,
            rgba(28, 27, 26, 0.01) 24.2%,
            transparent 24.2%,
            transparent 76%,
            rgba(28, 27, 26, 0.01) 76%,
            rgba(28, 27, 26, 0.01) 76.2%,
            transparent 76.2%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0) 50%,
            rgba(28, 27, 26, 0.007) 100%
        ),
        repeating-linear-gradient(
            180deg,
            rgba(28, 27, 26, 0.02) 0px,
            rgba(28, 27, 26, 0.004) 3px,
            transparent 14px,
            rgba(255, 255, 255, 0.26) 30px,
            rgba(28, 27, 26, 0.008) 31px,
            rgba(28, 27, 26, 0.035) 32px
        ),
        linear-gradient(
            90deg,
            var(--color-white) 0%,
            var(--color-white) 78%,
            var(--color-off-white) 100%
        );
    background-size:
        100% 100%,
        100% 100%,
        100% 32px,
        100% 100%;
}
.bg-texture-1-dk {
    background:
        linear-gradient(
            90deg,
            transparent 24%,
            rgba(255, 255, 255, 0.01) 24%,
            rgba(255, 255, 255, 0.01) 24.2%,
            transparent 24.2%,
            transparent 76%,
            rgba(255, 255, 255, 0.01) 76%,
            rgba(255, 255, 255, 0.01) 76.2%,
            transparent 76.2%
        ),
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(28, 27, 26, 0.1) 100%
        ),
        repeating-linear-gradient(
            180deg,
            rgba(28, 27, 26, 0.5) 0px,
            rgba(28, 27, 26, 0.02) 3px,
            transparent 14px,
            rgba(0, 0, 0, 0.2) 30px,
            rgba(28, 27, 26, 0.03) 31px,
            rgba(28, 27, 26, 0.5) 32px
        ),
        var(--color-dark);
    background-size:
        100% 100%,
        100% 100%,
        100% 32px,
        100% 100%;
}
.bg-texture-1-primary {
    background-color: var(--color-primary);
    background-image:
        linear-gradient(
            90deg,
            transparent 24%,
            rgba(255, 255, 255, 0.04) 24%,
            rgba(255, 255, 255, 0.04) 24.2%,
            transparent 24.2%,
            transparent 76%,
            rgba(255, 255, 255, 0.04) 76%,
            rgba(255, 255, 255, 0.04) 76.2%,
            transparent 76.2%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.04) 100%
        ),
        repeating-linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0px,
            rgba(0, 0, 0, 0.01) 3px,
            transparent 14px,
            rgba(255, 255, 255, 0.07) 30px,
            rgba(0, 0, 0, 0.03) 31px,
            rgba(0, 0, 0, 0.1) 32px
        );
    background-size:
        100% 100%,
        100% 100%,
        100% 32px;
}
.bg-texture-2 {
    background-color: var(--color-off-white);
    background-image:
        linear-gradient(
            90deg,
            rgba(28, 27, 26, 0.035) var(--border-width),
            transparent var(--border-width)
        ),
        linear-gradient(
            180deg,
            rgba(28, 27, 26, 0.035) var(--border-width),
            transparent var(--border-width)
        );
    background-size: calc(var(--s80) + var(--s40) + var(--s20))
        calc(var(--s80) * 2 + var(--s40));
    background-repeat: repeat;
}

/* ==========================================================================
   HEADER E MENU MOBILE (COMPONENTE)
   ========================================================================== */

/* Auto-collapsing header when squeezed */
.sticky-header.force-mobile {
    display: flex;
    justify-content: space-between;
    min-height: calc(var(--s80) - var(--s4));
    padding: var(--s16) var(--page-pad-right) var(--s16) var(--page-pad-left);
}
body.is-scrolled .sticky-header.force-mobile {
    background: var(--color-bg-body);
    box-shadow: var(--shadow-sm);
}
.sticky-header.force-mobile .sticky-nav,
.sticky-header.force-mobile .header-cta {
    display: none !important;
}
.sticky-header.force-mobile .menu-toggle {
    position: relative;
    z-index: 130;
    display: grid;
    place-items: center;
}

/* Cabeçalho Sticky */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--header-z-index);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--s8) var(--page-pad-right) var(--s8) var(--page-pad-left);
    background: transparent;
    transition: all var(--transition-normal);
}

body.is-scrolled .sticky-header {
    background: var(--color-bg-body);
    box-shadow: var(--shadow-sm);
}

.sticky-header .site-branding {
    display: flex;
    align-items: center;
}

.sticky-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    width: var(--s96);
    flex: 0 0 auto;
}

.sticky-header .custom-logo {
    max-height: var(--s40);
    width: auto;
}

.sticky-nav {
    display: flex;
    align-items: center;
    gap: var(--s24);
    justify-self: center;
    background: var(--color-bg-body);
    border: var(--border-width) solid var(--color-light);
    border-radius: var(--radius-full);
    padding: var(--s8) var(--s32);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

@media (max-width: 1280px) {
    .sticky-header .custom-logo {
        max-height: var(--s36);
    }
    .sticky-nav {
        gap: var(--s16);
        padding: var(--s8) var(--s20);
    }
    .sticky-nav .menu-link-header {
        font-size: var(--text-xs);
    }
    .sticky-header .btn-icon {
        width: var(--s36);
        height: var(--s36);
    }
    .sticky-header .btn {
        padding: var(--s4) var(--s4) var(--s4) var(--s20);
        gap: var(--s8);
    }
}

body.is-scrolled .sticky-nav {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: var(--s8) 0;
}

.sticky-header .header-cta {
    justify-self: end;
}

.sticky-header .menu-toggle {
    display: none;
}

/* Colisão Dinâmica (Forçada por JS ou Medias Queries de Redimensionamento) */
.sticky-header.force-mobile {
    display: flex;
    justify-content: space-between;
    min-height: var(--s80);
    padding: var(--s16) var(--page-pad-right) var(--s16) var(--page-pad-left);
}

body.is-scrolled .sticky-header.force-mobile {
    background: var(--color-bg-body);
    box-shadow: var(--shadow-sm);
}

.sticky-header.force-mobile .sticky-nav,
.sticky-header.force-mobile .header-cta {
    display: none !important;
}

.sticky-header.force-mobile .menu-toggle {
    position: relative;
    z-index: var(--header-z-index);
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* Submenu / Dropdown no Desktop */
.menu-item-has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Indicador de seta no link pai */
.menu-item-has-children > .menu-link-header {
    padding-right: var(--s16);
}

.menu-item-has-children > .menu-link-header::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: calc(var(--border-width) * 3) solid transparent;
    border-right: calc(var(--border-width) * 3) solid transparent;
    border-top: var(--s4) solid var(--color-text-secondary);
    transition: transform var(--transition-fast);
}

.menu-item-has-children:hover > .menu-link-header::before {
    transform: translateY(-50%) rotate(180deg);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(var(--s12));
    z-index: var(--drawer-z-index);
    background: var(--color-bg-body);
    border: var(--border-width) solid var(--color-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: var(--s8) 0;
    min-width: var(--submenu-min-width);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

/* Setinha no topo do dropdown */
.sub-menu::before {
    content: "";
    position: absolute;
    top: calc(var(--s4) * -1 - var(--border-width));
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: calc(var(--s4) + var(--border-width)) solid transparent;
    border-right: calc(var(--s4) + var(--border-width)) solid transparent;
    border-bottom: calc(var(--s4) + var(--border-width)) solid
        var(--color-light);
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(var(--s4));
}

.sub-menu .menu-link-header {
    display: block;
    width: 100%;
    padding: var(--s8) var(--s16);
    color: var(--color-text-secondary);
    font-size: var(--text-12);
    min-height: auto;
    text-align: left;
}

.sub-menu .menu-link-header:hover {
    background: var(--color-light);
    color: var(--color-text-main);
}

.sub-menu .menu-link-header::after {
    display: none; /* Remove a linha vermelha inferior nos links do dropdown */
}

/* Drawer e Menu Mobile */
.mobile-menu {
    display: block;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--drawer-z-index) - 1);
    display: block;
    border: 0;
    background: var(--color-backdrop);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: all var(--transition-quick);
    touch-action: none;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--drawer-z-index);
    width: var(--drawer-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-body);
    transform: translateX(100%);
    transition: all var(--transition-normal);
    overscroll-behavior: contain;
    touch-action: auto;
    border-left: var(--border-width) solid var(--color-light);
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .drawer {
    transform: translateX(0);
}

body.menu-open .drawer-backdrop {
    opacity: 1;
    visibility: visible;
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.drawer-title {
    color: var(--color-text-muted);
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-md);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.drawer-close {
    cursor: pointer;
}

.drawer-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: auto;
}

.drawer-nav > .menu-link-header {
    min-height: var(--s44);
    width: 100%;
}

/* Submenu / Acordeão no Drawer Mobile */
.drawer-item-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.drawer-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.drawer-parent-row .menu-link-header {
    flex: 1 1 auto;
}

.drawer-toggle-sub {
    background: transparent;
    border: 0;
    width: var(--s44);
    height: var(--s44);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: transform var(--transition-fast);
    flex: 0 0 auto;
}

.drawer-toggle-sub svg {
    width: var(--s12);
    height: var(--s12);
    stroke: currentColor;
    stroke-width: 2.5;
    transition: transform var(--transition-fast);
}

.drawer-item-group.is-open .drawer-toggle-sub svg {
    transform: rotate(180deg);
}

.drawer-sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    padding-left: var(--s16);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.drawer-sub-menu .menu-link-header {
    min-height: var(--s36);
    font-weight: var(--font-weight-regular);
}

.drawer-cta {
    width: 100%;
    max-width: 100%;
    margin-top: auto;
}

/* ==========================================================================
   FOOTER (COMPONENTE)
   ========================================================================== */
.site-footer {
    background-color: var(--color-dark);
    color: var(--color-text-white);
    padding: var(--s80) var(--page-pad-right) var(--s40) var(--page-pad-left);
    font-family: var(--font-primary);
}

.footer-contact-link,
.footer-address,
.footer-bottom__dev a {
    transition: all var(--transition-fast);
}

/* CTA Banner */
.footer-cta {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-dark-soft);
    background-image:
        linear-gradient(rgba(28, 27, 26, 0.92), rgba(28, 27, 26, 0.92)),
        url("../images/img-cta.webp");
    background-size: cover;
    background-position: center;
    padding: var(--s64) var(--s40);
    text-align: center;
    margin-bottom: var(--s80);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s24);
    box-shadow: var(--shadow-lg);
}

.footer-cta__title {
    font-size: clamp(40px, 4vw, 56px);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-none);
    max-width: 800px;
    color: var(--color-text-white);
}

.footer-cta__desc {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-mid);
    max-width: 580px;
}

.footer-cta__actions {
    margin-top: var(--s8);
}

/* Footer Menu */
.footer-menu {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    gap: var(--s64);
    padding-bottom: var(--s56);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s20);
}

.footer-logo {
    width: 120px;
    display: block;
}

.footer-logo img,
.footer-logo .custom-logo {
    width: 100%;
    height: auto;
    max-height: none;
    filter: brightness(0) invert(1);
}

.footer-col__text {
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-mid);
}

.footer-col__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
    text-transform: uppercase;
    color: var(--color-text-white);
    margin-bottom: var(--s4);
}

/* Socials */
.footer-socials {
    display: flex;
    align-items: center;
    gap: var(--s12);
}

.footer-socials__link {
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.footer-socials__link:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* Address & Contacts & Links */
.footer-address {
    display: flex;
    align-items: flex-start;
    gap: var(--s12);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    color: var(--color-mid);
    transition: color var(--transition-fast);
}

.footer-address:hover {
    color: var(--color-text-white);
}

.footer-address__icon {
    width: var(--s16);
    height: var(--s16);
    color: var(--color-primary);
    flex-shrink: 0;
}

.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s16);
}

.footer-contacts li {
    display: flex;
}

.footer-contact-link,
a[href^="tel"].footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s12);
    font-size: var(--text-sm);
    color: var(--color-mid);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.footer-contact-link:hover,
a[href^="tel"].footer-contact-link:hover {
    color: var(--color-text-white);
}

.footer-contact-link svg {
    width: var(--s16);
    height: var(--s16);
    color: var(--color-primary);
    flex-shrink: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s12);
}

.footer-links li {
    display: block;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--s32);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.footer-bottom__copy {
    margin: 0;
}

.footer-bottom__dev a {
    color: var(--color-mid);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.footer-bottom__dev a:hover {
    color: var(--color-text-white);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-menu {
        grid-template-columns: 1fr 1fr;
        gap: var(--s40);
    }
    .footer-col:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: var(--s56) var(--page-pad-right) var(--s32)
            var(--page-pad-left);
    }
    .footer-cta {
        padding: var(--s40) var(--s20);
        margin-bottom: var(--s56);
        gap: var(--s20);
    }
    .footer-cta__title {
        font-size: var(--text-xl);
    }
    .footer-menu {
        grid-template-columns: 1fr;
        gap: var(--s40);
        padding-bottom: var(--s40);
        text-align: center;
    }
    .footer-col {
        align-items: center;
    }
    .footer-col:first-child {
        grid-column: span 1;
    }
    .footer-socials {
        justify-content: center;
    }
    .footer-address,
    .footer-contacts,
    .footer-links {
        align-items: center;
        text-align: center;
    }
    .footer-address {
        flex-direction: column;
        align-items: center;
        gap: var(--s4);
    }
    .footer-address__icon {
        margin-top: 0;
    }
    .footer-contacts li {
        justify-content: center;
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--s16);
        text-align: center;
        padding-top: var(--s24);
    }
}

/* ==========================================================================
   BOTÕES FLUTUANTES (WHATSAPP & SCROLL TO TOP)
   ========================================================================== */
.whatsapp-wrapper {
    position: fixed;
    bottom: var(--s24);
    right: var(--s24);
    z-index: 100;
    width: calc(var(--s56) + var(--s4));
    height: calc(var(--s56) + var(--s4));
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.whatsapp-float {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    height: calc(var(--s56) + var(--s4));
    width: calc(var(--s56) + var(--s4));
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--color-white-translucent-18);
    background: var(--color-whatsapp);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    color: var(--color-text-white);
    transition:
        width var(--transition-smooth),
        background var(--transition-slow),
        box-shadow var(--transition-slow),
        padding var(--transition-smooth),
        gap var(--transition-smooth);
    cursor: pointer;
    text-decoration: none;
    padding: var(--s4);
    gap: 0;
}

.whatsapp-float:hover {
    width: calc(var(--s80) * 3 + var(--s8));
    background: var(--color-whatsapp-hover);
    color: var(--color-text-white);
    box-shadow: 0 var(--s12) var(--s40) var(--color-shadow-whatsapp);
    padding: var(--s4) var(--s4) var(--s4) var(--s20);
    gap: var(--s12);
}

.whatsapp-float__text {
    font-family: var(--font-primary);
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 0px;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        flex-grow var(--transition-smooth),
        opacity var(--transition-slow);
    color: var(--color-text-white);
    z-index: 2;
}

.whatsapp-float:hover .whatsapp-float__text {
    flex: 1 1 0px;
    opacity: 1;
}

.whatsapp-float__icon-box {
    position: relative;
    width: calc(var(--s44) + var(--s8));
    height: calc(var(--s44) + var(--s8));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    transition: all var(--transition-smooth);
    z-index: 2;
}

.whatsapp-float:hover .whatsapp-float__icon-box {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-text-white);
}

.whatsapp-float__icon-box svg {
    position: absolute;
    transition: all var(--transition-smooth);
}

.whatsapp-float__icon-box .whatsapp-icon {
    fill: currentColor;
    stroke: none;
    width: calc(var(--s24) + var(--border-width) * 2);
    height: calc(var(--s24) + var(--border-width) * 2);
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.whatsapp-float__icon-box .arrow-icon {
    width: var(--s16);
    height: var(--s16);
    stroke-width: var(--stroke-width-sm);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0) rotate(-135deg);
}

.whatsapp-float:hover .whatsapp-icon {
    opacity: 0;
    transform: scale(0) rotate(180deg);
}

.whatsapp-float:hover .arrow-icon {
    opacity: 1;
    transform: scale(1) rotate(-45deg);
}

/* ===== Botão Scroll to Top ===== */
.scroll-top {
    position: fixed;
    bottom: calc(var(--s80) + var(--s8));
    right: calc(var(--s24) + var(--s4));
    z-index: 100;
    width: calc(var(--s44) + var(--s8));
    height: calc(var(--s44) + var(--s8));
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    color: var(--color-dark);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--s20) / 2));
    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal),
        background var(--transition-quick),
        border-color var(--transition-quick),
        box-shadow var(--transition-quick);
}

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

.scroll-top:hover {
    background: var(--color-dark);
    color: var(--color-text-white);
    border-color: var(--color-dark);
    transform: translateY(calc(var(--s4) * -0.75));
    box-shadow: var(--shadow-lg);
}

.scroll-top svg {
    width: var(--s16);
    height: var(--s16);
    stroke-width: var(--stroke-width-sm);
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .whatsapp-wrapper {
        bottom: var(--s16);
        right: var(--s16);
    }
    .scroll-top {
        bottom: var(--s80);
        right: calc(var(--s16) + var(--s4));
    }
}

/* ==========================================
   SCROLL REVEAL - ANIMAÇÕES DE ENTRADA
   ========================================== */

/* Crossfade nativo entre páginas (Chromium: Chrome, Edge, Opera, Brave, Samsung) */
@view-transition {
    navigation: auto;
}

/* Page exit fallback: fade-out para navegadores sem View Transition (Firefox, Safari) */
body.is-exiting {
    animation: df-out 250ms ease-out both;
}

@keyframes df-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Estado inicial de elementos com animação de entrada */
.reveal {
    opacity: 0.01;
    transition: all 1000ms cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: opacity, transform;
}

/* Variantes de direção */
.reveal-slide-up {
    transform: translateY(40px);
}

.reveal-slide-down {
    transform: translateY(-40px);
}

.reveal-slide-left {
    transform: translateX(-40px);
}

.reveal-slide-right {
    transform: translateX(40px);
}

/* Variante de escala (fade + zoom) */
.reveal-scale {
    transform: scale(0.94);
    transition:
        opacity 1200ms cubic-bezier(0.2, 0.6, 0.2, 1),
        transform 1200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Estado revelado (acionado via IntersectionObserver no JS) */
.reveal.is-revealed {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Respeita preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    body.is-exiting {
        animation: none;
        opacity: 1;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* ==========================================
   SEÇÕES REUTILIZÁVEIS (Serviços, Produtos, Depoimentos, Blog, Stats)
   ========================================== */

/* ==========================================================================
   SEÇÃO DE STATS (TRUST BAR)
   ========================================================================== */
.trust-bar {
    background: var(--color-primary);
    padding-top: var(--s24);
    padding-bottom: var(--s24);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s8);
}

.trust-bar__card {
    background: var(--color-primary-dark);
    border-radius: var(--radius-md);
    padding: var(--s24) var(--s20);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s8);
}

.trust-bar__num {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-white);
}

.trust-bar__label {
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-light);
}

/* ==========================================================================
   SEÇÃO DE SERVIÇOS
   ========================================================================== */
.services {
    background-color: var(--color-off-white);
    display: flex;
    flex-direction: column;
    gap: var(--s48);
}

.services__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s32);
    text-align: left;
}

.services__head {
    max-width: calc(var(--s80) * 10 + var(--s20)); /* Equivale a 820px */
}

.services__controls {
    display: flex;
    align-items: center;
    gap: var(--s8);
    width: fit-content;
    padding: var(--s4);
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-full);
    background: var(--color-white);
}

.services__track {
    display: flex;
    gap: var(--s20);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-align: left;
}

.services__track::-webkit-scrollbar {
    display: none;
}

.services__track .service-card {
    flex: 0 0 calc((100% - (var(--s20) * 3)) / 4);
    min-width: calc(
        var(--s80) * 3 + var(--s40)
    ); /* 280px: Garante proporção mínima ideal de card vertical */
    scroll-snap-align: start;
}

/* Banner de CTA Compartilhado */
.section-cta {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--s24);
    padding: var(--s24) var(--s40);
    background: var(--color-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-white);
    margin-top: var(--s48);
    width: 100%;
    text-align: left;
}

.section-cta .btn {
    flex-shrink: 0;
}

.section-cta__text {
    font-size: clamp(var(--text-xl), 1.2vw, var(--text-3xl));
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-none);
    text-transform: uppercase;
    letter-spacing: calc(var(--letter-spacing-sm) * 1.67);
}

/* ==========================================================================
   SEÇÃO DE PRODUTOS
   ========================================================================== */
.products {
    display: flex;
    flex-direction: column;
    gap: var(--s48);
}

.products__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s32);
    text-align: left;
}

.products__head {
    max-width: calc(var(--s80) * 10 + var(--s20));
}

.products__controls {
    display: flex;
    align-items: center;
    gap: var(--s8);
    width: fit-content;
    padding: var(--s4);
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-full);
    background: var(--color-white);
}

.products__track {
    display: flex;
    gap: var(--s20);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-align: left;
}

.products__track::-webkit-scrollbar {
    display: none;
}

/* Desktop: 3 colunas (conforme protótipo) */
.products__track .product-card {
    flex: 0 0 calc((100% - (var(--s20) * 2)) / 3);
    scroll-snap-align: start;
}

/* ==========================================================================
   SEÇÃO DE DEPOIMENTOS (TESTIMONIALS)
   ========================================================================== */
.testimonials {
    --testimonials-gap: clamp(var(--s32), 4vw, var(--s64));
    --testimonials-head: min(360px, 27vw);
    --testimonials-track-grid: calc(
        100vw - var(--page-pad-left) - var(--page-pad-right) -
            var(--testimonials-head) - var(--testimonials-gap)
    );
    text-align: left;
}

.testimonials__content {
    display: flex;
    align-items: flex-start;
    gap: var(--testimonials-gap);
    width: 100%;
}

.testimonials__head {
    flex: 0 0 var(--testimonials-head);
    display: flex;
    flex-direction: column;
    gap: var(--s20);
}

.testimonials__controls {
    display: flex;
    align-items: center;
    gap: var(--s8);
    width: fit-content;
    padding: var(--s4);
    border: var(--border-width) solid var(--color-mid);
    border-radius: var(--radius-full);
    background: var(--color-white);
}

.testimonials__arrow {
    flex-shrink: 0;
}

.testimonials__track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--s24);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-right: calc(-1 * var(--page-pad-right));
    padding-right: var(--page-pad-right);
    padding-bottom: var(--s4);
    padding-top: var(--s4);
}

.testimonials__track::-webkit-scrollbar {
    display: none;
}

.testimonials__track .testimonial-card {
    flex: 0 0 calc((var(--testimonials-track-grid) - (var(--s24) * 2)) / 3);
    scroll-snap-align: start;
}

/* ==========================================================================
   SEÇÃO DE BLOG (BLOG)
   ========================================================================== */
.blog {
    display: flex;
    flex-direction: column;
    gap: var(--s48);
}

.blog__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s32);
    text-align: left;
}

.blog__head {
    max-width: 820px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s24);
}

/* ==========================================================================
   MEDIA QUERIES DAS SEÇÕES REUTILIZÁVEIS
   ========================================================================== */

@media (max-width: 1280px) {
    .services__track .service-card {
        flex-basis: calc((100% - (var(--s20) * 2)) / 3);
    }
}

@media (max-width: 1180px) {
    .trust-bar {
        grid-template-columns: repeat(3, 1fr);
    }
    .trust-bar__card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .services__track .service-card {
        flex-basis: calc((100% - var(--s20)) / 2);
    }

    .products__track .product-card {
        flex-basis: calc((100% - var(--s20)) / 2);
    }

    .testimonials__content {
        flex-direction: column;
        gap: var(--s16);
    }
    .testimonials__head {
        flex: none;
    }
    .testimonials__track {
        width: calc(100% + var(--page-pad-right));
    }
    .testimonials__track .testimonial-card {
        flex-basis: calc((100% - (var(--s24) * 2)) / 2.35);
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s20);
    }
}

@media (max-width: 768px) {
    .trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-cta {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--s24) var(--s20);
        gap: var(--s20);
    }
}

@media (max-width: 640px) {
    .trust-bar__card {
        padding: var(--s12) var(--s12);
        border-radius: var(--radius-sm);
    }
    .trust-bar__num {
        font-size: var(--text-base);
    }
    .trust-bar__label {
        font-size: var(--text-xs);
    }
    .services {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "track"
            "controls";
        gap: var(--s24);
    }
    .services__top {
        display: contents;
    }
    .services__head {
        grid-area: head;
    }
    .services__track {
        grid-area: track;
        scroll-padding-left: 0;
        min-width: 0;
    }
    .services__controls {
        grid-area: controls;
        justify-self: center;
        align-self: center;
    }
    .services__track .service-card {
        flex-basis: 100%;
        min-width: 0;
    }

    .products {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "track"
            "controls";
        gap: var(--s24);
    }
    .products__top {
        display: contents;
    }
    .products__head {
        grid-area: head;
    }
    .products__track {
        grid-area: track;
        scroll-padding-left: 0;
        min-width: 0;
    }
    .products__controls {
        grid-area: controls;
        justify-self: center;
        align-self: center;
    }
    .products__track .product-card {
        flex-basis: 80vw;
        min-width: 0;
    }

    .testimonials__content {
        gap: var(--s16);
    }
    .testimonials__track .testimonial-card {
        flex-basis: 100%;
        padding: var(--s20);
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--s24);
    }
    .blog {
        gap: var(--s24);
    }
    .blog__top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s12);
    }
}

/* ==========================================
   COOKIE BANNER (LGPD)
   ========================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--color-dark);
    padding: var(--s16) 0;
    transform: translateY(100%);
    transition: transform 400ms ease;
}

.cookie-banner.is-visible {
    transform: translateY(0);
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s24);
    flex-wrap: wrap;
}

.cookie-banner__text {
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    color: var(--color-white-translucent-76);
    margin: 0;
    flex: 1 1 300px;
}

.cookie-banner__text a {
    color: var(--color-white);
    text-decoration: underline;
}

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

@media (max-width: 640px) {
    .cookie-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--s12);
    }

    .cookie-banner__text {
        flex: auto;
    }
}

/* ==========================================
   DF-HERO — Unified Hero Banner
   ========================================== */
.df-hero {
    position: relative;
    width: 100%;
    min-height: clamp(320px, 60vh, 800px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-white);
    overflow: hidden;
}

.df-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(28, 27, 26, 0.72) 0%,
        rgba(28, 27, 26, 0.82) 100%
    );
    z-index: 2;
}

.df-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    animation: df-hero-bg-in 800ms ease-out both;
}

.df-hero__container {
    position: relative;
    z-index: 3;
    padding-left: var(--page-pad-left);
    padding-right: var(--page-pad-right);
    width: 100%;
}

.df-hero__title {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-heavy);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin: 0;
}

.df-hero__pretitle {
    display: block;
    font-size: var(--text-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-white-translucent-72);
    margin-bottom: var(--space-xs);
}

.df-hero__code {
    display: block;
    font-family: var(--font-primary);
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-none);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.df-hero__breadcrumb {
    margin-top: var(--space-md);
}

@media (max-width: 768px) {
    .df-hero__title {
        font-size: var(--text-3xl);
    }
}

@keyframes df-hero-bg-in {
    from {
        opacity: 0.01;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}