/* ══════════════════════════════════════════════════════════
   NUVEM.CENTER — Design system do site público

   Mesmos tokens do painel, tratamento diferente. O painel é escaneado
   por quem já é cliente; o site é lido por quem ainda não é. Aqui a
   tipografia trabalha mais: escala maior, medida controlada em ~65
   caracteres, e um hero que ocupa a tela.

   Público: diretor de PME, 35–55 anos, não-técnico. Nunca aparece
   "Docker", "container", "proxy" — nem no HTML, nem no texto.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --primary:       #1a56db;
  --primary-dark:  #1e3a5f;
  --primary-light: #e8f0fe;
  --primary-hover: #1544b0;
  --accent:        #16a34a;
  --accent-hover:  #15803d;
  --accent-light:  #dcfce7;

  /* Rampa neutra Slate — cinzas com viés azul, mesma família da marca */
  --surface:    #ffffff;
  --bg:         #f1f5f9;
  --bg-fundo:   #0f172a;
  --texto:      #0f172a;
  --texto-2:    #334155;
  --texto-3:    #64748b;
  --borda:      #e2e8f0;
  --borda-forte:#cbd5e1;

  /* Semânticas — separadas do accent */
  --perigo:      #dc2626;
  --perigo-light:#fef2f2;
  --aviso:       #d97706;
  --aviso-light: #fffbeb;

  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Escala tipográfica — razão 1.25, ancorada em 16px */
  --t-xs:  0.75rem;    /* 12 */
  --t-sm:  0.875rem;   /* 14 */
  --t-md:  1rem;       /* 16 */
  --t-lg:  1.125rem;   /* 18 */
  --t-xl:  1.375rem;   /* 22 */
  --t-2xl: 1.75rem;    /* 28 */
  --t-3xl: 2.25rem;    /* 36 */
  --t-4xl: 3.25rem;    /* 52 */

  --r:     10px;
  --r-lg:  14px;
  --r-xl:  20px;

  --sombra-1: 0 1px 3px rgba(15,23,42,.07);
  --sombra-2: 0 6px 20px rgba(15,23,42,.09);
  --sombra-3: 0 20px 50px rgba(15,23,42,.16);

  --largura: 1120px;
}

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

/* O atributo `hidden` do HTML vale `display:none` na folha do
   navegador — especificidade ZERO. Qualquer regra nossa que declare
   display (e `.btn` declara `inline-flex`) vence e o elemento aparece
   mesmo marcado como oculto.
   Sem isto, os três botões do wizard ficam visíveis ao mesmo tempo e o
   de submeter, maior, atropela os outros. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--texto-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--texto);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; }
p  { margin: 0 0 1rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* Medida de leitura: ~65 caracteres. Texto corrido mais largo que isso
   cansa e derruba a taxa de leitura completa. */
.medida { max-width: 62ch; }

/* ══════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-family: inherit; font-size: var(--t-md); font-weight: 600;
  line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease,
              transform .1s ease, box-shadow .16s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}

/* Accent green é o CTA de conversão. Deliberadamente o único verde da
   página — verde aqui significa "siga", não "sucesso". */
.btn--accent  { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,.28); }
.btn--accent:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 6px 20px rgba(22,163,74,.34); }

.btn--primario { background: var(--primary); color: #fff; }
.btn--primario:hover:not(:disabled) { background: var(--primary-hover); }

.btn--branco { background: #fff; color: var(--primary-dark); }
.btn--branco:hover:not(:disabled) { background: #f1f5f9; }

.btn--contorno-branco { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--contorno-branco:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: #fff; }

.btn--contorno { background: transparent; color: var(--primary); border-color: var(--borda-forte); }
.btn--contorno:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); }

.btn--grande { padding: 18px 34px; font-size: var(--t-lg); }
.btn--pequeno { padding: 10px 18px; font-size: var(--t-sm); }
.btn--largo { width: 100%; }

/* ══════════════════════════════════════════════════════════
   CABEÇALHO
   ══════════════════════════════════════════════════════════ */

.cabecalho {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  padding: 22px 0;
}
.cabecalho__linha { display: flex; align-items: center; gap: 28px; }
/* Logo maior: a marca é o primeiro sinal de que isto é um produto de
   verdade, não um formulário. `width:auto` preserva a proporção do SVG. */
.cabecalho__logo img { height: 44px; width: auto; display: block; }
.cabecalho__nav { display: flex; gap: 26px; margin-left: auto; }
.cabecalho__nav a {
  color: rgba(255,255,255,.82); font-size: var(--t-sm); font-weight: 500;
}
.cabecalho__nav a:hover { color: #fff; text-decoration: none; }

/* Botão de entrar — contorno, não sólido. Sólido competiria com o CTA
   de conversão do hero, e quem já é cliente procura este botão sem
   precisar que ele grite. */
.cabecalho__entrar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; margin-left: 4px;
  border: 1.5px solid rgba(255,255,255,.42); border-radius: 999px;
  color: #fff; font-size: var(--t-sm); font-weight: 600;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
.cabecalho__entrar:hover {
  background: rgba(255,255,255,.13); border-color: #fff; text-decoration: none;
}
.cabecalho__entrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 130px 0 80px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  overflow: hidden;
}

/* Textura sutil: um véu radial que dá profundidade sem virar "gradiente
   roxo-azul de landing page de IA". */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(22,163,74,.13), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(255,255,255,.07), transparent 60%);
  pointer-events: none;
}

.hero__grade {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 56px; align-items: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #6ee7a0;
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}

.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: #6ee7a0; }

.hero__sub {
  font-size: var(--t-lg);
  color: rgba(255,255,255,.82);
  max-width: 54ch;
  margin-bottom: 34px;
}

.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.hero__selo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-sm); color: rgba(255,255,255,.62);
}

/* ── Mockup do Nextcloud personalizado ────────────────────
   Prova visual do white-label: a tela de login com a marca de um
   cliente fictício. É a promessa do produto em uma imagem. */
.hero__mockup {
  perspective: 1400px;
}
.mockup {
  transform: rotateY(-13deg) rotateX(5deg) translateZ(0);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-3), 0 0 0 1px rgba(255,255,255,.09);
  background: #1e3a5f;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.hero__mockup:hover .mockup { transform: rotateY(-7deg) rotateX(2deg); }

.mockup__barra {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: #0f172a;
}
.mockup__ponto { width: 10px; height: 10px; border-radius: 50%; }
.mockup__url {
  margin-left: 10px; padding: 3px 12px;
  background: rgba(255,255,255,.09); border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.62);
}

.mockup__tela {
  padding: 44px 30px 38px;
  text-align: center;
  background: linear-gradient(160deg, #2d5a3d 0%, #1a3a28 100%);
}
.mockup__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 16px;
  background: #fff; border-radius: 16px;
  font-size: 27px; font-weight: 800; color: #2d5a3d;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.mockup__nome { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.mockup__slogan { font-size: 11px; color: rgba(255,255,255,.62); margin-bottom: 22px; }

.mockup__campo {
  height: 36px; margin-bottom: 9px;
  background: rgba(255,255,255,.93); border-radius: 8px;
}
.mockup__botao {
  height: 36px; margin-top: 13px;
  background: #2d5a3d; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #fff;
}
.mockup__rodape {
  margin-top: 20px; font-size: 9.5px; color: rgba(255,255,255,.4);
}

/* ══════════════════════════════════════════════════════════
   SEÇÕES
   ══════════════════════════════════════════════════════════ */

.secao { padding: 88px 0; }
.secao--cinza { background: var(--bg); }
.secao--escura { background: var(--bg-fundo); color: rgba(255,255,255,.75); }
.secao--escura h2 { color: #fff; }

.secao__topo { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.secao__eyebrow {
  display: block;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 13px;
}
.secao__topo h2 { margin-bottom: 14px; }
.secao__topo p { font-size: var(--t-lg); color: var(--texto-3); margin: 0; }

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */

.grade { display: grid; gap: 22px; }
.grade--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  padding: 30px 26px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: var(--borda-forte);
}
.card__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 14px;
}
.card__ico--perigo { background: var(--perigo-light); color: var(--perigo); }
.card__ico--aviso  { background: var(--aviso-light);  color: var(--aviso); }
.card__ico--accent { background: var(--accent-light); color: var(--accent); }
.card__ico--primary{ background: var(--primary-light);color: var(--primary); }
.card h3 { margin-bottom: 9px; }
.card p  { margin: 0; font-size: var(--t-sm); color: var(--texto-3); line-height: 1.65; }

/* Números dentro do texto do problema: o dado é o argumento. */
.card strong.dado { color: var(--perigo); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   COMO FUNCIONA — 3 passos conectados
   ══════════════════════════════════════════════════════════ */

.passos {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px; position: relative;
}
/* A linha pontilhada codifica algo verdadeiro: é uma SEQUÊNCIA.
   Numeração aqui não é decoração — a ordem importa. */
.passos::before {
  content: "";
  position: absolute; top: 27px; left: 16%; right: 16%;
  border-top: 2px dashed var(--borda-forte);
  z-index: 0;
}
.passo { position: relative; z-index: 1; text-align: center; }
.passo__num {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 18px;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  font-size: var(--t-xl); font-weight: 800;
  box-shadow: 0 0 0 7px var(--bg);
}
.passo h3 { margin-bottom: 7px; }
.passo p { margin: 0; font-size: var(--t-sm); color: var(--texto-3); }

/* ══════════════════════════════════════════════════════════
   DISCO VIRTUAL — antes e depois

   A comparação é o argumento inteiro: os dois lados mostram o MESMO
   Explorer, com a mesma pasta. O que muda é a linha destacada e o que
   está escrito embaixo. Se os dois lados parecessem telas diferentes,
   a mensagem "quase não muda nada" se perderia.
   ══════════════════════════════════════════════════════════ */

.antes-depois {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: start;
  margin-bottom: 40px;
}

.antes-depois__lado { min-width: 0; }

.antes-depois__selo {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 12px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.antes-depois__selo--antes  { background: var(--perigo-light); color: #991b1b; }
.antes-depois__selo--depois { background: var(--accent-light); color: #14532d; }

.antes-depois__seta {
  align-self: center; color: var(--texto-3);
  padding-top: 60px;
}

/* Janela do Explorer, reconhecível o bastante para o cliente projetar
   a própria máquina nela. */
.explorer {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}
.explorer--ok { border-color: #bbf7d0; }

.explorer__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
}
.explorer__barra > span:not(.explorer__caminho) {
  width: 8px; height: 8px; border-radius: 50%; background: var(--borda-forte);
}
.explorer__caminho {
  margin-left: 8px; font-family: var(--mono);
  font-size: 11px; color: var(--texto-3);
}

.explorer__corpo { padding: 8px; }
.explorer__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 6px;
  font-size: var(--t-sm); color: var(--texto-2);
}
.explorer__ico { font-size: 15px; line-height: 1; }

.explorer__item--risco {
  background: var(--perigo-light); color: #991b1b; font-weight: 600;
}
.explorer__item--novo {
  background: var(--accent-light); color: #14532d; font-weight: 600;
}
.explorer__badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}

.antes-depois__lista {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.antes-depois__lista li {
  position: relative; padding-left: 26px;
  font-size: var(--t-sm); line-height: 1.55; color: var(--texto-2);
}
.antes-depois__lista li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700; font-size: 15px; line-height: 1.4;
}
.antes-depois__lista--risco li::before { content: "×"; color: var(--perigo); }
.antes-depois__lista--ok li::before    { content: "✓"; color: var(--accent); }

/* ── Destaques ─────────────────────────────────────────── */
.disco-destaques {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--borda);
}
.disco-destaque { display: flex; gap: 13px; align-items: flex-start; }
.disco-destaque svg { flex: none; margin-top: 2px; color: var(--primary); }
.disco-destaque strong {
  display: block; font-size: var(--t-md); color: var(--texto); margin-bottom: 4px;
}
.disco-destaque span {
  font-size: var(--t-sm); color: var(--texto-3); line-height: 1.6;
}

@media (max-width: 900px) {
  .antes-depois { grid-template-columns: minmax(0,1fr); gap: 20px; }
  /* A seta vira vertical: em coluna, apontar para a direita não
     descreve mais a relação entre os blocos. */
  .antes-depois__seta { padding: 0; justify-self: center; transform: rotate(90deg); }
  .disco-destaques { grid-template-columns: minmax(0,1fr); gap: 18px; }
}

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */

.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  margin-bottom: 11px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--primary); }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 19px 22px;
  font-size: var(--t-md); font-weight: 600; color: var(--texto);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--t-xl); font-weight: 400; color: var(--texto-3);
  line-height: 1; transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--primary); }
.faq summary:hover { background: var(--bg); }
.faq__resposta { padding: 0 22px 20px; font-size: var(--t-sm); color: var(--texto-2); }
.faq__resposta p:last-child { margin: 0; }

/* ══════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════ */

.rodape { background: var(--bg-fundo); color: rgba(255,255,255,.6); padding: 60px 0 32px; }
.rodape__grade {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.rodape img { height: 36px; width: auto; margin-bottom: 16px; }
.rodape p { font-size: var(--t-sm); margin: 0 0 8px; }
.rodape h4 {
  color: #fff; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape a { color: rgba(255,255,255,.68); font-size: var(--t-sm); }
.rodape a:hover { color: #fff; }
.rodape__base {
  padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--t-xs); color: rgba(255,255,255,.42);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .cabecalho__nav { gap: 18px; }
  .cabecalho__nav a { font-size: var(--t-xs); }
  .cabecalho__entrar { padding: 8px 14px; font-size: var(--t-xs); }
}

/* Abaixo de 720px a navegação some e sobram logo e "Entrar" — quem
   chega no celular ou é cliente entrando, ou vai rolar a página. */
@media (max-width: 720px) {
  .cabecalho__nav { display: none; }
  .cabecalho__entrar { margin-left: auto; }
}

@media (max-width: 980px) {
  :root { --t-4xl: 2.5rem; --t-3xl: 1.875rem; }
  .hero { min-height: auto; padding: 108px 0 64px; }
  .hero__grade { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .hero__mockup { max-width: 400px; margin: 0 auto; }
  .mockup { transform: none; }
  .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .passos { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .passos::before { display: none; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .cabecalho__nav { display: none; }
  .cabecalho__logo img { height: 38px; }
}

@media (max-width: 620px) {
  :root { --t-4xl: 2.05rem; --t-3xl: 1.6rem; --t-2xl: 1.4rem; --t-lg: 1.03rem; }
  .container { padding: 0 18px; }
  .secao { padding: 56px 0; }
  .secao__topo { margin-bottom: 36px; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0,1fr); }
  .hero { padding: 92px 0 52px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__sub { font-size: var(--t-md); }
  .cabecalho { padding: 16px 0; }
  /* 40px, e não 32px: no celular a logo é a única coisa que identifica
     de quem é o site, e a 32px ela sumia ao lado do botão de menu. */
  .cabecalho__logo img { height: 40px; }
  .card { padding: 24px 20px; }
  .rodape__grade { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .rodape__base { flex-direction: column; gap: 6px; }
  .faq summary { padding: 16px 18px; font-size: var(--t-sm); }
  .faq__resposta { padding: 0 18px 18px; }
}

/* Telas muito estreitas (iPhone SE e similares): a medida de 62ch já
   não cabe, e o hero precisa de mais respiro vertical que horizontal. */
@media (max-width: 380px) {
  :root { --t-4xl: 1.8rem; --t-3xl: 1.45rem; }
  .container { padding: 0 14px; }
  .btn { padding: 13px 20px; font-size: var(--t-sm); }
  .btn--grande { padding: 15px 22px; font-size: var(--t-md); }
  .card__ico { width: 46px; height: 46px; }
}

/* Telas largas: a medida do texto para de crescer, mas o hero e as
   grades aproveitam o espaço. */
@media (min-width: 1400px) {
  :root { --largura: 1240px; }
}

/* ══════════════════════════════════════════════════════════
   CHAMADA DA LINHA ESTUDANTE

   O roxo entra como acento e não como fundo: a seção fica clara, no
   ritmo do resto da página, e a cor da linha aparece só no eyebrow, no
   botão e nos avatares. Uma faixa roxa inteira aqui competiria com a
   chamada de associados logo abaixo, e as duas perderiam.
   ══════════════════════════════════════════════════════════ */

.estudantes-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 42px; align-items: center;
  padding: 42px 44px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-left: 4px solid #7c3aed;
  border-radius: var(--r-lg);
}

.estudantes-cta h2 { margin-bottom: 12px; }
.estudantes-cta p {
  font-size: var(--t-base); color: var(--texto-3);
  line-height: 1.7; margin: 0 0 24px; max-width: 52ch;
}
.estudantes-cta p strong { color: var(--texto); }

.estudantes-cta__btn {
  background: #7c3aed; border-color: #7c3aed; color: #fff;
}
.estudantes-cta__btn:hover {
  background: #6d28d9; border-color: #6d28d9; color: #fff;
}

/* Seis avatares sobrepostos: mostra "um grupo" sem precisar de imagem
   nem de mais uma linha de texto. */
.estudantes-cta__arte { display: flex; justify-content: center; }
.estudantes-cta__arte span {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-left: -12px;
  background: #f3e8ff; color: #6d28d9;
  border: 3px solid var(--surface);
  font-size: var(--t-sm); font-weight: 700;
}
.estudantes-cta__arte span:first-child { margin-left: 0; }

@media (max-width: 900px) {
  .estudantes-cta { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 32px 26px; }
  /* A arte vai para cima: no empilhado ela funciona como abertura, e
     embaixo ficaria como sobra depois do botão. */
  .estudantes-cta__arte { order: -1; justify-content: flex-start; }
  .estudantes-cta__arte span { width: 44px; height: 44px; font-size: var(--t-xs); }
}

/* ══════════════════════════════════════════════════════════
   PROGRAMA DE ASSOCIADOS
   Chamada no fim da landing e cabeçalho da página dedicada.
   ══════════════════════════════════════════════════════════ */

.associados-cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 30px;
  text-align: left;
}

.associados-cta__item {
  padding: 18px 20px;
  border-radius: var(--r);
  /* Translúcido e não uma cor fixa: a seção é escura, e um branco
     opaco criaria três blocos que brigam com o fundo. */
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.associados-cta__item strong {
  display: block;
  font-size: var(--t-sm);
  margin-bottom: 5px;
}

.associados-cta__item span {
  font-size: var(--t-sm);
  line-height: 1.6;
  opacity: .8;
}

/* ══════════════════════════════════════════════════════════
   REVELAÇÃO AO ROLAR

   Um deslocamento curto e uma opacidade. Nada de escala, rotação ou
   salto: a animação existe para dirigir o olhar na ordem da leitura,
   não para ser notada. Quando ela chama atenção para si, virou ruído.

   O estado inicial é aplicado por JS (classe `.js-anima` no <html>),
   nunca pelo CSS sozinho. Sem isso, quem tem JavaScript bloqueado
   ficaria com a página inteira invisível — o pior desfecho possível
   para um efeito decorativo.
   ══════════════════════════════════════════════════════════ */

.js-anima .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.js-anima .revelar.revelado {
  opacity: 1;
  transform: none;
}

/* Cascata para grupos de cartões: cada filho entra um pouco depois do
   anterior, o que sugere leitura da esquerda para a direita em vez de
   um bloco que aparece inteiro. O teto de 6 evita que o último item de
   uma lista longa demore meio segundo para existir. */
.js-anima .revelar-grupo > *:nth-child(1) { transition-delay: 0ms; }
.js-anima .revelar-grupo > *:nth-child(2) { transition-delay: 70ms; }
.js-anima .revelar-grupo > *:nth-child(3) { transition-delay: 140ms; }
.js-anima .revelar-grupo > *:nth-child(4) { transition-delay: 210ms; }
.js-anima .revelar-grupo > *:nth-child(5) { transition-delay: 280ms; }
.js-anima .revelar-grupo > *:nth-child(n+6) { transition-delay: 350ms; }

/* Contador numérico: a fonte tabular impede que o número "pule" de
   largura enquanto conta, o que faria o texto ao lado tremer. */
.contador { font-variant-numeric: tabular-nums; }

/* Quem pediu menos movimento no sistema recebe menos movimento. Não é
   opcional: para parte das pessoas, animação de entrada causa enjoo. */
@media (prefers-reduced-motion: reduce) {
  .js-anima .revelar,
  .js-anima .revelar.revelado {
    opacity: 1;
    transform: none;
    transition: none;
  }
}