/* =====================================================================
   INSTITUTO DE TERAPIA INTEGRATIVA ROBSON M. NONATO
   Design System "Porto Seguro" — tokens.css  ·  v1.1 (calibrado à logo)
   Paleta derivada da logo oficial: TEAL #03989E (marca) + INDIGO #12095B (autoridade).
   Base clara e serena · terracota de ação (complementar) · dourado discreto.
   Breakpoints (referência): 480 · 600 · 768 · 860 · 1024 · 1240px
   ===================================================================== */

/* Fonte única do site: Archivo (grotesca) — títulos, display e corpo
   <link rel="preconnect" href="https://fonts.googleapis.com">
   Archivo: wght 300-800 + italic */

:root{
  /* ---------- COR · NEUTROS / BASE CLARA (v1.3 — luz e ordem, coeso com a hero clara) ---------- */
  --color-bg:            #F2F5F5;             /* fundo principal claro e sereno */
  --color-surface:       #FFFFFF;             /* cards / superfície elevada */
  --color-surface-2:     #F5F8F8;             /* inputs / soft off-white */
  --color-surface-3:     #E8F1F1;             /* seção alternada (teal-tinted claro) */
  --color-border:        rgba(18,17,63,.12);  /* bordas padrão sobre claro */
  --color-border-light:  rgba(18,17,63,.06);  /* hairlines sutis */

  /* ---------- COR · PRIMÁRIA (TEAL — marca, âncora logo #03989E) ---------- */
  --color-primary-50:    #E8F5F6;
  --color-primary-100:   #C6E8EA;
  --color-primary-200:   #92D3D7;
  --color-primary-300:   #54B8BD;
  --color-primary-400:   #149EA5;
  --color-primary-500:   #03989E;  /* teal da logo · interativo/large/ícones */
  --color-primary-600:   #0A7B81;  /* COR DE MARCA · botão primário (texto branco AA) */
  --color-primary-700:   #0A5E63;  /* texto de marca / links sobre claro */
  --color-primary-800:   #0B4A4E;  /* seções escuras pontuais */
  --color-primary-900:   #0A383B;  /* teal profundo */

  /* ---------- COR · SECUNDÁRIA / INK (INDIGO — autoridade, âncora logo #12095B) ---------- */
  --color-secondary-50:  #ECEBF4;
  --color-secondary-100: #D5D2E8;
  --color-secondary-200: #ABA5CE;
  --color-secondary-300: #7D75B2;
  --color-secondary-400: #4E4593;
  --color-secondary-500: #302577;
  --color-secondary-600: #221873;
  --color-secondary-700: #180E66;
  --color-secondary-800: #12095B;  /* indigo da logo */
  --color-secondary-900: #0C0643;  /* rodapé / seção profunda */

  /* ---------- COR · AÇÃO / CTA (terracota — complementar ao teal) ---------- */
  --color-cta-400:       #C77650;
  --color-cta-500:       #BC5A38;  /* fundo do CTA de conversão */
  --color-cta-600:       #9C4527;  /* hover / texto de ação */
  --color-cta-700:       #7C3620;

  /* ---------- COR · ACENTO PREMIUM (dourado/âmbar discreto) ---------- */
  --color-accent-100:    #F1E4C6;
  --color-accent-300:    #D8B577;  /* ratings, ícones premium */
  --color-accent-500:    #B08A3E;  /* filetes de selo, detalhes finos */
  --color-accent-600:    #96733A;  /* checks, ícones sobre claro */
  --color-accent-700:    #7E5F22;  /* texto de selo/eyebrow dourado */

  /* ---------- COR · TEXTO (sobre base clara) ---------- */
  --color-text:          #293039;  /* corpo (slate ~12:1) */
  --color-text-strong:   #14113F;  /* títulos (indigo-ink ~16:1) */
  --color-text-muted:    #565B63;  /* secundário (AA) */
  --color-text-subtle:   #808690;  /* placeholders, meta */
  --color-text-on-dark:  #EAF3F3;  /* sobre indigo/teal profundo (seções escuras) */
  --color-text-on-primary:#FFFFFF; /* sobre botões de marca */

  /* ---------- COR · ESTADOS ---------- */
  --color-success:       #2E7D5B;
  --color-success-bg:    #E2F1EA;
  --color-error:         #B23A2A;
  --color-error-bg:      #F6E5E1;

  /* ---------- COR · DESTAQUE (amarelo ácido — energia da hero, calibrado ao mockup) ---------- */
  --color-highlight-300: #F2F65C;  /* brilho / hover-lift / anel de foco */
  --color-highlight-400: #EAEF2E;  /* hover claro */
  --color-highlight-500: #E4E90C;  /* AMARELO ÁCIDO — CTA de energia, números-chave, "porto seguro" */
  --color-highlight-600: #C9CE00;  /* hover / pressed */
  --color-highlight-700: #A6AB00;  /* profundo / borda */
  --color-highlight-ink: #0B0B0C;  /* texto sobre o amarelo (near-black · AAA) */

  /* ---------- COR · TEMA ESCURO (hero e superfícies profundas near-black) ---------- */
  --color-ink-950:        #08080A;  /* fundo base da hero */
  --color-ink-900:        #0D0D10;  /* superfície escura */
  --color-ink-850:        #131318;  /* superfície elevada */
  --color-ink-800:        #1A1A20;  /* card de destaque translúcido */
  --color-ink-700:        #24242C;  /* bordas / hairlines sobre escuro */
  --color-on-dark-strong: #F5F6F7;  /* títulos / near-white sobre escuro */
  --color-on-dark-muted:  #A9ACB1;  /* lead / secundário sobre escuro (AA) */
  --color-on-dark-subtle: #767981;  /* meta / rótulos discretos sobre escuro */

  /* ---------- TIPOGRAFIA · FAMÍLIAS ---------- */
  --font-serif:   'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-sans:    'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display: 'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* Archivo em todo o site */

  /* ---------- TIPOGRAFIA · ESCALA FLUIDA ---------- */
  --text-display: clamp(2.75rem, 6vw, 4.5rem);
  --text-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --text-h2:      clamp(1.875rem, 4vw, 2.75rem);
  --text-h3:      clamp(1.375rem, 2.4vw, 1.75rem);
  --text-h4:      clamp(1.125rem, 1.8vw, 1.375rem);
  --text-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --text-body:    1rem;
  --text-body-lg: 1.125rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-eyebrow: 0.75rem;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;--space-40:160px;
  --section-y: clamp(5rem, 10vw, 10rem);      /* ritmo de seção 80→160 */

  /* ---------- LAYOUT / CONTAINERS ---------- */
  --container:        1240px;
  --container-wide:   1360px;
  --container-narrow: 720px;                  /* leitura de blog */
  --container-px:     clamp(1.5rem, 4vw, 3.5rem); /* padding lateral 24→56 */

  /* ---------- BORDER-RADIUS ---------- */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px; --radius-full:50%;

  /* ---------- SOMBRAS (tingidas com o teal da marca) ---------- */
  --shadow-xs:  0 1px 2px  rgba(10,86,90,.05);
  --shadow-sm:  0 2px 12px rgba(10,86,90,.07);
  --shadow-md:  0 8px 30px rgba(10,86,90,.09);
  --shadow-lg:  0 16px 48px rgba(10,86,90,.11);
  --shadow-xl:  0 28px 64px rgba(10,86,90,.13);
  --shadow-focus: 0 0 0 3px rgba(3,152,158,.28);
  --shadow-cta:   0 10px 28px rgba(188,90,56,.26);
  --shadow-highlight: 0 12px 30px rgba(228,233,12,.22); /* glow amarelo no hover do CTA de energia */
  --shadow-hero:      0 40px 120px rgba(0,0,0,.55);      /* profundidade do card de destaque na hero */

  /* ---------- TRANSIÇÕES / EASINGS ---------- */
  --ease:           cubic-bezier(0.4,0,0.2,1);
  --ease-out-expo:  cubic-bezier(0.16,1,0.3,1);
  --transition:      all .35s cubic-bezier(0.22,1,0.36,1);
  --transition-fast: all .2s var(--ease);
  --duration:.35s;

  /* ---------- Z-INDEX ---------- */
  --z-base:1; --z-dropdown:1000; --z-sticky:1020; --z-header:1030;
  --z-float:1040; --z-overlay:1050; --z-modal:1060; --z-toast:1070;
}

/* =====================================================================
   RESET / BASE LEVE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.7;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* preserva position:sticky */
}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:400;
  color:var(--color-text-strong);
  line-height:1.12;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
h1{font-size:var(--text-h1);line-height:1.08;letter-spacing:-0.02em}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3);font-weight:500;line-height:1.2}
h4{font-size:var(--text-h4);font-family:var(--font-sans);font-weight:600;line-height:1.3}
p{max-width:70ch}
a{color:var(--color-primary-700);text-decoration:none}
a:hover{color:var(--color-primary-600)}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--color-primary-500);color:#04141a}
:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:3px}

/* Utilitários de layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-px)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.eyebrow{font-size:var(--text-eyebrow);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent-700)}

/* Acessibilidade de movimento — desliga animações não-essenciais */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}