/* usecarmen — landing institucional. Fonte da verdade: design-handoff/README.md */
/* @font-face vive no CSS critico inline do index.html (ch depende da fonte estar declarada antes) */

/* Todo token de cor e prefixado --uc-. A pagina publica de agendamento do app usa
   --bg/--ink/--accent sem prefixo como API dos temas; nomes iguais dos dois lados
   convidariam alguem a copiar CSS de um lado pro outro e quebrar os dois. */
:root {
  /* Marca */
  --uc-brand: #6b1727;          /* títulos, botão primário, faixa de acento */
  --uc-brand-hover: #55121f;
  --uc-brand-on: #ffffff;        /* texto sobre vinho */
  --uc-brand-rgb: 107, 23, 39;
  --uc-action: #e95610;          /* só detalhe pequeno: sublinhado, badge, seta */
  --uc-action-text: #c8460c;     /* link e texto laranja (o --uc-action não tem contraste) */
  --uc-highlight: #ffecaa;       /* pílula de destaque, chip "1 mês grátis" */

  /* Superfícies */
  --uc-bg: #fff6e7;              /* fundo da página */
  --uc-surface: #ffffff;         /* cards */
  --uc-surface-soft: #fdf0dc;    /* bloco informativo dentro de card */
  --uc-track: #f4e7d2;
  --uc-border: #eadfc9;
  --uc-border-strong: #e3d8c6;

  /* Tinta */
  --uc-ink: #0f1217;             /* texto principal */
  --uc-ink-2: #4a3f38;           /* texto secundário */
  --uc-ink-3: #7a6a5d;           /* apoio, legenda, eyebrow */
  --uc-ink-4: #a8968a;
  --uc-ink-rgb: 15, 18, 23;       /* = --uc-ink, pra sombra com alfa */

  /* Sombra quente (rgba preta suja o creme) */
  --uc-shadow-card: 0 8px 20px rgba(107, 23, 39, .08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--uc-bg);
  color: var(--uc-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2, p { text-wrap: pretty; }

a { color: var(--uc-action-text); text-decoration: none; }
a:hover { color: var(--uc-brand-hover); }
/* no creme, link sem sublinhado dentro de texto corrido some */
p a, li a { text-decoration: underline; text-underline-offset: 2px; }

/* content-box: o handoff especifica 1120px de CONTEÚDO, com os 24px de padding por fora */
.container {
  box-sizing: content-box;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 24px;
}

.eyebrow {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--uc-brand);
  color: var(--uc-brand-on);
  font-weight: 700;
  transition: background .15s ease;
}
.btn:hover { background: var(--uc-brand-hover); color: var(--uc-brand-on); }
/* botao sobre a faixa vinho: inverte, porque vinho sobre vinho nao existe */
.btn-highlight { background: var(--uc-highlight); color: var(--uc-brand); }
.btn-highlight:hover { background: var(--uc-surface); color: var(--uc-brand); }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 246, 231, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--uc-border);
}
.site-header .container {
  padding-block: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* logo + wordmark. O arquivo da marca e o icone quadrado (2160x2160): esticar ele
   num box 132x28 achataria o desenho, entao o nome vem como texto ao lado. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--uc-brand);
}
.brand:hover { color: var(--uc-brand); }
.brand img { display: block; width: auto; height: 28px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
@media (max-width: 640px) {
  .brand img { height: 24px; }
}
/* rodape: aqui cabe o lockup de verdade (duas linhas, ~1.9:1), que no header nao
   caberia — a 28px de altura cada linha de texto ficaria com ~10px */
.brand-lockup { display: inline-block; }
.brand-lockup img { display: block; width: 112px; height: auto; }
.site-header .btn {
  font-size: 13px;
  padding: 10px 16px;
  white-space: nowrap;
}

/* hero */
.hero {
  padding: 44px 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.pill {
  align-self: flex-start;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
  border: 1px solid var(--uc-border);
  padding: 7px 11px;
  border-radius: 999px;
}
.pill-accent { color: var(--uc-brand); background: var(--uc-highlight); border-color: transparent; }
.hero h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(44px, 9vw, 76px);
  line-height: .94;
  letter-spacing: -.045em;
}
.hero h1 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--uc-brand);
  letter-spacing: -.01em;
}
.hero-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--uc-ink-2);
  max-width: 21.78em; /* 38ch, medido na Archivo; a Plus Jakarta Sans e um tico mais larga */
}
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  max-width: 380px;
}
.hero-cta .btn { height: 56px; font-size: 16px; letter-spacing: -.01em; }
.cta-secondary {
  align-self: center;
  font-size: 13px;
  color: var(--uc-ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-secondary:hover { color: var(--uc-ink-2); }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
}
.hero-image { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* composicao do hero: o iPhone, a notificacao e o WhatsApp ja vem na imagem, com fundo
   transparente e sombra propria. Sem .frame, fundo, borda ou sombra aqui. Repetida no
   CSS critico do index.html, porque e o LCP e o styles.css carrega assincrono. */
.hero-composition {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 640.98px) {
  .hero-composition {
    width: auto;
    max-width: 100%;
    max-height: 65svh;       /* o topo do proximo bloco aparece embaixo: ela sente que a pagina continua */
  }
}
.shot-caption {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
  text-align: center;
}
.frame {
  /* 322 = imagem de 300px + 10px de padding + 1px de borda de cada lado */
  width: 322px;
  max-width: 100%;
  border-radius: 32px;
  border: 1px solid var(--uc-border);
  padding: 10px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
}
.frame img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* generic section */
section { padding-top: 88px; }
section h2 {
  margin: 0 0 36px;
  font-weight: 800;
  font-size: clamp(30px, 5.5vw, 44px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.eyebrow { margin-bottom: 18px; display: block; }
.eyebrow-accent { color: var(--uc-action-text); }

/* faixa branca full-bleed — com a pagina inteira em creme, o contraste inverteu:
   quem se destaca agora e o branco, nao o claro */
.band-white {
  background: var(--uc-surface);
  color: var(--uc-ink);
  padding-bottom: 88px;
}

/* como você faz hoje (comparativo) */
.compare h2 { max-width: 13.75em; } /* ~22ch, medido na Archivo; nao remedido para a Plus Jakarta Sans */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.compare-card {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* os dois cards ficam num creme quente contra o branco da faixa; o card da direita
   se separa pela borda vinho, nao por outro fundo */
.compare-card { background: var(--uc-surface-soft); }
.compare-card-highlight { border-color: var(--uc-brand); }
.compare-label {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
}
.compare-label-accent { color: var(--uc-action-text); }
.compare-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--uc-ink-2);
}
.compare-list-highlight { color: var(--uc-ink); }

/* a conta que ninguem faz */
.cost-card {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  background: var(--uc-surface);
  padding: 36px 28px;
  display: grid;
  /* min(): abaixo de ~370px de viewport a coluna de 280px era maior que o conteudo do
     card e invadia o padding direito (texto e imagem) */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
  align-items: center;
}
.cost-copy { display: flex; flex-direction: column; gap: 16px; }
.cost-heading {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 13.75em; /* ~22ch, medido na Archivo; nao remedido para a Plus Jakarta Sans */
}
.cost-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--uc-ink-2); max-width: 25.21em; } /* ~44ch, medido na Archivo */
.cost-caption { margin: 0; font-size: 14px; line-height: 1.6; color: var(--uc-ink-3); }
/* coluna de print da secao de custo */
.cost-shot { display: flex; align-items: center; justify-content: center; }

/* antes de a secao entrar na tela o Story esta no inicio da animacao (translate 14% pra
   direita) e passava da borda da viewport no celular. clip so na horizontal: sombra e
   rotacao continuam livres pra cima e pra baixo */
section:has(> .cost-card) { overflow-x: clip; }

/* Composicao: iPhone grande atras, a esquerda; Story menor na frente, embaixo a direita.
   As medidas sao em % da largura do container, entao a composicao escala inteira.
   O Story so pode cobrir a parte de baixo do iPhone: o card ampliado da proxima semana
   vai de 34% a 74% da altura da imagem. Trocou um dos prints, refazer a conta. */
.cost-stack {
  position: relative;
  width: min(100%, 420px);
  margin: 1.5rem auto 0;
  aspect-ratio: 1 / 1.92;         /* reserva a altura: painel no topo, Story ate a base */
  isolation: isolate;
}

/* Brilho vinho suave atras das duas imagens: separa a composicao do creme do site */
.cost-stack::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--uc-brand-rgb), .18), transparent);
}

.cost-stack-back,
.cost-stack-front {
  position: absolute;
  display: block;
  height: auto;
}

.cost-stack-back {
  top: 0;
  left: 0;
  width: 82%;
  transform: rotate(-3deg);
  filter: none;                 /* a imagem ja traz a propria sombra */
}

.cost-stack-front {
  bottom: 0;
  right: 0;
  width: 42%;
  border-radius: 18px;
  transform: rotate(5deg);
  box-shadow:
    0 24px 48px -12px rgba(var(--uc-brand-rgb), .55),
    0 8px 16px rgba(var(--uc-ink-rgb), .18);
}

/* Adesivo "1 toque", entre o botao "Divulgar no story" do card e o Story */
.cost-stack-tag {
  position: absolute;
  left: 38%;
  top: calc(61% - 16px);        /* centro do vao entre o botao e o Story, menos meia altura */
  z-index: 2;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--uc-highlight);
  color: var(--uc-brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: rotate(-8deg);
  box-shadow: 0 6px 14px rgba(var(--uc-ink-rgb), .18);
}

/* celular estreito: a composicao avanca sobre o padding do card, senao o iPhone fica
   pequeno demais pra ler o card. Mais pra esquerda porque a imagem do iPhone tem margem
   transparente (o card ampliado comeca a 8% da largura dela); a direita o Story girado
   sobra ~6px pra fora da caixa. A partir de 500px o teto de 420px vale sozinho. */
@media (max-width: 499.98px) {
  .cost-stack { width: calc(100% + 46px); margin-inline: -26px -20px; }
}

@media (min-width: 900px) {
  .cost-stack { margin-top: 0; }
  .cost-stack-tag { font-size: 14px; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cost-stack-front {
      animation: cost-story-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    .cost-stack-tag {
      animation: cost-tag-in linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
  }
}

@keyframes cost-story-in {
  from { opacity: 0; transform: translate(14%, 6%) rotate(10deg); }
  to   { opacity: 1; transform: rotate(5deg); }
}

@keyframes cost-tag-in {
  from { opacity: 0; transform: scale(.6) rotate(-20deg); }
  to   { opacity: 1; transform: rotate(-8deg); }
}

/* como funciona */
.how h2 { max-width: 12.5em; } /* ~20ch, medido na Archivo; nao remedido para a Plus Jakarta Sans */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
}
.card-plain { background: transparent; box-shadow: none; }
.card .num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--uc-brand);
}
.card h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--uc-ink-2); }

/* quem faz */
.founders-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--uc-ink-2); max-width: 30em; }
.founders-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.founder-card {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.founder-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.founder-name { margin: 12px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.founder-role { margin: 0; font-size: 14px; color: var(--uc-ink-2); }
.founders .cta-secondary { display: block; margin-top: 28px; text-align: center; }

/* temas carousel */
.themes { padding-inline: 0; }
.themes-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}
.themes-head h2 { margin: 0; max-width: 12.5em; } /* ~20ch, medido na Archivo */
.themes-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--uc-ink-2); max-width: 26.36em; } /* ~46ch, medido na Archivo */
.themes-nav { display: flex; gap: 10px; }
.arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--uc-border);
  background: transparent;
  color: var(--uc-ink);
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.arrow-btn:hover { background: var(--uc-track); }
.theme-track {
  margin-top: 34px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 24px 24px;
  scrollbar-width: none;
}
.theme-track::-webkit-scrollbar { display: none; }
.theme-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 268px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.theme-frame {
  border: 1px solid var(--uc-border);
  border-radius: 26px;
  padding: 9px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
}
.theme-frame img { display: block; width: 100%; height: auto; border-radius: 18px; }
.theme-info { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.theme-info .name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.theme-info .desc { font-size: 14px; line-height: 1.5; color: var(--uc-ink-3); }

/* faq */
.faq-list { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
}
.faq-more { margin-top: 22px; font-size: 15px; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  line-height: 1;
  color: var(--uc-action);
  transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--uc-ink-2); }
.faq-item a { text-decoration: underline; text-underline-offset: 2px; }

/* footer */
.site-footer {
  margin-top: 96px;
  background: var(--uc-surface);
  border-top: 1px solid var(--uc-border);
}
.footer-grid {
  padding: 40px 24px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .desc { margin-top: 2px; }
.footer-col .desc { font-size: 14px; line-height: 1.6; color: var(--uc-ink-3); max-width: 17.19em; } /* ~30ch, medido na Archivo */
.footer-col a { font-size: 15px; }
.copyright { margin: 0 auto; padding: 0 24px 40px; font-size: 13px; line-height: 1.6; color: var(--uc-ink-3); }
.footer-legal-links { margin: 0 auto; padding: 0 24px 24px; display: flex; gap: 16px; font-size: 13px; }

/* páginas institucionais (sobre/contato/privacidade/404) */
.page-hero { padding-top: 64px; padding-bottom: 8px; }
.page-hero h1 { margin: 0; font-weight: 800; font-size: clamp(34px, 6vw, 52px); line-height: 1.04; letter-spacing: -.03em; max-width: 16em; }
.prose { max-width: 38em; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.7; color: var(--uc-ink-2); padding-bottom: 88px; }
.prose h2 { margin: 12px 0 0; color: var(--uc-ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.prose strong { color: var(--uc-ink); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }

/* faixa de funcionalidades — a secao de print, nao de paragrafo */
.features-lead { margin: -18px 0 0; font-size: 16px; line-height: 1.6; color: var(--uc-ink-2); }
.feature-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 680px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item {
  /* min-width:0 solta o minimo automatico do item de grid: sem isso a moldura de
     347px vira piso de cada coluna e as 3 colunas estouram a linha entre 1024 e
     1254px de viewport, onde o container ainda nao tem 1207px de conteudo */
  min-width: 0;
  background: var(--uc-surface);
  border: 1px solid var(--uc-border);
  border-radius: 18px;
  box-shadow: var(--uc-shadow-card);
  /* padding justo de proposito: com print de 325x300 o card fica em ~403px, e dois
     cabem numa tela de celular de 812px. Cada 10px aqui custa meia tela de scroll
     ao longo dos 6 cards. */
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.feature-label { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.feature-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--uc-ink-2); }
/* a tela de confirmacoes so existe pra quem liga "exigir confirmacao" — sem esta
   linha a pagina promete duas coisas que parecem se contradizer */
.features-note { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--uc-ink-3); }

/* print do app sobre painel vinho: o creme do app vira recorte sobre fundo forte, e
   nao se confunde com o creme do site. Painel mais baixo que o print, a imagem sangra
   pela base (os prints tem o conteudo importante no topo). Temas ficam fora: ja sao
   coloridos. */
.app-shot {
  width: 100%;
  background: var(--uc-brand);
  border-radius: 16px;
  padding: 20px 20px 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 12px 30px rgba(var(--uc-ink-rgb), .35);
}
p + .app-shot { margin-top: .75rem; }

/* celular: os 6 cards de recursos deslizam na horizontal, o proximo aparecendo pela
   borda. Breakpoint igual ao do app. A margem negativa = padding-inline do .container,
   pro carrossel encostar nas bordas da tela. */
@media (max-width: 640.98px) {
  .feature-grid {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    padding: 0 24px 8px;
    margin-inline: -24px;
    scrollbar-width: thin;
  }
  .feature-grid > * { scroll-snap-align: start; }
}
.feature-grid:focus-visible {
  outline: 2px solid var(--uc-action-text);
  outline-offset: 4px;
}
.how-note { margin-top: 24px; font-size: 15px; line-height: 1.6; color: var(--uc-ink-3); }

/* faixa vinho — quebra o creme e e onde o tema Glam Noturno aparece bem.
   Nada de --uc-ink* aqui dentro: sobre vinho so --uc-brand-on ou --uc-highlight. */
.accent-band {
  background: var(--uc-brand);
  color: var(--uc-brand-on);
  padding-bottom: 88px;
}
.accent-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}
.accent-band-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.accent-band-logo { display: block; width: 180px; max-width: 60%; height: auto; }
.accent-band h2 { margin: 0; max-width: 11em; }
.accent-band h2 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--uc-highlight);
  letter-spacing: -.01em;
}
.accent-band-lead { margin: 0; font-size: 17px; line-height: 1.55; max-width: 24em; }
.accent-band .btn { height: 56px; padding: 0 32px; font-size: 16px; }
.accent-band-shot { display: flex; justify-content: center; }
.accent-band-shot .frame { background: var(--uc-brand-hover); border-color: var(--uc-brand-hover); box-shadow: none; }

/* plano: checklist + preço + CTA num bloco so (antes eram duas secoes com o mesmo botao) */
.plan-box {
  border: 1px solid var(--uc-brand);
  border-radius: 18px;
  background: var(--uc-surface);
  box-shadow: var(--uc-shadow-card);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.plan-title { margin: 12px 0 0; font-size: clamp(26px, 4.4vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.plan-groups {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
}
@media (min-width: 800px) { .plan-groups { grid-template-columns: repeat(3, 1fr); } }
.plan-group-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--uc-brand); }
.plan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--uc-ink-2);
}
.plan-list li::before {
  content: '\2713';
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--uc-brand);
}
.plan-lead { margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--uc-ink-2); max-width: 27.5em; }
.plan-box .btn { margin-top: 20px; height: 56px; padding: 0 32px; font-size: 16px; }
.plan-note {
  margin: 14px 0 0;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--uc-ink-3);
}

/* a ultima frase do manifesto, que continuou na home depois que a secao foi pro /about */
.closing-line {
  margin: 96px auto 0;
  padding-inline: 24px;
  max-width: 22em;
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.3;
  color: var(--uc-ink-2);
}

/* Banner de consentimento de cookies (so em index.html, que e a unica pagina com analytics) */
.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--uc-surface);
  border: 1px solid var(--uc-border-strong);
  border-radius: 12px;
  box-shadow: var(--uc-shadow-card);
  font-size: 14px;
  line-height: 1.5;
  color: var(--uc-ink-2);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 280px; }
.cookie-bar-actions { display: flex; gap: 8px; }
.cookie-bar .btn, .prose button.btn { display: inline-flex; border: 0; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }

/* preco clicavel (levava toques sem resposta): mesmo visual do titulo, leva ao cadastro */
.plan-title-link { color: inherit; text-decoration: none; }
.plan-title-link:hover { color: var(--uc-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* aviso de cookies compacto no celular: tampa o minimo da tela */
@media (max-width: 640px) {
  .cookie-bar { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; gap: 8px 12px; font-size: 13px; line-height: 1.4; }
  .cookie-bar p { flex: 1 1 100%; }
  .cookie-bar-actions { width: 100%; }
  .cookie-bar .btn { flex: 1 1 0; justify-content: center; padding: 8px 12px; }
}