/* ==========================================================================
   base.css
   Responsabilidade: reset, tokens de design (cores, tipografia, espaçamento)
   e estilos de elementos HTML puros. Nenhum componente ou layout aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Paleta e tipografia extraídas do site original (WordPress + Elementor).
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --c-navy:        #053155;  /* títulos e texto de destaque */
  --c-navy-deep:   #012644;  /* fim do gradiente dos botões teal */
  --c-teal:        #009fad;  /* cor de apoio, olho-de-boi e ícones */
  --c-teal-dark:   #015168;  /* fundo dos itens de FAQ */
  --c-teal-soft:   #6fd3de;  /* variação clara do teal, para fundos escuros */
  --c-gold:        #fac268;  /* destaque principal */
  --c-gold-light:  #faf368;  /* fim do gradiente dourado */
  --c-yellow:      #ffd52e;  /* ícone do cartão de chamada */
  --c-star:        #f7b704;  /* estrelas dos depoimentos */

  /* Superfícies */
  --c-white:       #ffffff;
  --c-surface-1:   #eaf3fa;  /* cabeçalho e rodapé */
  --c-surface-2:   #edf7ff;  /* rodapé */
  --c-surface-3:   #f1f9fe;  /* seção "sobre" */
  --c-surface-4:   #f6f6f6;  /* seção de depoimentos */
  --c-hero-mobile: #f1fafe;  /* cor de fundo da arte de hero em retrato */

  /* Texto */
  --c-text:        #000000;
  --c-text-soft:   #5c5c5c;
  --c-text-mute:   #8d8d8d;
  --c-text-faint:  #b8b8b8;

  /* Tipografia */
  --font-body: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Métrica */
  --container: 1140px;
  --header-h: 4.6rem;
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 17px;
  --radius-pill: 50px;

  /* Sombras */
  --shadow-card: 0 4px 15px rgba(0, 0, 0, .23);
  --shadow-cta: 0 4px 25px rgba(0, 0, 0, .5);
  --shadow-btn: 0 9px 25px -7px rgba(0, 0, 0, .76);
  --shadow-btn-sm: 0 9px 15px -6px rgba(0, 0, 0, .5);
  --shadow-carousel: 0 8px 30px rgba(75, 75, 75, .33);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, address {
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a:hover { text-decoration: none; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address { font-style: normal; }

strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   3. Utilitários de base
   -------------------------------------------------------------------------- */

/* Ícone SVG que herda tamanho e cor do contexto */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* O sprite de símbolos não deve ocupar espaço */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Atalho de teclado para pular a navegação */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { left: 0; }

/* Foco visível e consistente em toda a página */
:focus-visible {
  outline: 3px solid var(--c-teal);
  outline-offset: 3px;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}