/* ===== ro · Capítulo 2 · a página do reel ===== */
.ro-sec .sec-malha{background:
    radial-gradient(circle at 8% 6% in oklab, #dbd5e6 0%, transparent 46%),
    radial-gradient(circle at 94% 26% in oklab, #f2d6df 0%, transparent 42%),
    radial-gradient(circle at 16% 94% in oklab, #d9d5d7 0%, transparent 48%),
    radial-gradient(circle at 86% 98% in oklab, #e2ddea 0%, transparent 44%),
    var(--papel)}

.ro-topo{display:grid;gap:16px;margin:0 auto clamp(26px,4vw,50px);max-width:620px}
.ro-cap{margin-bottom:0}
.ro-lead{font-size:16.5px;line-height:1.48;padding:15px 18px 14px;transform:rotate(-.5deg)}
[data-entra].ro-lead{--giro:1.2deg}
.visto .ro-lead{transform:rotate(-.5deg)}
.ro-lead b{font-weight:600;background:linear-gradient(transparent 62%,color-mix(in oklab,var(--pink) 30%,transparent) 62%)}

.ro-pag{display:flex;flex-direction:column;gap:var(--g);max-width:620px;margin:0 auto}
.ro-l1,.ro-c1,.ro-l2,.ro-l3,.ro-c4,.ro-c5{display:flex;flex-direction:column;gap:var(--g);min-width:0}

/* quadro do reel: recorte da imagem inteira por variáveis (px da origem 1080×1920) */
.ro-q{aspect-ratio:var(--ar);--tl:0px}
.ro-q .pn-in{background:var(--parede)}
.ro-img{position:absolute;left:0;top:0;max-width:none;width:calc(100% * 1080 / var(--w));height:auto;
  transform:translate(calc(-100% * var(--x) / 1080),calc(-100% * var(--y) / 1920))}
.ro-q1{--x:70;--w:950;--y:160;--ar:950/1400;--tr:8px;--bl:7px;z-index:2}
.ro-q2{--x:105;--w:975;--y:200;--ar:975/1425;--tl:7px;--br:8px}
.ro-q3{--x:140;--w:885;--y:262;--ar:885/1370;--tr:7px;--bl:6px;z-index:3}
.ro-q4{--x:100;--w:905;--y:215;--ar:905/1225;z-index:2;--tl:8px;--br:7px}

.ro-tag-reel{position:absolute;left:-7px;bottom:22px}

/* balões desta página (falas literais dela), no traço à mão dos balões do reel */
.ro-b{position:absolute;isolation:isolate;margin:0;pointer-events:auto;font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;text-align:center;color:var(--tinta);
  font-size:16px;padding:1.05em 1.5em 1.95em;width:max-content;max-width:13.5em}
.ro-b svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.ro-b path{fill:#fffefb;stroke:var(--tinta);stroke-width:3.2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ro-b span{display:block;position:relative}
.ro-b b{color:var(--pink);font-weight:700}
.ro-b-cima{padding:1.95em 1.5em 1.05em}
.ro-b-cima svg{transform:scaleY(-1)}

/* requadro da frase que circula: a palavra vira etiqueta */
.ro-t1{--tl:7px;--br:9px;z-index:4}
.ro-t1 .pn-in{background:
    radial-gradient(circle at 96% 4% in oklab, #45283c 0%, transparent 52%),
    radial-gradient(circle at 0% 100% in oklab, #2d2738 0%, transparent 55%),
    var(--tinta)}
.ro-t1 .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(40deg,#000 0%,#777 14%,#fff 34%)}
.ro-t1-c{position:relative;padding:26px 20px 98px 22px;color:var(--papel)}
.ro-rotulinho{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:#ff6ea6;margin-bottom:10px}
.ro-frase{font-family:var(--f-titulo);font-size:clamp(34px,12.6cqw,74px);line-height:1.2;letter-spacing:-.012em}
.ro-etq{position:relative;isolation:isolate;display:inline-block;color:var(--tinta);padding:.02em .3em .1em .62em;margin:0 .02em 0 -.08em;transform:rotate(-3.5deg)}
.ro-etq svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;filter:drop-shadow(.09em .09em 0 var(--pink))}
.ro-etq path{fill:var(--mel-claro)}
.ro-etq::before{content:"";position:absolute;left:.24em;top:50%;width:.17em;height:.17em;border-radius:50%;background:var(--tinta);transform:translateY(-50%)}
.ro-b-real{right:6px;bottom:-30px;font-size:17px;max-width:11.5em}
.visto .ro-etq{animation:ro-carimbo .5s var(--pop) .62s backwards}
@keyframes ro-carimbo{from{opacity:0;transform:rotate(9deg) scale(1.7)}to{opacity:1;transform:rotate(-3.5deg)}}

/* a etiqueta solta */
.ro-q2{z-index:3}
.ro-b-cont{right:-8px;bottom:1.5%;font-size:15px}
.ro-s2{--tr:8px;--bl:7px}
.ro-s2 .pn-in{display:flex;flex-direction:column;background:
    radial-gradient(circle at 100% 0% in oklab, #f6d5de 0%, transparent 52%),
    radial-gradient(circle at 0% 100% in oklab, #e4e0ea 0%, transparent 55%),
    var(--papel-claro)}
.ro-s2 .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(322deg,#000 0%,#777 16%,#fff 38%)}
.ro-pend{position:relative;width:82%;max-width:330px;height:auto;margin-left:7%;overflow:visible;transform-origin:27% 0;animation:ro-balanca 5.5s ease-in-out infinite alternate}
.ro-pend-fio{fill:none;stroke:var(--tinta);stroke-width:2.5;stroke-linecap:round}
.ro-pend-s{fill:var(--pink)}
.ro-pend-e{fill:var(--mel-claro);stroke:var(--tinta);stroke-width:3.5;stroke-linejoin:round}
.ro-pend circle{fill:var(--papel-claro);stroke:var(--tinta);stroke-width:3}
.ro-pend text{font-family:var(--f-titulo);font-size:42px;fill:var(--tinta);letter-spacing:-.4px}
@keyframes ro-balanca{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
.ro-sec.fora .ro-pend{animation-play-state:paused}
.ro-s2-c{position:relative;padding:8px 22px 30px}
.ro-legal{font-family:var(--f-titulo);font-size:clamp(24px,7.6cqw,31px);line-height:1.14;letter-spacing:-.008em;text-wrap:balance}
.ro-legal em{font-style:normal;color:var(--pink)}

.ro-b-banaliza{right:-8px;bottom:4%;font-size:17px}

.ro-tag-cont{position:absolute;right:-7px;bottom:20px;transform:rotate(-2deg)}
.ro-rec{position:relative;z-index:3;margin:0 10px -22px 0;transform:rotate(-.6deg);font-size:15px}
.ro-rec b{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--pink-sombra);margin-right:2px}
.ro-c4{gap:0}
[data-entra].ro-rec{--giro:-2deg}
.visto .ro-rec{transform:rotate(-.6deg)}

/* a conclusão dela */
.ro-serio{--tr:8px;--bl:6px}
.ro-serio .pn-in{background:
    radial-gradient(circle at 12% 0% in oklab, #de3a78 0%, transparent 55%),
    radial-gradient(circle at 96% 100% in oklab, #9c1848 0%, transparent 56%),
    var(--pink)}
.ro-serio .ret{--ret-o:.22;--ret-t:7px;--ret-g:linear-gradient(140deg,#000 0%,#777 18%,#fff 40%)}
.ro-serio-c{position:relative;height:100%;padding:30px 22px 28px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;color:#fff}
.ro-serio-t{font-family:var(--f-titulo);font-size:clamp(28px,9cqw,44px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.ro-serio-t em{font-style:normal;background:linear-gradient(var(--mel),var(--mel)) 0 92%/100% .12em no-repeat}
.ro-serio-tag{font-size:13px;transform:rotate(-1.2deg)}

/* quem já se consultou */
.ro-pac{--tl:7px;--br:8px}
.ro-pac .pn-in{background:
    radial-gradient(circle at 0% 0% in oklab, #f6e8c6 0%, transparent 55%),
    radial-gradient(circle at 100% 100% in oklab, #e6e1ea 0%, transparent 55%),
    var(--papel-claro)}
.ro-pac .ret{--ret-o:.17;--ret-t:7px;--ret-g:linear-gradient(300deg,#000 0%,#777 14%,#fff 34%)}
.ro-pac-c{position:relative;height:100%;padding:24px 22px 24px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.ro-rotulinho-p{color:var(--pink);margin-bottom:0}
.ro-dep blockquote{font-family:var(--f-titulo);font-size:clamp(24px,7.4cqw,34px);line-height:1.1}
.ro-dep figcaption{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--tinta-suave);margin-top:6px}
.ro-dep-2{border-top:2.5px solid var(--tinta);padding-top:13px}
.ro-dep-2 blockquote{font-family:var(--f-texto);font-weight:300;font-size:18px;line-height:1.35}

/* pé da página */
.ro-fim{--tl:6px;--br:7px;--giro:.4deg}
.ro-fim .pn-in{background:
    radial-gradient(circle at 100% 0% in oklab, #45283c 0%, transparent 50%),
    var(--tinta)}
.ro-fim .ret{--ret-o:.18;--ret-t:7px;--ret-g:linear-gradient(220deg,#000 0%,#777 12%,#fff 30%)}
.ro-fim-c{position:relative;padding:24px 20px 26px;display:flex;flex-direction:column;gap:18px;color:var(--papel)}
.ro-fim-t{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ro-fim-t .tag{box-shadow:3px 3px 0 var(--pink);white-space:nowrap}
.ro-fim-d{font-size:16px;line-height:1.4;color:#e4dde2}
.ro-barra{display:flex;align-items:center;gap:12px;font-family:var(--f-balao);font-weight:700;font-size:13px;letter-spacing:.06em;color:#e4dde2}
.ro-barra i{flex:1;height:4px;border-radius:2px;position:relative;background:linear-gradient(90deg,#ff6ea6 0 14%,#6a5f6c 14%)}
.ro-barra i::before{content:"";position:absolute;left:14%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#ff6ea6;border:3px solid var(--papel)}
.ro-bt{align-self:stretch;box-shadow:4px 4px 0 var(--pink);min-height:50px}
.ro-bt:hover,.ro-bt:focus-visible{box-shadow:2px 2px 0 var(--pink)}
.ro-fim :focus-visible{outline-color:#ff6ea6}

/* coluna (celular e tablet): quadros desencontrados, balões ocupando a sobra */
@media (max-width:1039px){
  .ro-q2{width:87%;align-self:flex-end}
  .ro-b-cont{right:auto;left:-15%;bottom:2%}
  .ro-b-cont svg{transform:scale(-1,-1)}
  .ro-q3{width:87%;align-self:flex-start}
  .ro-b-banaliza{right:-15.5%;bottom:5%}
  .ro-c4{width:92%;align-self:flex-end}
  .ro-rec{margin:0 0 -20px -8.5%}
}

/* ================= desktop: a página montada ================= */
@media (min-width:1040px){
  .ro-topo{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
  .ro-topo{margin-bottom:22px;position:relative;z-index:6}
  .ro-lead{justify-self:end;max-width:472px;margin:0 -10px -40px 0;font-size:17px;padding:17px 22px 16px}
  .ro-pag{max-width:none}

  .ro-l1{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
  .ro-q1{aspect-ratio:1080/1640;align-self:stretch;width:100%;min-height:0;--x:0;--w:1080;--y:130;--tl:0px;--tr:0px;--bl:0px;--br:8px}
  .ro-q1 .ro-img{width:110%;height:110%;left:-5%;top:-2.5%;object-fit:cover;object-position:50% 30%;transform:none}
  .ro-tag-reel{left:-13px;bottom:30px;font-size:13px}

  .ro-t1{flex:1;min-height:230px;--tl:0px;--tr:0px;--bl:0px;--br:18px}
  .ro-t1-c{height:100%;padding:22px 20px 34px 46px;display:flex;flex-direction:column;justify-content:center}
  .ro-rotulinho{font-size:13px}
  .ro-frase{font-size:min(9.4cqw,74px);line-height:1.16}
  .ro-b-real{right:26px;bottom:-58px;font-size:19px;max-width:10.5em;padding-bottom:2.2em}

  .ro-l2{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);margin-top:-18px}
  .ro-q2{--tl:18px;--tr:10.8px;--rb:20px;--bl:8.5px;--br:13.5px}
  .ro-b-cont{right:-52px;bottom:2%;font-size:16px}
  .ro-s2{margin-left:-20px;--lt:20px;--tl:10.5px;--tr:0px;--bl:14px;--br:22px}
  .ro-s2 .pn-in{justify-content:space-between}
  .ro-pend{width:66%;max-width:none;margin-left:11%}
  .ro-s2-c{padding:0 110px 84px 50px}
  .ro-legal{font-size:min(6.6cqw,31px)}

  .ro-l3{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,30fr) minmax(0,36fr);align-items:end;margin-top:-22px}
  .ro-q3{align-self:stretch;width:100%;--tl:22px;--tr:14.5px;--bl:0px;--br:0px}
  .ro-b-banaliza{right:-36px;font-size:19px}
  .ro-rec{margin:0 -18px -20px 16px;font-size:15.5px}
  .ro-tag-cont{right:4px;bottom:26px;font-size:13px}
  .ro-q4{--ar:905/1300;--tl:6px;--br:0px;--rb:16px}
  .ro-c5{align-self:stretch;padding-top:24px;margin-left:-16px}
  .ro-serio{flex:1.15;--lb:16px;--tl:8px;--tr:0px;--bl:0px;--br:9px}
  .ro-serio-c{padding:28px 30px 28px 40px}
  .ro-pac{flex:1;margin-top:-9px;--tl:0px;--tr:9px;--br:0px;--lt:16px}
  .ro-pac-c{padding:26px 30px 22px 44px}

  .ro-fim{--tl:0px;--br:0px;--tr:8px}
  .ro-fim-c{flex-direction:row;align-items:center;gap:30px;padding:22px 32px 24px}
  .ro-fim-t{flex-direction:row;align-items:center;gap:20px;flex:0 1 auto;min-width:0}
  .ro-fim-d{font-size:17px}
  .ro-barra{flex:1 1 150px;min-width:150px}
  .ro-bt{align-self:auto;flex:none}
}