/* ==========================================================================
   KRYON — base.css
   Design tokens, reset, tipografia, grid e utilitarios de acessibilidade.
   Carregar SEMPRE antes de components.css e pages.css.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------
     1.1 Paleta institucional — Manual de Marca Kryon, secao "04 · Paleta"
     ------------------------------------------------------------------------ */
  --c-primary: #263c65;        /* Azul Institucional  */
  --c-blue: #4a7bd0;           /* Azul Kryon          */
  --c-support: #c1cfe0;        /* Azul Claro (apoio)  */
  --c-bg: #eceff5;             /* Branco neutro       */
  --c-muted: #797d92;          /* Cinza de apoio      */

  /* ------------------------------------------------------------------------
     1.2 Derivadas — necessarias para atingir WCAG AA sem trair a marca

     Os dois azuis do manual sao lindos, mas nao passam em contraste quando
     recebem texto pequeno por cima:
       · branco sobre --c-blue  = 4.17:1  (AA exige 4.5:1 para texto normal)
       · --c-muted sobre --c-bg = 3.55:1

     Solucao adotada: as cores do manual continuam sendo a verdade visual
     (preenchimentos, diagonais, icones, bordas, graficos — onde contraste de
     texto nao se aplica) e estas derivadas assumem apenas onde HA texto.
     A diferenca visual e imperceptivel; a conformidade, nao.
     ------------------------------------------------------------------------ */
  --c-cta: #3c6cc4;            /* Fundo de botao solido — branco = 5.08:1     */
  --c-cta-hover: #35609f;      /* Estado hover do botao primario              */
  --c-link: #2f5eae;           /* Links e rotulos pequenos — 5.47:1 sobre --c-bg */
  --c-body: #4a5468;           /* Corpo de texto — 6.58:1 sobre --c-bg        */
  --c-blue-light: #7fa8e4;     /* Acento azul SOBRE fundo escuro — 4.44:1     */
  --c-placeholder: #6b7185;    /* Placeholder de campo — 4.92:1 sobre branco  */

  /* Profundidades do azul institucional, para gradientes e secoes escuras */
  --c-primary-900: #16233d;
  --c-primary-800: #1d2f4f;
  --c-primary-700: #263c65;
  --c-primary-600: #32507f;

  --c-white: #ffffff;
  --c-line: #d8dfea;           /* Bordas e divisores em fundo claro           */
  --c-line-dark: rgba(255, 255, 255, 0.14);

  /* Estados de formulario */
  --c-error: #b3261e;
  --c-success: #1c6b47;

  /* ------------------------------------------------------------------------
     1.3 Tipografia — Montserrat (titulos) + Poppins (texto)
     ------------------------------------------------------------------------ */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala fluida: o valor minimo vale em 360px, o maximo em ~1440px */
  /* O teto de 72px e o maior tamanho em que "Climatização" (a palavra mais
     longa da headline) ainda cabe em uma linha na coluna do hero. */
  --fs-display: clamp(2.375rem, 1.3rem + 3.8vw, 4.5rem);    /* 38 → 72 px */
  --fs-h1: clamp(2.125rem, 1.35rem + 2.7vw, 3.75rem);       /* 34 → 60 px */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);            /* 28 → 48 px */
  --fs-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);      /* 22 → 30 px */
  --fs-h4: clamp(1.125rem, 1.03rem + 0.35vw, 1.375rem);     /* 18 → 22 px */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); /* 17 → 21 px */
  --fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);      /* 16 → 17 px */
  --fs-small: 0.9375rem;                                     /* 15 px      */
  --fs-label: 0.8125rem;                                     /* 13 px      */

  --lh-tight: 1.06;
  --lh-heading: 1.16;
  --lh-body: 1.72;

  --ls-display: -0.02em;
  --ls-label: 0.16em;          /* Rotulos caixa-alta espacados, como no manual */

  /* ------------------------------------------------------------------------
     1.4 Layout — container 1440, 12 colunas, gutter 24
     ------------------------------------------------------------------------ */
  --container: 1440px;
  --gutter: 24px;
  --pad-x: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* Respiro vertical das secoes: ~72px no mobile, ~130px no desktop, teto 160 */
  --section-y: clamp(4.5rem, 1.5rem + 7.6vw, 10rem);
  --section-y-sm: clamp(3rem, 1.5rem + 4vw, 6rem);

  /* ------------------------------------------------------------------------
     1.5 Forma, sombra e movimento
     ------------------------------------------------------------------------ */
  --r-card: 16px;              /* Cards, conforme briefing */
  --r-btn: 8px;                /* Botoes, conforme briefing */
  --r-sm: 6px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(22, 35, 61, 0.06);
  --shadow-card: 0 6px 24px rgba(22, 35, 61, 0.08);
  --shadow-hover: 0 18px 44px rgba(22, 35, 61, 0.16);
  --shadow-header: 0 8px 30px rgba(22, 35, 61, 0.1);

  /* Curva unica em todo o site — consistencia de movimento vira assinatura */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 620ms;

  /* Inclinacao das diagonais da marca (usada em clip-path e gradientes) */
  --diag: 3.2vw;

  --header-h: 84px;
  --z-header: 100;
  --z-fab: 90;
  --z-overlay: 200;
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
    --diag: 5vw;
  }
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Impede que ancoras parem atras do header fixo */
  scroll-padding-top: calc(var(--header-h) + 24px);
  /* `clip` e nao `hidden`: hidden transformaria o <html> em container de
     rolagem e quebraria position:sticky no sumario do blog. O menu mobile
     fechado vive em translateX(100%), fora da tela — isso o mantem contido. */
  overflow-x: clip;
}

body {
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* Quebra de palavra longa e aceitavel em texto corrido, mas NUNCA em titulo:
   um "Climatizaç / ão" partido ao meio destroi a leitura da headline. */
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: manual;
  overflow-wrap: normal;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--c-link);
  text-decoration-color: color-mix(in srgb, var(--c-link) 35%, transparent);
  text-underline-offset: 0.22em;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--c-primary);
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--c-primary);
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800; /* ExtraBold — titulos principais, conforme manual */
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
}

/* Texto de abertura de secao */
.lead {
  color: var(--c-body);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.62;
  max-width: 62ch;
}

/* Rotulo caixa-alta espacado — o "01 · OBJETIVO" do manual de marca */
/* Usa --c-link, e nao --c-cta: com 13px em bold o rotulo conta como texto
   normal para a WCAG, e --c-cta atinge só 4.4:1 sobre o fundo claro. */
.eyebrow {
  align-items: center;
  color: var(--c-link);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  gap: 0.75rem;
  letter-spacing: var(--ls-label);
  line-height: 1;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

/* Trace inclinado que antecede o rotulo, ecoando o corte do logotipo */
.eyebrow::before {
  background: currentColor;
  content: '';
  display: block;
  height: 3px;
  transform: skewX(-24deg);
  width: 28px;
}

.eyebrow--light {
  color: var(--c-support);
}

/* Palavra de destaque dentro de um titulo */
.hl {
  color: var(--c-blue);
}

/* Numeros e dados — tabular para nao "dancar" durante a contagem */
.tnum {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--pad-x);
  width: 100%;
}

.container--narrow {
  max-width: 900px;
}

.container--reading {
  max-width: 760px;
}

/* Grid de 12 colunas com gutter de 24px */
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Auto-grid para listas de cards: nunca deixa um card espremido */
.autogrid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.autogrid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--tight-top {
  padding-top: var(--section-y-sm);
}

/* Secao em azul institucional */
.section--dark {
  background: var(--c-primary);
  color: rgba(255, 255, 255, 0.82);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--c-white);
}

.section--dark .lead {
  color: rgba(255, 255, 255, 0.82);
}

.section--dark a {
  color: var(--c-support);
}

.section--white {
  background: var(--c-white);
}

/* Cabecalho padrao de secao */
.section-head {
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);
  max-width: 64ch;
}

/* O reset zera todas as margens; o respiro entre titulo e texto de apoio
   precisa ser devolvido explicitamente. */
.section-head .lead {
  margin-top: 1.35rem;
}

.section-head--split .lead {
  margin-top: 0;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

/* A `.lead` tem max-width proprio; dentro de um cabecalho centralizado ela
   precisa se recentrar, senao encosta na margem esquerda. */
.section-head--center .lead {
  margin-inline: auto;
}

/* Cabecalho com titulo a esquerda e apoio a direita */
.section-head--split {
  align-items: end;
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  max-width: none;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* ==========================================================================
   5. LINGUAGEM VISUAL — diagonais
   O manual chama as diagonais de "caracteristica marcante". Elas aparecem
   como corte de secao, borda de card e mascara de imagem em todo o site.
   ========================================================================== */

/* Corte diagonal no topo da secao */
.clip-top {
  clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
}

/* Corte diagonal na base da secao */
.clip-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}

.clip-both {
  clip-path: polygon(
    0 var(--diag),
    100% 0,
    100% calc(100% - var(--diag)),
    0 100%
  );
}

/* Secoes cortadas precisam de folga extra para o texto nao encostar no corte */
.clip-top,
.clip-both {
  padding-top: calc(var(--section-y) + var(--diag));
}

.clip-bottom,
.clip-both {
  padding-bottom: calc(var(--section-y) + var(--diag));
}

/* Paralelogramo: a "pastilha" de atributo da pagina 03 do manual */
.skewbox {
  display: inline-block;
  transform: skewX(-14deg);
}

.skewbox > * {
  display: block;
  transform: skewX(14deg);
}

/* Faixa diagonal decorativa, posicionada em absoluto dentro de uma secao */
.diagonal-band {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

.diagonal-band::after {
  background: linear-gradient(
    115deg,
    transparent 45%,
    color-mix(in srgb, var(--c-blue) 12%, transparent) 45%,
    color-mix(in srgb, var(--c-blue) 12%, transparent) 55%,
    transparent 55%
  );
  content: '';
  inset: -20% -10%;
  position: absolute;
}

/* ==========================================================================
   6. UTILITARIOS
   ========================================================================== */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

.flow > * + * {
  margin-top: 1.15em;
}

.muted {
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Nota de acessibilidade: --c-muted (#797D92) so alcanca 3.55:1 sobre o fundo
   claro. Por isso e permitido apenas em texto grande (>=24px, ou >=19px bold),
   onde o limite WCAG AA e 3:1. Paragrafos usam --c-body.
   -------------------------------------------------------------------------- */
.muted-lg {
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

/* ==========================================================================
   7. ACESSIBILIDADE
   ========================================================================== */

/* Atalho para o conteudo principal — primeiro elemento focavel da pagina */
.skip-link {
  background: var(--c-primary);
  border-radius: 0 0 var(--r-btn) 0;
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 700;
  left: 0;
  padding: 0.9rem 1.5rem;
  position: absolute;
  text-decoration: none;
  top: 0;
  transform: translateY(-120%);
  transition: transform var(--t-fast) var(--ease);
  z-index: 999;
}

.skip-link:focus-visible {
  color: var(--c-white);
  transform: translateY(0);
}

/* Anel de foco unico e visivel em qualquer fundo */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.section--dark :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--c-support);
}

::selection {
  background: var(--c-blue);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — regra global do projeto.
   Nada de movimento e nada de parallax para quem pediu para reduzir. Os
   elementos que entram por scroll ficam imediatamente visiveis (o JS tambem
   verifica esta media query e nem chega a registrar os observers).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Impressao: remove cromia pesada e elementos de navegacao */
@media print {
  .site-header,
  .site-footer,
  .fab-whatsapp,
  .mascote,
  .scroll-indicator {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}