/* ═════════════════════════════════════════════════════════════════════════
   MARINA WILDBERGER — cartão digital
   ─────────────────────────────────────────────────────────────────────────
   ESTE é o cartão que vai para o ar. O Praticar e os Meus roteiros ficam
   em duas abas (Yoga | Roteiros) — escolha dela, em 15/09/2026. A versão
   de uma coluna só, sem abas, está guardada em
   versoes\index.template.2026-09-15-sem-abas.html: se ela voltar atrás, é
   de lá que se puxa.

   A cena é uma manhã de sábado embaixo de uma árvore, que é literalmente
   onde o Yoga no Parque acontece: 8h30, Parque Ecológico de Vilas.
   Toda a paleta foi amostrada de uma foto do feed dela — a da luz do sol
   passando pelas folhas e caindo na grama. Os valores que saíram de lá,
   da sombra para a luz:
       #273625  #39462B  #4E5530  #646435  #7A743D  #908344  #A6914F
       #B9A05C  #CBAF6F  #DABC88
   É essa rampa de oliva para dourado que colore a copa. Não é uma paleta
   escolhida por gosto; é a luz do lugar dela.

   Dois movimentos, os dois lentos de propósito:
     1. a copa balança em duas senoides de períodos incomensuráveis (4,3s e
        6,7s), então o ciclo não fecha — o olho nunca pega o "loop", que é
        o que denuncia animação de template;
     2. a luz salpicada anda em durações primas (23s, 31s, 37s, 41s) — pelo
        mesmo motivo do item 1.

   AS FOLHAS QUE CAÍAM SAÍRAM em 15/09/2026, a pedido dela. Eram duas
   camadas de canvas, uma atrás e outra na frente do cartão. Ficou a
   árvore ao fundo, balançando: cena, e não movimento por cima do texto.
   A versão com elas está em versoes\.

   Tipografia: Fraunces no display e Karla no corpo, as duas embutidas em
   woff2. A Fraunces vem com os eixos SOFT=100 e WONK=1 já fixados no
   arquivo — são os eixos que arredondam os terminais e ligam as formas
   alternativas. É o que faz a letra parecer cortada à mão em vez de
   escolhida numa lista.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fraunces.woff2) format('woff2');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(../karla.woff2) format('woff2');
}

:root{
  /* A LUZ DA CENA SEGUE A HORA DE QUEM ABRIU O CARTÃO.
     O cartão nasceu da luz de uma manhã de sábado no parque — então os
     valores abaixo, os do :root, são os da manhã. Os outros três momentos
     do dia estão logo depois, e o script no <head> troca o data-hora antes
     da primeira pintura, para não haver piscada.
     O que muda é só o céu, o salpicado de sol e o tom da copa. O papel do
     cartão e a tinta ficam iguais nas quatro horas: assim o texto tem
     exatamente o mesmo contraste às três da manhã e ao meio-dia. Nenhum
     dos quatro estados escurece a tela — é um cartão sobre leveza, e não
     um tema noturno. */
  --ceu-a:#FDFAF1; --ceu-b:#F4F1DE; --ceu-c:#E2E5C2; --ceu-d:#C6D2A4;
  --brilho:255,244,205; --veu:253,250,241;

  /* papel */
  --papel:#F8F2E5;
  --papel-2:#F2EAD8;
  --tinta:#2B3124;
  --tinta-2:#6E7360;

  /* a rampa da foto do parque */
  --folha:#5E7046;
  --folha-e:#33422A;
  --sol:#B08238;
  --fogo:#B85F35;

  --linha:rgba(43,49,36,.14);
  --linha-forte:rgba(43,49,36,.26);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corpo:'Karla',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Ruído de papel. feTurbulence gerado no próprio SVG: some do arquivo
     final como imagem e ainda assim tira o "chapado" digital do creme. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* meio-dia: luz alta e branca, verde mais vivo */
html[data-hora="meio"]{  --ceu-a:#FEFDF8; --ceu-b:#F4F5E6; --ceu-c:#DCE7C6; --ceu-d:#BACE9F; --brilho:255,251,228; --veu:254,253,248 }
/* fim de tarde: tudo puxa para o âmbar, como a luz das seis */
html[data-hora="tarde"]{ --ceu-a:#FEF8EA; --ceu-b:#F7ECD5; --ceu-c:#E6DDB4; --ceu-d:#CBBF93; --brilho:255,226,170; --veu:254,248,234 }
/* noite: continua claro, mas frio e sem sol — luz de fim de dia, não breu */
html[data-hora="noite"]{ --ceu-a:#F7F5EE; --ceu-b:#EAEBDF; --ceu-c:#D3DBC4; --ceu-d:#B0C0A5; --brilho:228,236,222; --veu:246,245,238 }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0; padding:0}
body{
  min-height:100vh; color:var(--tinta);
  font-family:var(--corpo); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Luz alta no topo, verde de folhagem fechando nas bordas. Os quatro
     tons vêm das variáveis, que mudam com a hora. */
  background:
    radial-gradient(120% 78% at 50% -8%, var(--ceu-a) 0%, var(--ceu-b) 34%, var(--ceu-c) 62%, var(--ceu-d) 100%)
    fixed;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(14px,4.5vw,52px) clamp(12px,4vw,24px) 56px;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--folha); outline-offset:3px; border-radius:8px}

/* ── A cena ───────────────────────────────────────────────────────────────
   Tudo aqui é decoração e não recebe clique. A copa fica no z0, atrás do
   cartão, que é o z1. */
.cena{position:fixed; inset:-40px; z-index:0; pointer-events:none}
/* Névoa da manhã. A copa desce do alto e se dissolve antes de chegar na
   altura do texto: o cartão fica sempre sobre fundo limpo e a árvore não
   vira ruído atrás das letras. */
.cena::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(var(--veu),0) 2%, rgba(var(--veu),.30) 26%,
    rgba(var(--veu),.60) 50%, rgba(var(--veu),.74) 74%, rgba(var(--veu),.62) 100%);
}
.copa{position:absolute; inset:0; width:100%; height:100%; overflow:visible; will-change:transform}

/* Luz salpicada — o sol furando a copa. Quatro poças em durações primas
   (23/31/37/41s) para a soma não fechar ciclo visível. */
.luz{position:fixed; inset:0; z-index:0; pointer-events:none; mix-blend-mode:soft-light}
.luz i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--brilho),.95), rgba(var(--brilho),0) 68%);
}
.luz i:nth-child(1){ left:6%;  top:8%;   width:38vmin; height:38vmin; animation:deriva1 23s ease-in-out infinite }
.luz i:nth-child(2){ left:58%; top:-4%;  width:52vmin; height:52vmin; animation:deriva2 31s ease-in-out infinite }
.luz i:nth-child(3){ left:22%; top:52%;  width:44vmin; height:44vmin; animation:deriva3 37s ease-in-out infinite }
.luz i:nth-child(4){ left:70%; top:64%;  width:34vmin; height:34vmin; animation:deriva4 41s ease-in-out infinite }
@keyframes deriva1{0%,100%{transform:translate(0,0) scale(1); opacity:.55} 50%{transform:translate(3vmin,4vmin) scale(1.16); opacity:.9}}
@keyframes deriva2{0%,100%{transform:translate(0,0) scale(1.1); opacity:.85} 50%{transform:translate(-5vmin,3vmin) scale(.92); opacity:.5}}
@keyframes deriva3{0%,100%{transform:translate(0,0) scale(.95); opacity:.7} 50%{transform:translate(4vmin,-3vmin) scale(1.2); opacity:.4}}
@keyframes deriva4{0%,100%{transform:translate(0,0) scale(1.05); opacity:.45} 50%{transform:translate(-3vmin,-4vmin) scale(.9); opacity:.8}}

/* ── O cartão ─────────────────────────────────────────────────────────────
   Os quatro raios são diferentes de propósito. Um retângulo com o mesmo
   raio nos quatro cantos é desenhado por software; um papel cortado à mão
   nunca fecha igual. A diferença é de 4px e ninguém consegue apontar — só
   sente. */
.cartao{
  position:relative; z-index:1; width:100%; max-width:464px;
  background:var(--papel);
  border-radius:30px 34px 28px 32px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 6px rgba(58,66,42,.07),
    0 22px 48px -18px rgba(51,66,42,.34),
    0 44px 90px -40px rgba(51,66,42,.42);
  padding:34px clamp(20px,5.4vw,30px) 26px;
  overflow:hidden;
}
/* O grão do papel por cima de tudo dentro do cartão. */
.cartao::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:var(--grao); background-size:160px 160px;
  opacity:.055; mix-blend-mode:multiply;
}
/* Uma borda de fibra: mais escura embaixo, quase branca em cima, como a
   quina de uma folha de papel grosso pegando luz. */
.cartao::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(43,49,36,.09), inset 0 -18px 30px -22px rgba(51,66,42,.30);
}

/* ── Topo ─────────────────────────────────────────────────────────────── */
.topo{display:flex; flex-direction:column; align-items:center; text-align:center}
.retrato{position:relative; width:116px; height:116px; margin-bottom:16px}
.retrato img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  /* A foto veio do perfil dela em 150px. Numa moldura de 116px o retrato
     fica levemente macio — o mesmo macio de uma foto revelada em papel.
     A saturação e o contraste leves puxam a foto para o creme da página em
     vez de deixá-la parecer um recorte colado. */
  filter:saturate(1.04) contrast(1.03);
  box-shadow:0 0 0 5px var(--papel), 0 0 0 6px rgba(94,112,70,.30), 0 10px 22px -8px rgba(51,66,42,.45);
}
/* O sol atrás da cabeça dela — a mesma respiração de 10s do respiro. */
.retrato::before{
  content:""; position:absolute; inset:-26px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(240,206,124,.55), rgba(240,206,124,0) 66%);
  animation:pulsar 10s ease-in-out infinite;
}
@keyframes pulsar{0%,100%{transform:scale(.92); opacity:.6} 40%{transform:scale(1.08); opacity:1}}

h1{
  margin:0; font-family:var(--display); font-weight:420;
  font-size:clamp(29px,8.2vw,34px); line-height:1.08; letter-spacing:-.014em;
  color:var(--tinta); text-wrap:balance;
}
.funcao{
  margin:9px 0 0; font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--folha);
}
.linhagem{
  margin:6px 0 0; font-family:var(--display); font-size:14.5px; font-weight:350;
  font-style:italic; color:var(--tinta-2); letter-spacing:.005em;
}
/* ── Respire comigo ───────────────────────────────────────────────────────
   O ciclo é de 10s: 4s inspirando, 6s soltando. Não é um número bonito —
   é a frequência de ressonância cardiorrespiratória, seis respirações por
   minuto, que é onde a variabilidade da frequência cardíaca abre. Quem
   pratica reconhece o ritmo. Quem não pratica só acha que acalma. */
.respiro{
  display:flex; align-items:center; gap:13px; margin:20px 0 0;
  /* Mora dentro do .topo, que centraliza tudo: a pílula encolhe até o
     conteúdo e fica no meio sozinha. O text-align volta para a esquerda
     porque as duas linhas de dentro são uma instrução, e instrução
     centralizada em duas linhas vira poema. */
  text-align:left;
  padding:11px 15px 11px 12px; border-radius:100px;
  background:linear-gradient(100deg, rgba(94,112,70,.09), rgba(176,130,56,.07));
  box-shadow:inset 0 0 0 1px rgba(94,112,70,.18);
}
.anel{position:relative; flex:none; width:34px; height:34px; display:grid; place-items:center}
.anel::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.4px solid rgba(94,112,70,.55);
  animation:respirar 10s infinite;
}
.anel::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--folha);
  animation:respirar-miolo 10s infinite;
}
@keyframes respirar{
  0%  {transform:scale(.60); opacity:.45; animation-timing-function:cubic-bezier(.36,0,.34,1)}
  40% {transform:scale(1);   opacity:1;   animation-timing-function:cubic-bezier(.36,0,.34,1)}
  100%{transform:scale(.60); opacity:.45}
}
@keyframes respirar-miolo{
  0%  {transform:scale(1);   opacity:.55; animation-timing-function:cubic-bezier(.36,0,.34,1)}
  40% {transform:scale(1.5); opacity:1;   animation-timing-function:cubic-bezier(.36,0,.34,1)}
  100%{transform:scale(1);   opacity:.55}
}
.respiro-tx{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.respiro-tx b{font-size:12.5px; font-weight:700; letter-spacing:.02em}
/* As duas frases se revezam no mesmo lugar. Elas ficam empilhadas por GRID, e
   não por position:absolute, e a diferença importa desde que o respiro subiu
   para o topo: ali dentro a pilula encolhe até o conteúdo, e texto absoluto
   não entra na conta da largura. A pilula media 169px (a largura de "Respire
   comigo") e o "inspire, contando até quatro" saía 45px para fora dela. No
   grid as duas ocupam a mesma célula, e a mais longa é quem manda. */
.passos{display:grid; font-size:12px; color:var(--tinta-2)}
.passos span{grid-area:1/1; white-space:nowrap}
.passos span:nth-child(1){animation:palavra-a 10s infinite}
.passos span:nth-child(2){animation:palavra-b 10s infinite}
@keyframes palavra-a{0%,2%{opacity:0} 7%,35%{opacity:1} 40%,100%{opacity:0}}
@keyframes palavra-b{0%,40%{opacity:0} 46%,93%{opacity:1} 98%,100%{opacity:0}}

/* ── As abas ──────────────────────────────────────────────────────────────
   A tira fica onde estaria a divisória "Praticar": mesmo lugar, mesma
   altura na página. Ela não é um controle colado por cima do cartão — é a
   própria divisória virando escolha.

   A aba ativa é um pedaço de papel levantado: fundo do papel, sombra curta
   embaixo. As outras são o verde da folhagem em 10%, que é o mesmo fundo
   das fichas de aula. */
.abas{margin:26px 0 0}
.abas-tira{
  display:flex; gap:4px; padding:4px; border-radius:15px;
  background:rgba(94,112,70,.10);
  box-shadow:inset 0 0 0 1px rgba(94,112,70,.20);
}
.aba{
  flex:1; padding:10px 6px; cursor:pointer;
  font-family:var(--corpo); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  border:0; border-radius:11px; background:transparent; color:var(--tinta-2);
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.aba:hover{color:var(--folha-e)}
.aba[aria-selected="true"]{
  color:var(--folha-e); background:var(--papel);
  box-shadow:0 7px 15px -9px rgba(51,66,42,.6), inset 0 0 0 1px rgba(94,112,70,.22);
}
.abas.liga .painel-aba{padding-top:15px}
.abas.liga .painel-aba[hidden]{display:none !important}
.abas.liga .painel-aba{animation:entraAba .26s cubic-bezier(.2,.9,.3,1)}
@keyframes entraAba{from{opacity:0; transform:translateY(7px)}}
/* Com as abas ligadas, o nome da aba já é o título: a divisória de dentro
   do painel só repetiria a palavra que a pessoa acabou de apertar. Sem JS
   ela é o que separa um bloco do outro, e por isso continua no HTML. */
.abas:not(.liga) .abas-tira{display:none}
.abas.liga .painel-aba > .secao{display:none}

/* ── Divisórias desenhadas à mão ──────────────────────────────────────────
   Uma border-top de 1px é uma régua. Este traço tem quatro curvas de Bézier
   que sobem e descem um pixel e meio — é o tremor de uma linha feita com a
   mão apoiada no papel. */
.secao{display:flex; align-items:center; gap:12px; margin:26px 0 15px}
.secao span{
  flex:none; font-size:10.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-2);
}
.secao svg{flex:1; height:7px; min-width:12px; overflow:visible}
.secao path{fill:none; stroke:var(--linha-forte); stroke-width:1.1; stroke-linecap:round}

/* ── As aulas ─────────────────────────────────────────────────────────────
   Formato de programa impresso, não de lista de botões: quando/o quê. A
   coluna da esquerda é fixa em 62px para o "sáb" e o "qua" caírem no mesmo
   eixo — desalinhados, denunciam que cada linha foi montada sozinha. */
.aula{
  display:grid; grid-template-columns:62px minmax(0,1fr) 16px; gap:14px; align-items:start;
  padding:15px 14px; border-radius:16px 18px 16px 18px;
  background:var(--papel-2); box-shadow:inset 0 0 0 1px rgba(43,49,36,.08);
  transition:box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.aula + .aula{margin-top:9px}
.aula:hover{
  transform:translateY(-2px); background:#F5EEDC;
  box-shadow:inset 0 0 0 1px rgba(94,112,70,.34), 0 10px 20px -12px rgba(51,66,42,.42);
}
.quando{display:flex; flex-direction:column; align-items:flex-start; padding-top:1px}
.quando b{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--folha); white-space:nowrap;
}
.quando i{
  font-family:var(--display); font-style:normal; font-weight:430;
  font-size:20px; line-height:1.14; letter-spacing:-.01em; color:var(--tinta);
  font-variant-numeric:lining-nums;
}
.quando u{
  text-decoration:none; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-2); margin-top:2px;
}
.oque{min-width:0}
.oque b{
  display:block; font-family:var(--display); font-weight:470; font-size:17.5px;
  line-height:1.22; letter-spacing:-.008em;
}
.oque .onde{display:block; font-size:12.5px; color:var(--tinta-2); margin-top:3px; line-height:1.45}
.oque .oferta{
  display:inline-block; margin-top:7px; font-size:11.5px; line-height:1.5;
  color:var(--folha-e); background:rgba(94,112,70,.12); border-radius:7px; padding:3px 8px;
}
.aula.fogo .quando b{color:var(--fogo)}
.aula.fogo .oque .oferta{color:#7C3D1D; background:rgba(184,95,53,.13)}
.seta{align-self:center; color:var(--tinta-2); opacity:.55; transition:transform .22s ease, opacity .22s}
.seta svg{display:block; width:16px; height:16px}
.aula:hover .seta{transform:translateX(3px); opacity:1}

/* ── Aula pausada ─────────────────────────────────────────────────────────
   Turma sem data marcada. O selo ocupa o lugar exato onde estava o horário,
   e é isso que resolve o problema: enquanto houver "SÁBADO 8h30" ali, o
   cartão marca um encontro que não existe, e quem for ao parque num sábado
   vazio não volta mais.

   O que NÃO muda é tão importante quanto: o bloco continua com o mesmo
   creme, o mesmo peso e a mesma vaga na lista. Deixar a aula pausada
   cinzenta seria anunciar que acabou — e ela não acabou, está entre turmas.
   Cinza aqui custaria a lista de espera inteira. */
.aula.pausada .quando{justify-content:center; padding-top:2px}
/* O selo quebra em duas linhas — EM / BREVE — de propósito.
   Numa linha só ele media uns 88px, e a coluna do horário tem 62 (56 no
   celular): o selo vazava da coluna e encostava no título "Yoga no
   Parque". Empilhado, ele cabe na coluna e ainda rima com a linha de
   cima, onde YOGA / ON-LINE também são uma pilha. */
.aula.pausada .selo{
  display:inline-block; max-width:100%; padding:5px 7px;
  border-radius:8px 9px 8px 9px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.3; text-align:center; color:#7C3D1D;
  background:rgba(184,95,53,.15); box-shadow:inset 0 0 0 1px rgba(184,95,53,.32);
}
/* A chamada é o que transforma um aviso em pedido. Sem ela, "Em breve" é só
   uma porta fechada; com ela, o clique vira nome numa lista. Serve às duas
   linhas que pedem alguma coisa: verde no clube, fogo no parque. */
.aula .chamada{
  display:block; margin-top:8px; font-size:12px; font-weight:700;
  color:var(--folha-e); letter-spacing:.01em;
}
.aula .chamada::after{content:" \2192"; font-weight:400}
.aula:hover .chamada{text-decoration:underline; text-underline-offset:3px}
.aula.pausada .chamada{color:var(--fogo)}

/* ── O cupom ──────────────────────────────────────────────────────────────
   Mesma pilha das aulas — CUPOM / 10% / OFF no lugar de SEG–SEX / 7h /
   AO VIVO — para ele parecer parte do programa, e não anúncio colado por
   cima. O que o denuncia como cupom é o picote: a linha tracejada entre as
   colunas e os dois meios-círculos mordidos na borda, como no canhoto de
   um ingresso de papel.

   Os meios-círculos são buracos DE VERDADE, feitos com máscara, e não
   bolinhas pintadas da cor do papel: o cartão tem grão por cima, e bolinha
   lisa apareceria como remendo.

   --corte é onde passa o picote: goteira + coluna da esquerda + meio vão.
   Mexeu no padding, na coluna ou no gap da .aula, refaça a conta aqui — e
   no bloco do celular, mais abaixo, que tem a conta dele. */
.aula.cupom{
  --corte:83px;                                        /* 14 + 62 + 14/2 */
  position:relative;
  grid-template-columns:62px minmax(0,1fr);
  background:#F4E9CE;
  -webkit-mask:
    radial-gradient(circle 7px at var(--corte) 0,    #0000 96%, #000) top    / 100% 51% no-repeat,
    radial-gradient(circle 7px at var(--corte) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 7px at var(--corte) 0,    #0000 96%, #000) top    / 100% 51% no-repeat,
    radial-gradient(circle 7px at var(--corte) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
}
.aula.cupom::before{
  content:""; position:absolute; left:var(--corte); top:11px; bottom:11px;
  border-left:1.5px dashed rgba(176,130,56,.55); transform:translateX(-50%);
}
.aula.cupom .quando b{color:#86601F}

/* O código é um <button>, e o ::after dele se estica por cima do canhoto
   inteiro: tocar em qualquer ponto do cupom copia, e não só no tracejado.
   O botão NÃO pode ganhar position — se ganhar, a camada encolhe para o
   tamanho dele e o resto do canhoto para de responder. */
.cupom .codigo{
  display:inline-flex; align-items:center; gap:9px; max-width:100%; margin-top:8px;
  padding:5px 9px 5px 11px; border-radius:8px 9px 8px 9px;
  border:1.5px dashed rgba(176,130,56,.62); background:rgba(255,252,243,.7);
  font:inherit; color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:border-color .2s ease, background .2s ease;
}
.cupom .codigo::after{content:""; position:absolute; inset:0}
.cupom .codigo:focus-visible{outline:2px solid var(--folha); outline-offset:2px}
.cupom .cod{font-size:13.5px; font-weight:700; letter-spacing:.06em; color:var(--tinta)}
.cupom .copiar{
  display:inline-flex; align-items:center; gap:4px; padding-left:9px;
  border-left:1px solid rgba(176,130,56,.35);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#86601F;
}
.cupom .copiar svg{width:13px; height:13px; flex:none}
.cupom .i-ok{display:none}
.aula.cupom:hover .codigo{border-color:rgba(176,130,56,.9)}
/* Depois do toque: o tracejado vira linha cheia e verde, o ícone vira um
   visto e o "copiar" vira "copiado" — a pessoa sabe que já pode colar. */
.cupom .codigo.copiado, .aula.cupom:hover .codigo.copiado{
  border-style:solid; border-color:rgba(94,112,70,.55); background:rgba(94,112,70,.1);
}
.codigo.copiado .copiar{color:var(--folha-e); border-left-color:rgba(94,112,70,.35)}
.codigo.copiado .i-copiar{display:none}
.codigo.copiado .i-ok{display:block}

/* O link da loja fica ACIMA da camada do botão (z-index), e por isso
   continua sendo link. display:table para ele ocupar só a largura do
   texto: o resto da linha continua sendo "tocar para copiar". */
.cupom-loja{
  position:relative; z-index:1; display:table; margin-top:9px;
  font-size:12px; font-weight:700; letter-spacing:.01em; color:#86601F;
}
.cupom-loja::after{content:" \2192"; font-weight:400}
.cupom-loja:hover{text-decoration:underline; text-underline-offset:3px}
.cupom-loja:focus-visible{outline:2px solid var(--folha); outline-offset:3px; border-radius:3px}

/* ── Contato ──────────────────────────────────────────────────────────── */
.salvar{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:15px; border:0; border-radius:15px 17px 15px 17px; cursor:pointer;
  font-family:var(--corpo); font-size:13.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#FBF7EA;
  background:linear-gradient(140deg,#65784B,#4B5C38);
  box-shadow:0 10px 22px -12px rgba(51,66,42,.85), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.salvar:hover{transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(51,66,42,.9), inset 0 1px 0 rgba(255,255,255,.22)}
.salvar svg{width:18px; height:18px; flex:none}
.salvar.pronto, .salvar.pronto:hover{
  background:rgba(94,112,70,.13); color:var(--folha-e); transform:none; cursor:default;
  box-shadow:inset 0 0 0 1.4px rgba(94,112,70,.45);
}
@keyframes acenar{0%,100%{transform:translateY(-14%)} 50%{transform:none}}
.acena{animation:acenar 1s ease-in-out infinite}

.caixa{
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  border-radius:15px 17px 15px 17px; background:var(--papel-2);
  box-shadow:inset 0 0 0 1px rgba(43,49,36,.08);
  transition:box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.caixa:hover{transform:translateY(-2px); background:#F5EEDC; box-shadow:inset 0 0 0 1px rgba(94,112,70,.34)}
.caixa svg{width:19px; height:19px; flex:none}
.caixa .tx{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.caixa .tx b{font-size:12.5px; font-weight:700}
.caixa .tx small{font-size:11px; color:var(--tinta-2); letter-spacing:.01em; overflow-wrap:anywhere}
.i-folha{color:var(--folha)} .i-sol{color:var(--sol)} .i-fogo{color:var(--fogo)}
/* Da segunda caixa em diante: o respiro entre uma e outra. */
.caixa.largo{margin-top:9px}
/* O "Salvar meu contato" fecha a seção, depois das duas caixas. */
.caixa + .salvar{margin-top:14px}
/* overflow-wrap:anywhere no <small> já existe, e é ele que impede o e-mail
   de 29 caracteres de esticar a caixa e estourar o cartão para fora da tela
   num celular estreito. */

/* Num celular de 375px sobram uns 170px para o texto da aula depois da
   coluna do horário, das duas goteiras e da seta — e aí "yoga · café da
   manhã · massagem" quebra no meio. A seta é enfeite: a linha inteira já é
   um link e no toque não existe passar o mouse. Fora ela, e apertando a
   coluna da esquerda, a frase volta a caber. */
@media (max-width:430px){
  .aula{grid-template-columns:56px minmax(0,1fr); gap:11px; padding:14px 13px}
  .seta{display:none}
  .quando i{font-size:19px}
  /* Rótulo de sete letras ("ON-LINE", e antes "QUARTAS" e "SEG–SEX") mede
     58px a .16em, e a coluna do celular tem 56: quebrava no meio. A .11em
     cabe inteiro (55px). */
  .quando b{letter-spacing:.11em}
  .oque .oferta{font-size:11px; padding:3px 7px}
  .aula.cupom{grid-template-columns:56px minmax(0,1fr); --corte:74.5px}   /* 13 + 56 + 11/2 */
}

/* ── A frase ──────────────────────────────────────────────────────────────
   Sem aspas tipográficas gigantes: a frase é dela, publicada no feed dela,
   e não precisa de moldura para valer. O recuo e a barrinha à esquerda
   bastam para dizer que é fala e não legenda. */
.frase{
  margin:24px 0 0; padding:2px 0 2px 17px; position:relative;
}
.frase::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(94,112,70,.65), rgba(176,130,56,.45));
}
.frase blockquote{
  margin:0; font-family:var(--display); font-weight:360; font-style:italic;
  font-size:17px; line-height:1.5; color:var(--tinta); text-wrap:pretty;
}

/* ── Os roteiros ──────────────────────────────────────────────────────────
   NA TELA É "ROTEIRO"; NO CÓDIGO CONTINUA "ROTA". A palavra que a pessoa lê
   mudou em 15/09/2026, a pedido dela. As classes (.rota, .rota-dica,
   .rota-oferta…) e os dois eventos de métrica ("rota" e "rota_compra")
   ficaram com o nome velho de propósito: o nome do evento está escrito nas
   três listas — m.php, lista.php e o espelho da INOVI — e trocá-lo partiria
   o histórico em dois, com o painel mostrando uma coisa antes e outra
   depois. Nome de classe e nome de evento são encanamento; o que a pessoa
   lê é que tinha que mudar.
   Feito com <details>/<summary> nativos, sem uma linha de JavaScript.
   Não é economia: o <details> já vem com o estado aberto/fechado, o foco
   pelo teclado, o anúncio correto no leitor de tela e a busca do navegador
   (Ctrl+F acha texto dentro de um <details> fechado e o abre sozinho).
   Refazer isso à mão daria mais código e menos acessibilidade.

   Fechado por padrão de propósito: são as rotas dela, não a apresentação.
   Quem quiser vê, quem não quiser rola por cima — e o cartão não cresce
   meia tela por causa de uma seção secundária. */
.rotas-intro{
  margin:0 0 11px; font-family:var(--display); font-style:italic; font-weight:360;
  font-size:14.5px; line-height:1.5; color:var(--tinta-2);
}
.rotas{display:flex; flex-direction:column; gap:7px}
.rota{
  border-radius:14px 16px 14px 16px; background:var(--papel-2);
  box-shadow:inset 0 0 0 1px rgba(43,49,36,.08);
  transition:box-shadow .2s ease, background .2s ease;
  overflow:hidden;
}
.rota[open]{background:#F5EEDC; box-shadow:inset 0 0 0 1px rgba(94,112,70,.30)}
.rota summary{
  display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
  list-style:none;                    /* tira o triângulo padrão no Firefox */
  -webkit-tap-highlight-color:transparent;
}
.rota summary::-webkit-details-marker{display:none}   /* e no Safari/Chrome */
.rota summary:hover .rota-nome{color:var(--folha-e)}
/* 24px, e não os 15 do pino antigo, que era um contorno simples. São duas
   pegadas em rastro. Cada pé é uma planta e um calcanhar deslocados — é o
   deslocamento que abre o arco e faz a sola virar feijão em vez de ovo — e
   três dedos soltos por cima. O desenho é o que ela mandou de referência.

   22px é o menor tamanho em que os dedos ainda se separam da sola; a 20px
   cada pé virava uma mancha em forma de fechadura. Provado lado a lado
   antes de escolher. */
.rota .pino{flex:none; width:22px; height:22px; color:var(--folha); opacity:.75}
.rota-nome{
  font-family:var(--display); font-weight:460; font-size:16px; line-height:1.2;
  letter-spacing:-.006em; transition:color .2s ease;
}
.rota-onde{
  flex:1; min-width:0; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rota .abre{flex:none; width:13px; height:13px; color:var(--tinta-2); opacity:.55;
  transition:transform .22s ease, opacity .2s ease}
.rota[open] .abre{transform:rotate(180deg); opacity:1}
/* O recuo com a barrinha é o mesmo desenho da citação lá em cima: aqui
   também é ela falando, e não legenda do cartão. */
.rota-dica{
  padding:0 14px 14px 39px; font-size:13.5px; line-height:1.62; color:var(--tinta);
  position:relative;
}
.rota-dica::before{
  content:""; position:absolute; left:21px; top:1px; bottom:15px; width:2px;
  border-radius:2px; background:linear-gradient(180deg, rgba(94,112,70,.55), rgba(176,130,56,.35));
}
.rota-dica p{margin:0}
.rota-dica p + p{margin-top:7px}
.rota-dica em{
  font-family:var(--display); font-style:italic; color:var(--tinta-2);
}

/* ── Roteiro que ainda não abriu ───────────────────────────────────────────
   Hoje só a Suíça está de pé; os outros ficam meio apagados, a pedido dela
   (23/09/2026). Meio apagados, e não escondidos: a dica dela continua lá
   dentro para quem abrir, e o roteiro continua existindo na lista — some
   da frente de quem procura o que dá para fazer agora, sem sumir do
   cartão. É a mesma ideia do selo EM BREVE na ficha do parque, dita em
   opacidade em vez de palavra.

   Quando um deles abrir, é só tirar a classe "espera" do <details>. */
.rota.espera{opacity:.55}
.rota.espera:hover{opacity:.85}

/* ── A oferta dentro da rota ──────────────────────────────────────────────
   Uma rota pode ter roteiro à venda ou não, e o cartão precisa aguentar os
   dois sem mudar de forma: ela publica o lugar quando volta da viagem e
   pendura o link no dia em que o roteiro existir.

   A dica de graça é o que faz querer o roteiro pago. Por isso a oferta vem
   DEPOIS do texto, dentro da rota já aberta — quem chegou até aqui se
   interessou. Preço visível na lista fechada transformaria a seção numa
   vitrine, e o cartão inteiro tem o tom oposto disso.

   Dourado, e não verde: no cartão o verde é a prática (aula, WhatsApp,
   salvar contato). Viagem é outra linha de produto, e o olho separa as duas
   sem ninguém precisar explicar. */
.rota-oferta{
  display:flex; align-items:center; gap:11px; margin-top:12px;
  padding:11px 13px; border-radius:13px 15px 13px 15px;
  background:linear-gradient(135deg, rgba(176,130,56,.14), rgba(176,130,56,.05));
  box-shadow:inset 0 0 0 1px rgba(176,130,56,.30);
  transition:box-shadow .2s ease, transform .2s ease;
}
.rota-oferta:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(176,130,56,.55), 0 8px 18px -12px rgba(120,86,30,.5);
}
.rota-oferta .tx{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.rota-oferta .tx b{
  font-family:var(--display); font-weight:470; font-size:14.5px; color:var(--tinta);
}
.rota-oferta .tx span{font-size:11.5px; color:var(--tinta-2); margin-top:2px}
.rota-oferta .preco{
  flex:none; font-family:var(--display); font-weight:520; font-size:15px;
  color:#8A6524; letter-spacing:-.01em; font-variant-numeric:lining-nums;
}
.rota-oferta .seta-c{flex:none; width:13px; height:13px; color:#8A6524; opacity:.7}

@media (max-width:430px){
  .rota summary{padding:11px 12px; gap:9px}
  .rota-dica{padding-left:34px}
  .rota-dica::before{left:18px}
  .rota-oferta{padding:10px 11px; gap:9px}
  .rota-oferta .tx b{font-size:13.5px}
}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.rodape{margin-top:24px; text-align:center}
.redes{display:flex; justify-content:center; gap:10px; margin:0 0 14px}
.rede{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--papel-2); color:var(--tinta); box-shadow:inset 0 0 0 1px rgba(43,49,36,.10);
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.rede svg{width:17px; height:17px; display:block}
.rede:hover{transform:translateY(-3px)}
.rede.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888); color:#fff; box-shadow:none}
.rede.wa:hover{background:#25D366; color:#04231A; box-shadow:none}
.assinatura{width:26px; height:26px; margin:0 auto 4px; opacity:.6}
.rodape p{
  margin:0; font-size:10.5px; letter-spacing:.1em; line-height:1.85; color:var(--tinta-2);
}
/* O sublinhado fino é o que diz que o @ é clicável. Sem ele, texto do
   rodapé com a cor do rodapé não parece porta nenhuma — e essa é a
   última chance do cartão de mandar alguém para o Instagram dela. */
.rodape .arroba{
  color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(43,49,36,.28);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.rodape .arroba:hover{color:var(--tinta); text-decoration-color:currentColor}

/* ── Flutuantes ───────────────────────────────────────────────────────── */
.fabs{position:fixed; top:16px; right:16px; z-index:6; display:flex; gap:9px}
.fab{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0;
  background:rgba(248,242,229,.82); border:1px solid rgba(43,49,36,.13); color:var(--tinta);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(51,66,42,.6);
  transition:background .18s ease, transform .18s ease, color .18s ease;
}
.fab:hover{transform:translateY(-2px); background:#FBF7EC}
.fab[aria-expanded="true"]{background:var(--folha); border-color:var(--folha); color:#F8F2E5}
.fab svg{width:20px; height:20px; display:block}

/* ── Painel do QR ─────────────────────────────────────────────────────── */
.veu{
  position:fixed; inset:0; z-index:7; display:grid; place-items:center; padding:20px;
  background:rgba(43,49,36,.44);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  animation:aparecer .2s ease;
}
.veu[hidden]{display:none}
@keyframes aparecer{from{opacity:0} to{opacity:1}}
.painel{
  width:100%; max-width:340px; text-align:center; background:var(--papel);
  border-radius:26px 30px 24px 28px; padding:26px 24px 20px;
  box-shadow:0 30px 70px -22px rgba(30,40,22,.7);
  animation:subir .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes subir{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}
.painel h2{margin:0 0 5px; font-family:var(--display); font-weight:450; font-size:20px; letter-spacing:-.01em}
.painel .sub{margin:0 0 17px; font-size:13px; color:var(--tinta-2); line-height:1.5}
/* Sem fundo branco e quase sem recheio: o PNG do QR já traz 4 módulos de
   zona de silêncio no mesmo creme do cartão, então o desenho encosta no
   painel sem emenda. Um retângulo branco aqui faria o QR parecer um adesivo
   colado por cima do papel. */
#qr{width:208px; height:208px; margin:0 auto 14px; padding:0; border-radius:14px;
    background:var(--papel); box-shadow:inset 0 0 0 1px rgba(43,49,36,.09); overflow:hidden}
#qr img{display:block; width:100%; height:auto}
.qrlink{margin:0 0 14px; font-size:12px; letter-spacing:.04em; color:var(--tinta-2); user-select:all}
.acoes{display:flex; gap:8px}
.acoes button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:12px 10px; border-radius:12px; border:1px solid rgba(43,49,36,.12);
  font-family:var(--corpo); font-size:13px; font-weight:700; color:var(--tinta);
  background:var(--papel-2); transition:background .18s ease, border-color .18s ease;
}
.acoes button:hover{background:#F5EEDC; border-color:rgba(94,112,70,.4)}
.acoes button svg{width:15px; height:15px}
.acoes .fechar{flex:0 0 auto; padding-inline:18px; color:var(--tinta-2); font-weight:600}

#aviso{
  position:fixed; left:50%; bottom:24px; z-index:9; transform:translate(-50%,14px);
  background:var(--tinta); color:#F8F2E5; font-size:13px; font-weight:700;
  padding:11px 18px; border-radius:11px; opacity:0; pointer-events:none;
  box-shadow:0 16px 34px -14px rgba(30,40,22,.8);
  transition:opacity .2s ease, transform .2s ease;
}
#aviso.on{opacity:1; transform:translate(-50%,0)}

/* Quem pediu menos movimento no sistema recebe a cena parada: a copa fica
   desenhada e nada pisca. O cartão continua inteiro — não é uma versão
   pobre, é a mesma sem o vento. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}


.privacy-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px;margin-bottom:20px}.privacy-links a{text-decoration:underline}.clipboard-fallback{position:fixed;opacity:0;pointer-events:none}.site-link{background:var(--papel-2)}
.copyright{font-size:11px;color:var(--tinta-2)}