/* =====================================================================
   Semana em Foco — sistema visual
   1. Tokens          6. Composicao de abertura
   2. Base            7. Cartoes, temas e listas
   3. Utilitarios     8. Guia
   4. Cabecalho       9. Modelos e glossario
   5. Blocos          10. Formularios, rodape, responsivo
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root {
    --papel: #fffcf8;
    --papel-2: #fbf3ea;
    --papel-3: #f6ece1;
    --superficie: #ffffff;

    --tinta: #1c1a20;
    --tinta-2: #494552;
    --tinta-3: #6d6979;
    --linha: #ece4da;
    --linha-forte: #d9cfc3;

    --marca: #f7289f;
    --marca-escura: #ad0d6d;
    --marca-suave: #fde7f3;

    --agenda: #2f4a5c;
    --agenda-suave: #e6eef3;

    --ambar: #b4690e;
    --ambar-suave: #fbf0dc;
    --verde: #2f7a57;
    --verde-suave: #e4f2ea;
    --indigo: #4a49a8;
    --indigo-suave: #e9e9f7;
    --teal: #12736f;
    --teal-suave: #e0f0ef;
    --terra: #b2452f;
    --terra-suave: #fbe9e3;

    --fonte-titulo: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
        Georgia, "Times New Roman", serif;
    --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;

    --largura: 1160px;
    --leitura: 68ch;
    --raio-p: 8px;
    --raio: 14px;
    --raio-g: 22px;

    --sombra-1: 0 1px 2px rgba(28, 26, 32, .05), 0 2px 10px rgba(28, 26, 32, .04);
    --sombra-2: 0 2px 6px rgba(28, 26, 32, .06), 0 14px 34px rgba(28, 26, 32, .07);
    --sombra-3: 0 10px 24px rgba(28, 26, 32, .08), 0 34px 70px rgba(47, 74, 92, .12);

    --transicao: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    /* As peças flutuantes da abertura saem do container de propósito;
       o recorte evita barra de rolagem horizontal sem quebrar o sticky. */
    overflow-x: clip;
    background-color: var(--papel);
    background-image:
        radial-gradient(58rem 34rem at 88% -8%, rgba(247, 40, 159, .07), transparent 70%),
        radial-gradient(46rem 30rem at 4% 2%, rgba(47, 74, 92, .07), transparent 68%);
    background-repeat: no-repeat;
    color: var(--tinta);
    font-family: var(--fonte-texto);
    font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.012em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem); }
h4 { font-size: 1.075rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marca-escura); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tinta); }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

mark { background: #fff0a8; color: inherit; padding: 0 .12em; border-radius: 3px; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }

table { border-collapse: collapse; width: 100%; }

button { font: inherit; }

:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 3. Utilitarios ----------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, .6rem + 2.2vw, 2.25rem);
}

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.salto {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 60;
    background: var(--tinta);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--raio-p) var(--raio-p);
    text-decoration: none;
    transition: top var(--transicao);
}
.salto:focus { top: 0; color: #fff; }

.icone { display: block; width: 1.5rem; height: 1.5rem; flex: none; }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--marca-escura);
    background: var(--marca-suave);
    border-radius: 100px;
    padding: .34rem .72rem;
    margin-bottom: 1rem;
}
.etiqueta--calma { color: var(--agenda); background: var(--agenda-suave); }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent;
    border-radius: 100px;
    padding: .82rem 1.5rem;
    font-weight: 600;
    font-size: .975rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao__icone { width: 1.15rem; height: 1.15rem; }

.botao--principal {
    background: linear-gradient(160deg, #ff4fb0, var(--marca) 58%, #d9198a);
    color: #fff;
    box-shadow: 0 1px 1px rgba(255, 255, 255, .5) inset, 0 8px 20px rgba(247, 40, 159, .28);
}
.botao--principal:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 1px 1px rgba(255, 255, 255, .5) inset, 0 12px 26px rgba(247, 40, 159, .34);
}

.botao--contorno {
    background: var(--superficie);
    border-color: var(--linha-forte);
    color: var(--tinta);
    box-shadow: var(--sombra-1);
}
.botao--contorno:hover { border-color: var(--agenda); color: var(--tinta); transform: translateY(-2px); }

.botao--calmo {
    background: var(--agenda);
    color: #fff;
    box-shadow: 0 8px 20px rgba(47, 74, 92, .22);
}
.botao--calmo:hover { color: #fff; transform: translateY(-2px); }

.secao { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.secao--papel { background: var(--papel-2); border-block: 1px solid var(--linha); }

.secao__cabecalho { max-width: 58ch; margin-bottom: 2.25rem; }
.secao__titulo { margin-bottom: .5rem; }
.secao__texto { color: var(--tinta-2); margin: 0; }

.secao__cabecalho--linha {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* 4. Cabecalho ------------------------------------------------------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 252, 248, .9);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--linha);
}

.topo__linha {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 4.5rem;
}

.marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--tinta);
    margin-right: auto;
}
.marca__simbolo { width: 2.35rem; height: 2.35rem; object-fit: contain; }
.marca__texto { display: flex; flex-direction: column; }
.marca__nome {
    font-family: var(--fonte-titulo);
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.1;
}
.marca__linha {
    font-size: .705rem;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu__lista {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu__lista li { margin: 0; }
.menu__link {
    display: block;
    padding: .5rem .7rem;
    border-radius: var(--raio-p);
    font-size: .94rem;
    font-weight: 550;
    color: var(--tinta-2);
    text-decoration: none;
    white-space: nowrap;
}
.menu__link:hover { background: var(--papel-3); color: var(--tinta); }
.menu__link--ativo { color: var(--marca-escura); background: var(--marca-suave); }

.busca-topo { display: flex; gap: .4rem; }
.busca-topo__campo {
    width: 12.5rem;
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    background: var(--superficie);
    padding: .5rem .95rem;
    font: inherit;
    font-size: .9rem;
    color: var(--tinta);
}
.busca-topo__campo::placeholder { color: var(--tinta-3); }
.busca-topo__botao {
    border: 0;
    border-radius: 100px;
    background: var(--tinta);
    color: #fff;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.busca-topo__botao:hover { background: var(--marca-escura); }

.menu-botao {
    display: none;
    align-items: center;
    gap: .55rem;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    padding: .5rem .9rem;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
}
.menu-botao__barras {
    position: relative;
    width: 1.05rem;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
}
.menu-botao__barras::before,
.menu-botao__barras::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
}
.menu-botao__barras::before { top: -5px; }
.menu-botao__barras::after { top: 5px; }

/* 5. Blocos gerais --------------------------------------------------- */
.migalhas {
    border-bottom: 1px solid var(--linha);
    background: rgba(251, 243, 234, .6);
    font-size: .875rem;
}
.migalhas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: .8rem 0;
}
.migalhas__item { margin: 0; color: var(--tinta-3); }
.migalhas__item + .migalhas__item::before {
    content: "›";
    margin-right: .5rem;
    color: var(--linha-forte);
}
.migalhas a { color: var(--tinta-2); text-decoration: none; }
.migalhas a:hover { color: var(--marca-escura); text-decoration: underline; }

.abertura {
    position: relative;
    padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
}
.abertura__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.abertura__titulo { margin-bottom: 1rem; }
.abertura__titulo em {
    font-style: normal;
    color: var(--marca-escura);
    background: linear-gradient(transparent 62%, var(--marca-suave) 62%);
}
.abertura__texto {
    font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem);
    color: var(--tinta-2);
    max-width: 46ch;
}
.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.9rem;
}
.abertura__dados {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 2.3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linha);
    list-style: none;
    padding-left: 0;
}
.abertura__dados li { margin: 0; }
.abertura__dados strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--agenda);
}
.abertura__dados span { font-size: .84rem; color: var(--tinta-3); }

/* 6. Composicao de abertura ------------------------------------------ */
.composicao {
    position: relative;
    min-height: 26rem;
    isolation: isolate;
}
.composicao__halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    z-index: -1;
}
.composicao__halo--um {
    inset: 8% -12% 30% 22%;
    background: radial-gradient(circle, rgba(247, 40, 159, .3), transparent 68%);
}
.composicao__halo--dois {
    inset: 40% 30% -6% -10%;
    background: radial-gradient(circle, rgba(47, 74, 92, .26), transparent 66%);
}

.painel-semana {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.15rem 1.25rem 1.4rem;
    box-shadow: var(--sombra-3);
    transform: rotate(-1.6deg);
    background-image: linear-gradient(var(--papel) 0 0);
    background-size: 100% 100%;
}
.painel-semana::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--raio-g) - 6px);
    border: 1px dashed var(--linha);
    pointer-events: none;
}
.painel-semana__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.painel-semana__rotulo {
    font-family: var(--fonte-titulo);
    font-size: .95rem;
    color: var(--agenda);
    letter-spacing: .02em;
}
.painel-semana__pontos { display: flex; gap: .3rem; }
.painel-semana__pontos i {
    width: .42rem; height: .42rem;
    border-radius: 50%;
    background: var(--linha-forte);
}
.painel-semana__grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
}
.coluna-dia { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.coluna-dia__nome {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-3);
    text-align: center;
}
.coluna-dia__pilha {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 1.34rem,
        var(--linha) 1.34rem 1.4rem
    );
    border-radius: var(--raio-p);
    padding: .18rem;
}
.bloco {
    --altura: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--altura) * 1.4rem);
    border-radius: 6px;
    overflow: hidden;
}
.bloco em {
    font-style: normal;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    padding-inline: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bloco--foco { background: linear-gradient(150deg, #3d5f74, var(--agenda)); }
.bloco--rotina { background: var(--agenda-suave); }
.bloco--casa { background: linear-gradient(150deg, #3d8f68, var(--verde)); }
.bloco--revisao { background: linear-gradient(150deg, #ff4fb0, var(--marca)); }
.bloco--plano { background: linear-gradient(150deg, #d98d2a, var(--ambar)); }
.bloco--livre { background: transparent; }

.peca {
    position: absolute;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    padding: .85rem 1rem;
}
.peca--prioridades {
    right: -4%;
    bottom: -8%;
    width: 14.5rem;
    transform: rotate(2deg);
}
.peca__titulo {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    margin-bottom: .5rem;
    color: var(--tinta);
}
.peca__lista { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--tinta-2); }
.peca__lista li { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.peca__marca {
    width: .95rem; height: .95rem;
    border: 1.5px solid var(--linha-forte);
    border-radius: 4px;
    flex: none;
}
.peca__marca--feito {
    background: var(--marca);
    border-color: var(--marca);
    position: relative;
}
.peca__marca--feito::after {
    content: "";
    position: absolute;
    left: .24rem; top: .1rem;
    width: .28rem; height: .5rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(42deg);
}
.peca--revisao {
    left: -6%;
    top: 4%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transform: rotate(-3deg);
    background: var(--marca-suave);
    border-color: #f8cbe4;
}
.peca__selo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marca-escura);
}
.peca__frase { font-family: var(--fonte-titulo); font-size: .98rem; color: var(--tinta); }
.peca--tempo {
    left: -3%;
    bottom: 14%;
    display: flex;
    align-items: baseline;
    gap: .35rem;
    background: var(--agenda);
    border-color: var(--agenda);
    transform: rotate(1.5deg);
}
.peca__numero { font-family: var(--fonte-titulo); font-size: 1.55rem; color: #fff; line-height: 1; }
.peca__unidade { font-size: .78rem; color: rgba(255, 255, 255, .82); }

/* 7. Cartoes, temas e listas ----------------------------------------- */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1.4rem;
}

.cartao {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.3rem 1.35rem 1.4rem;
    box-shadow: var(--sombra-1);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
    border-color: var(--linha-forte);
}
.cartao__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.cartao__tema {
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--agenda);
    text-decoration: none;
}
.cartao__tema:hover { color: var(--marca-escura); text-decoration: underline; }
.cartao__titulo { font-size: 1.22rem; margin: 0; line-height: 1.24; }
.cartao__titulo a { color: var(--tinta); text-decoration: none; }
.cartao__titulo a:hover { color: var(--marca-escura); }
.cartao__resumo { color: var(--tinta-2); font-size: .945rem; margin: 0; }
.cartao__meta {
    display: flex;
    gap: .5rem;
    margin: auto 0 0;
    padding-top: .6rem;
    font-size: .81rem;
    color: var(--tinta-3);
}
.cartao--largo { grid-column: span 2; }
.cartao--largo .cartao__titulo { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }

.selo { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--tinta-3); }
.selo__pontos { display: flex; gap: .18rem; }
.selo__ponto {
    width: .34rem; height: .34rem;
    border-radius: 50%;
    background: var(--linha-forte);
}
.selo--iniciante .selo__ponto:nth-child(1) { background: var(--verde); }
.selo--intermediario .selo__ponto:nth-child(-n+2) { background: var(--ambar); }
.selo--avancado .selo__ponto { background: var(--terra); }

.temas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.1rem;
}
.tema {
    --cor: var(--agenda);
    --cor-suave: var(--agenda-suave);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.4rem 1.35rem 1.3rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background:
        linear-gradient(180deg, var(--superficie), var(--superficie)) padding-box,
        linear-gradient(180deg, var(--cor-suave), var(--superficie)) border-box;
    text-decoration: none;
    color: var(--tinta);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.tema::before {
    content: "";
    position: absolute;
    inset: auto -30% -55% 40%;
    height: 9rem;
    background: radial-gradient(circle, var(--cor-suave), transparent 68%);
    opacity: .9;
}
.tema:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); color: var(--tinta); }
.tema__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 12px;
    background: var(--cor-suave);
    color: var(--cor);
    margin-bottom: .35rem;
}
.tema__nome { font-family: var(--fonte-titulo); font-size: 1.17rem; line-height: 1.2; }
.tema__chamada { font-size: .92rem; color: var(--tinta-2); }
.tema__pe {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: auto;
    padding-top: .9rem;
    font-size: .8rem;
    color: var(--tinta-3);
}
.tema__contagem { font-weight: 650; color: var(--cor); }
.tema--azul { --cor: var(--agenda); --cor-suave: var(--agenda-suave); }
.tema--rosa { --cor: var(--marca-escura); --cor-suave: var(--marca-suave); }
.tema--indigo { --cor: var(--indigo); --cor-suave: var(--indigo-suave); }
.tema--verde { --cor: var(--verde); --cor-suave: var(--verde-suave); }
.tema--ambar { --cor: var(--ambar); --cor-suave: var(--ambar-suave); }
.tema--teal { --cor: var(--teal); --cor-suave: var(--teal-suave); }
.tema--terra { --cor: var(--terra); --cor-suave: var(--terra-suave); }
.temas--compacto .tema { padding: 1.1rem; }

/* Trilha (Comece por aqui e home) */
.trilha { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.trilha__item {
    position: relative;
    counter-increment: etapa;
    padding-left: 3.6rem;
    padding-bottom: 2rem;
    margin: 0;
}
.trilha__item::before {
    content: counter(etapa);
    position: absolute;
    left: 0; top: -.1rem;
    display: grid;
    place-items: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    box-shadow: var(--sombra-1);
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    color: var(--marca-escura);
}
.trilha__item::after {
    content: "";
    position: absolute;
    left: 1.25rem; top: 2.7rem; bottom: .4rem;
    border-left: 2px dashed var(--linha-forte);
}
.trilha__item:last-child { padding-bottom: 0; }
.trilha__item:last-child::after { display: none; }
.trilha__titulo { font-size: 1.3rem; margin-bottom: .35rem; }
.trilha__texto { color: var(--tinta-2); }
.trilha__link { font-weight: 600; font-size: .95rem; }

/* Convite para modelos */
.convite-modelos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    background: linear-gradient(150deg, #24394a, var(--agenda) 62%, #1c2f3d);
    border-radius: var(--raio-g);
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.convite-modelos::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 24rem; height: 24rem;
    background: radial-gradient(circle, rgba(247, 40, 159, .28), transparent 65%);
}
.convite-modelos__titulo { color: #fff; }
.convite-modelos__texto { position: relative; }
.convite-modelos__texto p { color: rgba(255, 255, 255, .84); max-width: 44ch; }
.convite-modelos__texto .etiqueta { color: #fff; background: rgba(255, 255, 255, .16); }
.convite-modelos__texto .botao { margin-top: 1.4rem; }
.convite-modelos__lista {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}
.convite-modelos__lista a {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--raio);
    padding: .85rem 1rem;
    color: #fff;
    text-decoration: none;
    transition: background var(--transicao), transform var(--transicao);
}
.convite-modelos__lista a:hover { background: rgba(255, 255, 255, .18); transform: translateX(3px); }
.convite-modelos__lista strong { display: block; font-size: .97rem; font-weight: 600; }
.convite-modelos__lista small { color: rgba(255, 255, 255, .72); font-size: .8rem; }

/* Aviso / destaque editorial */
.nota {
    display: flex;
    gap: 1rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--agenda);
    border-radius: var(--raio-p);
    padding: 1.1rem 1.25rem;
    margin-block: 1.8rem;
}
.nota--atencao { border-left-color: var(--ambar); background: var(--ambar-suave); border-color: #eddcbe; }
.nota--marca { border-left-color: var(--marca); background: var(--marca-suave); border-color: #f8cbe4; }
.nota__titulo {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    margin-bottom: .25rem;
}
.nota p { font-size: .96rem; color: var(--tinta-2); }

/* 8. Guia ------------------------------------------------------------ */
.guia-topo { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) 1.5rem; }
.guia-topo__interno { max-width: 74ch; }
.guia-topo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--tinta-3);
}
.guia-topo__tema {
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .76rem;
    color: var(--marca-escura);
    text-decoration: none;
}
.guia-topo__resumo {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
    color: var(--tinta-2);
    max-width: 60ch;
}
.guia-topo__assinatura {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linha);
    font-size: .85rem;
    color: var(--tinta-3);
}

.guia-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: start;
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.guia-artigo { max-width: var(--leitura); }
.guia-artigo > section { margin-bottom: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); }
.guia-artigo h2 { margin-bottom: .7em; }
.guia-artigo h2 .numero {
    display: inline-block;
    font-size: .62em;
    color: var(--tinta-3);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--fonte-texto);
    font-weight: 650;
    margin-bottom: .2em;
}
.guia-artigo__intro { font-size: 1.08em; }
.guia-artigo__intro p:first-child::first-letter {
    float: left;
    font-family: var(--fonte-titulo);
    font-size: 3.35em;
    line-height: .82;
    padding: .06em .1em 0 0;
    color: var(--marca-escura);
}

.lateral { position: sticky; top: 5.5rem; display: grid; gap: 1.25rem; }

.sumario {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--sombra-1);
}
.sumario__titulo {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-family: var(--fonte-texto);
    font-weight: 700;
    color: var(--tinta-3);
    margin-bottom: .8rem;
}
.sumario__lista { margin: 0; padding-left: 1.2rem; font-size: .92rem; }
.sumario__lista li { margin-bottom: .45rem; }
.sumario__lista a { color: var(--tinta-2); text-decoration: none; }
.sumario__lista a:hover { color: var(--marca-escura); text-decoration: underline; }
.sumario__extra { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--linha-forte); }
.sumario__extra-titulo {
    display: block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: .5rem;
}
.sumario__modelo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--agenda);
}
.sumario__modelo:hover { color: var(--marca-escura); }
.sumario__modelo .icone { width: 1.15rem; height: 1.15rem; }

/* Blocos internos do guia */
.quando {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.quando li {
    background: var(--papel-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    padding: 1rem 1.1rem;
    margin: 0;
}
.quando strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; margin-bottom: .2rem; }
.quando span { font-size: .93rem; color: var(--tinta-2); }

.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passo {
    counter-increment: passo;
    position: relative;
    padding-left: 3.4rem;
    padding-bottom: 2rem;
    margin: 0;
}
.passo::before {
    content: counter(passo);
    position: absolute;
    left: 0; top: 0;
    display: grid;
    place-items: center;
    width: 2.3rem; height: 2.3rem;
    border-radius: 50%;
    background: var(--agenda);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
}
.passo::after {
    content: "";
    position: absolute;
    left: 1.15rem; top: 2.6rem; bottom: .5rem;
    border-left: 2px dotted var(--linha-forte);
}
.passo:last-child { padding-bottom: 0; }
.passo:last-child::after { display: none; }
.passo__titulo { font-size: 1.22rem; margin-bottom: .45rem; }
.passo__dica {
    display: flex;
    gap: .6rem;
    background: var(--marca-suave);
    border-radius: var(--raio-p);
    padding: .7rem .9rem;
    font-size: .92rem;
    color: var(--tinta-2);
    margin-top: .8rem;
}
.passo__dica strong { color: var(--marca-escura); }

.exemplo {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
    box-shadow: var(--sombra-1);
}
.exemplo__contexto {
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--tinta-3);
    margin-bottom: .6rem;
}
.exemplo__titulo { font-size: 1.28rem; }
/* Tabelas largas rolam dentro do proprio bloco em vez de esticar a pagina.
   O tabindex na marcacao garante que a rolagem alcance quem usa teclado. */
.tabela-rolagem {
    margin-top: 1.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabela-rolagem:focus-visible {
    outline: 2px solid var(--agenda);
    outline-offset: 3px;
}

.tabela-semana {
    min-width: 30rem;
    font-size: .92rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    overflow: hidden;
}
.tabela-semana caption {
    caption-side: bottom;
    text-align: left;
    font-size: .82rem;
    color: var(--tinta-3);
    padding-top: .6rem;
}
.tabela-semana th, .tabela-semana td {
    text-align: left;
    padding: .62rem .8rem;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
}
.tabela-semana thead th {
    background: var(--agenda-suave);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--agenda);
}
.tabela-semana tbody th { font-weight: 650; background: var(--papel-2); min-width: 9rem; }
.tabela-semana tr:last-child th, .tabela-semana tr:last-child td { border-bottom: 0; }

.erros { list-style: none; margin: 0; padding: 0; }
.erros li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 1.1rem;
}
.erros li::before {
    content: "";
    position: absolute;
    left: 0; top: .32rem;
    width: 1.3rem; height: 1.3rem;
    border-radius: 50%;
    background: var(--terra-suave);
    border: 1.5px solid var(--terra);
}
.erros li::after {
    content: "";
    position: absolute;
    left: .55rem; top: .6rem;
    width: 2px; height: .55rem;
    background: var(--terra);
    border-radius: 2px;
    box-shadow: 0 .68rem 0 var(--terra);
}
.erros strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; }
.erros span { color: var(--tinta-2); }

.adaptacoes { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.adaptacoes li {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: .4rem 1.2rem;
    padding: .95rem 0;
    border-top: 1px solid var(--linha);
    margin: 0;
}
.adaptacoes li:last-child { border-bottom: 1px solid var(--linha); }
.adaptacoes strong { font-family: var(--fonte-titulo); font-weight: 600; color: var(--agenda); }
.adaptacoes span { color: var(--tinta-2); }

.checklist {
    background: var(--papel-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li {
    position: relative;
    padding-left: 2.15rem;
    margin-bottom: .75rem;
    color: var(--tinta-2);
}
.checklist li::before {
    content: "";
    position: absolute;
    left: 0; top: .28rem;
    width: 1.35rem; height: 1.35rem;
    border: 1.5px solid var(--linha-forte);
    border-radius: 5px;
    background: var(--superficie);
}
.checklist li::after {
    content: "";
    position: absolute;
    left: .43rem; top: .48rem;
    width: .34rem; height: .62rem;
    border-right: 2px solid var(--marca);
    border-bottom: 2px solid var(--marca);
    transform: rotate(42deg);
    opacity: .28;
}

.termos-guia {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.termos-guia a {
    display: inline-block;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    padding: .35rem .85rem;
    font-size: .87rem;
    text-decoration: none;
    color: var(--tinta-2);
}
.termos-guia a:hover { border-color: var(--marca); color: var(--marca-escura); }

.fontes-guia { font-size: .93rem; color: var(--tinta-2); }
.fontes-guia li { margin-bottom: .5rem; }

/* 9. Modelos e glossario --------------------------------------------- */
/* A folha mantem as proporcoes da pagina impressa. Em telas estreitas ela
   rola na horizontal em vez de comprimir as colunas ate ficarem inuteis. */
.folha-envelope__aviso {
    display: none;
    font-size: .85rem;
    color: var(--tinta-3);
    margin: -1.2rem 0 2rem;
}
.folha-envelope:focus-visible {
    outline: 2px solid var(--agenda);
    outline-offset: 4px;
}

@media (max-width: 46rem) {
    .folha-envelope {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .6rem;
    }
    .folha-envelope .modelo-folha {
        min-width: 40rem;
        margin-bottom: 1.2rem;
    }
    .folha-envelope__aviso { display: block; }
}

.modelo-folha {
    background: #fff;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    padding: clamp(1.1rem, .8rem + 1.4vw, 2rem);
    box-shadow: var(--sombra-2);
    margin-bottom: 2rem;
}
.modelo-folha__cabecalho {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--tinta);
    padding-bottom: .8rem;
    margin-bottom: 1.2rem;
}
.modelo-folha__titulo { font-size: 1.4rem; margin: 0; }
.modelo-folha__campo {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    font-size: .85rem;
    color: var(--tinta-3);
}
.modelo-folha__linha {
    display: inline-block;
    width: 8rem;
    border-bottom: 1px solid var(--linha-forte);
}
.folha-grade {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.folha-dia {
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    overflow: hidden;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
}
.folha-dia__nome {
    background: var(--papel-2);
    border-bottom: 1px solid var(--linha-forte);
    padding: .4rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--agenda);
}
.folha-dia__pautas {
    flex: 1;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 1.45rem,
        var(--linha) 1.45rem 1.5rem
    );
}
.folha-linhas {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 1.7rem,
        var(--linha) 1.7rem 1.75rem
    );
    min-height: 8.75rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
}
.folha-caixas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.folha-caixas li {
    display: flex;
    align-items: center;
    gap: .7rem;
    border-bottom: 1px solid var(--linha);
    padding-bottom: .55rem;
    margin: 0;
    font-size: .95rem;
}
.folha-caixas li::before {
    content: "";
    width: 1.15rem; height: 1.15rem;
    border: 1.5px solid var(--tinta-3);
    border-radius: 4px;
    flex: none;
}
.folha-secao { margin-bottom: 1.4rem; }
.folha-secao__titulo {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: var(--fonte-texto);
    font-weight: 700;
    color: var(--tinta-3);
    margin-bottom: .55rem;
}
.folha-tabela { font-size: .9rem; }
.folha-tabela th, .folha-tabela td {
    border: 1px solid var(--linha-forte);
    padding: .5rem .6rem;
    text-align: left;
    height: 2.4rem;
}
.folha-tabela thead th { background: var(--papel-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

.acoes-modelo {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    margin-bottom: 1.6rem;
}
.acoes-modelo__dica { font-size: .88rem; color: var(--tinta-3); }

.glossario-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.glossario-atalhos a {
    display: grid;
    place-items: center;
    min-width: 2.2rem;
    padding: .3rem .5rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    font-weight: 650;
    font-size: .9rem;
    text-decoration: none;
    color: var(--tinta-2);
}
.glossario-atalhos a:hover { border-color: var(--marca); color: var(--marca-escura); }

.glossario-grupo { margin-bottom: 2.5rem; }
.glossario-grupo__letra {
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    color: var(--marca-escura);
    border-bottom: 1px solid var(--linha);
    padding-bottom: .3rem;
    margin-bottom: 1.2rem;
}
.verbete {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--linha-forte);
    scroll-margin-top: 6rem;
}
.verbete:last-child { border-bottom: 0; }
.verbete__termo { font-size: 1.3rem; margin-bottom: .35rem; }
.verbete__sinonimos { font-size: .85rem; color: var(--tinta-3); margin-bottom: .5rem; }
.verbete__definicao { color: var(--tinta-2); }
.verbete__links { font-size: .9rem; margin-top: .6rem; }

/* Paginas de texto institucional */
.texto-longo { max-width: var(--leitura); }
.texto-longo h2 { margin-top: 2.5rem; }
.texto-longo h3 { margin-top: 1.8rem; }
.texto-longo ul, .texto-longo ol { padding-left: 1.4rem; }
.texto-longo li { color: var(--tinta-2); }
.texto-longo dl { margin: 0 0 1.5rem; }
.texto-longo dt { font-weight: 650; margin-top: 1rem; }
.texto-longo dd { margin: .2rem 0 0; color: var(--tinta-2); }

.paginas-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: start;
}
.caixa-lado {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--sombra-1);
    position: sticky;
    top: 5.5rem;
    font-size: .93rem;
}
.caixa-lado h2 {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-family: var(--fonte-texto);
    font-weight: 700;
    color: var(--tinta-3);
}
.caixa-lado ul { list-style: none; padding: 0; margin: 0; }
.caixa-lado li { margin-bottom: .55rem; }

/* 10. Formularios, rodape, responsivo -------------------------------- */
.busca {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.25rem;
    box-shadow: var(--sombra-1);
}
.busca__rotulo {
    display: block;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: .4rem;
}
.busca__caixa {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    background: var(--papel);
    padding: .1rem .75rem;
}
.busca__icone { color: var(--tinta-3); width: 1.2rem; height: 1.2rem; }
.busca__entrada {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .7rem 0;
    font: inherit;
    font-size: .97rem;
    color: var(--tinta);
    min-width: 0;
}
.busca__entrada:focus { outline: none; }
.busca__caixa:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.busca__select {
    width: 100%;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    background: var(--papel);
    padding: .72rem .7rem;
    font: inherit;
    font-size: .95rem;
    color: var(--tinta);
}
.busca__acoes { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.busca__limpar { font-size: .85rem; }

.sugestoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.2rem; }
.sugestoes__rotulo { font-size: .85rem; color: var(--tinta-3); }
.sugestoes a {
    background: var(--papel-2);
    border: 1px solid var(--linha);
    border-radius: 100px;
    padding: .3rem .8rem;
    font-size: .87rem;
    text-decoration: none;
    color: var(--tinta-2);
}
.sugestoes a:hover { border-color: var(--marca); color: var(--marca-escura); }

.resultado-info {
    margin: 2rem 0 1.5rem;
    font-size: .95rem;
    color: var(--tinta-2);
}

.formulario { display: grid; gap: 1.1rem; max-width: 34rem; }
.campo { display: grid; gap: .35rem; }
.campo__rotulo { font-weight: 600; font-size: .95rem; }
.campo__ajuda { font-size: .85rem; color: var(--tinta-3); }
.campo input[type="text"],
.campo input[type="email"],
.campo select,
.campo textarea {
    width: 100%;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    padding: .75rem .85rem;
    font: inherit;
    color: var(--tinta);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-suave);
}
.campo--erro input, .campo--erro textarea, .campo--erro select { border-color: var(--terra); }
.campo__erro { font-size: .87rem; color: var(--terra); font-weight: 600; }
.campo--oculto { position: absolute; left: -9999px; }

.alerta {
    border-radius: var(--raio-p);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
    font-size: .96rem;
}
.alerta--ok { background: var(--verde-suave); border-color: #bfe0cd; color: #1d573c; }
.alerta--erro { background: var(--terra-suave); border-color: #ecc6bb; color: #8c3121; }

.contato-carta {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.45rem 1.55rem 1.55rem;
    box-shadow: var(--sombra-1);
    margin-bottom: 2rem;
    max-width: 36rem;
}
.contato-carta__rotulo {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tinta-3);
    margin: 0 0 .35rem;
}
.contato-carta__endereco {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    margin: 0 0 .7rem;
    word-break: break-word;
}
.contato-carta__endereco a { text-decoration: none; }
.contato-carta__texto { color: var(--tinta-2); margin-bottom: 1.15rem; }

.rodape {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    background: var(--papel-2);
    border-top: 1px solid var(--linha);
}
.rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.rodape__logo { width: 11rem; height: auto; margin-bottom: 1rem; }
.rodape__texto { font-size: .93rem; color: var(--tinta-2); max-width: 40ch; }
.rodape__texto--miudo { font-size: .84rem; color: var(--tinta-3); }
.rodape__titulo {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-family: var(--fonte-texto);
    font-weight: 700;
    color: var(--tinta-3);
    margin-bottom: .9rem;
}
.rodape__lista { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.rodape__lista li { margin-bottom: .5rem; }
.rodape__lista a { color: var(--tinta-2); text-decoration: none; }
.rodape__lista a:hover { color: var(--marca-escura); text-decoration: underline; }
.rodape__base { border-top: 1px solid var(--linha); }
.rodape__base-linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding-block: 1.1rem;
    font-size: .87rem;
    color: var(--tinta-3);
}
.rodape__base-linha p { margin: 0; }

/* Pagina de erro */
.pagina-erro .abertura__grade { grid-template-columns: 1fr; }
.erro-atalhos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }

/* Responsivo --------------------------------------------------------- */
@media (max-width: 1024px) {
    .guia-corpo, .paginas-lado { grid-template-columns: 1fr; }
    .lateral, .caixa-lado { position: static; }
    .lateral { grid-template-columns: 1fr; max-width: 34rem; }
    .abertura__grade { grid-template-columns: 1fr; }
    .composicao { min-height: 22rem; margin-top: 1.5rem; }
    .convite-modelos { grid-template-columns: 1fr; }
    .busca { grid-template-columns: 1fr 1fr; }
    .busca__campo-principal { grid-column: span 2; }
    .busca__acoes { grid-column: span 2; flex-direction: row; justify-content: flex-start; }
}

@media (max-width: 860px) {
    .menu-botao { display: inline-flex; }
    .menu {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        background: var(--papel);
        border-bottom: 1px solid var(--linha);
        box-shadow: var(--sombra-2);
        padding: 1.1rem clamp(1.15rem, .6rem + 2.2vw, 2.25rem) 1.5rem;
    }
    .menu--aberto { display: flex; }
    .menu__lista { flex-direction: column; align-items: stretch; gap: .1rem; }
    .menu__link { padding: .75rem .8rem; font-size: 1rem; }
    .busca-topo__campo { width: 100%; }
    .topo__linha { position: relative; }
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .rodape__marca { grid-column: span 2; }
    .cartao--largo { grid-column: auto; }
    .adaptacoes li { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .composicao { min-height: 19rem; }
    .peca--tempo { display: none; }
    .peca--prioridades { right: 0; bottom: -10%; width: 11.5rem; }
    .peca--revisao { left: 0; top: 0; }
    .painel-semana__grade { gap: .25rem; }
    .coluna-dia__nome { font-size: .6rem; }
    .bloco em { display: none; }
    .busca { grid-template-columns: 1fr; }
    .busca__campo-principal, .busca__acoes { grid-column: auto; }
    .rodape__grade { grid-template-columns: 1fr; }
    .rodape__marca { grid-column: auto; }
    .guia-artigo__intro p:first-child::first-letter { font-size: 2.8em; }
    .abertura__dados { gap: 1.1rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .cartao:hover, .tema:hover, .botao:hover { transform: none; }
}