/* R Center Supermercados · estilos compartilhados por todas as páginas */
/* =========================================================
   1. FONTES DA MARCA
   Gotham Rounded: títulos, botões e menus.
   Helvetica: textos corridos.
   Coloque os arquivos da Gotham Rounded em /fonts (licença
   web da Hoefler&Co.). Enquanto não existirem, o navegador
   usa a Gotham instalada no aparelho ou cai na Nunito.
   ========================================================= */
@font-face {
  font-family: "Gotham Rounded";
  src: local("Gotham Rounded Book"), local("GothamRounded-Book"),
       url("fonts/GothamRounded-Book.woff2") format("woff2"),
       url("fonts/GothamRounded-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham Rounded";
  src: local("Gotham Rounded Medium"), local("GothamRounded-Medium"),
       url("fonts/GothamRounded-Medium.woff2") format("woff2"),
       url("fonts/GothamRounded-Medium.woff") format("woff");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham Rounded";
  src: local("Gotham Rounded Bold"), local("GothamRounded-Bold"),
       url("fonts/GothamRounded-Bold.woff2") format("woff2"),
       url("fonts/GothamRounded-Bold.woff") format("woff");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. DESIGN TOKENS
   ========================================================= */
:root {
  /* Cores da marca */
  --c-orange: #FF740F;
  --c-orange-light: #FF8D09;
  --c-orange-deep: #EB4515;
  --c-yellow: #FFB900;
  --c-brown: #671905;
  --c-blue: #01499D;
  --c-blue-2: #2D4C95;
  --c-white: #FFFFFF;
  --c-cream: #FAF8F5;
  --c-ink: #1A1A1A;
  --c-muted: #676767;

  /* Derivadas (bordas, placeholders) */
  --c-line: #EAE3D9;
  --c-cream-2: #F3ECE3;
  --c-dot: #8E867C;
  --c-whatsapp: #25D366;
  --c-whatsapp-ink: #0B3B1E;
  --c-vita: #002A15; /* verde do Vita Park Mall (seção da loja Eusébio) */

  /* Gradientes oficiais — usar com moderação */
  --grad-warm: linear-gradient(135deg, #EB4515 0%, #FF740F 100%);
  --grad-cool: linear-gradient(135deg, #2D4C95 0%, #01499D 100%);

  /* Tipografia */
  --font-display: "Gotham Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui: var(--font-display);
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-display: 700;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

  /* Espaçamento */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(64px, 8vw, 120px);

  /* Formas — cantos generosos, coerentes com o logo */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Sombras (quentes e discretas) */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .06), 0 2px 10px rgba(103, 25, 5, .05);
  --shadow-md: 0 14px 34px -14px rgba(103, 25, 5, .22);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;

  /* Foco */
  --focus: var(--c-blue);
}
@media (min-width: 1024px) { :root { --header-h: 84px; } }

/* =========================================================
   3. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Barra de rolagem da página na cor da marca */
html { scrollbar-color: var(--c-orange) var(--c-cream); scrollbar-width: auto; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-cream); }
::-webkit-scrollbar-thumb { background: var(--c-orange); border-radius: 999px; border: 3px solid var(--c-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--c-orange-deep); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-blue); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark { --focus: var(--c-yellow); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--c-blue); color: #fff; padding: 12px 20px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================
   4. LAYOUT E TIPOGRAFIA
   ========================================================= */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.bg-white { background: var(--c-white); }
.bg-cream { background: var(--c-cream); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-brown);
}
.eyebrow::before {
  content: ""; width: 22px; height: 4px; border-radius: var(--r-pill); background: var(--c-orange);
}
.on-dark .eyebrow { color: var(--c-yellow); }
.on-dark .eyebrow::before { background: var(--c-yellow); }

.h2 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2);
  line-height: 1.04; letter-spacing: -.01em; color: var(--c-blue);
  margin-top: var(--s-3); text-wrap: balance;
}
.on-dark .h2 { color: #fff; }
.hl {
  background: linear-gradient(transparent 62%, rgba(255, 185, 0, .55) 62%, rgba(255, 185, 0, .55) 92%, transparent 92%);
  padding-inline: .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.lead { font-size: var(--fs-lg); color: var(--c-muted); max-width: 58ch; margin-top: var(--s-4); }
.on-dark .lead { color: rgba(255, 255, 255, .88); }

/* Gotham Rounded em menus, rótulos e títulos menores; Helvetica fica com o texto corrido */
.nav-list a, .eyebrow, .slide-kicker, .shortcut-title, .store-community strong, .dept-name,
.h3, .post-title, .chip, .social-link strong, .footer-title, .footer-store strong,
.chooser-option strong, .cookie h2, .about-badge, .app-chip, .store-tag, .ph-tag {
  font-family: var(--font-ui);
}

.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 56px); }
/* Cabeçalho centralizado (usado em Nossas Lojas) */
.section-head--center { max-width: 760px; margin-inline: auto; display: grid; justify-items: center; gap: 16px; text-align: center; }
.section-head--center .lead { margin-inline: auto; font-size: var(--fs-base); line-height: 1.6; max-width: 60ch; }
.section-head--center .link-arrow { justify-self: center; }
/* laranja mais fechado que o da marca: no fundo claro mantém contraste AA (4.5:1) em texto de 17px */
.section-head--center .lead strong { color: #C2410C; font-weight: 700; }
.section-head--split { max-width: none; display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) auto; }
  .section-head--split > :first-child { max-width: 680px; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font-weight: 700; color: var(--c-blue); text-decoration: none;
  padding-block: 6px; border-bottom: 2px solid var(--c-orange);
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* =========================================================
   5. BOTÕES
   Laranja sempre com texto marrom (contraste AA 4.5:1);
   branco puro só sobre azul ou marrom.
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.btn:hover .icon--move { transform: translateX(3px); }

.btn--orange { background: var(--c-orange); color: var(--c-brown); }
.btn--orange:hover { background: var(--c-orange-light); }
.btn--blue { background: var(--c-blue); color: #fff; }
.btn--blue:hover { background: var(--c-blue-2); }
.btn--outline { background: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.btn--outline:hover { background: var(--c-blue); color: #fff; }
.btn--white { background: #fff; color: var(--c-blue); }
.btn--white:hover { background: var(--c-cream-2); }
.btn--brown { background: var(--c-brown); color: #fff; }
.btn--brown:hover { background: #4f1304; }
.btn--whatsapp { background: var(--c-whatsapp); color: var(--c-whatsapp-ink); }
.btn--whatsapp:hover { background: #3BE07A; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn--block { width: 100%; }

/* =========================================================
   6. MÍDIA E PLACEHOLDERS DE FOTO
   ========================================================= */
.media {
  position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3);
  background-color: var(--c-cream-2);
  background-image: repeating-linear-gradient(135deg, rgba(103, 25, 5, .035) 0 12px, transparent 12px 24px);
}
.media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
img.is-missing { display: none !important; }
.ph-note {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .75rem; line-height: 1.35; font-weight: 500; color: var(--c-muted);
}
.ph-note .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--c-brown); }
.ph-note b { color: var(--c-brown); font-weight: 700; }

/* =========================================================
   7. BARRA SUPERIOR
   ========================================================= */
.topbar { background: var(--c-blue); color: #fff; font-size: var(--fs-xs); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar p { display: flex; align-items: center; gap: 8px; }
.topbar .icon { width: 16px; height: 16px; color: var(--c-yellow); }
.topbar-links { display: flex; gap: 20px; align-items: center; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.topbar a:hover { text-decoration: underline; }
.topbar-phone { display: none !important; }
@media (min-width: 720px) { .topbar-phone { display: inline-flex !important; } }
/* Letreiro de horários: cada loja aparece por alguns segundos, subindo de baixo */
.hours-rotator { position: relative; display: inline-grid; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.hours-item {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(100%);
  transition: opacity .45s var(--ease), transform .45s cubic-bezier(.16, 1, .3, 1);
}
.hours-item.is-active { opacity: 1; transform: none; }
.hours-item.is-leaving { opacity: 0; transform: translateY(-100%); }
.hours-item strong { font-weight: 700; color: var(--c-yellow); margin-right: 4px; }
@media (max-width: 479px) { .hours-long { display: none; } }
@media (max-width: 379px) { .topbar { font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .hours-item { transition: opacity .01ms; transform: none !important; } }

/* =========================================================
   8. HEADER + NAVEGAÇÃO
   ========================================================= */
/* Menu com efeito de vidro fosco: fundo translúcido, desfoque do que passa por trás e borda suave */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
          backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 -1px 0 rgba(26, 26, 26, .04);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 -1px 0 rgba(26, 26, 26, .05), 0 10px 30px -18px rgba(1, 73, 157, .35);
}
/* Navegadores sem desfoque: fundo quase sólido para o texto continuar legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-scrolled { background: rgba(255, 255, 255, .96); }
}
.header-inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.logo { display: block; flex-shrink: 0; margin-right: auto; }
.logo img { width: 150px; height: auto; }
@media (min-width: 1024px) { .logo img { width: 190px; } }
.logo img.is-missing + .logo-fallback { display: inline-block; }
.logo-fallback {
  display: none; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; color: var(--c-blue); min-width: 150px;
}

/* Botão "Compre online" do topo: sobe, ganha brilho laranja e o carrinho dá uma balançada */
.header-cta {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
}
.header-cta:hover, .header-cta:focus-visible {
  background: var(--c-orange-light); transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255, 116, 15, .2), 0 12px 24px -10px rgba(255, 116, 15, .85);
}
.header-cta:active { transform: translateY(0); box-shadow: 0 0 0 2px rgba(255, 116, 15, .25); }
@media (prefers-reduced-motion: no-preference) {
  .header-cta:hover::after, .header-cta:focus-visible::after { transform: translateX(120%); transition: transform .7s var(--ease); }
  .header-cta:hover .icon, .header-cta:focus-visible .icon { animation: cart-wiggle .6s var(--ease); }
  @keyframes cart-wiggle {
    0%, 100% { transform: rotate(0) translateX(0); }
    25% { transform: rotate(-12deg) translateX(-1px); }
    50% { transform: rotate(8deg) translateX(2px); }
    75% { transform: rotate(-4deg); }
  }
}

@media (max-width: 419px) {
  .header-cta { width: 48px; padding: 0; }
  .header-cta .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.nav-toggle {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: var(--r-pill); background: var(--c-cream); color: var(--c-blue);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .i-close { display: none; }
.site-header.is-open .nav-toggle .i-open { display: none; }
.site-header.is-open .nav-toggle .i-close { display: block; }

.nav { display: none; }
.site-header.is-open .nav {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  /* quase opaco: o desfoque não funciona dentro do header (que já desfoca), então garantimos a leitura */
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--shadow-md);
  padding: 8px var(--gutter) 28px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; border-bottom: 1px solid var(--c-line);
  font-size: 1.125rem; font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.nav-list a[aria-current="page"] { color: var(--c-blue); }
.nav-list .icon { color: var(--c-orange-deep); }
.nav-extra { margin-top: 20px; display: grid; gap: 12px; font-size: var(--fs-sm); color: var(--c-muted); }
.nav-extra a { color: var(--c-blue); font-weight: 700; }

@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav, .site-header.is-open .nav {
    display: block; position: static; padding: 0; border: 0; box-shadow: none; max-height: none; overflow: visible;
    margin-right: 12px;
  }
  .nav-list { display: flex; gap: 2px; }
  .nav-list a {
    position: relative; padding: 10px 12px; border: 0; border-radius: var(--r-pill);
    font-size: .975rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  /* Hover: o texto sobe um pouco, fica azul e um traço laranja cresce do centro */
  .nav-list a { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .nav-list a::before {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: var(--r-pill);
    background: var(--c-orange); transform: scaleX(0); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  .nav-list a:hover, .nav-list a:focus-visible { color: var(--c-blue); transform: translateY(-2px); }
  .nav-list a:hover::before, .nav-list a:focus-visible::before { transform: scaleX(1); }
  .nav-list a[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px;
    border-radius: 50%; background: var(--c-orange); transition: opacity var(--dur) var(--ease);
  }
  .nav-list a[aria-current="page"]:hover::after { opacity: 0; }
  /* passando o mouse no menu, os outros itens ficam mais apagados para destacar o escolhido */
  .nav-list:hover a:not(:hover) { color: rgba(26, 26, 26, .62); }
  .nav-list:hover a[aria-current="page"]:not(:hover) { color: rgba(1, 73, 157, .6); }
  .nav-list .icon, .nav-extra { display: none; }
}

/* =========================================================
   9. HERO — CARROSSEL
   ========================================================= */
/* Banner ocupa toda a largura da página, sem cantos nem margens */
.hero { padding-top: 0; }
.hero > .container { width: 100%; max-width: none; }
.carousel {
  position: relative; overflow: hidden; border-radius: 0;
  aspect-ratio: 4 / 5; background: var(--c-cream-2); isolation: isolate;
}
@media (min-width: 768px) { .carousel { aspect-ratio: 3 / 1; } }
.carousel-track {
  display: flex; height: 100%; touch-action: pan-y;
  transition: transform .7s var(--ease); will-change: transform;
}
.slide { position: relative; flex: 0 0 100%; height: 100%; }
.slide > a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.slide picture img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.slide > a:focus-visible { outline-offset: -6px; border-radius: inherit; }

/* Arte de reserva: aparece enquanto o banner real não for enviado */
.slide-art {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 28px 24px 64px;
}
.slide-art--sun { background: var(--c-yellow); color: var(--c-brown); }
.slide-art--blue { background: var(--grad-cool); color: #fff; }
.slide-art--orange { background: var(--c-orange); color: var(--c-brown); }
.slide-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.slide-art--blue .slide-kicker { color: var(--c-yellow); }
.slide-title {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display);
  line-height: .98; margin: 10px 0 12px; max-width: 11ch; text-wrap: balance;
}
.slide-sub { font-size: var(--fs-base); max-width: 34ch; font-weight: 500; }
.slide-cta { margin-top: 20px; pointer-events: none; }
.slide-visual {
  position: relative;
  align-self: end; justify-self: end; width: min(62%, 300px); aspect-ratio: 1;
  border-radius: 50%; background: rgba(255, 255, 255, .3);
  display: grid; place-items: center; padding: 28px; text-align: center;
  font-size: .75rem; line-height: 1.35; font-weight: 600;
}
.ph-tag {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  background: rgba(255, 255, 255, .9); color: var(--c-ink);
  font-size: .6875rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
}
@media (min-width: 768px) {
  .slide-art {
    grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr; align-items: center;
    padding: 0 clamp(32px, 6vw, 96px);
  }
  .slide-visual { width: auto; height: 78%; align-self: center; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .slide-title { font-size: clamp(1.75rem, 1rem + 2.4vw, 2.5rem); }
  .slide-sub, .slide-cta { display: none; }
}

.carousel-controls {
  position: absolute; left: 50%; bottom: 32px; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0; padding: 2px 4px;
  background: rgba(26, 26, 26, .32); border-radius: var(--r-pill);
}
/* no desktop ficam no canto direito, acima dos atalhos, sem cobrir textos da arte */
@media (min-width: 768px) { .carousel-controls { bottom: 40px; left: auto; right: 32px; transform: none; } }
.carousel-btn {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
  opacity: .85; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.carousel-btn:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.carousel-btn .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.carousel-btn .i-play { display: none; }
.carousel.is-paused .carousel-btn .i-play { display: block; }
.carousel.is-paused .carousel-btn .i-pause { display: none; }
.carousel-controls :focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.carousel-dots { display: flex; padding-inline: 2px; }
.carousel-dot { display: grid; place-items: center; width: 16px; height: 28px; border: 0; background: none; padding: 0; }
.carousel-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.carousel-dot:hover::before { background: rgba(255, 255, 255, .85); }
.carousel-dot[aria-current="true"]::before { width: 16px; background: #fff; }
.carousel-dot[aria-current="true"] { width: 24px; }

/* =========================================================
   10. ATALHOS RÁPIDOS
   ========================================================= */
/* Atalhos em vidro fosco, sobrepostos à base do banner para o desfoque aparecer */
.shortcuts { position: relative; z-index: 3; margin-top: -20px; padding-top: 0; }
.shortcuts-list {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 48px -24px rgba(1, 73, 157, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shortcuts-list { background: rgba(255, 255, 255, .97); }
}
.shortcut {
  display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%;
  padding: 16px; border: 0; border-radius: var(--r-md); background: transparent; text-align: left;
  color: var(--c-ink); text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.shortcut:hover { background: var(--c-cream); }
.shortcut-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: var(--c-cream-2); color: var(--c-blue);
  transition: transform var(--dur) var(--ease);
}
.shortcut:hover .shortcut-icon { transform: translateY(-2px); }
.shortcut-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.shortcut-desc { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; margin-top: 2px; }
.shortcuts-list > li:first-child { grid-column: 1 / -1; }
.shortcut--featured { flex-direction: row; align-items: center; background: var(--c-orange); color: var(--c-brown); }
.shortcut--featured:hover { background: var(--c-orange-light); }
.shortcut--featured .shortcut-icon { background: rgba(255, 255, 255, .45); color: var(--c-brown); }
.shortcut--featured .shortcut-desc { color: var(--c-brown); }
.shortcut--featured .icon--move { margin-left: auto; }

/* Destaque laranja que desliza até o atalho sob o mouse (ativado pelo JS) */
.shortcuts-list { position: relative; }
.shortcuts-list > li { position: relative; z-index: 1; }
.shortcuts-list > li.shortcut-indicator {
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0;
  border-radius: var(--r-md); background: var(--c-orange); pointer-events: none;
  transition: transform .4s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.shortcuts-list > li.shortcut-indicator.shortcut-indicator::before { content: none; }
.js-indicator .shortcut,
.js-indicator .shortcut:hover,
.js-indicator .shortcut--featured,
.js-indicator .shortcut--featured:hover { background: transparent; color: var(--c-ink); }
.js-indicator .shortcut--featured .shortcut-icon { background: rgba(255, 255, 255, .75); color: var(--c-blue); }
.js-indicator .shortcut .shortcut-icon { background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(26, 26, 26, .06); }
.js-indicator .shortcut--featured .shortcut-desc { color: var(--c-muted); }
.js-indicator .shortcut { transition: color .3s var(--ease); }
.js-indicator .shortcut .shortcut-icon { transition: background-color .3s var(--ease), color .3s var(--ease), transform var(--dur) var(--ease); }
.js-indicator .shortcut.is-active { color: var(--c-brown); }
.js-indicator .shortcut.is-active .shortcut-icon { background: rgba(255, 255, 255, .45); color: var(--c-brown); }
.js-indicator .shortcut.is-active .shortcut-desc { color: var(--c-brown); }
@media (prefers-reduced-motion: reduce) { .shortcuts-list > li.shortcut-indicator { transition: none; } }
@media (min-width: 768px) {
  .shortcuts { margin-top: -24px; }
  .shortcuts-list { grid-template-columns: repeat(4, 1fr); padding: 10px; }
}
@media (min-width: 1180px) {
  .shortcuts-list { grid-template-columns: 1.35fr repeat(4, 1fr); }
  .shortcuts-list > li:first-child { grid-column: auto; }
  .shortcut { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .shortcuts-list > li + li { position: relative; }
  .shortcuts-list > li + li:not(:nth-child(2))::before {
    content: ""; position: absolute; left: -3px; top: 22%; bottom: 22%; width: 1px; background: var(--c-line);
  }
}

/* =========================================================
   11. NOSSAS LOJAS
   ========================================================= */
.stores-grid { display: grid; gap: 24px; }
/* 3 lojas lado a lado no desktop, 2 por linha no tablet, 1 no celular */
@media (min-width: 720px) { .stores-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } }
@media (min-width: 1100px) {
  .stores-grid { grid-template-columns: repeat(3, 1fr); }
  .stores-grid .store-body { padding: 28px; }
  .stores-grid .store-actions { grid-template-columns: 1fr; }
}
.store-card {
  position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.store-card { display: flex; flex-direction: column; }
.store-body { flex: 1; display: flex; flex-direction: column; }
.store-body > .store-community, .store-body > .store-soon-note { margin-top: auto; }
.store-body > .store-actions { margin-bottom: 20px; }
.store-card:hover { box-shadow: var(--shadow-md); }
.store-card:hover .media img { transform: scale(1.03); }
.store-card .media { --ratio: 16 / 10; }
.store-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
}
.store-tag--blue { background: var(--c-blue); color: #fff; }
.store-tag--orange { background: var(--c-orange); color: var(--c-brown); }
.store-tag--yellow { background: var(--c-yellow); color: var(--c-brown); }
.store-card--soon { background: var(--c-white); }
.store-card--soon .store-name { margin-top: 8px; }
.store-mall { color: var(--c-ink); font-weight: 700; }
.store-soon-text { margin-top: 12px; color: var(--c-ink); }
.store-soon-note { padding-top: 4px; font-size: var(--fs-xs); color: var(--c-muted); }
.store-body { padding: 24px; }
@media (min-width: 600px) { .store-body { padding: 32px; } }
.store-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.05; color: var(--c-blue); }
.store-info { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 10px; color: var(--c-muted); font-size: var(--fs-sm); }
.store-info li { display: flex; gap: 10px; align-items: flex-start; }
.store-info address { font-style: normal; }
.store-info .icon { color: var(--c-orange-deep); margin-top: 2px; width: 18px; height: 18px; }
.store-actions { display: grid; gap: 10px; }
@media (min-width: 480px) { .store-actions { grid-template-columns: 1fr 1fr; } }
.store-community {
  display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 20px;
  border-top: 1px dashed var(--c-line); color: var(--c-ink); text-decoration: none;
}
.store-community-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-whatsapp); color: var(--c-whatsapp-ink); flex-shrink: 0;
}
.store-community strong { display: block; color: var(--c-blue); font-size: 1rem; }
.store-community span { font-size: var(--fs-xs); color: var(--c-muted); }
.store-community .icon--move { margin-left: auto; color: var(--c-blue); transition: transform var(--dur) var(--ease); }
.store-community:hover .icon--move { transform: translateX(4px); }
.store-community:hover strong { text-decoration: underline; }
.central-line { margin-top: 28px; font-size: var(--fs-sm); color: var(--c-muted); text-align: center; text-wrap: balance; }
.central-line .icon { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.central-line .icon { color: var(--c-orange-deep); }
.central-line a { font-weight: 700; white-space: nowrap; }

/* =========================================================
   12. DEPARTAMENTOS (bento)
   ========================================================= */
.depts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dept { position: relative; }
.dept a { display: block; height: 100%; color: #fff; text-decoration: none; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.dept .media { --ratio: 4 / 5; height: 100%; border-radius: inherit; }
.depts > .dept--horti { grid-column: 1 / -1; }
.dept--horti .media { --ratio: 16 / 11; }
.dept .media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(52, 14, 3, .86) 0%, rgba(52, 14, 3, .5) 38%, rgba(52, 14, 3, 0) 66%);
}
.dept-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px; }
.dept-name { font-size: 1.125rem; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.dept-call { font-size: var(--fs-xs); line-height: 1.4; color: rgba(255, 255, 255, .92); margin-top: 4px; }
.dept-arrow {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-orange); color: var(--c-brown); margin-left: auto;
  opacity: 0; transform: translateX(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dept-arrow .icon { width: 16px; height: 16px; }
.dept a:hover .dept-arrow, .dept a:focus-visible .dept-arrow { opacity: 1; transform: none; }
.dept a:hover img { transform: scale(1.04); }
.dept--horti .dept-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1; }
.dept--horti .dept-call { font-size: var(--fs-sm); max-width: 40ch; }
@media (min-width: 600px) { .dept-text { padding: 22px; } .dept-name { font-size: 1.25rem; } .dept-call { font-size: var(--fs-sm); } }
@media (min-width: 1024px) {
  .depts {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px 250px 210px;
    grid-template-areas:
      "horti horti pada acou"
      "horti horti frio acou"
      "bebi  bebi  merc merc";
    gap: 16px;
  }
  .dept .media { aspect-ratio: auto; }
  .depts > .dept--horti { grid-area: horti; }
  .depts > .dept--pada { grid-area: pada; }
  .depts > .dept--acou { grid-area: acou; }
  .depts > .dept--frio { grid-area: frio; }
  .depts > .dept--bebi { grid-area: bebi; }
  .depts > .dept--merc { grid-area: merc; }
  .dept-text { padding: 26px; }
}

/* =========================================================
   12b. MARCAS PARCEIRAS (loop horizontal)
   ========================================================= */
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-blue);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500;
}
.marquee-toggle:hover { border-color: var(--c-blue); }
.marquee-toggle .icon { width: 18px; height: 18px; }
.marquee-toggle .i-play { display: none; }
.brands.is-paused .marquee-toggle .i-play { display: block; }
.brands.is-paused .marquee-toggle .i-pause { display: none; }
.marquee {
  position: relative; overflow: hidden; padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content;
  animation: marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .brands.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }
/* Duas faixas: a de baixo anda para a direita */
.marquee + .marquee { margin-top: 8px; }
.marquee--reverse .marquee-track { animation-direction: reverse; }
.brand {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 150px; height: 88px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.brand img {
  max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.brand:hover img { transform: scale(1.06); }
.brand-ph { display: none; font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.brand img.is-missing + .brand-ph { display: block; }
.brand:has(img.is-missing) { border-style: dashed; background: var(--c-cream); }
@media (min-width: 900px) { .brand { width: 200px; height: 108px; padding: 18px 24px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee-track { animation: none; padding-inline: var(--gutter); }
  .marquee-track [aria-hidden="true"] { display: none; }
  .marquee-toggle { display: none; }
}

/* =========================================================
   13. CLUBE DE DESCONTOS
   ========================================================= */
/* Faixa azul ocupando toda a largura da página */
.club-band {
  background: var(--grad-cool); color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
}
.club-band::before {
  content: ""; position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; border-radius: 50%;
  right: -200px; top: -260px; background: rgba(255, 255, 255, .05);
}
.loyalty { display: grid; gap: 40px; padding-block: 48px; }
@media (min-width: 1024px) {
  /* sem espaço sobrando em cima: a modelo encosta na base da faixa */
  .loyalty { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: end; padding-block: 40px 0; }
  .loyalty > :first-child { align-self: center; padding-bottom: 40px; }
}
.club-logo { width: min(100%, 300px); height: auto; margin-bottom: 8px; }
/* Botão principal do Clube: laranja, maior e com brilho para se destacar no azul */
.btn--lg { min-height: 58px; padding: 14px 30px; font-size: 1.0625rem; }
.btn--glow { box-shadow: 0 0 0 6px rgba(255, 116, 15, .25), 0 14px 28px -10px rgba(255, 116, 15, .8); }
.btn--glow:hover { box-shadow: 0 0 0 9px rgba(255, 141, 9, .28), 0 16px 32px -10px rgba(255, 116, 15, .9); transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .btn--glow { animation: glow-pulse 2.6s var(--ease) infinite; }
  .btn--glow:hover { animation: none; }
  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 116, 15, .25), 0 14px 28px -10px rgba(255, 116, 15, .8); }
    50% { box-shadow: 0 0 0 12px rgba(255, 116, 15, .12), 0 14px 28px -10px rgba(255, 116, 15, .8); }
  }
}
/* Botões de ação com pulso: um anel que se expande e some, chamando a atenção sem piscar */
.btn--pulse { position: relative; isolation: isolate; box-shadow: 0 14px 28px -12px var(--pulse-shadow, rgba(0, 0, 0, .45)); }
.btn--pulse:hover { transform: translateY(-2px) scale(1.03); }
.btn--pulse::before, .btn--pulse::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  border: 2px solid var(--pulse-color); opacity: 0; pointer-events: none;
}
.btn--whatsapp.btn--pulse { --pulse-color: #25D366; --pulse-shadow: rgba(37, 211, 102, .7); }
.btn--brown.btn--pulse { --pulse-color: var(--c-brown); --pulse-shadow: rgba(103, 25, 5, .6); }
@media (prefers-reduced-motion: no-preference) {
  .btn--pulse { animation: btn-beat 2.4s var(--ease) infinite; }
  .btn--pulse::before, .btn--pulse::after { animation: btn-ring 2.4s ease-out infinite; }
  .btn--pulse::after { animation-delay: .8s; }
  .btn--pulse:hover, .btn--pulse:focus-visible { animation: none; }
  .btn--pulse:hover::before, .btn--pulse:hover::after { animation: none; }
  @keyframes btn-ring {
    0% { transform: scale(1); opacity: .75; }
    100% { transform: scale(1.18, 1.45); opacity: 0; }
  }
  @keyframes btn-beat {
    0%, 60%, 100% { transform: scale(1); }
    10% { transform: scale(1.04); }
    20% { transform: scale(1); }
  }
}
.club-steps { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.club-steps li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.club-steps span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-yellow); color: var(--c-brown); font-family: var(--font-ui); font-weight: 700; font-size: .875rem;
}
/* Modelo do Clube com os benefícios em "pílulas" ao redor */
.club-visual { position: relative; display: grid; justify-items: center; }
.club-photo { position: relative; display: grid; justify-items: center; width: 100%; }
.club-photo::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(82%, 330px); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 141, 9, .95), rgba(235, 69, 21, .9));
}
.club-model {
  position: relative; z-index: 1; width: min(80%, 380px); height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .25));
}
.club-badges { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; position: relative; z-index: 2; }
.club-badge {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fff; color: var(--c-ink); border-radius: var(--r-pill);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
  font-family: var(--font-ui); font-weight: 700; font-size: .875rem; line-height: 1.2;
}
.club-badge .dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-orange-deep); box-shadow: 0 0 0 5px rgba(235, 69, 21, .18);
}
@media (max-width: 379px) { .club-badges { grid-template-columns: 1fr; } }

/* Desktop: a modelo encosta na base do bloco azul e as pílulas flutuam ao redor dela */
@media (min-width: 1024px) {
  .club-visual {
    align-self: end; height: 500px;
  }
  .club-photo { position: absolute; inset: 0; }
  .club-photo::before { width: 430px; bottom: 30px; }
  .club-model { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 100%; }
  .club-badges { position: absolute; inset: 0; margin: 0; display: block; }
  .club-badge { position: absolute; padding: 14px 20px; font-size: .9375rem; white-space: nowrap; }
  /* etiquetas nos cantos, longe do rosto: duas acima dos ombros e duas na altura dos braços */
  .club-badge--1 { top: 2%; left: -10%; }
  .club-badge--2 { top: 10%; right: -4%; }
  .club-badge--3 { top: 74%; left: -12%; }
  .club-badge--4 { top: 64%; right: -4%; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .club-badge { animation: badge-float 5s ease-in-out infinite; }
  .club-badge--2 { animation-delay: -1.2s; }
  .club-badge--3 { animation-delay: -2.4s; }
  .club-badge--4 { animation-delay: -3.6s; }
  @keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}

/* =========================================================
   13b. CARTÃO R CENTER
   ========================================================= */
.card-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.card-visual { position: relative; display: grid; place-items: center; padding: 40px 0; }
.card-visual::before {
  content: ""; position: absolute; width: min(86%, 420px); aspect-ratio: 1; border-radius: 50%; background: var(--c-yellow);
}
/* Destaque do parcelamento e benefícios em duas colunas */
.card-highlight {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 20px; padding: 10px 18px;
  background: var(--c-orange); color: var(--c-brown); border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: var(--fs-base);
}
.card-highlight strong { font-size: 1.1875rem; }
.card-benefits { gap: 12px 24px; margin-top: 20px; font-size: var(--fs-sm); }
@media (min-width: 560px) { .card-benefits { grid-template-columns: 1fr 1fr; } }
.card-mockup {
  position: relative; z-index: 1; width: min(100%, 560px); height: auto;
  filter: drop-shadow(0 24px 30px rgba(103, 25, 5, .22));
  transition: translate .5s var(--ease);
}
.card-visual:hover .card-mockup { translate: 0 -6px; }
/* Cartões flutuando: sobem e descem devagar, com uma leve inclinação */
@media (prefers-reduced-motion: no-preference) {
  .card-mockup { animation: card-float 6s ease-in-out infinite; }
  @keyframes card-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-1deg); }
  }
}
.check-list { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.check-list .check {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-yellow); color: var(--c-brown);
}
.check-list .check .icon { width: 15px; height: 15px; stroke-width: 3; }
.rc-card {
  position: relative; z-index: 1; width: min(88%, 400px); aspect-ratio: 1.586; border-radius: 22px;
  background: var(--grad-warm); color: var(--c-brown); padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden;
  box-shadow: 0 30px 50px -24px rgba(103, 25, 5, .55);
  transition: transform .4s var(--ease);
}
.rc-card::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  right: -22%; bottom: -48%; background: rgba(255, 185, 0, .35);
}
.card-visual:hover .rc-card { transform: translateY(-6px); }
.rc-card img { width: 150px; height: auto; position: relative; z-index: 1; }
.rc-card-fallback { display: none; font-family: var(--font-display); font-weight: var(--fw-display); color: #fff; font-size: 1.5rem; position: relative; z-index: 1; }
.rc-card img.is-missing + .rc-card-fallback { display: block; }
.rc-card-chip { width: 42px; height: 32px; border-radius: 7px; background: rgba(255, 255, 255, .55); position: relative; z-index: 1; }
.rc-card-name { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 1; color: #fff; }

/* =========================================================
   14. APP
   ========================================================= */
.app-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .app-grid { grid-template-columns: 1.1fr 1fr; gap: 72px; } }
.app-visual { position: relative; display: grid; place-items: center; padding-block: 24px; }
/* Seção do app em laranja: textos em marrom para manter contraste AA sobre o laranja */
.app-band { background: var(--c-yellow); color: var(--c-brown); }
.app-band .eyebrow { color: var(--c-brown); }
.app-band .eyebrow::before { background: var(--c-brown); }
.app-band .h2 { color: var(--c-brown); }
.app-band .hl { background: linear-gradient(transparent 62%, rgba(255, 255, 255, .45) 62%, rgba(255, 255, 255, .45) 92%, transparent 92%); }
.app-band .lead, .app-band .app-features li { color: var(--c-brown); }
/* Bullets do App em cartões: fundo claro translúcido, ícone em círculo marrom com traço amarelo */
.app-band .app-features { gap: 10px; }
@media (min-width: 560px) and (max-width: 899px), (min-width: 1200px) { .app-band .app-features { grid-template-columns: 1fr 1fr; } }
.app-band .app-features a { white-space: nowrap; }
.app-band .app-features li {
  gap: 12px; padding: 12px 16px 12px 12px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(103, 25, 5, .1);
  font-weight: 600; line-height: 1.35;
  box-shadow: 0 10px 22px -18px rgba(103, 25, 5, .6);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.app-band .app-features li:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(103, 25, 5, .7); }
.app-band .app-features .icon {
  box-sizing: border-box; flex-shrink: 0; width: 42px; height: 42px; padding: 10px; border-radius: 50%;
  background: var(--c-brown); color: var(--c-yellow);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.app-band .app-features li:hover .icon { transform: rotate(-8deg) scale(1.08); }
.app-band .app-features a { color: var(--c-brown); font-weight: 700; }
.app-band .app-visual::before { background: var(--c-orange); }
.app-band :focus-visible { --focus: var(--c-brown); }
.app-visual::before {
  content: ""; position: absolute; width: min(88%, 420px); aspect-ratio: 1; border-radius: 50%; background: var(--c-yellow);
}
.phone {
  position: relative; width: min(64%, 270px); aspect-ratio: 9 / 19;
  background: var(--c-ink); border-radius: 44px; padding: 10px;
  box-shadow: 0 30px 50px -28px rgba(103, 25, 5, .55);
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 30%; height: 22px; border-radius: var(--r-pill); background: var(--c-ink);
}
.phone .media { height: 100%; aspect-ratio: auto; border-radius: 34px; background-color: #fff; }
.phone .ph-note { top: 56px; }
/* Ao chegar na seção do app: o celular sobe de baixo e os selos aparecem logo depois */
@media (prefers-reduced-motion: no-preference) {
  .app-band { overflow: hidden; }
  .js .app-visual .phone {
    opacity: 0; transform: translateY(160px) rotate(-4deg);
    transition: opacity .6s var(--ease), transform 1.1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .15s;
  }
  .js .app-visual.is-in .phone { opacity: 1; transform: none; }
  .js .app-visual .app-chip { opacity: 0; transition: opacity .5s var(--ease); }
  .js .app-visual.is-in .app-chip { opacity: 1; }
  .js .app-visual.is-in .app-chip--1 { transition-delay: .9s; }
  .js .app-visual.is-in .app-chip--2 { transition-delay: 1.1s; }
  .js .app-visual.is-in .app-chip--3 { transition-delay: 1.3s; }
}
.app-chip {
  position: absolute; z-index: 3; white-space: nowrap;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  background: #fff; border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink);
}
.app-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-orange-deep); box-shadow: 0 0 0 4px rgba(235, 69, 21, .18); }
.app-chip--1 { left: 0; bottom: 16%; }
.app-chip--2 { right: 0; top: 18%; }
.app-chip--3 { right: 4%; top: 52%; }
@media (min-width: 900px) {
  .app-chip--1 { left: -2%; }
  .app-chip--2 { right: -4%; }
  .app-chip--3 { right: 2%; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .app-chip { animation: badge-float 5s ease-in-out infinite; }
  .app-chip--2 { animation-delay: -1.6s; }
  .app-chip--3 { animation-delay: -3.2s; }
}
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store-badge { display: inline-flex; border-radius: 10px; transition: transform var(--dur) var(--ease); }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { height: 52px; width: auto; }
/* Chamada para baixar: seta pulando para os selos + selos com brilho e sombra, deixando claro que são clicáveis */
.download-cta {
  display: flex; align-items: center; gap: 10px; margin-top: 30px;
  font-size: .9375rem; color: var(--c-brown);
}
.download-cta strong { font-family: var(--font-ui); font-weight: 700; }
.download-cta-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-brown); color: var(--c-yellow);
}
.download-cta-icon .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.store-badges--cta { margin-top: 14px; }
.cta-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .cta-touch { display: none; } .cta-mouse { display: inline; } }
.store-badges--cta .store-badge {
  position: relative; overflow: hidden; border-radius: 12px;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.store-badges--cta .store-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%);
}
.store-badges--cta .store-badge:hover, .store-badges--cta .store-badge:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 0 4px rgba(103, 25, 5, .18), 0 18px 30px -14px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .download-cta-icon .icon { animation: dl-bounce 1.6s ease-in-out infinite; }
  @keyframes dl-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
  /* um brilho passa pelos selos a cada poucos segundos */
  .store-badges--cta .store-badge::after { animation: badge-shine 4s ease-in-out infinite; }
  .store-badges--cta .store-badge + .store-badge::after { animation-delay: .35s; }
  @keyframes badge-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
}
.badge-fallback {
  display: none; align-items: center; gap: 10px; height: 52px; padding: 0 18px;
  background: #000; color: #fff; border-radius: 10px; font-size: .75rem; line-height: 1.15; text-align: left;
}
.badge-fallback b { display: block; font-size: 1.0625rem; }
.store-badge img.is-missing + .badge-fallback { display: inline-flex; }
.app-features { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.app-features li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.app-features .icon { color: var(--c-orange-deep); }

/* =========================================================
   15. SOBRE
   ========================================================= */
.about-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.about-photos { position: relative; padding-bottom: 18%; padding-right: 14%; }
.about-photos .media--main { --ratio: 3 / 4; border-radius: var(--r-xl); }
.about-photos .media--detail {
  --ratio: 1; position: absolute; right: 0; bottom: 0; width: 46%;
  border-radius: var(--r-lg); border: 8px solid #fff;
}
/* Zoom suave nas fotos do Sobre ao passar o mouse */
.about-photos .media img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.about-photos .media:hover img { transform: scale(1.08); }
.about-photos .media--detail { transition: box-shadow .6s var(--ease); }
.about-photos .media--detail:hover { box-shadow: 0 24px 40px -20px rgba(1, 73, 157, .45); }
.about-badge {
  position: absolute; left: -8px; bottom: calc(18% + 20px); z-index: 1;
  background: var(--c-orange); color: var(--c-brown); border-radius: var(--r-md);
  padding: 12px 16px; font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; max-width: 190px;
}
.stats { list-style: none; padding: 0; margin: 36px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-line); }
.stats li { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--c-line); }
.stats li:nth-child(odd) { border-right: 1px solid var(--c-line); }
.stats li:nth-child(even) { padding-left: 20px; }
.stat-num { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: var(--c-orange-deep); }
.stat-num.is-placeholder {
  font-family: var(--font-body); font-size: .875rem; font-weight: 700; color: var(--c-brown);
  border: 1.5px dashed var(--c-orange); border-radius: 8px; padding: 8px 10px; display: inline-block; line-height: 1.2;
}
/* Título da história um pouco menor que os outros títulos de seção */
.about-title { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
/* Texto da história em tamanho mais contido */
.about-story { font-size: var(--fs-sm); line-height: 1.6; }
.about-story .lead { margin-top: var(--s-4); font-size: var(--fs-base); }
.about-story p:not(.lead) { margin-top: 10px; color: var(--c-muted); max-width: 58ch; }
.about-story .about-quote {
  margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--c-orange);
  color: var(--c-ink); font-family: var(--font-ui); font-weight: 700; font-size: 1rem; line-height: 1.45;
}
.stat-num { font-variant-numeric: tabular-nums; }
.stat-label { display: block; color: var(--c-muted); font-size: var(--fs-sm); margin-top: 8px; }

/* =========================================================
   15b. VÍDEO
   ========================================================= */
.video-grid { display: grid; gap: 40px; align-items: center; }
/* Selo do YouTube acima do título: ícone vermelho oficial + nome + @ do canal */
.yt-brand {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 18px 10px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); text-decoration: none;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .35);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.yt-logo { width: 36px; height: auto; flex-shrink: 0; }
.yt-word { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -.04em; color: #0F0F0F; }
.yt-handle { padding-left: 10px; border-left: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }
.yt-brand:hover, .yt-brand:focus-visible { border-color: #FF0000; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(255, 0, 0, .55); }
@media (max-width: 400px) { .yt-handle { display: none; } }
@media (min-width: 960px) { .video-grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden;
  background: var(--c-ink); box-shadow: var(--shadow-md);
}
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 26, 26, .65), rgba(26, 26, 26, 0) 50%);
}
.video:hover img { transform: scale(1.03); }
.video-play {
  position: absolute; inset: 0; z-index: 2; margin: auto; width: 84px; height: 84px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--c-orange); color: var(--c-brown);
  box-shadow: 0 0 0 10px rgba(255, 116, 15, .3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-play .icon { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.video:hover .video-play { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255, 116, 15, .25); }
.video-caption {
  position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 1;
  color: #fff; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-sm);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
@media (max-width: 599px) { .video { border-radius: var(--r-lg); } .video-play { width: 68px; height: 68px; } }

/* =========================================================
   16. BLOG
   ========================================================= */
.blog-grid { display: grid; gap: 20px; }
@media (min-width: 960px) { .blog-grid { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; } .post--featured { grid-row: 1 / 3; } }
.post {
  position: relative; display: grid; align-content: start; background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-line); transition: box-shadow var(--dur) var(--ease);
}
.post:hover { box-shadow: var(--shadow-md); }
.post:hover img { transform: scale(1.04); }
.post .media { --ratio: 16 / 10; }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.post-meta { display: flex; gap: 12px; align-items: center; font-size: var(--fs-xs); color: var(--c-muted); }
.chip { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-weight: 700; font-size: .75rem; letter-spacing: .02em; }
.chip--orange { background: var(--c-orange); color: var(--c-brown); }
.chip--yellow { background: var(--c-yellow); color: var(--c-brown); }
.chip--blue { background: var(--c-blue); color: #fff; }
.post-title { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.post-title a { color: var(--c-ink); text-decoration: none; }
.post-title a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post-title a { color: var(--c-blue); }
.post-excerpt { color: var(--c-muted); font-size: var(--fs-sm); }
.post--featured .post-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.08; }
.post--featured .media { --ratio: 4 / 3; }
@media (min-width: 600px) {
  .post--row { grid-template-columns: 200px 1fr; align-content: stretch; }
  .post--row .media { aspect-ratio: auto; height: 100%; min-height: 180px; }
}
@media (min-width: 960px) { .post--featured .post-body { padding: 28px 32px 32px; } }

/* Novidades: 3 últimas postagens */
.news-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.news-card .post-body { flex: 1; }
.news-card .post-excerpt { flex: 1; }
.news-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-sm); color: var(--c-blue);
}
.news-more .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.news-card:hover .news-more .icon { transform: translateX(4px); }
.news-card { grid-template-rows: auto 1fr; }
.news-cta { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* =========================================================
   17. TRABALHE CONOSCO (faixa laranja)
   ========================================================= */
/* A foto recortada da colaboradora "sai" da faixa por cima no desktop */
/* Faixa laranja ocupando toda a largura da página */
.jobs-band { background: var(--c-orange); position: relative; z-index: 1; }
.jobs { color: var(--c-brown); display: grid; position: relative; isolation: isolate; }
.jobs-text { padding: 56px 0 32px; position: relative; z-index: 1; }
.jobs .eyebrow { color: var(--c-brown); }
.jobs .eyebrow::before { background: var(--c-brown); }
.jobs .h2 { color: #fff; text-shadow: 0 2px 0 rgba(103, 25, 5, .3), 0 6px 18px rgba(103, 25, 5, .22); } /* título branco; a sombra marrom ajuda a leitura sobre o laranja */
.jobs .tw-caret { background: #fff; }
.jobs p { margin-top: 14px; font-size: var(--fs-lg); font-weight: 500; max-width: 46ch; }
.jobs .btn { margin-top: 28px; }
.jobs-photo { position: relative; height: 380px; overflow: hidden; }
.jobs-photo::before {
  content: ""; position: absolute; left: 50%; bottom: -12%; width: min(92%, 380px); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: var(--c-yellow);
}
.jobs-photo img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  /* margem em cima para a cabeça da colaboradora passar da faixa sem encostar na seção anterior */
  .jobs-band { margin-top: 72px; }
  .jobs { grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 420px; }
  .jobs-text { padding: 72px 0; }
  .jobs-photo {
    align-self: stretch; height: auto; overflow: visible; border-radius: 0;
  }
  .jobs-photo::before {
    width: 400px; bottom: 0; border-radius: 400px 400px 0 0; aspect-ratio: 1 / 1.05;
    clip-path: inset(0 0 0 0 round 400px 400px 0 0);
  }
  /* 118% da altura: a cabeça passa por cima da borda da faixa */
  .jobs-photo img { height: 118%; filter: drop-shadow(0 18px 30px rgba(103, 25, 5, .25)); }
}

/* =========================================================
   18. REDES SOCIAIS
   ========================================================= */
.social-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .social-grid { grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; } }
.social-list { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--c-line); }
.social-link {
  display: flex; align-items: center; gap: 16px; padding: 16px 12px;
  border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none;
  border-radius: var(--r-md); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-link strong, .social-link .handle { transition: color var(--dur) var(--ease); }
.social-link .social-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--c-line); color: var(--c-blue);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-link strong { display: block; font-size: 1.0625rem; }
.social-link .handle { font-size: var(--fs-xs); color: var(--c-muted); }
.social-link .icon--move { margin-left: auto; color: var(--c-blue); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
/* Hover laranja: a linha ganha fundo laranja claro, o ícone fica laranja e o nome em laranja escuro (contraste AA) */
.social-link:hover, .social-link:focus-visible { background: rgba(255, 116, 15, .1); border-bottom-color: transparent; }
.social-link:hover .social-icon, .social-link:focus-visible .social-icon { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-brown); }
.social-link:hover strong, .social-link:focus-visible strong,
.social-link:hover .handle, .social-link:focus-visible .handle,
.social-link:hover .icon--move, .social-link:focus-visible .icon--move { color: #C2410C; }
.social-link:hover .icon--move, .social-link:focus-visible .icon--move { transform: translateX(4px); }
.insta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 24px; }
.insta-grid a { display: block; border-radius: var(--r-md); overflow: hidden; }
.insta-grid .media { --ratio: 4 / 5; }
.insta-grid .media img { object-position: 50% 35%; }
.insta-grid a:hover img { transform: scale(1.05); }
.insta-grid li:nth-child(even) { transform: translateY(24px); }

/* =========================================================
   19. RODAPÉ
   ========================================================= */
.site-footer { background: var(--c-blue); color: #fff; }
.footer-top { display: grid; gap: 40px; padding-block: 64px 48px; }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.2fr 1fr 1.15fr 1fr; gap: 48px; } }
.footer-brand img { width: 190px; height: auto; }
.footer-brand .logo-fallback { color: #fff; }
.footer-brand img.is-missing + .logo-fallback { display: inline-block; }
.footer-brand p { margin-top: 18px; color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); max-width: 34ch; }
.footer-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-yellow); margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a, .footer-links button {
  color: rgba(255, 255, 255, .9); text-decoration: none; font-size: var(--fs-sm);
  background: none; border: 0; padding: 0; text-align: left;
}
.footer-links a:hover, .footer-links button:hover { color: #fff; text-decoration: underline; }
.footer-store + .footer-store { margin-top: 18px; }
.footer-store strong { display: block; font-size: 1rem; }
.footer-soon {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--c-yellow); color: var(--c-brown); font-size: .6875rem; vertical-align: 2px;
}
.footer-store address a { color: #fff; font-weight: 700; text-decoration: none; }
.footer-store address a:hover { text-decoration: underline; }
/* Selos de parceiros: fundo branco para os logos manterem as cores originais */
.footer-partner, .footer-ra {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; padding: 14px 18px;
  background: #fff; border-radius: var(--r-md); text-decoration: none;
  font-size: var(--fs-xs); line-height: 1.3; color: var(--c-muted);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.footer-partner img { width: 160px; height: auto; }
.footer-ra img { width: 150px; height: auto; }
.footer-partner:hover, .footer-ra:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.footer-store address { font-style: normal; color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); }
.footer-contact { margin-top: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.footer-contact a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.footer-contact a:hover { text-decoration: underline; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .4); color: #fff;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: #fff; color: var(--c-blue); }
.footer-social .icon { width: 20px; height: 20px; }
.footer-apps {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18); padding-block: 28px;
}
.footer-apps .footer-title { margin-bottom: 12px; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-badges a { display: inline-flex; border-radius: 8px; transition: transform var(--dur) var(--ease); }
.footer-badges a:hover { transform: translateY(-2px); }
.footer-badges img { height: 44px; width: auto; }
.footer-seals .footer-title { display: block; margin-bottom: 12px; }
.footer-seals-row { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-seal {
  display: inline-flex; align-items: center; height: 54px; padding: 0 16px;
  background: #fff; border-radius: var(--r-md); text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.footer-seal:hover { transform: translateY(-2px); }
.footer-seal img { width: 120px; height: auto; }
.footer-seal--blindado { padding: 0 12px; }
.footer-seal--blindado img { width: 150px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .18); padding-block: 22px 28px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .8);
}
/* espaço extra para o botão flutuante do WhatsApp não cobrir o texto no fim da página */
.footer-bottom { padding-bottom: 104px; }
.footer-cnpj { display: flex; flex-wrap: wrap; gap: 4px 0; }
.footer-cnpj > span + span::before { content: "|"; opacity: .5; margin-inline: 10px; }
@media (max-width: 719px) {
  .footer-cnpj { flex-direction: column; }
  .footer-cnpj > span + span::before { content: none; }
}

/* =========================================================
   19a. INDICADOR DE ROLAGEM
   ========================================================= */
.scroll-cue {
  position: fixed; z-index: 65; left: 50%; bottom: calc(20px + var(--cookie-space, 0px));
  display: grid; place-items: center; width: 48px; height: 48px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%;
  box-shadow: 0 14px 30px -14px rgba(1, 73, 157, .45);
  color: var(--c-orange-deep);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scroll-cue.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.scroll-cue .icon { width: 22px; height: 22px; stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .icon { animation: cue-bounce 1.6s var(--ease) infinite; }
  @keyframes cue-bounce {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(4px); }
  }
}
/* no desktop, enquanto o aviso de cookies estiver aberto, o indicador fica acima dele */
@media (min-width: 720px) and (max-width: 1279px) {
  body:has(#cookie:not([hidden])) .scroll-cue { bottom: 236px; }
}
.scroll-cue:hover { color: var(--c-brown); background: rgba(255, 255, 255, .92); }

/* =========================================================
   19b. VOLTAR AO INÍCIO (fica logo acima do botão do WhatsApp)
   ========================================================= */
.to-top {
  position: fixed; z-index: 70; right: 20px; bottom: calc(16px + 58px + 12px + var(--cookie-space, 0px));
  display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%;
  background: var(--c-orange); color: var(--c-brown); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--c-orange-light); transform: translateY(-2px); }
.to-top .icon { width: 22px; height: 22px; stroke-width: 2.5; }
@media (min-width: 720px) { .to-top { right: 28px; bottom: calc(24px + 58px + 14px); } }

/* =========================================================
   20. WHATSAPP FLUTUANTE
   ========================================================= */
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + var(--cookie-space, 0px)); z-index: 70;
  /* Só o símbolo, em um círculo; o nome do botão fica para leitores de tela */
  display: grid; place-items: center; width: 58px; height: 58px; padding: 0;
  /* Verde oficial do WhatsApp; ícone escuro para manter contraste (branco sobre #25D366 fica em 2:1) */
  border: 0; border-radius: 50%; background: var(--c-whatsapp); color: var(--c-whatsapp-ink);
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .8);
  transition: transform var(--dur) var(--ease), bottom .3s var(--ease);
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); }
.wa-float .icon { width: 28px; height: 28px; }
@media (min-width: 720px) { .wa-float { right: 24px; bottom: 24px; } }

/* =========================================================
   21. DIÁLOGO DE ESCOLHA DE LOJA (reutilizável)
   ========================================================= */
.chooser {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: #fff; color: var(--c-ink);
  max-height: 90dvh;
}
.chooser::backdrop { background: rgba(26, 26, 26, .55); }
@media (min-width: 640px) { .chooser { margin: auto; width: min(520px, calc(100% - 32px)); border-radius: var(--r-lg); } }
@media (prefers-reduced-motion: no-preference) {
  .chooser[open] { animation: chooser-in .35s var(--ease); }
  @keyframes chooser-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
.chooser-inner { padding: 28px 24px 32px; position: relative; }
@media (min-width: 640px) { .chooser-inner { padding: 36px; } }
.chooser-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--c-cream); color: var(--c-ink);
}
.chooser-close:hover { background: var(--c-cream-2); }
.chooser h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.08; color: var(--c-blue); margin: 10px 48px 0 0; }
.chooser-desc { color: var(--c-muted); margin-top: 10px; font-size: var(--fs-sm); }
.chooser-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.chooser-option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chooser-option:hover { border-color: var(--c-blue); background: var(--c-cream); }
.chooser-option-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--c-cream-2); color: var(--c-blue); flex-shrink: 0; }
.chooser-option strong { display: block; font-size: 1.0625rem; color: var(--c-blue); }
.chooser-option small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.chooser-option .icon--move { margin-left: auto; color: var(--c-blue); }
.chooser-foot { margin-top: 18px; font-size: var(--fs-xs); color: var(--c-muted); }

/* =========================================================
   22. BANNER DE COOKIES (LGPD)
   ========================================================= */
.cookie {
  position: fixed; z-index: 80; left: 12px; right: 12px; bottom: 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 20px; display: grid; gap: 16px;
}
.cookie[hidden] { display: none; }
@media (min-width: 720px) { .cookie { left: 24px; right: auto; bottom: 24px; max-width: 540px; padding: 24px; } }
.cookie-head { display: flex; gap: 12px; align-items: center; }
.cookie-head .icon { color: var(--c-orange-deep); width: 26px; height: 26px; }
.cookie h2 { font-size: 1.0625rem; font-weight: 700; }
.cookie p { font-size: var(--fs-sm); color: var(--c-muted); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { flex: 1 1 160px; }

/* =========================================================
   22b. NOVA LOJA EUSÉBIO: faixa escura para os renders brilharem
   ========================================================= */
.nova-loja {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-vita); color: #fff;
}
.nova-loja::before {
  content: ""; position: absolute; z-index: -1; width: 720px; aspect-ratio: 1; border-radius: 50%;
  left: -260px; bottom: -340px; background: radial-gradient(circle, rgba(46, 160, 90, .35), transparent 65%);
}
.nova-loja .hl { background: linear-gradient(transparent 62%, rgba(255, 185, 0, .6) 62%, rgba(255, 185, 0, .6) 92%, transparent 92%); }
/* Nesta seção o destaque é amarelo: aparece mais que o laranja sobre o verde */
.nova-loja .tw-caret { background: var(--c-yellow); }
.nova-loja-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .nova-loja-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

.nova-loja-features { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
@media (min-width: 560px) { .nova-loja-features { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }
.nova-loja-features li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.nova-loja-features strong { display: block; color: #fff; font-family: var(--font-ui); font-size: 1rem; margin-bottom: 2px; }
.nl-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 185, 0, .16); color: var(--c-yellow);
}
.nl-icon .icon { width: 20px; height: 20px; }

.nova-loja-address {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9375rem; color: rgba(255, 255, 255, .8);
}
.nova-loja-address strong { color: #fff; }
.nova-loja-address .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--c-yellow); margin-top: 1px; }
.nova-loja-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn--yellow { background: var(--c-yellow); color: var(--c-brown); }
.btn--yellow:hover { background: #FFC933; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

/* Logos lado a lado: R Center | Vita Park */
.nl-logos { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); margin-bottom: 28px; }
.nl-logos img { width: auto; height: clamp(40px, 5vw, 54px); }
.nl-logos img + .nl-logos-sep + img { height: clamp(44px, 5.6vw, 60px); }
.nl-logos-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .3); }

/* Galeria: foto grande + miniaturas que trocam a foto */
.nl-main {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9);
}
.nl-main img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .35s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.nl-main:hover img { transform: scale(1.05); }
.nl-main img.is-swapping { opacity: 0; }
.nl-main figcaption {
  position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(0, 42, 21, .78); color: #fff; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nl-badge {
  position: absolute; top: 16px; right: 16px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--c-yellow); color: var(--c-brown); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.nl-thumbs {
  position: relative; list-style: none; padding: 4px 2px 10px; margin: 10px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
@media (max-width: 559px) { .nl-thumbs { grid-auto-columns: calc((100% - 20px) / 3); } }
.nl-thumbs li { scroll-snap-align: start; }
.nl-thumbs::-webkit-scrollbar { height: 6px; }
.nl-thumbs::-webkit-scrollbar-track { background: transparent; }
.nl-thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border: 0; }
.nl-count { margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 500; opacity: .85; }
.nl-nav {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--c-ink); box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nl-nav .icon { width: 22px; height: 22px; }
.nl-nav--prev { left: 14px; }
.nl-nav--next { right: 14px; }
/* Troca automática: barrinha amarela mostra o tempo até a próxima foto */
.nl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .2); }
.nl-progress > span { display: block; height: 100%; background: var(--c-yellow); transform-origin: left; transform: scaleX(0); }
.nl-progress > span.is-running { animation: nl-prog var(--nl-dur, 5s) linear forwards; }
.nova-loja-gallery.is-paused .nl-progress > span { animation-play-state: paused; }
@keyframes nl-prog { to { transform: scaleX(1); } }
.nl-play {
  position: absolute; top: 16px; left: 16px; display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 42, 21, .72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--dur) var(--ease);
}
.nl-play:hover { background: var(--c-yellow); color: var(--c-brown); }
.nl-play .icon { width: 16px; height: 16px; }
.nl-play .i-play { display: none; }
.nl-play[aria-pressed="true"] .i-play { display: block; }
.nl-play[aria-pressed="true"] .i-pause { display: none; }
.nl-main:hover .nl-nav, .nl-nav:focus-visible { opacity: 1; }
.nl-nav:hover { background: var(--c-yellow); }
@media (hover: none) { .nl-nav { opacity: 1; width: 38px; height: 38px; } }
.nl-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent;
  border-radius: var(--r-md); overflow: hidden; background: #000; cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nl-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity var(--dur) var(--ease); }
.nl-thumb span {
  position: absolute; inset: auto 0 0; padding: 18px 8px 7px; text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  color: #fff; font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
}
.nl-thumb:hover { transform: translateY(-2px); }
.nl-thumb:hover img, .nl-thumb.is-active img { opacity: 1; }
.nl-thumb.is-active { border-color: var(--c-yellow); }
.nl-thumb:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.nl-note { margin-top: 12px; font-size: .75rem; color: rgba(255, 255, 255, .6); }

/* =========================================================
   23. MICROINTERAÇÕES AO ROLAR
   ========================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Títulos das seções "digitando" ao aparecer na tela.
   O texto real fica para leitores de tela; as letras animadas são só visuais. */
.tw-w { white-space: nowrap; }
.tw-c { opacity: 0; }
.tw-c.is-on { opacity: 1; }
.tw-caret {
  display: inline-block; width: .08em; height: .9em; margin-left: .04em; vertical-align: -.08em;
  background: var(--c-orange); border-radius: 2px;
  animation: tw-blink .8s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
.tw .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .6s var(--ease); }
.tw.is-typed .hl { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .carousel-track { transition: none; }
}

/* =========================================================
   PÁGINAS INTERNAS · componentes comuns
   ========================================================= */
/* Topo das páginas internas: faixa azul com texto + foto */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-cool); color: #fff; padding-block: clamp(36px, 6vw, 72px); }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; width: 640px; aspect-ratio: 1; border-radius: 50%;
  right: -220px; top: -280px; background: rgba(255, 255, 255, .06);
}
.page-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .page-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 64px; } }
.page-title {
  margin-top: var(--s-3); font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance;
}
.page-hero .lead { color: rgba(255, 255, 255, .88); }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero-media { position: relative; margin: 0; justify-self: center; width: min(100%, 440px); }
.page-hero-media .media { --ratio: 4 / 5; border-radius: var(--r-xl); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.page-hero-media .media img { object-position: 50% 30%; }
.page-hero-badge {
  position: absolute; left: -12px; bottom: 28px; padding: 14px 20px; border-radius: var(--r-lg);
  background: var(--c-orange); color: var(--c-brown); font-family: var(--font-ui); font-size: .9375rem; line-height: 1.25;
  box-shadow: var(--shadow-md);
}
.page-hero-badge strong { display: block; font-size: 1.375rem; }

/* Trilha de navegação: Início › Página */
.breadcrumb ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .75); }
.breadcrumb li + li::before { content: "›"; opacity: .6; }
.breadcrumb a { color: #fff; font-weight: 700; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-yellow); font-weight: 700; }

/* Chamada final em faixa laranja */
.cta-final { display: grid; gap: 28px; align-items: center; padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .cta-final { grid-template-columns: 1fr auto; gap: 48px; } }
.cta-final .eyebrow { color: var(--c-brown); }
.cta-final .eyebrow::before { background: var(--c-brown); }
.cta-final .h2 { color: #fff; text-shadow: 0 2px 0 rgba(103, 25, 5, .3), 0 6px 18px rgba(103, 25, 5, .22); max-width: 18ch; }
.cta-final-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   PÁGINA SOBRE
   ========================================================= */
.story-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .story-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.story-text p:not(.lead) { margin-top: 14px; color: var(--c-muted); max-width: 60ch; }
.story-quote {
  margin: 28px 0 0; padding: 18px 22px; border-left: 4px solid var(--c-orange); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-cream); font-family: var(--font-ui); font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--c-brown);
}

/* Linha do tempo vertical */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--c-line); }
.timeline-item { position: relative; padding: 0 0 32px 44px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--c-orange); box-shadow: 0 0 0 5px rgba(255, 116, 15, .15);
}
.timeline-item--next::before { border-color: var(--c-vita); box-shadow: 0 0 0 5px rgba(0, 42, 21, .12); }
.timeline-when {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-cream-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--c-brown);
}
.timeline-item--next .timeline-when { background: var(--c-vita); color: var(--c-yellow); }
.timeline-title { margin-top: 10px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; color: var(--c-blue); }
.timeline-item p { margin-top: 6px; color: var(--c-muted); }
.timeline-item .link-arrow { margin-top: 10px; }

/* Números em faixa azul */
.numbers-band { background: var(--grad-cool); color: #fff; padding-block: clamp(40px, 5vw, 64px); }
.numbers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.numbers li { padding-left: 18px; border-left: 3px solid var(--c-yellow); }
.numbers .stat-num { color: #fff; }
.numbers .stat-label { display: block; margin-top: 8px; color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); }

/* Valores */
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .values { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.value-card {
  padding: 28px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.value-card:hover { transform: translateY(-4px); border-color: rgba(255, 116, 15, .45); box-shadow: var(--shadow-md); }
.value-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--grad-warm); color: #fff;
}
.value-icon .icon { width: 26px; height: 26px; }
.value-title { margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: var(--c-blue); }
.value-card p { margin-top: 8px; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* Pessoas */
.people-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .people-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.people-photos { position: relative; padding-right: 22%; padding-bottom: 12%; }
.people-photos .media--a { --ratio: 4 / 5; border-radius: var(--r-xl); }
.people-photos .media--a img { object-position: 50% 20%; }
.people-photos .media--b {
  --ratio: 1; position: absolute; right: 0; bottom: 0; width: 44%;
  border-radius: var(--r-lg); border: 8px solid #fff; box-shadow: var(--shadow-md);
}
.people-photos .media img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.people-photos .media:hover img { transform: scale(1.06); }
.people-list { margin-bottom: 32px; }

/* Lojas em cartões compactos */
.mini-stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .mini-stores { grid-template-columns: repeat(3, 1fr); } }
.mini-store { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); }
.mini-store .media { --ratio: 16 / 10; }
.mini-store .media img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.mini-store:hover .media img { transform: scale(1.06); }
.mini-store-tag {
  position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-yellow); color: var(--c-brown); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
}
.mini-store-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.mini-store-body h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: #C2410C; }
.mini-store-body p { margin-top: 6px; color: var(--c-muted); font-size: var(--fs-sm); }
.mini-store-hours { display: flex; align-items: center; gap: 8px; }
.mini-store-hours .icon { width: 16px; height: 16px; color: var(--c-orange-deep); }
.mini-store-body .link-arrow { margin-top: auto; padding-top: 14px; }

.uniforca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
  margin-top: 36px; padding: 20px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); text-align: center;
}
.uniforca img { height: 40px; width: auto; }
.uniforca p { color: var(--c-muted); }
.page-hero .hl { background: linear-gradient(transparent 62%, rgba(255, 116, 15, .85) 62%, rgba(255, 116, 15, .85) 92%, transparent 92%); }
.people-photos .media--a { background: linear-gradient(165deg, #FFE7C2 0%, #FFB900 100%); }

/* Sobre · pilares de 1984 */
.pillars-box { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--c-cream); border: 1px solid var(--c-line); }
.pillars-kicker { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-brown); }
.pillars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.pillars li {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.4;
}
.pillars strong { display: block; font-family: var(--font-ui); font-size: 1.0625rem; color: var(--c-blue); }
.pillar-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-warm); color: #fff; }
.pillar-icon .icon { width: 22px; height: 22px; }
.pillars-logo { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--c-line); text-align: center; }
.pillars-logo img { width: min(220px, 70%); height: auto; margin-inline: auto; }
.pillars-logo figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--c-muted); }

/* Sobre · linha do tempo em zigue-zague (no celular fica em uma coluna) */
.timeline-logo { display: block; height: 40px; width: auto; max-width: 180px; margin-top: 14px; object-fit: contain; }
.timeline-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.timeline--zigzag .timeline-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px 22px; margin: 0 0 18px 40px; }
.timeline--zigzag .timeline-item::before { left: -40px; top: 24px; }
.timeline--zigzag::before { left: 11px; }
/* Zigue-zague: cada card ocupa 2 linhas da grade e começa uma linha abaixo do anterior,
   alternando as colunas. Assim eles ficam desencontrados sem nunca se sobrepor. */
@media (min-width: 900px) {
  .timeline--zigzag { display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; row-gap: 28px; }
  .timeline--zigzag::before { left: 50%; margin-left: -1px; }
  .timeline--zigzag .timeline-item { margin: 0; align-self: start; }
  .timeline--zigzag .timeline-item:nth-child(odd) { grid-column: 1; text-align: right; }
  .timeline--zigzag .timeline-item:nth-child(even) { grid-column: 2; }
  .timeline--zigzag .timeline-item:nth-child(odd)::before { left: auto; right: -54px; }
  .timeline--zigzag .timeline-item:nth-child(even)::before { left: -54px; }
  .timeline--zigzag .timeline-item:nth-child(odd) .timeline-logo { margin-left: auto; }
  .timeline--zigzag .timeline-item:nth-child(1) { grid-row: 1 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(2) { grid-row: 2 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(3) { grid-row: 3 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(4) { grid-row: 4 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(5) { grid-row: 5 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(6) { grid-row: 6 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(7) { grid-row: 7 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(8) { grid-row: 8 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(9) { grid-row: 9 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(10) { grid-row: 10 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(11) { grid-row: 11 / span 2; }
  .timeline--zigzag .timeline-item:nth-child(12) { grid-row: 12 / span 2; }
}
.timeline--zigzag .timeline-item:hover { border-color: rgba(255, 116, 15, .45); box-shadow: var(--shadow-md); }
.timeline--zigzag .timeline-item { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }

/* Sobre · Vita Park Mall (o que vem pela frente) */
.future-band { position: relative; overflow: hidden; isolation: isolate; background: var(--c-vita); color: #fff; padding-block: clamp(56px, 7vw, 96px); }
.future-band::before {
  content: ""; position: absolute; z-index: -1; width: 720px; aspect-ratio: 1; border-radius: 50%;
  right: -260px; bottom: -360px; background: radial-gradient(circle, rgba(46, 160, 90, .35), transparent 65%);
}
.future-band .hl { background: linear-gradient(transparent 62%, rgba(255, 185, 0, .6) 62%, rgba(255, 185, 0, .6) 92%, transparent 92%); }
.future-band .lead { color: rgba(255, 255, 255, .85); }
.future-band .btn { margin-top: 28px; }
.future-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .future-grid { grid-template-columns: 1.3fr 1fr; gap: 72px; } }
.future-logo { height: clamp(48px, 6vw, 64px); width: auto; margin-bottom: 24px; }
.future-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.future-list li {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-ui); font-weight: 700;
}
.future-list .icon { width: 22px; height: 22px; color: var(--c-yellow); flex-shrink: 0; }

/* Sobre · marcas do Grupo */
.group-logo { display: block; width: min(240px, 60%); height: auto; margin: 0 auto 18px; }
.group-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 600px) { .group-brands { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .group-brands { grid-template-columns: repeat(5, 1fr); } }
.group-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 26px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.group-brand:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.group-brand img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.group-brand p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.group-brand--vita { background: var(--c-vita); border-color: var(--c-vita); }
.group-brand--vita p { color: rgba(255, 255, 255, .8); }
.cta-final-text { margin-top: 14px; max-width: 52ch; color: var(--c-brown); font-weight: 500; }

/* Sobre · propósito, missão e visão */
.purpose { text-align: center; max-width: 900px; margin-inline: auto; }
.purpose-text {
  margin-top: 14px; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -.015em; color: var(--c-blue); text-wrap: balance;
}
.mv-grid { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 800px) { .mv-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.mv-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; padding: 28px; border-radius: var(--r-lg); background: var(--grad-cool); color: #fff; }
.mv-icon { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .12); color: var(--c-yellow); }
.mv-icon .icon { width: 26px; height: 26px; }
.mv-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; }
.mv-card p { color: rgba(255, 255, 255, .88); line-height: 1.55; }
.values-head { margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 1100px) { .values--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 559px) { .mv-card { grid-template-columns: 1fr; gap: 12px; padding: 24px; } .mv-icon { grid-row: auto; } }

/* Sobre · Vem ser GRC (vídeo para candidatos) */
.vemser { background: var(--c-blue); background: radial-gradient(120% 140% at 0% 0%, #2D4C95 0%, #01499D 45%, #0B2F6B 100%); color: #fff; }
.vemser .lead { color: rgba(255, 255, 255, .88); }
.vemser .btn { margin-top: 28px; }
.vemser-logo { height: 56px; width: auto; margin-bottom: 22px; padding: 10px 16px; border-radius: var(--r-md); background: #fff; }
.vemser .video { box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .8); }
@media (max-width: 899px) { .timeline--zigzag .timeline-item { margin-bottom: 20px; } }

/* Linha do tempo · card do Vita Park em verde, com o logo */
.timeline--zigzag .timeline-item--next { background: var(--c-vita); border-color: var(--c-vita); color: #fff; }
.timeline--zigzag .timeline-item--next .timeline-title { color: #fff; }
.timeline--zigzag .timeline-item--next p { color: rgba(255, 255, 255, .82); }
.timeline-item--next .timeline-logo { height: 46px; max-width: 160px; }

/* Sobre · os três pilares (foto + painel azul com números) */
.pillars-card { overflow: hidden; border-radius: var(--r-xl); background: var(--grad-cool); color: #fff; box-shadow: 0 30px 60px -36px rgba(1, 73, 157, .7); }
.pillars-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pillars-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.pillars-card:hover .pillars-photo img { transform: scale(1.05); }
.pillars-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(1, 73, 157, .95)); }
.pillars-year {
  position: absolute; left: 28px; bottom: 14px; z-index: 1;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; color: var(--c-yellow);
}
.pillars-body { padding: 8px 28px 30px; }
.pillars-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; line-height: 1.25; }
.pillars-list { list-style: none; margin: 18px 0 0; padding: 0; }
.pillars-list li { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); line-height: 1.45; }
.pillars-list strong { display: block; font-family: var(--font-ui); font-size: 1.0625rem; color: #fff; }
.pillars-num { flex-shrink: 0; width: 2.2ch; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; color: var(--c-orange); }
.story-text strong { color: var(--c-blue); font-weight: 700; }

/* Sobre · foto do Vita Park na faixa verde */
.future-side { display: grid; gap: 16px; }
.future-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.future-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.future-photo:hover img { transform: scale(1.05); }
.future-photo figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(0, 42, 21, .78); font-size: .75rem; color: rgba(255, 255, 255, .9);
}
@media (min-width: 560px) { .future-list { grid-template-columns: repeat(3, 1fr); } }
.future-list li { padding: 12px 14px; font-size: .9375rem; }
.vemser-logo { padding: 0; border-radius: 0; background: none; height: 60px; }

/* =========================================================
   SOBRE · LINHA DO TEMPO (versão final)
   Cards com logo/ícone no topo, ano grande, número-marca d'água ao fundo,
   linha central que vai se preenchendo conforme a rolagem e cards que
   entram pelo lado de cada coluna.
   ========================================================= */
.timeline--zigzag .timeline-item {
  position: relative; isolation: isolate; overflow: visible;
  padding: 26px 26px 28px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--c-line); box-shadow: 0 18px 40px -30px rgba(103, 25, 5, .35);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .8s cubic-bezier(.16, 1, .3, 1), opacity .7s var(--ease);
}
.timeline--zigzag .timeline-item:hover { border-color: rgba(255, 116, 15, .5); box-shadow: 0 26px 50px -28px rgba(103, 25, 5, .45); }
.timeline-mark {
  position: absolute; z-index: -1; right: 18px; bottom: 6px; pointer-events: none;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: .8;
  color: rgba(1, 73, 157, .05); letter-spacing: -.03em;
}
.timeline-top { display: flex; align-items: center; min-height: 52px; margin-bottom: 18px; }
.timeline-top .timeline-logo { margin: 0; height: 46px; max-width: 190px; }
.timeline-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--grad-warm); color: #fff; box-shadow: 0 10px 20px -10px rgba(235, 69, 21, .7);
}
.timeline-icon .icon { width: 26px; height: 26px; }
.timeline-icon--r { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.75rem; line-height: 1; }
.timeline--zigzag .timeline-when {
  display: block; padding: 0; background: none; border-radius: 0;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1;
  color: var(--c-orange-deep); letter-spacing: -.01em;
}
.timeline--zigzag .timeline-title { margin-top: 8px; font-size: 1.3125rem; }
.timeline--zigzag .timeline-item p { margin-top: 8px; line-height: 1.55; }
.timeline--zigzag .timeline-item--next .timeline-when { color: var(--c-yellow); }
.timeline--zigzag .timeline-item--next .timeline-mark { color: rgba(255, 255, 255, .06); }

/* Linha central: trilho claro + preenchimento laranja que acompanha a rolagem */
.timeline--zigzag::before { width: 4px; border-radius: 4px; background: rgba(1, 73, 157, .1); left: 10px; top: 0; bottom: 0; }
.timeline--zigzag::after {
  content: ""; position: absolute; left: 10px; top: 0; width: 4px; border-radius: 4px;
  height: calc(100% * var(--tl-progress, 0)); background: linear-gradient(180deg, var(--c-orange-deep), var(--c-orange) 60%, var(--c-yellow));
  box-shadow: 0 0 14px rgba(255, 116, 15, .55);
}
/* Bolinhas: cinzas até o card aparecer, depois acendem em laranja */
.timeline--zigzag .timeline-item::before {
  width: 22px; height: 22px; top: 30px; background: #fff; border: 4px solid #D9D2C7; box-shadow: none; z-index: 1;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.timeline--zigzag .timeline-item.is-in::before { border-color: var(--c-orange); box-shadow: 0 0 0 7px rgba(255, 116, 15, .18); transform: scale(1.1); }
.timeline--zigzag .timeline-item--next.is-in::before { border-color: var(--c-vita); box-shadow: 0 0 0 7px rgba(0, 42, 21, .15); }

/* Celular: uma coluna, linha à esquerda */
@media (max-width: 899px) {
  .timeline--zigzag .timeline-item { margin: 0 0 32px 44px; }
  .timeline--zigzag .timeline-item::before { left: -45px; }
}
/* Computador: zigue-zague com bastante respiro */
@media (min-width: 900px) {
  .timeline--zigzag { column-gap: 128px; row-gap: 56px; }
  .timeline--zigzag::before, .timeline--zigzag::after { left: 50%; margin-left: -2px; }
  .timeline--zigzag .timeline-item:nth-child(odd)::before { left: auto; right: -76px; }
  .timeline--zigzag .timeline-item:nth-child(even)::before { left: -76px; }
  .timeline--zigzag .timeline-item:nth-child(odd) .timeline-top { justify-content: flex-end; }
  .timeline--zigzag .timeline-item:nth-child(odd) .timeline-mark { right: auto; left: 18px; }
}
/* Entrada ao rolar: cada card vem do lado da sua coluna */
@media (prefers-reduced-motion: no-preference) {
  .js .timeline--zigzag .timeline-item[data-reveal] { transform: translateX(28px); }
  @media (min-width: 900px) {
    .js .timeline--zigzag .timeline-item[data-reveal]:nth-child(odd) { transform: translateX(-56px); }
    .js .timeline--zigzag .timeline-item[data-reveal]:nth-child(even) { transform: translateX(56px); }
  }
  .js .timeline--zigzag .timeline-item[data-reveal].is-in { transform: none; }
}
.timeline--zigzag .timeline-item.timeline-item--next {
  background: radial-gradient(120% 120% at 100% 0%, #0B4A2A 0%, var(--c-vita) 60%); border-color: var(--c-vita);
  box-shadow: 0 26px 50px -26px rgba(0, 42, 21, .6);
}
.timeline-section { overflow-x: clip; }
@media (max-width: 899px) { .timeline--zigzag::before, .timeline--zigzag::after { left: 11px; } .timeline--zigzag .timeline-item { margin-left: 48px; } .timeline--zigzag .timeline-item::before { left: -46px; } }
/* Sobre · Vita: itens à esquerda, foto aérea grande à direita */
.future-band .future-list { margin-top: 26px; }
@media (min-width: 960px) {
  .future-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .future-photo { aspect-ratio: 4 / 3.4; }
}
@media (min-width: 960px) { .future-band .future-list { grid-template-columns: 1fr 1fr; max-width: 460px; } }
/* Foto do Vita mais alta (retrato), mostrando o prédio e o estacionamento */
.future-photo { aspect-ratio: 4 / 3; }
.future-photo img { object-position: 45% 50%; }
@media (min-width: 960px) { .future-photo { aspect-ratio: 4 / 5; } }

/* Sobre · abertura da seção de marcas com o mockup do GRC */
.group-intro { display: grid; gap: 36px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .group-intro { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.group-mockup { margin: 0; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 1; box-shadow: 0 40px 70px -40px rgba(1, 20, 60, .7); }
.group-mockup img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.group-mockup:hover img { transform: scale(1.05); }
.group-intro-note { margin-top: 14px; color: var(--c-muted); max-width: 56ch; }

/* Sobre · marcas do Grupo em blocos na cor de cada marca, só com o logo branco */
.group-brands { gap: 14px; }
@media (min-width: 600px) { .group-brands { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .group-brands { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
.group-brand {
  position: relative; overflow: hidden; isolation: isolate; justify-content: center;
  min-height: 200px; padding: 28px 22px; border: 0; border-radius: var(--r-lg);
  background: var(--brand); box-shadow: 0 22px 44px -28px var(--brand);
}
@media (min-width: 900px) { .group-brand { min-height: 300px; } }
.group-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%),
              radial-gradient(90% 60% at 50% 110%, rgba(0, 0, 0, .25), transparent 70%);
}
.group-brand img { height: auto; width: min(84%, 190px); max-height: 92px; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.group-brand:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -26px var(--brand); }
.group-brand:hover img { transform: scale(1.07); }
.group-brand--rcenter { --brand: #3B3CC6; }
.group-brand--casa { --brand: #FF6A1F; }
.group-brand--torra { --brand: #E61E25; }
.group-brand--fraldas { --brand: #A13FA6; }
.group-brand--vita { --brand: #0F3B25; border: 0; }

/* =========================================================
   SOBRE · PROPÓSITO, MISSÃO, VISÃO E VALORES (editorial)
   ========================================================= */
/* Propósito: frase grande sobre a foto da equipe em duotone azul */
.purpose-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding-block: clamp(80px, 11vw, 150px); background: #0A1F4D; }
.purpose-bg { position: absolute; inset: 0; z-index: -2; }
.purpose-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: grayscale(1) contrast(1.1); transform: scale(1.08); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
.purpose-band:has(.is-in) .purpose-bg img { transform: scale(1); }
.purpose-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(1, 34, 92, .96) 0%, rgba(1, 73, 157, .88) 55%, rgba(235, 69, 21, .55) 130%);
  mix-blend-mode: normal;
}
.purpose-inner { max-width: 1040px; }
.purpose-quote { position: relative; margin: 22px 0 0; }
.purpose-mark {
  position: absolute; left: -.08em; top: -.42em; font-family: Georgia, "Times New Roman", serif; font-size: clamp(7rem, 5rem + 8vw, 13rem); line-height: 1;
  color: var(--c-orange); opacity: .9; pointer-events: none;
}
.purpose-quote p {
  position: relative; padding-top: clamp(28px, 4vw, 48px);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2.25rem, 1.2rem + 4.6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
}
.purpose-quote em {
  font-style: normal; color: var(--c-yellow);
  background: linear-gradient(transparent 78%, rgba(255, 116, 15, .85) 78%, rgba(255, 116, 15, .85) 92%, transparent 92%);
}
.purpose-sign { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.purpose-sign::before { content: ""; width: 48px; height: 2px; background: rgba(255, 255, 255, .5); }
.purpose-sign img { height: 34px; width: auto; }

/* Missão e Visão: texto grande, rótulo numerado e fio fino, sem cartões */
.mv-editorial { display: grid; gap: 40px; padding-bottom: clamp(56px, 7vw, 88px); border-bottom: 1px solid var(--c-line); }
@media (min-width: 900px) { .mv-editorial { grid-template-columns: 1fr 1fr; gap: 72px; } }
.mv-item { padding-top: 22px; border-top: 3px solid var(--c-blue); }
.mv-label {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brown);
}
.mv-label span { color: var(--c-orange-deep); }
.mv-item p {
  margin-top: 16px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.38; color: var(--c-ink); text-wrap: pretty;
}
.mv-item strong { color: var(--c-blue); font-weight: 700; }

/* Valores: cabeçalho dividido + grade numerada com fios compartilhados */
.values-intro { display: grid; gap: 18px; align-items: end; margin: clamp(56px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .values-intro { grid-template-columns: 1fr 1fr; gap: 72px; } }
.values-intro > p { color: var(--c-muted); max-width: 46ch; font-size: var(--fs-lg); line-height: 1.5; }
.values-grid { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value {
  position: relative; padding: 30px 28px 34px 0; border-bottom: 1px solid var(--c-line);
  transition: background-color .4s var(--ease);
}
@media (min-width: 640px) {
  .value { padding: 34px 32px 38px; }
  .value:not(:nth-child(2n)) { border-right: 1px solid var(--c-line); }
}
@media (min-width: 1024px) {
  .value:not(:nth-child(2n)) { border-right: 0; }
  .value:not(:nth-child(3n)) { border-right: 1px solid var(--c-line); }
}
.value::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--c-orange);
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.value:hover { background: #fff; }
.value:hover::after { transform: scaleX(1); }
.value-num {
  display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--c-orange); transition: color .4s var(--ease);
}
.value:hover .value-num { color: var(--c-orange); }
.value-name { margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; line-height: 1.2; color: var(--c-blue); }
.value p { margin-top: 10px; color: var(--c-muted); line-height: 1.6; max-width: 40ch; }
.purpose-mark { position: static; display: block; height: .42em; margin: 14px 0 0 -.04em; line-height: .9; font-size: clamp(6rem, 4rem + 6vw, 10rem); }
.purpose-quote p { padding-top: 0; }
/* Sobre · foto principal da seção Pessoas em formato horizontal (foto de grupo) */
.people-photos .media--wide { --ratio: 4 / 3; background: var(--c-cream-2); }
.people-photos .media--wide img { object-position: 50% 55%; }
.people-photos:has(.media--wide) { padding-right: 16%; padding-bottom: 22%; }
.people-photos:has(.media--wide) .media--b { width: 38%; }
/* Pessoas: só a foto do grupo, ocupando toda a coluna */
.people-photos:has(.media--wide) { padding: 0; }
.people-photos .media--wide { --ratio: 4 / 3.3; box-shadow: 0 30px 60px -36px rgba(1, 20, 60, .55); }
@media (min-width: 1024px) {
  .people-grid:has(.media--wide) { grid-template-columns: 1.25fr 1fr; gap: 56px; }
  .people-photos .media--wide { --ratio: 4 / 3.6; }
}
/* Chamada final centralizada, botões embaixo do texto */
.cta-final, .cta-final { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 30px; }
.cta-final .h2 { max-width: 22ch; margin-inline: auto; }
.cta-final-text { margin-inline: auto; }
.cta-final-actions { justify-content: center; }
/* Pulso nas cores laranja, azul e amarelo */
.btn--orange.btn--pulse { --pulse-color: var(--c-orange); --pulse-shadow: rgba(255, 116, 15, .65); }
.btn--blue.btn--pulse { --pulse-color: #5B8FE0; --pulse-shadow: rgba(1, 73, 157, .55); }
.btn--yellow.btn--pulse { --pulse-color: var(--c-yellow); --pulse-shadow: rgba(255, 185, 0, .6); }

/* =========================================================
   DÚVIDAS FREQUENTES
   ========================================================= */
.faq-hero { max-width: 820px; text-align: center; }
.faq-hero .breadcrumb ol { justify-content: center; }
.faq-hero .lead { margin-inline: auto; }
.faq-search {
  position: relative; margin: 32px auto 0; max-width: 620px;
}
.faq-search .icon { position: absolute; left: 22px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--c-blue); pointer-events: none; }
.faq-search input {
  width: 100%; height: 64px; padding: 0 24px 0 58px; border: 0; border-radius: var(--r-pill);
  background: #fff; color: var(--c-ink); font: inherit; font-size: 1.0625rem;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .14);
}
.faq-search input::placeholder { color: #8A8A8A; }
.faq-search input:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; }
.faq-status { min-height: 1.4em; margin-top: 14px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); }

.faq-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: 280px 1fr; gap: 64px; } }
.faq-aside { display: grid; gap: 22px; }
@media (min-width: 1000px) { .faq-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.faq-aside-title { display: block; margin-bottom: 10px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brown); }
.faq-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (max-width: 999px) {
  .faq-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .faq-cats::-webkit-scrollbar { display: none; }
  .faq-cats li { flex-shrink: 0; }
}
.faq-cat {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
  color: var(--c-ink); text-decoration: none; font-family: var(--font-ui); font-weight: 700; font-size: .9375rem;
  border: 1px solid var(--c-line); background: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-cat .icon { width: 20px; height: 20px; color: var(--c-orange-deep); flex-shrink: 0; }
.faq-cat small { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-cream-2); font-size: .75rem; text-align: center; color: var(--c-brown); }
.faq-cat:hover, .faq-cat.is-active { border-color: var(--c-orange); background: rgba(255, 116, 15, .08); color: #C2410C; }
.faq-help { padding: 22px; border-radius: var(--r-lg); background: var(--grad-cool); color: #fff; }
.faq-help strong { font-family: var(--font-ui); font-size: 1.0625rem; }
.faq-help p { margin: 6px 0 16px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); }
@media (max-width: 999px) { .faq-help { display: none; } }

.faq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); color: var(--c-blue); }
.faq-group-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-warm); color: #fff; flex-shrink: 0; }
.faq-group-icon .icon { width: 22px; height: 22px; }

.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item:first-of-type { border-top: 1px solid var(--c-line); }
.faq-item summary {
  display: flex; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: #C2410C; }
.faq-item summary:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 8px; }
.faq-q { flex: 1; }
.faq-toggle {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c-cream-2);
  transition: background-color var(--dur) var(--ease), transform .4s cubic-bezier(.16, 1, .3, 1);
}
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--c-brown); transition: transform .4s cubic-bezier(.16, 1, .3, 1), background-color var(--dur) var(--ease); }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--c-orange); transform: rotate(180deg); }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-item[open] .faq-toggle::before, .faq-item[open] .faq-toggle::after { background: #fff; }
.faq-a { padding: 0 58px 26px 4px; color: var(--c-muted); line-height: 1.65; }
.faq-a p + p, .faq-a ul + p { margin-top: 10px; }
.faq-a ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.faq-a a { color: var(--c-blue); font-weight: 700; }
.faq-a strong { color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-open .4s var(--ease); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.faq-item mark { background: rgba(255, 185, 0, .45); color: inherit; border-radius: 3px; padding: 0 2px; }
.faq-empty { padding: 28px; border-radius: var(--r-lg); background: var(--c-cream); text-align: center; color: var(--c-muted); }
.faq-empty a { color: var(--c-blue); font-weight: 700; }

.help-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 800px) { .help-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.help-card { padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.help-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-cool); color: #fff; }
.help-icon--wa { background: var(--c-whatsapp); color: var(--c-whatsapp-ink); }
.help-icon .icon { width: 24px; height: 24px; }
.help-card h3 { margin-top: 16px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: var(--c-blue); }
.help-card p { margin: 6px 0 14px; color: var(--c-muted); word-break: break-word; }
.faq-layout > *, .faq-aside > * { min-width: 0; }

/* =========================================================
   DOCUMENTOS (políticas, termos, regulamentos)
   ========================================================= */
.page-hero--doc { padding-block: clamp(40px, 6vw, 72px) clamp(44px, 6vw, 80px); }
.doc-hero { max-width: 860px; }
.doc-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: var(--fs-xs); color: rgba(255, 255, 255, .9); }
.doc-updated .icon { width: 16px; height: 16px; color: var(--c-yellow); }

.doc-summary { margin-top: -34px; position: relative; z-index: 2; }
.doc-summary-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
@media (min-width: 800px) { .doc-summary-list { grid-template-columns: repeat(4, 1fr); } }
.doc-summary-list li { padding: 20px 22px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.doc-summary-list strong { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); color: var(--c-orange-deep); line-height: 1.1; }
.doc-summary-list span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--c-muted); }

.doc-layout { display: grid; gap: 40px; align-items: start; }
.doc-layout > * { min-width: 0; }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 270px 1fr; gap: 72px; } .doc-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.doc-toc-title { display: block; margin-bottom: 10px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brown); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-line); }
.doc-toc a { display: flex; gap: 10px; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--c-muted); text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.doc-toc a span { min-width: 1.4em; font-family: var(--font-ui); font-weight: 700; color: var(--c-orange-deep); }
.doc-toc a:hover, .doc-toc a.is-active { color: var(--c-blue); border-left-color: var(--c-orange); font-weight: 700; }
.doc-print { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 16px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.doc-print:hover { border-color: var(--c-blue); color: var(--c-blue); }
.doc-print .icon { width: 16px; height: 16px; }
@media (max-width: 999px) {
  .doc-aside { padding: 18px 20px; border-radius: var(--r-lg); background: var(--c-cream); }
  .doc-print { display: none; }
}

.doc { max-width: 760px; font-size: 1.0625rem; line-height: 1.7; color: #3A3A3A; }
.doc-intro { padding: 24px 26px; margin-bottom: 40px; border-radius: var(--r-lg); background: var(--c-cream); border-left: 4px solid var(--c-orange); }
.doc-intro p + p { margin-top: 10px; }
.doc-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-section + .doc-section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--c-line); }
.doc-section h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.2; color: var(--c-blue); }
.doc-num { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-warm); color: #fff; font-family: var(--font-ui); font-size: 1.0625rem; }
.doc-num .icon { width: 20px; height: 20px; }
.doc-section h3 { margin: 22px 0 6px; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; color: var(--c-ink); }
.doc-section p + p { margin-top: 12px; }
.doc-section ul { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc-section ul li { position: relative; padding-left: 26px; }
.doc-section ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); }
.doc a { color: var(--c-blue); font-weight: 700; }
.doc strong { color: var(--c-ink); }
.doc-companies { display: grid; gap: 12px; margin: 16px 0; }
@media (min-width: 640px) { .doc-companies { grid-template-columns: 1fr 1fr; } }
.doc-companies p { margin: 0 !important; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--c-line); font-size: var(--fs-sm); line-height: 1.55; }
.doc-cards { display: grid; gap: 14px; margin: 16px 0; }
@media (min-width: 640px) { .doc-cards { grid-template-columns: 1fr 1fr; } }
.doc-card { position: relative; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #fff; font-size: .9875rem; }
.doc-card h3 { margin: 0 0 6px; color: var(--c-blue); }
.doc-card--accent { background: var(--grad-cool); border-color: transparent; color: rgba(255, 255, 255, .88); }
.doc-card--accent h3, .doc-card--accent strong { color: #fff; }
.doc-card--accent .doc-price { color: var(--c-yellow); }
.doc-price { margin: 4px 0 8px !important; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.75rem; line-height: 1.1; color: var(--c-orange-deep); }
.doc-tag { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-cream-2); font-size: .75rem; font-weight: 700; color: var(--c-brown); }
.doc-tag--on { background: rgba(37, 211, 102, .16); color: var(--c-whatsapp-ink); }
.doc-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--fs-sm); }
.doc-table th, .doc-table td { padding: 9px 0; border-bottom: 1px solid var(--c-line); text-align: left; }
.doc-table td:last-child, .doc-table th:last-child { text-align: right; font-weight: 700; color: var(--c-ink); }
.doc-table th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.doc-slots { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.doc-slots li { padding: 8px 14px !important; border-radius: var(--r-pill); background: var(--c-cream); font-family: var(--font-ui); font-weight: 700; font-size: .875rem; color: var(--c-blue); }
.doc-slots li::before { display: none; }
.doc-note { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(1, 73, 157, .06); border-left: 4px solid var(--c-blue); font-size: .9875rem; }
.doc-note--warn { background: rgba(255, 116, 15, .09); border-left-color: var(--c-orange); }
.doc-sign { margin-top: 44px; font-size: var(--fs-sm); color: var(--c-muted); }
.doc-contact { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--grad-cool); color: rgba(255, 255, 255, .88); font-size: .9875rem; }
.doc-contact strong { display: block; color: #fff; font-family: var(--font-ui); font-size: 1.0625rem; }
.doc-contact p { margin: 4px 0 0 !important; }
.doc-contact a { color: var(--c-yellow); }
.doc-contact-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: var(--c-yellow); }
.doc-contact-icon .icon { width: 22px; height: 22px; }
.doc-related { margin-top: 28px; }
.doc-related > span { display: block; margin-bottom: 10px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brown); }
.doc-related div { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-related a { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line); font-size: .875rem; text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.doc-related a:hover { border-color: var(--c-orange); background: rgba(255, 116, 15, .08); }
.doc-narrow { max-width: 820px; }

/* Formas de pagamento */
.pay-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px !important; margin: 16px 0 !important; }
@media (min-width: 640px) { .pay-grid { grid-template-columns: repeat(4, 1fr); } }
.pay-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px !important; border-radius: var(--r-lg); border: 1px solid var(--c-line); text-align: center; font-family: var(--font-ui); font-weight: 700; color: var(--c-ink); }
.pay-grid li::before { display: none; }
.pay-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-cool); color: #fff; }
.pay-icon .icon { width: 26px; height: 26px; }

/* Avisos e normas da loja */
.normas-wrap { background: var(--c-blue); background: radial-gradient(120% 120% at 0% 0%, #2D4C95, #01499D 50%, #0B3E8A); }
.normas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.norma { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 26px; border: 2px solid rgba(255, 255, 255, .85); border-radius: var(--r-lg); color: #fff; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.norma:hover { background: rgba(255, 255, 255, .06); transform: translateY(-4px); }
.norma-icon { width: 120px; height: 120px; }
.norma h3 { margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.1875rem; line-height: 1.2; text-wrap: balance; }
.norma p { margin-top: auto; padding-top: 12px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); }

@media print {
  .topbar, .site-header, .site-footer, .doc-aside, .wa-float, .to-top, .scroll-cue, .cookie, .doc-related, .doc-contact, .breadcrumb { display: none !important; }
  .page-hero { background: none !important; color: #000 !important; padding: 0 !important; }
  .page-hero .hl { background: none !important; }
  .doc-layout { display: block; }
  .doc { max-width: none; font-size: 11pt; }
}

/* =========================================================
   LANDING PAGES (Clube de Desconto e Delivery)
   ========================================================= */
.land-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px); }
.land-hero--clube { background: radial-gradient(120% 120% at 100% 0%, #2D4C95 0%, #01499D 50%, #0B2F6B 100%); }
.land-hero--delivery { background: var(--grad-warm); }
.land-hero--delivery .eyebrow { color: var(--c-brown); } .land-hero--delivery .eyebrow::before { background: var(--c-brown); }
.land-hero--delivery .lead { color: rgba(103, 25, 5, .9); }
.land-hero--delivery .breadcrumb li, .land-hero--delivery .breadcrumb [aria-current] { color: var(--c-brown); }
.land-hero--delivery .breadcrumb a { color: #fff; }
.land-hero--delivery .hl { background: linear-gradient(transparent 62%, rgba(255, 185, 0, .9) 62%, rgba(255, 185, 0, .9) 92%, transparent 92%); color: #fff; }
.land-hero--delivery .page-title { text-shadow: 0 2px 0 rgba(103, 25, 5, .25); }
.land-hero--delivery .btn--orange { background: var(--c-brown); color: #fff; --pulse-color: #fff; --pulse-shadow: rgba(103, 25, 5, .5); }
.land-hero::before { content: ""; position: absolute; z-index: -1; width: 720px; aspect-ratio: 1; border-radius: 50%; left: -260px; bottom: -420px; background: rgba(255, 255, 255, .06); }
.land-hero .lead { color: rgba(255, 255, 255, .9); }
.land-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .land-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.land-logo { display: block; height: 56px; width: auto; margin: 4px 0 22px; padding: 8px 14px; border-radius: 14px; background: #fff; }
.land-pills { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.land-pills li { padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-sm); }
.land-pills li::before { content: "✓ "; color: var(--c-yellow); }
.land-hero-media { position: relative; margin: 0; justify-self: center; width: min(100%, 420px); }
.land-hero-media::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 92%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--c-orange-light), var(--c-orange-deep)); }
.land-hero--delivery .land-hero-media::before { background: radial-gradient(circle at 50% 40%, #FFD24D, var(--c-yellow)); }
.land-hero-media > img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .3)); margin-bottom: clamp(-96px, -7vw, -56px); }
.land-hero-media--phone { padding-block: 10px 30px; display: grid; place-items: center; }
.land-hero-media--phone .phone { width: min(62%, 250px); }
.land-float {
  position: absolute; z-index: 2; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--c-muted);
  font-size: .8125rem; line-height: 1.3; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5);
}
.land-float strong { display: block; font-family: var(--font-ui); font-size: 1.0625rem; color: var(--c-blue); }
.land-float--1 { left: -4%; top: 34%; } .land-float--2 { right: -4%; bottom: 22%; }
@media (prefers-reduced-motion: no-preference) {
  .land-float { animation: badge-float 5s ease-in-out infinite; } .land-float--2 { animation-delay: -2.5s; }
}
@media (max-width: 959px) { .land-hero-media > img { margin-bottom: -56px; } .land-float--1 { left: 0; } .land-float--2 { right: 0; } }

.how-grid { display: grid; gap: 18px; }
@media (min-width: 800px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.how-card { padding: clamp(26px, 3vw, 36px); border-radius: var(--r-xl); background: var(--c-cream); border: 1px solid var(--c-line); }
.how-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--grad-cool); color: #fff; }
.how-icon .icon { width: 28px; height: 28px; }
.how-card h3 { margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; color: var(--c-blue); }
.how-card p { margin-top: 8px; color: var(--c-muted); font-size: 1.0625rem; line-height: 1.6; }
.how-card strong { color: var(--c-ink); }
.how-note { margin-top: 28px; text-align: center; color: var(--c-muted); font-size: 1.0625rem; }
.how-note strong { color: #C2410C; } .how-note a { color: var(--c-blue); font-weight: 700; }

.land-steps-band { background: radial-gradient(120% 140% at 0% 0%, #2D4C95 0%, #01499D 45%, #0B2F6B 100%); color: #fff; }
.land-steps-band .lead { color: rgba(255, 255, 255, .88); }
.land-steps-band .download-cta { color: #fff; } .land-steps-band .download-cta-icon { background: var(--c-yellow); color: var(--c-brown); }
.land-steps-band .btn { margin-top: 26px; }
.land-steps-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .land-steps-grid { grid-template-columns: 1.1fr .9fr; gap: 72px; } }
.land-alt { margin-top: 18px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); }
.land-alt a { color: var(--c-yellow); font-weight: 700; }
.form-steps { list-style: none; margin: 0; padding: 26px; border-radius: var(--r-xl); background: #fff; color: var(--c-ink); display: grid; gap: 10px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.form-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--c-cream); font-family: var(--font-ui); font-weight: 700; }
.form-steps li span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-blue); color: #fff; font-size: .875rem; flex-shrink: 0; }
.form-steps-done { background: rgba(37, 211, 102, .14) !important; color: var(--c-whatsapp-ink); }
.form-steps-done span { background: var(--c-whatsapp) !important; color: var(--c-whatsapp-ink) !important; }
.form-steps-done .icon { width: 16px; height: 16px; stroke-width: 3; }
.del-app { padding: 30px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.del-app h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; }
.del-app > p { margin-top: 8px; color: rgba(255, 255, 255, .85); }

.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cat-card { padding: 24px 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(255, 116, 15, .45); }
.cat-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--grad-warm); color: #fff; }
.cat-icon .icon { width: 25px; height: 25px; }
.cat-card h3 { margin-top: 14px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.1875rem; color: var(--c-blue); }
.cat-card p { margin-top: 6px; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.cat-card--sm { display: flex; align-items: center; gap: 14px; padding: 18px; }
.cat-card--sm h3 { margin: 0; font-size: 1.0625rem; }

.early-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .early-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.season-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.season-list li { padding: 14px 22px; border-radius: var(--r-pill); background: var(--c-cream); border: 1px solid var(--c-line); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.125rem; color: var(--c-blue); }
.season-list .season-bell { display: inline-flex; align-items: center; gap: 10px; background: var(--c-orange); border-color: var(--c-orange); color: var(--c-brown); }
.season-bell .icon { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) { .season-bell .icon { animation: bell 2.4s ease-in-out infinite; transform-origin: 50% 0; } @keyframes bell { 0%, 70%, 100% { rotate: 0deg; } 75% { rotate: 14deg; } 85% { rotate: -12deg; } 92% { rotate: 6deg; } } }
.mini-stores--2 { max-width: 820px; margin-inline: auto; }
@media (min-width: 720px) { .mini-stores--2 { grid-template-columns: 1fr 1fr; } }
.land-faq .faq-item:first-of-type { border-top: 1px solid var(--c-line); }
.land-more { margin-top: 24px; text-align: center; color: var(--c-muted); }
.land-more a { color: var(--c-blue); font-weight: 700; }

.steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 640px) { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.steps4 li { position: relative; padding: 26px 24px; border-radius: var(--r-lg); background: var(--c-cream); }
.steps4-num { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 2.75rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-orange); }
.steps4 h3 { margin-top: 14px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: var(--c-blue); }
.steps4 p { margin-top: 6px; color: var(--c-muted); line-height: 1.55; }
.modes { display: grid; gap: 18px; max-width: 980px; margin-inline: auto; }
@media (min-width: 800px) { .modes { grid-template-columns: 1fr 1fr; gap: 24px; } }
.mode { padding: 30px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--c-line); }
.mode--express { background: var(--grad-cool); border-color: transparent; color: rgba(255, 255, 255, .88); }
.mode-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: var(--grad-warm); color: #fff; }
.mode--express .mode-icon { background: var(--c-yellow); color: var(--c-brown); }
.mode-icon .icon { width: 26px; height: 26px; }
.mode h3 { margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; color: var(--c-blue); }
.mode--express h3, .mode--express strong { color: #fff; }
.mode-big { margin: 4px 0 10px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.875rem; color: var(--c-orange-deep); }
.mode--express .mode-big { color: var(--c-yellow); }
.mode p { line-height: 1.55; } .mode-price { margin-top: 16px; font-size: 1.125rem; }

.area-search { position: relative; max-width: 560px; margin: 0 auto; }
.area-search .icon { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--c-orange-deep); pointer-events: none; }
.area-search input { width: 100%; height: 60px; padding: 0 22px 0 54px; border: 2px solid var(--c-line); border-radius: var(--r-pill); font: inherit; font-size: 1.0625rem; background: #fff; transition: border-color var(--dur) var(--ease); }
.area-search input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 5px rgba(255, 116, 15, .15); }
.area-result { min-height: 1.6em; margin: 16px auto 28px; max-width: 760px; text-align: center; font-size: 1.0625rem; color: var(--c-ink); }
.area-result strong { color: #C2410C; }
.area-grid { display: grid; gap: 22px; }
@media (min-width: 1000px) { .area-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.area-store { padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: var(--grad-cool); color: #fff; }
.area-store-head h3 { margin-top: 6px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.area-tier { margin-top: 16px; padding: 20px; border-radius: var(--r-lg); background: #fff; color: var(--c-ink); }
.area-tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.area-tier-head strong { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.5rem; color: var(--c-orange-deep); }
.area-tier-head span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; color: var(--c-blue); }
.area-tier-head .icon { width: 17px; height: 17px; }
.area-tier-head em { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 185, 0, .22); font-style: normal; font-size: .75rem; font-weight: 700; color: var(--c-brown); }
.area-tier-head em .icon { width: 13px; height: 13px; }
.area-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.area-chips li { padding: 5px 11px; border-radius: var(--r-pill); background: var(--c-cream); font-size: .8125rem; color: #3A3A3A; transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease); }
.area-grid.is-filtering .area-chips li { opacity: .35; }
.area-grid.is-filtering .area-chips li.is-match { opacity: 1; background: var(--c-orange); color: #fff; font-weight: 700; }
.area-contacts { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 8px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .88); }
.area-contacts p { display: flex; gap: 10px; align-items: flex-start; }
.area-contacts .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-yellow); margin-top: 2px; }
.area-contacts a { color: #fff; font-weight: 700; white-space: nowrap; }
.land-logo { padding: 0; border-radius: 0; background: none; height: 60px; }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   CUPOM VERDE
   ========================================================= */
.land-hero--verde { background: radial-gradient(120% 120% at 100% 0%, #1F8A4C 0%, #0F5C32 50%, #0A3D22 100%); }
.land-hero--verde .hl { background: linear-gradient(transparent 62%, rgba(255, 185, 0, .75) 62%, rgba(255, 185, 0, .75) 92%, transparent 92%); }
.cv-visual { position: relative; justify-self: center; width: min(100%, 360px); padding: 24px 0; }
.cv-receipt {
  position: relative; display: grid; gap: 12px; padding: 30px 28px 34px; border-radius: 22px 22px 6px 6px; background: #fff; color: var(--c-ink);
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7);
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, transparent 98%, #000) 0 0 / 22px 100% repeat-x;
          mask: radial-gradient(circle 8px at 50% 100%, transparent 98%, #000) 0 0 / 22px 100% repeat-x;
}
@media (prefers-reduced-motion: no-preference) { .cv-receipt { animation: badge-float 6s ease-in-out infinite; } }
.cv-receipt-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.375rem; color: #138A43; }
.cv-receipt-logo .icon { width: 26px; height: 26px; }
.cv-line { height: 10px; border-radius: 6px; background: #EEF3EF; }
.cv-line--w80 { width: 80%; } .cv-line--w70 { width: 70%; } .cv-line--w60 { width: 60%; } .cv-line--w50 { width: 50%; }
.cv-total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 14px; border-top: 2px dashed #DDE6DF; font-family: var(--font-ui); font-weight: 700; }
.cv-total strong { color: #138A43; }
.cv-check { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 10px 14px; border-radius: var(--r-pill); background: rgba(37, 211, 102, .15); font-family: var(--font-ui); font-weight: 700; font-size: .875rem; color: #0B5A2B; }
.cv-check .icon { width: 16px; height: 16px; stroke-width: 3; }
.cv-visual .land-float--1 { left: -10%; top: auto; bottom: 18%; }
.cv-visual .land-float strong { color: #138A43; }
.steps4--3 { max-width: 1080px; margin-inline: auto; }
@media (min-width: 1024px) { .steps4--3 { grid-template-columns: repeat(3, 1fr); } }
.cv-card .cat-icon { background: linear-gradient(135deg, #1F8A4C, #43B868); }
.cv-card:hover { border-color: rgba(31, 138, 76, .45); }
.cv-band { background: linear-gradient(120deg, #138A43, #1F8A4C 60%, #2EA35B); color: #fff; }
.cv-band .cta-final .eyebrow { color: #FFE08A; } .cv-band .cta-final .eyebrow::before { background: #FFE08A; }
.cv-band .cta-final .h2 { text-shadow: 0 2px 0 rgba(0, 40, 20, .3); }
.cv-band .cta-final-text { color: rgba(255, 255, 255, .9); }
@media (max-width: 959px) { .cv-visual .land-float--1 { left: auto; right: 6px; bottom: -6px; } }
.land-hero--verde .download-cta { margin-top: 26px; color: #fff; }
.land-hero--verde .download-cta-icon, .cv-band .download-cta-icon { background: var(--c-yellow); color: var(--c-brown); }
.cv-band .store-badges--cta { margin-top: 0; }

/* CARTÃO R CENTER */
.land-hero--cartao { background: radial-gradient(120% 120% at 100% 0%, #2D4C95 0%, #01499D 50%, #0B2F6B 100%); }
.ct-visual { position: relative; margin: 0; justify-self: center; width: min(100%, 520px); }
.ct-visual::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 116, 15, .45), transparent 70%); filter: blur(10px); }
.ct-visual .card-mockup { position: relative; width: 100%; }
.ct-visual .land-float--1 { left: auto; right: 0; top: auto; bottom: 6%; }
.card-ben .cat-icon { background: var(--grad-cool); }
.steps4--white li { background: #fff; border: 1px solid var(--c-line); }
.card-more { display: inline-flex; margin: 18px 0 0 18px; vertical-align: middle; }
@media (max-width: 420px) { .btn--lg { white-space: normal; text-align: center; } }
@media (min-width: 1000px) { .cat-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   BLOG
   ========================================================= */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.blog-filter { padding: 10px 18px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; font: inherit; font-family: var(--font-ui); font-weight: 700; font-size: .9375rem; color: var(--c-ink); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.blog-filter:hover { border-color: var(--c-orange); color: #C2410C; }
.blog-filter.is-active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.blog-featured { margin-bottom: 24px; }
.blog-featured .post { display: grid; }
@media (min-width: 900px) {
  .blog-featured .post { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto; }
  .blog-featured .post .media { --ratio: auto; height: 100%; min-height: 360px; }
  .blog-featured .post-body { padding: 36px 40px; justify-content: center; }
}
.blog-empty { padding: 28px; border-radius: var(--r-lg); background: var(--c-cream); text-align: center; color: var(--c-muted); }
.post[hidden] { display: none !important; }

/* Página do post */
.post-hero { background: var(--grad-cool); color: #fff; padding-block: clamp(36px, 5vw, 64px) clamp(120px, 14vw, 200px); }
.post-hero-inner { max-width: 860px; }
.post-hero .lead { color: rgba(255, 255, 255, .88); }
.post-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); }
.post-h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.post-wrap { max-width: 1000px; margin-top: calc(-1 * clamp(90px, 12vw, 170px)); }
.post-cover { margin: 0; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 16 / 9; box-shadow: 0 40px 70px -40px rgba(1, 20, 60, .6); background: var(--c-cream-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-layout { display: grid; gap: 28px; padding-block: clamp(32px, 5vw, 56px) clamp(56px, 7vw, 88px); }
@media (min-width: 900px) { .post-layout { grid-template-columns: 1fr 64px; gap: 48px; } .post-share { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; flex-direction: column; } }
.post-content { max-width: 720px; font-size: 1.125rem; line-height: 1.75; color: #333; }
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 { margin-top: 1.8em; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.75rem; line-height: 1.2; color: var(--c-blue); }
.post-content h3 { margin-top: 1.5em; font-family: var(--font-ui); font-weight: 700; font-size: 1.3125rem; color: var(--c-ink); }
.post-content a { color: var(--c-blue); font-weight: 700; }
.post-content strong { color: var(--c-ink); }
.post-content ul, .post-content ol { padding-left: 1.3em; display: grid; gap: .45em; }
.post-content blockquote { margin: 1.4em 0; padding: 18px 22px; border-left: 4px solid var(--c-orange); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--c-cream); font-family: var(--font-ui); font-weight: 700; color: var(--c-brown); }
.post-content figure { margin: 1.6em 0; }
.post-content img { width: 100%; height: auto; border-radius: var(--r-lg); }
.post-content hr { border: 0; border-top: 1px solid var(--c-line); margin: 2em 0; }
.post-share { display: flex; align-items: center; gap: 10px; }
.post-share span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brown); }
.post-share a, .post-share button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: 50%; background: #fff; color: var(--c-blue); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post-share a:hover, .post-share button:hover { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.post-share .icon { width: 20px; height: 20px; }
.post-share button.is-copied { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: var(--c-whatsapp-ink); }
@media (max-width: 899px) { .post-share { order: -1; } }