/* O caminho de estudo (/estudo) e o ritual do dia (/hoje). Portal, onda 3, lote 8 (01/11/2026). Tela de USO: rápida e óbvia; letra 16 px+
   no que se lê (kicker e data pequena são as exceções de sempre), toque 44 px+, uma ação por bloco, nunca rolagem lateral. Sem emoji: os
   ícones são os ico-* da casa. Os carimbos em CSS, no tom dos selos de passaporte (tinta vermelha, borda dupla, levemente tortos).
   Prefixo ce- ("caminho de estudo"): .est já é a estrela das notas no vinho.css.
   Por aparelho (a regra "cada aparelho do seu jeito"; fontes no RELATORIO do lote 8: Duolingo e Brilliant mostram o caminho numa coluna e a
   lição no lugar dele no celular; o Wine Folly e o NYT Games, a lista ao lado no computador):
   - celular (< 768): uma coluna; o mapa é a tela de entrada e a fase aberta toma o lugar dele (o "Voltar ao caminho" volta);
   - tablet (768–1179): igual, com as fases do mapa em duas colunas;
   - computador (≥ 1180): o mapa à esquerda (320 px, preso no alto) e a fase, o quiz ou o "hoje" à direita. */
.artigo.ce-art { --col:360px; }
.ce-art .miolo { max-width:720px; }
.ce-barrica { margin:-4px 0 14px; font:500 14px/1.45 Inter,sans-serif; color:var(--tinta-suave); }
.ce-barrica b { display:inline-block; font:800 11px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; border-radius:999px; padding:3px 7px; margin-right:6px; vertical-align:1px; }
.ce { display:flow-root; margin-top:8px; min-height:100vh; }   /* o mapa e a fase nascem do JS: até lá o rodapé fica abaixo da dobra (CLS 0, como o Comparar) */
.ce-mapa { min-height:0; }
.ce-tela { min-height:0; }
.ce:not(.com-tela) .ce-tela { display:none; }
.ce.com-tela .ce-mapa { display:none; }
.ce-h { margin:18px 0 10px !important; font-size:23px !important; }
.ce-k { margin:0 0 4px; font:700 12.5px/1.45 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--vermelho); }
.ce-k small { font-weight:600; letter-spacing:.06em; text-transform:none; color:var(--suave); font-size:13px; margin-left:4px; }
.ce-nota { font-size:16px; line-height:1.55; color:var(--tinta-suave); margin:4px 0 10px; }
.ce-t { margin:6px 0 10px !important; font-size:clamp(24px,5.6vw,30px) !important; line-height:1.2; }
.ce-passos { margin:0 0 14px; font:600 14px/1.4 Inter,sans-serif; letter-spacing:.06em; color:var(--suave); }
.ce-volta { margin:6px 0 10px; }
.ce-volta a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--vermelho); text-decoration:none; }
.ce-volta a:hover { text-decoration:underline; }

/* os botões: um principal por bloco; o secundário em contorno */
.ce-bt { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:14px 0 0; padding:10px 20px; border:0; border-radius:12px;
  background:var(--vermelho); color:#fff !important; font:700 16.5px/1.25 Inter,sans-serif; text-align:center; text-decoration:none; cursor:pointer; }
.ce-bt:hover { background:var(--vermelho-vivo); }
.ce-bt.sec { background:#FFFDF8; color:var(--vermelho) !important; border:1.5px solid var(--vermelho); }
.ce-bt.sec:hover { background:#FBEAEA; }
.ce-bt:focus-visible, .ce-f:focus-visible, .ce-op:focus-visible, .ce-volta a:focus-visible { outline:3px solid var(--ouro-vivo); outline-offset:2px; }
@media (min-width:768px){ .ce-bt { width:auto; display:inline-flex; margin-right:10px; } }

/* o mapa: "hoje", a trilha, os degraus, os carimbos */
.ce-hoje { background:#FFFDF8; border:1.5px solid #E2D4B7; border-left:4px solid var(--vermelho); border-radius:12px; padding:14px 16px 16px; margin:0 0 12px; }
.ce-hoje.prox { border-left-color:var(--ouro); }
.ce-hoje.feita { border-left-color:#2E7D4F; }
.ce-hoje-t { margin:2px 0 0; font-size:17px; line-height:1.45; }
.ce-hoje-t .ico { color:#2E7D4F; }
.ce-hoje .ce-bt { margin-top:12px; }
.ce-grupo { margin:22px 0 0; }
.ce-grupo h3 { margin:0 0 4px; font-family:"Playfair Display","Playfair Reserva","Playfair Reserva Android",Georgia,serif; font-weight:600; font-size:20px; line-height:1.25; color:var(--tinta); }
.ce-grupo h3 small, .ce-det summary small { font:600 14px/1 Inter,sans-serif; color:var(--suave); margin-left:6px; }
.ce-lista, .artigo .ce-lista { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.ce-f { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 14px; border:1.5px solid #E2D4B7; border-radius:12px; background:#FFFDF8; color:var(--tinta) !important; text-decoration:none; }
.ce-f:hover { border-color:var(--vermelho); }
.ce-f-m { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:2px solid #DCCDAE; color:var(--suave); }
.ce-f-t { min-width:0; display:flex; flex-direction:column; }
.ce-f-t b { font-weight:700; font-size:16.5px; line-height:1.3; }
.ce-f-t small { font-size:14px; line-height:1.35; color:var(--tinta-suave); margin-top:2px; }
.ce-f-t small .ico { font-size:13px; color:var(--suave); }
.ce-f.feita .ce-f-m { background:var(--vinho); border-color:var(--vinho); color:#fff; }
.ce-f.guarda .ce-f-m { background:var(--ouro); border-color:var(--ouro); color:var(--tinta); }
.ce-f.revisar .ce-f-m { background:var(--vermelho); border-color:var(--vermelho); }
.ce-f.hoje { border-color:var(--ouro); box-shadow:0 0 0 2px rgba(201,162,75,.35) inset; }
.ce-f.hoje .ce-f-m { border-color:var(--ouro); }
.ce-f.tentou .ce-f-t b { color:var(--tinta-suave); }
.ce-det { margin:10px 0 0; }
.ce-det summary { display:flex; align-items:center; min-height:48px; padding:0 4px; cursor:pointer; font-weight:700; font-size:16.5px; color:var(--vinho); }
.ce-pais { margin:12px 0 0; }
.ce-pais-t { margin:0 0 2px; font-size:16px; }
.ce-pais-t small { color:var(--suave); font-size:14px; }
.ce-pais.fechado .ce-pais-t b { color:var(--vermelho); }

/* os carimbos (a estética dos selos de passaporte, em CSS) */
.ce-carimbos, .artigo .ce-carimbos { list-style:none; margin:12px 0 0; padding:4px 0 8px; display:flex; flex-wrap:wrap; gap:12px; }
.ce-car { display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; padding:8px; border:3px double var(--vermelho);
  border-radius:50%; color:var(--vermelho); text-align:center; transform:rotate(-6deg); background:rgba(163,22,33,.03); }
.ce-car:nth-child(even) { transform:rotate(5deg); }
.ce-car b { display:block; max-width:100%; font:800 12.5px/1.15 Inter,sans-serif; letter-spacing:.04em; text-transform:uppercase; overflow-wrap:normal; }   /* 01/11 (lote 10): palavra inteira; o nome comprido encolhe a letra (ajustaCarimbos no estudo.js e no estudo-passaporte.js), nunca parte no meio ("ARGENTIN A") */
.ce-car small { font:600 11.5px/1.2 Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }
.ce-car-pais, .ce-car-degrau { border-color:var(--vinho); color:var(--vinho); border-radius:14px; }
.ce-car-guarda { border-color:#9C7318; color:#7A5A12; }

/* a fase: a vinheta, a leitura, a pergunta do meio */
.ce-fig { margin:6px 0 14px; }
.ce-fig img { display:block; width:100%; height:auto; max-width:520px; border-radius:12px; background:#F3E9D8; }
.ce-ler { font-size:17px; line-height:1.65; margin:0 0 12px; }
.ce-ler-mais a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--vermelho); }
.ce-termos, .artigo .ce-termos { list-style:none; padding:0; margin:6px 0 4px; display:flex; flex-wrap:wrap; gap:8px; }
.ce-termos a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1.5px solid #E2D4B7; border-radius:999px; background:#FFFDF8; color:var(--vinho) !important; font-weight:700; text-decoration:none; }
.ce-meio { background:#F3E9D8; border-radius:14px; padding:14px 14px 4px; margin:4px 0 16px; }
.ce-aviso-fase { background:#FFFBF0; border:1px dashed #DCCDAE; border-radius:12px; padding:12px 14px; margin:14px 0 0; font-size:16px; line-height:1.5; }

/* a pergunta: uma por tela, as alternativas numa coluna, 44 px+ (52 aqui) */
.ce-q { margin:4px 0 6px; }
.ce-q-t { margin:0 0 12px; font-family:"Playfair Display","Playfair Reserva","Playfair Reserva Android",Georgia,serif; font-weight:600; font-size:clamp(20px,4.6vw,23px); line-height:1.35; color:var(--tinta); }
.ce-ops { display:grid; gap:10px; }
.ce-op { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px; border:1.5px solid #DCCDAE; border-radius:12px; background:#FFFDF8;
  font:600 16.5px/1.35 Inter,sans-serif; color:var(--tinta); text-align:left; cursor:pointer; }
.ce-op:hover:not(:disabled) { border-color:var(--vermelho); }
.ce-op:disabled { cursor:default; opacity:1; }
.ce-op-l { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#F3E9D8; font:700 14px/1 Inter,sans-serif; color:var(--vinho); }
.ce-op > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.ce-op-s { flex:none; margin-left:auto; font-weight:800; font-size:18px; }
.ce-op.certa { border-color:#2E7D4F; background:#EAF5EC; }
.ce-op.certa .ce-op-s { color:#2E7D4F; }
.ce-op.errada { border-color:var(--vermelho); background:#FBEAEA; }
.ce-op.errada .ce-op-s { color:var(--vermelho); }
.ce-resp { margin:12px 0 0; padding:12px 14px; border-radius:12px; background:#FFFDF8; border:1.5px solid #E2D4B7; }
.ce-resp-t { margin:0 0 4px; font-size:17px; line-height:1.45; outline:none; }
.ce-resp-x { margin:0 0 6px; font-size:16px; line-height:1.55; color:var(--tinta-suave); }
.ce-resp-l { margin:6px 0 0; font-size:16px; line-height:1.5; color:var(--tinta-suave); }
.ce-resp-l a { color:var(--vermelho); font-weight:700; display:inline-flex; align-items:center; min-height:44px; }
.ce-avisa { background:none; border:0; padding:0 2px; min-height:44px; font:700 16px Inter,sans-serif; color:var(--vermelho); text-decoration:underline; cursor:pointer; }
.ce-regua { margin:0 0 6px; font-weight:700; font-size:16px; color:var(--vinho); }
.ce-de { margin:0 0 8px; font-size:15px; color:var(--tinta-suave); }
.ce-q-rot { font-size:14px; color:var(--suave); }
.ce-aviso-f { display:grid; gap:6px; margin-top:8px; }
.ce-aviso-f label { font-weight:700; font-size:15px; }
.ce-aviso-f textarea, .ce-aviso-f input { width:100%; min-height:48px; padding:10px 12px; border:1.5px solid #DCCDAE; border-radius:10px; font:500 16px Inter,sans-serif; background:#fff; color:var(--tinta); }
.ce-aviso-ok { margin:8px 0 0; font-size:16px; line-height:1.5; outline:none; }

/* o fim */
.ce-grade { margin:2px 0 10px; font:800 26px/1 Inter,sans-serif; letter-spacing:.18em; color:var(--vinho); }
.ce-fim { margin:8px 0 6px; padding-left:20px; font-size:16.5px; line-height:1.55; }
.ce-fim li { margin:0 0 6px; }
.ce-fim a { color:var(--vermelho); font-weight:700; }
.ce-manda-ok { margin:8px 0 0; font-size:15px; color:var(--tinta-suave); min-height:1px; }
.ce-como { margin:0 0 6px; }
.ce-como summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font-weight:700; font-size:16.5px; color:var(--vinho); }
.ce-como p { font-size:16.5px; line-height:1.65; }

/* tablet: as fases do mapa em duas colunas */
@media (min-width:768px){
  .ce-art .miolo { max-width:900px; }
  .ce-lista { grid-template-columns:1fr 1fr; }
  .ce-hoje { display:inline-block; width:calc(50% - 8px); vertical-align:top; margin-right:12px; }
  .ce-hoje + .ce-hoje { margin-right:0; }
}
/* computador: o mapa à esquerda (320 px, preso no alto) e a tela à direita, sempre os dois */
@media (min-width:1180px){
  .ce-art .miolo { max-width:1140px; }
  .ce { display:grid; grid-template-columns:320px minmax(0,1fr); gap:40px; align-items:start; }
  .ce .ce-mapa, .ce.com-tela .ce-mapa { display:block; position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:auto; padding:0 6px 16px 0; min-height:0; }
  .ce:not(.com-tela) .ce-tela, .ce .ce-tela { display:block; }
  .ce-tela { max-width:680px; }
  .ce-lista { grid-template-columns:1fr; }
  .ce-mapa .ce-hoje { display:block; width:auto; margin-right:0; }
  .ce-mapa .ce-bt { width:100%; display:flex; margin-right:0; }
  .ce-tela .ce-hoje { display:inline-block; width:calc(50% - 8px); }
}

/* /hoje: o ritual do dia */
.hoje-grade { display:grid; grid-template-columns:1fr; gap:14px; }
.hoje-card { display:flex; flex-direction:column; background:#FFFDF8; border:1.5px solid #E2D4B7; border-radius:16px; padding:16px 18px 18px; color:var(--tinta); }
.hoje-card .ce-k { margin-bottom:6px; }
.hoje-t { margin:0; font-family:"Playfair Display","Playfair Reserva","Playfair Reserva Android",Georgia,serif; font-weight:600; font-size:23px; line-height:1.25; color:var(--tinta); }
.hoje-s { margin:6px 0 0; font-size:16px; line-height:1.55; color:var(--tinta-suave); flex:1; }
.hoje-card .ce-bt { margin-top:14px; width:100%; display:flex; }
.hoje-texto p { font-size:17px; line-height:1.7; max-width:680px; }
.hoje-texto h2 { margin-top:26px; }
@media (min-width:768px){ .hoje-grade { grid-template-columns:1fr 1fr; } .hoje-grade .hoje-card:first-child { grid-column:1 / -1; } }
@media (min-width:1180px){ .hoje-grade { grid-template-columns:repeat(3,minmax(0,1fr)); } .hoje-grade .hoje-card:first-child { grid-column:auto; } }
.artigo .ce-lista li, .artigo .ce-carimbos li, .artigo .ce-termos li { margin:0; line-height:1.4; }
.artigo .ce-fim { margin-left:0; }
.ce-fichas, .artigo .ce-fichas { list-style:none; margin:4px 0 0; padding:0; }
.artigo .ce-fichas li { margin:0; line-height:1.35; }
.ce-fichas a { display:flex; align-items:center; min-height:44px; color:var(--vermelho); font-weight:700; font-size:15.5px; }
.hoje-texto p { margin:0 0 14px; }
.hoje-texto h2 { font-family:"Playfair Display","Playfair Reserva","Playfair Reserva Android",Georgia,serif; font-weight:600; font-size:24px; margin:26px 0 10px; }
.hoje-texto h2:first-child { margin-top:0; }
/* a revisão e a próxima fase trocam o texto depois do load (o progresso do aparelho): a altura fica reservada, CLS 0 */
.hoje-card .hoje-s { min-height:4.7em; }
@media (min-width:768px){ .hoje-card .hoje-t { min-height:2.5em; } }   /* em colunas, o título que troca de duas pra uma linha não puxa a fileira */
.ce-mapa > .ce-h:first-child { margin-top:8px !important; }
.ce-tela > :first-child { margin-top:8px; }

/* lote 10 (01/11/2026): a linha dos pontos do banco, o ranking "Quem mais carimbou" e o passaporte na Minha Adega */
.ce-fim .ce-pts { font-weight:700; color:var(--vinho); }
/* o ranking, como o do Rótulo do Dia (só apelido; 10 primeiros, a própria linha, com 2 jogadores ou mais), no papel da /estudo */
.ce-rank { margin:30px 0 0; padding-top:20px; border-top:1px solid #E2D4B7; }
.ce-rank-l, .artigo .ce-rank-l { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.artigo .ce-rank-l li { margin:0; }
.ce-rank-l li { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; min-height:48px; border:1.5px solid #E2D4B7; border-radius:12px; padding:8px 12px; background:#FFFDF8; font-size:16px; line-height:1.35; }
.ce-rank-l li.eu { border-color:var(--ouro); box-shadow:0 0 0 2px rgba(201,162,75,.3) inset; }
.ce-rank-l .pos { font-family:"Playfair Display","Playfair Reserva","Playfair Reserva Android",Georgia,serif; font-size:22px; line-height:1; color:var(--vermelho); }
.ce-rank-l .nome { font-weight:700; color:var(--tinta); overflow-wrap:anywhere; }
.ce-rank-l .nome i { font-style:normal; font-weight:500; color:var(--tinta-suave); font-size:14px; }
.ce-rank-l .n { color:var(--tinta-suave); font-size:14.5px; text-align:right; }
.ce-rank-eu a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--vermelho); }
@media (max-width:560px){ .ce-rank-l li { grid-template-columns:40px 1fr; row-gap:2px; } .ce-rank-l .n { grid-column:2; text-align:left; } }
@media (max-width:1179px){ .ce.com-tela ~ .ce-rank { display:none; } }   /* no celular e no tablet, com uma fase ou um quiz aberto, o ranking sai da frente (uma coisa por tela) */
@media (min-width:1180px){ .ce-rank { max-width:680px; margin-left:360px; } }   /* no computador, na coluna da direita, debaixo da fase (320 do mapa + 40 do vão) */

/* o passaporte na Minha Adega (#estudo-pass, um .adega-mural de papel): os carimbos que a pessoa ganhou e os próximos, tracejados */
#estudo-pass { --suave:#716249; }
#estudo-pass .ep-txt, #estudo-pass .ep-num { font-size:16px; line-height:1.55; color:var(--tinta); margin:10px 0 0; }
#estudo-pass .ep-num b { color:var(--vermelho); }
#estudo-pass .ep-car { margin-top:14px; }
#estudo-pass .ce-car.ep-falta { border:2px dashed #BFA97C; color:#716249; background:none; transform:none; }
#estudo-pass .ep-acoes { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:16px 0 0; }
#estudo-pass .ep-bt { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 22px; border-radius:12px; background:var(--vermelho); color:#fff !important; font:700 16px/1.25 Inter,sans-serif; text-decoration:none; }
#estudo-pass .ep-bt:hover { background:var(--vermelho-vivo); }
#estudo-pass .ep-ln { display:inline-flex; align-items:center; min-height:44px; font:700 16px/1.25 Inter,sans-serif; color:var(--vermelho) !important; }
#estudo-pass a:focus-visible { outline:3px solid var(--ouro-vivo); outline-offset:2px; }
@media (max-width:767px){
  #estudo-pass .ep-car { gap:10px; }
  #estudo-pass .ce-car { width:84px; height:84px; padding:6px; }   /* três por linha a 375 (o cartão deixa 287 px), dois a 320 */
  #estudo-pass .ce-car b { font-size:11.5px; }
  #estudo-pass .ce-car small { font-size:10.5px; letter-spacing:.04em; }
  #estudo-pass .ep-bt { width:100%; }
}