/*
 * Ecos do Passado · tema "A sala do museu" (02/11/2026).
 * Cada caso é uma peça de exposição: parede verde-museu, gesso para ler, latão nas placas.
 * A etiqueta de museu (quando, onde, situação, crédito da ilustração) é a ficha do caso.
 * Elemento-assinatura: a régua do tempo da Home. Design system: sites/ecos-do-passado/design-system/.
 * Todas as medidas e cores vêm dos tokens abaixo.
 */

:root {
    /* Cores (contraste medido em 02/11/2026: o menor par de texto é 4,55:1) */
    --parede: #1C2A25;      /* fundo das faixas escuras: cabeçalho, abertura, rodapé */
    --parede-2: #253630;    /* painel sobre a parede (aviso de cookies, etiqueta da régua no escuro) */
    --gesso: #ECEEE9;       /* fundo de leitura */
    --gesso-2: #E2E6DF;     /* faixa clara de apoio (o método) */
    --tinta: #16201C;       /* texto sobre o gesso (14,3:1) */
    --pedra: #55625B;       /* texto secundário sobre o gesso (5,5:1) */
    --linha: #C6CDC5;       /* fios e bordas sobre o gesso */
    --nevoa: #A9B6AE;       /* texto secundário sobre a parede (7,1:1) */
    --latao: #BE9358;       /* placas e símbolos sobre a parede (5,3:1) */
    --latao-tinta: #7A5626; /* latão como texto ou símbolo sobre o gesso (5,6:1) */
    --fio-parede: rgb(169 182 174 / .28); /* fio sobre a parede */

    /* Tipos: Literata (títulos e texto), Archivo (etiquetas, navegação, formulários) */
    --serifa: 'Literata', Georgia, 'Times New Roman', serif;
    --grotesca: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    /* Escala tipográfica, razão 1,25 */
    --t-2: .8rem;
    --t-1: .875rem;
    --t0: 1rem;
    --t1: 1.25rem;
    --t2: 1.5625rem;
    --t3: 1.953rem;
    --t4: 2.441rem;
    --t5: 3.052rem;
    --t6: 3.815rem;
    --t-leitura: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    --t-titulo: clamp(2.1rem, 1.55rem + 2.4vw, 3.4rem);
    --t-abertura: clamp(2.2rem, 1.35rem + 3.4vw, 3.815rem);

    /* Espaços */
    --e1: .25rem;
    --e2: .5rem;
    --e3: .75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;
    --e8: 4.5rem;
    --e9: 6rem;

    /* Medidas */
    --largura: 76rem;
    --medida: 40rem;         /* coluna de leitura, ~68 caracteres */
    --ilustracao: 70rem;     /* a imagem do caso sai da coluna */
    --borda: 2px;
    --fio: 1px;
    --raio: 2px;
    --glifo: 1rem;
    --glifo-regua: 1.125rem;
    --faixa-altura: 5.5rem;  /* altura de cada faixa da régua */
    --faixa-nome: 10.5rem;   /* coluna do nome da faixa, à esquerda da régua */
    --faixa-passo: 1.15rem;  /* quanto sobe ou desce um ponto que cai junto de outro */
    --etiqueta-largura: 17rem;
    --chip-largura: 12rem;
    --ficha-rotulo: 5.5rem;  /* coluna do rótulo da ficha no celular */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--gesso);
    color: var(--tinta);
    font-family: var(--serifa);
    font-size: var(--t0);
    line-height: 1.55;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: var(--borda) solid var(--latao-tinta); outline-offset: 3px; }
.parede :focus-visible { outline-color: var(--latao); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
    position: absolute; left: var(--e4); top: -10rem; z-index: 50;
    background: var(--latao); color: var(--tinta); padding: var(--e2) var(--e4);
    font-family: var(--grotesca); font-weight: 600;
}
.pular:focus { top: var(--e4); }

.envoltorio { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--e5); }
.envoltorio-texto { width: 100%; max-width: calc(var(--medida) + 2 * var(--e5)); margin-inline: auto; padding-inline: var(--e5); }

/* ---------- Parede (faixas escuras) ---------- */
.parede { background: var(--parede); color: var(--gesso); }
.parede a { color: inherit; }

/* A marca: o símbolo do eco e o nome */
.marca { text-decoration: none; display: inline-flex; align-items: center; gap: var(--e2); color: var(--gesso); }
.marca__eco { flex: none; height: 1.15em; width: auto; font-size: var(--t2); }
.marca__nome {
    font-family: var(--serifa);
    font-style: italic;
    font-weight: 600;
    font-size: var(--t2);
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Cabeçalho ---------- */
.cabecalho { font-family: var(--grotesca); }
.cabecalho__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); padding-block: var(--e4); }
.cabecalho__linha--nav { padding-block: 0 var(--e3); gap: var(--e4); }
.idiomas ul, .categorias ul { list-style: none; margin: 0; padding: 0; display: flex; }
.idiomas ul { gap: var(--e4); }
.idiomas a { font-size: var(--t-1); color: var(--nevoa); text-decoration: none; }
.idiomas a[aria-current] { color: var(--gesso); font-weight: 600; text-decoration: underline; text-decoration-color: var(--latao); text-underline-offset: .35em; text-decoration-thickness: var(--borda); }
.idiomas a:hover { color: var(--gesso); }
.idiomas__codigo { display: none; }

.categorias { min-width: 0; }
.categorias ul { gap: var(--e5); overflow-x: auto; scrollbar-width: none; }
.categorias ul::-webkit-scrollbar { display: none; }
.categorias a {
    display: inline-block; padding-block: var(--e2); white-space: nowrap;
    font-size: var(--t0); color: var(--nevoa); text-decoration: none;
    border-bottom: var(--borda) solid transparent;
}
.categorias a:hover { color: var(--gesso); }
.categorias a[aria-current] { color: var(--gesso); border-bottom-color: var(--latao); }
.busca-link { display: inline-flex; align-items: center; gap: var(--e2); color: var(--nevoa); text-decoration: none; font-size: var(--t-1); white-space: nowrap; }
.busca-link:hover, .busca-link[aria-current] { color: var(--gesso); }
.icone { width: var(--glifo); height: var(--glifo); flex: none; }

/* ---------- Abertura (Home e topo das listas) ---------- */
.abertura { padding-block: var(--e7) var(--e8); }
.abertura__titulo {
    font-family: var(--serifa); font-weight: 400; font-size: var(--t-abertura);
    line-height: 1.04; letter-spacing: -.018em; max-width: 19ch; margin: 0;
}
.abertura__texto { font-size: var(--t1); line-height: 1.5; color: var(--nevoa); max-width: 36rem; margin: var(--e5) 0 0; }
.abertura--lista { padding-block: var(--e6) var(--e7); }
.abertura--lista .abertura__titulo { font-size: var(--t-titulo); }
.link-claro { font-family: var(--grotesca); color: var(--gesso); text-underline-offset: .25em; text-decoration-color: var(--latao); }

/* ---------- Situação do caso (o símbolo) ---------- */
.situacao { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.glifo { width: var(--glifo); height: var(--glifo); flex: none; color: var(--latao-tinta); }
.parede .glifo { color: var(--latao); }

/* ---------- A régua do tempo ---------- */
.regua { margin-top: var(--e8); font-family: var(--grotesca); }
.regua__topo { display: grid; gap: var(--e3) var(--e7); grid-template-columns: minmax(0, 1fr); }
.regua__topo h2 { font-family: var(--serifa); font-weight: 600; font-size: var(--t2); margin: 0; }
.regua__topo p { margin: 0; color: var(--nevoa); max-width: 34rem; }
.legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-1); color: var(--nevoa); }
.regua__dica { display: none; margin: var(--e4) 0 0; font-size: var(--t-1); color: var(--nevoa); }

.regua__area { position: relative; margin-top: var(--e6); padding-bottom: var(--e6); }
.faixa { position: relative; display: grid; grid-template-columns: var(--faixa-nome) minmax(0, 1fr); align-items: center; }
.faixa + .faixa { border-top: var(--fio) solid var(--fio-parede); }
.faixa__nome {
    padding-right: var(--e4); padding-top: var(--e3);
    font-size: var(--t-1); line-height: 1.3; color: var(--nevoa); text-decoration: none;
}
.faixa__nome:hover { color: var(--gesso); text-decoration: underline; text-decoration-color: var(--latao); }
.faixa__linha { list-style: none; margin: 0; padding: 0; position: relative; height: var(--faixa-altura); }
.faixa__linha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 60%;
    border-top: var(--fio) solid var(--fio-parede);
}
.marco {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(60% + var(--linha) * var(--faixa-passo));
    transform: translate(-50%, -50%);
}
.marco__ponto {
    display: grid; place-items: center;
    width: calc(var(--glifo-regua) + var(--e3)); height: calc(var(--glifo-regua) + var(--e3));
    color: var(--latao); text-decoration: none; border-radius: 50%;
}
.marco__ponto .glifo { width: var(--glifo-regua); height: var(--glifo-regua); color: var(--latao); }
.marco__ponto:hover .glifo, .marco__ponto:focus-visible .glifo { color: var(--gesso); }
.marco__etiqueta {
    display: none; position: absolute; bottom: calc(100% + var(--e2)); left: calc(-1 * var(--e3));
    width: var(--etiqueta-largura); padding: var(--e3) var(--e4);
    background: var(--gesso); color: var(--tinta); border-top: var(--borda) solid var(--latao);
    text-align: left; z-index: 5;
}
.marco--direita .marco__etiqueta { left: auto; right: calc(-1 * var(--e3)); }
.marco__ponto:hover .marco__etiqueta, .marco__ponto:focus-visible .marco__etiqueta { display: block; }
.marco__titulo { display: block; font-family: var(--serifa); font-weight: 600; font-size: var(--t0); line-height: 1.25; }
.marco__linha { display: block; margin-top: var(--e1); font-size: var(--t-2); color: var(--pedra); }

.eixo { position: relative; height: var(--e5); margin-left: var(--faixa-nome); border-top: var(--fio) solid var(--nevoa); }
.eixo__marca {
    position: absolute; left: calc(var(--x) * 1%); top: 0;
    transform: translateX(-50%); padding-top: var(--e2);
    font-size: var(--t-2); color: var(--nevoa); white-space: nowrap;
}
.eixo__marca::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--e2)); height: var(--e2); border-left: var(--fio) solid var(--nevoa); }
.eixo__marca:first-child { transform: none; }
.eixo__marca:last-child { transform: translateX(-100%); }

/* ---------- Salas (seções de casos) ---------- */
.sala { padding-block: var(--e8); }
.sala + .sala { padding-top: 0; }
.sala__topo { display: grid; gap: var(--e2); margin-bottom: var(--e6); max-width: 46rem; }
.sala__topo h2 { font-family: var(--serifa); font-weight: 600; font-size: var(--t3); line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.sala__topo h2 a { text-decoration: none; }
.sala__topo h2 a:hover { text-decoration: underline; text-decoration-color: var(--latao-tinta); text-decoration-thickness: var(--borda); text-underline-offset: .15em; }
.sala__topo p { margin: 0; color: var(--pedra); font-size: var(--t1); line-height: 1.45; }
.sala__mais { margin: var(--e6) 0 0; font-family: var(--grotesca); }
.sala__mais a { color: var(--tinta); text-underline-offset: .25em; text-decoration-color: var(--latao-tinta); text-decoration-thickness: var(--borda); }
.sala--parede { padding-block: var(--e8); }
.sala--parede .sala__topo p, .sala--parede .etiqueta { color: var(--nevoa); }

.grade { display: grid; gap: var(--e7) var(--e6); grid-template-columns: minmax(0, 1fr); }

/* ---------- Cartão do caso ---------- */
.cartao { display: grid; gap: var(--e4); align-content: start; }
.cartao__texto { display: grid; gap: var(--e2); align-content: start; }
.cartao__imagem { display: block; overflow: hidden; background: var(--parede); }
.cartao__imagem img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cartao__titulo { font-family: var(--serifa); font-weight: 600; font-size: var(--t1); line-height: 1.2; letter-spacing: -.005em; margin: 0; }
.cartao__titulo a { text-decoration: none; }
.cartao__titulo a:hover, .cartao__titulo a:focus-visible { text-decoration: underline; text-decoration-color: var(--latao-tinta); text-decoration-thickness: var(--borda); text-underline-offset: .15em; }
.parede .cartao__titulo a:hover { text-decoration-color: var(--latao); }
.cartao__resumo { margin: 0; color: var(--pedra); font-size: var(--t1); line-height: 1.5; }
.etiqueta {
    margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4);
    font-family: var(--grotesca); font-size: var(--t-1); color: var(--pedra);
}

/* O caso em destaque: a ilustração grande e a etiqueta ao lado */
.cartao--grande .cartao__titulo { font-size: var(--t4); line-height: 1.06; letter-spacing: -.015em; }
.cartao--grande .cartao__texto { display: grid; gap: var(--e4); align-content: center; }

/* ---------- O caso (artigo) ---------- */
.caso__topo { padding-top: var(--e6); }
.migalhas ol { list-style: none; margin: 0 0 var(--e5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); font-family: var(--grotesca); font-size: var(--t-1); color: var(--pedra); }
.migalhas li + li::before { content: "/"; margin-right: var(--e2); color: var(--linha); }
.migalhas a { color: var(--pedra); text-underline-offset: .2em; }
.migalhas li:has([aria-current]) { display: none; } /* a página atual é o próprio título */
.parede .migalhas ol, .parede .migalhas a { color: var(--nevoa); }
.parede .migalhas li + li::before { color: var(--nevoa); }
.caso h1 { font-family: var(--serifa); font-weight: 600; font-size: var(--t-titulo); line-height: 1.07; letter-spacing: -.014em; margin: 0; }
.linha-fina { font-style: italic; font-weight: 300; font-size: var(--t1); line-height: 1.45; color: var(--pedra); margin: var(--e4) 0 0; }

/* A ficha: a etiqueta de museu */
.ficha {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3) var(--e5);
    margin: var(--e6) 0 0; padding: var(--e4) 0;
    border-top: var(--borda) solid var(--tinta); border-bottom: var(--fio) solid var(--linha);
    font-family: var(--grotesca);
}
.ficha div { min-width: 0; display: grid; grid-template-columns: var(--ficha-rotulo) minmax(0, 1fr); gap: var(--e3); align-items: baseline; }
.ficha dt { font-size: var(--t-2); color: var(--pedra); }
.ficha dd { margin: 0; font-size: var(--t0); font-weight: 500; line-height: 1.35; }
.ficha__nota { display: block; margin-top: var(--e1); font-size: var(--t-1); font-weight: 400; color: var(--pedra); }
.assinatura { margin: var(--e4) 0 0; font-family: var(--grotesca); font-size: var(--t-1); color: var(--pedra); }
.assinatura a { color: var(--tinta); text-underline-offset: .2em; }

.caso__ilustracao { max-width: var(--ilustracao); margin: var(--e7) auto 0; padding-inline: 0; }
.caso__ilustracao img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--parede); }
.caso__ilustracao figcaption, .corpo figcaption {
    max-width: calc(var(--medida) + 2 * var(--e5)); margin: var(--e3) auto 0; padding-inline: var(--e5);
    font-family: var(--grotesca); font-size: var(--t-1); line-height: 1.45; color: var(--pedra);
}
.credito { display: block; font-size: var(--t-2); margin-top: var(--e1); }

/* O corpo do texto */
.corpo { font-size: var(--t-leitura); line-height: 1.72; margin-top: var(--e7); }
.corpo > * + * { margin-top: var(--e5); }
.corpo p { margin: 0; }
.corpo > p + p { margin-top: var(--e4); }
.corpo h2 { font-weight: 600; font-size: var(--t3); line-height: 1.15; letter-spacing: -.01em; margin: var(--e7) 0 0; }
.corpo h3 { font-weight: 600; font-size: var(--t1); line-height: 1.3; margin: var(--e6) 0 0; }
.corpo h2 + p, .corpo h3 + p { margin-top: var(--e3); }
.corpo a { color: var(--tinta); text-decoration-color: var(--latao-tinta); text-underline-offset: .18em; text-decoration-thickness: var(--fio); }
.corpo a:hover { text-decoration-thickness: var(--borda); }
.corpo strong, .corpo b { font-weight: 650; }
.corpo ul, .corpo ol { padding-left: var(--e5); margin-bottom: 0; }
.corpo li + li { margin-top: var(--e2); }
.corpo li::marker { color: var(--latao-tinta); }
.corpo blockquote { margin: var(--e6) 0; padding-left: var(--e5); border-left: var(--borda) solid var(--latao-tinta); font-style: italic; color: var(--pedra); }
.corpo figure { margin: var(--e7) calc(-1 * var(--e5)); }
.corpo figure img { width: 100%; }
.corpo figure figcaption { padding-inline: var(--e5); }
.corpo hr { border: 0; border-top: var(--fio) solid var(--linha); margin: var(--e7) 0; }
.table-wrap { overflow-x: auto; }
.corpo table { border-collapse: collapse; font-family: var(--grotesca); font-size: var(--t-1); width: 100%; }
.corpo th, .corpo td { border-bottom: var(--fio) solid var(--linha); padding: var(--e2) var(--e3); text-align: left; }

.caso__fecho { margin-top: var(--e8); padding-bottom: var(--e8); display: grid; gap: var(--e6); font-family: var(--grotesca); }
.fontes { border-top: var(--borda) solid var(--tinta); padding-top: var(--e4); }
.fontes h2, .autor h2 { font-family: var(--serifa); font-weight: 600; font-size: var(--t1); margin: 0 0 var(--e3); }
.fontes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); font-size: var(--t-1); line-height: 1.5; }
.fontes li { padding-left: var(--e4); text-indent: calc(-1 * var(--e4)); }
.fontes__nota, .outros-idiomas { margin: var(--e4) 0 0; font-size: var(--t-1); color: var(--pedra); }
.fontes__nota a, .outros-idiomas a, .autor a { color: var(--tinta); text-underline-offset: .2em; text-decoration-color: var(--latao-tinta); }
.outros-idiomas { margin: 0; }
.autor { border-top: var(--fio) solid var(--linha); padding-top: var(--e4); }
.autor p { margin: 0; font-size: var(--t-1); line-height: 1.55; color: var(--pedra); }

.pagina .corpo { padding-bottom: var(--e8); }

/* ---------- O método (faixa clara) ---------- */
.metodo { background: var(--gesso-2); padding-block: var(--e8); }
.metodo__grade { display: grid; gap: var(--e5) var(--e7); }
.metodo h2 { font-family: var(--serifa); font-weight: 600; font-size: var(--t3); line-height: 1.1; margin: 0; max-width: 14ch; }
.metodo__texto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }
.metodo__texto li { border-top: var(--borda) solid var(--tinta); padding-top: var(--e3); font-size: var(--t1); line-height: 1.45; }
.metodo__texto p { margin: var(--e5) 0 0; font-family: var(--grotesca); }
.metodo__texto a { color: var(--tinta); text-underline-offset: .25em; text-decoration-color: var(--latao-tinta); text-decoration-thickness: var(--borda); }

/* ---------- Busca, formulário, botões ---------- */
.busca label { display: block; font-family: var(--grotesca); font-size: var(--t-1); margin-bottom: var(--e2); }
.busca__campo { display: flex; max-width: 30rem; }
.busca input, .formulario input, .formulario textarea {
    font: inherit; font-family: var(--grotesca); font-size: var(--t0);
    color: var(--tinta); background: var(--gesso);
    border: var(--fio) solid var(--pedra); border-radius: var(--raio);
    padding: var(--e3) var(--e4); width: 100%; min-width: 0;
}
.busca input { border-radius: var(--raio) 0 0 var(--raio); }
.busca button, .botao {
    font-family: var(--grotesca); font-size: var(--t0); font-weight: 600;
    border: 0; border-radius: 0 var(--raio) var(--raio) 0; cursor: pointer;
    padding: var(--e3) var(--e5); background: var(--latao); color: var(--tinta);
}
.botao { border-radius: var(--raio); display: inline-block; text-decoration: none; }
.lendo .botao, .pagina .botao { background: var(--tinta); color: var(--gesso); }
.busca--grande { margin-top: var(--e6); }
.busca--grande .busca__campo { max-width: 36rem; }
.busca__resultado { font-family: var(--grotesca); color: var(--pedra); margin: 0 0 var(--e6); }
.formulario { display: grid; gap: var(--e5); margin-top: var(--e6); }
.campo label { display: block; font-family: var(--grotesca); font-size: var(--t-1); font-weight: 500; margin-bottom: var(--e2); }
.hp { position: absolute; left: -999em; }
.alerta { font-family: var(--grotesca); border-left: var(--borda) solid var(--latao-tinta); padding: var(--e3) var(--e4); background: var(--gesso-2); }
.alerta--erro { border-left-color: var(--tinta); }
.ad-slot { margin-block: var(--e6); }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); margin-top: var(--e8); font-family: var(--grotesca); }
.paginacao a { color: var(--tinta); text-underline-offset: .25em; text-decoration-color: var(--latao-tinta); }
.paginacao__onde { color: var(--pedra); font-size: var(--t-1); }

/* ---------- Rodapé ---------- */
.rodape { padding-block: var(--e8) var(--e6); font-family: var(--grotesca); }
.rodape__grade { display: grid; gap: var(--e6); }
.rodape__marca p { color: var(--nevoa); max-width: 22rem; margin: var(--e4) 0 0; font-family: var(--serifa); }
.rodape h2 { font-size: var(--t-1); font-weight: 600; color: var(--nevoa); margin: 0 0 var(--e3); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.rodape ul a { text-decoration: none; }
.rodape ul a:hover { text-decoration: underline; text-decoration-color: var(--latao); text-underline-offset: .25em; }
.rodape .busca label { color: var(--nevoa); font-weight: 600; }
.rodape__direitos { grid-column: 1 / -1; margin: var(--e6) 0 0; padding-top: var(--e4); border-top: var(--fio) solid var(--fio-parede); color: var(--nevoa); font-size: var(--t-1); }

/* ---------- Aviso de cookies ---------- */
.cookies {
    position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4); z-index: 40;
    max-width: 44rem; margin-inline: auto; padding: var(--e4) var(--e5);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5);
    background: var(--parede-2); color: var(--gesso); border-top: var(--borda) solid var(--latao);
    font-family: var(--grotesca); font-size: var(--t-1);
}
.cookies[hidden] { display: none; } /* o display: flex acima vencia o atributo hidden: o aviso não sumia ao aceitar */
.cookies p { margin: 0; flex: 1 1 20rem; }
.cookies a { color: var(--gesso); text-decoration-color: var(--latao); text-underline-offset: .2em; }
.cookies .botao { background: var(--latao); color: var(--tinta); }
.cookies :focus-visible { outline-color: var(--latao); }

/* ---------- Telas maiores ---------- */
@media (min-width: 40rem) {
    .grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--e4) var(--e5); }
    .ficha div { display: block; }
    .ficha dd { margin-top: var(--e1); }
    .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
    .grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grade--destaque .cartao--grande { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e6); align-items: center; }
    .regua__topo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
    .regua__topo h2 { grid-column: 1; }
    .regua__topo p { grid-column: 1; }
    .legenda { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; align-self: end; }
    .metodo__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
    .metodo__texto ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
    .rodape__grade { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); }
    .cabecalho .marca__nome, .cabecalho .marca__eco { font-size: var(--t3); }
}

/* ---------- Celular: a régua vira três fileiras de casos que se arrastam de lado ---------- */
@media (max-width: 59.99rem) {
    .regua__dica { display: block; }
    .regua__area { margin-top: var(--e4); padding-bottom: 0; }
    .eixo { display: none; }
    .faixa { display: block; padding-top: var(--e5); }
    .faixa + .faixa { border-top: 0; }
    .faixa__nome { display: inline-block; padding: 0; margin-bottom: var(--e2); font-size: var(--t0); color: var(--gesso); }
    .faixa__linha {
        height: auto; display: flex; gap: var(--e3); overflow-x: auto;
        scroll-snap-type: x proximity; padding-bottom: var(--e3);
        margin-inline: calc(-1 * var(--e5)); padding-inline: var(--e5);
        scrollbar-width: thin; scrollbar-color: var(--nevoa) transparent;
    }
    .faixa__linha::before { display: none; }
    .marco { position: static; transform: none; flex: 0 0 var(--chip-largura); scroll-snap-align: start; }
    .marco__ponto {
        width: auto; height: 100%; border-radius: 0; place-items: start; align-content: start; gap: var(--e2);
        padding: var(--e3); background: var(--parede-2); border-top: var(--borda) solid var(--latao);
    }
    .marco__etiqueta { display: block; position: static; width: auto; padding: 0; background: none; color: var(--gesso); border: 0; }
    .marco__linha { color: var(--nevoa); }
    .marco__titulo { font-size: var(--t-1); }
}
@media (max-width: 39.99rem) {
    .idiomas__nome { display: none; }
    .idiomas__codigo { display: inline; text-transform: uppercase; }
    .busca-link span { display: none; }
    .categorias ul { flex-wrap: wrap; gap: 0 var(--e4); overflow: visible; }
    .categorias a { font-size: var(--t-1); padding-block: var(--e1); }
    .caso__ilustracao img { aspect-ratio: 3 / 2; }
    .corpo figure { margin-inline: calc(-1 * var(--e5)); }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}