/* ==========================================================================
   Ulex Flava — base.css
   Fundações visuais: cores, tipos de letra, espaçamentos e regras gerais.
   Este é o ficheiro que defines "a cara" de todo o site.
   ========================================================================== */

:root {
  /* --- Cores da marca (muda aqui para alterar o site todo) --- */
  --cor-carvao:        #171410;  /* quase preto — usado em texto e botões */
  --cor-carvao-suave:  #241F18;
  --cor-destaque:      #F2B705;  /* amarelo "Ulex" — cor de destaque */
  --cor-destaque-escura:#C9950B;
  --cor-destaque-clara:#FBE7A8;

  /* --- Neutros --- */
  --cor-fundo:        #FAF8F4;
  --cor-superficie:   #FFFFFF;
  --cor-superficie-2: #F3EFE7;
  --cor-borda:        #E7E1D6;
  --cor-texto:        #201B15;
  --cor-texto-suave:  #6C645A;
  --cor-branco:       #FFFFFF;

  /* --- Estados --- */
  --cor-sucesso: #1E8A5A;
  --cor-erro:    #C0392B;

  /* --- Tipografia --- */
  --fonte-titulo: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Espaçamentos (usa sempre estes em vez de números soltos) --- */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;

  /* --- Cantos arredondados e sombras --- */
  --raio-sm: 8px;
  --raio:    14px;
  --raio-lg: 22px;
  --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(23,20,16,.06), 0 2px 8px rgba(23,20,16,.06);
  --sombra-2: 0 6px 18px rgba(23,20,16,.10), 0 2px 6px rgba(23,20,16,.06);
  --sombra-3: 0 18px 48px rgba(23,20,16,.18);

  /* --- Layout --- */
  --largura-conteudo: 1180px;
  --altura-header: 72px;

  /* --- Transições --- */
  --trans: .22s cubic-bezier(.4,0,.2,1);
}

/* ------------------------- Reset / Normalização ------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ----------------------------- Tipografia ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--cor-carvao);
  margin: 0 0 var(--esp-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }

p  { margin: 0 0 var(--esp-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong { font-weight: 700; }

/* Pequeno texto de apoio por cima dos títulos */
.sobretitulo {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cor-destaque-escura);
  margin-bottom: var(--esp-3);
}

/* ------------------------------ Acessibilidade -------------------------- */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}

/* Link "saltar para o conteúdo" (aparece só com Tab) */
.skip-link {
  position: absolute; left: var(--esp-4); top: -100px;
  z-index: 200; padding: .6rem 1rem;
  background: var(--cor-carvao); color: var(--cor-branco);
  border-radius: var(--raio); text-decoration: none; font-weight: 600;
  transition: top var(--trans);
}
.skip-link:focus { top: var(--esp-4); }

/* --------------------------- Textura fenólica --------------------------- */
/* Simula visualmente o compacto fenólico (usado no personalizador e cartões) */
.textura-fenolico {
  background-color: #2A241D;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.07), transparent 45%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(22deg, rgba(0,0,0,.28) 0 1px, transparent 1px 5px);
}

/* Respeitar quem prefere menos animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}