:root {
  --destaque: #2c6e73;
  --topo: #e8efed;
  --destaque-esc: #215459;
  --limao: #d1e751;
  --azul: #1743d6;
  --pausa: #555f56;
  --papel: #f5f1ea;
  --papel-2: #ece6db;
  --cartao: #fffdf9;
  --tinta: #221c1a;
  --tinta-2: #6b625d;
  --linha: #e1d9cc;
  --ok: #2f7a4a;
  --ruim: #b3362f;
  --raio: 14px;
  --sombra: 0 1px 0 rgba(34, 28, 26, .04), 0 6px 18px -10px rgba(34, 28, 26, .25);
  --display: 'Fraunces', Georgia, serif;
  --texto: 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0; font: 15px/1.45 var(--texto); color: var(--tinta);
  background: var(--papel);
  background-image: radial-gradient(circle at 1px 1px, rgba(44, 110, 115, .07) 1px, transparent 0);
  background-size: 22px 22px;
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2.5px solid var(--azul); outline-offset: 2px; border-radius: 6px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.carregando { padding: 40vh 16px 0; text-align: center; color: var(--tinta-2) }
h1, h2, h3 { margin: 0 }

/* ---------- Topo ---------- */
.topo {
  background: var(--destaque); color: #eef6f5;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 0;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(209, 231, 81, .12), transparent 55%);
}
.topo-in, .kpis, .abas { max-width: 1240px; margin: 0 auto }
.topo-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.marca { display: flex; align-items: center; gap: 10px }
.rosa { width: 38px; height: 38px; color: #eef6f5; flex: none }
.marca h1 { font: 600 22px/1.1 var(--display); letter-spacing: -.01em }
.sub { margin: 2px 0 0; font-size: 13px; opacity: .8 }
.topo-acoes { display: flex; gap: 8px; align-items: center }
.sel-sem select {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff;
  border-radius: 999px; padding: 7px 12px; max-width: 46vw;
}
.sel-sem option { color: var(--tinta) }
.btn-claro { background: var(--limao); color: #1f2410; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; white-space: nowrap }
.btn-claro:hover { filter: brightness(1.05) }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 16px; background: rgba(255, 255, 255, .14); border-radius: 12px; overflow: hidden }
.kpis div { background: var(--destaque-esc); padding: 10px 12px }
.kpis dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75 }
.kpis dt span { text-transform: none; letter-spacing: 0; opacity: .8 }
.kpis dd { margin: 2px 0 0; font: 600 26px/1.1 var(--display); font-variant-numeric: tabular-nums }
.kpis dd small { font-size: 15px; opacity: .65 }
.kpis dd.neg { color: #ffb3a8 }
.kpis dd.pos { color: var(--limao) }

.abas { display: flex; gap: 2px; align-items: center; margin-top: 10px; overflow-x: auto; scrollbar-width: none }
.aba { background: none; border: 0; color: #eef6f5; padding: 10px 12px 12px; opacity: .72; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent }
.aba:hover { opacity: 1 }
.aba.on { opacity: 1; border-bottom-color: var(--limao) }
.sync { margin-left: auto; font-size: 12px; opacity: .7; white-space: nowrap; padding-left: 12px }
.sync-offline { color: #ffd2a8; opacity: 1 }

/* ---------- Navegação dos dias ---------- */
.diasnav {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; padding: 10px 16px;
  background: rgba(245, 241, 234, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
  overflow-x: auto; scrollbar-width: none; justify-content: center;
}
.diasnav a {
  flex: none; display: grid; justify-items: center; min-width: 58px; padding: 6px 8px; border-radius: 12px;
  text-decoration: none; color: var(--tinta); border: 1px solid var(--linha); background: var(--cartao); line-height: 1.15;
}
.diasnav b { font-size: 13px }
.diasnav span { font-size: 11px; color: var(--tinta-2) }
.diasnav em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--destaque); font-variant-numeric: tabular-nums }
.diasnav a.hoje { background: var(--destaque); border-color: var(--destaque); color: #fff }
.diasnav a.hoje span, .diasnav a.hoje em { color: #d3e6e3 }
.diasnav a.completo em::after { content: ' ✓' }
.diasnav a.pend { border-style: dashed }

/* ---------- Grade e dias ---------- */
.grade { max-width: 1240px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 22px }
.dias { display: grid; gap: 22px; min-width: 0 }
.dia { scroll-margin-top: 78px; animation: entra .45s both; animation-delay: calc(var(--i) * 50ms) }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } }
.dia-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--tinta) }
.dia-cab h2 { font: 600 24px/1.1 var(--display); letter-spacing: -.015em }
.dia-cab h2 span { color: var(--tinta-2); font-weight: 500; font-size: 18px }
.dia.hoje .dia-cab { border-color: var(--destaque) }
.dia.hoje .dia-cab h2 { color: var(--destaque) }
.selo { font: 700 11px/1 var(--texto); font-style: normal; text-transform: uppercase; letter-spacing: .08em; background: var(--limao); color: #1f2410; padding: 4px 7px; border-radius: 999px; margin-left: 8px; vertical-align: 4px }
.dia-res { margin: 4px 0 0; font-size: 13px; color: var(--tinta-2) }
.dia-res b { color: var(--tinta) }
.dia.passado:not(.hoje) .dia-cab h2 { color: var(--tinta-2) }
.dia-tit { flex: 1; min-width: 0; cursor: pointer }
.dia-tit button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap }
.seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s }
.dia-cab .seta { color: var(--tinta-2); transform: rotate(180deg) }
.dia.fechado .dia-cab .seta { transform: none }
.dia.fechado .dia-cab { margin-bottom: 0 }
.falta { font-style: normal; font-weight: 700; color: var(--ruim) }
.dia-prog { height: 6px; margin-top: 8px; border-radius: 99px; background: var(--papel-2); overflow: hidden }
.dia-prog i { display: block; height: 100%; border-radius: inherit; background: var(--destaque); transition: width .3s }
.dia-prog.ok i { background: var(--ok) }
.dia-fechar { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px; background: none; border: 1px dashed var(--linha); border-radius: 12px; color: var(--tinta-2); font-weight: 600; font-size: 13px }
.dia-fechar:hover { color: var(--tinta); border-color: var(--tinta-2) }
.btn-add { flex: none; border: 1.5px solid var(--tinta); background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px }
.btn-add:hover { background: var(--tinta); color: var(--papel) }

.linha { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.vazio { color: var(--tinta-2); font-size: 14px; padding: 10px 0 }

.folga {
  display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--pausa);
  padding: 2px 4px 2px 18px; position: relative;
}
.folga::before { content: ''; position: absolute; left: 21px; top: -6px; bottom: -6px; border-left: 2px dotted var(--pausa); opacity: .55 }
.folga span { padding-left: 16px; font-variant-numeric: tabular-nums }
.folga b { background: color-mix(in srgb, var(--pausa) 12%, transparent); padding: 2px 8px; border-radius: 999px; font-weight: 600 }

.tarefa {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  background: var(--cartao); border-radius: var(--raio); padding: 12px 14px 12px 12px; box-shadow: var(--sombra);
  border-left: 6px solid var(--cor); position: relative; transition: background .2s;
}
.check {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cor) 78%, #000); background: #fff; color: transparent;
  display: grid; place-items: center; padding: 0; margin-top: 2px; transition: transform .15s, background .15s;
}
.check svg { width: 18px; height: 18px }
.check:hover { transform: scale(1.06); color: color-mix(in srgb, var(--cor) 40%, transparent) }
.feita .check { background: var(--cor); color: var(--txt) }
.feita { background: color-mix(in srgb, var(--cor) 6%, var(--cartao)) }
.feita .nome { color: var(--tinta-2) }
.marcador { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--pausa) 15%, transparent); margin-top: 2px }

.corpo { min-width: 0 }
.l1 { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums }
.hora { font-weight: 700; color: var(--tinta) }
.etq { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px }
.etq.ok { background: #e3f1e6; color: var(--ok) }
.etq.estouro { background: #fbe6e3; color: var(--ruim) }
.nome { font: 600 17px/1.3 var(--texto); margin: 3px 0 6px; overflow-wrap: anywhere }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px }
.tipo, .chip { font-size: 11.5px; font-weight: 700; background: var(--cor); color: var(--txt); padding: 2px 8px; border-radius: 999px }
.tag { font-size: 11.5px; color: var(--tinta-2); border: 1px solid var(--linha); padding: 1px 7px; border-radius: 999px }

.ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.timer {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px 6px 9px;
  background: var(--tinta); color: var(--papel); font-weight: 700; font-size: 13px;
}
.timer svg { width: 15px; height: 15px }
.rodando .timer { background: var(--destaque) }
.relogio { font: 600 18px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 4ch }
.rodando .relogio { color: var(--destaque) }
.rodando::after {
  content: ''; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--destaque);
  animation: pulsa 1.4s infinite;
}
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(44, 110, 115, .5) } 100% { box-shadow: 0 0 0 10px rgba(44, 110, 115, 0) } }

.mais { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px }
.link { background: none; border: 0; padding: 4px 0; color: var(--tinta-2); font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px }
.link:hover { color: var(--tinta); text-decoration-color: currentColor }
.link.perigo:hover { color: var(--ruim) }
.obs {
  width: 100%; margin-top: 8px; border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; resize: vertical;
  background: #fff; font-size: 14px; min-height: 52px;
}

.pausa { background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--pausa) 45%, transparent); border-left: 6px solid var(--pausa); padding: 8px 12px }
.pausa .marcador { width: 22px; height: 22px }
.pausa .nome { font-size: 15px; margin: 0; color: var(--pausa) }
.pausa .mais { margin-top: 2px }

/* ---------- Análise ---------- */
.analise { background: var(--cartao); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); border-top: 5px solid var(--destaque); min-width: 0 }
.analise h2 { font: 600 19px/1.2 var(--display); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--destaque) }
.analise h2 .rosa { width: 24px; height: 24px; color: var(--destaque) }
.analise ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px }
.analise li { position: relative; padding-left: 18px; font-size: 14.5px }
.analise li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50% }
.n-alerta::before { background: var(--ruim) }
.n-atencao::before { background: #d08a1e }
.n-bom::before { background: var(--ok) }
.n-info::before { background: var(--tinta-2) }

/* ---------- Painéis laterais ---------- */
.lado { display: grid; gap: 18px; align-content: start }
.painel { background: var(--cartao); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); scroll-margin-top: 78px }
.painel h2 { font: 600 20px/1.2 var(--display); display: flex; align-items: center; gap: 8px }
.cont { font: 700 12px/1 var(--texto); background: var(--papel-2); padding: 4px 8px; border-radius: 999px }
.nota { color: var(--tinta-2); font-size: 13px; margin: 6px 0 10px }
.pend-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px }
.pend-lista li { border-left: 4px solid var(--cor); padding: 6px 0 6px 10px; display: grid; gap: 6px }
.pend-lista b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3 }
.pend-lista small { color: var(--tinta-2); font-size: 12.5px }
.pend-lista .vazio { border: 0; padding-left: 0 }
.pend-acoes { display: flex; gap: 12px; align-items: center }
.btn-mini { border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--papel); border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 12.5px }
.pend-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; border-top: 1px solid var(--linha); padding-top: 12px }
.pend-form input[name="nome"] { grid-column: 1 / -1 }
.pend-form input, .pend-form select { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; background: #fff; min-width: 0 }
.pend-form .btn-mini { grid-column: 1 / -1; padding: 8px }

/* ---------- Relatórios ---------- */
.relatorio { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 16px }
.card { background: var(--cartao); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); min-width: 0 }
.card h2 { font: 600 20px/1.2 var(--display); margin-bottom: 12px }
.destaque { border-top: 5px solid var(--destaque) }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.numeros b { display: block; font: 600 32px/1.05 var(--display); font-variant-numeric: tabular-nums }
.numeros span { font-size: 13px; color: var(--tinta-2) }
b.neg { color: var(--ruim) }
b.pos { color: var(--ok) }
.grande { font-size: 15px; margin: 0 0 10px }
.grande b { font: 600 30px/1 var(--display); color: var(--destaque); margin-right: 6px }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); font-weight: 600; padding: 0 8px 8px 0 }
.tab td { padding: 9px 8px 9px 0; border-top: 1px solid var(--linha); vertical-align: middle }
.tab td small { display: block; color: var(--tinta-2); font-size: 12.5px }
.tab tr.atual td b { color: var(--destaque) }
.c-desvio { display: flex; align-items: center; gap: 8px; min-width: 150px }
.barra-d { position: relative; flex: 1; height: 10px; background: var(--papel-2); border-radius: 999px; min-width: 70px }
.barra-d::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 2px solid var(--tinta-2) }
.barra-d i { position: absolute; top: 0; bottom: 0; border-radius: 999px }
.barra-d i.neg { background: var(--ruim) }
.barra-d i.pos { background: var(--ok) }
.barra-t { display: inline-block; vertical-align: middle; width: min(160px, 40vw); height: 10px; background: var(--papel-2); border-radius: 999px; overflow: hidden; margin-right: 8px }
.barra-t i { display: block; height: 100%; background: var(--destaque) }
.rel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.rel-lista li { border-left: 4px solid var(--cor); padding: 4px 0 4px 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px }
.rel-lista span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: 13px }
.rel-lista small { color: var(--tinta-2); font-size: 12.5px; width: 100% }
.rel-acoes { display: flex; justify-content: center }

/* ---------- Modais ---------- */
#modal {
  border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  box-shadow: 0 30px 80px -20px rgba(34, 28, 26, .5); background: var(--cartao); color: var(--tinta);
}
#modal::backdrop { background: rgba(34, 28, 26, .45); backdrop-filter: blur(2px) }
.modal-form { padding: 20px; display: grid; gap: 12px }
.modal-form h2 { font: 600 22px/1.2 var(--display) }
.modal-form p { margin: 0 }
.modal-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tinta-2) }
.modal-form input:not([type="checkbox"]):not([type="radio"]), .modal-form select, .modal-form textarea {
  border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 16px; color: var(--tinta); font-weight: 400; width: 100%;
}
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px 12px; margin: 0; min-width: 0 }
legend { font-size: 13px; font-weight: 700; padding: 0 6px }
.tipos { display: flex; flex-wrap: wrap; gap: 6px }
.tipo-op { display: block !important }
.tipo-op input { position: absolute; opacity: 0 }
.tipo-op span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--cor); color: var(--tinta); font-size: 13px; font-weight: 700; cursor: pointer }
.tipo-op input:checked + span { background: var(--cor); color: var(--txt) }
.tipo-op input:focus-visible + span { outline: 2.5px solid var(--azul); outline-offset: 2px }
.chk { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 8px !important; font-weight: 500 !important; color: var(--tinta) !important; font-size: 14px !important }
.chk input { margin-top: 3px; accent-color: var(--destaque); width: 17px; height: 17px; flex: none }
.copiar-lista { display: grid; gap: 10px; max-height: 38dvh; overflow: auto; padding-right: 4px }
.copiar-dia { display: grid; gap: 4px }
.copiar-dia > b { font-size: 13px }
.copiar-dia .chk { border-left: 3px solid var(--cor); padding-left: 8px }
.export { font: 13px/1.5 ui-monospace, Menlo, monospace !important; white-space: pre; overflow: auto }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px }
.btn, .btn-sec { border-radius: 999px; padding: 10px 18px; font-weight: 700; border: 1.5px solid var(--destaque) }
.btn { background: var(--destaque); color: #fff }
.btn:hover { background: var(--destaque-esc) }
.btn-perigo { background: var(--ruim); border-color: var(--ruim) }
.btn-sec { background: transparent; color: var(--destaque) }
.btn-sec[data-m="sugerir"] { justify-self: start; padding: 7px 14px; font-size: 13px }
.erro { color: var(--ruim); font-size: 13px; min-height: 1em; margin: 0 }

#aviso {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); transform: translate(-50%, 20px); opacity: 0;
  background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100vw - 32px);
  transition: .25s; pointer-events: none; z-index: 20;
}
#aviso.on { opacity: 1; transform: translate(-50%, 0) }

.rodape { text-align: center; padding: 0 16px calc(env(safe-area-inset-bottom) + 30px); display: grid; gap: 14px; justify-items: center }
.push { max-width: 520px }
.push .nota { margin: 0 0 6px }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--topo) }
.login-card { background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); border-radius: 20px; padding: 28px 24px; width: min(360px, 100%); display: grid; gap: 12px; text-align: center }
.login-card .rosa { width: 56px; height: 56px; color: var(--destaque); justify-self: center }
.login-card h1 { font: 600 26px/1.1 var(--display); color: var(--destaque) }
.login-card p { margin: 0; color: var(--tinta-2); font-size: 14px }
.login-card label { display: grid; gap: 4px; text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta-2) }
.login-card input { border: 1px solid var(--linha); border-radius: 10px; padding: 11px 12px; font-size: 16px }

/* ---------- Telas maiores ---------- */
@media (min-width: 1024px) {
  .grade { grid-template-columns: minmax(0, 1fr) 340px; align-items: start }
  .lado { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; padding-bottom: 4px }
  .diasnav a { min-width: 76px }
}

/* ---------- Celular ---------- */
@media (max-width: 768px) {
  .diasnav { justify-content: flex-start }
  .kpis { grid-template-columns: repeat(2, 1fr) }
  .kpis dd { font-size: 22px }
  .numeros { grid-template-columns: repeat(2, 1fr) }
  .numeros b { font-size: 26px }
  .tab { font-size: 13px }
  .tab th:nth-child(3), .tab td:nth-child(3) { display: none }
  .comp th:nth-child(3), .comp td:nth-child(3) { display: table-cell }
  .card { padding: 14px; overflow-x: auto }
  .c-desvio { min-width: 0; gap: 6px }
  .barra-d { min-width: 44px }
  .barra-t { width: 56px; margin-right: 4px }
  .comp td:first-child b { font-size: 13px }
}
@media (max-width: 400px) {
  .topo-acoes { width: 100% }
  .sel-sem { flex: 1 }
  .sel-sem select { max-width: none; width: 100% }
  .marca h1 { font-size: 19px }
  .diasnav a { min-width: 50px; padding: 5px 6px }
  .tarefa { gap: 10px; padding: 10px 12px 10px 10px }
  .nome { font-size: 16px }
  .tab th:nth-child(4), .tab td:nth-child(4) { display: none }
  .comp th:nth-child(3), .comp td:nth-child(3) { display: table-cell }
  .duas { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important } }