@charset "UTF-8";

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;

}

/* Rolagem suave para os links de âncora do menu */
html {
    scroll-behavior: smooth;
}

.anchor {
    position: relative;
    display: block;
    top: -20px;
    visibility: hidden;
}

/* Variáveis de cor */

:root {
    --primaria: #ffffff;
    --secundaria: #8F6F5E;
    --terciaria: #18191c;
    --quaternaria: #303030;
    --smart-red: #E5352B;
}

/* Safari do iOS pinta o texto de <button> com o azul do sistema quando a cor
   não é declarada — e qualquer título dentro do botão herda esse azul. */
button {
    color: inherit;
}

/* Safari do iOS: mesmo com <meta format-detection> ele ainda envolve datas e
   endereços em links próprios e os pinta de azul. Isto devolve a aparência do
   texto original — links de verdade (tel:, mailto:) não são afetados. */
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    pointer-events: none;
}

/* Personalizando Barra de rolagem */

a, p, span {

}

/* ==========================================================================
   HERO / BANNER INICIAL
   ========================================================================== */

/* Banner ocupa a altura da tela (100vh) sem gerar rolagem.
   .hero é uma coluna: a imagem cresce e o rodapé branco fica embaixo. */
.hero {
    --smart-red: #E5352B;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* Área da imagem — cresce para preencher o espaço disponível */
.hero__media {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
}

/* A imagem fica numa camada própria (elemento real, não pseudo, para o GSAP
   poder animá-la) e assim o zoom/pan lento não mexe no texto por cima.
   As bordas ficam com folga para o parallax e o zoom nunca mostrarem o fundo. */
.hero__bg {
    position: absolute;
    inset: -8% 0;
    z-index: 0;
    background: var(--hero-bg) center / cover no-repeat;
    transform-origin: center;
    animation: heroKenBurns 24s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes heroKenBurns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.12) translate(-1.6%, -1%); }
}

/* Névoa do entardecer atravessando o céu: duas faixas de luz bem suaves em
   velocidades diferentes. É o que dá sensação de movimento contínuo no fundo
   sem roubar contraste do texto. */
.hero__sky {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.hero__sky::before,
.hero__sky::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -60%;
    width: 60%;
    height: 68%;
    background: radial-gradient(60% 60% at 50% 50%,
                rgba(255, 255, 255, .20) 0%,
                rgba(255, 214, 170, .13) 45%,
                rgba(255, 255, 255, 0) 72%);
    filter: blur(6px);
    animation: heroDrift 46s linear infinite;
}

/* segunda faixa: mais larga, mais lenta e fora de fase da primeira */
.hero__sky::after {
    top: 8%;
    width: 78%;
    height: 50%;
    opacity: .7;
    animation-duration: 72s;
    animation-delay: -26s;
}

@keyframes heroDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(320%); }
}

/* Entrada suave (fade + subida) do conteúdo ao carregar */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entrada escalonada dos elementos */
.hero-nav            { animation: heroFadeUp .7s ease-out both; }
.hero-content__title { animation: heroFadeUp .8s ease-out .15s both; }
.hero-content__text  { animation: heroFadeUp .8s ease-out .30s both; }
.hero-content__actions { animation: heroFadeUp .8s ease-out .45s both; }
.hero-stats          { animation: heroFadeUp .8s ease-out .60s both; }

/* Acessibilidade: desliga as animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .hero__bg,
    .hero__sky::before,
    .hero__sky::after,
    .hero-nav,
    .hero-content__title,
    .hero-content__text,
    .hero-content__actions,
    .hero-stats {
        animation: none;
    }
}

/* Coluna interna: nav no topo, conteúdo logo abaixo, cidade preenche o resto */
.hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Container fluido só na largura (padding lateral), com tamanhos fixos.
   Preenche a tela sem exagerar as fontes. */
.hero .container,
.hero__foot .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(32px, 8vw, 180px);
    padding-right: clamp(32px, 8vw, 180px);
}

/* ---- Navegação ---- */
.hero-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 30px 0 8px;
}

.hero-nav__brand img {
    height: 46px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.hero-nav__links {
    /* centralizado no meio da página (independente da largura da logo/toggle) */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-nav__links > li {
    flex-shrink: 0;
}

.hero-nav__links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1d1f24;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease;
}

.hero-nav__links a:hover {
    color: var(--smart-red);
}

.hero-nav__links .bi {
    font-size: 11px;
}

.hero-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background: #fff;
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.hero-lang__btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.hero-lang__btn.is-active {
    background: var(--smart-red);
}

/* ---- Conteúdo ---- */
.hero-content {
    max-width: 720px;
    padding-top: clamp(20px, 4vh, 60px);
    /* empurra o espaço livre para baixo do conteúdo -> a cidade aparece */
    margin-bottom: auto;
}

.hero-content__title {
    color: #16181d;
    font-size: 58px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0 0 26px;
}

.hero-content__title span {
    color: var(--smart-red);
}

.hero-content__text {
    color: #2b2d33;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 0 36px;
}

.hero-content__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.btn-smart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

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

.btn-smart--primary {
    background: var(--smart-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(229, 53, 43, .35);
}

.btn-smart--primary:hover {
    color: #fff;
    background: #cf2e25;
}

.btn-smart--outline {
    background: rgba(255, 255, 255, .65);
    color: #16181d;
    border: 1.5px solid rgba(22, 24, 29, .55);
}

.btn-smart--outline:hover {
    color: #16181d;
    background: #fff;
}

/* ---- Card de números ---- */
/* O rodapé usa o mesmo cinza da seção de serviços, para não criar faixa
   branca entre o banner e a área de serviços. O card sobe (margin-top
   negativo) para cavalgar a borda inferior do banner. */
.hero__foot {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: #f6f6f7;
    /* sem respiro: a imagem dos serviços encosta na base do quadro de números */
    padding-bottom: 0;
}

.hero-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: #F8FAFC;
    border-radius: 7px;
    padding: 22px 40px;
    /* sobe para cavalgar a borda entre a imagem e o rodapé branco */
    margin-top: -64px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .15);
}

.hero-stats__item {
    padding: 0 10px;
}

.hero-stats__number {
    color: var(--smart-red);
    font-size: 37px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    margin: 0 0 6px;
}

.hero-stats__prefix,
.hero-stats__sufixo {
    font-size: 28px;
}

/* O número roda com largura de dígito fixa: sem isso o texto "pula"
   lateralmente a cada quadro da contagem. */
.hero-stats__count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.hero-stats__label {
    color: #4c4f56;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

/* ---- Responsivo ---- */
@media (max-width: 991px) {
    /* Solta a trava de tela cheia: no mobile o conteúdo empilha e rola */
    .hero { min-height: auto; }
    .hero__media { min-height: 62vh; }
    .hero-nav__links { display: none; }
    /* A margem inferior precisa ser maior que o avanço do card de números,
       senão ele sobe por cima do último botão (o conteúdo do banner cresce
       além da imagem no celular). */
    .hero-content { padding-top: 24px; margin-bottom: 80px; }
    .hero-content__title { font-size: 40px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 34px; margin-top: -40px; }
}

@media (max-width: 767px) {
    /* As quebras manuais foram pensadas para telas largas. No celular elas
       cortam a frase no meio e deixam linhas órfãs ("... às / maiores"). */
    .hero-content__text br { display: none; }
}

@media (max-width: 575px) {
    /* A logo tinha altura fixa (46px = 218px de largura) e, somada ao seletor
       de idioma, estourava a linha do cabeçalho — o toggle saía da tela. */
    .hero-nav { gap: 16px; padding-top: 22px; }
    .hero-nav__brand img { height: 34px; }
    .hero-lang { padding: 3px; }
    .hero-lang__btn { width: 32px; height: 32px; font-size: 17px; }

    .hero-content__title { font-size: 32px; }
    .hero-content { margin-bottom: 72px; }
    .hero-content__text { margin-bottom: 28px; }
    .hero-stats {
        grid-template-columns: 1fr;
        padding: 26px 24px;
        row-gap: 26px;
        margin-top: -28px;
    }
    .hero-content__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .btn-smart { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
    /* Telas de 320–400px: aperta o recuo lateral e o texto dos botões, que
       são "nowrap" e não podem quebrar. */
    .hero .container,
    .hero__foot .container { padding-left: 20px; padding-right: 20px; }
    .hero-nav__brand img { height: 30px; }
    .hero-content__title { font-size: 28px; }
    .btn-smart { padding: 14px 16px; font-size: 15px; }
    .hero-stats { padding: 24px 20px; }
    .hero-stats__number { font-size: 32px; }
}

/* Telas baixas (notebooks): garante que tudo caiba sem rolar */
@media (min-width: 992px) and (max-height: 780px) {
    .hero-content { padding-top: 12px; }
    .hero-content__title { font-size: 46px; margin-bottom: 18px; }
    .hero-content__text { font-size: 15px; margin-bottom: 24px; }
    .btn-smart { padding: 13px 24px; }
    .hero-stats { padding: 24px 40px; margin-top: -64px; }
    .hero-stats__number { font-size: 38px; }
}


/* ==========================================================================
   SERVIÇOS
   ========================================================================== */

.services {
    --svc-pad: 24px;
    --svc-pad-y: clamp(60px, 8vw, 120px);
    --svc-max: 1240px;
    background: #f6f6f7;
    padding: var(--svc-pad-y) 0;
    overflow: hidden;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* Conjunto contido e centralizado (proporção equilibrada em telas largas) */
.services__grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    max-width: var(--svc-max);
    margin: 0 auto;
    padding: 0 var(--svc-pad);
}

/* ---- Coluna esquerda ---- */
.services__eyebrow {
    color: var(--smart-red);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 10px;
}

.services__title {
    color: #16181d;
    font-size: clamp(26px, 2.4vw, 33px);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
}

.services__subtitle {
    color: #5a5d64;
    font-size: 16px;
    margin: 6px 0 24px;
}

.services__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.services__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-radius: 12px;
    color: #22242a;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid #e4e4e7;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.services__item:last-child {
    border-bottom: 0;
}

.services__item > .bi:first-child {
    font-size: 20px;
    color: #3a3d44;
    transition: color .2s ease;
}

.services__item > span {
    flex: 1;
}

.services__arrow {
    font-size: 14px;
    opacity: 0;
    transition: opacity .2s ease;
}

.services__item:hover {
    background: #eeeeef;
}

.services__item.is-active {
    background: var(--smart-red);
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 12px 26px rgba(229, 53, 43, .3);
}

.services__item.is-active > .bi {
    color: #fff;
}

.services__item.is-active .services__arrow {
    opacity: 1;
}

/* ---- Vitrine (imagem + card) ---- */
.services__showcase {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.services__media {
    position: absolute;
    /* estende para cima/baixo até as bordas da seção -> cobre todo o canto */
    top: calc(-1 * var(--svc-pad-y));
    bottom: calc(-1 * var(--svc-pad-y));
    left: 0;
    /* estende a borda direita da imagem até a beira da viewport (full bleed) */
    right: calc(-1 * ((100vw - min(100vw, var(--svc-max))) / 2 + var(--svc-pad)));
    /* ancora à direita e amplia p/ cortar a faixa branca da esquerda da imagem,
       deixando skyline/vans atrás do card (transparência visível) em qualquer largura */
    background-position: right 80%;
    background-size: 115% auto;
    background-repeat: no-repeat;
    /* cantos arredondados só na esquerda; direita vaza para fora da tela */
    border-radius: 22px 0 0 22px;
    transition: background-image .3s ease;
}

.services__card {
    position: relative;
    z-index: 2;
    width: min(60%, 510px);
    margin-left: clamp(16px, 2vw, 36px);
    /* fill: #D9D9D9 a 20% (vidro translúcido) */
    background: rgba(217, 217, 217, .2);
    backdrop-filter: blur(13.2px);
    -webkit-backdrop-filter: blur(13.2px);
    border-radius: 21px;
    /* padding vertical maior => mais altura; horizontal um pouco maior tb */
    padding: clamp(48px, 4vw, 62px) clamp(28px, 2.4vw, 38px);
}

/* borda de 1px em gradiente #FFFFFF -> #999999 acompanhando o raio */
.services__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.services__card-eyebrow {
    color: var(--smart-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase; /* título do post (CPT servicos) vira eyebrow */
    margin: 0 0 12px;
}

.services__card-title {
    color: #16181d;
    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 14px;
}

.services__card-title span {
    color: var(--smart-red);
}

.services__card-text {
    color: #33363d;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 22px;
}

.services__card-btn {
    background: transparent;
    color: var(--smart-red);
    border-color: rgba(229, 53, 43, .55);
}

.services__card-btn:hover {
    color: var(--smart-red);
    background: rgba(229, 53, 43, .06);
}

.services__card-btn .bi {
    color: var(--smart-red);
}

/* ---- Responsivo ---- */
@media (max-width: 991px) {
    .services__grid { grid-template-columns: 1fr; }
    .services__title { white-space: normal; }
    .services__showcase { min-height: 0; flex-direction: column; }
    .services__media {
        position: relative;
        inset: auto;
        width: 100%;
        height: 260px;
        border-radius: 18px;
    }
    .services__card {
        width: 100%;
        margin: -60px 0 0;
    }
}


/* ==========================================================================
   BANNER CTA (fundo parte.png)
   ========================================================================== */

/* Feira Virtual embutida (iframe) */
.feira-embed {
    width: 100%;
    line-height: 0;
    background: #F3EDDF; /* mesma cor de fundo da feira (papel de arroz), evita flash */
}
.feira-embed iframe {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 900px;
    min-height: 620px;
    border: 0;
}
@media (max-width: 640px) {
    .feira-embed iframe { height: 88vh; min-height: 540px; }
}

/* ===================== REVEAL AO ROLAR (utilitário) ===================== */
.sc-reveal{
    opacity:0; transform:translateY(30px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
    will-change:opacity, transform;
}
.sc-reveal--l{transform:translateX(-42px);}
.sc-reveal--r{transform:translateX(42px);}
.sc-reveal--scale{transform:scale(.93);}
.sc-reveal.is-in{opacity:1; transform:none;}
.sc-d1{transition-delay:.10s;}
.sc-d2{transition-delay:.20s;}
.sc-d3{transition-delay:.30s;}
.sc-d4{transition-delay:.40s;}
.sc-d5{transition-delay:.50s;}

/* leve flutuação do contêiner do Clube (fica "suspenso") */
@keyframes scFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.clube__ilustra img{animation:scFloat 5.5s ease-in-out infinite;}

/* "reduzir movimento": mantém o fade de aparecimento (só opacidade,
   sem deslocamento/escala) — ainda tem vida, sem movimento brusco */
@media (prefers-reduced-motion:reduce){
    .sc-reveal{transform:none !important;}
    .clube__ilustra img{animation:none !important;}
}

/* ===================== GSAP ASSUMIU (assets/js/animations.js) =====================
   O animations.js marca <html class="sc-gsap"> quando o GSAP e o ScrollTrigger
   carregam. A partir daí quem anima é o GSAP, então o reveal em CSS e a entrada
   do hero são desligados para os dois não disputarem opacity/transform.
   Sem GSAP a classe não é aplicada e tudo abaixo continua valendo. */
.sc-gsap .sc-reveal{
    opacity:1; transform:none;
    transition:none; transition-delay:0s;
    will-change:auto;
}
/* o zoom/pan do fundo passa a ser feito pelo GSAP (junto com o parallax) */
.sc-gsap .hero__bg{animation:none;}
.sc-gsap .hero-nav,
.sc-gsap .hero-content__title,
.sc-gsap .hero-content__text,
.sc-gsap .hero-content__actions,
.sc-gsap .hero-stats{animation:none;}

/* ===================== CLUBE DE COMPRAS ===================== */
.clube{
    --clube-red:#cf2026;
    background:#ffffff;
    padding:clamp(56px,7vw,100px) 0;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
    overflow:hidden;
}
.clube__grid{
    max-width:1240px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1fr 1.05fr;
    gap:clamp(32px,5vw,72px); align-items:center;
}
.clube__col--left{max-width:520px;}

.clube__eyebrow{
    display:inline-block; position:relative;
    font-size:.82rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--clube-red);
    padding-bottom:10px; margin-bottom:22px;
}
.clube__eyebrow::after{
    content:""; position:absolute; left:0; bottom:0;
    width:46px; height:3px; background:var(--clube-red); border-radius:2px;
}
.clube__title{
    font-family:"Inter","Poppins",sans-serif;
    font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.18;
    font-weight:700; color:#16181d; margin:0 0 18px;
}
.clube__title-red{color:var(--clube-red);}
.clube__lead{
    color:#5b606b; font-size:1rem; line-height:1.7; max-width:44ch;
    margin:0 0 36px;
}

.clube__features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px;}
.clube-feature{display:flex; align-items:flex-start; gap:18px;}
.clube-feature__icon{
    flex:0 0 auto; width:56px; height:56px; border-radius:14px;
    background:rgba(207,32,38,.08);
    display:grid; place-items:center;
}
.clube-feature__icon img{width:28px; height:28px; object-fit:contain;}
.clube-feature__title{
    font-family:"Inter","Poppins",sans-serif;
    font-size:1.12rem; font-weight:700; color:#16181d; margin:0 0 4px;
}
.clube-feature__text{color:#6b7078; font-size:.96rem; line-height:1.55; margin:0;}

.clube__col--right{display:flex; flex-direction:column; gap:26px;}
.clube__ilustra img{width:100%; height:auto; display:block;}

.clube__card{
    background:#fff; border:1px solid #eceef1; border-radius:16px;
    box-shadow:0 18px 40px -24px rgba(22,24,29,.25);
    padding:26px clamp(16px,3vw,34px);
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.clube-vantagem{
    position:relative;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
}
.clube-vantagem + .clube-vantagem::before{
    content:""; position:absolute; left:-8px; top:8px; bottom:8px;
    width:1px; background:#eceef1;
}
.clube-vantagem img{width:40px; height:40px; object-fit:contain;}
.clube-vantagem span{font-size:.9rem; font-weight:600; color:#2b2e35; line-height:1.35;}

@media (max-width:900px){
    .clube__grid{grid-template-columns:1fr; gap:44px;}
    .clube__col--left{max-width:none;}
}
@media (max-width:560px){
    .clube__card{grid-template-columns:1fr; gap:22px;}
    .clube-vantagem + .clube-vantagem::before{display:none;}
}

/* ===================== COMO FUNCIONA ===================== */
.como{
    --como-red:#E5352B;
    background:#fbe4e4;
    padding:clamp(30px,4vw,54px) 0;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
    overflow:hidden;
}
.como__wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,40px);}
.como__eyebrow{
    color:var(--como-red); font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; font-size:.92rem; margin:0 0 clamp(18px,2.6vw,30px);
}
.como__steps{
    position:relative;
    display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,2vw,24px);
}
/* trilho cinza que conecta os círculos (atrás deles) */
.como__steps::before{
    content:""; position:absolute; top:56px; left:10%; right:10%;
    height:2px; background:rgba(229,53,43,.18); z-index:0;
}
/* linha vermelha que AVANÇA preenchendo o trilho, passo a passo */
.como__steps::after{
    content:""; position:absolute; top:56px; left:10%; width:0;
    height:2px; background:var(--como-red); z-index:0;
}
.como__steps.animar::after{animation:comoFill 2.2s ease .1s forwards;}
@keyframes comoFill{to{width:80%;}}

.como-step{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; text-align:center;
}
.como-step__circle{
    width:112px; height:112px; border-radius:50%;
    background:#f4f0f0; display:grid; place-items:center;
    box-shadow:0 10px 26px -16px rgba(22,24,29,.35);
}
.como-step__circle svg,
.como-step__circle img{width:50px; height:50px; object-fit:contain;}
.como-step__bi{font-size:44px; line-height:1; color:#16181d;}
.como-step__label{
    display:flex; align-items:center; gap:12px; margin-top:16px;
}
.como-step__num{
    flex:0 0 auto; width:28px; height:28px; border-radius:50%;
    background:#f0dcda; color:#c8938d;   /* apagado por padrão; acende na sequência */
    font-size:.86rem; font-weight:700; display:grid; place-items:center;
}
.como-step__text{
    text-align:left; color:#3a3d44; font-size:.98rem; font-weight:500; line-height:1.3;
}

/* animação progressiva: o passo surge e seu número acende, um de cada vez */
.como-step{opacity:0; transform:translateY(26px);}
.como__steps.animar .como-step{animation:comoIn .5s ease forwards;}
.como__steps.animar .como-step__num{animation:comoNum .5s ease forwards;}

.como__steps.animar .como-step:nth-child(1),
.como__steps.animar .como-step:nth-child(1) .como-step__num{animation-delay:.10s;}
.como__steps.animar .como-step:nth-child(2),
.como__steps.animar .como-step:nth-child(2) .como-step__num{animation-delay:.55s;}
.como__steps.animar .como-step:nth-child(3),
.como__steps.animar .como-step:nth-child(3) .como-step__num{animation-delay:1.00s;}
.como__steps.animar .como-step:nth-child(4),
.como__steps.animar .como-step:nth-child(4) .como-step__num{animation-delay:1.45s;}
.como__steps.animar .como-step:nth-child(5),
.como__steps.animar .como-step:nth-child(5) .como-step__num{animation-delay:1.90s;}

@keyframes comoIn{to{opacity:1; transform:none;}}
@keyframes comoNum{
    0%{transform:scale(.5); background:#f0dcda; color:#c8938d;}
    60%{transform:scale(1.2); background:var(--como-red); color:#fff;}
    100%{transform:scale(1); background:var(--como-red); color:#fff;}
}

/* --- navegação por bolinhas: só aparece quando vira slider (mobile) --- */
.como__dots{display:none;}

@media (max-width:720px){
    /* vira slider horizontal com encaixe por etapa */
    .como__steps{
        display:flex; grid-template-columns:none;
        gap:0;
        overflow-x:auto; overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory; scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none; -ms-overflow-style:none;
        /* sangra até as bordas da tela; o recuo de 12vw é metade da sobra
           (100 - 76), então a primeira e a última etapa também centralizam */
        margin-inline:calc(-1 * clamp(20px,4vw,40px));
        padding-inline:12vw;
    }
    .como__steps::-webkit-scrollbar{display:none;}
    .como__steps::before,
    .como__steps::after{display:none;}

    .como-step{
        flex:0 0 76vw;   /* deixa a próxima etapa espiando: indica que dá pra arrastar */
        scroll-snap-align:center;
        padding:0 8px;
    }

    /* no slider as etapas entram quase juntas: nenhuma fica invisível
       se a pessoa arrastar antes da sequência terminar */
    .como__steps.animar .como-step:nth-child(1),
    .como__steps.animar .como-step:nth-child(1) .como-step__num{animation-delay:.10s;}
    .como__steps.animar .como-step:nth-child(2),
    .como__steps.animar .como-step:nth-child(2) .como-step__num{animation-delay:.20s;}
    .como__steps.animar .como-step:nth-child(3),
    .como__steps.animar .como-step:nth-child(3) .como-step__num{animation-delay:.30s;}
    .como__steps.animar .como-step:nth-child(4),
    .como__steps.animar .como-step:nth-child(4) .como-step__num{animation-delay:.40s;}
    .como__steps.animar .como-step:nth-child(5),
    .como__steps.animar .como-step:nth-child(5) .como-step__num{animation-delay:.50s;}

    .como__dots{
        display:flex; justify-content:center; align-items:center; gap:10px;
        margin-top:22px;
    }
    .como__dot{
        flex:0 0 auto; -webkit-appearance:none; appearance:none;
        width:8px; height:8px; padding:0; border:0; border-radius:50%;
        background:rgba(229,53,43,.25); cursor:pointer; box-shadow:none;
        transition:width .22s ease, background .22s ease;
    }
    .como__dot.is-ativo{width:22px; border-radius:999px; background:var(--como-red);}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
    .como__steps{scroll-behavior:auto;}
}
/* "reduzir movimento": mantém a progressão, mas só com opacidade/cor
   (sem deslocamento nem escala) */
@media (prefers-reduced-motion:reduce){
    .como-step{transform:none;}
    .como__steps.animar .como-step{animation:comoInRM .5s ease forwards;}
    .como__steps.animar .como-step__num{animation:comoNumRM .5s ease forwards;}
    @keyframes comoInRM{from{opacity:0;} to{opacity:1;}}
    @keyframes comoNumRM{
        from{background:#f0dcda; color:#c8938d;}
        to{background:var(--como-red); color:#fff;}
    }
}

/* --- CTA "Crie seu clube de compras" (surge junto com a etapa 5) --- */
.como__cta{
    display:flex; justify-content:center;
    margin-top:clamp(28px,4vw,48px);
    opacity:0; transform:translateY(16px);
    pointer-events:none;
}
.como__steps.animar ~ .como__cta{
    animation:comoCtaIn .5s ease 2.15s forwards;
}
@keyframes comoCtaIn{to{opacity:1; transform:none; pointer-events:auto;}}
@media (prefers-reduced-motion:reduce){
    .como__steps.animar ~ .como__cta{animation:comoCtaInRM .5s ease 2.15s forwards;}
    @keyframes comoCtaInRM{from{opacity:0;} to{opacity:1; pointer-events:auto;}}
}
.como__cta-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--como-red); color:#fff;
    border:0; border-radius:999px; cursor:pointer;
    font-family:inherit; font-weight:600; font-size:1rem;
    padding:14px clamp(24px,3vw,34px);
    box-shadow:0 14px 30px -14px rgba(229,53,43,.6);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.como__cta-btn:hover{
    transform:translateY(-2px);
    background:#cf2c22;
    box-shadow:0 18px 36px -14px rgba(229,53,43,.7);
}
.como__cta-btn i{transition:transform .18s ease;}
.como__cta-btn:hover i{transform:translateX(4px);}

/* no mobile a sequência das etapas é curta, então o CTA acompanha */
@media (max-width:720px){
    .como__steps.animar ~ .como__cta{animation-delay:.75s;}
    .como__cta-btn{width:100%; justify-content:center;}
}

/* ===================== MODAL: CRIE SEU CLUBE ===================== */
.clube-modal{
    position:fixed; inset:0; z-index:1000;
    display:none; align-items:center; justify-content:center;
    padding:20px;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
}
.clube-modal.is-open{display:flex;}
.clube-modal__overlay{
    position:absolute; inset:0;
    background:rgba(22,24,29,.55); backdrop-filter:blur(2px);
    animation:clubeFade .2s ease;
}
.clube-modal__dialog{
    position:relative; z-index:1;
    width:100%; max-width:540px;
    background:#fff; border-radius:16px;
    padding:clamp(26px,4vw,40px);
    box-shadow:0 30px 70px -20px rgba(22,24,29,.5);
    animation:clubePop .22s ease;
    max-height:90vh; overflow-y:auto;
}
.clube-modal__close{
    position:absolute; top:14px; right:16px;
    width:34px; height:34px; border:0; border-radius:50%;
    background:#f4f0f0; color:#3a3d44;
    font-size:1.5rem; line-height:1; cursor:pointer;
    display:grid; place-items:center;
    transition:background .18s ease;
}
.clube-modal__close:hover{background:#e7e0e0;}
.clube-modal__eyebrow{
    color:#E5352B; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; font-size:.8rem; margin:0 0 8px;
}
.clube-modal__title{
    color:#16181d; font-size:clamp(1.4rem,2.4vw,1.7rem);
    font-weight:700; margin:0 0 8px; line-height:1.2;
}
.clube-modal__sub{
    color:#5b5f68; font-size:.95rem; line-height:1.5; margin:0 0 22px;
}
.clube-modal__field{
    width:100%; box-sizing:border-box;
    background:#f6f7f9; border:1px solid #e3e6ea; border-radius:9px;
    padding:13px 16px; margin-bottom:14px;
    font-family:inherit; font-size:.96rem; color:#16181d;
    transition:border-color .18s ease, background .18s ease;
}
.clube-modal__field:focus{
    outline:none; border-color:#E5352B; background:#fff;
}
.clube-modal__field::placeholder{color:#9aa0a8;}
textarea.clube-modal__field{resize:vertical; min-height:96px;}
.clube-modal__submit{
    width:100%; margin-top:6px;
    background:#E5352B; color:#fff; border:0; border-radius:999px;
    padding:14px; cursor:pointer;
    font-family:inherit; font-weight:600; font-size:1rem;
    transition:background .18s ease, transform .18s ease;
}
.clube-modal__submit:hover{background:#cf2c22; transform:translateY(-1px);}
.clube-modal__vh{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Mensagem de sucesso (verde) --- */
.clube-modal__success{
    text-align:center; padding:8px 4px 4px;
}
.clube-modal__success-icon{
    width:64px; height:64px; margin:6px auto 18px;
    border-radius:50%; display:grid; place-items:center;
    background:#e5f6ec; color:#1ca34a;
    font-size:34px; line-height:1;
    animation:clubePop .28s ease;
}
.clube-modal__success-title{
    color:#1ca34a; font-size:clamp(1.4rem,2.4vw,1.7rem);
    font-weight:700; margin:0 0 10px;
}
.clube-modal__success-text{
    color:#3a3d44; font-size:1rem; line-height:1.55; margin:0 0 24px;
}
.clube-modal__success .clube-modal__submit{
    background:#1ca34a;
}
.clube-modal__success .clube-modal__submit:hover{
    background:#178a3f;
}
@keyframes clubeFade{from{opacity:0;} to{opacity:1;}}
@keyframes clubePop{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
    .clube-modal__overlay,.clube-modal__dialog{animation:none;}
}

/* ===================== COMPARATIVO / ECONOMIA ===================== */
.compare{
    --compare-red:#E5352B;
    background:#f7f8fa;
    padding:clamp(36px,5vw,72px) 0;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
    overflow:hidden;
}
.compare__wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,40px);}

/* --- 3 cards --- */
.compare__cards{
    display:grid; grid-template-columns:repeat(3, minmax(0,384px));
    justify-content:center; gap:clamp(16px,2vw,28px);
    margin-top:28px; margin-bottom:clamp(28px,4vw,52px);
}
.compare-card{
    width:100%; height:170px;                 /* Figma: 384 x 170 */
    display:flex; align-items:center; gap:16px;
    background:#fff;
    border:1px solid #e9ebef;                  /* border-width: 1px */
    border-radius:7px;                          /* border-radius: 7px */
    padding:clamp(18px,2vw,26px);
    box-shadow:0 14px 34px -26px rgba(22,24,29,.4);
    opacity:1;
}
.compare-card__icon{width:46px; height:46px; object-fit:contain; flex:0 0 auto;}
.compare-card__body h3{
    font-family:"Inter","Poppins",sans-serif;
    font-size:1.08rem; font-weight:700; color:#16181d; margin:0 0 6px;
}
.compare-card__body p{color:#6b7078; font-size:.95rem; line-height:1.55; margin:0;}

/* --- painel rosa com a tabela --- */
.compare__panel{
    background:#f9dede; border-radius:20px;
    padding:clamp(24px,3.5vw,52px);
    display:grid; grid-template-columns:minmax(220px,1fr) 1.55fr;
    gap:clamp(24px,4vw,56px); align-items:center;
}
.compare__eyebrow{
    color:var(--compare-red); font-weight:700; font-size:1rem; margin:0 0 12px;
}
.compare__title{
    font-family:"Inter","Poppins",sans-serif;
    font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.15;
    font-weight:800; color:#16181d; margin:0;
}
.compare__table img{width:100%; height:auto; display:block;}

@media (max-width:860px){
    .compare__cards{grid-template-columns:1fr;}
    .compare__panel{grid-template-columns:1fr; gap:24px;}
}

.cta-banner {
    position: relative;
    overflow: hidden;
    background-color: #cf2026;
    background-image: var(--cta-bg);
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
.cta-banner__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-banner__title {
    color: #fff;
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 400;
    font-size: clamp(21px, 2.6vw, 30px);
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
}
.cta-banner__title strong { font-weight: 700; }
.cta-banner__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cta-banner__sub {
    color: rgba(255, 255, 255, .9);
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}
.cta-banner__sub strong { font-weight: 700; }

/* ===================== CONTATO ===================== */
.contato{
    --contato-red:#E5352B;
    position:relative; overflow:hidden;
    background:#f4efe7;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
}
.contato__bg{
    position:absolute; inset:0; z-index:0;
    background-position:center right; background-size:cover; background-repeat:no-repeat;
}
/* footer.png já é clara à esquerda; véu bem leve só p/ garantir contraste do texto */
.contato__veil{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,
        rgba(244,239,231,.55) 0%,
        rgba(244,239,231,.18) 34%,
        rgba(244,239,231,0) 55%);
}
.contato__wrap{
    position:relative; z-index:2;
    max-width:1180px; margin:0 auto;
    padding:clamp(44px,6vw,90px) clamp(20px,4vw,40px);
}
.contato__form{
    max-width:540px;
    background:rgba(217,217,217,.2);
    -webkit-backdrop-filter:blur(13.2px);
    backdrop-filter:blur(13.2px);
    border:1px solid rgba(255,255,255,.45);
    border-radius:18px;
    padding:clamp(26px,3.4vw,44px);
    box-shadow:0 24px 60px -34px rgba(22,24,29,.5);
}

.contato__eyebrow{
    display:inline-block; position:relative;
    color:var(--contato-red); font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; font-size:.9rem; padding-bottom:10px; margin:0 0 18px;
}
.contato__eyebrow::after{
    content:""; position:absolute; left:0; bottom:0;
    width:46px; height:3px; background:var(--contato-red); border-radius:2px;
}
.contato__title{
    font-family:"Inter","Poppins",sans-serif;
    font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; color:#16181d; margin:0 0 14px;
}
.contato__sub{color:#4a4d55; font-size:1rem; line-height:1.6; margin:0 0 30px;}

/* campos translúcidos, combinando com o card de vidro */
.contato-field{
    width:100%; display:block;
    background:rgba(255,255,255,.45); color:#2b2d33;
    border:1px solid rgba(255,255,255,.55);
    border-radius:10px;
    padding:14px 16px; font:inherit; margin-bottom:18px;
    transition:background .2s, border-color .2s, box-shadow .2s;
}
.contato-field::placeholder{color:#5b606b;}
.contato-field:focus{
    outline:none;
    background:rgba(255,255,255,.7);
    border-color:var(--contato-red);
    box-shadow:0 0 0 3px rgba(229,53,43,.15);
}
textarea.contato-field{min-height:150px; resize:vertical;}

.contato-check{
    display:flex; align-items:center; gap:10px;
    font-size:.9rem; color:#3a3d44; margin-bottom:26px; cursor:pointer;
}
.contato-check input{width:16px; height:16px; accent-color:var(--contato-red); cursor:pointer;}

.contato-btn{
    background:var(--contato-red); color:#fff; border:none; border-radius:8px;
    padding:13px 34px; font-family:inherit; font-size:1rem; font-weight:600;
    cursor:pointer; transition:background .2s, transform .15s;
}
.contato-btn:hover{background:#cf2e25; transform:translateY(-2px);}

/* rótulos ocultos (acessibilidade) */
.contato__vh{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:820px){
    .contato__veil{background:rgba(244,239,231,.9);}
    .contato__bg{background-position:center;}
    .contato__form{max-width:none;}
}
.cta-banner__btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f4b544;
    color: #3a2410;
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    padding: 16px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        box-shadow .28s ease,
        color .28s ease;
}

/* onda de cor que percorre o botão de ponta a ponta (fica atrás do texto) */
.cta-banner__btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300%;
    z-index: -1;
    /* período de 240px -> o keyframe desloca exatamente 1 período (loop sem emenda) */
    background-image: repeating-linear-gradient(90deg,
        #f4b544 0px,
        #ffd782 60px,
        #fff6e4 120px,
        #ffd782 180px,
        #f4b544 240px);
    transform: translateX(-240px);
    opacity: 0;
    transition: opacity .3s ease;
    animation: cta-color-flow 2.4s linear infinite;
    animation-play-state: paused;
}

@keyframes cta-color-flow {
    from { transform: translateX(-240px); }
    to   { transform: translateX(0); }
}

/* seta acompanha o movimento */
.cta-banner__btn > span {
    display: inline-block;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cta-banner__btn:hover,
.cta-banner__btn:focus-visible {
    color: var(--smart-red);
    transform: translateY(-3px) scale(1.025);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(255, 255, 255, .45) inset,
        0 8px 26px rgba(244, 181, 68, .45);
}
.cta-banner__btn:hover::before,
.cta-banner__btn:focus-visible::before {
    opacity: 1;
    animation-play-state: running;
}
.cta-banner__btn:hover > span,
.cta-banner__btn:focus-visible > span {
    transform: translateX(6px);
}

.cta-banner__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 3px;
}

.cta-banner__btn:active {
    transform: translateY(-1px) scale(.99);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
    transition-duration: .08s;
}

@media (prefers-reduced-motion: reduce) {
    .cta-banner__btn,
    .cta-banner__btn > span {
        transition: color .2s ease, box-shadow .2s ease;
    }
    .cta-banner__btn::before {
        animation: none;
        background-image: none;
        background-color: #fff6e4;
    }
    .cta-banner__btn:hover,
    .cta-banner__btn:focus-visible {
        transform: none;
    }
    .cta-banner__btn:hover > span,
    .cta-banner__btn:focus-visible > span {
        transform: none;
    }
}

@media (max-width: 767px) {
    .cta-banner__inner {
        justify-content: center;
        text-align: center;
        padding: 34px 20px;
    }
}


/* ==========================================================================
   HUB
   ========================================================================== */

.hub {
    --hub-max: 1400px;
    background: #f6f6f7;
    padding: clamp(60px, 8vw, 110px) 0;
    overflow: hidden;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

.hub__grid {
    display: grid;
    grid-template-columns: 1fr minmax(380px, 520px) 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    max-width: var(--hub-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Blocos de texto (esquerda / direita) ---- */
/* Cabeçalho: ícone ao lado do título */
.hub-block__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

/* Ícone alinhado ao topo: o título fica no alto e o ícone (maior)
   desce ao lado, como na referência. */
.hub__col--left .hub-block__head {
    align-items: flex-start;
}

/* Cabeçalho da direita: título em cima (alinhado aos títulos das
   vantagens) e o troféu deslocado abaixo, na coluna dos ícones. */
.hub-block__head--stack {
    display: block;
}

.hub-block__head--stack .hub-block__title {
    padding-left: 70px;   /* alinha "Vantagens do Hub" com as vantagens */
    margin-bottom: 6px;
}

.hub-block__head--stack .hub-block__icon {
    display: block;
    width: auto;
    text-align: left;
    /* tira o troféu da coluna dos ícones das vantagens: desloca-o
       para a esquerda, para não ficar alinhado com alvo/escudo/relógio */
    margin-left: -34px;
    margin-top: 2px;
}

.hub-block__icon {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    line-height: 1;
}

.hub-block__icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.hub-block__title {
    color: #16181d;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 0;
}

.hub-block__head-text .hub-block__title {
    margin-bottom: 14px;
}

/* "Vantagens do Hub" em uma única linha no desktop */
.hub__col--right .hub-block__title {
    white-space: nowrap;
}

.hub-block__text {
    color: #475569;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 137%;
    letter-spacing: 0;
    margin: 0;
}

/* ---- Checklist ---- */
.hub-checklist {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    display: grid;
    gap: 18px;
}

.hub-checklist li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #475569;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 137%;
    letter-spacing: 0;
}

.hub-checklist img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.hub__cta {
    margin-top: 4px;
}

/* ---- Vantagens (direita) ---- */
.hub-advantages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 30px;
}

/* Título em cima (recuado, alinhado à descrição) e, abaixo,
   a linha [ícone | descrição] com o ícone centralizado no texto. */
.hub-advantage__row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hub-advantage__icon {
    flex-shrink: 0;
    width: 52px;
    height: 40px;
    object-fit: contain;
    object-position: center;
}

.hub-advantage__title {
    color: #16181d;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 0 0 10px;
    padding-left: 70px; /* largura do ícone (52) + gap (18) */
}

.hub-advantage__text {
    color: #475569;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 137%;
    letter-spacing: 0;
    margin: 0;
    max-width: 280px;
}

/* ---- Diagrama do ecossistema (animado, feito em código) ---- */
.hub-eco{
    --red:#D8262C;
    --orange:#F2762E;
    --ink:#3a3a3a;
    position:relative;
    width:100%;
    max-width:560px;
    aspect-ratio:1;
    margin:0 auto;
    font-family:"Inter","Poppins",sans-serif;
}

.hub-eco .worldmap{
    position:absolute;left:0;right:0;bottom:2%;height:52%;
    opacity:.55;pointer-events:none;
}
.hub-eco .worldmap circle{
    animation:he-twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite;
    transform-box:fill-box;transform-origin:center;
}
@keyframes he-twinkle{
    0%,100%{opacity:var(--o,.5);transform:scale(1)}
    50%{opacity:calc(var(--o,.5) * .25);transform:scale(.6)}
}

.hub-eco .core{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.hub-eco .ring{
    fill:none;stroke:#d5d5d5;stroke-width:1.5;
    stroke-dasharray:2 7;stroke-linecap:round;
    transform-box:view-box;transform-origin:340px 340px;
}
.hub-eco .ring.r1{animation:he-spin 50s linear infinite}
.hub-eco .ring.r2{animation:he-spinRev 80s linear infinite;stroke:#dedede}
.hub-eco .ring.r3{animation:he-spin 120s linear infinite;stroke:#e8e8e8}
@keyframes he-spin{to{transform:rotate(360deg)}}
@keyframes he-spinRev{to{transform:rotate(-360deg)}}

.hub-eco .arrow-line{
    fill:none;stroke:var(--red);stroke-width:2.5;
    stroke-dasharray:5 6;stroke-linecap:round;
    animation:he-dashFlow 1.1s linear infinite;
}
@keyframes he-dashFlow{to{stroke-dashoffset:-11}}
.hub-eco .arrow-tip{fill:var(--red)}

.hub-eco .curve{
    fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
    stroke-dasharray:130;stroke-dashoffset:130;
    animation:he-draw 3.2s ease-in-out infinite;
}
.hub-eco .curve.c2{animation-delay:.5s}
@keyframes he-draw{
    0%{stroke-dashoffset:130;opacity:0}
    20%{opacity:1}
    55%{stroke-dashoffset:0;opacity:1}
    85%{stroke-dashoffset:0;opacity:0}
    100%{stroke-dashoffset:0;opacity:0}
}

.hub-eco .hub-core{
    position:absolute;top:50%;left:50%;translate:-50% -50%;
    width:18%;aspect-ratio:1;z-index:5;
    animation:he-hubPulse 3s ease-in-out infinite;
    filter:drop-shadow(0 8px 22px rgba(216,38,44,.35));
}
.hub-eco .hub-core svg{width:100%;height:100%}
@keyframes he-hubPulse{0%,100%{scale:1}50%{scale:1.05}}

.hub-eco .pulse{
    position:absolute;top:50%;left:50%;translate:-50% -50%;
    width:18%;aspect-ratio:1;border-radius:26%;
    background:radial-gradient(circle,rgba(242,118,46,.30),rgba(216,38,44,.12));
    animation:he-wave 2.8s ease-out infinite;z-index:1;
}
.hub-eco .pulse.p2{animation-delay:1.4s}
@keyframes he-wave{from{scale:1;opacity:.6}to{scale:2.1;opacity:0}}

.hub-eco .node{
    position:absolute;z-index:6;width:15.5%;
    translate:-50% -50%;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    animation:he-float 5.2s ease-in-out infinite;
}
.hub-eco .node:nth-of-type(2n){animation-duration:6.3s;animation-delay:.9s}
.hub-eco .node:nth-of-type(3n){animation-delay:1.7s}
@keyframes he-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hub-eco .bubble{
    width:100%;aspect-ratio:1;border-radius:50%;background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;transition:transform .3s;
}
.hub-eco .node:hover .bubble{transform:scale(1.1)}
.hub-eco .bubble svg{width:48%;height:48%}
.hub-eco .label{
    font-size:clamp(9px,1.9vmin,13px);
    font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;
}

.hub-eco .flag{
    position:absolute;z-index:7;translate:-50% -50%;
    width:8.5%;aspect-ratio:1;border-radius:50%;overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    animation:he-float 4.6s ease-in-out infinite;
}
.hub-eco .flag svg{width:100%;height:100%;display:block}

.hub-eco .n-import{top:9%;left:50%}
.hub-eco .n-forn1{top:22%;left:76%}
.hub-eco .n-forn2{top:50%;left:88%}
.hub-eco .n-docs{top:76%;left:74%}
.hub-eco .n-log{top:89%;left:50%}
.hub-eco .n-negoc{top:76%;left:26%}
.hub-eco .n-oport1{top:50%;left:12%}
.hub-eco .n-oport2{top:22%;left:24%}
.hub-eco .f-br{top:81%;left:12%}
.hub-eco .f-cn{top:69%;left:86%}

@media (prefers-reduced-motion: reduce){
    .hub-eco *{animation:none !important}
}

/* ---- Responsivo ---- */
@media (max-width: 991px) {
    .hub__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .hub__col--left,
    .hub__col--right { max-width: 460px; width: 100%; }
    /* sem largura explícita o justify-items:center encolhe esta coluna a
       fit-content; como o diagrama é width:100% sobre pai indefinido, ele
       colapsava para 0x0 e as legendas absolutas empilhavam sobre o texto */
    .hub__col--center { order: -1; width: 100%; max-width: 560px; }
    .hub-block__text { max-width: none; }
    .hub-checklist li { justify-content: flex-start; }
    .hub-advantage { text-align: left; }
    .hub-advantage__text { max-width: none; }
    .hub__col--right .hub-block__title { white-space: normal; }

    /* Empilhado só faz sentido no desktop, onde o troféu precisa sair da
       coluna dos ícones. Aqui ele volta para o lado do título, espelhando
       o cabeçalho "O que é o Hub?". */
    .hub-block__head--stack {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .hub-block__head--stack .hub-block__title {
        padding-left: 0;
        margin-bottom: 0;
        text-align: left;
    }
    .hub-block__head--stack .hub-block__icon {
        display: block;
        width: 52px;
        margin-left: 0;
        margin-top: 0;
        order: -1;
    }
}

@media (max-width: 575px) {
    .hub__cta { width: 100%; justify-content: center; }
}


/* ===================== FOOTER (Smart China) ===================== */
.sc-footer{
    background:#1b1a1a;
    border-top:4px solid #cf2026;
    color:#c4c4c4;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
}
.sc-footer a{text-decoration:none; color:inherit;}
.sc-footer__wrap{max-width:1180px; margin:0 auto; padding:clamp(44px,5vw,72px) clamp(20px,4vw,40px) 0;}
.sc-footer__grid{
    display:grid; grid-template-columns:1.7fr 1fr 1.3fr;
    gap:clamp(28px,4vw,56px);
    padding-bottom:clamp(32px,4vw,52px);
}

/* marca */
.sc-footer__logo{display:inline-flex; align-items:center; margin-bottom:20px;}
.sc-footer__logo img{
    height:42px; width:auto; display:block;
    filter:brightness(0) invert(1);   /* logo escura -> branca no fundo escuro */
}
.sc-footer__tag{color:#a6a6a6; font-size:.94rem; line-height:1.75; margin:0 0 22px;}
.sc-social{display:flex; gap:12px;}
.sc-social a{
    width:40px; height:40px; border-radius:50%;
    border:1px solid #3d3b3b; display:grid; place-items:center;
    color:#dcdcdc; font-size:1.05rem;
    transition:background .25s, border-color .25s, color .25s, transform .2s;
}
.sc-social a:hover{background:#cf2026; border-color:#cf2026; color:#fff; transform:translateY(-3px);}

/* colunas de links */
.sc-footer__h{
    color:#fff; font-size:.82rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; margin:6px 0 20px;
}
.sc-footer__links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.sc-footer__links a{color:#b3b3b3; font-size:.96rem; transition:color .2s, padding-left .2s;}
.sc-footer__links a:hover{color:#fff; padding-left:4px;}

/* contato */
.sc-contact{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.sc-contact li{display:flex; align-items:center; gap:12px; color:#c4c4c4; font-size:.95rem;}
.sc-contact li i{color:#e0e0e0; font-size:1.05rem; width:20px; text-align:center; flex:0 0 auto;}
.sc-contact li a{color:#c4c4c4; transition:color .2s;}
.sc-contact li a:hover{color:#fff;}

/* barra inferior */
.sc-footer__bottom{
    border-top:1px solid #333131;
    padding:22px 0 26px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
}
.sc-footer__copy{margin:0; color:#8f8d8d; font-size:.88rem;}
.sc-footer__legal{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.sc-footer__legal a{color:#b3b3b3; font-size:.88rem; transition:color .2s;}
.sc-footer__legal a:hover{color:#fff;}
.sc-footer__sep{width:5px; height:5px; border-radius:50%; background:#cf2026; display:inline-block;}

@media (max-width:860px){
    .sc-footer__grid{grid-template-columns:1fr 1fr;}
    .sc-footer__brand{grid-column:1 / -1;}
}
@media (max-width:520px){
    .sc-footer__grid{grid-template-columns:1fr;}
    .sc-footer__bottom{flex-direction:column; align-items:flex-start;}
}