/* 01-base.css
   Base: cores da paleta (variáveis), fontes, reset e o tamanho de cada "tela".
*/

/* Layout: 1) hero vermelho de ponta a ponta; 2) serviços sobre o creme da página, com título gigante atrás de cartas coloridas que balançam; título gigante atrás do dálmata, tags de serviço flutuando em volta. Paleta do Joao. Visual único (sem tema escuro), cores todas explícitas. */
:root {
  --page: #FFF9F2;      /* creme */
  --hero: #F12F32;      /* vermelho vibrante */
  --hero-deep: #c41f27;
  --cream: #FFF9F2;
  --ink: #282528;       /* preto grafite */
  --brown: #542D2B;     /* marrom escuro */
  --caramel: #B87942;   /* marrom caramelo */
  --violet: #6554E8;    /* azul-violeta */
  --gold: #F7C94B;      /* amarelo dourado */
  --white: #FFFFFF;
  --sky-top: #7FAEEC;   /* céu da referência */
  --sky-mid: #93B9F2;
  --sky-low: #C9D9F5;
  --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; } /* links do menu deslizam até a seção */
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
.screen {
  min-height: max(640px, 100svh);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hero {
  position: relative;
  background: var(--hero);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}
.hero::after { /* leve granulado para tirar o "chapado" do laranja */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 110%, var(--hero-deep), transparent 60%);
}

/* tira a margem padrão que o navegador coloca no body */
body { margin: 0; }