.elementor-10 .elementor-element.elementor-element-5ea141e{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-5ea141e *//* ============================================================
   DESIGN TOKENS — Instituto dos Óculos Itajaí
   Paleta: logo da marca (vermelho #EB2227 + preto + cinza)
   Tipografia: Plus Jakarta Sans (display) + Inter (corpo) — da franquia
   Direção: óptica de confiança, séria e calorosa. Motif: aro de óculos.
   NÃO usar laranja ZARK. Projeto de cliente.
   ============================================================ */

:root {
  /* ---- CORES DA MARCA (origem: logo SVG) ---- */
  --marca-vermelho: #EB2227;   /* primária / accent */
  --marca-preto:    #222021;   /* texto forte */
  --marca-cinza:    #5B5A5B;   /* texto secundário */
  --marca-branco:   #FEFEFE;

  /* ---- NEUTROS / ATMOSFERA (derivados, dentro da marca) ---- */
  --off-white:   #FBF8F4;   /* fundo dominante (quente, "Orgânico") */
  --branco-puro: #FFFFFF;   /* cards / blocos alternados */
  --tinta:       #1A1A1B;   /* headlines peso máximo */
  --vermelho-escuro: #C71A1F;/* hover do CTA */
  --vermelho-nevoa:  #FBE3E3;/* blob/atmosfera, destaque suave */
  --linha:       #E9E3DB;   /* bordas / divisores */

  /* ---- PAPÉIS SEMÂNTICOS ---- */
  --bg:            var(--off-white);
  --bg-alt:        var(--branco-puro);
  --bg-escuro:     var(--marca-preto);
  --texto:         var(--marca-preto);
  --texto-suave:   var(--marca-cinza);
  --texto-claro:   #8A8788;
  --accent:        var(--marca-vermelho);
  --accent-hover:  var(--vermelho-escuro);
  --on-accent:     var(--marca-branco);

  /* ---- TIPOGRAFIA ---- */
  --fonte-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --fonte-corpo:   "Inter", system-ui, sans-serif;

  /* escala (público 40+: corpo nunca < 17px) */
  --fs-eyebrow: 0.8125rem;  /* 13px caps */
  --fs-body-sm: 0.95rem;    /* 15px legendas */
  --fs-body:    1.0625rem;  /* 17px corpo base */
  --fs-body-lg: 1.1875rem;  /* 19px sub-hero */
  --fs-h4:      1.375rem;   /* 22px */
  --fs-h3:      1.75rem;    /* 28px */
  --fs-h2:      clamp(2rem, 4.5vw, 3rem);      /* 32→48px */
  --fs-h1:      clamp(2.75rem, 6.5vw, 4.5rem); /* 44→72px */
  --fs-stat:    clamp(3rem, 7vw, 5rem);        /* números grandes */

  --peso-regular: 400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;
  --peso-extra:   800;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;   /* respiro de leitura pra 40+ */
  --ls-eyebrow: 0.16em;
  --ls-tight: -0.02em;

  /* ---- ESPAÇAMENTO / RITMO ---- */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 9vw, 8rem);   /* respiro vertical de seção */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* ---- RAIO (Renan pediu quase-quadrado: sério/sóbrio. Aros ficam nos gráficos/ícones) ---- */
  --r-sm: 4px;     /* elementos pequenos (swatches, badges) — quase quadrado */
  --r-md: 6px;     /* cards — quase quadrado */
  --r-lg: 10px;    /* blocos grandes (hero visual) */
  --r-btn: 10px;   /* botões — meio quadrado */
  --r-pill: 999px; /* reservado p/ elementos redondos pontuais (não usado em botão) */

  /* ---- SOMBRAS (tom quente, não cinza neutro) ---- */
  --sombra-sm: 0 2px 8px rgba(34, 32, 33, 0.06);
  --sombra-md: 0 12px 30px rgba(34, 32, 33, 0.08);
  --sombra-lg: 0 24px 60px rgba(34, 32, 33, 0.12);
  --sombra-accent: 0 14px 30px rgba(235, 34, 39, 0.28); /* sob CTA vermelho */

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease-out);
  --t-med:  300ms var(--ease-out);
  --t-blur: 400ms ease-out; /* Magic UI blur-fade */
}/* End custom CSS */