/* v2 · personalidade (direção aprovada 23/10, com. 10438476573). Por cima do pv.css da v1.
   A página como copy revisto à mão: marcador amarelo nas palavras que vendem, riscos e círculos
   manuscritos, uma única letra manuscrita (Caveat) para as anotações. Menos caixas, mais respiro. */
@font-face{font-family:'Caveat';src:url('fonts/Caveat.ttf');font-weight:400 700;font-display:block}

/* marcador amarelo: traço de marcador irregular por trás da palavra */
.mk{position:relative;isolation:isolate;color:var(--preto);white-space:nowrap;padding:0 .08em}
.mk::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.14em;top:.12em;bottom:.02em;transform:rotate(-1.2deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C30 3 70 6 110 4 S170 2 197 5 L195 14 L198 22 L194 34 C150 38 90 35 50 37 S12 38 3 35 L5 24 L2 15 Z' fill='%23eeba20'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.claro .mk{color:var(--preto)}

/* sublinhado à mão */
.sublinha{position:relative;white-space:nowrap}
.sublinha::after{content:"";position:absolute;left:-2px;right:-4px;bottom:-.28em;height:.42em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C60 6 140 9 210 7 S280 5 297 9 M40 16 C110 12 190 14 260 12' fill='none' stroke='%23eeba20' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* círculo à mão à volta de um número */
.circ{position:relative;white-space:nowrap}
.circ::after{content:"";position:absolute;left:-.55em;right:-.6em;top:-.42em;bottom:-.38em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M70 6 C40 2 8 10 6 30 C4 50 40 56 66 55 C96 54 116 44 114 28 C112 12 90 5 58 8 C46 9 36 12 30 15' fill='none' stroke='%23eeba20' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* risco à mão + a palavra que entra por cima */
.risca{position:relative;white-space:nowrap;color:#8f8b84}
.risca::after{content:"";position:absolute;left:-.1em;right:-.12em;top:.36em;height:.36em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 18 C80 12 160 16 296 8 M10 24 C100 18 200 20 292 14' fill='none' stroke='%23e2735f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mao{font-family:'Caveat',cursive;font-weight:700;letter-spacing:0;color:var(--amarelo)}
.troca{position:absolute;left:50%;top:-.95em;transform:translateX(-30%) rotate(-5deg);font-size:.95em;line-height:1;white-space:nowrap}
.troca::before{content:"";position:absolute;left:-.55em;bottom:-.25em;width:.5em;height:.4em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 14 L10 3 L18 14' fill='none' stroke='%23eeba20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* mobile: o título parte antes do risco, dá-se altura à linha para a emenda não pisar a de cima */
@media (max-width:899px){.h2-mao .risca{display:inline-block;margin-top:.8em}}

/* 1 · hero: menos moldura, a Marisa a sair da caixa e a Fabíola pregada como nota */
.hero .etiqueta{border:0;padding:0;border-radius:0;color:var(--amarelo);letter-spacing:.02em}
.hero h1 .mk{color:var(--preto)}
.hero-foto{position:relative;padding-top:12%}
.hero-foto .caixa{position:absolute;left:4%;right:0;bottom:0;height:62%;background:var(--amarelo);border-radius:18px;transform:rotate(-1.5deg)}
.hero-foto .recorte{position:relative;width:104%;max-width:none;margin-left:-4%;border-radius:0;aspect-ratio:auto;max-height:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.nota{position:absolute;left:-6%;top:2%;width:250px;background:var(--creme);color:var(--preto);border:0;padding:20px 20px 16px;margin:0;transform:rotate(-4deg);box-shadow:0 14px 30px rgba(0,0,0,.35);border-radius:2px;z-index:2}
.nota::before{content:"";position:absolute;left:50%;top:-12px;width:84px;height:24px;transform:translateX(-50%) rotate(3deg);background:rgba(238,186,32,.75)}
.nota p{font-size:16px;font-weight:700;line-height:1.35}
.nota cite{color:var(--cz-claro);font-size:12.5px;margin-top:8px}
.sob-btn .circ{margin:0 8px 0 6px}

/* 3 · solução: título corrigido à mão, tabela como revisão (o que riscas e o que fica) */
.solucao .kicker{margin-bottom:56px}
.h2-mao{font-size:30px;max-width:1000px;margin-bottom:40px}
.solucao .mk{color:var(--preto)}
.edicao .mk{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(176deg,transparent 8%,var(--amarelo) 8%,var(--amarelo) 94%,transparent 94%);padding:0 .2em;border-radius:3px}
.edicao .mk::before{content:none}
.revisao{margin-top:80px;max-width:1060px}
.rv-cab{display:none}
.rv{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--linha)}
.rv:last-child{border-bottom:1px solid var(--linha)}
.rv s{text-decoration:none;position:relative;color:#9b968e;font-size:16px;align-self:flex-start;justify-self:start}
.rv s::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:10px;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C70 4 150 8 297 5' fill='none' stroke='%23e2735f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.rv b{font-size:19px;font-weight:700;line-height:1.35;color:var(--branco)}
.rv b::before{content:"→ ";color:var(--amarelo);font-family:'Caveat',cursive;font-size:1.3em}

/* 5 · os 3 dias: um desenho de linha por dia, sem cartões */
.dias h2{margin-bottom:48px}
.linha-tempo::before{display:none}
.dia{padding-left:0;display:flex;flex-direction:column;gap:18px;margin-bottom:56px;padding-bottom:48px;border-bottom:1.5px dashed rgba(27,27,27,.18)}
.dia:last-child{border-bottom:0;margin-bottom:24px}
.desenho{position:relative;width:150px}
.desenho svg{width:150px;height:auto;display:block;overflow:visible}
.desenho .tr path,.desenho .tr circle{fill:none;stroke:var(--preto);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.desenho .tr .am{fill:var(--amarelo);stroke:none;transform:translate(5px,5px)}
.desenho .tr .grosso{stroke-width:3.6}
.desenho .tr .vermelho{stroke:var(--bordeaux);stroke-width:3}
.desenho .tr .olho{fill:var(--preto)}
.dia-n{position:static;width:auto;height:auto;background:none;border-radius:0;display:block;margin-top:6px;font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--bordeaux);line-height:1;transform:rotate(-4deg)}
.selo{background:none!important;border-left:0;padding:0;border-radius:0;color:var(--preto)!important;font-size:16px!important;font-weight:600;font-style:italic;margin-top:18px}
.selo .circ::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M70 6 C40 2 8 10 6 30 C4 50 40 56 66 55 C96 54 116 44 114 28 C112 12 90 5 58 8 C46 9 36 12 30 15' fill='none' stroke='%23740000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.fecho-dias{margin-left:0}

@media (min-width:900px){
  .hero{padding-bottom:40px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;margin-top:0}
  .hero .etiqueta{font-size:12.5px;margin-bottom:18px}
  h1{font-size:50px;line-height:1.08;margin-bottom:18px}
  .h1-2{font-size:.44em;margin-top:16px;line-height:1.45;max-width:560px}
  .hero-sub>p{font-size:16px;max-width:520px}
  .hero-cta{margin-top:28px}
  .hero-foto{padding-top:0;margin:0 -110px 10px 0}
  .hero-foto .caixa{left:12%;right:4%;height:54%}
  .hero-foto .recorte{width:118%;margin-left:-14%}
  .nota{left:-6%;top:auto;bottom:-6%;width:230px;transform:rotate(-5deg)}
  .nota p{font-size:15px}

  .h2-mao{font-size:56px;line-height:1.1;margin-bottom:56px}
  .sol-grid{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .solucao .corpo{font-size:18px;max-width:none}
  .edicao{margin-top:28px;flex-direction:column;align-items:flex-start;gap:18px}
  .edicao .corpo{font-size:21px;line-height:1.5}
  .gif-mini{flex:none;width:320px;max-width:320px;transform:rotate(-1.5deg)}
  .gif-grande{transform:rotate(1.2deg)}
  .rv-cab{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;padding-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .rv-cab span:first-child{color:var(--perda-escuro)}
  .rv-cab span:last-child{color:var(--amarelo)}
  .rv{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;padding:22px 0}
  .rv s{font-size:17px}
  .rv b{font-size:21px}

  .dia{display:grid;grid-template-columns:170px 1fr 400px;gap:48px;padding-left:0;align-items:start}
  .desenho,.desenho svg{width:170px}
  .dia-n{font-size:34px}
  .dia h3{font-size:30px}
}

/* acertos da 1.ª leitura */
.selo .circ{margin-left:.4em}
.dia .gif{transform:rotate(1deg)}
.dia:nth-child(2) .gif{transform:rotate(-1deg)}
@media (min-width:900px){.dia-n{font-size:40px}}

/* ===== página toda (24/10, «continua e faz tudo», com. 10438566115) ===== */
/* fita-cola: prints, notas e o painel ficam «pregados» na página, como no mural V4 */
.fita{position:absolute;left:50%;top:-12px;width:90px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(238,186,32,.72);z-index:3;pointer-events:none}
/* marcador para frases longas (parte em linhas sem perder o traço) */
.mk-l{color:var(--preto);box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(176deg,transparent 10%,var(--amarelo) 10%,var(--amarelo) 92%,transparent 92%);padding:0 .14em;border-radius:3px}

/* 2 · em jogo: pirâmide com notas na margem, perdas como números riscados à mão (sem cartões) */
.jogo h2 .mk{color:var(--preto)}
.piramide{position:relative}
.degrau{border-radius:6px}
.d3{transform:rotate(-.8deg)}
.mao-nota{font-family:'Caveat',cursive;font-weight:700;font-size:20px!important;letter-spacing:0;opacity:1!important}
.d1 .mao-nota{color:var(--bordeaux)}
.seta-d3{display:none}
.perdas{grid-template-columns:1fr 1fr;gap:0}
.perda{background:none;border-radius:0;border-top:0;border-bottom:1.5px dashed rgba(27,27,27,.2);padding:16px 8px 16px 0}
.perda svg{stroke:var(--bordeaux);stroke-width:2.6}
.frase-final .mk-l{padding:0 .12em}

/* 4 · porquê agora: «2 horas» circulado, a Fabíola como nota pregada, prints em mural */
.duas-horas b .circ.grande::after{left:-.18em;right:-.2em;top:-.12em;bottom:-.1em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M70 6 C40 2 8 10 6 30 C4 50 40 56 66 55 C96 54 116 44 114 28 C112 12 90 5 58 8 C46 9 36 12 30 15' fill='none' stroke='%23eeba20' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.fabiola{position:relative;background:var(--creme);color:var(--preto);border-radius:2px;transform:rotate(1.2deg);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.fabiola .barra{background:#ddd6c6}
.fabiola .fb-et{color:var(--bordeaux)}
.fabiola .fb-linha.boa .fb-et{color:var(--preto)}
.fabiola .barra i{background:var(--bordeaux)}
.fabiola .boa .barra i{background:var(--amarelo)}
.fabiola .fb-linha.boa small{background:var(--amarelo);padding:0 6px;border-radius:2px}
.fb-nota{color:var(--cz-claro);border-top:1.5px dashed rgba(27,27,27,.2)}
.prints{margin-top:72px}
.print{position:relative;padding-top:8px}
.print img{border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.print:nth-child(odd) img{transform:rotate(-1.4deg)}
.print:nth-child(even) img{transform:rotate(1.2deg)}
.print figcaption{border-left:0;padding-left:0;margin-top:16px}
.print figcaption::before{content:"↑ ";font-family:'Caveat',cursive;font-weight:700;color:var(--amarelo);font-size:1.3em}
.porque-nov .mk{color:var(--preto)}

/* 6 · o que montas: sem cartões, uma lista de coisas feitas com o nome de quem as fez sublinhado */
.montas h2 .mk{color:var(--preto)}
.g-et{font-family:'Caveat',cursive;font-size:32px;font-weight:700;letter-spacing:0;text-transform:none;border-bottom:0;padding-bottom:0;margin-bottom:4px;transform:rotate(-2deg);transform-origin:left}
.grupo{margin-bottom:44px}
.cartoes{gap:0 40px}
.c{background:none;border:0;border-top:1.5px dashed var(--linha);border-radius:0;padding:18px 0}
.c b{font-size:18px}
.c u{text-decoration:none;color:var(--branco);background:linear-gradient(transparent 82%,var(--amarelo) 82%,var(--amarelo) 94%,transparent 94%)}
.caixa5{position:relative;border-radius:2px;transform:rotate(-.6deg);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.caixa5 .fita{background:rgba(242,239,231,.8)}

/* 7 · quem: a Marisa em palco, e o computador pregado por cima */
.quem-foto{position:relative;padding-bottom:22%}
.quem-foto .palco{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:84%;transform:rotate(-1.5deg);box-shadow:0 20px 44px rgba(0,0,0,.25)}
.quem-foto .pc{position:absolute;right:0;bottom:0;width:56%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;border:8px solid #fff;transform:rotate(3deg);box-shadow:0 18px 36px rgba(0,0,0,.3)}
.quem h2 .mk{color:var(--preto)}
.agentes{gap:10px 22px}
.agentes li{background:none;padding:0;color:var(--cz-claro);font-size:14px}
.agentes b{font-family:'Caveat',cursive;font-size:28px;color:var(--bordeaux);margin-right:4px;line-height:1}
.quem-fim{border-left:0;padding-left:0}

/* 8 · oferta: o painel como folha pregada, preço circulado, vistos à mão */
.painel{position:relative;border-radius:4px;transform:rotate(-.5deg)}
.painel .fita{width:120px;top:-14px}
.itens li::before{background:none;width:24px;height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13 C5 14 8 17 9.5 19.5 C12 13 16 7 22 3' fill='none' stroke='%23740000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.itens li{border-bottom:1.5px dashed var(--linha-c)}
.preco{border-top:2px solid var(--preto)}
.preco-circ::after{left:-.22em;right:-.26em;top:-.08em;bottom:-.06em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M70 6 C40 2 8 10 6 30 C4 50 40 56 66 55 C96 54 116 44 114 28 C112 12 90 5 58 8 C46 9 36 12 30 15' fill='none' stroke='%23eeba20' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}

/* 9 · faq: o «+» à mão; a chamada sem caixa, só tracejado */
.acordeao summary::after{font-family:'Caveat',cursive;font-weight:700;font-size:34px;top:8px}
.acordeao details{border-bottom:1.5px dashed var(--linha-c)}
.chamada{background:none;border:2px dashed rgba(27,27,27,.25);border-radius:6px}

/* 10 · comentários pregados */
.ig{position:relative;border-radius:4px}
.ig:first-child{transform:rotate(-1.2deg)}
.ig:last-child{transform:rotate(1deg)}

@media (min-width:900px){
  .seta-d3{display:block;position:absolute;right:4%;top:-6px;width:110px;fill:none;stroke:var(--bordeaux);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .mao-nota{font-size:24px!important}
  .perda{padding:22px 8px 22px 0}
  .perda b{font-size:56px}
  .prints{column-gap:56px}
  .print{margin-bottom:48px}
  .g-et{font-size:38px}
  .cartoes{gap:0 40px}
  .quem-grid{gap:80px}
  .quem-foto{margin-left:-20px}
}

/* acertos da revisão da página toda */
.preco .nota{position:static;transform:none;width:auto;background:none;box-shadow:none;padding:0;margin:0 0 22px;border-radius:0;color:var(--cz-claro);font-size:13px;font-weight:400}
.preco .nota::before{content:none}
.painel{transform:none}
.preco-circ::after{right:-.34em}
.duas-horas b{margin:36px 0 0 12px}
.dh-1{margin-top:44px}
.preco>b{margin:26px 0 30px}

/* largura toda (24/10, com. 10439152169): texto alinhado à esquerda vai até à margem direita,
   como os blocos de colunas; só fica estreito quando há imagem ou elemento ao lado */
@media (min-width:900px){
  h2,.h2-largo{max-width:none}
  .porque-nov,.fecho-dias,.intro,.montas .intro{max-width:none}
  .porque-nov p,.fecho-dias p,.intro{font-size:18px}
  .jogo-grid{grid-template-columns:1fr;gap:40px}
  .perdas{position:static;grid-template-columns:repeat(4,1fr);gap:0 40px;order:-1}
  .perda{border-bottom:1.5px dashed rgba(27,27,27,.2)}
  .jogo-txt p{font-size:18px}
}
@media (min-width:900px){
  .faq-wrap{max-width:1160px}
  .acordeao details p{max-width:none}
  .chamada p{max-width:none}
}