/* ==========================================================================
   CONFORTE-SE — Design tokens (extraídos dos materiais oficiais da marca)
   Fonte principal: apresentação "Encontro da Rede" (04/ago/2026) — padrão mais recente.
   Uso: importar no CSS global do e-commerce. Não alterar valores de marca sem aprovação.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root {
  /* ---- Cores institucionais (núcleo da marca) ---- */
  --cs-navy-900: #0B253D;   /* Azul-marinho profundo — fundos de capa, hero, footer */
  --cs-navy-800: #16283C;   /* Marinho — títulos e texto forte sobre fundo claro */
  --cs-navy-700: #14314C;   /* Marinho intermediário — superfícies sobre navy-900 */
  --cs-navy-600: #27506E;   /* Marinho-azulado — hover/bordas sobre fundo escuro */

  --cs-turquoise-500: #1FC5C0; /* Turquesa da marca — destaque, CTA, links, barras */
  --cs-turquoise-300: #7FDBD8; /* Turquesa claro — eyebrow sobre escuro, ícones */
  --cs-mint-100:      #CDEEE8; /* Menta — subtítulos sobre escuro, fundos de destaque */

  --cs-logo-sky:  #A6D5EF;  /* Azul-céu do "C" do símbolo */
  --cs-logo-star: #3FD8EA;  /* Ciano da estrela do símbolo */

  /* ---- Neutros ---- */
  --cs-ice-50:   #F2F7FB;   /* Azul-gelo — fundo de página clara */
  --cs-white:    #FFFFFF;   /* Cards e superfícies */
  --cs-border:   #CBD9E6;   /* Bordas de cards e divisores */
  --cs-slate-500:#5F7186;   /* Texto de corpo */
  --cs-slate-400:#7F9AB2;   /* Texto secundário / legendas */
  --cs-slate-300:#9FBBD0;   /* Texto terciário sobre escuro */

  /* ---- Cores de apoio (usar com moderação) ---- */
  --cs-blue-600:  #2E5B8A;  /* Azul institucional (manuais mar/2026) */
  --cs-blue-100:  #D6E9F8;  /* Azul claro de caixas informativas */
  --cs-alert-600: #C0392B;  /* Vermelho — somente alertas/erros ("NÃO") */
  --cs-success-600:#1A7A1A; /* Verde — confirmações */

  /* ---- Semânticos ---- */
  --color-bg:            var(--cs-ice-50);
  --color-surface:       var(--cs-white);
  --color-surface-dark:  var(--cs-navy-900);
  --color-text:          var(--cs-navy-800);
  --color-text-body:     var(--cs-slate-500);
  --color-text-muted:    var(--cs-slate-400);
  --color-text-on-dark:  var(--cs-white);
  --color-text-on-dark-2:var(--cs-mint-100);
  --color-accent:        var(--cs-turquoise-500);
  --color-accent-soft:   var(--cs-mint-100);
  --color-border:        var(--cs-border);
  --color-danger:        var(--cs-alert-600);
  --color-success:       var(--cs-success-600);

  /* ---- Tipografia ---- */
  --font-sans: 'Lato', 'Carlito', 'Calibri', 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-eyebrow: 0.75rem;   /* 12px · bold · CAIXA ALTA · letter-spacing .3em */
  --fs-small:   0.875rem;  /* 14px */
  --fs-body:    1rem;      /* 16px */
  --fs-lead:    1.125rem;  /* 18px */
  --fs-h4:      1.25rem;
  --fs-h3:      1.5rem;
  --fs-h2:      2rem;
  --fs-h1:      clamp(2.25rem, 5vw, 3.75rem);
  --ls-eyebrow: 0.3em;
  --lh-tight:   1.15;
  --lh-body:    1.6;

  /* ---- Forma e espaço ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --shadow-card: 0 1px 2px rgba(22, 40, 60, .06), 0 4px 16px rgba(22, 40, 60, .06);
  --stripe-top: 4px;       /* Faixa turquesa no topo de capas/páginas */
  --title-bar-w: 84px;     /* Barra turquesa sob títulos */
  --title-bar-h: 3px;
}

/* ---- Padrões assinatura da marca ---- */
.cs-eyebrow {
  font: var(--fw-bold) var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.cs-on-dark .cs-eyebrow { color: var(--cs-turquoise-300); }

.cs-title { font-weight: var(--fw-bold); color: var(--color-text); line-height: var(--lh-tight); }
.cs-title--bar::after {
  content: ""; display: block; margin-top: var(--space-3);
  width: var(--title-bar-w); height: var(--title-bar-h);
  background: var(--color-accent); border-radius: 2px;
}

.cs-top-stripe { border-top: var(--stripe-top) solid var(--color-accent); }

.cs-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.cs-card--highlight {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--cs-mint-100) 35%, white);
}

.cs-btn {
  font: var(--fw-bold) var(--fs-body)/1 var(--font-sans);
  padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--cs-navy-900); border: 0;
}
.cs-btn:hover { background: #19B0AB; }
.cs-btn--outline { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-text); }
.cs-on-dark .cs-btn--outline { color: #fff; border-color: rgba(255,255,255,.6); }

.cs-hero {
  background: var(--cs-navy-900); color: #fff; position: relative; overflow: hidden;
  border-top: var(--stripe-top) solid var(--color-accent);
}
/* Círculos decorativos finos (como na capa do Encontro da Rede) */
.cs-hero::before, .cs-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(127, 219, 216, .22); pointer-events: none;
}
.cs-hero::before { width: 560px; height: 560px; right: -180px; top: -120px; }
.cs-hero::after  { width: 320px; height: 320px; left: -140px; bottom: -180px; }