/* ==========================================================================
   Andréia Freitas — SISTEMA DE DESIGN
   Tokens, escalas e componentes compartilhados. Carregado antes de tudo.
   ========================================================================== */

/* ==========================================================================
   CORREÇÃO DO CIRCUNFLEXO
   Na Cormorant Garamond o acento de ê/â/ô fica alto e solto. Estes subsets da
   EB Garamond cobrem só Â Ê Ô â ê ô (unicode-range) e entram na frente da
   pilha de --display; o resto do texto continua em Cormorant.
   ========================================================================== */
@font-face{ font-family:"Circ Fix"; font-weight:500; font-style:normal; src:url(../fonts/circ-fix-500-normal.woff2) format("woff2");
  unicode-range:U+00C2,U+00CA,U+00D4,U+00E2,U+00EA,U+00F4; size-adjust:90%; font-display:swap; }
@font-face{ font-family:"Circ Fix"; font-weight:500; font-style:italic; src:url(../fonts/circ-fix-500-italic.woff2) format("woff2");
  unicode-range:U+00C2,U+00CA,U+00D4,U+00E2,U+00EA,U+00F4; size-adjust:90%; font-display:swap; }
@font-face{ font-family:"Circ Fix"; font-weight:600; font-style:normal; src:url(../fonts/circ-fix-600-normal.woff2) format("woff2");
  unicode-range:U+00C2,U+00CA,U+00D4,U+00E2,U+00EA,U+00F4; size-adjust:90%; font-display:swap; }
@font-face{ font-family:"Circ Fix"; font-weight:600; font-style:italic; src:url(../fonts/circ-fix-600-italic.woff2) format("woff2");
  unicode-range:U+00C2,U+00CA,U+00D4,U+00E2,U+00EA,U+00F4; size-adjust:90%; font-display:swap; }

:root{
  /* ---- cor: paleta "Ardósia & Névoa" ---- */
  /* fundos claros (se alternam entre as seções) */
  --cream:#F7F5F0;   /* fundo principal */
  --areia:#EEE6D8;   /* 2º fundo */
  --nevoa:#E4E9EA;   /* 3º fundo, cinza-azulado bem claro */

  /* escuro: só menu, véu do CTA, rodapé e botões */
  --slate:#2E4556;   /* azul-ardósia */
  --slate-2:#3A5467; /* hover dos botões escuros */

  /* texto */
  --ink:#22333F;     /* títulos e texto forte */
  --text:#52606B;    /* texto corrido em Montserrat */
  --text-2:#3A4852;  /* texto de listas / um pouco mais forte */

  /* dourado */
  --gold:#B5A964;      /* linhas, círculos, ícones, botão do CTA */
  --gold-soft:#CFC594; /* dourado sobre fundo escuro */
  --gold-text:#8A7C3A; /* dourado quando é TEXTO sobre fundo claro */

  --card:#faf7ef;
  --on-dark:var(--cream);
  --hairline:rgba(181,169,100,.28);

  /* ---- espaçamento (base 8) ---- */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:120px;

  /* ---- tipografia ---- */
  --fs-display-xl:clamp(3.5rem, 8.5vw, 7.25rem);
  --fs-display-l:clamp(2rem, 4vw, 3rem);
  --fs-display-m:clamp(1.25rem, 1.6vw, 1.45rem);
  --fs-eyebrow:0.82rem;
  --fs-lead:clamp(1rem, 1.4vw, 1.2rem);
  --fs-body:clamp(0.95rem, 1.05vw, 1rem);
  --fs-small:0.8rem;

  --ff-display:var(--display); /* seções antigas: mesma pilha, com a correção do circunflexo */
  --ff-sc:'Cormorant SC', serif;
  --ff-body:'Montserrat', sans-serif;

  /* ---- movimento ---- */
  --ease:cubic-bezier(.22,.61,.36,1);

  --radius-card:16px;
  --radius-panel:28px;

  /* ---- navbar + hero ---- */
  --display:"Circ Fix", "Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", system-ui, sans-serif;
  --wrap:1320px;
  --gutter:40px;
  --nav-h:84px;     /* altura da barra fixa (âncoras param abaixo dela) */
}
/* breakpoints: celular ≤767 · tablet 768–1023 · notebook 1024–1279 · desktop ≥1280 */
@media (max-width:1023px){
  :root{ --gutter:32px; --nav-h:68px; }
}
@media (max-width:767px){
  :root{ --gutter:20px; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* rede de segurança contra rolagem lateral; cada estouro é corrigido na origem */
html,
body{ overflow-x:clip; }

body{
  font-family:var(--ff-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.7;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* texto e imagens não podem ser selecionados nem copiados pelo toque longo */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
img{ -webkit-user-drag:none; }

/* height:auto neutraliza o atributo height do HTML (que existe para reservar
   espaço e evitar salto de layout) — quem manda no tamanho é o CSS da seção */
img{ max-width:100%; height:auto; display:block; }

/* âncoras param logo abaixo da navbar fixa */
[id]{ scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* abaixo do desktop, títulos com linhas equilibradas (o desktop aprovado não muda) */
@media (max-width:1279px){
  h1, h2, h3{ text-wrap:balance; }
}

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================================
   LAYOUT — container e ritmo de seção
   ========================================================================== */
.af-section{
  padding-block:var(--s8);
  position:relative;
}
.af-section--cream{ background:var(--cream); }
.af-section--areia{ background:var(--areia); }
.af-section--dark{ background:var(--slate); color:var(--on-dark); }

.af-container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(24px, 5vw, 40px);
}

/* container da navbar e da hero — o mesmo nos dois, para a logo e o título
   começarem na mesma linha vertical */
.af-wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
  /* celular deitado: o recorte do iPhone não cobre o conteúdo (no desktop o env() é 0) */
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* divisória entre duas seções claras seguidas */
.af-section--divided{ border-top:1px solid var(--hairline); }

/* distâncias verticais do bloco de cabeçalho de seção */
.af-head{ text-align:center; }
.af-head__title{ margin-top:var(--s2); }
.af-head__lead{
  margin-top:var(--s2);
  margin-inline:auto;
  max-width:60ch;
}
.af-head + *{ margin-top:var(--s6); }

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */
.af-display-xl{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:var(--fs-display-xl);
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.af-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:var(--fs-display-l);
  line-height:1.1;
  letter-spacing:.005em;
  color:var(--ink);
}
.af-section--dark .af-title{ color:var(--on-dark); }

.af-card__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:var(--fs-display-m);
  line-height:1.15;
  color:var(--ink);
}
.af-section--dark .af-card__title{ color:var(--on-dark); font-weight:500; }

.af-lead{
  font-family:var(--ff-body);
  font-size:var(--fs-lead);
  line-height:1.7;
  color:var(--ink);
  opacity:.8;
}
.af-section--dark .af-lead{ color:var(--on-dark); opacity:.85; }

.af-body{
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink);
  max-width:60ch;
}
.af-section--dark .af-body{ color:var(--on-dark); opacity:.85; }

/* frase curta elegante — Cormorant SC, linhas curtas só */
.af-sc{
  font-family:var(--ff-sc);
  letter-spacing:.04em;
  font-weight:600;
}

/* ==========================================================================
   EYEBROW — idêntico em todas as seções
   ========================================================================== */
.af-eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-family:var(--ff-sc);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:600;
  /* sobre fundo claro usa o dourado de texto (contraste); sobre fundo escuro, o dourado da marca */
  color:var(--gold-text);
  margin:0;
}
.af-section--dark .af-eyebrow,
.af-dores__inner .af-eyebrow{ color:var(--gold); }
.af-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
  flex:0 0 auto;
}
/* centralizado ganha o traço do outro lado */
.af-eyebrow--center{ justify-content:center; }
.af-eyebrow--center::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
  flex:0 0 auto;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.af-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--slate);
  color:var(--on-dark);
  padding:15px 32px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  font-family:var(--ff-sc);
  font-size:15px;
  letter-spacing:.14em;
  font-weight:600;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.af-btn:hover{
  transform:translateY(-2px);
  background:var(--slate-2);
  box-shadow:0 10px 24px rgba(34,51,63,.18);
}
.af-btn .af-arrow{
  display:inline-block;
  transition:transform .2s var(--ease);
}
.af-btn:hover .af-arrow{ transform:translateX(4px); }

/* variante fantasma — pílulas dos cards */
.af-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--s1);
  border:1px solid rgba(181,169,100,.5);
  background:rgba(181,169,100,.08);
  color:var(--gold);
  border-radius:30px;
  padding:10px 18px;
  font-family:var(--ff-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.af-pill svg{ width:15px; height:15px; flex:0 0 auto; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.af-card{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:var(--s4) 28px;
  box-shadow:0 8px 24px rgba(34,51,63,.06);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.af-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(34,51,63,.10);
}

/* card sobre fundo escuro */
.af-card--dark{
  background:rgba(244,238,225,.04);
  border:1px solid var(--hairline);
  box-shadow:none;
}
.af-card--dark:hover{
  transform:translateY(-4px);
  border-color:rgba(181,169,100,.55);
  box-shadow:none;
}
.af-card--dark:hover .af-pill{ border-color:rgba(181,169,100,.7); }

/* ícone padrão de card — mesmo em todo o site */
.af-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(181,169,100,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.af-icon svg{
  width:26px;
  height:26px;
  color:var(--gold);
  display:block;
  stroke-width:1.5;
}

/* tracinho dourado sob título de card */
.af-dash{
  width:28px;
  height:2px;
  background:var(--gold);
  margin-top:var(--s1);
}

/* ==========================================================================
   DIVISÓRIA CURTA COM PONTO
   ========================================================================== */
.af-rule{
  width:48px;
  height:1px;
  background:var(--gold);
  margin:var(--s2) auto 0;
  position:relative;
}
.af-rule::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold);
}

/* revelar ao rolar: ver css/motion.css (.rv) */

/* ==========================================================================
   RESPONSIVO GLOBAL
   ========================================================================== */
@media (max-width:1023px){
  .af-container{ padding-inline:var(--gutter); }
}
@media (max-width:767px){
  .af-section{ padding-block:var(--s6); }
  .af-head + *{ margin-top:var(--s5); }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}