/* ===========================================================
   EverBlue Events — tokens de marca
   Todos os valores vivem aqui. Nunca hardcode de cores no CSS.
   =========================================================== */

/* --- Fontes self-hosted (variáveis, 4 ficheiros no total) --- */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../assets/fonts/raleway-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../assets/fonts/raleway-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Cor ---------- */
  --azul:            #002F4F;   /* azul EverBlue, do logótipo oficial */
  --azul-claro:      #0A4A72;

  /* Acento único, em três tons.
     --rosa       rosa da marca. Botões, etiquetas, ícones e detalhes.
                  Decisão do cliente (21/08/2026): a marca vem primeiro. Com texto
                  branco por cima dá 3.29:1, abaixo do mínimo WCAG AA de 4.5:1.
     --rosa-hover o mesmo rosa mais escuro, para o estado hover dos botões.
     --rosa-link  para ligações dentro de texto corrido, onde a legibilidade
                  manda: 4.61:1 sobre branco. */
  --rosa:            #E66085;
  --rosa-hover:      #D14A6E;
  --rosa-link:       #C94668;
  --rosa-suave:      #FCEEF3;   /* fundos de etiquetas e caixas */

  --fundo:           #FFFFFF;
  --fundo-creme:     #FDF6EE;   /* secção "Porque escolher" */
  --fundo-suave:     #F4F8FA;
  --texto:           #454F5E;
  --texto-suave:     #5E6A79;
  --linha:           #DCE6EC;
  --branco:          #FFFFFF;

  /* Amarelo das estrelas do Google. Não é um segundo acento da marca: é a cor
     funcional do Google, tal como os quatro tons do logótipo deles. */
  --estrela:         #F5A623;

  /* Bolinhas de confetti do fundo branco. São o rosa e o azul da marca muito
     diluídos: o mais escuro dá #F8D6DF sobre branco, e o texto do site por cima
     dessa cor ainda mede 6,2:1 — bem acima do mínimo AA de 4,5:1. Só aparecem onde o fundo é branco — as
     secções em creme e azul-suave tapam-nas, e é assim que se quer. */
  --bolinha-rosa:    rgba(230, 96, 133, .26);
  --bolinha-azul:    rgba(0, 47, 79, .16);

  /* ---------- Tipografia ---------- */
  --f-titulo: 'Raleway', 'Trebuchet MS', system-ui, sans-serif;
  --f-corpo:  'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* escala 1.25 sobre 16px, fluida onde conta */
  --t-xs:   0.75rem;   /* 12px — etiquetas */
  --t-sm:   0.875rem;  /* 14px */
  --t-base: 1rem;      /* 16px */
  --t-md:   1.125rem;  /* 18px — corpo destacado */
  --t-lg:   clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.2rem + 3vw, 2.75rem);   /* h2 de secção */
  --t-3xl:  clamp(2.25rem, 1.3rem + 4.4vw, 4rem);     /* h1 do hero */

  --lh-apertado: 1.15;
  --lh-titulo:   1.25;
  --lh-corpo:    1.6;

  /* ---------- Espaçamento (múltiplos de 4) ---------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;
  --e-24: 6rem;
  --seccao: clamp(3.5rem, 2rem + 6vw, 6rem);   /* padding vertical de secção */

  /* ---------- Layout ---------- */
  --wrap: 1200px;
  --wrap-estreito: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Forma ---------- */
  --raio:      8px;
  --raio-lg:   16px;
  --raio-full: 999px;

  --sombra:    0 1px 2px rgba(0, 47, 79, .05), 0 8px 24px -14px rgba(0, 47, 79, .28);
  --sombra-lg: 0 2px 4px rgba(0, 47, 79, .06), 0 20px 44px -22px rgba(0, 47, 79, .38);

  /* ---------- Movimento ---------- */
  --transicao: 180ms ease;

  /* ---------- Alturas ---------- */
  --altura-header: 84px;
}

@media (max-width: 900px) {
  :root { --altura-header: 72px; }
}