/* ═══════════════════════════════════════════════════════════════
   LIVRO — o desenho das aulas do Bloco 1
   Feito à imagem de «Explícame la persona», de Ramón Lucas Lucas
   (Edizioni ART, Roma), que é o manual da linha do Regina
   Apostolorum e o modelo que o Thácio escolheu em 30/08/2026.

   O que se copia dali:
   · página de manual, sóbria, sem textura nenhuma;
   · corpo serifado, justificado, com divisão silábica;
   · títulos em letra de imprensa, negrito, numerados (1. · a.);
   · cor com função, nunca decorativa — VERMELHO para o termo que
     abre, para a legenda da figura e para o que se recusa; AZUL
     para a estrutura dos esquemas;
   · desenhos soltos na página, sem moldura, com legenda pequena;
   · a frase-chave dentro de uma caixa de cantos muito redondos.

   Carrega DEPOIS de aula.css, movel.css e velocidade.css e ANTES
   de imprimir.css — @media não acrescenta especificidade, e se
   viesse depois as regras de ecrã venceriam as de papel.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* O livro é papel BRANCO — a folha e a mesa por baixo, as duas,
     sem distinção nenhuma entre elas. */
  --ground:#FFFFFF; --surface:#FFFFFF; --sunk:#F6F5F2;
  --ink:#1A1A18; --ink-soft:#54524C; --ink-faint:#69655A;
  --line:#DEDCD5; --line-soft:#EDEBE5;

  --rubro:#C0402A;  --rubro-fraco:#F6E7E2;   /* o que salta */
  --azul:#2A5CA8;   --azul-fraco:#E6EDF8;    /* a estrutura */
  --clay:#2A5CA8; --clay-strong:#1F4682; --clay-wash:#E6EDF8;
  --p5:#C0402A;

  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--sans);
  --r:3px;
}
/* A aula é uma página de livro, e página de livro é branca.
   Por isso aqui não há paleta escura: mesmo com o sistema em modo
   escuro, a aula abre em branco. O resto do site continua a seguir o
   tema da máquina; só as disciplinas é que não. */

body{background:var(--ground); font-family:var(--sans)}
.wrap{max-width:42rem; counter-reset:fig}

/* ── a capa da disciplina ──
   Um desenho por disciplina, no lugar do selo. É a cara dela: quem chega
   pela Sala reconhece a página antes de ler o título. */
img.capa{display:block; height:120px; width:auto; max-width:100%;
  margin:0 auto .9rem}
@media (max-width:52rem){ img.capa{height:96px} }
@media print{ img.capa{height:70px} }

/* ── cabeça da página ── */
.bar{font-family:var(--sans); font-size:.78rem; letter-spacing:.02em;
  text-transform:none; color:var(--ink-faint);
  border-bottom:1px solid var(--line); padding:.8rem 0}
.bar a:hover{color:var(--rubro)}

header.top{border-bottom:1px solid var(--line); padding:1.8rem 0 1.4rem}
.seal{width:36px; height:36px; color:var(--ink-faint); opacity:.75}
.mark{margin:0; font-family:var(--sans); font-weight:700; font-size:1.95rem;
  line-height:1.16; letter-spacing:-.012em; color:var(--ink)}
.mark em{font-style:normal; color:var(--rubro)}
.tagline{font-family:var(--sans); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:.5rem}
.abre{font-family:var(--serif); font-style:normal; font-size:1.04rem;
  line-height:1.62; color:var(--ink-soft); max-width:32rem; margin-top:1.1rem}

/* ── abas ── */
nav.abas{gap:.1rem; border-bottom:1px solid var(--line); margin:1.4rem 0 1.3rem}
nav.abas button{font-family:var(--sans); font-size:.87rem; font-weight:600;
  color:var(--ink-faint); padding:.5rem .85rem; border-bottom:2.5px solid transparent}
nav.abas button:hover{color:var(--ink)}
nav.abas button[aria-current="true"]{color:var(--rubro); border-bottom-color:var(--rubro)}

/* ── o capítulo ── */
.stack{gap:1.1rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(30,28,24,.04);
  padding:1.7rem 1.6rem 1.9rem; gap:.85rem; counter-reset:sec}
.card h3{font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.card h2{font-family:var(--sans); font-weight:700; font-size:1.62rem;
  line-height:1.2; letter-spacing:-.012em; color:var(--ink); margin-top:-.35rem}
.card h2 .n{display:block; font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.35rem}

/* Os subtítulos numeram-se sozinhos, como no livro: 1. · 2. · 3. */
.card h4{font-family:var(--sans); font-weight:700; font-size:1.1rem;
  line-height:1.35; color:var(--ink); margin:1.35rem 0 -.15rem;
  counter-increment:sec; display:block; background:none; padding:0}
.card h4::before{content:counter(sec) ". "; color:var(--rubro)}
.card h4 .mt{background:none; padding:0}

/* ── o corpo, como página de manual ── */
.read{font-family:var(--serif); font-size:1.045rem; line-height:1.66;
  color:var(--ink); text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  background-image:none; letter-spacing:0}
.read strong{font-weight:700; background:none; color:var(--ink)}
.read em{font-style:italic}

/* ── passos e navegação ── */
.passos button{font-family:var(--sans); font-size:.82rem; font-weight:600;
  padding:.42rem .8rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink-soft); box-shadow:none}
.passos button:hover{border-color:var(--azul); color:var(--ink); background:var(--surface)}
.passos button.on{background:var(--azul-fraco); border-color:var(--azul);
  color:var(--azul); font-weight:700; box-shadow:none}
.passos button.trancado{border-style:dashed; opacity:.45}
.passos .onde{font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.passos .barra i{background:var(--rubro)}
.passos .regra{font-family:var(--sans); font-size:.77rem}

.vaievem{border-top:1px solid var(--line)}
.vaievem button{font-family:var(--serif); font-size:.96rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.vaievem button:hover:not([disabled]){border-color:var(--azul); box-shadow:none}
.vaievem small{font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint)}

/* ── ouvir ── */
.ouvir{background:var(--sunk); border:1px solid var(--line); border-radius:var(--r)}
.ouvir span{font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase}
.veloc b{font-family:var(--sans); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase}
.veloc button{font-family:var(--sans); border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface)}
.veloc button[aria-pressed="true"]{background:var(--azul-fraco);
  border-color:var(--azul); color:var(--azul); font-weight:700}
.estudo button{font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:.28rem .85rem}
.estudo button[aria-pressed="true"]{background:var(--azul-fraco);
  border-color:var(--azul); color:var(--azul)}

/* ── citação ──
   Quando a fonte é de um autor que tem caricatura, a citação passa a balão
   de fala com o rosto dele ao lado. Quem monta isso é o aula.js, que lê o
   nome na referência. */
.fonte{border-left:2.5px solid var(--azul); padding:.1rem 0 .1rem 1rem;
  font-family:var(--serif); font-size:1.01rem; line-height:1.6}
.fonte.com-cara{border-left:0; padding:0; display:grid;
  grid-template-columns:3.6rem 1fr; gap:.9rem; align-items:start; margin:.4rem 0}
.fonte.com-cara .cara{width:3.6rem; height:auto; display:block; margin-top:.2rem}
.fonte.com-cara .bal{position:relative; border:1.3px solid var(--line);
  border-radius:16px; background:var(--sunk); padding:.85rem 1.05rem}
.fonte.com-cara .bal::before, .fonte.com-cara .bal::after{
  content:""; position:absolute; left:-9px; top:1.3rem;
  border:9px solid transparent; border-right-color:var(--line); border-left:0}
.fonte.com-cara .bal::after{left:-7px; border-right-color:var(--sunk)}
@media (max-width:34rem){
  .fonte.com-cara{grid-template-columns:1fr; gap:.5rem}
  .fonte.com-cara .cara{width:3rem}
  .fonte.com-cara .bal::before, .fonte.com-cara .bal::after{display:none}
}
.fonte::before, .fonte::after{content:none}
.fonte .ref{font-family:var(--sans); font-style:normal; font-size:.75rem;
  color:var(--ink-faint); margin-top:.45rem; line-height:1.5}

/* ── a sentença que a disciplina inteira sustenta ──
   Sai da coluna e muda de letra: itálico grande em vermelho para o latim,
   e a tradução por baixo. É a frase que o leitor tem de reconhecer de
   longe quando voltar à página. */
.sentenca{margin:1.7rem auto; max-width:33rem; text-align:center;
  border-top:1.6px solid var(--rubro); border-bottom:1.6px solid var(--rubro);
  padding:1.15rem .9rem 1.2rem}
.sentenca .lat{display:block; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.18rem,3.4vw,1.46rem); line-height:1.34; color:var(--rubro)}
.sentenca .pt{display:block; font-family:var(--serif); font-size:1.04rem; line-height:1.5;
  color:var(--ink); margin-top:.55rem}

/* ── a frase que fica: a caixa de cantos redondos do livro ── */
.chave{background:none; border:1.4px solid var(--rubro); border-radius:30px;
  box-shadow:none; transform:none; padding:1.1rem 1.7rem;
  margin:1.1rem auto; max-width:33rem; text-align:left;
  font-family:var(--serif); font-size:1.02rem; line-height:1.58; color:var(--ink)}
/* No livro a caixa leva uma frase só, e centrada fica bem. Aqui leva um
   parágrafo: centrado, cansa. Centra-se o rótulo, alinha-se o texto. */
.chave b{display:block; text-align:center; font-family:var(--sans);
  font-weight:700; font-size:.92rem; color:var(--rubro); margin-bottom:.45rem}

/* ── advertência ── */
.aviso{background:var(--sunk); border:1px solid var(--line);
  border-left:3px solid var(--rubro); border-radius:var(--r);
  padding:.9rem 1rem; font-family:var(--serif); font-size:.99rem;
  line-height:1.6; color:var(--ink-soft)}
.aviso::before{content:none}
.aviso b{color:var(--rubro); font-weight:700}

/* ── o exercício ── */
.exercicio{border:1px solid var(--line); border-left:3px solid var(--azul);
  border-radius:var(--r); background:var(--sunk); padding:.95rem 1.05rem}
.exercicio b{display:flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:700; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--azul);
  margin-bottom:.4rem}
.exercicio b::before{content:""; flex:0 0 auto; width:1.7rem; height:1.25rem;
  background:url(../img/ic-caderno.webp) center/contain no-repeat}
.exercicio p{font-family:var(--serif); font-size:1rem; line-height:1.58}

/* ── a prova de fim de disciplina ──
   Último passo, depois da síntese. Cada resposta mostra na hora se está
   certa e por quê, porque a prova é para ensinar, e não para pegar. */
.prova{margin-top:.4rem}
.pq{padding:1rem 0 1.1rem; border-top:1px solid var(--line-soft)}
.pq:first-child{border-top:0; padding-top:.2rem}
.pq-p{font-family:var(--serif); font-size:1.04rem; line-height:1.55; color:var(--ink)}
.pq-o{list-style:none; margin:.7rem 0 0; padding:0; display:flex;
  flex-direction:column; gap:.4rem}
.pq-o button{width:100%; text-align:left; font:inherit; font-family:var(--serif);
  font-size:.99rem; line-height:1.45; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1.2px solid var(--line); border-radius:5px;
  padding:.6rem .8rem; transition:border-color .12s, background .12s}
.pq-o button:hover:not(:disabled){border-color:var(--azul); background:var(--azul-fraco)}
.pq-o button:disabled{cursor:default}
.pq-o button.certa{border-color:var(--azul); border-width:2px;
  background:var(--azul-fraco); font-weight:600; padding:calc(.6rem - .8px) calc(.8rem - .8px)}
.pq-o button.errada{border-color:var(--rubro); background:var(--rubro-fraco);
  text-decoration:line-through; color:var(--ink-soft)}
.pq-d{margin-top:.6rem; font-family:var(--sans); font-size:.84rem; line-height:1.55;
  color:var(--ink-soft); border-left:2.5px solid var(--azul); padding-left:.75rem}
.pq-fim{margin-top:1.2rem; padding-top:1rem; border-top:1.4px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem}
.pq-placar{font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--ink)}
.pq-porta{font-family:var(--sans); font-size:.88rem; line-height:1.5;
  color:var(--ink-soft); flex:1 1 16rem}
.prova.passou .pq-placar{color:var(--azul)}
.prova.passou .pq-porta{color:var(--azul); font-weight:600}
.prova.reprovou .pq-placar{color:var(--rubro)}
.pq-refazer{font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  border:1.3px solid var(--azul); border-radius:4px; background:none;
  color:var(--azul); padding:.55rem 1rem}
.pq-refazer:hover{background:var(--azul); color:#fff}
.pq-jafoi{font-family:var(--sans); font-size:.85rem; color:var(--azul);
  background:var(--azul-fraco); border-radius:5px; padding:.6rem .8rem; margin-bottom:.6rem}
/* O cartão da prova é escondido pelo aula.js até se chegar nele, e o
   ficheiro de impressão reabre tudo o que está escondido — com a mesma
   força e depois na cascata. Por isso aqui vai um seletor mais forte. */
@media print{ body .prova, body .pq-jafoi, body .card.sem-papel{display:none !important} }

/* ── as figuras ──
   No livro elas ficam soltas no papel, sem moldura, numeradas de
   corrida, com a legenda em vermelho. O contador é único: esquema,
   cena e desenho entram na mesma série. */
figure.esq, figure.cena, figure.gravura{counter-increment:fig}
figure.esq{background:none; border:0; box-shadow:none; border-radius:0;
  padding:1rem 0 .4rem; margin:.9rem 0}
figure.esq svg{max-width:min(100%,34rem); margin:0 auto}
figure.esq figcaption, figure.cena figcaption, figure.gravura figcaption{
  font-family:var(--sans); font-size:.79rem; line-height:1.55;
  color:var(--ink-faint); border-top:0; padding-top:.55rem; text-align:left}
figure.esq figcaption::before, figure.cena figcaption::before,
figure.gravura figcaption::before{
  content:"Figura " counter(fig) ". "; color:var(--rubro); font-weight:700}
figcaption b{color:var(--ink-soft); font-weight:600}

/* o desenho do esquema: caixas de canto redondo, contorno azul,
   rótulo em maiúsculas azuis, o que se recusa a vermelho */
.esq .rot{font-family:var(--sans); font-size:14px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; fill:var(--azul)}
.esq .nm{font-family:var(--sans); font-size:16px; font-weight:600; fill:var(--ink)}
.esq .nm.sm{font-size:15px}
.esq .med{font-family:var(--sans); font-size:14px; fill:var(--ink-soft)}
.esq .cx{fill:var(--surface); stroke:var(--azul); stroke-width:1.4}
.esq .cx rect{rx:13; ry:13}
.esq .seta{stroke:var(--ink-soft); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.esq .corte{stroke:var(--rubro); stroke-dasharray:5 4; stroke-width:1.5; fill:none}

/* As peças da gramática do livro que faltavam.
   O título dele não é uma etiqueta: são duas linhas, a azul com a tese e
   a vermelha com o porquê. Os ramos são linha de cabelo, não setas
   grossas. E o desenho fecha numa caixa de conclusão a vermelho. */
.esq .tese{font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; fill:var(--azul)}
.esq .porque{font-family:var(--sans); font-size:12.5px; font-weight:400;
  fill:var(--rubro)}
.esq .ram{stroke:var(--ink-faint); stroke-width:1; fill:none}
.esq .peq{font-family:var(--sans); font-size:12px; fill:var(--ink-soft)}
.esq .peq.b{font-weight:700; fill:var(--ink)}
.esq .conc{fill:none; stroke:var(--rubro); stroke-width:1.3}
.esq .conc-t{font-family:var(--sans); font-size:12.5px; font-weight:600;
  fill:var(--rubro)}
.esq .fora{stroke:var(--rubro); stroke-width:2.2; stroke-linecap:round; fill:none}
.esq .corte-t{font-family:var(--sans); font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; fill:var(--rubro)}

figure.cena svg{background:none; border:1px solid var(--line); border-radius:var(--r)}
.cena .fala{font-family:var(--serif); font-style:italic; font-size:15px}
.cena .rot{font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase}

/* Os desenhos passaram a aguarela A COR em 30/08/2026. A mistura por
   multiplicação e a inversão no tema escuro serviam à gravura a preto e
   branco e destroem cor: saem daqui. No escuro o desenho fica sobre a sua
   própria folha branca, como uma estampa colada na página. */
figure.gravura{margin:1.4rem 0 1rem; text-align:center}
figure.gravura img{display:block; margin:0 auto; width:auto;
  max-width:100%; max-height:17rem;
  mix-blend-mode:normal; filter:none}
@media (max-width:52rem){ figure.gravura img{max-height:14rem} }

/* ── termo explicado ──
   O sublinhado pontilhado sozinho passava despercebido. Ganha um sinal de
   interrogação à direita, que é o que diz «há explicação aqui». */
.tec{border-bottom:1.4px dotted var(--rubro)}
.tec::after{content:"?"; display:inline-block; margin-left:.18em;
  width:1.05em; height:1.05em; line-height:1.08em; text-align:center;
  font-family:var(--sans); font-size:.6em; font-weight:700;
  vertical-align:.5em; color:#fff; background:var(--rubro); border-radius:50%}
.tec > .g{border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); font-family:var(--sans); font-size:.83rem;
  box-shadow:0 6px 20px rgba(30,28,24,.14)}
.tec > .g::after{border-top-color:var(--line)}

/* ── rodapé da aula ── */
.livre{border-top:1px solid var(--line)}
.livre a{color:var(--azul); border-bottom-color:var(--line)}
.livre a:hover{border-bottom-color:var(--azul)}
.tl .aut{border-top:1px solid var(--line-soft)}
.tl .nm{font-family:var(--serif); font-size:1.03rem}
.tl .yr{font-family:var(--sans); font-weight:600; color:var(--rubro)}

/* ── ementa ── */
.ident{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ident dt{font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}
.ident dd{font-family:var(--serif); font-size:1rem}
.ementa h3{font-family:var(--sans); font-weight:700; font-size:.98rem;
  letter-spacing:.02em; text-transform:none; color:var(--ink);
  border-bottom:1px solid var(--line); padding:0 0 .3rem; margin:2rem 0 .8rem;
  background:none}
.ementa h3 .mt{background:none; padding:0}
.ementa > p{font-family:var(--serif); font-size:1.03rem; line-height:1.64;
  text-align:justify; hyphens:auto}
.metas li{border-top:1px solid var(--line-soft); font-family:var(--serif); font-size:1rem}
.metas li::before{font-family:var(--sans); font-weight:700; font-size:.68rem;
  border:1px solid var(--azul); color:var(--azul); border-radius:50%; line-height:1.36rem}
.prog li{border-top:1px solid var(--line-soft)}
.prog b{font-family:var(--sans); font-weight:600; font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rubro)}
.prog span{font-family:var(--serif); font-size:1rem}
.bibl li{border-top:1px solid var(--line-soft); font-family:var(--serif); font-size:.96rem}
.bibl li .nota{font-family:var(--sans); font-size:.78rem}

/* ── baixar em PDF ── */
body .baixar button{font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1.1rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink-soft); box-shadow:none}
body .baixar button:hover{border-color:var(--azul); color:var(--azul); background:var(--surface)}
body .baixar small{font-family:var(--serif); font-style:italic; font-size:.79rem}

/* ── no telefone ── */
@media (max-width:52rem){
  .mark{font-size:1.7rem}
  .card{padding:1.25rem 1.1rem 1.4rem}
  .card h2{font-size:1.45rem}
  .card h4{font-size:1.06rem}
  .read{font-size:1.1rem; line-height:1.66}
  .abre{font-size:1.02rem}
  .exercicio p, .chave, .fonte{font-size:1.04rem}
  .chave{padding:1rem 1.2rem; border-radius:24px}
  .sentenca{padding:1rem .7rem 1.05rem}
  .sentenca .pt{font-size:1.02rem}
  figure.esq{padding-left:0; padding-right:0}
}

/* ── no papel ── */
@media print{
  html body{background:#fff}
  body .card{border:0; padding:0; box-shadow:none}
  body .chave{border:1.2px solid #b0402a; border-radius:26px; background:none}
  body .sentenca{border-color:#b0402a}
  body .sentenca .lat{color:#b0402a; font-size:15pt}
  body .exercicio, body .aviso{background:#fbf9f4}
  body .card h4::before{color:#b0402a}
  body figure.esq figcaption::before, body figure.cena figcaption::before,
  body figure.gravura figcaption::before{color:#b0402a}
  body .card h2{font-size:17pt}
  body .card h4{font-size:12.5pt}
  body .exercicio b{font-size:8pt; color:#2a5ca8}
  body .ementa h3{font-size:11.5pt; letter-spacing:.02em}
}

/* ── o monge que caminha ──
   Uma estrada por cima da trilha das aulas, com um marco por passo. O
   monge fica onde a pessoa está e anda quando ela avança. É a mesma
   informação da trilha, dita de outra maneira: quem não lê o rótulo
   «Aula 3 de 6» vê a distância que já andou. */
.estrada{position:relative; height:64px; margin:.2rem 0 .9rem}
.estrada .via{position:absolute; left:0; right:0; bottom:14px; height:3px;
  border-radius:99px; background:var(--line-soft)}
.estrada .via .andado{display:block; height:100%; border-radius:99px;
  background:var(--azul); opacity:.55; transition:width .35s ease}
.estrada .marcos{position:absolute; left:0; right:0; bottom:9px;
  display:flex; justify-content:space-between}
.estrada .marco{width:13px; height:13px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line); cursor:pointer;
  transition:border-color .2s, background .2s}
.estrada .marco.aberto{border-color:var(--azul)}
.estrada .marco.fechado{border-style:dashed; cursor:default; opacity:.6}
.estrada .marco.aqui{background:var(--azul); border-color:var(--azul);
  box-shadow:0 0 0 4px var(--azul-fraco)}
.estrada .monge{position:absolute; bottom:18px; height:52px; width:auto;
  transform:translateX(-50%); transition:left .45s cubic-bezier(.4,.1,.3,1);
  pointer-events:none;
  /* o desenho vem em papel branco e a estrada fica sobre o cinza da
     página: a multiplicação apaga o branco e deixa só o monge */
  mix-blend-mode:multiply}
@media (max-width:52rem){
  .estrada{height:56px}
  .estrada .monge{height:44px}
  .estrada .marco{width:11px; height:11px}
}
@media print{ .estrada{display:none} }