/* ==========================================================================
   KRYO — BASE
   Reset enxuto + tipografia + utilitários próprios.

   Os utilitários aqui são APENAS os que as 4 páginas usam de fato.
   Não é um framework: não há geração, não há variante que ninguém chama.
   Antes de acrescentar um utilitário novo, verifique se um componente
   em kryo.css não resolve melhor.

   Nomes: geometria mantém o nome convencional (mb-6, flex, px-4) porque
   descreve exatamente o que faz e independe de paleta. Cor, borda e fundo
   usam nome semântico (t-muted, bg-surface, bd-hair) porque a Fase 2 troca
   os valores — um nome como "text-gray-400" passaria a mentir.
   Prefixos responsivos usam hífen (sm-, md-, lg-) em vez de dois-pontos:
   sem build, dois-pontos exigiria escape no seletor.
   ========================================================================== */

@layer base {
  /* ---------- Reset ---------- */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--c-border-default);
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    line-height: var(--lh-snug);
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
    font-family: var(--font-text);
    background: var(--c-ground);
    color: var(--c-text-strong);
    -webkit-font-smoothing: antialiased;
  }

  /* Corpo mínimo do tema claro (3.2): 16px no mobile, 17px a partir do
     desktop. Escopado — o tema escuro de tecnologia/indústria não muda. */
  body[data-theme="light"] {
    font-size: 1rem;
  }
  @media (min-width: 768px) {
    body[data-theme="light"] {
      font-size: 1.0625rem;
    }
  }

  /* Títulos herdam: o tamanho vem sempre de um utilitário explícito, para
     que a hierarquia semântica (h1/h2/h3) fique livre da hierarquia visual. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  summary {
    display: list-item;
  }

  menu,
  ol,
  ul {
    list-style: none;
  }

  audio,
  canvas,
  embed,
  iframe,
  img,
  object,
  svg,
  video {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: var(--c-text-muted);
  }

  [hidden] {
    display: none;
  }

  /* Foco visível preservado: os CTAs viraram <a> na tarefa 1.6 e
     precisam continuar alcançáveis por teclado. */
  :focus-visible {
    outline: 2px solid var(--c-accent-strong);
    outline-offset: 2px;
  }

  /* ---------- Tipografia ---------- */
  .font-display {
    font-family: var(--font-display);
  }
}

@layer utilities {
  /* ---------- Posição ---------- */
  .fixed { position: fixed; }
  .absolute { position: absolute; }
  .relative { position: relative; }
  .inset-0 { inset: 0; }
  .top-0 { top: 0; }
  .right-0 { right: 0; }
  .bottom-8 { bottom: var(--sp-8); }
  .left-0 { left: 0; }
  /* Centralização horizontal absoluta: substitui o trio
     left-1/2 + transform + -translate-x-1/2, que sempre andava junto. */
  .center-x { left: 50%; transform: translateX(-50%); }
  .z-10 { z-index: 10; }
  .z-50 { z-index: 50; }
  .order-1 { order: 1; }
  .order-2 { order: 2; }

  /* ---------- Display ---------- */
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }
  .hidden { display: none; }

  /* ---------- Dimensão ---------- */
  .w-4 { width: var(--sp-4); }
  .w-5 { width: var(--sp-5); }
  .w-6 { width: var(--sp-6); }
  .w-10 { width: var(--sp-10); }
  .w-16 { width: var(--sp-16); }
  .w-24 { width: var(--sp-24); }
  .w-36 { width: var(--sp-36); }
  .w-full { width: 100%; }
  .h-4 { height: var(--sp-4); }
  .h-5 { height: var(--sp-5); }
  .h-6 { height: var(--sp-6); }
  .h-10 { height: var(--sp-10); }
  .h-16 { height: var(--sp-16); }
  .h-72 { height: 18rem; }
  .min-h-screen { min-height: 100vh; }
  .aspect-video { aspect-ratio: 16 / 9; }
  .max-w-md { max-width: var(--w-md); }
  .max-w-2xl { max-width: var(--w-2xl); }
  .max-w-3xl { max-width: var(--w-3xl); }
  .max-w-4xl { max-width: var(--w-4xl); }
  .max-w-5xl { max-width: var(--w-5xl); }
  .max-w-6xl { max-width: var(--w-6xl); }
  .max-w-7xl { max-width: var(--w-7xl); }

  /* ---------- Flex / Grid ---------- */
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .shrink-0 { flex-shrink: 0; }
  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-3); }
  .gap-4 { gap: var(--sp-4); }
  .gap-5 { gap: var(--sp-5); }
  .gap-6 { gap: var(--sp-6); }
  .gap-12 { gap: var(--sp-12); }
  .gap-x-8 { column-gap: var(--sp-8); }
  .gap-y-3 { row-gap: var(--sp-3); }

  /* Espaçamento entre irmãos */
  .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: var(--sp-8); }
  .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--sp-2); }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--sp-3); }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--sp-4); }
  .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--sp-10); }

  /* ---------- Margem ---------- */
  .mx-auto { margin-left: auto; margin-right: auto; }
  .mt-1 { margin-top: var(--sp-1); }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-6 { margin-top: var(--sp-6); }
  .mt-16 { margin-top: var(--sp-16); }
  .mb-1 { margin-bottom: var(--sp-1); }
  .mb-2 { margin-bottom: var(--sp-2); }
  .mb-4 { margin-bottom: var(--sp-4); }
  .mb-6 { margin-bottom: var(--sp-6); }
  .mb-8 { margin-bottom: var(--sp-8); }
  .mb-10 { margin-bottom: var(--sp-10); }
  .mb-12 { margin-bottom: var(--sp-12); }
  .mb-16 { margin-bottom: var(--sp-16); }
  .mb-20 { margin-bottom: var(--sp-20); }
  .mb-24 { margin-bottom: var(--sp-24); }

  /* ---------- Padding ---------- */
  .p-2 { padding: var(--sp-2); }
  .p-3 { padding: var(--sp-3); }
  .p-6 { padding: var(--sp-6); }
  .p-8 { padding: var(--sp-8); }
  .px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .px-10 { padding-left: var(--sp-10); padding-right: var(--sp-10); }
  .py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  .py-20 { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
  .py-32 { padding-top: var(--sp-32); padding-bottom: var(--sp-32); }
  .py-36 { padding-top: var(--sp-36); padding-bottom: var(--sp-36); }
  .pt-half { padding-top: var(--sp-half); }
  .pt-8 { padding-top: var(--sp-8); }
  .pt-20 { padding-top: var(--sp-20); }
  .pb-16 { padding-bottom: var(--sp-16); }

  /* ---------- Tipografia ---------- */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-xs { font-size: var(--fs-xs); line-height: var(--sp-4); }
  .text-sm { font-size: var(--fs-sm); line-height: var(--sp-5); }
  .text-lg { font-size: var(--fs-lg); line-height: 1.75rem; }
  .text-xl { font-size: var(--fs-xl); line-height: 1.75rem; }
  .text-2xl { font-size: var(--fs-2xl); line-height: var(--sp-8); }
  .text-3xl { font-size: var(--fs-3xl); line-height: 2.25rem; }
  .text-4xl { font-size: var(--fs-4xl); line-height: var(--sp-10); }
  .text-5xl { font-size: var(--fs-5xl); line-height: var(--lh-none); }
  .font-light { font-weight: var(--fw-light); }
  .font-medium { font-weight: var(--fw-medium); }
  .font-semibold { font-weight: var(--fw-semibold); }
  .font-bold { font-weight: var(--fw-bold); }
  .font-extrabold { font-weight: var(--fw-extrabold); }
  .uppercase { text-transform: uppercase; }
  .leading-tight { line-height: var(--lh-tight); }
  .leading-relaxed { line-height: var(--lh-relaxed); }
  .tracking-tight { letter-spacing: var(--ls-tight); }
  .tracking-wide { letter-spacing: var(--ls-wide); }
  .tracking-widest { letter-spacing: var(--ls-widest); }

  /* ---------- Cor de texto (semântica) ---------- */
  .t-strong { color: var(--c-text-strong); }
  .t-body { color: var(--c-text-body); }
  .t-muted { color: var(--c-text-muted); }
  .t-faint { color: var(--c-text-faint); }
  .t-fainter { color: var(--c-text-fainter); }
  .t-inverse { color: var(--c-text-inverse); }
  .t-accent { color: var(--c-accent-strong); }
  .t-danger { color: var(--c-danger-text); }
  .t-danger-strong { color: var(--c-danger); }
  .t-success { color: var(--c-success); }
  .t-info { color: var(--c-info); }
  .t-alt { color: var(--c-alt); }
  .t-whats { color: var(--c-whats); }

  /* ---------- Fundo (semântico) ---------- */
  .bg-base { background-color: var(--c-ground); }
  .bg-surface { background-color: var(--c-surface); }
  .bg-surface-2 { background-color: var(--c-surface-panel); }
  .bg-accent { background-color: var(--c-accent); }
  .bg-accent-soft { background-color: rgb(var(--rgb-brand) / 0.1); }
  .bg-danger-soft { background-color: rgb(var(--rgb-danger) / 0.1); }
  .bg-info-soft { background-color: rgb(var(--rgb-support) / 0.1); }
  .bg-alt-soft { background-color: rgb(var(--rgb-alt) / 0.1); }

  /* Gradientes: cada classe substitui o trio direção + from + to,
     que nas 4 páginas nunca apareceu separado. */
  .grad-page {
    background-image: linear-gradient(
      to bottom,
      var(--c-ground),
      var(--c-ground-2)
    );
  }
  .grad-accent {
    background-image: linear-gradient(
      to right,
      var(--c-accent),
      var(--c-accent-deep)
    );
  }
  .grad-shell {
    background-image: linear-gradient(
      to bottom right,
      var(--c-shell-from),
      var(--c-shell-to)
    );
  }

  /* ---------- Borda ---------- */
  .border { border-width: 1px; }
  .border-t { border-top-width: 1px; }
  .bd-hair { border-color: var(--c-border-hair); }
  .bd-soft { border-color: var(--c-border-soft); }
  .bd-accent { border-color: var(--c-border-accent); }
  .bd-danger { border-color: var(--c-border-danger); }
  .rounded { border-radius: var(--r-sm); }
  .rounded-lg { border-radius: var(--r-md); }
  .rounded-xl { border-radius: var(--r-lg); }
  .rounded-2xl { border-radius: var(--r-xl); }
  .rounded-full { border-radius: var(--r-full); }

  /* Rolagem suave nativa: aplicada em <html class="scroll-smooth">.
     E o que faz as ancoras internas rolarem suave SEM JavaScript,
     depois que os onclick viraram <a href="#..."> na tarefa 1.6. */
  .scroll-smooth { scroll-behavior: smooth; }

  /* ---------- Efeito ---------- */
  .opacity-50 { opacity: 0.5; }
  .overflow-hidden { overflow: hidden; }
  .cursor-pointer { cursor: pointer; }
  .backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--ease);
    transition-duration: var(--dur-fast);
  }
  .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: var(--ease);
    transition-duration: var(--dur-fast);
  }
  .transition-transform {
    transition-property: transform;
    transition-timing-function: var(--ease);
    transition-duration: var(--dur-fast);
  }
  .duration-300 { transition-duration: var(--dur-mid); }

  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .animate-bounce { animation: bounce 1s infinite; }

  /* ---------- Hover ---------- */
  .hv-t-accent:hover { color: var(--c-accent-strong); }
  .hv-bg-accent:hover { background-color: var(--c-accent-strong); }
  .hv-bd-accent:hover { border-color: var(--c-accent-strong); }
  .hv-t-whats:hover { color: var(--c-whats); }
  .hv-bg-whats:hover { background-color: rgb(var(--rgb-whats) / 0.2); }
  .hv-scale:hover { transform: scale(1.05); }

  /* ---------- Responsivo — mobile-first ---------- */
  @media (min-width: 640px) {
    .sm-flex-row { flex-direction: row; }
    .sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 768px) {
    .md-flex { display: flex; }
    .md-block { display: block; }
    .md-flex-row { flex-direction: row; }
    .md-order-1 { order: 1; }
    .md-order-2 { order: 2; }
    .md-text-left { text-align: left; }
    .md-justify-start { justify-content: flex-start; }
    .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-p-12 { padding: var(--sp-12); }
    .md-text-base { font-size: var(--fs-base); line-height: var(--sp-6); }
    .md-text-2xl { font-size: var(--fs-2xl); line-height: var(--sp-8); }
    .md-text-4xl { font-size: var(--fs-4xl); line-height: var(--sp-10); }
    .md-text-5xl { font-size: var(--fs-5xl); line-height: var(--lh-none); }
    .md-text-6xl { font-size: var(--fs-6xl); line-height: var(--lh-none); }
    .md-text-7xl { font-size: var(--fs-7xl); line-height: var(--lh-none); }
  }

  @media (min-width: 1024px) {
    /* O CTA do topo so cabe a partir de 1024: entre 768 e 1023 o menu
       (que ja tem o link DIAGNOSTICO) ocupa a largura toda. Ver 1.7. */
    .lg-block { display: block; }
    .lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-text-7xl { font-size: var(--fs-7xl); line-height: var(--lh-none); }
    .lg-text-8xl { font-size: var(--fs-8xl); line-height: var(--lh-none); }
  }
}