/*
 * base.css: ponte --sc-*, reset de pesos, tipografia, grade, foco, movimento
 * reduzido, rede de seguranca. Carrega depois de tokens.css e do CSS do motor
 * (07-TECNICO 3.2; 05-DESIGN 2.5, 3.2, 4, 6.6, 9).
 */

/* ============================================================ */
/* 0. Reset minimo                                                */
/* ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin: 0;
  min-height: 100svh;
}
img, svg{ max-width: 100%; display: block; }
.icone{ display: inline-block; width: 20px; height: 20px; flex: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
a{ color: inherit; }
ul[class], ol[class]{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin: 0; }
table{ border-collapse: collapse; }

/* ============================================================ */
/* 1. Ponte para os tokens do motor scroll-craft (05-DESIGN 2.5)  */
/* ============================================================ */
:root{
  --sc-font-display: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text:    "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:    "DM Mono", ui-monospace, Menlo, monospace;
  --sc-r-sm: 3px; --sc-r-md: 6px; --sc-r-lg: 10px; --sc-r-pill: 999px;
  --sc-shadow-color: 160 70% 6%;
  --sc-maxw: 82rem;
}
[class*="chao-"]{
  --sc-canvas: var(--chao); --sc-surface: #FFFFFF; --sc-ink: var(--tinta); --sc-ink-soft: var(--tinta-suave);
  --sc-accent: var(--acao); --sc-accent-ink: var(--acao-tinta);
}

/* base.css desfaz tres escolhas do motor que o site nao quer (07-TECNICO 3.2) */
:focus-visible{ outline: none; }
svg{ display: block; }
.icone{ display: inline-block; }
body{ background: var(--sc-canvas, #F7F9F8); }

/* ============================================================ */
/* 2. Cor padrao, nunca a do navegador (05-DESIGN 9.1)            */
/* ============================================================ */
html{ color: #151A17; background-color: #F7F9F8; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){ color: #F0EBE4; background-color: #0D110F; }
}
html[data-theme="dark"]{ color: #F0EBE4; background-color: #0D110F; }
a, button, input, select, textarea, summary, legend, mark{ color: inherit; }
::placeholder{ color: var(--tinta-suave, #556059); opacity: 1; }
select{ background-color: var(--chao, #FFFFFF); color: var(--tinta, #151A17); }
::selection{ background: rgba(11,61,46,.18); color: inherit; }
.chao-esmeralda ::selection{ background: rgba(240,235,228,.28); color: inherit; }
* { caret-color: var(--acao, #0B3D2E); }
* { scrollbar-width: thin; scrollbar-color: #6C746D transparent; }

/* ============================================================ */
/* 3. Tipografia: familias, pesos, escala (05-DESIGN 3.1 a 3.4)   */
/* ============================================================ */
body{
  font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.chao-esmeralda{ line-height: 1.68; }

/* Teto de peso 600 em tudo; navegador nasce com 700 em varios elementos */
h1,h2,h3,h4,h5,h6,b,strong,th,legend,summary{ font-weight: 500; }
* { font-synthesis: none; }

:root{
  --t-mini:     0.8125rem;
  --t-pequeno:  clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-corpo:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lide:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-h3:       clamp(1.1875rem, 1.1rem + 0.4vw, 1.5rem);
  --t-h2:       clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --t-h1:       clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --t-exibicao: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
  --t-cartaz:   clamp(5rem, 2rem + 13vw, 13.5rem);
}

h1{ font-size: var(--t-h1); line-height: 1.07; letter-spacing: -0.02em; font-weight: 400; max-inline-size: 24ch; text-wrap: balance; hyphens: manual; }
h2{ font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.015em; font-weight: 400; max-inline-size: 26ch; text-wrap: balance; hyphens: manual; margin-block: var(--sc-8, 4rem) var(--sc-4, 1rem); }
h3{ font-size: var(--t-h3); line-height: 1.28; letter-spacing: -0.008em; font-weight: 500; text-wrap: balance; hyphens: manual; }
.lide{ font-size: var(--t-lide); line-height: 1.5; letter-spacing: -0.003em; font-weight: 300; max-inline-size: 48ch; text-wrap: pretty; }
.mini, .t-mini{ font-size: var(--t-mini); line-height: 1.45; letter-spacing: 0.01em; font-weight: 400; }
.pequeno, .t-pequeno{ font-size: var(--t-pequeno); line-height: 1.5; letter-spacing: 0.005em; font-weight: 400; max-inline-size: 46ch; }

.chao-esmeralda h1{ font-weight: 500; }
.chao-esmeralda h2{ font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; }
.chao-esmeralda .lide{ line-height: 1.56; letter-spacing: 0.002em; font-weight: 400; }

p, .corpo{ font-size: var(--t-corpo); line-height: 1.62; max-inline-size: 62ch; text-wrap: pretty; }
.chao-esmeralda p, .chao-esmeralda .corpo{ line-height: 1.68; }

/* achado DES-10 (C3 P0): dois paragrafos seguidos em texto corrido colavam sem
   respiro (p{ margin: 0 } na linha 25 nunca ganhava espaco entre eles). Os pares
   do pico da Home ficam de fora por posicao absoluta, dentro de .ar-app. */
main p + p:not(.ar-app p){ margin-block-start: 0.85em; }

.exibicao{ font-size: var(--t-exibicao); line-height: 1.04; font-weight: 400; letter-spacing: -0.025em; }
.exibicao--marca{ font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; letter-spacing: -0.012em; }
.cartaz{ font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: var(--t-cartaz); line-height: 0.9; letter-spacing: -0.03em; }

@media (max-width: 480px){
  html{ hyphens: auto; }
  /* achado LEI-16 (C3 P0): a hifenização automática parte palavra-chave do
     apoio do herói e da linha da IA justo na primeira tela; essas linhas não
     hifenizam no celular. */
  .lide, .heroi__ia, [data-cta="microcopy"], .heroi__apoio{ hyphens: manual; }
}

/* Numeros: DM Mono tabular em todo algarismo visivel (05-DESIGN 3.4) */
.num, data, time{
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
body .num{ font-size: 0.94em; font-weight: 400; }

/* Espacos inseparaveis e translate="no" ficam no HTML de cada pagina */

/* ============================================================ */
/* 4. Grade e espaco (05-DESIGN 4.1 a 4.3)                        */
/* ============================================================ */
:root{
  --bp-sm: 480px; --bp-md: 720px; --bp-palco: 860px; --bp-lg: 1120px; --bp-xl: 1440px;
  --sc-1: 4px; --sc-2: 8px; --sc-3: 12px; --sc-4: 16px; --sc-5: 24px; --sc-6: 32px;
  --sc-7: 48px; --sc-8: 64px; --sc-9: 96px; --sc-10: 128px; --sc-11: 192px;
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --secao-compacta: clamp(3rem, 6vw, 6rem);
}
.envelope{
  max-inline-size: 82rem;
  margin-inline: auto;
  padding-inline: var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem));
}
.grade{
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 720px){ .grade{ grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1120px){ .grade{ grid-template-columns: repeat(12, 1fr); } }

/* ============================================================ */
/* 5. Forma: raios e sombras (05-DESIGN 5)                        */
/* ============================================================ */
:root{
  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;
  --e1: var(--shadow-sm, 0 1px 2px rgba(11,61,46,.06));
  --e2: var(--shadow-md, 0 4px 14px rgba(11,61,46,.08), 0 1px 3px rgba(11,61,46,.05));
  --e3: var(--shadow-lg, 0 18px 44px rgba(11,61,46,.12), 0 4px 12px rgba(11,61,46,.06));
}
.chao-esmeralda{
  --e1: 0 1px 2px rgba(2,14,10,.40);
  --e2: 0 6px 16px -4px rgba(2,14,10,.45), 0 2px 4px rgba(2,14,10,.30);
  --e3: 0 24px 60px -12px rgba(2,14,10,.60), 0 6px 16px rgba(2,14,10,.35);
}

/* ============================================================ */
/* 6. Movimento: duracoes e curvas (05-DESIGN 6.2)                */
/* ============================================================ */
:root{
  --d-foco: 0ms;
  --d-toque: 100ms;
  --d-hover: 150ms;
  --d-ui: 200ms;
  --d-ui-lento: 320ms;
  --d-estado: 420ms;
  --d-entrada: 620ms;
  --d-desenho: 900ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --sc-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sc-ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ============================================================ */
/* 7. Foco visivel em tudo que e interativo (05-DESIGN 9.1)       */
/* ============================================================ */
a, button, input, select, textarea, summary, [tabindex]{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus{ outline: none; }
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, rgba(11,61,46,.55));
}
:focus:not(:focus-visible){ outline: none; }
[data-destrutivo]:focus-visible{ box-shadow: 0 0 0 3px var(--anel-destrutivo); }

[id]{ scroll-margin-top: calc(var(--cabecalho-h, 64px) + 16px); }

.pular{
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 80;
  background: var(--acao, #0B3D2E);
  color: var(--acao-tinta, #FFFFFF);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 500;
  transition: top var(--d-ui) var(--ease);
}
.pular:focus{
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
}

/* ============================================================ */
/* 8. Rede de seguranca: primeiro ato sem JS (05-DESIGN 9.2)      */
/* ============================================================ */
html:not(.sc-ready) [data-sc-cue],
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > *,
html:not(.sc-ready) [data-sc-copy]{ opacity: 1 !important; transform: none !important; }

/* ============================================================ */
/* 9. Movimento reduzido, tratamento global (05-DESIGN 6.6)       */
/* ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: 200ms !important;
  }
  .heroi-plano{ transform: none !important; }
  .traco-vital{ display: none; }
  .traco-vital__repouso{ display: block; }
  .campo__canvas{ display: none; }
}

/* ============================================================ */
/* 10. Utilitarios                                                */
/* ============================================================ */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[hidden]{ display: none !important; }