/*
Folha de Estilos para academiadeacessibilidade.com.br
Autor: Marcelo Sales
*/

/* ------------- CSS RESET ------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
summary { display: list-item; cursor: pointer; }

/* config */
*, *:after, *:before { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: var(--cor-texto-primaria); background: radial-gradient(circle, rgba(255,251,251,1) 6%, rgba(255,205,216,1) 77%); }
body.all { background-image: none; }

body#home { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: var(--cor-texto-primaria); background: radial-gradient(circle, rgba(255,254,251,1) 0%, rgba(221,205,255,1) 100%); }
body#desafios { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: var(--cor-texto-primaria); background: radial-gradient(circle, rgba(255,254,251,1) 0%, rgba(255,234,205,1) 100%); }
body#cursos { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: var(--cor-texto-primaria); background: radial-gradient(circle, rgba(251,255,255,1) 0%, rgba(205,240,255,1) 100%); }
body#cursos-destaque { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: var(--cor-texto-primaria); background: #e8d15b; }




.bg-info-geral { outline: .1rem dashed var(--cor-outline-secundaria); outline-offset: .3rem; background: rgba(239, 239, 239, 0.6); margin: 0 -5rem .3rem -5rem; }

/* ------------- VARS ------------- */
:root {
    /* 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;

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

    --cor-padrao: #240e20;
    --cor-primaria: #240e20;
    --cor-secundaria: #d62465;
    --cor-especial: #7C20CB;

    --cor-texto-primaria: #240e20;
    --cor-texto-secundaria: #d62465;
    --cor-texto-destaque: #fffbfb;
    --cor-texto-importante: #e8c95b;
    --cor-texto-frase: #066195;

    --cor-link-primaria: #d62465;
    --cor-link-secundaria: #240e20;
    --cor-link-destaque: #fffbfb;
    --cor-link-menu: #B80A48;

    --cor-bg-primaria: #d62465;
    --cor-bg-secundaria: #240e20;
    --cor-bg-destaque: #e8c95b;
    --cor-bg-branco: #ffffff;

    --cor-outline-primaria: #fffbfb;
    --cor-outline-secundaria: #d62465;
    --cor-outline-destaque: #e8c95b;
    --cor-outline-padrao: #240e20;

    --color-checkbox: #121212;
    --color-hover: #eee;
    --color-label-background: #fff;
    --color-label-checked: #edf;
    --color-text: #272727;

    --ico-check-branco: url(../img/seta-check-branca.svg);
}

:root #desafios {
    /* Cores */
    --cor-padrao: #240e20;
    --cor-primaria: #256e87;
    --cor-secundaria: #B80A48;

    --cor-texto-primaria: #0e485b;
    --cor-texto-secundaria: #B80A48;
    --cor-texto-destaque: #fffbfb;
    --cor-texto-importante: #e8c95b;
    --cor-texto-frase: #066195;

    --cor-link-primaria: #B80A48;
    --cor-link-secundaria: #0e485b;
    --cor-link-destaque: #fffbfb;
    --cor-link-menu: #B80A48;

    --cor-bg-primaria: #B80A48;
    --cor-bg-secundaria: #256e87;
    --cor-bg-destaque: #e8c95b;
    --cor-bg-branco: #ffffff;

    --cor-outline-primaria: #fffbfb;
    --cor-outline-secundaria: #B80A48;
    --cor-outline-destaque: #240e20;
    --cor-outline-padrao: #256e87;
}

:root #cursos {
    /* Cores */
    --cor-padrao: #240e20;
    --cor-primaria: #256e87;
    --cor-secundaria: #B80A48;

    --cor-texto-primaria: #0e485b;
    --cor-texto-secundaria: #B80A48;
    --cor-texto-destaque: #fffbfb;
    --cor-texto-importante: #e8c95b;
    --cor-texto-frase: #066195;

    --cor-link-primaria: #B80A48;
    --cor-link-secundaria: #0e485b;
    --cor-link-destaque: #fffbfb;
    --cor-link-menu: #B80A48;

    --cor-bg-primaria: #B80A48;
    --cor-bg-secundaria: #256e87;
    --cor-bg-destaque: #e8c95b;
    --cor-bg-branco: #ffffff;

    --cor-outline-primaria: #fffbfb;
    --cor-outline-secundaria: #B80A48;
    --cor-outline-destaque: #e8c95b;
    --cor-outline-padrao: #256e87;
}

:root #cursos-destaque {
    /* Cores */
    --cor-padrao: #240e20;
    --cor-primaria: #0e485b;
    --cor-secundaria: #1c282f;
    --cor-padrao-curso: #1c282f;

    --cor-texto-primaria: #0e485b;
    --cor-texto-secundaria: #1c282f;
    --cor-texto-destaque: #fffbfb;
    --cor-texto-importante: #e8c95b;
    --cor-texto-frase: #066195;
    --cor-texto-curso: #1c282f;

    --cor-link-primaria: #1c282f;
    --cor-link-secundaria: #0e485b;
    --cor-link-destaque: #fffbfb;
    --cor-link-menu: #1c282f;
    --cor-link-curso: #1c282f;

    --cor-bg-primaria: #1c282f;
    --cor-bg-secundaria: #0e485b;
    --cor-bg-destaque: #e8c95b;
    --cor-bg-branco: #ffffff;
    --cor-bg-curso: #1c282f;

    --cor-outline-primaria: #fffbfb;
    --cor-outline-secundaria: #1c282f;
    --cor-outline-destaque: #e8c95b;
    --cor-outline-padrao: #0e485b;
    --cor-outline-curso: #1c282f;
}

/* ------------- 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-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 */
.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;
}
span.icons { vertical-align: -.2rem; text-rendering: optimizeLegibility; }
.icon-small { font-size: 1rem; }
.icon-medium { font-size: 2rem; }
.icon-large { font-size: 3rem; }
a.externo:after { position: absolute; font-family: "Material Icons"; content: "\e89e"; }


/* ------------- 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 --------------------------------------- */
p { font-size: 1.3rem; }
p::selection, h1::selection, h2::selection, h3::selection, h4::selection, a::selection, cite::selection, strong::selection, strong.destaque::selection, .destaque-texto::selection { color: #333; background: #ffff00; }
.grid-item p { font-size: 1.3rem; margin-bottom: 1.3rem; }
.grid-item p:last-child { margin-bottom: 0; }

small, .small { font-size: 1rem; line-height: 1.3rem; display: inline-block; }
sup { vertical-align: super; font-size: 1.4rem; }

h1.destaque { color: var(--cor-texto-destaque-secundario); }
h1 { font-size: 5rem; font-weight: 700; line-height: 4.8rem; padding-bottom: 1rem; color: var(--cor-primaria); }
h2 { font-size: 3rem; font-weight: 700; line-height: 3.2rem; padding-bottom: 1rem; color: var(--cor-primaria); }
h3 { font-size: 2rem; font-weight: 700; line-height: 2.2rem; padding: 1rem 0; color: var(--cor-primaria); }
h4, h2.indice { font-size: 1.6rem; font-weight: 700; line-height: 1.6rem; padding: 1rem 0; color: var(--cor-primaria); }

#desafios h1 { font-size: 5rem; font-weight: 700; line-height: 4.8rem; padding-bottom: 1rem; color: var(--cor-texto-destaque); }
#desafios h2 { font-size: 3rem; font-weight: 700; line-height: 3.2rem; padding-bottom: 1rem; color: var(--cor-texto-primaria); }
#desafios h3 { font-size: 2rem; font-weight: 700; line-height: 2.2rem; padding: 1rem 0; color: var(--cor-texto-primaria); }
#desafios h4, #desafios h2.indice { font-size: 1.6rem; font-weight: 700; line-height: 1.6rem; padding: 1rem 0; color: var(--cor-texto-primaria); }

#cursos h1 { font-size: 5rem; font-weight: 700; line-height: 4.8rem; padding-bottom: 1rem; color: var(--cor-texto-destaque); }
#cursos h2 { font-size: 3rem; font-weight: 700; line-height: 3.2rem; padding-bottom: 1rem; color: var(--cor-texto-primaria); }
#cursos h3 { font-size: 2rem; font-weight: 700; line-height: 2.2rem; padding: 1rem 0; color: var(--cor-texto-primaria); }
#cursos h4, #cursos h2.indice { font-size: 1.6rem; font-weight: 700; line-height: 1.6rem; padding: 1rem 0; color: var(--cor-texto-primaria); }

.linha-bg1 { background-image: url(../img/line-titulo-estrelas1.svg); background-repeat: no-repeat; background-position: right bottom; margin-left: -1rem; padding-left: 1rem; }
.linha-bg2 { background-image: url(../img/line-titulo2.svg); background-repeat: no-repeat; background-position: left bottom; margin-left: -1rem; padding-left: 1rem; }
.linha-bg3 { background-image: url(../img/line-titulo3.svg); background-repeat: no-repeat; background-position: left bottom; margin-left: -1rem; padding-left: 1rem; }

.destaque { color: var(--cor-texto-secundaria); }
p.destaque { font-weight: 700; color: var(--cor-texto-secundaria); }
p.destaque-foco, .destaque-texto { color: var(--cor-texto-secundaria); }

.destaque-plus { font-size: 2rem; padding: 0 .8rem 0 1rem; bottom: .5rem; position: relative; }

header p.destaque { z-index: 100; }

.nota-destaque { color: var(--cor-texto-secundaria); background: rgba(254, 239, 240, .3); border: 1px dashed var(--cor-outline-destaque); border-radius: 1rem; margin: .5rem -2rem 1rem -2rem !important; padding: 1rem 2rem !important; font-size: 1.2rem; line-height: 1.7rem; }

strong { font-weight: 700; }
strong.destaque { font-weight: 700; color: var(--cor-texto-destaque); }

em { font-style: italic; }

abbr { cursor:help; }

a { color: var(--cor-link-primaria); text-decoration: none; border-bottom: 1px dashed var(--cor-outline-secundaria); padding: 0 .2rem; outline: .1rem solid transparent; outline-offset: .5rem; transition: outline-offset .2s linear; }
a:hover { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); padding: 0 .2rem; border-bottom: 0; }
a:focus { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); padding: 0 .2rem; border-bottom: 0; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .175rem; }
a.link-img { border-bottom: none !important; transition: outline-offset .1s linear; background: none !important; display: block; width: 300px; }
a.link-img:hover { border-bottom: none; text-decoration: none; }
a.link-img:focus { border-bottom: none; outline: .1rem dashed var(--cor-outline-secundaria); outline-offset: .6rem; }

a.link-ico { color: #000; width: 100%!important; }
a.link-ico:hover, a.link-ico:focus  { color: var(--cor-bg-primaria); }

ul.menu a { color: var(--cor-link-menu); }
ul.menu a:hover,
ul.menu a:focus { color: var(--cor-link-destaque); }
ul.menu li { background-image: url(../img/seta-preta.svg); }

i.icons { font-size: 1.1rem; vertical-align: -.1rem; text-rendering: optimizeLegibility; }

/* btn-geral */
.btn {
    border-radius: 15px; border: none; font-size: 1rem; font-weight: 700; padding: 0.5rem 1.5rem; line-height: 1.75; cursor: pointer; text-transform: uppercase;
    color: var(--cor-texto-destaque); background-color: var(--cor-bg-secundaria); outline: .1rem; outline-offset: .5rem;
}
.btn:hover, .btn:focus {
    font-size: 1rem; font-weight: 600; padding: 0.5rem 1.5rem; text-decoration: underline;
    color: var(--cor-texto-primaria); border-color: var(--cor-outline-padrao); background-color: #fff3e0;
    outline: 2px; outline-offset: .3rem; /*box-shadow: 0 0 0 0.25rem rgba(164,40,76,.25);*/ box-shadow: none; outline: .1500rem dashed var(--cor-outline-secundaria);
}

.btn-desafio {
    border-radius: 15px; border: none; font-size: 1rem; font-weight: 700; padding: 0.5rem 1.5rem; line-height: 1.75; cursor: pointer; text-transform: uppercase;
    color: var(--cor-texto-destaque); background-color: var(--cor-padrao); outline: .1rem; outline-offset: .5rem;
}
.btn-desafio:hover, .btn-desafio:focus {
    font-size: 1rem; font-weight: 600; padding: 0.5rem 1.5rem; text-decoration: underline;
    color: var(--cor-padrao); border-color: var(--cor-outline-destaque); background-color: #fff3e0;
    outline: 2px; outline-offset: .3rem; /*box-shadow: 0 0 0 0.25rem rgba(164,40,76,.25);*/ box-shadow: none; outline: .1500rem dashed var(--cor-outline-destaque);
}

.btn:not(:disabled):not(.disabled),
.btn-desafio:not(:disabled):not(.disabled) { cursor: default; }
button:focus:not(:focus-visible) { outline: 0; }

/* btn-download */
a.btn-download, .btn-download {
    text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 1.2rem;
    padding: .75rem 2.5rem; border: 4px solid var(--cor-outline-primaria); border-radius: 50px; cursor: default;
    color: var(--cor-texto-destaque); background: linear-gradient(-90deg, #F37055 0%, #eb6789 25%, #A166AB 45%, #5073B8 75%, #399ad5 100%);
	background-size: 600% 600%; animation: btn-gradient 4s ease infinite;
    outline: .1rem dashed var(--cor-outline-primaria); outline-offset: .25rem; box-shadow: none;
}
a.btn-download:hover, .btn-download:hover, a.btn-download:focus, .btn-download:focus {
    color: var(--cor-texto-destaque); text-decoration: underline; background: var(--cor-bg-primaria); outline: 2px dashed var(--cor-outline-destaque); outline-offset: .5rem; transition: outline-offset .2s linear;
}
@keyframes btn-gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }

.permalink {
    padding: 0 .175rem; font-weight: 400; font-size: 1.3rem; text-decoration: none; border-bottom: none;
    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; position: absolute; margin: 1rem 0 0 -3rem;
}
.permalink::after { content: "#"; }
.link-destaque { color: var(--cor-link-destaque); }
.link-destaque:hover { color: var(--cor-texto-importante); border-bottom: 1px dashed var(--cor-outline-secundaria); }

hr.apoio { border: .01rem dashed var(--cor-borda-destaque); width: 90%; }
hr.rodape { border: .01rem solid var(--cor-borda-secundaria); width: 100%; }

blockquote p:before { content: "\0022"; font-family: 'Times New Roman', Times, serif; font-size: 6rem; margin: .5rem 0 0 -2.5rem; position: absolute; opacity: 0.3; }
blockquote p:after { content: "\0022"; font-family: 'Times New Roman', Times, serif; font-size: 6rem; margin: 1.8rem 0 0 .3rem; position: absolute; opacity: 0.3; }
blockquote { color: var(--cor-texto-frase); font-family: 'Merriweather', cursive; font-size: 2rem; text-align: center; line-height: 2rem; margin-bottom: 0; padding: 1rem 0; }
blockquote > cite { color: var(--cor-texto-primaria); font-family: 'Open Sans', sans-serif; font-size: .9rem; line-height: 1.2rem; display: inline-block; }

blockquote.frase-home p { font-size: 1.8rem!important; }
blockquote.frase-home > cite { font-size: 1.2rem!important; }

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

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: .8rem; font-size: 1.2rem;  line-height: 1.5rem; }
ol li:before { content: counter(my-awesome-counter) ". "; color: var(--cor-bg-primaria); font-weight: 700; font-size: 1.2rem; margin: 0 0 0 -1.4rem; }
ol.romanos-max li:before { content: counter(my-awesome-counter, upper-roman) ". "; }
ol.romanos-min li:before { content: counter(my-awesome-counter, lower-roman) ". "; }
ol.maiusculas li:before { content: counter(my-awesome-counter, upper-latin) ". "; }
ol.minusculas li:before { content: counter(my-awesome-counter, lower-latin) ". "; }
ul.no-lista li { background: none!important; }

#desafios ol, #desafios ul { padding-left: 1rem!important; list-style: none; }
#desafios ul li { background-image: url(../img/seta-preta.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 8px!important; background-position: left; padding: 0 0 0 1.3rem; margin-bottom: .3rem; font-size: 1.2rem; line-height: 1.6rem; }
#desafios ol { margin: 0 .4rem 0 1rem; counter-reset: my-awesome-counter 0; }
#desafios ol li { list-style: none; counter-increment: my-awesome-counter; background-image: none; padding: 0; margin-bottom: .8rem; font-size: 1.2rem;  line-height: 1.5rem; }
#desafios ol li:before { content: counter(my-awesome-counter) ". "; color: var(--cor-bg-primaria); font-weight: 700; font-size: 1.2rem; margin: 0 0 0 -1.4rem; }
#desafios ol.romanos-max li:before { content: counter(my-awesome-counter, upper-roman) ". "; }
#desafios ol.romanos-min li:before { content: counter(my-awesome-counter, lower-roman) ". "; }
#desafios ol.maiusculas li:before { content: counter(my-awesome-counter, upper-latin) ". "; }
#desafios ol.minusculas li:before { content: counter(my-awesome-counter, lower-latin) ". "; }
#desafios ul.no-lista li { background: none!important; }

dl.glossario { padding-left: 1rem!important; list-style: none; }
dl.glossario dt { background-image: url(../img/seta-preta.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 8px!important; background-position: left; padding: 0 0 0 1.3rem; margin-bottom: .1rem; font-size: 1.2rem; line-height: 1.6rem; }
dl.glossario dd { padding: 0 0 0 1.3rem; margin-bottom: .8rem; font-size: 1.2rem; line-height: 1.6rem; }

ul.info-destaque li {  background-image: url(../img/seta-preta.svg)!important; }

/* menu principal */
nav.menu-principal { z-index: 9999; position: absolute; top: 0; border: .1rem solid var(--cor-outline-secundaria); border-radius: 0 0 20px 20px; padding: .2rem .5rem!important; margin: -.1rem 0 0 3rem; background-color: rgba(239, 239, 239, 0.6); }
nav.menu-principal ul { display: flex; flex-wrap: wrap; padding: 0 1rem; }
nav.menu-principal ul li { list-style: none!important; background-image: none!important; padding: .5rem .2rem!important; }
nav.menu-principal ul li:after { content: " |"; }
nav.menu-principal ul li:last-child:after { content: ""; }
nav.menu-principal ul li a { color: var(--cor-link-secundaria); }
nav.menu-principal ul li a:hover { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); }
nav.menu-principal ul li a:focus { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); border-bottom: 0; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .175rem; }
nav.menu-principal ul li.ativo { font-weight: 700; }
nav.menu-principal ul li.ativo::after { font-weight: 400; }

.seta-menu { border: 1px solid var(--cor-padrao); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); }
.seta-menu-ferramentas { position: absolute; top: 2.4rem; left: 5.3rem; }
.seta-menu-cursos { position: absolute; top: 2.4rem; left: 12.4rem; }
.seta-menu-desafios { position: absolute; top: 2.4rem; left: 18.5rem; }

/* breadcrumb */
ol.breadcrumb,
#desafios ol.breadcrumb { display: flex; flex-wrap: wrap; margin-left: .0!important; padding-left: 0!important; list-style: none!important; counter-reset: none!important; }
ol.breadcrumb li { counter-increment: none!important; border: .1rem solid var(--cor-outline-secundaria); border-radius: 0 20px 20px 0; font-size: 1rem!important; padding: .2rem .5rem!important; margin: 0  1rem 0 0; }
ol.breadcrumb li:last-child { border: none; margin-left: -.9rem; font-weight: 700; }

ol.breadcrumb li:before { content: ""!important; margin: 0!important; }
ol.breadcrumb li:after { content: " >"; padding-right: .5rem; color: var(--cor-texto-secundaria); }
ol.breadcrumb li:last-child::after { content: ""; }

/* quad SALAS (home) */
.quad-sala { margin: 0 0 1rem 0!important; padding: 0 1rem 1rem 1rem!important; }
.quad-sala-armas { color: var(--cor-texto-primaria); /*background: linear-gradient(120deg, rgba(255,251,251,1) 6%, rgba(255,205,216,1) 77%);*/ background-color: rgb(255,205,216); }
.quad-sala-treinos { color: var(--cor-texto-primaria); /*background: linear-gradient(120deg, rgba(251,255,255,1) 0%, rgba(205,240,255,1) 100%);*/ background-color: rgb(205,240,255); }
.quad-sala-concentracao { color: var(--cor-texto-primaria); /*background: linear-gradient(120deg, rgba(255,254,251,1) 0%, rgba(255,234,205,1) 100%);*/ background-color: rgb(255,234,205); }
.quad-sala h3 { font-size: 1.7rem; line-height: 1.8rem; }
p.sala-descricao { font-family: 'Square Peg', sans-serif; font-size: 2.2rem !important; margin: -.8rem 0 .5rem 0; color: var(--cor-texto-secundaria)!important; }

.desafio-destaque-img { margin: -2rem 0 0 -9rem; }

.desafio-info { margin: 1rem -1.5rem; padding: .5rem; background-color: var(--cor-bg-destaque); color: var(--cor-texto-secundaria); }


/* Galeria de Fotos */
.galeria-imagens .galeria-all { padding-left: 0!important; width: 100%!important; display: flex!important; flex-direction: row!important; flex-wrap: wrap!important; vertical-align: top!important; }
.galeria-imagens .galeria-all li { list-style: none; margin: 5px auto!important; background-image: none!important; padding: 0!important; }
.lista-foto { max-width: 400px!important; }

/* quad heuristicas / desafios */
#heuristicas .grid-item { padding: .5rem; }
.quad-heuristica { border: 1px dashed var(--cor-outline-secundaria); background-color: #ffffff; border-radius: 2rem; margin: 0 0 1rem 0; padding: 0 1rem 1rem 1rem; width: 410px; min-height: 320px; }
.quad-desafios { border: 1px dashed var(--cor-outline-padrao); background-color: #ffffff; border-radius: 2rem; margin: 0 0 1rem 0; padding: 0 1rem 1rem 1rem; width: 410px; }
/*.quad-cursos { border: 1px dashed var(--cor-outline-padrao); background-color: #ffffff; border-radius: 2rem; margin: 0 0 1rem 0; padding: 0 1rem 1rem 1rem; width: 410px; }*/
.quad-heuristica ul,
.quad-desafios ul,
.quad-cursos ul { padding-left: .8rem!important; }
.quad-heuristica h3,
.quad-desafios h3,
.quad-cursos h3 { font-size: 1.7rem; color: var(--cor-texto-secundaria); }
.quad-heuristica p,
.quad-desafios p,
.quad-cursos p { margin: .5rem .5rem 1.5rem .5rem; }

.heuristicas-all, #desafios .heuristicas-all, #cursos .heuristicas-all,
.desafios-all, #desafios .desafios-all, #cursos .desafios-all,
.cursos-all, #cursos .cursos-all,
.ferramentas-all, #ferramentas .ferramentas-all { padding-left: 0!important; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; vertical-align: top; }
.heuristicas-all li, #desafios .heuristicas-all li, #cursos .heuristicas-all li,
.desafios-all li, #desafios .desafios-all li, #cursos .desafios-all li,
.cursos-all li, #cursos .cursos-all li,
.ferramentas-all li, #ferramentas .ferramentas-all li { list-style: none; margin: 5px auto; background-image: none; padding: 0; }

i.small { font-size: 2rem; }
i.medium { font-size: 3rem; }
i.large { font-size: 4rem; }

/* quad destaques */
.quad-destaque { border: 1px dashed var(--cor-outline-secundaria); border-radius: 1rem; padding: 1.5rem 2rem; font-size: 1.2rem; line-height: 1.6rem; }
.quad-destaque h2 { font-size: 2.2rem; line-height: 2.4rem; }
.quad-destaque h3 { font-size: 1.6rem; line-height: 1.8rem; }
.ninja-estudos { position: absolute; max-width: 300px; margin-top: -12rem; margin-left: 23rem; }

.quad-destaque ul li { background-image: url(../img/seta-rosa.svg); }

.quad-destaque-geral { background-color: rgba(242, 242, 242, 0.5); }

.quad-destaque-info { border: 1px dashed var(--cor-outline-secundaria); padding: 1.5rem 2rem; font-size: 1.2rem; line-height: 1.6rem; color: #fff; background-color: rgba(2, 2, 2, 0.8); }
.quad-destaque-info h3 { font-size: 1.6rem!important; line-height: 1.8rem!important; color: var(--cor-texto-importante); }


/* quad Ferramentas / Cursos */
.quad-ferramentas { border: none; background-color: transparent; padding: 0 1rem 1rem 1rem; width: 390px; }
.quad-cursos { border: none; background-color: transparent; padding: 0 1rem .5rem 1rem; width: 390px; }
.data { font-size: 1.1rem; margin: .3rem 0 0 0; color: var(--cor-texto-secundaria);  }
.data-futuro { color: var(--cor-texto-primaria); }
.detalhe { font-size: 1.1rem; margin: 0!important; }

a.ferramentas,
a.cursos { color: var(--cor-padrao); text-decoration: none; border-bottom: none; display: block; padding: .5rem .2rem 0 .2rem; }
a.ferramentas:hover,
a.cursos:hover { color: var(--cor-link-destaque); background-color: transparent; padding: .5rem .2rem 0 .2rem; border-bottom: none; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .125rem; }
a.ferramentas:focus,
a.cursos:focus { color: var(--cor-link-destaque); background-color: transparent; padding: .5rem .2rem 0 .2rem; border-bottom: none; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .125rem; }

div.ferramenta-futuro { margin-top: .5rem; width: 98%; }
div.curso-futuro { margin-top: .5rem; width: 98%; }

div.ferramenta-futuro img { filter: grayscale(1); opacity: 0.5; }
div.curso-futuro img { filter: grayscale(1); opacity: 0.5; }


/* modal */
.modaal-content-container { padding: 2rem; }
.modaal-container { border-radius: 30px; }
.modaal-container .quad-destaque { background: linear-gradient(0deg, rgba(255,229,188,1) 13%, rgba(255,248,233,1) 81%); padding: 1rem 2rem; border-radius: 20px; }

.modaal-container ol { padding: .4rem .8rem 0 .8rem; margin-bottom: 0; border-radius: 15px; }
.modaal-container ol li { margin-bottom: .4rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--cor-outline-padrao); font-size: 1.1rem; line-height: 1.4rem; }
.modaal-container ol li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.modaal-container h3 { padding-top: 0; }
.modaal-container .destaque { color: var(--cor-secundaria); font-size: 1.2rem; }
.modaal-container .destaque-block { border-left: 10px solid var(--cor-bg-primaria); padding: 0 0 0 12px; color: var(--cor-texto-secundaria); }

/* Modal Geral */
.modaal-content-container .modal-geral  { padding: 0 0 0 1rem!important; margin: -1rem 1rem 0 -.5rem!important; }
.modal-geral .modaal-container ul li { margin-bottom: .8rem!important; }
.modaal-content-container .modal-geral .destaque-block { border-left: 10px solid var(--cor-padrao)!important; padding: 0 0 0 12px!important; color: var(--cor-texto-secundaria)!important; }
.modal-geral .modaal-container ol,
.modal-geral .modaal-container ul { padding-left: 0!important; list-style: none!important; }
.modal-geral h4 { font-size: 1.6rem; font-weight: 700; line-height: 1.6rem; padding: 1rem 0; color: var(--cor-texto-primaria); }
.modal-geral ul { padding-left: 0!important; }
.modal-geral ul li { background-image: url(../img/seta-preta.svg); background-repeat: no-repeat; background-size: 13px; background-position-y: 8px!important; background-position: left; padding: 0 0 0 1.3rem; margin-bottom: .3rem; font-size: 1.2rem; line-height: 1.6rem; }

/* HERO */
.hero-home { outline: .2rem dotted var(--cor-outline-secundaria); outline-offset: .3rem; background: var(--cor-bg-secundaria); margin: 2rem -5rem 0 -5rem; padding: 1.5rem 8rem; }
.hero-home img.destaque { position: absolute; top: 3.6rem; }

.hero { outline: .2rem dotted var(--cor-outline-secundaria); outline-offset: .3rem; background: var(--cor-bg-secundaria); margin: 2rem -5rem 0 -5rem; padding: 1.5rem 8rem; transform: rotateZ(-1deg); }
.hero img.destaque { position: absolute; transform: rotateZ(3deg); top: -2.3rem; }

.hero-curso { outline: .2rem dashed var(--cor-outline-curso); outline-offset: .3rem; background: var(--cor-bg-curso); margin: 2rem -5rem 0 -5rem; padding: 1.5rem 8rem .5rem 8rem; transform: rotateZ(-.5deg); }
.hero-curso img.destaque { position: absolute; transform: rotateZ(2deg); top: -2.3rem; margin-left: -8rem; }

.hero-geral { outline: .2rem dotted var(--cor-outline-secundaria); outline-offset: .3rem; background: var(--cor-bg-secundaria); margin: .5rem -5rem 0 -5rem; padding: 1rem 8rem; }
.hero-geral img.destaque { position: absolute; top: 1rem; }
.hero-geral h1 small { font-size: 2.2rem; }

.hero p, .hero h1,
.hero-geral p, .hero-geral h1,
.hero-home p, .hero-home h1,
.hero-curso p, .hero-curso h1 { color: var(--cor-texto-destaque); }

body#desafios .hero-geral img.destaque { position: absolute; top: 3.2rem; z-index: 1; }

.sala { font-family: 'Square Peg', sans-serif; font-size: 2.2rem!important; margin: -2.3rem 0 1rem 0; color: var(--cor-bg-destaque)!important; }
.sala-curso { font-family: 'Square Peg', sans-serif; font-size: 5rem!important; margin: -1.3rem 0 .5rem 0; color: var(--cor-bg-destaque)!important; }

/* Download / Cadastro */
.download { margin: 1rem -1.5rem; padding: .5rem .5rem 1rem .5rem; border-left: 15px solid var(--cor-outline-secundaria); background-color: var(--cor-bg-secundaria); color: var(--cor-texto-destaque); }
.cadastro { margin: 1rem -1.5rem; padding: .5rem .5rem 1rem .5rem; background-color: #240e20; border-radius: 10rem; color: var(--cor-texto-destaque); }

.download h2, .cadastro h3 { color: var(--cor-texto-destaque); }
.cadastro h3.destaque { color: #e8c95b!important; }
.download p.destaque, .cadastro p.destaque { font-weight: 700; color: var(--cor-texto-importante); }

ol.instrucoes-download li:before { color: var(--cor-bg-destaque); }
ol.instrucoes-download { margin-top: 0!important; }
ol.instrucoes-download { margin-left: 2rem!important; }
ol.instrucoes-download li:last-child { margin-bottom: 0!important; }
ol.instrucoes-download li:before { font-size: 1.4rem; margin: 0 0 0 -2.4rem; }

/* Linha do Tempo */
.linha-tempo {
    display: grid; align-content: center; gap: 2rem; padding: 3rem 0 0 0;
    --cor-tempo-primaria:var(--cor-bg-primaria);
}
ul.linha-tempo-lista {
    --col-gap: 2rem; --row-gap: 2rem; --line-w: 0.25rem; display: grid;
    grid-template-columns: var(--line-w) 1fr; grid-auto-columns: max-content; column-gap: var(--col-gap);
    list-style: none; width: min(60rem, 90%); margin-inline: auto; padding: 0!important;
}
ul.linha-tempo-lista::before { content: ""; grid-column: 1; grid-row: 1 / span 20; background: var(--cor-bg-destaque); border-radius: calc(var(--line-w) / 2); }
ul.linha-tempo-lista li:not(:last-child) { margin-bottom: var(--row-gap); }

ul.linha-tempo-lista li {
    grid-column: 2; --inlineP: 1.5rem; margin-inline: var(--inlineP);
    grid-row: span 2; display: grid; grid-template-rows: min-content min-content min-content; padding: 0!important;
}
ul.linha-tempo-lista li .data {
    --dateH: 3rem; height: var(--dateH); margin-inline: calc(var(--inlineP) * -1);
    text-align: center; background-color: var(--cor-tempo-primaria);
    color: var(--cor-texto-importante); font-size: 1.25rem; font-weight: 700;
    display: grid; place-content: center; position: relative;
    border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}
ul.linha-tempo-lista li .data::before {
    content: ""; width: var(--inlineP); aspect-ratio: 1;
    background: var(--cor-tempo-primaria); background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent); position: absolute; top: 100%;
    clip-path: polygon(0 0, 100% 0, 0 60%); right: 0;
}
ul.linha-tempo-lista li .data::after {
    content: ""; position: absolute; width: 2rem; aspect-ratio: 1;
    background: var(--cor-bg-branco); border: 0.3rem solid var(--cor-tempo-primaria); border-radius: 50%; top: 50%;
    transform: translate(50%, -50%); right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
ul.linha-tempo-lista li .tit,
ul.linha-tempo-lista li .desc { background: var(--cor-bg-branco); position: relative; padding-inline: 1.5rem; }
ul.linha-tempo-lista li .tit { overflow: hidden; padding-block-start: 1.5rem; padding-block-end: 1rem; font-weight: 700; }
ul.linha-tempo-lista li .desc { padding-block-end: 1.5rem; }
ul.linha-tempo-lista li .desc p { font-size: 1.1rem; line-height: 1.4rem; margin-bottom: .5rem; }

ul.linha-tempo-lista li .tit::before,
ul.linha-tempo-lista li .desc::before {
    content: ""; position: absolute; width: 90%; height: 0.5rem;
    background: rgba(0, 0, 0, 0.5); left: 50%; border-radius: 50%;
    filter: blur(4px); transform: translate(-50%, 50%);
}
ul.linha-tempo-lista li .tit::before { bottom: calc(100% + 0.125rem); }
ul.linha-tempo-lista li .desc::before { z-index: -1; bottom: 0.25rem; }

@media (min-width: 50rem) {
    ul.linha-tempo-lista { grid-template-columns: 1fr var(--line-w) 1fr; }
    ul.linha-tempo-lista::before { grid-column: 2; }
    ul.linha-tempo-lista li:nth-child(odd) { grid-column: 1; }
    ul.linha-tempo-lista li:nth-child(even) { grid-column: 3; }
    ul.linha-tempo-lista li:nth-child(2) { grid-row: 2/4; }
    ul.linha-tempo-lista li:nth-child(odd) .data::before { clip-path: polygon(0 0, 100% 0, 100% 60%); left: 0; }
    ul.linha-tempo-lista li:nth-child(odd) .data::after { transform: translate(-50%, -50%); left: calc(100% + var(--col-gap) + var(--line-w) / 2); }
    ul.linha-tempo-lista li:nth-child(odd) .data { border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0; }
}

/* Tabelas - Checklist */

/* Checkbox */
input[type=checkbox],
.quad-destaque-controles input[type=checkbox] {
  position: absolute; left: 0; width: 1px; height: 40px;
  clip: rect(1px, 1px, 1px, 1px);
  margin: 0; padding: 0; border: 0 !important; overflow: hidden;
  transition: all .5s ease-in-out;
}

input[type=checkbox]+label,
.quad-destaque-controles input[type=checkbox]+label {
  cursor: pointer;
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr; align-items: center;
  background-position: 10% center;
  padding: .3rem 2rem .5rem 0; margin: 0; width: 100%; color: var(--cor-primaria);
}

input[type="checkbox"]+label:before {
  content: '';
  color: var(--cor-bg-branco); display: block; position: relative; border-radius: .20rem;
  top: 0; left: 0; justify-self: center; width: 1.75rem; height: 1.75rem;
  background-color: var(--cor-bg-branco); background-repeat: no-repeat; background-position: center center; background-size: 0% 0%;
  transition: .2s; box-shadow: inset 0 0 0 0.3rem var(--cor-bg-secundaria), 0 0 0 0.3rem rgba(35, 35, 35, 0);
}

input[type="checkbox"]+label:hover:before, input[type="checkbox"]:focus+label:before {
  background-color: var(--cor-bg-branco);
  box-shadow:inset 0 0 0 0.325rem var(--cor-bg-primaria), 0 0 0 0.3rem rgba(35, 35, 35, 0.2);
  border-color: var(--cor-outline-secundaria);
  outline: .2rem dashed var(--cor-outline-secundaria); outline-offset: .3rem;
}
input[type="checkbox"]:checked+label:before {
  content: '';
  transition: .2s; box-shadow: inset 0 0 0 0 var(--cor-outline-secundaria), 0 0 0 0 rgba(35, 35, 35, 0.2);
  background-color: var(--cor-outline-secundaria); background-size: 110% 110%;
  background-image: var(--ico-check-branco);
}
input[type="checkbox"]:checked+label:hover:before { box-shadow:inset 0 0 0 0 var(--cor-outline-secundaria),0 0 0 0.3rem rgba(35, 35, 35, 0.2); }
input[type="checkbox"]:active+label:before { box-shadow:inset 0 0 0 0.3rem var(--cor-outline-secundaria),0 0 0 0.75rem rgba(35, 35, 35, 0.4); border-color: var(--cor-outline-secundaria); }

.checklist small { font-size: 1.1rem!important; margin: .4rem 0 0 .6rem; }
.checklist ul.check-item li label.on { text-decoration:line-through; text-decoration-thickness: 0.1rem; color: var(--cor-outline-secundaria); }
ul.check-item { padding: 0!important; }

ul.check-item li { list-style: none; margin: 5px auto; background-image: none; padding: 0; border-bottom: 1px solid rgba(70, 70, 70, 0.2); }
ul.check-item li:last-child { border-bottom: none; }

ul.check-item label { font-size: 1.4rem; }

/* Checkbox - Especial */
.quad-destaque-controles input[type="checkbox"]+label:before {
  content: '';
  color: var(--cor-bg-branco); display: block; position: relative; border-radius: .20rem;
  top: 0; left: 0; justify-self: center; width: 1.75rem; height: 1.75rem;
  background-color: var(--cor-bg-branco); background-repeat: no-repeat; background-position: center center; background-size: 0% 0%;
  transition: .2s; box-shadow: inset 0 0 0 0.3rem var(--cor-especial), 0 0 0 0.3rem rgba(35, 35, 35, 0);
}

.quad-destaque-controles input[type="checkbox"]+label:hover:before, .quad-destaque-controles input[type="checkbox"]:focus+label:before {
    background-color: var(--cor-bg-branco);
    box-shadow:inset 0 0 0 0.325rem var(--cor-especial), 0 0 0 0.3rem rgba(35, 35, 35, 0.2);
    border-color: var(--cor-especial);
    outline: .2rem dashed var(--cor-especial); outline-offset: .3rem;
}
.quad-destaque-controles input[type="checkbox"]:checked+label:before {
    content: ''; transition: .2s; box-shadow: inset 0 0 0 0 var(--cor-especial), 0 0 0 0 rgba(35, 35, 35, 0.2);
    background-color: var(--cor-especial); background-size: 110% 110%; background-image: var(--ico-check-branco);
}
.quad-destaque-controles input[type="checkbox"]:checked+label:hover:before { box-shadow:inset 0 0 0 0 var(--cor-especial),0 0 0 0.3rem rgba(35, 35, 35, 0.2) }
.quad-destaque-controles input[type="checkbox"]:checked:active+label:before { transition:.2s; box-shadow:inset 0 0 0 0 var(--cor-especial), 0 0 0 0.3rem rgba(35, 35, 35, 0.2); border-color: var(--cor-especial); }
.quad-destaque-controles input[type="checkbox"]:active+label:before { box-shadow:inset 0 0 0 0.3rem var(--cor-especial),0 0 0 0.75rem rgba(35, 35, 35, 0.4); border-color: var(--cor-especial); }

/* Checkbox - Especial Filtros */
.quad-destaque-responsaveis input[type="checkbox"]+label:before {
    content: '';
    color: var(--cor-bg-secundaria); display: block; position: relative; border-radius: .20rem;
    top: 0; left: 0; justify-self: center; width: 1.75rem; height: 1.75rem;
    background-color: var(--cor-bg-branco); background-repeat: no-repeat; background-position: center center; background-size: 0% 0%;
    transition: .2s; box-shadow: inset 0 0 0 0.3rem var(--cor-bg-secundaria), 0 0 0 0.3rem rgba(35, 35, 35, 0);
  }
  
  .quad-destaque-responsaveis input[type="checkbox"]+label:hover:before, .quad-destaque-responsaveis input[type="checkbox"]:focus+label:before {
      background-color: var(--cor-bg-destaque);
      box-shadow:inset 0 0 0 0.325rem var(--cor-bg-secundaria), 0 0 0 0.3rem rgba(35, 35, 35, 0.2);
      border-color: var(--cor-bg-secundaria);
      outline: .2rem dashed var(--cor-bg-secundaria); outline-offset: .3rem;
  }
  .quad-destaque-responsaveis input[type="checkbox"]:checked+label:before {
      content: ''; transition: .2s; box-shadow: inset 0 0 0 0 var(--cor-bg-secundaria), 0 0 0 0 rgba(35, 35, 35, 0.2);
      background-color: var(--cor-bg-secundaria); background-size: 110% 110%; background-image: var(--ico-check-branco);
  }
  .quad-destaque-responsaveis input[type="checkbox"]:checked+label:hover:before { box-shadow:inset 0 0 0 0 var(--cor-bg-secundaria),0 0 0 0.3rem rgba(35, 35, 35, 0.2) }
  .quad-destaque-responsaveis input[type="checkbox"]:checked:active+label:before { transition:.2s; box-shadow:inset 0 0 0 0 var(--cor-bg-secundaria), 0 0 0 0.3rem rgba(35, 35, 35, 0.2); border-color: var(--cor-bg-secundaria); }
  .quad-destaque-responsaveis input[type="checkbox"]:active+label:before { box-shadow:inset 0 0 0 0.3rem var(--cor-bg-secundaria),0 0 0 0.75rem rgba(35, 35, 35, 0.4); border-color: var(--cor-bg-secundaria); }

/* Tabela */
.quad-destaque-controles, .quad-destaque-filtros { background-color: rgba(242, 242, 242, 0.5); }
.quad-destaque-filtros p { margin: 0 0 .6rem 0; }
.checklist-filtros .grid-item { padding: .5rem; }

.quad-destaque-responsaveis { border: 1px dashed var(--cor-outline-padrao); padding: 1.5rem 2rem; margin: -1rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--cor-texto-primaria); background-color: rgba(81, 162, 228, 0.5); }
.quad-destaque-responsaveis h3 { font-size: 1.6rem!important; line-height: 1.8rem!important; color: var(--cor-texto-primaria); }
.quad-destaque-responsaveis h4 { font-size: 1.3rem!important; line-height: 1.4rem!important; color: var(--cor-texto-primaria); }
.quad-destaque-responsaveis a { color: var(--cor-link-secundaria); border-bottom: 1px dashed var(--cor-outline-padrao); }
.quad-destaque-responsaveis a:hover { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); }
.quad-destaque-responsaveis a:focus { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); outline: .125rem dashed var(--cor-outline-padrao); }

.checklist ul { padding-left: 0!important; }
.checklist ul li { background-image: url(../img/seta-preta.svg); margin-bottom: 0; }
.checklist ul.check-item li { background-image: none!important; }

.filtro-checklist { font-size: 1.6rem!important; }
.descricao-checklist { font-size: 1.6rem; }

.tabela-margem { margin: 2rem 3rem; }
.tabela-container { margin: 0 auto; max-width: 2440px; }

.tabela-container h3 { color: var(--cor-especial); font-size: 4rem; line-height: 3.6rem; }

.checklist { width: 100%; display: table; border-collapse: collapse; border-spacing: 0; }

.checklist thead { background-color: var(--cor-bg-primaria); border-bottom: 2px solid var(--cor-outline-padrao); color: #fff; }
.checklist td, .checklist th { font-size: 1.2rem; padding: 1rem; text-align: left; vertical-align: middle; }
.checklist thead th { font-size: 1.5rem; font-weight: 700; }
.checklist td[scope="row"] { font-weight: 700; }

.checklist.tborda td, .checklist.tborda th { border: 1px solid #ffc2c2; }
.checklist.tborda tr { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.checklist.tlistra tr { border-bottom: none; }
.checklist.tlistra > tbody > tr:nth-child(odd) { background-color: rgba(242, 242, 242, 0.5); }
.checklist.tlistra > tbody > tr > td { border-radius: 0; }

.tag-classificacao { font-family: monospace; font-size: 1rem; padding: .2rem .5rem; margin: .2rem .3rem; white-space: nowrap; border-radius: 6px; }
.tag-classificacao-app { font-family: 'Work Sans', sans-serif; font-size: 1.2rem; padding: .2rem .2rem; margin: .2rem 0; }
.tag-requisito { color: #fff; background-color: var(--cor-especial); }
.tag-recomendacao { color: #000; background-color: #fae60e; }

.tag-responsavel { font-family: monospace; font-size: 1rem; padding: .2rem .5rem; margin: .2rem .1rem; white-space: nowrap; border-radius: 6px; display: block; text-align: center; }
.tag-negocios { color: #fff; background-color: #d7640d; }
.tag-ui { color: #fff; background-color: #DF1B65; }
.tag-ux { color: #fff; background-color: #057EB2; }
.tag-conteudo { color: #000; background-color: #74c003; }
.tag-dev { color: #fff; background-color: #2f2737; }

.tsombra {
    overflow: auto; max-width: 100%;
    background:
        linear-gradient(to right, #ffc2c2 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #ffc2c2 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat; background-color: #ffc2c2; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-position: 0 0, 100%, 0 0, 100%; background-attachment: local, local, scroll, scroll;
} 
.tsombra:focus-within { outline: .2rem dashed var(--cor-outline-padrao); outline-offset: .3rem; }

th[scope=row] { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; }

.tdestaque { background-color: #51a2e4; color: var(--cor-texto-primaria); font-size: 1.2rem!important; line-height: 1.4rem!important; }
.tresponsavel { background-color: rgba(208, 238, 250, 0.5); }
.tclassificacao { text-align: center!important; }

.txt-info-filtro { background-color: rgba(232, 201, 91, 0.7); text-align: center; font-size: 1.2rem; line-height: 1.4rem; font-weight: 700; padding: .3rem; }
.txt-info-filtro:empty { display: none; }

.tabela-col-item { width: 15%; }
.tabela-col-como { width: 38%; }
.tabela-col-exemplo { width: 5%; }
.tabela-col-desempenho { width: 20%; }
.tabela-col-wcag { width: 6%; }
.tabela-col-abnt { width:6%; }
.tabela-col-area { width: 5%; }
.tabela-col-outros { width: 5%; }


/* Instruções de uso (listas) */
.bg-instrucoes { outline: .1rem dashed var(--cor-outline-secundaria); outline-offset: .3rem; background: rgba(239, 239, 239, 0.6); margin: 2rem -5rem 0 -5rem; padding: 1.5rem 8rem; }

ol.instrucoes-uso { margin-top: 0!important; }
ol.instrucoes-uso { margin-left: 2rem!important; }
ol.instrucoes-uso li { margin-bottom: 3rem!important; }
ol.instrucoes-uso li:last-child { margin-bottom: 0!important; }
ol.instrucoes-uso li:before { font-size: 2rem; margin: 0 0 0 -2.4rem; }

ol.instrucoes-uso-geral { margin-top: 0!important; }
ol.instrucoes-uso-geral { margin-left: 2rem!important; }
ol.instrucoes-uso-geral li { margin-bottom: .8rem!important; }
ol.instrucoes-uso-geral li:last-child { margin-bottom: 0!important; }
ol.instrucoes-uso-geral li:before { font-size: 1.6rem; margin: 0 0 0 -1.8rem; }

/* FAQ */
/* Accordion */
.accordion { width: 100%; margin-top: 2rem; }
.accordion:focus-within { border-color: var(--cor-outline-primaria); }
.accordion button:-moz-focus-inner { border: 0; }
.accordion h3 { padding: 0; }

.accordion-trigger {
    background-color: #ffffff; color: var(--cor-texto-secundaria); display: block;
    font-size: 1.5rem; line-height: 1.7rem; font-weight: 700; cursor: pointer;
    margin: 0; padding: .5rem 4rem .5rem 1.5rem; position: relative; text-align: left; width: 100%; 
    outline-offset: .5rem; transition: outline-offset .2s linear; outline: none; border-style: none;
}
.accordion-trigger:focus,
.accordion-trigger:hover { outline: .1rem dashed var(--cor-outline-secundaria); outline-offset: .3rem; background: #F1FAFF; }
.accordion-trigger:focus { outline: .2rem dashed var(--cor-outline-secundaria); outline-offset: .3rem; }

.accordion dl dt { margin-top: 1rem; }
.accordion dl dt .accordion-trigger { border-radius: 10px; }
.accordion dl dt .accordion-trigger[aria-expanded="true"] { border-radius: 10px 10px 0 0; }

.accordion-title { display: block; padding: 0.25em; outline: none; pointer-events: none; border: transparent 2px solid; }
/*.accordion-trigger:focus .accordion-title { outline: .1rem dashed var(--cor-outline-secundaria); }*/

.accordion-icon:after {
    position: absolute; font-family: "Material Icons"; font-size: 3rem; content: "\e5cf"; right: 0; top: 1.1rem; padding-right: 1rem;
    transition: transform .4s ease; transform: rotate(0); transform-origin: center center; color: var(--cor-bg-primaria);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon:after { transform: rotateX(180deg); }
.accordion-trigger:focus .accordion-icon,
.accordion-trigger:hover .accordion-icon { border-color: var(--cor-bg-primaria); }

.accordion-panel { margin: 0; padding: .5em; background-color: #FFF7F6; border: 1px solid #FFF7F6; border-top: none!important; border-radius: 0 0 10px 10px; }
.accordion-panel[hidden] { display: none;  } /* Edge bug */

.accordion-panel ul li { font-size: 1.3rem; line-height: 1.4rem; color: var(--cor-texto-primaria); margin-bottom: .4rem; }
.accordion-panel ul li > ul { margin-bottom: .8rem; }
.accordion-panel ul li > ul li { font-size: 1.2rem; line-height: 1.4rem; color: var(--cor-texto-destaque); }
.accordion-panel ul li > ul li > ul { margin-top: .2rem; margin-bottom: 0; }
.accordion-panel .content-panel { padding: .5rem 1rem; }

.respostas-faq { padding: .7rem 1.5rem; }


/* Treinamentos */
.logo-tudo-cursos { position: absolute; margin: .2rem 0 0 1.5rem; width: 100px; }

.bg-treinamentos { outline: .1rem dashed var(--cor-outline-secundaria); outline-offset: .3rem; background: rgba(239, 239, 239, 0.6); margin: 0 -5rem .3rem -5rem; padding: 1.5rem 8rem; }
.bg-cursos { background: rgba(239, 239, 239, 0.6); }
.bg-cursos .quad-destaque { color: #066195; background: rgba(240, 251, 255, 0.9); border: none; outline: .2rem dotted #043d5f; outline-offset: .3rem; border-radius: 1rem; padding: 1.5rem 2rem; font-size: 1.2rem; line-height: 1.6rem; position: relative; }
/* /'' oculta a imagem de LT */
.bg-cursos .quad-destaque:before { content: url(../img/tesoura.svg) / ""; width: 45px; display: block; position: relative; left: 380px; top: -50px; }
.bg-cursos .quad-destaque h3 { color: #043d5f!important; margin-top: -2.8rem!important; padding: 0!important; font-size: 3rem!important; font-weight: 700!important; line-height: 3.2rem!important; padding-bottom: 1rem!important; }
.bg-cursos .quad-destaque h3 small { font-size: 1.4rem; }
.bg-cursos .quad-destaque ul,
#desafios .bg-cursos .quad-destaque ul,
#cursos .bg-cursos .quad-destaque ul { padding-left: 0!important; }
.bg-cursos .quad-destaque ul li { background-image: url(../img/seta-preta.svg); margin-bottom: 0; }
.bg-cursos .quad-destaque p { font-size: 1.2rem; line-height: 1.4rem; }
.bg-cursos .quad-destaque .tipo { font-size: 1.7rem; margin: -.5rem 0 1rem 0!important; color: var(--cor-texto-secundaria); font-weight: 700; }
.bg-cursos .quad-destaque .tipo small { font-size: 1.1rem; }
.bg-cursos .quad-destaque .destaque-vagas { display: block; margin: 0!important; padding: .5rem 1rem!important; border-radius: 10px; color: var(--cor-texto-frase); border: 1px dashed var(--cor-outline-padrao); background-color: rgba(255, 213, 0, 0.1); font-weight: 700; }
.vagas-fim { text-decoration:line-through; }
.bg-cursos .quad-destaque p.info { margin-bottom: 0; }
.btn-cursos {
    border-radius: 15px; border: none; font-size: 1rem; font-weight: 700; padding: 0.2rem 1.5rem; line-height: 1.75; cursor: pointer; text-transform: uppercase;
    color: var(--cor-texto-destaque); background-color: #043d5f; outline: .1rem; outline-offset: .5rem;
}
.btn-cursos:hover, .btn-cursos:focus {
    font-size: 1rem; font-weight: 600; padding: 0.5rem 1.5rem; text-decoration: underline;
    color: var(--cor-texto-primaria); border-color: var(--cor-outline-padrao); background-color: #fff3e0;
    outline: 2px; outline-offset: .3rem; /*box-shadow: 0 0 0 0.25rem rgba(164,40,76,.25);*/ box-shadow: none; outline: .1500rem dashed #043d5f;
}
.ninja-cursos { content: url(../img/ninja/ninja-dojo-acao-08.svg); display: inline-block; position: absolute; width: 140px; margin: -2rem 0 0 2rem; }
.info-estrelas { font-size: .9rem!important; line-height: 1.2rem; margin: .7rem 0 0 1.9rem; }
.info-estrelas-geral { font-size: .9rem!important; margin: -.7rem 0 0 0; }

.estrela-ninja { content: url(../img/estrela-ninja.svg); position: absolute; width: 20px; margin: .1rem 0 0 .5rem; animation: rotating 3s linear infinite; }
.estrela-ninja-destaque { content: url(../img/estrela-ninja.svg); position: relative; width: 20px; margin: .1rem .5rem 0 0; animation: rotating 3s linear infinite; }
@keyframes rotating {
    from { transform: rotate(0deg); }
    to {transform: rotate(360deg); }
}

.tag-tipo { margin: 0 0 0 -1rem; }
#cursos .quad-destaque .tag-evento-gratuito { content: url(../img/tag-evento-gratuito.svg); display: inline-block; position: relative; width: 130px; margin: 1rem 0 0 1rem; }
#cursos .quad-destaque .tag-evento-presencial { content: url(../img/tag-evento-presencial.svg); display: inline-block; position: relative; width: 85px; margin: 1rem 0 0 1rem; }
#cursos .quad-destaque .tag-evento-online { content: url(../img/tag-evento-online.svg); display: inline-block; position: relative; width: 58px; margin: 1rem 0 0 1rem; }
.cursos-destaque .tag-evento-gratuito,
.cursos-destaque .tag-evento-gratuito,
.cursos-destaque .tag-evento-presencial,
.cursos-destaque .tag-evento-online { margin: 0 0 0 1rem!important; top: .4rem; }
.tag-view { margin: 0 0 0 2rem!important; }


/* Consultoria */
.bg-consultoria { background: rgba(254, 239, 240, .9); }
.box-consultoria p { margin: .5rem 0 0 0; font-size: 1.1rem; line-height: 1.5rem; }
.quad-detalhe-tudo { border: 1px dashed #240E20; background: rgba(255, 255, 255, 0.4); border-radius: 1rem; padding: 1.5rem 2rem; font-size: 1.2rem; line-height: 1.5rem; }


/* Instruções */
.destaque-instrucoes { padding: .5rem 8rem; }
.destaque-instrucoes h2 { font-size: 1.5rem; line-height: 1.8rem; }

.destaque-instrucoes ul li { background-image: url(../img/seta-rosa.svg); }

.detalhe-oculto { text-decoration: underline; border: 1px dashed var(--cor-outline-secundaria); border-radius: 8px; padding: 1.2rem; }
.detalhe-oculto:hover, .detalhe-oculto:focus { color: var(--cor-link-secundaria); background-color: var(--cor-destaque3-suporte); border: 1px solid var(--cor-outline-secundaria); }
.detalhe-oculto[open] { text-decoration: none; border: none; }
.detalhe-oculto[open]:hover, .detalhe-oculto[open]:focus { background-color: transparent; }
.detalhe-oculto > summary { color: var(--cor-bg-secundaria); font-weight: 400; font-size: 1.2rem; }
.detalhe-oculto > summary::marker { font-size: 1.4rem; }

.nota-destaque { color: var(--cor-texto-primaria); background: rgba(254, 239, 240, .3); border: 1px dashed var(--cor-outline-secundaria); border-radius: 1rem; margin: .5rem -2rem 1rem -2rem!important; padding: 1rem 2rem!important; font-size: 1.2rem; line-height: 1.7rem; }
.nota-destaque ul li, .nota-destaque ol li { margin-bottom: 0.6rem!important; }

/* Etiqueta */
.etiqueta { width: 150px; height: 150px; overflow: hidden; position: absolute; }
.etiqueta span { position: absolute; display: block;
width: 225px;
padding: 11px 0;
background-color: #B80A48;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font-weight: 700;
font-size: 18px;
text-transform: uppercase;
text-align: center;
}
.etiqueta:before,
.etiqueta:after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #c40869; }

.etiqueta-tl { top: -15px; left: -15px; }
.etiqueta-tl:before,
.etiqueta-tl:after { border-top-color: transparent; border-left-color: transparent; }
.etiqueta-tl:before { top: 0; right: 0; }
.etiqueta-tl:after { bottom: 0; left: 0; }
.etiqueta-tl span { right: -25px; top: 30px; transform: rotate(-45deg); }

.etiqueta-tr { top: -15px; right: -15px; }
.etiqueta-tr:before,
.etiqueta-tr:after { border-top-color: transparent; border-right-color: transparent; }
.etiqueta-tr:before { top: 0; left: 0; }
.etiqueta-tr:after { bottom: 0; right: 0; }
.etiqueta-tr span { left: -25px; top: 30px; transform: rotate(45deg); }

.etiqueta-titulo { margin-left: 2rem; }

/* PRINCÍPIOS (home) */

hr.separa { border: .1rem dashed var(--cor-outline-secundaria); width: 40%; margin: 3rem auto; }

.bg-principios { background-color:rgba(239, 239, 239, 0.6); }

ul.principios li { margin-bottom: 1.6rem; background-image: url(../img/seta-lilas.svg); }
ul.principios li strong { color: var(--cor-texto-secundaria); font-size: 2.8rem; font-family: 'Square Peg', sans-serif; }
.principio-descricao { font-size: 1.2rem!important; margin-top: .5rem; }

/* ----- FOOTER ----- */
footer { padding: .5rem 3rem!important; }
footer p { color: var(--cor-texto-primaria); margin-bottom: 0; font-size: 1.1rem; line-height: 1.5rem; margin-bottom: .7rem; }
#desafios footer p,
#cursos footer p { color: var(--cor-padrao); }
footer a { color: var(--cor-link-secundaria); text-decoration: none; border-bottom: 1px dashed var(--cor-padrao); }
#desafios footer a,
#cursos footer a { color: var(--cor-padrao); }
footer a:hover { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); padding: 0 .2rem; }
#desafios footer a:hover,
#cursos footer a:hover { color: var(--cor-link-destaque); background-color: var(--cor-padrao); padding: 0 .2rem; }
footer a:focus { color: var(--cor-link-destaque); background-color: var(--cor-bg-secundaria); padding: 0 .2rem; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .125rem; }
#desafios footer a:focus,
#cursos footer a:focus { color: var(--cor-link-destaque); background-color: var(--cor-padrao); padding: 0 .2rem; outline: .125rem dashed var(--cor-outline-secundaria); outline-offset: .125rem; }

footer a.logo { color: var(--cor-link-primaria); 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(--cor-outline-secundaria); outline-offset: .125rem; }

.bg-rodape { background: var(--cor-bg-degrade1); /*background-image: url("../img/bg-topo.jpg"); background-size: cover;*/ }
.borda-rodape { outline: .1rem dashed var(--cor-outline-curso); outline-offset: .2rem; }

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

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

@media (max-width: 1199.98px) {
    .info-no-tablet { display: none!important; }
    .container { max-width: calc(1160px - 1.5rem*2); }

    .grid-container { grid-column-gap: 16px; }

    .container-closed .medium-span-0 { grid-column:span 0; }
    .container-closed .medium-span-1 { grid-column:span 1; }
    .container-closed .medium-span-2 { grid-column:span 2; }
    .container-closed .medium-span-3 { grid-column:span 3; }
    .container-closed .medium-span-4 { grid-column:span 4; }
    .container-closed .medium-span-5 { grid-column:span 5; }
    .container-closed .medium-span-6 { grid-column:span 6; }
    .container-closed .medium-span-7 { grid-column:span 7; }
    .container-closed .medium-span-8 { grid-column:span 8; }
    .container-closed .medium-span-9 { grid-column:span 9; }
    .container-closed .medium-span-10 { grid-column:span 10; }
    .container-closed .medium-span-11 { grid-column:span 11; }
    .container-closed .medium-span-12 { grid-column:span 12; }

    .hero img.destaque { position: relative; transform: rotateZ(3deg); top: 4rem; }

    h1 { font-size: 4.3rem; font-weight: 700; line-height: 4.3rem; }

    .permalink { margin: 1rem 0 0 -2rem; }

    .bg-cursos .quad-destaque:before { left: 290px; }

    .ninja-estudos { position: absolute; max-width: 300px; margin-top: -9rem; margin-left: 19rem; }

    .tdestaque, .tresponsavel { display: none; }
    .tabela-col-item { width: 15%; }
    .tabela-col-como { width: 50%; }
    .tabela-col-exemplo { width: 5%; }
    .tabela-col-desempenho { width: 20%; }
    .tabela-col-wcag { width: 5%; }
    .tabela-col-abnt { width:5%; }
    
}

@media (max-width: 991.98px) {
    .info-large { display: none!important; }
    .info-medium { display: block!important; }
    .no-mobile { display: none!important; }

    .container { max-width: calc(962px - 1.5rem*2); }
    .grid-container { grid-column-gap: 16px; padding: 0.5rem 1.5rem; margin: 0 auto; }

    .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; }

    .no-tablet { display: none!important; }

    nav.menu-principal { position: relative!important; margin: 0!important; border-radius: 20px!important; background-color: rgba(239, 239, 239, 0.2)!important; }
    .seta-menu-ferramentas,
    .seta-menu-cursos,
    .seta-menu-desafios { display: none!important; }

    .box-destaque { border-radius: 3rem; }
    .bg-cursos .quad-destaque:before { left: 440px; }

    h1 { font-size: 4rem; font-weight: 700; line-height: 4rem; }

}

@media (max-width: 767.98px) {
    .info-large, .info-medium, .info-no-mobile { display: none!important; }
    .info-small { display: block!important; }

    .container { max-width: calc(722px - 1.125rem*2); }

    .grid-item { padding: .8rem; }

    .container-closed .small-span-0 { grid-column:span 0; }
    .container-closed .small-span-1 { grid-column:span 1; }
    .container-closed .small-span-2 { grid-column:span 2; }
    .container-closed .small-span-3 { grid-column:span 3; }
    .container-closed .small-span-4 { grid-column:span 4; }
    .container-closed .small-span-5 { grid-column:span 5; }
    .container-closed .small-span-6 { grid-column:span 6; }
    .container-closed .small-span-7 { grid-column:span 7; }
    .container-closed .small-span-8 { grid-column:span 8; }
    .container-closed .small-span-9 { grid-column:span 9; }
    .container-closed .small-span-10 { grid-column:span 10; }
    .container-closed .small-span-11 { grid-column:span 11; }
    .container-closed .small-span-12 { grid-column:span 12; }

    h1, #desafios h1, #cursos h1 { font-size: 3.6rem!important; font-weight: 700; line-height: 3.6rem!important; }
    h2, #desafios h2, #cursos h2 { font-size: 2.6rem!important; font-weight: 700; line-height: 2.8rem!important; }
    h3, #desafios h3, #cursos h3, .bg-cursos .quad-destaque h3 { font-size: 1.8rem!important; font-weight: 700; line-height: 1.7rem!important; }
    h4, #desafios h4, #cursos h4 { font-size: 1.3rem!important; font-weight: 700; line-height: 1.3rem!important; }

    .permalink { margin: .7rem 0 0 -2rem; }

    .no-mobile { display: none!important; }
    .info-medium { display: block!important; }
    .info-mobile { display: block!important; margin-top: 20px; padding: 0 20px; }
    .mobile-center { text-align: center!important; margin: auto!important; }

    .no-mobile-a11y { 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; }

    p { font-size: 1.1rem; margin-bottom: 1rem; }
    p.destaque, .destaque { font-weight: 700; font-size: 1.7rem; }

    .logo-tudo-cursos { margin: .2rem 0 0 1rem; width: 80px; }
    .destaque-instrucoes { padding: 1rem .5rem; }
    .bg-treinamentos { padding: 1rem 4rem; }

    .quad-heuristica, .quad-desafios, .quad-ferramentas, .quad-cursos { width: 370px; min-height: 50px; }
    .bg-cursos .quad-destaque:before { left: 0; transform: scaleX(-1); }
    .bg-cursos .quad-destaque h2 { margin-top: 0; }

    .cadastro { border-radius: 4rem; }

    .hero, .hero-geral, .hero-home { padding: 1.5rem 4rem; }
    .hero-ferramentas h1 { line-height: 2.8rem; }
    .hero-ferramentas h1 small { font-size: 1.8rem; }
    .bg-instrucoes { padding: 1.5rem 5rem; }
}

@media (max-width: 575.98px) {
    body { font-size: .9rem; line-height: 1.5rem; }
    .container { max-width: calc(542px - 1rem*2); }
    .grid-container { padding: 0.5rem 1rem; margin: 0 auto; }
    .grid-item { padding: .5rem; }
    .grid-item p { font-size: 1.2rem; margin-bottom: 1.2rem; }

    .sala-curso { font-family: 'Square Peg', sans-serif; font-size: 3rem!important; margin: -1.3rem 0 .5rem 0; color: var(--cor-bg-destaque)!important; }

    .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; }

    h1, #desafios h1, #cursos h1 { font-size: 2.8rem!important; font-weight: 700; line-height: 2.9rem!important; }
    h2, #desafios h2, #cursos h2 { font-size: 2.2rem!important; font-weight: 700; line-height: 2.3rem!important; }
    h3, #desafios h3, #cursos h3, .bg-cursos .quad-destaque h3 { font-size: 1.6rem!important; font-weight: 700; line-height: 1.6rem!important; }
    h4, #desafios h4, #cursos h4 { font-size: 1.2rem!important; font-weight: 700; line-height: 1.2rem!important; }

    .permalink { margin: .4rem 0 0 -1.5rem; }

    ol, ul { padding-left: .4rem!important; list-style: none; }

    ol.instrucoes-uso li { margin-bottom: 1rem!important; }
    ol.instrucoes-uso li:before { font-size: 1.4rem; margin: 0 0 0 -1.7rem; }

    .descricao-checklist { font-size: 1.4rem; }
    .checklist thead th { font-size: 1.3rem; }
    .checklist td, .checklist th { padding: .3rem 1rem; }
    ul.check-item label { font-size: 1.2rem; line-height: 1.3; }

    .frase { line-height: 1.6rem; }
    blockquote.frase-home p { line-height: 2.2rem; }
    .quad-destaque h2 { font-size: 2rem; line-height: 2.2rem; }
    .heuristicas-all li, #desafios .heuristicas-all li, #cursos .heuristicas-all li,
    .desafios-all li, #desafios .desafios-all li, #cursos .desafios-all li,
    .cursos-all li, #cursos .cursos-all li, #cursos .cursos-all li { margin: 5px auto; }

    .bg-cursos .quad-destaque ul li { padding: .2rem 0 0 1.3rem; }
    .bg-cursos .quad-destaque ul li.last:last-child { padding: 0 0 0 1.3rem; }
    .btn-cursos, .btn-cursos:hover, .btn-cursos:focus { font-size: .7rem; }
    .bg-info-geral { margin: 0; }

    .cadastro { border-radius: 2rem; }

    .btn-mobile, .btn-mobile:hover, .btn-mobile:focus { font-size: .8rem; }

    .accordion-trigger { font-size: 1.3rem; line-height: 1.5rem; }

    blockquote p:before { font-size: 3rem; margin: .2rem 0 0 -1.5rem; }
    blockquote p:after { font-size: 3rem; margin: .8rem 0 0 .3rem; }

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

/* ------------- MEDIA PREFERENCES ------------- */

@media (prefers-reduced-motion) {
    .estrela-ninja,
    .estrela-ninja-destaque { animation: none!important; }
}

/* ------------- PRINT ------------- */
@media print {
    *,
    *:before,
    *:after { background: transparent!important; color: #333!important; -webkit-box-shadow: none!important; box-shadow: none!important; text-shadow: none!important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }

    pre { white-space: pre-wrap!important; }
    pre, blockquote { border: 1px solid #888!important; page-break-inside: avoid; }

    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }

    main p, main ul li, main ol li, footer p { font-size: 0.8rem; }
    cite { font-size: .8rem; font-weight: 700; color:#333!important; }
    h1 { font-size: 2.7rem; }
    h1 span { line-height: .5rem; }
    h1 small { font-size: 1.8rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.2rem; }

    .no-print { display: none; }
    .yes-print { display: block!important; }
    .no-break { break-inside: avoid; }
    .print-margin { margin-top: 0; }
    .print-span { grid-column:span 12; }
    .print-break { page-break-after: avoid; page-break-inside: avoid; }

    .hero { outline: none; outline-offset: none; margin: 0; padding: 0; transform: rotateZ(0); }
    .container, .grid-container { max-width: 100%; }

    input[type="checkbox"] + label:before, input[type="checkbox"] + label:before {
        background-color: #fff;
        box-shadow: inset 0 0 0 0.325rem var(--cor-bg-primaria), 0 0 0 0.3rem rgba(35, 35, 35, 0.2);
        outline-offset: 0.3rem; border-color: #333; outline: .2rem dashed #333; margin-right: .7rem;
    }
    input[type="checkbox"]:checked+label:before { content: 'ok'; }

}