/* =========================================================================
   MOINHO — DESIGN SYSTEM / TOKENS
   =========================================================================
   Fonte unica da identidade visual. Se um componente precisa de um valor
   que nao esta aqui, ou o token falta, ou o componente esta errado.

   Origem dos valores:
   - #764A98  Pantone 2587 C — assinatura da marca (site atual + briefing)
   - #1899D6  Pantone 2925 C — energia, links e acao (site atual + briefing)
   - #24212A  tinta quente para texto (briefing; o site atual usa #000 puro,
              trocado de proposito por conforto de leitura)
   - Escala tipografica derivada do site atual: hero 52->110px, numeros ate
     160px, corpo 14-15px (elevado para 16-18px por legibilidade).

   REGRA: nenhum arquivo fora de /design pode declarar um valor cru de cor,
   fonte, espacamento, raio ou duracao.
   ========================================================================= */

:root {
 /* Canal de contato: cores do WhatsApp com texto de alto contraste. */
 --moinho-whatsapp-ink: #075E54;
 --moinho-whatsapp-soft: #E8F4EC;
 --moinho-whatsapp-hover: #D5EBDD;
 --moinho-whatsapp-paper: #F7F9F6;
	--moinho-frente-header-scrim: linear-gradient(90deg, rgb(15 8 23 / .94), rgb(15 8 23 / .82) 42%, rgb(15 8 23 / .24));
	--moinho-silk-fallback: linear-gradient(125deg, #0b1026, #3d46e8 45%, #b18cff 80%, #ffd6e7);
	--moinho-silk-scrim: linear-gradient(90deg, rgb(2 1 10 / .72), rgb(2 1 10 / .60) 60%, rgb(2 1 10 / .08));
	--moinho-silk-scrim-mobile: linear-gradient(180deg, rgb(2 1 10 / .70), rgb(2 1 10 / .65) 65%, rgb(2 1 10 / .08));
	/* Tile de case: legenda sobre a foto, escurece so o terco de baixo. */
	--moinho-scrim-tile: linear-gradient(180deg, rgb(2 1 10 / 0) 22%, rgb(2 1 10 / .58) 58%, rgb(2 1 10 / .9) 100%);
	--moinho-copy-align: justify;
	--moinho-copy-measure: 60ch;
	--moinho-heading-measure: 26ch;
	--moinho-heading-gap: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
	--moinho-paragraph-gap: 1em;
	/* Dock: camada de navegacao, com contraste independente do conteudo. */
	--moinho-dock-glass: linear-gradient(135deg, rgb(255 255 255 / .72), rgb(246 240 252 / .56));
	--moinho-dock-switch-off: #c8c5cc;
	--moinho-dock-switch-on: #30d158;
	--moinho-dock-solid: #faf8fc;
	--moinho-dock-ink: #403849;
	--moinho-dock-accent: #63378a;
	--moinho-dock-selected: rgb(118 74 152 / .1);
	--moinho-dock-pressed: rgb(118 74 152 / .18);
	--moinho-dock-border: rgb(255 255 255 / .88);
	--moinho-dock-rim: rgb(255 255 255 / .8);
	--moinho-dock-divider: rgb(74 47 98 / .14);
	--moinho-dock-soft-shadow: rgb(46 29 61 / .06);
	--moinho-dock-shadow: 0 12px 36px rgb(28 16 40 / .16), 0 2px 6px rgb(28 16 40 / .06), 0 0 0 1px rgb(46 29 61 / .1);
	--moinho-dock-target: 2.75rem;
	--moinho-dock-item-width: 4.75rem;
	--moinho-dock-item-height: 3rem;
	--moinho-dock-brand-width: 7.5rem;
	--moinho-dock-theme-width: 4rem;
	--moinho-dock-label-size: .75rem;
	--moinho-dock-mobile-label-size: .6875rem;
	--moinho-dock-wordmark-size: 1.5rem;
	--moinho-dock-mobile-wordmark-size: 1.25rem;

	/* ---------------------------------------------------------------------
	   1. PALETA BRUTA — nunca use diretamente em componentes.
	   --------------------------------------------------------------------- */
	--moinho-roxo-900: #2E1D3D;
	--moinho-roxo-700: #4A2F62;
	--moinho-roxo-500: #764A98;  /* Marca */
	--moinho-roxo-300: #A97FCB;
	--moinho-roxo-100: #EFE8F5;
	--moinho-roxo-050: #F8F5FB;

	--moinho-azul-900: #0B4A6B;
	--moinho-azul-700: #0F6E9C;
	--moinho-azul-500: #1899D6;  /* Acao */
	--moinho-azul-300: #6FC4EC;
	--moinho-azul-100: #E4F3FC;

	--moinho-tinta-900: #1A1720;
	--moinho-tinta-700: #24212A;  /* Texto */
	--moinho-tinta-500: #625D69;  /* Texto secundario */
	--moinho-tinta-300: #9A939F;
	--moinho-tinta-200: #E3DEE8;  /* Bordas */
	--moinho-tinta-100: #F2EFF4;
	--moinho-tinta-050: #F8F7F9;
	--moinho-branco: #FFFFFF;

	/* Escurecidos para passar 4.5:1 sobre fundo claro (AA texto normal).
	   Os valores anteriores paravam em 4.36 e 4.23. */
	--moinho-sucesso: #1B7A4A;
	--moinho-alerta: #A85F0B;
	--moinho-erro: #C0392B;

	/* ---------------------------------------------------------------------
	   2. TOKENS SEMANTICOS — o que os componentes consomem.
	   Trocar a marca inteira = reapontar estas 12 linhas.
	   --------------------------------------------------------------------- */
	--moinho-color-primary: var(--moinho-roxo-500);
	--moinho-color-primary-ink: var(--moinho-roxo-700);
	--moinho-color-primary-soft: var(--moinho-roxo-100);

	--moinho-color-secondary: var(--moinho-azul-500);
	--moinho-color-secondary-ink: var(--moinho-azul-700);
	--moinho-color-secondary-soft: var(--moinho-azul-100);

	--moinho-color-accent: var(--moinho-roxo-300);
	/* "readable" e um contrato, nao um apelido: estes dois PRECISAM passar
	   4.5:1 sobre fundo claro. O roxo da marca passa (6.56:1) e vale direto.
	   O azul de acao NAO passa (3.20:1), entao o papel legivel e o azul 700
	   (5.63:1). Use --moinho-color-secondary quando a cor for decorativa;
	   use --moinho-color-secondary-readable sempre que for TEXTO. */
	--moinho-color-primary-readable: var(--moinho-color-primary);
	--moinho-color-secondary-readable: var(--moinho-azul-700);

	--moinho-color-background: var(--moinho-branco);
	--moinho-color-surface: var(--moinho-tinta-050);
	--moinho-color-surface-strong: var(--moinho-roxo-900);

	--moinho-color-text: var(--moinho-tinta-700);
	--moinho-color-text-muted: var(--moinho-tinta-500);
	--moinho-color-text-on-brand: var(--moinho-branco);
	--moinho-color-text-on-dark-muted: rgb(255 255 255 / 0.68);
	/* Degrau mais fraco, para rotulo de apoio dentro de peca escura. */
	--moinho-color-text-on-dark-faint: rgb(255 255 255 / 0.48);
	--moinho-color-border-on-dark: rgb(255 255 255 / 0.16);
	/* Preenchimentos sutis sobre superficie escura (botoes de rede, chips
	   do rodape). Eram valores crus repetidos em footer.css. */
	--moinho-color-fill-on-dark: rgb(255 255 255 / 0.045);
	--moinho-color-fill-on-dark-hover: rgb(255 255 255 / 0.12);

	--moinho-color-border: var(--moinho-tinta-200);
	--moinho-color-border-strong: var(--moinho-tinta-300);

	/* O link ja usa azul 700; o hover precisa descer mais um degrau, senao
	   nao existe feedback visual nenhum ao passar o mouse. */
	--moinho-color-link-hover: var(--moinho-azul-900);

	--moinho-color-focus: var(--moinho-azul-500);
	--moinho-color-selection: var(--moinho-roxo-100);

	/* Marca d'agua: o nome da marca em corpo gigante atras do conteudo.
	   Sempre sobre superficie escura, por isso parte do branco. */
	--moinho-color-marca-dagua: rgb(255 255 255 / 0.08);
	--moinho-color-marca-dagua-fraca: rgb(255 255 255 / 0.045);

	/* Superficies translucidas e luz de marca. Usadas com parcimonia na home. */
	--moinho-color-glass: rgb(255 255 255 / 0.72);
	--moinho-color-glass-strong: rgb(255 255 255 / 0.88);
	--moinho-color-glass-border: rgb(255 255 255 / 0.64);
	--moinho-color-brand-glow: rgb(118 74 152 / 0.2);
	--moinho-color-secondary-glow: rgb(24 153 214 / 0.14);
	--moinho-gradient-hero: radial-gradient(circle at var(--moinho-pointer-x, 72%) var(--moinho-pointer-y, 28%), var(--moinho-color-brand-glow), transparent 36%), radial-gradient(circle at 18% 84%, var(--moinho-color-secondary-glow), transparent 30%);
	--moinho-gradient-video-overlay: linear-gradient(90deg, rgb(18 10 26 / 0.88) 0%, rgb(24 13 36 / 0.66) 56%, rgb(18 10 26 / 0.42) 100%);

	/* Atmosfera da home — adaptada do sistema visual das apresentacoes. */
	--moinho-cosmos-base: #F8F7F9;
	--moinho-cosmos-mesh: rgb(118 74 152 / 0.12);
	--moinho-cosmos-blue: rgb(24 153 214 / 0.1);
	--moinho-cosmos-grid: rgb(74 47 98 / 0.055);
	--moinho-cosmos-grain: rgb(46 29 61 / 0.055);
	--moinho-cosmos-vignette: rgb(255 255 255 / 0.78);
	--moinho-home-section-glass: rgb(255 255 255 / 0.48);
	--moinho-home-card-bg: linear-gradient(155deg, rgb(255 255 255 / 0.82), rgb(248 245 251 / 0.5));
	--moinho-home-card-border: rgb(255 255 255 / 0.76);
	--moinho-home-card-highlight: rgb(255 255 255 / 0.9);

	/* Superficie ativa: componentes leem daqui em vez de assumir fundo branco.
	   E o que permite inverter uma secao sem reescrever CSS (ver .moinho-invert). */
	--moinho-surface-bg: var(--moinho-color-background);
	--moinho-surface-fg: var(--moinho-color-text);
	--moinho-surface-fg-muted: var(--moinho-color-text-muted);
	--moinho-surface-border: var(--moinho-color-border);

	/* ---------------------------------------------------------------------
	   3. TIPOGRAFIA
	   Visby CF: familia de marca definida no briefing. Enquanto a licenca nao
	   for adquirida e servida via @font-face, Poppins (ja usada no site atual)
	   assume o papel sem alterar nenhum componente.
	   --------------------------------------------------------------------- */
	--moinho-font-display: "Visby CF", "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--moinho-font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--moinho-font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

	--moinho-weight-regular: 400;
	--moinho-weight-medium: 500;
	--moinho-weight-semibold: 600;
	--moinho-weight-bold: 700;
	--moinho-weight-black: 800;

	/* LEGADO. A escala de tamanhos foi substituida pelos papeis de
	   design/typography.css (--moinho-role-*). Nenhuma folha do tema usa mais
	   estes tokens; eles ficam declarados porque CSS de snippet, do Elementor
	   ou do cliente pode consumi-los. Nao use em codigo novo. */
	--moinho-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--moinho-text-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
	--moinho-text-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--moinho-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--moinho-text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
	--moinho-text-2xl: clamp(1.625rem, 1.36rem + 1.14vw, 2.5rem);
	--moinho-text-3xl: clamp(2rem, 1.54rem + 1.96vw, 3.5rem);
	--moinho-text-hero: clamp(2.75rem, 1.91rem + 3.59vw, 5.5rem);
	--moinho-text-display: clamp(3.25rem, 1.2rem + 8.8vw, 7.5rem);

	--moinho-leading-tight: 1;
	--moinho-leading-snug: 1.1;
	--moinho-leading-heading: 1.2;
	--moinho-leading-normal: 1.5;
	--moinho-leading-relaxed: 1.55;

	--moinho-tracking-tight: -0.02em;
	--moinho-tracking-normal: 0;
	--moinho-tracking-wide: 0.08em;
	--moinho-tracking-eyebrow: 0.14em;
	/* Marca d agua em corpo gigante fecha muito mais que um titulo normal. */
	--moinho-tracking-marca-dagua: -0.13em;

	/* ---------------------------------------------------------------------
	   4. ESPACAMENTO
	   --------------------------------------------------------------------- */
	--moinho-space-3xs: 0.25rem;
	--moinho-space-2xs: 0.5rem;
	--moinho-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	--moinho-space-sm: clamp(1rem, 0.85rem + 0.65vw, 1.5rem);
	--moinho-space-md: clamp(1.5rem, 1.3rem + 0.85vw, 2rem);
	--moinho-space-lg: clamp(2rem, 1.6rem + 1.7vw, 3rem);
	--moinho-space-xl: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
	--moinho-space-2xl: clamp(4rem, 3rem + 4.2vw, 7rem);
	--moinho-space-3xl: clamp(6rem, 4.4rem + 6.8vw, 10rem);

	/* Respiro vertical padrao de uma secao. Alterar aqui muda o ritmo do site. */
	--moinho-section-space: clamp(4rem, 2rem + 6vw, 8.75rem);
	--moinho-section-space-tight: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);

	/* ---------------------------------------------------------------------
	   5. LAYOUT
	   --------------------------------------------------------------------- */
	--moinho-container-width: 78.75rem;   /* 1260px */
	--moinho-container-narrow: 56rem;     /* 896px  */
	--moinho-container-padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--moinho-content-width: 42rem;        /* medida de leitura confortavel */
	--moinho-grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--moinho-grid-min: 17rem;             /* base do auto-fit dos cards */

	/* ---------------------------------------------------------------------
	   6. BORDAS E ELEVACAO
	   --------------------------------------------------------------------- */
	--moinho-radius-sm: 0.5rem;
	--moinho-radius-md: 1rem;
	--moinho-radius-lg: 1.75rem;
	--moinho-radius-xl: 2.5rem;
	--moinho-radius-pill: 62.4375rem;
	--moinho-radius-circle: 50%;

	/* Raio de peca grande (painel de secao, grade de vidro, quadro do
	   manifesto). Fluido porque um raio fixo de 2.5rem parece tímido em
	   1600px e exagerado em 375px. A auditoria achou 7 clamps avulsos
	   fazendo exatamente isto — agora sao dois tokens. */
	--moinho-radius-panel: clamp(1.5rem, 0.9rem + 2.4vw, 2.5rem);
	--moinho-radius-panel-lg: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);

	--moinho-border-width: 1px;
	--moinho-border-width-strong: 2px;

	/* Sombras discretas: a marca ganha profundidade por camada e cor,
	   nao por drop shadow pesado. */
	--moinho-shadow-sm: 0 1px 2px rgb(36 33 42 / 0.06);
	--moinho-shadow-md: 0 6px 24px -8px rgb(36 33 42 / 0.12);
	--moinho-shadow-lg: 0 24px 64px -24px rgb(46 29 61 / 0.28);
	--moinho-shadow-float: 0 32px 80px -36px rgb(46 29 61 / 0.32);
	--moinho-shadow-focus: 0 0 0 3px rgb(24 153 214 / 0.35);
	--moinho-glass-blur: 1.5rem;

	/* ---------------------------------------------------------------------
	   7. MOTION
	   --------------------------------------------------------------------- */
	--moinho-duration-fast: 180ms;
	--moinho-duration-normal: 320ms;
	--moinho-duration-slow: 640ms;
	--moinho-duration-reveal: 900ms;
	--moinho-duration-ambient: 14s;

	--moinho-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--moinho-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--moinho-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--moinho-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

	--moinho-stagger: 60ms;

	/* ---------------------------------------------------------------------
	   8. CAMADAS
	   --------------------------------------------------------------------- */
	--moinho-z-base: 0;
	--moinho-z-raised: 10;
	--moinho-z-sticky: 100;
	--moinho-z-header: 200;
	--moinho-z-drawer: 300;
	--moinho-z-modal: 400;
	--moinho-z-toast: 500;

	/* ---------------------------------------------------------------------
	   9. COMPONENTES — tokens de segundo nivel.
	   Sempre derivados dos semanticos, nunca da paleta bruta.
	   --------------------------------------------------------------------- */
	--moinho-button-radius: var(--moinho-radius-pill);
	--moinho-button-padding-block: 0.9em;
	--moinho-button-padding-inline: 1.9em;
	--moinho-button-glass-highlight: rgb(255 255 255 / 0.86);
	--moinho-button-icon-bg: linear-gradient(145deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.07));
	--moinho-button-icon-bg-light: linear-gradient(145deg, rgb(255 255 255 / 0.56), rgb(255 255 255 / 0.18));
	--moinho-button-icon-border: rgb(255 255 255 / 0.28);
	--moinho-liquid-blur: 1.125rem;
	--moinho-liquid-border: rgb(255 255 255 / 0.48);
	--moinho-liquid-border-strong: rgb(255 255 255 / 0.34);
	--moinho-liquid-highlight: rgb(255 255 255 / 0.72);

	/* Reflexo que atravessa o botao no hover. Eram valores crus dentro do
	   componente; viraram token para que a marca controle o brilho. */
	--moinho-liquid-sheen: rgb(255 255 255 / 0.7);
	--moinho-liquid-sheen-blue: rgb(111 196 236 / 0.28);

	/* Vidro claro — variante de contraste usada por outline/ghost/link no
	   modo claro, onde texto branco seria ilegivel. */
	--moinho-liquid-claro: linear-gradient(145deg, rgb(255 255 255 / 0.82), rgb(247 243 250 / 0.46) 58%, rgb(222 240 249 / 0.28));
	--moinho-liquid-border-claro: rgb(74 47 98 / 0.22);
	--moinho-liquid-shadow-claro: 0 16px 40px -24px rgb(46 29 61 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.96);
	--moinho-button-icon-bg-claro: linear-gradient(145deg, rgb(255 255 255 / 0.92), rgb(236 227 243 / 0.66));
	--moinho-liquid-shadow: 0 16px 38px -16px rgb(46 29 61 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.62), inset 0 -1px 0 rgb(46 29 61 / 0.12);
	--moinho-liquid-shadow-hover: 0 22px 52px -18px rgb(46 29 61 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.78), inset 0 -1px 0 rgb(46 29 61 / 0.14);
	--moinho-liquid-primary: linear-gradient(125deg, rgb(74 47 98 / 0.9), rgb(118 74 152 / 0.82) 52%, rgb(24 153 214 / 0.76) 130%);
	--moinho-liquid-secondary: linear-gradient(125deg, rgb(15 110 156 / 0.88), rgb(24 153 214 / 0.76));
	--moinho-liquid-neutral: linear-gradient(145deg, rgb(255 255 255 / 0.68), rgb(248 244 251 / 0.4) 54%, rgb(228 243 252 / 0.28));

	--moinho-card-radius: var(--moinho-radius-lg);
	--moinho-card-padding: var(--moinho-space-md);
	--moinho-card-bg: var(--moinho-color-background);
	--moinho-card-border: var(--moinho-surface-border);

	--moinho-header-height: 5rem;
	--moinho-header-height-compact: 4rem;

	--moinho-icon-size: 1.25em;
	--moinho-focus-ring-offset: 3px;
}

/* =========================================================================
   MODOS DE COR
   =========================================================================
   O atributo e aplicado antes do primeiro paint no header. A escolha do
   visitante fica salva e a preferencia do sistema e usada no primeiro acesso.
   ========================================================================= */

html[data-moinho-theme="light"] {
	color-scheme: light;
}

html[data-moinho-theme="dark"] {
	--moinho-dock-glass: linear-gradient(135deg, rgb(40 34 49 / .72), rgb(22 18 30 / .62));
	--moinho-dock-switch-off: #68616e;
	--moinho-dock-solid: #1f1a26;
	--moinho-dock-ink: #eae4ef;
	--moinho-dock-accent: #d7b7f1;
	--moinho-dock-selected: rgb(215 183 241 / .12);
	--moinho-dock-pressed: rgb(215 183 241 / .2);
	--moinho-dock-border: rgb(255 255 255 / .14);
	--moinho-dock-rim: rgb(255 255 255 / .12);
	--moinho-dock-divider: rgb(255 255 255 / .14);
	--moinho-dock-soft-shadow: rgb(0 0 0 / .16);
	--moinho-dock-shadow: 0 14px 40px rgb(0 0 0 / .32), 0 2px 6px rgb(0 0 0 / .2);
	color-scheme: dark;

	--moinho-color-background: #05040D;
	--moinho-color-surface: #0C0913;
	--moinho-color-surface-strong: #05040D;
	--moinho-color-text: rgb(255 255 255 / 0.94);
	--moinho-color-text-muted: rgb(255 255 255 / 0.66);
	--moinho-color-primary-ink: var(--moinho-roxo-300);
	--moinho-color-secondary-ink: var(--moinho-azul-300);
	--moinho-color-primary-readable: var(--moinho-roxo-300);
	--moinho-color-secondary-readable: var(--moinho-azul-300);
	--moinho-color-accent: var(--moinho-roxo-300);
	/* No escuro o movimento se inverte: o hover clareia. */
	--moinho-color-link-hover: #A9DCF5;

	--moinho-color-focus: var(--moinho-azul-300);
	--moinho-color-border: rgb(255 255 255 / 0.12);
	--moinho-color-border-strong: rgb(255 255 255 / 0.22);
	--moinho-color-selection: rgb(118 74 152 / 0.42);
	--moinho-color-primary-soft: rgb(169 127 203 / 0.15);
	--moinho-color-secondary-soft: rgb(24 153 214 / 0.14);
	--moinho-color-glass: rgb(255 255 255 / 0.065);
	--moinho-color-glass-strong: rgb(255 255 255 / 0.1);
	--moinho-color-glass-border: rgb(255 255 255 / 0.16);
	--moinho-color-brand-glow: rgb(118 74 152 / 0.36);
	--moinho-color-secondary-glow: rgb(24 153 214 / 0.22);

	--moinho-surface-bg: var(--moinho-color-background);
	--moinho-surface-fg: var(--moinho-color-text);
	--moinho-surface-fg-muted: var(--moinho-color-text-muted);
	--moinho-surface-border: var(--moinho-color-border);
	--moinho-card-bg: rgb(255 255 255 / 0.055);
	--moinho-card-border: rgb(255 255 255 / 0.13);

	--moinho-cosmos-base: #05040D;
	--moinho-cosmos-mesh: rgb(118 74 152 / 0.36);
	--moinho-cosmos-blue: rgb(24 153 214 / 0.22);
	--moinho-cosmos-grid: rgb(255 255 255 / 0.045);
	--moinho-cosmos-grain: rgb(255 255 255 / 0.04);
	--moinho-cosmos-vignette: rgb(5 4 13 / 0.7);
	--moinho-home-section-glass: rgb(5 4 13 / 0.48);
	--moinho-home-card-bg: linear-gradient(155deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.025));
	--moinho-home-card-border: rgb(255 255 255 / 0.13);
	--moinho-home-card-highlight: rgb(255 255 255 / 0.12);

	--moinho-button-glass-highlight: rgb(255 255 255 / 0.34);
	--moinho-button-icon-bg-light: linear-gradient(145deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05));
	--moinho-button-icon-border: rgb(255 255 255 / 0.2);
	--moinho-liquid-sheen: rgb(255 255 255 / 0.42);
	--moinho-liquid-sheen-blue: rgb(111 196 236 / 0.2);
	--moinho-liquid-border: rgb(255 255 255 / 0.18);
	--moinho-liquid-highlight: rgb(255 255 255 / 0.32);
	--moinho-liquid-shadow: 0 18px 46px -16px rgb(0 0 0 / 0.76), inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 -1px 0 rgb(0 0 0 / 0.28);
	--moinho-liquid-shadow-hover: 0 26px 60px -18px rgb(0 0 0 / 0.88), inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.34);
	--moinho-liquid-neutral: linear-gradient(145deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.045) 54%, rgb(24 153 214 / 0.055));

	--moinho-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.26);
	--moinho-shadow-md: 0 14px 34px -18px rgb(0 0 0 / 0.68);
	--moinho-shadow-lg: 0 30px 76px -28px rgb(0 0 0 / 0.84);
	--moinho-shadow-float: 0 38px 96px -34px rgb(0 0 0 / 0.9);

	/* Harmoniza blocos e presets criados pelo WordPress com o tema ativo. */
	--wp--preset--color--base: #05040D;
	--wp--preset--color--contrast: rgb(255 255 255 / 0.94);
}

/* =========================================================================
   INVERSAO DE SUPERFICIE
   =========================================================================
   O site alterna secoes claras e escuras. Em vez de duplicar CSS por variante,
   qualquer container recebe .moinho-invert e todos os descendentes se ajustam,
   porque leem --moinho-surface-*.
   ========================================================================= */

.moinho-invert {
	--moinho-surface-bg: var(--moinho-color-surface-strong);
	--moinho-surface-fg: var(--moinho-branco);
	--moinho-surface-fg-muted: rgb(255 255 255 / 0.68);
	--moinho-surface-border: rgb(255 255 255 / 0.16);

	--moinho-card-bg: rgb(255 255 255 / 0.04);
	--moinho-card-border: rgb(255 255 255 / 0.12);

	--moinho-color-primary-soft: rgb(169 127 203 / 0.16);
	--moinho-color-secondary-soft: rgb(24 153 214 / 0.16);

	background-color: var(--moinho-surface-bg);
	color: var(--moinho-surface-fg);
}

/* Superficie neutra clara, para alternancia de ritmo sem inverter. */
.moinho-surface {
	--moinho-surface-bg: var(--moinho-color-surface);
	--moinho-card-bg: var(--moinho-color-background);

	background-color: var(--moinho-surface-bg);
}

/* =========================================================================
   BREAKPOINTS DE REFERENCIA
   =========================================================================
   Custom properties nao funcionam dentro de @media. Estes sao os unicos
   valores permitidos no projeto — nao invente breakpoints intermediarios.

     compacto  ate  30rem       (480px)  — telefone estreito
     mobile    ate  47.9375rem  (767px)
     tablet    de   48rem       (768px)
     laptop    de   64rem       (1024px)
     desktop   de   80rem       (1280px)
     wide      de   100rem      (1600px)

   O breakpoint "compacto" cobre uma decisao so, repetida em 4 lugares:
   empilhar e esticar o que nao cabe lado a lado num telefone estreito
   (grupo de botoes, card compacto, chips e submit do formulario). Ja era
   usado antes da auditoria, mas nao estava declarado aqui.

   Prefira container queries e clamp() antes de abrir uma media query.
   ========================================================================= */