/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*
 * Tema do Portal de Normas de SP.
 * Os tokens (cores, sombras, espaços, fontes, movimento) são os do portal em
 * hml.normas.sp.gov.br, tema claro, escuro e alto contraste. Nada de renderização
 * é decidido por caminho ou lista fixa aqui: seção e bloco leem só o conteúdo autorado.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-bg-base: #fff;
  --color-bg-surface: #f9f9f9;
  --color-bg-elevated: #fff;
  --color-bg-highlight: #f9f9f9;
  --color-bg-zebra: #fcfcfc;
  --color-bg-highlight-hover: #f2f2f2;
  --color-bg-highlight-blue: #e6f0fc;
  --color-bg-pictogram: #e6f0fc;
  --color-bg-inverse: #111414;
  --color-bg-footer: #000;
  --color-bg-footer-panel: #111414;
  --color-bg-info-banded: #fafafa;
  --color-bg-band-blue: #f7faff;
  --color-bg-band-feature: #f0f5ff;
  --color-bg-scrim: rgb(0 0 0 / 40%);
  --color-chip-neutral-bg: rgb(211 216 219 / 40%);
  --color-grid-mesh: rgb(0 0 0 / 2.4%);
  --color-text-title: #111414;
  --color-text-paragraph: #262828;
  --color-text-caption: #57595a;
  --color-text-muted: #86868b;
  --color-text-caption-disabled: #7a7f83;
  --color-text-disabled: #d2d2d2;
  --color-text-light: #fff;
  --color-text-light-hover: #d1d1d1;
  --color-text-on-inverse: #fff;
  --color-text-logo: #000;
  --color-text-on-brand: #fff;
  --color-text-link: #0058af;
  --color-text-info-body: #212529;
  --color-text-info-link: #007bff;
  --color-brand-base: #0058af;
  --color-brand-dark: #014076;
  --color-brand-medium: #3291d1;
  --color-brand-action: #1a73e8;
  --color-brand-action-light: #5493e4;
  --color-brand-on-bg-light: #e6f0fc;
  --color-icon-highlight: #0058af;
  --color-icon-darker: #262828;
  --color-selo-vigente: #158a19;
  --color-exibicao-titulo: #111414;
  --color-exibicao-label: #262828;
  --color-exibicao-icone: #262828;
  --color-icon-dark: #57595a;
  --color-icon-medium: #d3d8db;
  --color-icon-light: #fff;
  --color-stroke-divider: #d3d8db;
  --color-stroke-doc-foot: #d3d8db;
  --color-stroke-highlight-hover: #ebebeb;
  --color-pill-active-ring: #eaecee;
  --color-stroke-header: #e1e5ea;
  --color-stroke-input: #d3d8db;
  --color-stroke-input-light: #c7cdd1;
  --color-stroke-input-focus: #1a73e8;
  --color-focus: #1a73e8;
  --color-focus-on-dark: #1a73e8;
  --color-feedback-success: #158a19;
  --color-feedback-success-bg: #e1ffe2;
  --color-feedback-danger: #e63535;
  --color-feedback-danger-bg: #fdecec;
  --color-graph-current: #e30613;
  --color-graph-citation: #3d83f6;
  --color-graph-modification: #e30613;
  --color-graph-revogacao: #c2410c;
  --color-graph-substituicao: #7c3aed;
  --color-qr-module: #262828;
  --color-qr-field: #fff;
  --shadow-card-flat: none;
  --shadow-card-light: 0 1px 8px 0 #d3d8db;
  --shadow-input: 0 1px 2px 0 rgb(0 0 0 / 4%), 0 4px 16px 0 rgb(0 0 0 / 2%);
  --shadow-elevated: 0 8px 30px 0 rgb(0 0 0 / 6%);
  --shadow-card-hover: 0 20px 60px 0 rgb(0 0 0 / 10%);
  --shadow-focus-ring: 0 0 0 4px rgb(26 115 232 / 10%);
  --shadow-brand-active: 0 4px 8px 0 rgb(26 115 232 / 15%);
  --shadow-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --shadow-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --shadow-elevation-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
  --shadow-elevation-4: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
  --shadow-elevation-5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
  --shadow-header: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 55px;
  --space-15: 60px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-25: 100px;
  --space-28: 112px;
  --space-30: 120px;
  --icon-size-xxs: 12px;
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-ms: 18px;
  --icon-size-rg: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --header-height: 80px;
  --touch-target-min: 44px;
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;
  --color-paper-bg: #fdfaf3;
  --color-paper-text: #2b2416;
  --font-family-ui: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", consolas, monospace;
  --font-family-serif: "Source Serif 4", georgia, "Times New Roman", serif;
  --font-family-hyperlegible: "Atkinson Hyperlegible Next", verdana, sans-serif;
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --motion-slow: 500ms;
  --motion-emphasis: 600ms;
  --motion-page: 900ms;
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 900;
  --z-nav: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --largura-conteudo: 1200px;
  --nav-height: var(--header-height);
}

:root[data-theme="dark"] {
  --color-bg-base: #17181b;
  --color-bg-surface: #17181b;
  --color-bg-elevated: #17181b;
  --color-bg-highlight: #1f2023;
  --color-bg-zebra: #1a1b1e;
  --color-bg-highlight-hover: #26272a;
  --color-bg-highlight-blue: rgb(26 115 232 / 15%);
  --color-bg-pictogram: rgb(77 166 255 / 15%);
  --color-bg-inverse: #f5f5f7;
  --color-bg-footer: #101113;
  --color-bg-footer-panel: #111414;
  --color-bg-info-banded: hsl(0deg 0% 100% / 4%);
  --color-bg-band-blue: rgb(77 166 255 / 8%);
  --color-bg-band-feature: #17181b;
  --color-bg-scrim: rgb(0 0 0 / 60%);
  --color-chip-neutral-bg: hsl(0deg 0% 100% / 8%);
  --color-grid-mesh: hsl(0deg 0% 100% / 2.5%);
  --color-text-title: #fff;
  --color-text-paragraph: #fff;
  --color-text-caption: #fff;
  --color-text-muted: rgb(245 245 247 / 50%);
  --color-text-caption-disabled: #7a7f83;
  --color-text-disabled: #6e6e73;
  --color-text-light: #fff;
  --color-text-light-hover: #d1d1d1;
  --color-text-on-inverse: #111414;
  --color-text-logo: #f5f5f7;
  --color-text-on-brand: #fff;
  --color-text-link: #6ea8e8;
  --color-text-info-body: #f0f1f2;
  --color-text-info-link: #4da6ff;
  --color-brand-base: #4da6ff;
  --color-brand-dark: #7ab1ff;
  --color-brand-medium: #4da6ff;
  --color-brand-action: #1a73e8;
  --color-brand-action-light: #4da6ff;
  --color-brand-on-bg-light: rgb(77 166 255 / 15%);
  --color-icon-highlight: #4da6ff;
  --color-icon-darker: #fff;
  --color-selo-vigente: #4caf50;
  --color-exibicao-titulo: #aab1bb;
  --color-exibicao-label: #e6e8ec;
  --color-exibicao-icone: #aab1bb;
  --color-icon-dark: #86868b;
  --color-icon-medium: #3c3d3f;
  --color-icon-light: #fff;
  --color-stroke-divider: #7a7f83;
  --color-stroke-doc-foot: #fff;
  --color-stroke-highlight-hover: hsl(0deg 0% 100% / 8%);
  --color-pill-active-ring: hsl(0deg 0% 100% / 12%);
  --color-stroke-header: hsl(0deg 0% 100% / 8%);
  --color-stroke-input: hsl(0deg 0% 100% / 12%);
  --color-stroke-input-light: hsl(0deg 0% 100% / 18%);
  --color-stroke-input-focus: #4da6ff;
  --color-focus: #4da6ff;
  --color-focus-on-dark: #4da6ff;
  --color-feedback-success: #4caf50;
  --color-feedback-success-bg: rgb(76 175 80 / 15%);
  --color-feedback-danger: #ff6b6b;
  --color-feedback-danger-bg: rgb(230 53 53 / 18%);
  --color-graph-current: #ff5d66;
  --color-graph-citation: #74a9ff;
  --color-graph-modification: #ff5d66;
  --color-graph-revogacao: #fb923c;
  --color-graph-substituicao: #c4b5fd;
  --shadow-card-flat: 0 1px 2px 0 rgb(0 0 0 / 30%);
  --shadow-card-light: 0 1px 2px 0 rgb(0 0 0 / 30%);
  --shadow-input: 0 1px 2px 0 rgb(0 0 0 / 30%);
  --shadow-elevated: 0 8px 15px 0 rgb(0 0 0 / 40%);
  --shadow-focus-ring: 0 0 0 4px rgb(77 166 255 / 25%);
  --shadow-brand-active: 0 4px 8px 0 rgb(77 166 255 / 25%);
  --shadow-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --shadow-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --shadow-elevation-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
  --shadow-elevation-4: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
  --shadow-elevation-5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
  --shadow-header: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #17181b;
    --color-bg-surface: #17181b;
    --color-bg-elevated: #17181b;
    --color-bg-highlight: #1f2023;
    --color-bg-zebra: #1a1b1e;
    --color-bg-highlight-hover: #26272a;
    --color-bg-highlight-blue: rgb(26 115 232 / 15%);
    --color-bg-pictogram: rgb(77 166 255 / 15%);
    --color-bg-inverse: #f5f5f7;
    --color-bg-footer: #101113;
    --color-bg-footer-panel: #111414;
    --color-bg-info-banded: hsl(0deg 0% 100% / 4%);
    --color-bg-band-blue: rgb(77 166 255 / 8%);
    --color-bg-band-feature: #17181b;
    --color-bg-scrim: rgb(0 0 0 / 60%);
    --color-chip-neutral-bg: hsl(0deg 0% 100% / 8%);
    --color-grid-mesh: hsl(0deg 0% 100% / 2.5%);
    --color-text-title: #fff;
    --color-text-paragraph: #fff;
    --color-text-caption: #fff;
    --color-text-muted: rgb(245 245 247 / 50%);
    --color-text-caption-disabled: #7a7f83;
    --color-text-disabled: #6e6e73;
    --color-text-light: #fff;
    --color-text-light-hover: #d1d1d1;
    --color-text-on-inverse: #111414;
    --color-text-logo: #f5f5f7;
    --color-text-on-brand: #fff;
    --color-text-link: #6ea8e8;
    --color-text-info-body: #f0f1f2;
    --color-text-info-link: #4da6ff;
    --color-brand-base: #4da6ff;
    --color-brand-dark: #7ab1ff;
    --color-brand-medium: #4da6ff;
    --color-brand-action: #1a73e8;
    --color-brand-action-light: #4da6ff;
    --color-brand-on-bg-light: rgb(77 166 255 / 15%);
    --color-icon-highlight: #4da6ff;
    --color-icon-darker: #fff;
  --color-selo-vigente: #4caf50;
  --color-exibicao-titulo: #aab1bb;
  --color-exibicao-label: #e6e8ec;
  --color-exibicao-icone: #aab1bb;
    --color-icon-dark: #86868b;
    --color-icon-medium: #3c3d3f;
    --color-icon-light: #fff;
    --color-stroke-divider: #7a7f83;
    --color-stroke-doc-foot: #fff;
    --color-stroke-highlight-hover: hsl(0deg 0% 100% / 8%);
    --color-pill-active-ring: hsl(0deg 0% 100% / 12%);
    --color-stroke-header: hsl(0deg 0% 100% / 8%);
    --color-stroke-input: hsl(0deg 0% 100% / 12%);
    --color-stroke-input-light: hsl(0deg 0% 100% / 18%);
    --color-stroke-input-focus: #4da6ff;
    --color-focus: #4da6ff;
    --color-focus-on-dark: #4da6ff;
    --color-feedback-success: #4caf50;
    --color-feedback-success-bg: rgb(76 175 80 / 15%);
    --color-feedback-danger: #ff6b6b;
    --color-feedback-danger-bg: rgb(230 53 53 / 18%);
    --color-graph-current: #ff5d66;
    --color-graph-citation: #74a9ff;
    --color-graph-modification: #ff5d66;
    --color-graph-revogacao: #fb923c;
    --color-graph-substituicao: #c4b5fd;
  }
}

:root[data-a11y-high-contrast]:not([data-theme="dark"]) {
  --color-bg-base: #fff;
  --color-bg-surface: #fff;
  --color-bg-elevated: #fff;
  --color-bg-highlight: #fff;
  --color-bg-zebra: #fff;
  --color-bg-highlight-hover: #fff;
  --color-bg-highlight-blue: #fff;
  --color-bg-band-feature: #fff;
  --color-bg-footer: #000;
  --color-bg-footer-panel: #000;
  --color-text-title: #000;
  --color-text-paragraph: #000;
  --color-text-caption: #000;
  --color-text-muted: #000;
  --color-text-on-brand: #fff;
  --color-text-link: #00c;
  --color-brand-base: #00c;
  --color-brand-dark: #00c;
  --color-brand-medium: #00c;
  --color-brand-action: #00c;
  --color-brand-action-light: #00c;
  --color-icon-highlight: #00c;
  --color-icon-darker: #000;
  --color-icon-dark: #000;
  --color-focus: #00c;
  --color-focus-on-dark: #7ab1ff;
  --color-stroke-divider: #000;
  --color-stroke-highlight-hover: #000;
  --color-stroke-header: #000;
  --color-stroke-input: #000;
  --color-stroke-input-light: #000;
  --color-feedback-success: #006400;
  --color-feedback-danger: #b00000;
}

:root[data-theme="dark"][data-a11y-high-contrast] {
  --color-bg-base: #000;
  --color-bg-surface: #000;
  --color-bg-elevated: #000;
  --color-bg-highlight: #000;
  --color-bg-highlight-hover: #000;
  --color-bg-highlight-blue: #000;
  --color-bg-band-feature: #000;
  --color-bg-footer: #000;
  --color-bg-footer-panel: #000;
  --color-text-title: #fff;
  --color-text-paragraph: #fff;
  --color-text-caption: #fff;
  --color-text-muted: #fff;
  --color-text-on-brand: #000;
  --color-text-link: #7ab1ff;
  --color-brand-base: #7ab1ff;
  --color-brand-dark: #7ab1ff;
  --color-brand-medium: #7ab1ff;
  --color-brand-action: #7ab1ff;
  --color-brand-action-light: #7ab1ff;
  --color-icon-highlight: #7ab1ff;
  --color-icon-darker: #fff;
  --color-icon-dark: #fff;
  --color-focus: #7ab1ff;
  --color-focus-on-dark: #7ab1ff;
  --color-stroke-divider: #fff;
  --color-stroke-highlight-hover: #fff;
  --color-stroke-header: #fff;
  --color-stroke-input: #fff;
  --color-stroke-input-light: #fff;
  --color-feedback-success: #5cff5c;
  --color-feedback-danger: #ff8a8a;
}

@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --color-bg-base: #fff;
    --color-bg-surface: #fff;
    --color-bg-elevated: #fff;
    --color-bg-highlight: #fff;
    --color-bg-zebra: #fff;
    --color-bg-highlight-hover: #fff;
    --color-bg-highlight-blue: #fff;
    --color-bg-band-feature: #fff;
    --color-bg-footer: #000;
    --color-bg-footer-panel: #000;
    --color-text-title: #000;
    --color-text-paragraph: #000;
    --color-text-caption: #000;
    --color-text-muted: #000;
    --color-text-on-brand: #fff;
    --color-text-link: #00c;
    --color-brand-base: #00c;
    --color-brand-dark: #00c;
    --color-brand-medium: #00c;
    --color-brand-action: #00c;
    --color-brand-action-light: #00c;
    --color-icon-highlight: #00c;
    --color-icon-darker: #000;
    --color-icon-dark: #000;
    --color-focus: #00c;
    --color-focus-on-dark: #7ab1ff;
    --color-stroke-divider: #000;
    --color-stroke-highlight-hover: #000;
    --color-stroke-header: #000;
    --color-stroke-input: #000;
    --color-stroke-input-light: #000;
    --color-feedback-success: #006400;
    --color-feedback-danger: #b00000;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --color-bg-base: #000;
    --color-bg-surface: #000;
    --color-bg-elevated: #000;
    --color-bg-highlight: #000;
    --color-bg-highlight-hover: #000;
    --color-bg-highlight-blue: #000;
    --color-bg-band-feature: #000;
    --color-bg-footer: #000;
    --color-bg-footer-panel: #000;
    --color-text-title: #fff;
    --color-text-paragraph: #fff;
    --color-text-caption: #fff;
    --color-text-muted: #fff;
    --color-text-on-brand: #000;
    --color-text-link: #7ab1ff;
    --color-brand-base: #7ab1ff;
    --color-brand-dark: #7ab1ff;
    --color-brand-medium: #7ab1ff;
    --color-brand-action: #7ab1ff;
    --color-brand-action-light: #7ab1ff;
    --color-icon-highlight: #7ab1ff;
    --color-icon-darker: #fff;
    --color-icon-dark: #fff;
    --color-focus: #7ab1ff;
    --color-focus-on-dark: #7ab1ff;
    --color-stroke-divider: #fff;
    --color-stroke-highlight-hover: #fff;
    --color-stroke-header: #fff;
    --color-stroke-input: #fff;
    --color-stroke-input-light: #fff;
    --color-feedback-success: #5cff5c;
    --color-feedback-danger: #ff8a8a;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-card-flat: 0 1px 2px 0 rgb(0 0 0 / 30%);
    --shadow-card-light: 0 1px 2px 0 rgb(0 0 0 / 30%);
    --shadow-input: 0 1px 2px 0 rgb(0 0 0 / 30%);
    --shadow-elevated: 0 8px 15px 0 rgb(0 0 0 / 40%);
    --shadow-focus-ring: 0 0 0 4px rgb(77 166 255 / 25%);
    --shadow-brand-active: 0 4px 8px 0 rgb(77 166 255 / 25%);
    --shadow-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
    --shadow-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
    --shadow-elevation-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
    --shadow-elevation-4: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
    --shadow-elevation-5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
    --shadow-header: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  }
}

:root[data-a11y-reduce-motion] {
  scroll-behavior: auto;
}

:root[data-a11y-reduce-motion] *,
 :root[data-a11y-reduce-motion] ::after,
 :root[data-a11y-reduce-motion] ::before {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

:root[data-drawer-open] {
  overflow: hidden;
}

:root[data-font-size="80"] {
  zoom: 80%;
}

:root[data-font-size="90"] {
  zoom: 90%;
}

:root[data-font-size="115"] {
  zoom: 115%;
}

:root[data-font-size="130"] {
  zoom: 130%;
}

/* ---- base ---- */

html {
  text-size-adjust: 100%;
  hanging-punctuation: first last;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-bg-base);
  color: var(--color-text-paragraph);
  font-family: var(--font-family-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

/* o rodape fica sempre no pe da janela: em pagina curta o branco sobra entre
   o conteudo e o rodape (o respiro), nunca embaixo dele */
body.appear {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.appear > main {
  flex: 1 0 auto;
}

header {
  height: var(--header-height);
}

header .header,
 footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
 footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  margin: 0;
  color: var(--color-text-title);
  font-family: var(--font-family-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  scroll-margin: var(--header-height);
}

h1 {
  font-size: clamp(2.75rem, 8vw, 5.5rem);
}

h2 {
  font-size: clamp(36px, 1.2rem + 3.5vw, 64px);
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

/* a parte da marca dentro de um título: o autor põe em negrito */

h1 strong,
 h2 strong,
 h3 strong,
 h1 em,
 h2 em,
 h3 em {
  font-weight: inherit;
  font-style: normal;
}

p,
 dl,
 ol,
 ul,
 pre,
 blockquote {
  margin: 0 0 var(--space-4);
}

input,
 textarea,
 select,
 button {
  font: inherit;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  text-decoration: underline;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ---- botões (marcação do boilerplate, aparência do portal) ---- */

p.button-wrapper {
  margin: var(--space-3) 0;
}

a.button:any-link,
 button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--color-brand-action);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
  background: var(--color-brand-action);
  color: var(--color-text-on-brand);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.47;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--motion-fast) var(--ease-standard);
}

a.button:hover,
 button.button:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

a.button.secondary,
 button.button.secondary {
  background: transparent;
  color: var(--color-brand-action);
}

a.button:focus-visible,
 button.button:focus-visible {
  box-shadow: var(--shadow-focus-ring);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- ícones de interface: máscara na cor do texto, como no portal ---- */

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

.cmp-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  background-color: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cmp-icon--xxs {
  width: var(--icon-size-xxs);
  height: var(--icon-size-xxs);
}

.cmp-icon--xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.cmp-icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.cmp-icon--ms {
  width: var(--icon-size-ms);
  height: var(--icon-size-ms);
}

.cmp-icon--rg {
  width: var(--icon-size-rg);
  height: var(--icon-size-rg);
}

.cmp-icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

@media (forced-colors: active) {
  .cmp-icon {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}

/* ---- seções ---- */

main > .section {
  /* a goteira da seção: quem sangra para fora dela (o trilho do carrossel)
     precisa ler essa medida, senão escapa da página e o celular ganha
     rolagem horizontal */
  --goteira: var(--space-4);

  padding: var(--space-16) var(--goteira);
}

main > .section > div {
  max-width: var(--largura-conteudo);
  margin: auto;
}

@media (width >= 1024px) {
  main > .section {
    --goteira: var(--space-10);
  }
}

main .section.faixa-azul {
  background: var(--color-bg-band-blue);
}

main .section.faixa-destaque {
  background: var(--color-bg-band-feature);
}

main .section.faixa-escura {
  color: var(--color-text-light);
  background: var(--color-bg-inverse);
}

main .section.faixa-escura :is(h1,
 h2,
 h3) {
  color: var(--color-text-light);
}

/* o bloco de título de cada seção: olho, título e descrição centrados */

main .section > .default-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  max-width: 820px;
  margin-inline: auto;
  margin-block-end: var(--space-12);
  text-align: center;
}

main .section > .default-content-wrapper > * {
  margin: 0;
}

main .section > .default-content-wrapper > p {
  /* 758 no Figma V4: o paragrafo da secao Tecnologia cabe em tres linhas */
  max-width: 760px;
  font-family: var(--font-family-display);
  font-size: 16px;
  line-height: 1.5;
}

/* 19/28,5 no Figma (V4, quadro 1. Home) em qualquer altura de janela */
@media (width >= 1024px) {
  main .section > .default-content-wrapper > p {
    font-size: 19px;
  }
}

/* o olho: rótulo miúdo que abre a seção, vindo da metadata da seção */

main .section .olho,
main .section > .default-content-wrapper > p.olho {
  margin: 0;
  color: var(--color-brand-action);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.47;
  text-transform: uppercase;
}

/* tela: a seção ocupa a altura da janela, como cada bloco da capa do portal */

/*
 * Figma V4 (quadro 1. Home, 4475:137942): as seções têm a altura do conteúdo,
 * não a da janela — capa de 846 (120 em cima, 72 embaixo), Explore de 982
 * (48/48) e Tecnologia de 904 (48/64), sempre com 48 entre os grupos.
 */
main .section.tela,
 main .section.capa {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-block: var(--space-12);
  scroll-margin-block-start: calc(var(--header-height) * -1);
}

main .section.tela.tecnologia-container {
  padding-block-end: var(--space-16);
}

main .section.tela > div,
 main .section.capa > div {
  width: 100%;
}

/* ---- capa (hero) ---- */

main .section.capa {
  --hero-squeeze: 0px;

  position: relative;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-30) var(--space-18);
  padding-inline: var(--space-6);
  text-align: center;
}

@media (width <= 767px) {
  main .section.capa {
    padding-block: var(--space-16) var(--space-10);
    padding-inline: var(--space-5);
  }
}

/* no quadro de 1920 do Figma V4 (4475:138064) o H1 sobe para 91 do cabecalho
   (em vez de 120), mas a dica de rolagem continua a 804 do topo, como em 1280:
   os 29 que saem de cima entram entre os indicadores e a dica (112 + 27) */
@media (width >= 1900px) {
  main .section.capa {
    padding-block-start: 91px;
  }

  main .section.capa > .cmp-section-hint {
    padding-block-start: 139px;
  }
}

main .section.capa > .default-content-wrapper {
  max-width: 1000px;
  margin-block-end: 0;
  gap: 0;
}

main .section.capa h1 {
  max-width: 1000px;

  /* 22 no Figma entre a caixa do H1 (196 de altura) e o subtitulo; a caixa do
     navegador tem 180, entao o vao carrega os 16 de diferenca */
  margin: 0 0 38px;
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

main .section.capa > .default-content-wrapper > p {
  max-width: 662px;
  margin: 0 0 var(--space-12);

  /* Figma V4: o subtítulo da capa é preto, não cinza */
  color: var(--color-text-paragraph);
  font-family: var(--font-family-ui);
  font-size: clamp(1.0625rem, 2.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  animation-delay: 0.25s;
}

main .section.capa > .busca-de-normas-wrapper {
  width: 100%;
  max-width: 1000px;
}

main .section.capa > .indicadores-wrapper {
  margin-top: var(--space-12);
}

/* ---- painel pessoal: a home logada (Figma V4, 6.2.1) ----
   título de 64 a 96 do cabeçalho, busca de 680 a 48 dele, atalhos a 96 da busca
   e as colunas a 56 dos atalhos */

main .section.painel {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-block: 96px var(--space-12);
  padding-inline: var(--space-6);
}

main .section.painel > div {
  width: 100%;
}

main .section.painel > .default-content-wrapper {
  margin-block-end: 0;
  text-align: center;
}

main .section.painel h1 {
  color: #1d1d1f;
  font-family: var(--font-family-display);
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 0;
}

main .section.painel > .busca-de-normas-wrapper {
  margin-block-start: var(--space-12);
  max-width: 680px;
}

/* Figma 6.2.1: barra de 680x61 com borda de 1, lupa de 22 a 25 da borda, texto
   Inter 16 ls 0.5 e botao de 128x46 a 7 da borda direita */
main .section.painel .busca-de-normas .cmp-search-form {
  gap: var(--space-3);
  height: 61px;
  padding: 0 6px 0 24px;
}

main .section.painel .busca-de-normas .cmp-search-form__icon {
  width: 22px;
}

main .section.painel .busca-de-normas .cmp-search-form__input {
  font-family: var(--font-family-display);
  padding-inline: 0;
}

main .section.painel .busca-de-normas .cmp-search-form__input::placeholder {
  color: #86868b;
}

main .section.painel .busca-de-normas .cmp-search-form__submit {
  font-family: var(--font-family-display);
  font-size: 15px;
  height: 46px;
  min-width: 128px;
}

main .section.painel > .atalhos-wrapper {
  margin-block-start: 96px;
}

main .section.painel > .painel-pessoal-wrapper {
  margin-block-start: 56px;
}

@media (width <= 767px) {
  main .section.painel {
    padding-block-start: var(--space-12);
  }

  main .section.painel > .atalhos-wrapper {
    margin-block-start: var(--space-10);
  }

  main .section.painel .busca-de-normas .cmp-search-form {
    height: 56px;
    padding-inline-start: var(--space-4);
  }

  main .section.painel .busca-de-normas .cmp-search-form__submit {
    height: 44px;
    min-width: 0;
    width: 44px;
  }

  main .section.painel > .painel-pessoal-wrapper {
    margin-block-start: var(--space-8);
  }
}

/* ---- dica de rolagem no pé da seção ---- */

.cmp-section-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;

  /* no Figma a dica e um quadro de 114 com o rotulo a 64 do topo, 48 abaixo do
     grupo anterior: 112 ate o rotulo */
  padding: var(--space-28) 0 0;
  border: 0;
  background: transparent;
  color: var(--color-text-paragraph);
  font-family: var(--font-family-ui);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}

.cmp-section-hint:hover {
  color: var(--color-text-title);
}

.cmp-section-hint:focus-visible {
  box-shadow: var(--shadow-focus-ring);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

main .section.capa > .cmp-section-hint {
  z-index: 2;
}

/* a entrada da capa: cada peça sobe e aparece, uma depois da outra */

main .section.capa > .default-content-wrapper > *,
main .section.capa > .busca-de-normas-wrapper,
main .section.capa > .indicadores-wrapper,
main .section.capa > .cmp-section-hint {
  animation: capa-sobe 1s var(--ease-standard) forwards;
  opacity: 0;
}

main .section.capa > .default-content-wrapper > h1 {
  animation-delay: 0.1s;
}

main .section.capa > .busca-de-normas-wrapper.busca-de-normas-wrapper {
  animation-delay: 0.4s;
}

main .section.capa > .indicadores-wrapper.indicadores-wrapper {
  animation-delay: 0.6s;
}

main .section.capa > .cmp-section-hint.cmp-section-hint {
  animation-delay: 0.9s;
}

@keyframes capa-sobe {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  main .section.capa > .default-content-wrapper > *,
  main .section.capa > .busca-de-normas-wrapper,
  main .section.capa > .indicadores-wrapper,
  main .section.capa > .cmp-section-hint {
    animation: none;
    opacity: 1;
  }
}

/* ---- texto em gradiente: a parte em negrito dos títulos ---- */

.cmp-gradient-text {
  --mx: 50%;
  --my: 50%;

  display: inline-block;
  margin: -0.1em -0.05em;
  padding: 0.1em 0.05em;
  color: transparent;
  background-image: radial-gradient(circle 600px at var(--mx) var(--my), var(--color-brand-action) 0, transparent 60%),
    linear-gradient(90deg, var(--color-text-title), var(--color-brand-action), var(--color-text-title), var(--color-brand-action), var(--color-text-title));
  background-clip: text;
  background-size: 100% 100%, 300% 100%;
  animation: cmp-gradient-text-flow 10s linear infinite;
  -webkit-text-fill-color: transparent;
}

@keyframes cmp-gradient-text-flow {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 0 0, 300% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-gradient-text {
    color: var(--color-brand-base);
    background-image: none;
    animation: none;
    -webkit-text-fill-color: var(--color-brand-base);
  }
}

.cmp-section-hint__label {
  color: var(--color-text-title);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.6;
  text-transform: uppercase;
}

.cmp-section-hint__icon {
  display: block;
  animation: cmp-section-hint-bounce 2.5s ease-in-out infinite;
}

@keyframes cmp-section-hint-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(6px);
  }

  60% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-section-hint__icon {
    animation: none;
  }
}

/* ---- mapa da página: os pontos na lateral direita ---- */

.cmp-page-map {
  position: fixed;
  top: 50%;
  inset-inline-end: clamp(var(--space-6), 4.8438vw - 38px, var(--space-14));
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-5);
  transform: translateY(-50%);
}

.cmp-page-map[hidden] {
  display: none;
}

@media (width <= 767px) {
  .cmp-page-map {
    display: none;
  }
}

.cmp-page-map::before {
  content: "";
  position: absolute;
  inset-block: var(--space-1);
  inset-inline-end: 3.5px;
  z-index: -1;
  width: 1px;
  background: var(--color-stroke-divider);
}

.cmp-page-map__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cmp-page-map__item:focus-visible {
  box-shadow: var(--shadow-focus-ring);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cmp-page-map__label {
  order: -1;
  color: var(--color-text-caption-disabled);
  font-family: var(--font-family-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(var(--space-2));
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.cmp-page-map__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-stroke-divider);
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .cmp-page-map__item:hover .cmp-page-map__label {
    opacity: 1;
    transform: translateX(0);
  }

  .cmp-page-map__item:hover .cmp-page-map__dot {
    background: var(--color-brand-action);
    transform: scale(1.2);
  }
}

.cmp-page-map__item.is-active .cmp-page-map__label {
  opacity: 0.43;
  transform: translateX(0);
}

.cmp-page-map__item.is-active .cmp-page-map__dot {
  background: var(--color-brand-action);
  transform: scale(1.274);
}

/* ---- aparecer ao rolar ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--motion-page) var(--ease-standard), transform var(--motion-page) var(--ease-standard), filter var(--motion-page) var(--ease-standard);
}

[data-reveal="blur"] {
  filter: blur(8px);
  transform: translateY(32px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal].is-revealed {
  filter: none;
  opacity: 1;
  transform: none;
}

/* ---- modos de acessibilidade do menu do cabeçalho ---- */

:root[data-color-mode="bw"] {
  filter: grayscale(100%);
}

:root[data-color-mode="invert"],
 :root[data-color-mode="invert"] iframe,
 :root[data-color-mode="invert"] img,
 :root[data-color-mode="invert"] picture,
 :root[data-color-mode="invert"] svg,
 :root[data-color-mode="invert"] video {
  filter: invert(100%) hue-rotate(180deg);
}

:root[data-highlight-links] a:not(.cmp-header__skip-link,
 .cmp-header__logo-link,
 .cmp-footer__logo-link,
 .cmp-header__sso,
 .button,
 .cmp-normas-explorer__cta-link,
 .cmp-normas-explorer__card,
 .cmp-norma__auth-cta) {
  /* contorno por dentro: por fora, um link invade o vizinho (lista de
     alteracoes, que empilha sem folga, e linhas de texto com 1.4 de entrelinha);
     a folga lateral impede o contorno de cobrir a primeira e a ultima letra */
  background-color: var(--color-bg-highlight-blue);
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  color: var(--color-text-link);
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  padding-inline: 3px;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* link com cara de botao ou de cartao mantem o proprio fundo e a propria cor:
   so ganha o contorno (e o sublinhado, quando tem texto) */
:root[data-highlight-links] :is(.cmp-header__sso, a.button, .cmp-normas-explorer__cta-link, .cmp-norma__auth-cta, .cmp-normas-explorer__card) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* o cartao ja tem moldura: o contorno cobre a propria borda, senao parece borda dupla */
:root[data-highlight-links] .cmp-normas-explorer__card {
  outline-offset: -1px;
}

:root[data-highlight-links] :is(.cmp-header__sso, a.button, .cmp-normas-explorer__cta-link, .cmp-norma__auth-cta) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* leitura do cabeçalho em edição: o editor mostra o conteúdo autorado, sem o fixo */

/* ---- máscaras dos ícones de interface (icons/) ---- */

.cmp-icon--aba-especie {
  mask-image: url("/icons/aba-especie.svg");
}

.cmp-icon--aba-orgao {
  mask-image: url("/icons/aba-orgao.svg");
}

.cmp-icon--aba-tema {
  mask-image: url("/icons/aba-tema.svg");
}

.cmp-icon--apartment {
  mask-image: url("/icons/apartment.svg");
}

.cmp-icon--arrow-back {
  mask-image: url("/icons/arrow-back.svg");
}

.cmp-icon--arrow-drop-down {
  mask-image: url("/icons/arrow-drop-down.svg");
}

.cmp-icon--arrow-forward-ios {
  mask-image: url("/icons/arrow-forward-ios.svg");
}

.cmp-icon--arrow-forward {
  mask-image: url("/icons/arrow-forward.svg");
}

.cmp-icon--article {
  mask-image: url("/icons/article.svg");
}

.cmp-icon--calendar-month {
  mask-image: url("/icons/calendar-month.svg");
}

.cmp-icon--cancel {
  mask-image: url("/icons/cancel.svg");
}

.cmp-icon--check-circle-400 {
  mask-image: url("/icons/check-circle-400.svg");
}

.cmp-icon--check-circle-fill {
  mask-image: url("/icons/check-circle-fill.svg");
}

.cmp-icon--check {
  mask-image: url("/icons/check.svg");
}

.cmp-icon--check-circle {
  mask-image: url("/icons/check-circle.svg");
}

.cmp-icon--verified {
  mask-image: url("/icons/verified.svg");
}

.cmp-icon--forward-media {
  mask-image: url("/icons/forward-media.svg");
}

.cmp-icon--fullscreen-exit {
  mask-image: url("/icons/fullscreen-exit.svg");
}

.cmp-icon--chevron-left {
  mask-image: url("/icons/chevron-left.svg");
}

.cmp-icon--chevron-right-rounded {
  mask-image: url("/icons/chevron-right-rounded.svg");
}

.cmp-icon--chevron-right {
  mask-image: url("/icons/chevron-right.svg");
}

.cmp-icon--line-height {
  mask-image: url("/icons/line-height.svg");
}

.cmp-icon--line-height-compact {
  mask-image: url("/icons/line-height-compact.svg");
}

.cmp-icon--line-height-loose {
  mask-image: url("/icons/line-height-loose.svg");
}

.cmp-icon--close {
  mask-image: url("/icons/close.svg");
}

.cmp-icon--contrast-circle {
  mask-image: url("/icons/contrast-circle.svg");
}

.cmp-icon--custom-typography {
  mask-image: url("/icons/custom-typography.svg");
}

.cmp-icon--dark-mode {
  mask-image: url("/icons/dark-mode.svg");
}

.cmp-icon--dehaze {
  mask-image: url("/icons/dehaze.svg");
}

.cmp-icon--description {
  mask-image: url("/icons/description.svg");
}

.cmp-icon--domain-fill {
  mask-image: url("/icons/domain-fill.svg");
}

.cmp-icon--download {
  mask-image: url("/icons/download.svg");
}

.cmp-icon--explore {
  mask-image: url("/icons/explore.svg");
}

.cmp-icon--content-copy {
  mask-image: url("/icons/content-copy.svg");
}

.cmp-icon--gavel {
  mask-image: url("/icons/gavel.svg");
}

.cmp-icon--swap-horiz {
  mask-image: url("/icons/swap-horiz.svg");
}

.cmp-icon--deployed-code {
  mask-image: url("/icons/deployed-code.svg");
}

.cmp-icon--edit {
  mask-image: url("/icons/edit.svg");
}

.cmp-icon--expand-more {
  mask-image: url("/icons/expand-more.svg");
}

.cmp-icon--filter-b-and-w {
  mask-image: url("/icons/filter-b-and-w.svg");
}

.cmp-icon--filter-list {
  mask-image: url("/icons/filter-list.svg");
}

.cmp-icon--format-list-bulleted {
  mask-image: url("/icons/format-list-bulleted.svg");
}

.cmp-icon--forum {
  mask-image: url("/icons/forum.svg");
}

.cmp-icon--gavel-fill {
  mask-image: url("/icons/gavel-fill.svg");
}

.cmp-icon--grid-view {
  mask-image: url("/icons/grid-view.svg");
}

.cmp-icon--help {
  mask-image: url("/icons/help.svg");
}

.cmp-icon--star {
  mask-image: url("/icons/star.svg");
}

.cmp-icon--star-fill {
  mask-image: url("/icons/star-fill.svg");
}

.cmp-icon--history {
  mask-image: url("/icons/history.svg");
}

.cmp-icon--published-with-changes {
  mask-image: url("/icons/published-with-changes.svg");
}

.cmp-icon--bookmark-star {
  mask-image: url("/icons/bookmark-star.svg");
}

.cmp-icon--bookmark {
  mask-image: url("/icons/bookmark.svg");
}

.cmp-icon--settings-account-box {
  mask-image: url("/icons/settings-account-box.svg");
}

.cmp-icon--output {
  mask-image: url("/icons/output.svg");
}

.cmp-icon--schedule {
  mask-image: url("/icons/schedule.svg");
}

.cmp-icon--category {
  mask-image: url("/icons/category.svg");
}

.cmp-icon--fluxogram {
  mask-image: url("/icons/fluxogram.svg");
}

.cmp-icon--notifications {
  mask-image: url("/icons/notifications.svg");
}

.cmp-icon--edit-square {
  mask-image: url("/icons/edit-square.svg");
}

.cmp-icon--delete {
  mask-image: url("/icons/delete.svg");
}

.cmp-icon--ios-share {
  mask-image: url("/icons/ios-share.svg");
}

.cmp-icon--balance {
  mask-image: url("/icons/balance.svg");
}

.cmp-icon--local-police {
  mask-image: url("/icons/local-police.svg");
}

.cmp-icon--format-underlined {
  mask-image: url("/icons/format-underlined.svg");
}

.cmp-icon--keep {
  mask-image: url("/icons/keep.svg");
}

.cmp-icon--search-off {
  mask-image: url("/icons/search-off.svg");
}

.cmp-icon--flag {
  mask-image: url("/icons/flag.svg");
}

.cmp-icon--info {
  mask-image: url("/icons/info.svg");
}

.cmp-icon--add {
  mask-image: url("/icons/add.svg");
}

.cmp-icon--remove {
  mask-image: url("/icons/remove.svg");
}

.cmp-icon--refresh {
  mask-image: url("/icons/refresh.svg");
}

.cmp-icon--graph-2 {
  mask-image: url("/icons/graph-2.svg");
}

.cmp-icon--home {
  mask-image: url("/icons/home.svg");
}

.cmp-icon--invert-colors {
  mask-image: url("/icons/invert-colors.svg");
}

.cmp-icon--keyboard {
  mask-image: url("/icons/keyboard.svg");
}

.cmp-icon--light-mode {
  mask-image: url("/icons/light-mode.svg");
}

.cmp-icon--lightbulb {
  mask-image: url("/icons/lightbulb.svg");
}

.cmp-icon--link-2 {
  mask-image: url("/icons/link-2.svg");
}

.cmp-icon--close-fullscreen {
  mask-image: url("/icons/close-fullscreen.svg");
}

.cmp-icon--open-in-full {
  mask-image: url("/icons/open-in-full.svg");
}

.cmp-icon--open-in-new {
  mask-image: url("/icons/open-in-new.svg");
}

.cmp-icon--person {
  mask-image: url("/icons/person.svg");
}

.cmp-icon--qr-code-scanner {
  mask-image: url("/icons/qr-code-scanner.svg");
}

.cmp-icon--release-alert-fill {
  mask-image: url("/icons/release-alert-fill.svg");
}

.cmp-icon--reset-settings {
  mask-image: url("/icons/reset-settings.svg");
}

.cmp-icon--search {
  mask-image: url("/icons/search.svg");
}

.cmp-icon--settings-accessibility {
  mask-image: url("/icons/settings-accessibility.svg");
}

.cmp-icon--sort {
  mask-image: url("/icons/sort.svg");
}

.cmp-icon--zoom-out {
  /* traco fino (wght 200): no Figma este icone aparece grande, no meio do
     estado vazio, e o peso 400 do resto do conjunto fica pesado nesse tamanho */
  mask-image: url("/icons/zoom-out.svg");
}

.cmp-icon--tune {
  mask-image: url("/icons/tune.svg");
}

.cmp-icon--verified-fill {
  mask-image: url("/icons/verified-fill.svg");
}

.cmp-icon--verified-user {
  mask-image: url("/icons/verified-user.svg");
}

.cmp-icon--verified-user-fill {
  mask-image: url("/icons/verified-user-fill.svg");
}


/* ---- painel Aparência: o que a escolha de quem lê muda na raiz ---- */

/* tema Papel: claro, porém em superfície quente, para leitura longa */
:root[data-theme="paper"] {
  --color-paper-bg: #fdfaf3;
  --color-paper-text: #2b2416;
  --color-selo-vigente: #158a19;
  --color-exibicao-titulo: #5c503c;
  --color-exibicao-label: #3d3325;
  --color-exibicao-icone: #5c503c;
  --color-bg-base: var(--color-paper-bg);
  --color-bg-surface: #fbf6ea;
  --color-bg-elevated: var(--color-paper-bg);
  --color-stroke-header: #eaebeb;
  --color-bg-highlight: #f4eddc;
  --color-bg-zebra: #f8f2e4;
  --color-bg-highlight-hover: #ebe2cd;
  --color-text-title: #111414;
  --color-text-paragraph: #111414;
  --color-stroke-divider: #d3d8db;
  --color-stroke-doc-foot: #d3d8db;
}

/* ---- seção de página interna: título à esquerda, na largura de leitura ----
 *
 * Medidas do Figma Prototype (V4), quadros 2.1 Explorar Espécies (4475:137569)
 * e 3. Resultado da pesquisa (4475:137050): recuo lateral de 55 num contêiner
 * de 1280, migalha a 12 do cabeçalho, 32 entre a migalha e o título, título em
 * Open Sans 800 40/56 com -2% e o subtítulo 8 abaixo em 16/26.
 */

main .section.interna {
  /* o recuo lateral é só do invólucro de dentro (55): a seção não soma os 40 */
  --goteira: 0;

  /* o zero embaixo colava o último elemento na faixa preta do rodapé */
  padding-block: var(--space-3) var(--space-10);
}

main .section.interna > .default-content-wrapper,
main .section.interna > div {
  /* o invólucro é flex em coluna: quem encosta os filhos à esquerda é align-items */
  gap: 0;
  margin-block-end: 0;
  place-items: start flex-start;
  margin-inline: auto;
  max-inline-size: 1280px;
  padding-inline: var(--space-4);
  text-align: start;
}

/* o conteúdo da página interna encosta à esquerda e ocupa a coluna toda */
main .section.interna > div > .block,
main .section.interna > .default-content-wrapper > * {
  inline-size: 100%;
  margin-inline: 0;
  max-inline-size: none;
  text-align: start;
}

main .section.interna > .default-content-wrapper > h1 {
  font-family: var(--font-family-ui);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-block: 32px 0;
  text-align: start;
  text-transform: uppercase;
}

/* 24 entre o cabeçalho da página e o que vem depois (abas, busca) */
main .section.interna > .default-content-wrapper {
  margin-block-end: var(--space-6);
}

main .section.interna > .default-content-wrapper > h1 + p {
  color: var(--color-text-caption);
  font-family: var(--font-family-ui);
  font-size: 16px;
  line-height: 1.625;
  margin-block: var(--space-2) 0;
  max-inline-size: 682px;
  text-align: start;
}

/* nas telas da área logada (6.3) também: 16 abaixo do título */
main .section.interna > .default-content-wrapper:has(+ .area-logada-wrapper) > h1 + p {
  margin-block-start: var(--space-4);
}

/* no Verificar (quadros 5.1 e 5.5) o subtitulo fica 16 abaixo do titulo, nao 8 */
main .section.interna:has(.autenticar-norma) > .default-content-wrapper > h1 + p {
  margin-block-start: var(--space-4);
}

@media screen and (width >= 900px) {
  main .section.interna > .default-content-wrapper,
  main .section.interna > div {
    padding-inline: var(--space-14);
  }
}

/* a luz verde de "Conectada à blockchain" (componente light do Figma V4): o
   ponto de 6 em #54BA58 e o halo a 30% que pulsa de 8 a 16 */
@keyframes cmp-luz {
  0% { box-shadow: 0 0 0 1px rgb(84 186 88 / 30%); }
  50% { box-shadow: 0 0 0 3px rgb(84 186 88 / 30%); }
  100% { box-shadow: 0 0 0 5px rgb(84 186 88 / 30%); }
}