/* ───────────────────────────────────────────
   R E M E D I N F O
   mesma casca creme da planilha
   ─────────────────────────────────────────── */

:root{
  --papel:      #FAF6EF;
  --papel-2:    #F5EFE3;
  --nuvem:      #FFFCF6;
  --linho:      #F1E9DA;
  --granola:    #EADFC9;
  --borda:      #E6DCC8;
  --borda-2:    #D8CBB1;
  --tinta:      #37312A;
  --tinta-2:    #7C7266;
  --tinta-3:    #A99D8A;

  --rosa:    #F48591;
  --coral:   #FA8D85;
  --pessego: #FEA283;
  --ambar:   #FFB872;
  --sage:    #8DA599;
  --lilas:   #8D96C1;
  --uva:     #C18EA9;

  --raio:   14px;
  --raio-g: 22px;
  --raio-p: 9px;

  --sombra-1: 0 1px 2px rgba(55,49,42,.05), 0 2px 10px rgba(55,49,42,.04);
  --sombra-2: 0 2px 6px rgba(55,49,42,.07), 0 14px 40px rgba(55,49,42,.10);
  --sombra-3: 0 10px 30px rgba(55,49,42,.12), 0 40px 80px rgba(55,49,42,.14);

  --mola: cubic-bezier(.22,1.2,.36,1);
  --suave: cubic-bezier(.4,0,.2,1);

  --lateral-w: 252px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}

body{
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(255,184,114,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(141,150,193,.13), transparent 55%);
  background-attachment: fixed;
}

button, input, textarea, select{ font: inherit; color: inherit; font-weight: 400; }
button{ background:none; border:0; cursor:pointer; }
input{ background:none; border:0; outline:none; }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.01em; }
a{ color: inherit; }
::selection{ background: var(--ambar); color: var(--tinta); }

.ic{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--granola); border-radius:99px; border:3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--borda-2); background-clip: content-box; }

/* ───────── shell ───────── */
.app{
  display: grid;
  grid-template-columns: var(--lateral-w) 1fr;
  height: 100dvh;
  overflow: hidden;
  transition: grid-template-columns .44s var(--mola);
}

/* ───────── lateral ───────── */
.lateral{
  display: flex; flex-direction: column;
  gap: 26px;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--papel-2), var(--papel));
  border-right: 1px solid var(--borda);
  overflow-y: auto; overflow-x: hidden;
  z-index: 30;
  transition: opacity .3s var(--suave), padding .3s var(--suave);
}

.marca{ display:flex; align-items:baseline; gap:7px; padding: 6px 6px 2px; flex-wrap: wrap; }
.marca-wordmark{
  font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta); line-height: 1.5;
}

.lateral-secao{ display:flex; flex-direction:column; gap:7px; }
.lateral-titulo{
  font-size: 11px; text-transform: uppercase; letter-spacing:.14em;
  color: var(--tinta-3); padding: 0 8px 2px;
}

.lista-telas, .lista-remedios{ display:flex; flex-direction:column; gap:4px; }
.lat-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px; border-radius: var(--raio-p);
  color: var(--tinta-2); text-align:left; width:100%;
  transition: background .18s var(--suave), color .18s var(--suave), transform .22s var(--mola);
}
.lat-item .lat-emo{ font-size:15px; line-height:1; width:18px; text-align:center; }
.lat-item .lat-nome{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.lat-item .lat-dot{ width:8px; height:8px; border-radius:99px; flex:none; }
.lat-item:hover{ background: var(--linho); color: var(--tinta); transform: translateX(2px); }
.lat-item.ativo{ background: var(--nuvem); color: var(--tinta); box-shadow: var(--sombra-1); }

.lateral-pe{ margin-top:auto; padding: 12px 8px 0; border-top:1px solid var(--borda); }
.pe-nota{ margin:0; font-size:11.5px; line-height:1.55; color: var(--tinta-3); }

/* ───────── janelinha (squircle) ───────── */
.sq-btn{
  position: fixed; z-index: 45;
  top: calc(30px + env(safe-area-inset-top));
  left: calc(var(--lateral-w) + 8px);
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--tinta-2);
  transition: left .44s var(--mola), background .22s ease, color .14s ease, opacity .22s ease;
}
.sq-btn:hover{ background: var(--linho); color: var(--tinta); }
.sq-btn svg{
  width: 15px; height: 15px; overflow: visible; display: block;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s cubic-bezier(.34,1.5,.44,1);
}
.sq-btn:hover svg{ transform: scale(1.08); }
.sq-btn:active svg{ transform: scale(.9); }
.jan-box{ stroke-width: 1.7; }
.jan-bar{
  fill: currentColor; stroke: none;
  transform-box: fill-box; transform-origin: left center;
  transition: transform .36s cubic-bezier(.34,1.45,.44,1), opacity .3s ease;
}
@keyframes janPulo{ 0%{ transform: scale(1) } 42%{ transform: scale(.82) } 100%{ transform: scale(1) } }
.sq-btn svg.pop{ animation: janPulo .4s cubic-bezier(.34,1.45,.44,1); }

.menu-icones .sq-btn .jan-bar{ transform: scaleX(.6); opacity: .78; }
.menu-fechado .sq-btn .jan-bar{ transform: translateX(-2px) scaleX(.42); opacity: .5; }

.app.menu-icones{ --lateral-w: 62px; }
.app.menu-fechado{ --lateral-w: 0px; }

.app.menu-icones .lateral{ padding: calc(72px + env(safe-area-inset-top)) 8px calc(14px + env(safe-area-inset-bottom)); gap: 14px; }
.app.menu-icones .marca,
.app.menu-icones .lateral-titulo,
.app.menu-icones .lat-nome,
.app.menu-icones .lateral-pe{ display: none; }
.app.menu-icones .lat-item{ justify-content: center; padding: 10px 0; }
.app.menu-icones .lat-item:hover{ transform: scale(1.12); }
.app.menu-icones .lat-item .lat-emo{ font-size: 18px; }
.app.menu-fechado .lateral{
  opacity: 0; pointer-events: none; border-right-color: transparent;
  padding-left: 0; padding-right: 0;
}

/* ───────── palco ───────── */
.palco{ display:flex; flex-direction:column; min-width:0; height:100dvh; overflow:hidden; }

.topo{
  display:flex; align-items:center; gap: 14px;
  padding: calc(16px + env(safe-area-inset-top)) 26px 14px 46px;
  border-bottom: 1px solid var(--borda);
  background: rgba(250,246,239,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  z-index: 20;
}
.topo-titulo{ display:flex; align-items:center; gap:11px; min-width:0; }
#tituloTela{ font-size: 22px; letter-spacing:-.02em; }
.sub{ font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.topo-acoes{ margin-left:auto; display:flex; align-items:center; gap:9px; }

.segmentado{
  display:flex; gap:2px; padding:3px;
  background: var(--linho); border-radius: 99px; border:1px solid var(--borda);
}
.segmentado button{
  display:flex; align-items:center; gap:6px;
  padding: 7px 14px; border-radius: 99px;
  font-size:13px; color: var(--tinta-2);
  transition: all .22s var(--suave);
}
.segmentado button:hover{ color: var(--tinta); }
.segmentado button.ativo{ background: var(--nuvem); color: var(--tinta); box-shadow: var(--sombra-1); }

.ico-btn{
  width: 38px; height:38px; display:grid; place-items:center;
  border-radius: 11px; color: var(--tinta-2);
  transition: background .18s, color .18s, transform .2s var(--mola);
}
.ico-btn:hover{ background: var(--linho); color: var(--tinta); }
.ico-btn:active{ transform: scale(.92); }
.so-mobile{ display:none; }

.corpo{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding: 30px 26px calc(46px + env(safe-area-inset-bottom));
}
.folha{ max-width: 1180px; margin: 0 auto; display:flex; flex-direction:column; gap: 34px; }

/* ───────── bloco ───────── */
.bloco{ display:flex; flex-direction:column; gap: 16px; animation: sobe .45s var(--mola) both; }
.bloco-titulo{
  font-size: 11px; text-transform: uppercase; letter-spacing:.16em;
  color: var(--tinta-3); padding-left: 3px;
}

/* ───────── cartas de escolha ───────── */
.escolha{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

.carta-esc{
  position: relative; text-align:left;
  display:flex; flex-direction:column; gap:8px;
  padding: 20px 20px 18px;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  transition: transform .28s var(--mola), box-shadow .25s var(--suave), border-color .25s;
  overflow:hidden;
}
.carta-esc::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--c); opacity:.5; transition: opacity .25s, width .28s var(--mola);
}
.carta-esc:hover{ transform: translateY(-3px); box-shadow: var(--sombra-2); }
.carta-esc:hover::after{ opacity:.85; }
.carta-esc.ativo{ border-color: var(--borda-2); box-shadow: var(--sombra-2); }
.carta-esc.ativo::after{ width:7px; opacity:1; }
.carta-esc .esc-emo{ font-size: 22px; line-height:1; }
.carta-esc .esc-nome{ font-size: 19px; letter-spacing:-.02em; }
.carta-esc .esc-forma{ font-size: 12.5px; color: var(--tinta-2); }
.carta-esc .esc-casa{ font-size: 11px; text-transform: uppercase; letter-spacing:.13em; color: var(--tinta-3); }

/* ───────── chips de dose ───────── */
.chips{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{
  display:flex; align-items:center; gap:9px;
  padding: 11px 17px; border-radius: 99px;
  background: var(--nuvem); border:1px solid var(--borda);
  color: var(--tinta-2); font-size: 14px;
  transition: transform .22s var(--mola), box-shadow .22s, background .22s, color .22s, border-color .22s;
}
.chip .chip-mg{ font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.chip:hover{ transform: translateY(-2px); box-shadow: var(--sombra-1); color: var(--tinta); }
.chip.ativo{ background: var(--c); border-color: var(--c); color:#2E2822; box-shadow: var(--sombra-2); }
.chip.ativo .chip-mg{ color: rgba(46,40,34,.62); }
.chip-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  padding: 2px 7px; border-radius:99px; background: var(--linho); color: var(--tinta-2);
}
.chip.ativo .chip-tag{ background: rgba(255,252,246,.62); }

/* ───────── carta grande do hoje ───────── */
.hoje{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2);
  overflow:hidden;
  animation: sobe .5s var(--mola) both;
}
.hoje-esq{ padding: 28px 30px; display:flex; flex-direction:column; gap: 10px; position:relative; }
.hoje-esq::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background: var(--c); }
.hoje-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--tinta-3); }
.hoje-nome{ font-size: 30px; letter-spacing:-.03em; line-height:1.1; }
.hoje-dose{ font-size: 17px; color: var(--tinta-2); }
.hoje-mg{ font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.hoje-dir{
  padding: 26px 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 20px 14px;
  background: var(--papel-2); border-left:1px solid var(--borda);
  align-content: center;
}
.dado{ display:flex; flex-direction:column; gap:3px; }
.dado-rot{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color: var(--tinta-3); }
.dado-val{ font-size: 20px; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.dado-obs{ font-size:11.5px; color: var(--tinta-3); }

/* ───────── equivale a ───────── */
.equivale{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; }

.carta-eq{
  display:flex; flex-direction:column; gap: 16px;
  padding: 24px 24px 22px;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1);
  position:relative; overflow:hidden;
  transition: transform .28s var(--mola), box-shadow .25s;
  animation: sobe .5s var(--mola) both;
}
.carta-eq:hover{ transform: translateY(-3px); box-shadow: var(--sombra-2); }
.carta-eq::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--c); }

.eq-cabeca{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.eq-nome{ font-size: 20px; letter-spacing:-.02em; }
.eq-casa{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color: var(--tinta-3); }

.eq-dose{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding: 16px 18px; border-radius: var(--raio);
  background: var(--c); color:#2E2822;
}
.eq-dose-num{ font-size: 26px; letter-spacing:-.03em; line-height:1.15; }
.eq-dose-dia{ font-size: 13px; color: rgba(46,40,34,.66); }

.eq-linhas{ display:flex; flex-direction:column; gap:9px; }
.eq-linha{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13.5px; }
.eq-linha .rot{ color: var(--tinta-3); }
.eq-linha .val{ color: var(--tinta); font-variant-numeric: tabular-nums; text-align:right; }

.eq-preco{
  display:flex; flex-direction:column; gap:3px;
  padding: 14px 18px; border-radius: var(--raio);
  background: var(--linho); border:1px solid var(--borda);
}
.eq-preco-num{ font-size: 24px; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.eq-preco-dia{ font-size:12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.selos{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }

/* ───────── pódio do preço ───────── */
.podio{ display:flex; flex-direction:column; gap: 10px; }
.podio-item{
  display:flex; align-items:center; gap: 16px;
  padding: 18px 22px; border-radius: var(--raio-g);
  background: var(--nuvem); border:1px solid var(--borda);
  box-shadow: var(--sombra-1);
  position:relative; overflow:hidden;
  animation: sobe .45s var(--mola) both;
  transition: transform .24s var(--mola), box-shadow .24s;
}
.podio-item:hover{ transform: translateX(3px); box-shadow: var(--sombra-2); }
.podio-item::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--c); }
.podio-item.campeao{ background: var(--papel-2); border-color: var(--borda-2); }
.podio-lugar{ font-size: 20px; color: var(--tinta-3); font-variant-numeric: tabular-nums; width: 34px; flex:none; }
.podio-item.campeao .podio-lugar{ color: var(--tinta); }
.podio-nome{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.podio-remedio{ font-size: 18px; letter-spacing:-.02em; }
.podio-dose{ font-size:12.5px; color: var(--tinta-3); }
.podio-valor{ display:flex; flex-direction:column; gap:2px; text-align:right; flex:none; }
.podio-mes{ font-size: 20px; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.podio-obs{ font-size:11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* ───────── farmácias ───────── */
.lojas{ display:flex; flex-direction:column; gap:6px; margin-top: 6px; }
.lojas-rot{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color: var(--tinta-3); padding: 4px 2px 4px; }
.loja{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding: 11px 15px; border-radius: var(--raio-p);
  background: var(--linho); border:1px solid transparent;
  font-size:13.5px; color: var(--tinta-2); text-align:left;
  transition: transform .2s var(--mola), background .2s, color .2s, border-color .2s;
}
.loja:hover{ transform: translateX(3px); background: var(--granola); color: var(--tinta); }
.loja-preco{ font-variant-numeric: tabular-nums; }
.loja-nota{ font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color: var(--tinta-3); }
.loja.barata{ background: var(--sage); color:#2E2822; }
.loja.barata .loja-nota{ color: rgba(46,40,34,.6); }
.loja.usando{ border-color: var(--tinta); }

.selo{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding: 6px 12px; border-radius:99px;
  font-size: 11.5px; letter-spacing:.02em;
  background: var(--linho); color: var(--tinta-2); border:1px solid var(--borda);
}
.selo.certo{ background: var(--sage); color:#2E2822; border-color: var(--sage); }
.selo.perto{ background: var(--ambar); color:#2E2822; border-color: var(--ambar); }
.selo.longe{ background: var(--coral); color:#2E2822; border-color: var(--coral); }

/* ───────── régua ───────── */
.regua{
  padding: 26px 28px 22px;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1);
  display:flex; flex-direction:column; gap: 18px;
}
.regua-trilho{
  position:relative; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--linho), var(--granola), var(--borda-2));
  margin: 76px 10px 10px;
}
.regua-marca{
  position:absolute; top:50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border-radius: 99px;
  background: var(--c); border: 3px solid var(--nuvem);
  box-shadow: var(--sombra-1);
  transition: left .55s var(--mola);
}
.regua-marca.hoje-marca{ width: 26px; height: 26px; border-width: 4px; z-index: 3; }
.regua-rot{
  position:absolute; transform: translateX(-50%);
  font-size: 11px; color: var(--tinta-2); white-space:nowrap;
  transition: left .55s var(--mola);
}
.regua-escala{ display:flex; justify-content:space-between; font-size:11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; padding: 0 6px; }
.regua-nota{ font-size:12.5px; color: var(--tinta-2); line-height:1.6; }

/* ───────── fichas ───────── */
.ficha{
  display:grid; grid-template-columns: 262px 1fr; gap: 0;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1);
  overflow:hidden; animation: sobe .45s var(--mola) both;
}
.ficha-esq{ padding: 26px 24px; background: var(--papel-2); border-right:1px solid var(--borda); position:relative; display:flex; flex-direction:column; gap:8px; }
.ficha-esq::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background: var(--c); }
.ficha-emo{ font-size:24px; line-height:1; }
.ficha-nome{ font-size: 23px; letter-spacing:-.025em; }
.ficha-casa{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color: var(--tinta-3); }
.ficha-forma{ font-size:13px; color: var(--tinta-2); }
.ficha-resumo{ display:flex; flex-direction:column; gap:18px; margin-top: 18px; padding-top: 18px; border-top:1px solid var(--borda); }

.ficha-dir{ padding: 24px 26px; display:flex; flex-direction:column; gap: 22px; }
.ficha-secao{ display:flex; flex-direction:column; gap:9px; }
.ficha-rot{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--tinta-3); }
.ficha-txt{ font-size:14px; color: var(--tinta-2); line-height:1.6; }
.ficha-lista{ margin:0; padding-left: 18px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; color: var(--tinta-2); line-height:1.55; }
.ficha-lista li::marker{ color: var(--pessego); }

.apre{ display:flex; flex-direction:column; gap:8px; }
.apre-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding: 12px 15px; border-radius: var(--raio);
  background: var(--linho); border:1px solid var(--borda);
  font-size:13.5px;
}
.apre-item .apre-det{ font-size:11.5px; color: var(--tinta-3); text-align:right; }

.tab-degraus{ display:flex; flex-direction:column; gap:6px; }
.deg-linha{
  display:grid; grid-template-columns: 1.4fr .8fr .8fr .9fr; gap:10px; align-items:baseline;
  padding: 11px 14px; border-radius: var(--raio-p);
  background: var(--nuvem); border:1px solid var(--borda);
  font-size:13px; font-variant-numeric: tabular-nums;
  transition: background .2s, transform .2s var(--mola);
}
.deg-linha:hover{ background: var(--linho); transform: translateX(2px); }
.deg-linha.cabeca{ background: transparent; border-color: transparent; color: var(--tinta-3); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; padding-bottom:2px; }
.deg-linha .d-rot{ color: var(--tinta); }
.deg-linha .d-obs{ color: var(--tinta-3); font-size:11.5px; }

/* ───────── preços ───────── */
.precos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 14px; }
.preco-item{
  display:flex; flex-direction:column; gap: 12px;
  padding: 22px 22px 20px;
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1);
  position:relative; overflow:hidden;
  animation: sobe .45s var(--mola) both;
}
.preco-item::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--c); }
.preco-nome{ font-size:16px; }
.preco-det{ font-size:12px; color: var(--tinta-3); }
.preco-campo{
  display:flex; align-items:center; gap:8px;
  padding: 12px 16px; border-radius: 99px;
  background: var(--linho); border:1px solid var(--borda);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.preco-campo:focus-within{ border-color: var(--borda-2); box-shadow: var(--sombra-1); background: var(--nuvem); }
.preco-campo .cifra{ color: var(--tinta-3); font-size:14px; }
.preco-campo input{ flex:1; min-width:0; font-size:17px; font-variant-numeric: tabular-nums; }
.preco-dia{ font-size:12px; color: var(--tinta-2); }

.acoes-linha{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 11px 18px; border-radius: 99px;
  background: var(--nuvem); border:1px solid var(--borda);
  color: var(--tinta-2); font-size:13.5px;
  transition: transform .22s var(--mola), box-shadow .22s, color .2s;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--sombra-1); color: var(--tinta); }
.btn:active{ transform: translateY(0) scale(.97); }
.btn-escuro{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn-escuro:hover{ color: var(--papel); }

/* ───────── fontes ───────── */
.fontes{ display:flex; flex-direction:column; gap:8px; }
.fonte-link{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color: var(--tinta-2); text-decoration:none;
  padding: 10px 13px; border-radius: var(--raio-p);
  background: var(--nuvem); border:1px solid var(--borda);
  transition: transform .2s var(--mola), color .2s, box-shadow .2s;
}
.fonte-link:hover{ transform: translateX(3px); color: var(--tinta); box-shadow: var(--sombra-1); }

/* ───────── ilustrações ───────── */
.ilu{ width: 100%; height: 100%; display:block; overflow: visible; }
.esc-ilu{ display:block; width: 62px; height: 62px; margin-bottom: 2px; }
.carta-esc:hover .esc-ilu .ilu{ animation: balanca .7s var(--mola); }
.ficha-ilu{ display:block; width: 86px; height: 86px; }
@keyframes balanca{ 0%{ transform: rotate(0) } 30%{ transform: rotate(-6deg) } 65%{ transform: rotate(4deg) } 100%{ transform: rotate(0) } }

/* ───────── o player do passo a passo ───────── */
.player{
  background: var(--nuvem); border:1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2);
  padding: 20px 22px 22px;
  display:flex; flex-direction:column; gap: 20px;
  overflow: hidden;
}

.barras{ display:flex; gap:6px; }
.barra{
  flex:1; height: 4px; border-radius: 99px;
  background: var(--linho); overflow:hidden; cursor: pointer;
  transition: transform .2s var(--mola);
}
.barra:hover{ transform: scaleY(1.8); }
.barra.feita{ background: var(--c); }
.barra-cheia{ display:block; height:100%; width:0; background: var(--c); border-radius:99px; }
.barra.agora .barra-cheia{ animation: enche 6s linear forwards; }
@keyframes enche{ from{ width: 0 } to{ width: 100% } }

.palco-cena{
  background: var(--papel-2); border:1px solid var(--borda);
  border-radius: var(--raio); padding: 8px;
  display:grid; place-items:center; cursor: pointer;
  min-height: 230px;
}
.palco-cena.entra{ animation: aparece .34s var(--suave) both; }
.cena{ width: 100%; max-width: 460px; height: auto; display:block; overflow: visible; }

.passo-txt{ display:flex; flex-direction:column; gap:6px; }
.passo-num{ font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--tinta-3); }
.passo-frase{ margin:0; font-size: 18px; line-height:1.45; letter-spacing:-.01em; }

.player-botoes{ display:flex; align-items:center; justify-content:center; gap: 14px; }

.passos-lista{ display:flex; flex-direction:column; gap:8px; }
.passo-item{
  display:flex; align-items:flex-start; gap: 14px; text-align:left;
  padding: 14px 16px; border-radius: var(--raio);
  background: var(--nuvem); border:1px solid var(--borda);
  color: var(--tinta-2); font-size:14px; line-height:1.5;
  transition: transform .2s var(--mola), background .2s, color .2s, box-shadow .2s;
}
.passo-item:hover{ transform: translateX(3px); color: var(--tinta); box-shadow: var(--sombra-1); }
.passo-item.ativo{ background: var(--papel-2); border-color: var(--borda-2); color: var(--tinta); }
.passo-bola{
  width: 26px; height: 26px; flex:none; border-radius: 99px;
  display:grid; place-items:center; font-size: 12.5px;
  background: var(--linho); color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.passo-item.ativo .passo-bola{ background: var(--c); color:#2E2822; }

/* ───────── animações das cenas ───────── */
.aperta{ animation: apertar 1.6s var(--mola) infinite; }
@keyframes apertar{ 0%,100%{ transform: translateY(0) } 45%{ transform: translateY(7px) } 70%{ transform: translateY(0) } }

.desce{ animation: descer 2.4s var(--mola) infinite; }
@keyframes descer{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(10px) } }

.gota{ opacity:0; animation: cair 1.8s linear infinite; }
.gota.g2{ animation-delay:.6s } .gota.g3{ animation-delay:1.2s }
@keyframes cair{ 0%{ opacity:0; transform: translateY(0) } 12%{ opacity:1 } 85%{ opacity:1; transform: translateY(58px) } 100%{ opacity:0; transform: translateY(70px) } }

.jato{ transform-origin: left center; animation: jatinho 2s var(--suave) infinite; }
@keyframes jatinho{ 0%,100%{ opacity:.2; transform: scale(.5) } 40%{ opacity:1; transform: scale(1) } 75%{ opacity:.35; transform: scale(1.1) } }

.espalha{ transform-origin: center; animation: espalhar 2.6s var(--mola) infinite; }
@keyframes espalhar{ 0%{ transform: scaleX(.25); opacity:.75 } 60%{ transform: scaleX(1); opacity:.5 } 100%{ transform: scaleX(1); opacity:.5 } }

.risca{ stroke-dasharray: 40; stroke-dashoffset: 40; animation: riscar 2.2s var(--suave) infinite; }
@keyframes riscar{ 0%{ stroke-dashoffset: 40 } 55%{ stroke-dashoffset: 0 } 100%{ stroke-dashoffset: 0; opacity:.3 } }

.rasga-cima{ animation: rasgar 2.6s var(--mola) infinite; }
@keyframes rasgar{ 0%,20%{ transform: translate(0,0) rotate(0) } 55%{ transform: translate(26px,-26px) rotate(11deg) } 100%{ transform: translate(26px,-26px) rotate(11deg); opacity:.5 } }

.verte{ transform-origin: 130px 100px; animation: verter 2.8s var(--mola) infinite; }
@keyframes verter{ 0%,15%{ transform: rotate(0) } 45%{ transform: rotate(28deg) } 85%{ transform: rotate(28deg) } 100%{ transform: rotate(0) } }

.palma{ animation: brilha 2.4s var(--suave) infinite; }
@keyframes brilha{ 0%,100%{ opacity:.3; transform: scale(.9) } 50%{ opacity:.6; transform: scale(1) } }

.ponteiro{ transform-box: fill-box; transform-origin: bottom center; animation: gira 3.4s linear infinite; }
@keyframes gira{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }

.area2{ opacity:0; animation: chega 3s var(--mola) infinite; animation-delay:.7s; }
.area3{ opacity:0; animation: chega 3s var(--mola) infinite; animation-delay:1.4s; }
@keyframes chega{ 0%{ opacity:0; transform: translateX(-14px) } 25%,90%{ opacity:.5; transform: translateX(0) } 100%{ opacity:0 } }

/* ───────── foto e vídeo da Le ───────── */
.midia-caixa{
  border-radius: var(--raio); overflow:hidden;
  background: var(--papel-2); border:1px dashed var(--borda-2);
  min-height: 150px; display:grid; place-items:center;
}
.midia-caixa img, .midia-caixa video{ width:100%; height:auto; max-height: 340px; object-fit: contain; display:block; background: var(--papel-2); }
.midia-caixa iframe{ width:100%; aspect-ratio: 16/9; border:0; display:block; }
.midia-vazia{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--tinta-3); font-size:13px; padding: 28px; }
.ic-g{ width:22px; height:22px; }
.ficha-txt.fino{ font-size:12px; color: var(--tinta-3); }
label.btn{ cursor:pointer; }

/* ───────── aviso ───────── */
.aviso{
  position: fixed; left:50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 140;
  background: var(--tinta); color: var(--papel);
  padding: 11px 20px; border-radius: 99px; font-size: 13.5px;
  box-shadow: var(--sombra-2);
  animation: sobeAviso .35s var(--mola) both;
  max-width: calc(100vw - 32px); text-align:center;
}
.aviso[hidden]{ display:none; }

.scrim{ position: fixed; inset:0; background: rgba(55,49,42,.2); z-index: 25; animation: aparece .25s both; }
.scrim[hidden]{ display:none; }

/* ───────── animações ───────── */
@keyframes sobe{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }
@keyframes sobeAviso{ from{ opacity:0; transform: translate(-50%, 16px); } to{ opacity:1; transform: translate(-50%,0); } }
@keyframes pulsa{ 0%{ transform: scale(1) } 45%{ transform: scale(1.05) } 100%{ transform: scale(1) } }
.pulsa{ animation: pulsa .42s var(--mola); }

.d1{ animation-delay:.04s } .d2{ animation-delay:.09s } .d3{ animation-delay:.14s }
.d4{ animation-delay:.19s } .d5{ animation-delay:.24s }

/* ───────── mobile ───────── */
@media (max-width: 900px){
  .app, .app.menu-icones, .app.menu-fechado{ grid-template-columns: 1fr; }
  .lateral{
    position: fixed; top:0; left:0; bottom:0; width: 276px;
    transform: translateX(-102%);
    transition: transform .38s var(--mola), opacity .3s var(--suave);
    box-shadow: var(--sombra-3);
    padding-left: 16px; padding-right: 16px;
    opacity: 1;
  }
  .app.menu-aberto .lateral{ transform:none; opacity:1; pointer-events:auto; }
  .app.menu-icones .lateral{ transform: translateX(-102%); }
  .sq-btn{ top: calc(env(safe-area-inset-top) + 25px); left: 13px; }
  .app.menu-aberto .sq-btn{ left: 288px; }

  .topo{ padding: calc(12px + env(safe-area-inset-top)) 14px 12px 48px; gap:10px; flex-wrap: wrap; }
  .topo-acoes{ width:100%; margin-left:0; order:3; }
  .segmentado{ width:100%; }
  .segmentado button{ flex:1; justify-content:center; padding: 9px 4px; font-size:12.5px; white-space:nowrap; }
  .segmentado button .ic{ display:none; }
  #tituloTela{ font-size: 19px; }

  .corpo{ padding: 22px 14px calc(40px + env(safe-area-inset-bottom)); }
  .folha{ gap: 28px; }

  .escolha{ grid-template-columns: 1fr; gap: 11px; }
  .carta-esc{ padding: 17px 18px; }
  .carta-esc .esc-nome{ font-size:17px; }

  .hoje{ grid-template-columns: 1fr; }
  .hoje-esq{ padding: 22px 20px; }
  .hoje-nome{ font-size: 26px; }
  .hoje-dir{ border-left:0; border-top:1px solid var(--borda); padding: 20px; gap: 18px 12px; }

  .equivale{ grid-template-columns: 1fr; }
  .carta-eq{ padding: 20px 18px; }

  .ficha{ grid-template-columns: 1fr; }
  .ficha-esq{ border-right:0; border-bottom:1px solid var(--borda); padding: 20px 20px 18px; }
  .ficha-dir{ padding: 20px; }
  .deg-linha{ grid-template-columns: 1.3fr .8fr .9fr; }
  .deg-linha .d-4{ display:none; }

  .player{ padding: 16px 14px 18px; gap: 16px; }
  .palco-cena{ min-height: 190px; padding: 4px; }
  .passo-frase{ font-size: 16px; }
  .esc-ilu{ width: 54px; height: 54px; }
  .ficha-ilu{ width: 70px; height: 70px; }

  .podio-item{ padding: 16px 16px; gap: 12px; flex-wrap: wrap; }
  .podio-lugar{ width: 26px; font-size:17px; }
  .podio-remedio{ font-size:16px; }
  .podio-mes{ font-size:18px; }

  .regua{ padding: 22px 18px 18px; }
  .regua-trilho{ margin: 78px 12px 10px; }
  .precos{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001s !important; transition-duration: .001s !important; }
}