/* ============================================================
   GLEIDSON ANDRADE — Padrões de página (preview)
   Consome tokens.css + components.css. Patterns específicos das
   páginas Sobre/História, Contato e da vitrine (index).
   Não substitui o design system: estende-o.
   ============================================================ */

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  background: var(--color-azure-600); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: var(--fw-semibold);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* ---------- Nav: CTA à direita ---------- */
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__links a[aria-current="page"] { color: var(--text-accent); }
@media (max-width: 768px) { .nav__actions .btn--secondary { display: none; } }

/* ---------- HERO (Sobre) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--gradient-brand); color: var(--text-inverse);
  padding-block: var(--space-9) var(--space-8);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(37,99,235,0.28), transparent 60%);
}
.hero > .container { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--color-signal-400); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lead { color: var(--color-gray-200); max-width: 56ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
/* Badges legíveis sobre o gradiente escuro do hero (AA) */
.hero__meta .badge { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(2px); }
.hero__meta .badge--accent { color: var(--color-signal-400); }
.hero__meta .badge--gold { color: var(--color-gold-300, #EBC66B); }
.hero__portrait {
  width: 180px; height: 220px; border-radius: var(--radius-xl);
  background: linear-gradient(140deg, var(--color-azure-500), var(--color-signal-500));
  box-shadow: var(--shadow-glow), 0 0 0 4px rgba(255,255,255,0.18);
  overflow: hidden; flex: none; margin: 0; padding: 0;
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero__row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 640px) { .hero__row { grid-template-columns: 1fr; } .hero__portrait { width: 140px; height: 174px; margin-bottom: var(--space-3); } }

/* ---------- Narrativa — layout 2 colunas com foto Unsplash ---------- */
.sobre-narrativa__grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-8); align-items: center; }
.sobre-narrativa__photo { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.sobre-narrativa__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
@media (max-width: 900px) {
  .sobre-narrativa__grid { grid-template-columns: 1fr; }
  .sobre-narrativa__photo { order: -1; aspect-ratio: 4/5; max-width: 300px; margin-inline: auto; }
}

/* ---------- Faixa de métricas (prova social) ---------- */
.stats-band { background: var(--bg-subtle); border-block: 1px solid var(--border-subtle); }
.stats-band .grid-4 { text-align: center; }
.stat__value { display: block; }
/* Em telas médias/estreitas, 2 colunas em vez de empilhar tudo */
@media (max-width: 768px) { .stats-band .grid-4 { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (max-width: 380px) { .stats-band .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Timeline (história) ---------- */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--color-azure-500), var(--color-signal-500));
}
.timeline__item { position: relative; padding-left: var(--space-7); padding-bottom: var(--space-6); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: var(--bg-page); border: 3px solid var(--color-azure-600);
  display: grid; place-items: center;
}
.timeline__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-azure-600); }
.timeline__year { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-accent); font-weight: var(--fw-semibold); }
.timeline__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: var(--space-1) 0 var(--space-2); }
.timeline__body { color: var(--text-secondary); margin: 0; }

/* ---------- Pilares / valores ---------- */
.pillar__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--color-azure-500) 14%, transparent);
  color: var(--color-azure-600); display: grid; place-items: center; font-size: var(--fs-lg);
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--gradient-brand); color: var(--text-inverse); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--color-gray-200); margin-inline: auto; max-width: 52ch; }

/* ---------- Página de contato ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.contact-list a { color: var(--text-primary); }
.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-item__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-azure-500) 12%, transparent);
  color: var(--color-azure-600); display: grid; place-items: center; font-size: var(--fs-md);
}
.contact-item__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.contact-item__value { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-md); }

/* --- Refino GLE-106: layout coeso, cabeçalho na mesma grade, ícones SVG, ritmo --- */
/* Layout: um bloco coeso — cabeçalho alinhado à mesma grade do conteúdo abaixo.
   (Corrige o hero que ficava centralizado em coluna estreita, desalinhado da grade.) */
.contact { padding-block: var(--space-8); }
.contact-head { max-width: 62ch; }
.contact-head .eyebrow { display: inline-block; margin-bottom: var(--space-3); }
/* Título proporcional a uma página de contato — confiante, não estridente. */
.contact-title {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.08; margin: 0 0 var(--space-4);
}
.contact-head .lead { max-width: 56ch; margin: 0; }
.contact-grid { margin-top: var(--space-8); gap: var(--space-7); }
@media (max-width: 900px) { .contact-grid { margin-top: var(--space-6); } }
.contact-col__title { margin-bottom: var(--space-5); }

/* Canais: linhas com alvo de toque confortável, ícone alinhado ao centro,
   feedback de hover sutil e legível. */
.contact-item {
  align-items: center;
  padding: var(--space-3); margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-item:hover { background: var(--color-gray-50); }
.contact-item__icon svg { display: block; width: 20px; height: 20px; }
.contact-item__value { font-size: var(--fs-base); }
a.contact-item__value { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a.contact-item__value:hover { color: var(--color-azure-600); }

.contact-note { margin-top: var(--space-6); }
.contact-form-card { padding: var(--space-6); }
.contact-form-card .h3 { font-size: var(--fs-xl); }

@media (max-width: 900px) {
  .contact { padding-block: var(--space-7); }
}
/* --- fim refino GLE-106 --- */

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Rótulo obrigatório / opcional */
.req { color: var(--color-danger); margin-left: 2px; }
.field__label .opt { color: var(--text-muted); font-weight: var(--fw-regular); }
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--color-danger); }
.field__error { display: none; align-items: center; gap: var(--space-1); }
.field--error .field__error { display: flex; }
.field--error .field__label { color: var(--color-danger); }

/* Consentimento LGPD */
.consent { display: flex; gap: var(--space-3); align-items: flex-start; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-azure-600); flex: 0 0 auto; }
.consent label { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
/* GLE-986: consentimento LGPD inválido — destaque visual (o .field--error padrão só borda .input/.textarea) */
.consent.field--error { border: 1px solid var(--color-danger); border-radius: var(--radius-sm); padding: var(--space-3); background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
.consent.field--error label { color: var(--color-danger); }
.consent.field--error input { accent-color: var(--color-danger); outline: 2px solid color-mix(in srgb, var(--color-danger) 45%, transparent); outline-offset: 2px; }

/* Feedback de nível de formulário */
.form__status { border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); }
.form__status[hidden] { display: none; }
.form__status--error { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent); }

/* Estado de sucesso */
.success { text-align: center; padding: var(--space-6) var(--space-4); }
.success[hidden] { display: none; }
.success__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); margin: 0 auto var(--space-4); background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); display: grid; place-items: center; font-size: 30px; }

/* Botão ocupado + spinner */
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .btn:hover { transform: none; } }

/* ---------- Vitrine (index) ---------- */
.swatch { height: 64px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.swatch-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); }
.preview-note { background: var(--bg-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------- Mobile nav toggle (progressive) ---------- */
@media (max-width: 768px) {
  .nav__brand { font-size: var(--fs-base); }
}

/* ---------- Home hero 2-col: empilha em mobile ---------- */
.home-hero__row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; position: relative; z-index: 1; }
.home-hero__portrait { width: 240px; height: 300px; flex: none; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-glow), 0 0 0 4px rgba(255,255,255,.14); }
.home-hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Badges no hero escuro: fundo translúcido claro + texto legível (dourado claro para --gold) */
.home-hero__row .badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(2px); }
.home-hero__row .badge--gold { color: var(--color-gold-300, #EBC66B); border-color: color-mix(in srgb, var(--color-gold-300, #EBC66B) 45%, transparent); }
@media (max-width: 900px) {
  .home-hero__row { grid-template-columns: 1fr; }
  .home-hero__portrait { width: 160px; height: 200px; margin-bottom: var(--space-4); }
}

/* ---------- Home: grid responsivo de 4 passos ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- Home: card Autoridade (imagem direita) ---------- */
.autoridade-grid { display: grid; grid-template-columns: 1fr 420px; align-items: stretch; }
@media (max-width: 900px) { .autoridade-grid { grid-template-columns: 1fr; } .autoridade-grid > :last-child { display: none; } }

/* ---------- Home: seção Sobre mini (foto + texto) ---------- */
.sobre-mini-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-9); align-items: center; }
@media (max-width: 900px) { .sobre-mini-grid { grid-template-columns: 1fr; } .sobre-mini-grid figure { max-width: 280px; } }

/* ---------- Home: conector visual do processo ---------- */
@media (max-width: 900px) { .process-connector { display: none; } }

/* ---------- Home: card com imagem de capa (serviço / blog) ---------- */
.card--media { overflow: hidden; padding: 0; }
.card--media .card__img-wrap { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-subtle); }
.card--media .card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, 0.4s) var(--ease-out, ease); }
.card--media.card--interactive:hover .card__img-wrap img { transform: scale(1.04); }
.card--media .card__body-wrap { padding: var(--space-5); }
.card--media .card__body-wrap .card__title { margin-top: var(--space-3); }

/* ---------- Home: processo — passo numerado ---------- */
.process-step { text-align: center; padding: var(--space-6) var(--space-5); }
.process-step__num { width: 56px; height: 56px; border-radius: 50%; background: var(--color-azure-600); color: var(--color-white); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0 auto var(--space-4); }
.process-step--accent .process-step__num { background: var(--color-signal-500); }
.process-step .card__title { font-size: var(--fs-md); }
.process-step .card__body { font-size: var(--fs-sm); }

/* ---------- Home: citação autoral ---------- */
.brand-quote { border-left: 4px solid var(--color-azure-500); padding-left: var(--space-5); margin: var(--space-3) 0; color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-lg); font-style: italic; line-height: var(--lh-snug); }

/* ---------- Home: autoridade — imagem lateral ---------- */
.autoridade-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; min-height: 360px; }

/* ---------- Home: sobre mini — foto retrato ---------- */
.sobre-mini-grid figure { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/4; }
.sobre-mini-grid figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }


/* ===== GLE-992: estilos migrados de sobre/index.html (inline <style> -> CSS de página) ===== */
/* Reconhecimento (GLE-147) */
.reconhecimento__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-8); align-items: center; }
.reconhecimento__photo { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); }
.reconhecimento__photo img { width: 100%; height: auto; display: block; }
.reconhecimento__awards { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.reconhecimento__award { display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.05em; border: 1px solid var(--color-gold-500); border-radius: 999px; font-weight: var(--fw-semibold); color: var(--text-primary); background: color-mix(in srgb, var(--color-gold-400) 14%, transparent); }
.reconhecimento__award::before { content: ""; width: .55em; height: .55em; background: var(--color-gold-500); border-radius: 2px; transform: rotate(45deg); flex: none; }
@media (max-width: 900px) {
  .reconhecimento__grid { grid-template-columns: 1fr; }
  .reconhecimento__photo { order: -1; max-width: 520px; margin-inline: auto; }
}

/* Imersão EUA · Silicon Valley (GLE-148) */
.sv { background: var(--gradient-brand); color: var(--color-white); }
.sv .eyebrow { color: var(--color-signal-400); }
.sv h2 { color: #fff; }
.sv h2 .sv-accent { color: var(--color-signal-400); }
.sv__intro { max-width: 64ch; margin-bottom: var(--space-8); }
.sv__lead { color: rgba(255,255,255,.82); }
.sv__stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.sv__chip { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1.05em; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-weight: var(--fw-semibold); font-size: .9rem; color: #fff; background: rgba(255,255,255,.05); }
.sv__chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--color-signal-400); flex: none; }
.sv__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.sv__card { border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); }
.sv__card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sv__cap { padding: var(--space-3) var(--space-4) var(--space-4); }
.sv__cap b { display: block; color: #fff; font-weight: var(--fw-semibold); }
.sv__cap span { display: block; color: var(--color-signal-400); font-size: .82rem; margin-top: .2em; letter-spacing: .01em; }
@media (max-width: 900px) { .sv__gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sv__gallery { grid-template-columns: 1fr; } }