/* ==========================================================================
   Fashion Finder — CSS do SITE PÚBLICO (landing + páginas institucionais)
   --------------------------------------------------------------------------
   ESCOPO: só as páginas do site público — inicio.html, sobre.html,
   termos.html, contato.html. NÃO é usado pelo app (public/index.html usa
   public/styles.css) e NÃO substitui nada dele.

   POR QUE UM ARQUIVO SEPARADO, e não `styles.css`:
   public/styles.css é o design system do APP — e o app é uma casca de
   aparelho (`body { display:flex; align-items:center }` + `.device-container`
   com moldura de 12px e altura 92vh). Um site institucional de largura total
   e rolagem longa brigaria com essa casca em cada regra. Separar é mais
   barato e mais seguro do que desmontar o shell do app no meio de uma
   rodada em que outro agente está mexendo nele.

   TOKENS: os valores abaixo são ESPELHADOS de public/styles.css `:root`
   (brand kit oficial v1.1 — ver docs/BRAND_KIT.md). Não são um segundo
   sistema visual: são os MESMOS hex, as MESMAS fontes, o MESMO raio. A
   fonte da verdade continua sendo docs/BRAND_KIT.md; se a paleta mudar lá,
   mudar nos dois arquivos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* --- Cores: idênticas a public/styles.css :root (brand kit v1.1) --- */
  --bg-main: #FAF7F2;        /* Marfim */
  --bg-card: #FFFFFF;
  --bg-card-hover: #F4F1EA;

  --primary: #A8843A;        /* Ouro UI — CTAs, foco, links */
  --primary-glow: rgba(168, 132, 58, 0.15);
  --gold-marca: #CDA349;     /* Dourado FF — só logo/momento de marca */
  --secondary: #1A1410;      /* Tinta */

  --text-main: #1A1410;
  --text-muted: #57504A;
  --text-dim: #7A736C;
  --border-glass: #E7E1D6;

  --font-display: 'Playfair Display', serif;
  --font-editorial: 'Cormorant Garamond', serif;
  --font-sans: 'DM Sans', sans-serif;

  --shadow-sm: 0 2px 8px rgba(26, 20, 16, 0.04);
  --shadow-md: 0 8px 30px rgba(26, 20, 16, 0.06);
  --shadow-lg: 0 24px 60px rgba(26, 20, 16, 0.12);

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* --- Espaçamento: escala do site (o app não tem escala nomeada; esta é
         derivada do ritmo de 4px já usado nos paddings do app) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --largura-max: 1120px;
  --largura-texto: 68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--secondary); }

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

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--secondary);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-md) 0;
}
.pular-para-conteudo:focus { left: 0; color: #fff; }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-glass);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 72px;
}

/* Logo oficial do brand kit — NUNCA substituir por texto solto ou por
   outro desenho (docs/BRAND_KIT.md). */
.site-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-right: auto; }
.site-logo img { height: 30px; width: auto; }
.site-logo-marca {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--secondary);
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }

/* Escopado em `.nav-link` de propósito: um seletor `.site-nav a` genérico
   tem especificidade maior que `.btn-primario` e apagava a cor do texto do
   botão do cabeçalho (ficava cinza sobre fundo escuro). */
.site-nav a.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition);
}
.site-nav a.nav-link:hover { color: var(--secondary); }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primario { background: var(--secondary); color: #FFF; }
.btn-primario:hover { background: #2E241C; color: #FFF; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-secundario { background: transparent; color: var(--secondary); border-color: var(--border-glass); }
.btn-secundario:hover { background: var(--bg-card); border-color: var(--primary); color: var(--secondary); }

.btn-compacto { padding: 10px 20px; font-size: 0.9rem; }

/* ==========================================================================
   Tipografia de seção
   ========================================================================== */
.secao { padding: var(--sp-9) 0; }
.secao-clara { background: var(--bg-card); border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); }

.secao-rotulo {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.secao-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--secondary);
  max-width: 22ch;
}

.secao-texto {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  max-width: 58ch;
  font-size: 1.05rem;
}

.secao-cabecalho { margin-bottom: var(--sp-8); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: clamp(48px, 8vw, 96px) 0 var(--sp-9); }

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.hero-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 3.7rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--secondary);
}
.hero-titulo em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--primary);
}

.hero-sub {
  margin-top: var(--sp-5);
  font-size: 1.15rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
}

.hero-acoes {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero-nota {
  margin-top: var(--sp-4);
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* Moldura do produto: reproduz a proporção real da tela do app. */
.moldura-app {
  position: relative;
  background: var(--secondary);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  margin: 0 auto;
}
.moldura-app-tela {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-main);
  aspect-ratio: 9 / 17;
}
.moldura-app-tela > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caixa de detecção — mesma linguagem visual da detecção real do app
   (public/index.html #bounding-boxes-container). É ilustrativa: a legenda
   ao lado diz isso em texto. */
.deteccao-caixa {
  position: absolute;
  border: 2px solid var(--gold-marca);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px rgba(26, 20, 16, 0.28);
}
.deteccao-rotulo {
  position: absolute;
  top: -11px;
  left: -2px;
  background: var(--gold-marca);
  color: var(--secondary);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.chips-atributos {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-atributo {
  background: rgba(255, 255, 255, 0.94);
  color: var(--secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  font-size: 0.72rem;
  font-weight: 500;
}

.legenda-ilustracao {
  margin-top: var(--sp-4);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Faixa de fatos
   ========================================================================== */
.faixa-fatos {
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-card);
}
.faixa-fatos .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.fato-numero {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--secondary);
  line-height: 1.1;
}
.fato-texto { font-size: 0.9rem; color: var(--text-muted); margin-top: 2px; }

/* ==========================================================================
   Passos
   ========================================================================== */
.grade-passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  /* É um <ol> de verdade (a ordem importa e leitores de tela precisam
     dela), mas o número visível é o .passo-numero — sem isto o marcador
     nativo do <ol> aparece junto e a tela mostra dois números. */
  list-style: none;
}
.passo {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.secao-clara .passo { background: var(--bg-main); }
.passo-numero {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary-glow);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.passo-titulo {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: var(--sp-2);
}
.passo-texto { color: var(--text-muted); font-size: 0.98rem; }

/* ==========================================================================
   Demonstração (3 telas)
   ========================================================================== */
.grade-telas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.tela-item { text-align: center; }
.tela-item .moldura-app { max-width: 260px; }
.tela-legenda {
  margin-top: var(--sp-4);
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.tela-legenda strong { color: var(--secondary); display: block; font-weight: 600; margin-bottom: 2px; }

/* Recriação estática das telas de análise/resultado (sem produto inventado) */
.mini-tela {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-main);
  padding: 14px 12px;
  gap: 10px;
  text-align: left;
}
.mini-topo {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-glass);
}
.mini-topo img { height: 16px; width: auto; }
.mini-topo span { font-family: var(--font-display); font-size: 0.78rem; color: var(--secondary); }
.mini-titulo { font-family: var(--font-display); font-size: 0.92rem; color: var(--secondary); }
.mini-etapa {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.mini-etapa i {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--primary-glow);
  border: 1.5px solid var(--primary);
}
.mini-etapa.pendente i { background: transparent; border-color: var(--border-glass); }
.mini-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mini-card-foto { aspect-ratio: 3 / 4; background: linear-gradient(140deg, #EFEAE0, #E2DCD0); }
.mini-card-linhas { padding: 6px 7px 8px; }
.mini-linha { height: 5px; border-radius: 3px; background: #E7E1D6; margin-bottom: 5px; }
.mini-linha.curta { width: 55%; margin-bottom: 0; }
.mini-selo {
  align-self: flex-start;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-glow);
  padding: 3px 8px; border-radius: var(--radius-full);
}

/* ==========================================================================
   Benefícios
   ========================================================================== */
.grade-beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.beneficio {
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
}
.secao-clara .beneficio { background: var(--bg-main); }
.beneficio-icone {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-glow);
  color: var(--primary);
  margin-bottom: var(--sp-4);
}
.beneficio-icone svg { width: 21px; height: 21px; }
.beneficio-titulo {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: var(--sp-2);
}
.beneficio-texto { color: var(--text-muted); font-size: 0.97rem; }

/* Aviso honesto — o que o produto NÃO promete */
.nota-honesta {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--primary);
  background: var(--bg-main);
  color: var(--text-muted);
  font-size: 0.94rem;
  max-width: var(--largura-texto);
}
.secao-clara .nota-honesta { background: var(--bg-card); }
.nota-honesta svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); margin-top: 2px; }

/* ==========================================================================
   Perguntas frequentes
   ========================================================================== */
.faq { max-width: var(--largura-texto); }
.faq details {
  border-bottom: 1px solid var(--border-glass);
  padding: var(--sp-5) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--border-glass); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin-top: var(--sp-3); color: var(--text-muted); font-size: 0.99rem; }

/* ==========================================================================
   Chamada final
   ========================================================================== */
.cta-final {
  background: var(--secondary);
  color: #FAF7F2;
  text-align: center;
  padding: var(--sp-9) 0;
}
.cta-final h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.15;
  color: #FAF7F2;
  max-width: 20ch;
  margin: 0 auto;
}
.cta-final p { margin: var(--sp-4) auto 0; color: rgba(250, 247, 242, 0.72); max-width: 48ch; }
.cta-final .btn-primario { background: var(--gold-marca); color: var(--secondary); margin-top: var(--sp-6); }
.cta-final .btn-primario:hover { background: #DDB65F; color: var(--secondary); }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer {
  background: var(--bg-main);
  border-top: 1px solid var(--border-glass);
  padding: var(--sp-8) 0 var(--sp-6);
  font-size: 0.93rem;
}
.footer-grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-7);
}
.footer-sobre { color: var(--text-muted); max-width: 40ch; }
.footer-sobre .site-logo { margin-bottom: var(--sp-4); }
.footer-col h3 {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--primary); text-decoration: underline; }

.footer-base {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.footer-base p { max-width: 72ch; }

/* ==========================================================================
   Páginas de conteúdo (sobre / termos / contato)
   ========================================================================== */
.pagina-conteudo { padding: var(--sp-8) 0 var(--sp-9); }
.pagina-conteudo .container { max-width: 760px; }
.pagina-titulo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--secondary);
}
.pagina-resumo { margin-top: var(--sp-4); font-size: 1.1rem; color: var(--text-muted); }
.pagina-data { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--text-dim); }
.prosa { margin-top: var(--sp-7); }
.prosa h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--secondary);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 1.02rem; font-weight: 600; color: var(--secondary); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prosa p { margin-bottom: var(--sp-4); color: var(--text-muted); }
.prosa ul, .prosa ol { margin: 0 0 var(--sp-4) var(--sp-5); color: var(--text-muted); }
.prosa li { margin-bottom: var(--sp-2); }
.prosa strong { color: var(--secondary); font-weight: 600; }

.cartao-contato {
  margin-top: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.cartao-contato h2 { margin-top: 0; }
.contato-linha { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-glass); }
.contato-linha:last-child { border-bottom: none; padding-bottom: 0; }
.contato-linha svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.contato-rotulo { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.contato-valor { font-size: 1.05rem; color: var(--secondary); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-sub { max-width: none; }
  .grade-passos, .grade-beneficios, .grade-telas { grid-template-columns: 1fr; }
  .grade-telas { gap: var(--sp-8); }
  .faixa-fatos .container { grid-template-columns: 1fr 1fr; }
  .footer-grade { grid-template-columns: 1fr 1fr; }
  .footer-sobre { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .secao { padding: var(--sp-8) 0; }
  .site-header .container { min-height: 62px; gap: var(--sp-3); }
  .site-logo img { height: 26px; }
  .site-logo-marca { font-size: 1.12rem; }

  /* Nos telefones o cabeçalho guarda só o essencial: logo + a ação. Os
     links de navegação continuam alcançáveis no rodapé e nas âncoras da
     própria página — esconder é melhor do que um menu-sanduíche que
     ninguém precisa numa página de 6 seções. */
  .site-nav a.nav-link { display: none; }

  .hero { padding: var(--sp-7) 0 var(--sp-8); }
  .hero-acoes .btn { width: 100%; }
  .moldura-app { max-width: 280px; }
  .grade-telas .moldura-app { max-width: 240px; }
  .secao-titulo { max-width: none; }
  .footer-grade { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-base { flex-direction: column; gap: var(--sp-3); }
}