:root {
  --bg: #F5F5F5;
  --text: #240E1F;
  --link: #D10A56;
  --card: #ffffff;
  --muted: #5f4b59;
  --line: #D10A56;
  --soft: #f9e5ee;
  --shadow: 0 1rem 3rem rgba(36, 14, 31, .08);
  --radius: 1.25rem;

  --cor-bg-degrade1: linear-gradient(90deg, rgb(255, 213, 77) 0%, rgb(255, 173, 89) 100%);

  --cor-destaque: #797979;
  --cor-destaque-suporte: rgba(192, 212, 212, 0.2);

  color-scheme: light;

  /* Fontes - base 16px = 1em */
  --medida-padrao: 1rem;
  --medida-1: .25rem;
  --medida-2: .5rem;
  --medida-3: 1rem;
  --medida-4: 1.5rem;
  --medida-5: 3rem;
  --medida-6: 4.5rem;
  --medida-7: 6rem;
  --medida-8: 7.5rem;
  --medida-9: 9rem;
  --medida-G: 15rem;
  
  --fonte-peso-light: 300;
  --fonte-peso-regular: 400;
  --fonte-peso-medium: 500;
  --fonte-peso-semibold: 600;
  --fonte-peso-bold: 700;
  --fonte-peso-extrabold: 800;
}

/* ------------- HELPERS ------------- */

/* visibilidade */
.sr-only, .a11y, .visually-hidden, .sem-leitor-telas { position: absolute; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(0 0 99.9% 99.9%); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }
[hidden], .hide { display: none!important; }
.info-small, .info-medium { display: none!important; }
.info-mobile { display: none!important; }

/* preenchimento */
.clearfix::after { display: block; clear: both; content: ""; }
.img-fluid { max-width: 100%!important; height: auto!important; }
.img-area { margin: .5rem; }
.img-reverso { transform: scaleX(-1); }
.comp-relativo { position: relative; }
.comp-absolute { position: absolute; }

.h-100 { height: 100%!important; }
.w-100 { width: 100%!important; }

/* margem */
.m-0 { margin: 0!important; }
.m-1 { margin: var(--medida-1)!important; }
.m-2 { margin: var(--medida-2)!important; }
.m-3 { margin: var(--medida-3)!important; }
.m-4 { margin: var(--medida-4)!important; }
.m-5 { margin: var(--medida-5)!important; }

.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: var(--medida-1)!important; }
.mt-2 { margin-top: var(--medida-2)!important; }
.mt-3 { margin-top: var(--medida-3)!important; }
.mt-4 { margin-top: var(--medida-4)!important; }
.mt-5 { margin-top: var(--medida-5)!important; }
.mt-6 { margin-top: var(--medida-6)!important; }
.mt-7 { margin-top: var(--medida-7)!important; }
.mt-8 { margin-top: var(--medida-8)!important; }
.mt-9 { margin-top: var(--medida-9)!important; }

.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: var(--medida-1)!important; }
.mb-2 { margin-bottom: var(--medida-2)!important; }
.mb-3 { margin-bottom: var(--medida-3)!important; }
.mb-4 { margin-bottom: var(--medida-4)!important; }
.mb-5 { margin-bottom: var(--medida-5)!important; }
.mb-6 { margin-bottom: var(--medida-6)!important; }
.mb-7 { margin-bottom: var(--medida-7)!important; }
.mb-8 { margin-bottom: var(--medida-8)!important; }
.mb-9 { margin-bottom: var(--medida-9)!important; }
.mb-G { margin-bottom: var(--medida-G)!important; }

.mx-auto { margin-right: auto!important; margin-left: auto!important; }
.mx-0 { margin-right: 0!important; margin-left: 0!important; }
.mx-1 { margin-right: var(--medida-1)!important; margin-left: var(--medida-1)!important; }
.mx-2 { margin-right: var(--medida-2)!important; margin-left: var(--medida-2)!important; }
.mx-3 { margin-right: var(--medida-3)!important; margin-left: var(--medida-3)!important; }
.mx-4 { margin-right: var(--medida-4)!important; margin-left: var(--medida-4)!important; }
.mx-5 { margin-right: var(--medida-5)!important; margin-left: var(--medida-5)!important; }

.my-auto { margin-top: auto!important; margin-bottom: auto!important; }
.my-0 { margin-top: 0!important; margin-bottom: 0!important; }
.my-1 { margin-top: var(--medida-1)!important; margin-bottom: var(--medida-1)!important; }
.my-2 { margin-top: var(--medida-2)!important; margin-bottom: var(--medida-2)!important; }
.my-3 { margin-top: var(--medida-3)!important; margin-bottom: var(--medida-3)!important; }
.my-4 { margin-top: var(--medida-4)!important; margin-bottom: var(--medida-4)!important; }
.my-5 { margin-top: var(--medida-5)!important; margin-bottom: var(--medida-5)!important; }

/* espaçamento */
.p-0 { padding: 0!important; }
.p-1 { padding: var(--medida-1)!important; }
.p-2 { padding: var(--medida-2)!important; }
.p-3 { padding: var(--medida-3)!important; }
.p-4 { padding: var(--medida-4)!important; }
.p-5 { padding: var(--medida-5)!important; }

.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: var(--medida-1)!important; }
.pt-2 { padding-top: var(--medida-2)!important; }
.pt-3 { padding-top: var(--medida-3)!important; }
.pt-4 { padding-top: var(--medida-4)!important; }
.pt-5 { padding-top: var(--medida-5)!important; }

.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: var(--medida-1)!important; }
.pb-2 { padding-bottom: var(--medida-2)!important; }
.pb-3 { padding-bottom: var(--medida-3)!important; }
.pb-4 { padding-bottom: var(--medida-4)!important; }
.pb-5 { padding-bottom: var(--medida-5)!important; }

.px-auto { padding-right: auto!important; padding-left: auto!important; }
.px-0 { padding-right: 0!important; padding-left: 0!important; }
.px-1 { padding-right: var(--medida-1)!important; padding-left: var(--medida-1)!important; }
.px-2 { padding-right: var(--medida-2)!important; padding-left: var(--medida-2)!important; }
.px-3 { padding-right: var(--medida-3)!important; padding-left: var(--medida-3)!important; }
.px-4 { padding-right: var(--medida-4)!important; padding-left: var(--medida-4)!important; }
.px-5 { padding-right: var(--medida-5)!important; padding-left: var(--medida-5)!important; }

.py-auto { padding-top: auto!important; padding-bottom: auto!important; }
.py-0 { padding-top: 0!important; padding-bottom: 0!important; }
.py-1 { padding-top: var(--medida-1)!important; padding-bottom: var(--medida-1)!important; }
.py-2 { padding-top: var(--medida-2)!important; padding-bottom: var(--medida-2)!important; }
.py-3 { padding-top: var(--medida-3)!important; padding-bottom: var(--medida-3)!important; }
.py-4 { padding-top: var(--medida-4)!important; padding-bottom: var(--medida-4)!important; }
.py-5 { padding-top: var(--medida-5)!important; padding-bottom: var(--medida-5)!important; }

/* orientação / posição */
.float-start { float: left!important; }
.float-end { float: right!important; }
.float-none { float: none!important; }
.txt-center { text-align: center!important; }
.txt-right { text-align: right!important; }
.txt-left { text-align: left!important; }

.txt-light { font-weight: var(--fonte-peso-light); }
.txt-regular { font-weight: var(--fonte-peso-regular); }
.txt-medium { font-weight: var(--fonte-peso-medium); }
.txt-semibold { font-weight: var(--fonte-peso-semilbold); }
.txt-bold { font-weight: var(--fonte-peso-bold); }
.txt-extrabold { font-weight: var(--fonte-peso-extrabold); }

/* video ratio */
.v-ratio-1x1 { position: relative; width: 100%; padding-bottom: 100%!important; }
.v-ratio-4x3 { position: relative; width: 100%; padding-bottom: calc(3 / 4 * 100%)!important; }
.v-ratio-16x9 { position: relative; width: 100%; padding-bottom: calc(9 / 16 * 100%)!important; }
.v-ratio-21x9 { position: relative; width: 100%; padding-bottom: calc(9 / 21 * 100%)!important; }
.v-ratio { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; z-index: 101; }
.video-borda { padding: .5rem; border: 10px solid #000; border-radius: 1.5rem; background: #000; }

/* Ícones */
i.icons { font-size: 1.1rem; vertical-align: -.2rem; padding: 0 0 0 .2rem; text-rendering: optimizeLegibility; }
.material-icons {
    font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px;
    line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
    white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ------------- CONTAINERS ------------- */

/* grid */
.d-grid { display: grid!important; }
.container-fluid { width: 100%; margin: 0 auto; padding: 0.5rem; }
.container { max-width: calc(1440px - 3rem*2); margin: 0 auto; padding: 0.5rem 1rem; }
.row { width: 100%; margin: 2rem 0 .5rem 0; }

.grid-container {
    display: grid; grid-column-gap: 24px; grid-row-gap: 8px;
    grid-template-columns: repeat(12,minmax(0,1fr));
    padding: 0.25rem 1.5rem; margin: 0 auto;
    max-width: calc(1440px - 1.5rem*2);
}
.grid-item { padding: 1.5rem; }

.grid-container.justify-content-start { justify-content: start!important; }
.grid-container.justify-content-end { justify-content: end!important; }
.grid-container.justify-content-center { justify-content: center!important; }
.grid-container.justify-content-stretch { justify-content: stretch!important; }
.grid-container.justify-content-between { justify-content: space-between!important; }
.grid-container.justify-content-around { justify-content: space-around!important; }
.grid-container.justify-content-evenly { justify-content: space-evenly!important; }
.grid-container.align-items-start { align-items: start!important; }
.grid-container.align-items-end { align-items: end!important; }
.grid-container.align-items-center { align-items: center!important; }
.grid-container.align-items-stretch { align-items: stretch!important; }
.grid-container.align-content-start { align-content: start!important; }
.grid-container.align-content-end { align-content: end!important; }
.grid-container.align-content-center { align-content: center!important; }
.grid-container.align-content-stretch { align-content: stretch!important; }
.grid-container.align-content-between { align-content: space-between!important; }
.grid-container.align-content-around { align-content: space-around!important; }
.grid-container.align-content-stretch { align-content: stretch!important; }
.grid-container.align-self-start { align-self: start!important; }
.grid-container.align-self-end { align-self: end!important; }
.grid-container.align-self-center { align-self: center!important; }
.grid-container.align-self-stretch { align-self: stretch!important; }

.large-span-0 { grid-column:span 0; }
.large-span-1 { grid-column:span 1; }
.large-span-2 { grid-column:span 2; }
.large-span-3 { grid-column:span 3; }
.large-span-4 { grid-column:span 4; }
.large-span-5 { grid-column:span 5; }
.large-span-6 { grid-column:span 6; }
.large-span-7 { grid-column:span 7; }
.large-span-8 { grid-column:span 8; }
.large-span-9 { grid-column:span 9; }
.large-span-10 { grid-column:span 10; }
.large-span-11 { grid-column:span 11; }
.large-span-12 { grid-column:span 12; }
/* medium-span e small-span localizados em Media Queries */

/* flex  */
.d-flex { display: flex!important; }
.d-inline-flex { display: inline-flex!important; }
.flex-row { flex-direction: row!important; }
.flex-row-reverse { flex-direction: row-reverse!important; }
.flex-column { flex-direction: column!important; }
.flex-column-reverse { flex-direction: column-reverse!important; }
.flex-fill { flex: 1 1 auto!important; }
.flex-nowrap { flex-wrap: nowrap!important; }
.flex-wrap { flex-wrap: wrap!important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse!important; }
.justify-content-start { justify-content: flex-start!important; }
.justify-content-end { justify-content: flex-end!important; }
.justify-content-center { justify-content: center!important; }
.justify-content-between { justify-content: space-between!important; }
.justify-content-around { justify-content: space-around!important; }
.justify-content-evenly { justify-content: space-evenly!important; }
.align-items-start { align-items: flex-start!important; }
.align-items-end { align-items: flex-end!important; }
.align-items-center { align-items: center!important; }
.align-items-baseline { align-items: baseline!important; }
.align-items-stretch { align-items: stretch!important; }
.align-content-start { align-content: flex-start!important; }
.align-content-end { align-content: flex-end!important; }
.align-content-center { align-content: center!important; }
.align-content-between { align-content: space-between!important; }
.align-content-around { align-content: space-around!important; }
.align-content-stretch { align-content: stretch!important; }
.align-self-start { align-self: flex-start!important; }
.align-self-end { align-self: flex-end!important; }
.align-self-center { align-self: center!important; }
.align-self-baseline { align-self: baseline!important; }
.align-self-stretch { align-self: stretch!important; }

/* ALL */

html[data-theme="dark"] {
  --bg: #180912;
  --text: #F9EDF4;
  --link: #FF6FA8;
  --link-dark: #D10A56;
  --card: #27101F;
  --muted: #D9BFD0;
  --line: #FF6FA8;
  --soft: #3A1A2E;
  --shadow: 0 1rem 3rem rgba(0, 0, 0, .35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #180912;
    --text: #F9EDF4;
    --link: #FF6FA8;
    --link-dark: #D10A56;
    --card: #27101F;
    --muted: #D9BFD0;
    --line: #FF6FA8;
    --soft: #3A1A2E;
    --shadow: 0 1rem 3rem rgba(0, 0, 0, .35);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 100%/1.55; font-family: "Work Sans", sans-serif; color: var(--text); background-color: var(--bg); background-image: url("../img/bg-brasil-portugal.png"); background-size: auto; background-repeat: repeat; background-position: top left; }

html[data-theme="dark"] body {
  background-image: url("../img/bg-brasil-portugal-dark.png");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    background-image: url("../img/bg-brasil-portugal-dark.png");
  }
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; }
a:hover { text-decoration-thickness: .06em; color: var(--text); }
a:focus-visible,
button:focus-visible { color: var(--text); outline: .125rem dashed var(--link); outline-offset: .125rem; border-radius: .2rem; }

.skip-link { position:absolute; left:1rem; top:.5rem; transform:translateY(-150%); background:var(--text); color:white; padding:.75rem 1rem; z-index:10; }
.skip-link:hover { color: var(--card); }
.skip-link:focus { color: var(--soft); transform:translateY(0); }

.grid-topo { padding: .2rem 1.5rem; }

.theme-switcher { position: relative; display: inline-grid!important; gap: .35rem; margin: 0 2rem 2.5rem 0; display: inline; }
.theme-switcher select { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-height: 44px; padding: .5rem 2.5rem .5rem .75rem; border: 1px solid var(--line); border-radius: .6rem; color: var(--text); background: var(--card); font: inherit; }
.theme-switcher select:focus { color: var(--text); outline: .125rem dashed var(--link); outline-offset: .125rem; border-radius: .2rem; }
.theme-switcher::after { content: ""; position: absolute; right: 1rem; bottom: 1.05rem; width: .75rem; height: .75rem; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); pointer-events: none; }
.theme-switcher label { font-weight: var(--fonte-peso-regular); }

.idiomas { display: flex; justify-content: flex-end; }
.seta-educa { margin: 0 1rem 0 0; }
.frase-educa { margin: 0 .5rem 0 0; }

#google_translate_element select { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--card); color: var(--text); font: inherit; }

#google_translate_element select:focus { color: var(--text); outline: .125rem dashed var(--link); outline-offset: .125rem; border-radius: .2rem; }
.translate-actions ul.idioma { display: flex; flex-direction: row;padding: 0!important;  }
.translate-actions ul.idioma li { list-style: none; padding: 0 .6rem 0 0; margin: 0; background: none; }
.goog-te-gadget { font-size: .8rem!important; white-space: nowrap!important; color: var(--text)!important; }

.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:active,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:link,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:visited { font-size: .8rem!important; font-weight: 700!important; color: var(--text)!important; text-decoration: none; }

html[data-theme="dark"] body {
  .goog-te-gadget { font-size: .8rem!important; white-space: nowrap!important; color: var(--text)!important; }
  .VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:active,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:link,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:visited { font-size: .8rem!important; font-weight: 700!important; color: var(--text)!important; text-decoration: none; }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    .goog-te-gadget { font-size: .8rem!important; white-space: nowrap!important; color: var(--text)!important; }
    .VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:active,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:link,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:visited { font-size: .8rem!important; font-weight: 700!important; color: var(--text)!important; text-decoration: none; }
  }
}

.top-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: .5rem 0; }
.theme-switcher select,
#google_translate_element select,
.goog-te-combo { width: 100%; min-height: 44px; }

/* HEADER */

header,
main { width:min(72rem, calc(100% - 2rem)); margin-inline:auto; }

.hero { padding: 0 0 2rem 0; }
.eyebrow { font-weight: 800; color: var(--link); letter-spacing:.08em; text-transform:uppercase; font-size:1.1rem; }

/* MAIN */

h1 { font-size: clamp(2.4rem, 7vw, 5.9rem); line-height:.92; letter-spacing:-.02em; max-width: 18ch; margin:.5rem 0 1rem; }
h1 .ano { font-size: clamp(2rem, 7vw, 5.2rem); font-weight: var(--fonte-peso-light); }
h2 { font-size: clamp(1.9rem, 3vw, 3.2rem); line-height:1; letter-spacing:-.04em; margin:0 0 1rem; }
h3 { font-size: 1.15rem; line-height:1.25; margin:0 0 .75rem; }
p { max-width: 65ch; }
p.all { max-width: 100%; }
small { font-size: 1rem; }

.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--muted); max-width: 56rem; }
.summary-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.stat { background:var(--card); border:1px solid var(--soft); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.stat strong { display:block; font-size: clamp(2rem, 5vw, 4rem); line-height:1; letter-spacing:-.05em; }

.toc { margin:2.5rem 0 4rem; padding:1.25rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.toc h2 { font-size:1.4rem; letter-spacing:-.02em; }
.toc ol,
.toc ul { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.75rem; }
.toc a { display:block; padding:.5rem 1rem; border:1px solid var(--line); border-radius:.9rem; background:var(--bg); font-weight:700; }

ul { list-style: none; padding-left: 1rem !important; }
ul li { background-image: url(../img/seta-principal.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 5px!important; background-position: left;
padding: 0 0 0 1.3rem; margin-bottom: .5rem; font-size: 1.2rem; line-height: 1.3rem; }
ul.legend li { background-position-y: 8px!important; }

html[data-theme="dark"] body {
  ul li { background-image: url(../img/seta-destaque.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 8px!important; background-position: left;
padding: 0 0 0 1.3rem; margin-bottom: .5rem; font-size: 1.2rem; line-height: 1.3rem; }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    ul li { background-image: url(../img/seta-destaque.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 8px!important; background-position: left;
padding: 0 0 0 1.3rem; margin-bottom: .5rem; font-size: 1.2rem; line-height: 1.3rem; }
  }
}

ol { margin: 1rem .4rem 1rem 1rem; counter-reset: my-awesome-counter 0; }
ol li { list-style: none; counter-increment: my-awesome-counter; background-image: none; padding: 0; margin-bottom: .5rem; font-size: 1.2rem;  line-height: 1.3rem; }

section { padding:4rem 0; border-top:1px solid var(--line); }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }

.charts { display:grid; grid-template-columns: 1fr; gap:1.5rem; align-items:start; }
.chart { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.chart-meta { color:var(--muted); margin:-.25rem 0 1rem; font-size:.95rem; }

.pie-wrap { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.pie-chart { width: 100%; max-width: 22rem; margin-inline: auto; }
/*.pie-slice { transition: transform .15s ease, filter .15s ease; transform-origin:50% 50%; stroke:#fff; stroke-width:.5; }*/
.pie-slice {
  transition: transform .18s ease, filter .18s ease, stroke-width .18s ease;
  transform-box: fill-box;
  transform-origin: center;
  stroke: #fff;
  stroke-width: .5;
}
.pie-slice:hover{ /*transform:scale(1.150);*/ }
.pie-slice:focus-visible { /*transform: scale(1.150);*/ outline: none; }
.pie-focus-outline { display: none; fill: none; stroke: #333; stroke-width: 1; stroke-dasharray: 1 1; pointer-events: none; transform-origin: 50% 50%; }
.pie-focus-outline.is-visible { display: block; transform: scale(1.150); }
.pie-label { font-size:.35rem; font-weight:700; fill:#fff; paint-order:stroke; stroke:rgba(36,14,31,.72); stroke-width:.08rem; stroke-linejoin:round; pointer-events:none; }

.switch-toggle { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; font-size: .95rem; line-height: 1.35; }
.switch-toggle input { position: absolute; opacity: 0; }
.switch-ui { width: 3rem; height: 1.6rem; border: 2px solid var(--line); border-radius: 999px; background: var(--card); position: relative; flex-shrink: 0; }
.switch-ui::before { content: ""; position: absolute; width: 1rem; height: 1rem; top: 50%; left: .25rem; transform: translateY(-50%); border-radius: 50%; background: var(--line); transition: left .2s ease; }
.switch-toggle input:checked + .switch-ui { background: var(--line); }
.switch-toggle input:checked + .switch-ui::before { left: 1.55rem; background: var(--card); }
.switch-toggle input:focus-visible + .switch-ui { outline: .125rem dashed var(--link); outline-offset: .2rem; }

/*.chart-options { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid rgba(36,14,31,.18); border-radius: .75rem; background: var(--bg); }*/
.pattern-toggle-label { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: .95rem; line-height: 1.35; cursor: pointer; }
.pattern-toggle-label input { inline-size: 1.15rem; block-size: 1.15rem; margin-top: .08rem; accent-color: var(--link); }
.pattern-toggle-label input:focus-visible { outline: .125rem dashed var(--link); outline-offset: .125rem; }
.pie-pattern-line { stroke: rgba(255,255,255,.58); stroke-width: .75; stroke-linecap: round; fill: none; }
.pie-pattern-line-dark { stroke: rgba(36,14,31,.46); stroke-width: .7; stroke-linecap: round; fill: none; }
.pie-pattern-line-soft { stroke: rgba(255,255,255,.42); stroke-width: .6; stroke-linecap: round; fill: none; }

.pie-pattern-fill-light { fill: rgba(255,255,255,.50); }
.pie-pattern-fill-dark { fill: rgba(36,14,31,.40); }

.legend { display:grid; gap:.55rem; margin:1rem 0 0 0; padding:0; list-style:none; min-width: 0; }
.legend li { display:grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap:.5rem; margin-bottom: 0; align-items:start; font-size:.93rem; align-items: center; }
.swatch { width: 24px; height: 24px; border-radius: .25rem; flex-shrink: 0; }
.legend-swatch-fill { stroke: rgba(36,14,31,.45); stroke-width: 1; transition: fill .15s ease; }
.legend-label { margin: 0 0 0 .3rem; min-width: 0; overflow-wrap: anywhere; }
.legend-value { font-weight:700; white-space:nowrap; }

.tooltip { position:fixed; z-index:20; max-width:18rem; padding:.6rem .75rem; background:var(--text); color: #efefef; border-radius:.6rem; box-shadow:var(--shadow); font-size:.9rem; pointer-events:none; opacity:0; transform:translate(.75rem,.75rem); }

html[data-theme="dark"] body {
  .tooltip { position:fixed; z-index:20; max-width:18rem; padding:.6rem .75rem; background:var(--bg); color: var(--text); border-radius:.6rem; box-shadow:var(--shadow); font-size:.9rem; pointer-events:none; opacity:0; transform:translate(.75rem,.75rem); }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    .tooltip { position:fixed; z-index:20; max-width:18rem; padding:.6rem .75rem; background:var(--bg); color: var(--text); border-radius:.6rem; box-shadow:var(--shadow); font-size:.9rem; pointer-events:none; opacity:0; transform:translate(.75rem,.75rem); }
  }
}

.details { margin-top:.8rem; }
summary { cursor:pointer; color:var(--link); text-decoration: underline; text-underline-offset:.18em; }

.notes { margin-top: 1rem; }
.notes h3 { margin-bottom: 1.5rem; }
.comments-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.testimonial-card { margin: 0; padding: 1.5rem; border: 1px solid var(--soft); border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: var(--shadow); }
/*.testimonial-card::before { content: "“"; display: block; margin-bottom: .5rem; color: var(--link); font-size: 4rem; line-height: .75; font-weight: var(--fonte-peso-extrabold); }*/
.testimonial-card blockquote { margin: 0; padding: 0; border-left: 0; color: inherit; max-width: none; }
.testimonial-card p { margin: 0; max-width: none; font-size: 1rem; line-height: 1.55; }
.quote-mark { display: block; margin-bottom: .5rem; color: var(--link); font-size: 4rem; line-height: .75; font-weight: var(--fonte-peso-extrabold); }

blockquote { margin:3rem 0; padding-left:1rem; border-left:.25rem solid var(--link); color:#f7eaf0; max-width: 75ch; }
.top { display:inline-block; margin-top:1.5rem; font-weight:700; }

.destaque-dados { border: 1px dashed var(--cor-destaque); border-radius: 3rem; background: var(--cor-destaque-suporte); margin: 1rem -8rem 1.5rem -8rem; padding: 1.5rem 8rem; }
.destaque-dados .titulo-destaque { font-family: 'Dancing Script', cursive; font-size: 2.5rem; line-height: 3rem; color: var(--text); margin-bottom: 1rem; }
.destaque-dados p { max-width: 100%; }
.destaque-dados p.chart-meta { max-width: 85ch; }
.destaque-dados p.nome-empresas,
.destaque-dados p.resumo-dados { font-size: 1.3rem; }
.destaque-dados ul li { line-height: 1.5rem; }

/* ----- FOOTER ----- */
footer { padding: .5rem 3rem!important; }
footer p { color: var(--text); margin-bottom: 0; font-size: 1.2rem; line-height: 1.7rem; margin-bottom: .7rem; max-width: 100%; }
footer a { color: var(--text); text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; }
footer a:hover { color: var(--link); background-color: var(transparent); }
footer a:focus { color: var(--link); background-color: var(transparent); outline: .125rem dashed var(--link); outline-offset: .125rem; }

html[data-theme="dark"] body {
  footer p { color: var(--soft); margin-bottom: 0; font-size: 1.3rem; line-height: 1.7rem; margin-bottom: .7rem; max-width: 100%; }
  footer a { color: var(--soft); text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; }
  footer a:hover { color: var(--link-dark); background-color: var(transparent); }
  footer a:focus { color: var(--link-dark); background-color: var(transparent); outline: .125rem dashed var(--link); outline-offset: .125rem; }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    footer p { color: var(--soft); margin-bottom: 0; font-size: 1.3rem; line-height: 1.7rem; margin-bottom: .7rem; max-width: 100%; }
    footer a { color: var(--soft); text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; }
    footer a:hover { color: var(--link-dark); background-color: var(transparent); }
    footer a:focus { color: var(--link-dark); background-color: var(transparent); outline: .125rem dashed var(--link); outline-offset: .125rem; }
  }
}

footer a.logo { color: var(--text); text-decoration: none; border-bottom: none; padding: 0; outline: 2px solid transparent; outline-offset: .5rem; transition: outline-offset .2s linear; }
footer a.logo:hover,
#desafios footer a.logo:hover,
#cursos footer a.logo:hover { color: transparent; background-color: transparent; padding: 0; cursor: pointer; }
footer a.logo:focus { color: transparent; background-color: transparent; padding: 0; outline: .125rem dashed var(--link); outline-offset: .125rem; }

.bg-rodape, .bg-degrade { background: var(--cor-bg-degrade1); /*background-image: url("../img/bg-topo.jpg"); background-size: cover;*/ }

footer.fixo { margin-top: 3rem; position: fixed; bottom: 0; width: 100%; }


/* ----- MEDIA QUERIES ----- */

@media (max-width: 44rem) {
  .summary-grid { grid-template-columns:1fr; }
  .section-intro { display:block; }
}

@media (max-width: 991.98px) {
  .container { max-width: 85%; }
  .grid-container { grid-column-gap: 16px; }
  .medium-span-0 { grid-column:span 0; }
  .medium-span-1 { grid-column:span 1; }
  .medium-span-2 { grid-column:span 2; }
  .medium-span-3 { grid-column:span 3; }
  .medium-span-4 { grid-column:span 4; }
  .medium-span-5 { grid-column:span 5; }
  .medium-span-6 { grid-column:span 6; }
  .medium-span-7 { grid-column:span 7; }
  .medium-span-8 { grid-column:span 8; }
  .medium-span-9 { grid-column:span 9; }
  .medium-span-10 { grid-column:span 10; }
  .medium-span-11 { grid-column:span 11; }
  .medium-span-12 { grid-column:span 12; }

  .comments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .chart { padding: 1rem; }
  .pie-wrap { grid-template-columns: 1fr; }
  .pie-chart { max-width: 18rem; }
  .legend li { grid-template-columns: 24px minmax(0, 1fr); }
  .legend-value { grid-column: 3; white-space: normal; }

  .top-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .theme-switcher,
  #google_translate_element { width: 100%; min-width: 0; }
  .theme-switcher select,
  #google_translate_element select,
  .goog-te-combo { width: 100%; max-width: 100%; }
}


@media (max-width: 575.98px) {
  .container { max-width: 95%; }
  .small-span-0 { grid-column:span 0; }
  .small-span-1 { grid-column:span 1; }
  .small-span-2 { grid-column:span 2; }
  .small-span-3 { grid-column:span 3; }
  .small-span-4 { grid-column:span 4; }
  .small-span-5 { grid-column:span 5; }
  .small-span-6 { grid-column:span 6; }
  .small-span-7 { grid-column:span 7; }
  .small-span-8 { grid-column:span 8; }
  .small-span-9 { grid-column:span 9; }
  .small-span-10 { grid-column:span 10; }
  .small-span-11 { grid-column:span 11; }
  .small-span-12 { grid-column:span 12; }

  .top-actions { margin: 0; }

  .grid-item { padding: .5rem; }
  .comments-grid { grid-template-columns: 1fr; }

  .pie-chart { max-width: 15rem; }
  .chart-options { padding: .75rem; }

  footer { padding: .2rem .2rem!important; }
}