/* ===== quem ===== */
/* 1 · Quem é a Dra. Gi — forro claro, retrato saindo do remendo azul do jaleco, trajetória costurada */

.qm { padding-bottom: clamp(96px, 10vw, 150px); }

/* ---------- topo: retrato + texto ---------- */
.qm-topo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

.qm-fig {
  --rbx: 16%; --rby: 14%;
  --w: min(100%, 500px);
  position: relative; margin: 0;
  width: var(--w); justify-self: center;
  aspect-ratio: 1 / 1.12;
  margin-top: calc(var(--w) * .46); /* a cabeça sai do remendo para cima */
  margin-bottom: 70px;
}
/* o remendo do tecido azul do jaleco */
.qm-pano {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden;
  border-radius: 48% 52% var(--rbx) var(--rbx) / 40% 44% var(--rby) var(--rby);
  background:
    radial-gradient(in oklab circle closest-side at 26% 20%, #dcebf8, rgb(220 235 248 / 0)),
    radial-gradient(in oklab circle closest-side at 84% 80%, #9dbfe0, rgb(157 191 224 / 0)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .14) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    var(--azul-jaleco);
  box-shadow: 0 0 0 10px #8fb3d6, 0 0 0 11.5px rgb(255 255 255 / .55), 0 24px 40px 6px rgb(30 51 84 / .22);
}
.qm-pano .wf-estampa canvas { opacity: .72; }
.qm-pano::after { /* pesponto creme dentro da barra */
  content: ""; position: absolute; inset: 4px; border-radius: inherit;
  border: 2.2px dashed var(--creme); pointer-events: none; z-index: 2;
}
.qm-recorte {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: -40%;
  overflow: hidden;
  border-radius: 0 0 var(--rbx) var(--rbx) / 0 0 calc(var(--rby) / 1.4) calc(var(--rby) / 1.4);
  z-index: 2;
  pointer-events: none;
}
.qm-recorte img {
  position: absolute; bottom: 0; left: 1%;
  width: 74%; height: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0, #000 9%, #000 91%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0, #000 9%, #000 91%, rgb(0 0 0 / 0) 100%);
}

/* ficha: etiqueta de roupa costurada no remendo */
.qm-ficha {
  position: absolute; z-index: 4;
  right: -9%; top: 26%;
  width: 236px;
  padding: 24px 18px 15px;
  transform: rotate(3.4deg); transform-origin: 50% 0;
}
.qm-ficha p { margin: 0; }
.qm-ficha-alca { /* dois pontos em X que prendem a etiqueta no remendo */
  position: absolute; left: 50%; top: 2px; width: 70px; height: 8px; margin-left: -35px;
  background:
    linear-gradient(45deg, rgb(0 0 0 / 0) 44%, var(--tinta) 44% 56%, rgb(0 0 0 / 0) 56%) 0 0 / 8px 8px no-repeat,
    linear-gradient(-45deg, rgb(0 0 0 / 0) 44%, var(--tinta) 44% 56%, rgb(0 0 0 / 0) 56%) 0 0 / 8px 8px no-repeat,
    linear-gradient(45deg, rgb(0 0 0 / 0) 44%, var(--tinta) 44% 56%, rgb(0 0 0 / 0) 56%) 100% 0 / 8px 8px no-repeat,
    linear-gradient(-45deg, rgb(0 0 0 / 0) 44%, var(--tinta) 44% 56%, rgb(0 0 0 / 0) 56%) 100% 0 / 8px 8px no-repeat;
  opacity: .8;
}
.qm-ficha-nome { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.qm-ficha-cro { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px !important; }
.qm-ficha-casa {
  display: flex; align-items: center; gap: 8px;
  margin-top: 11px !important; padding-top: 10px;
  border-top: 1.4px dashed rgb(30 51 84 / .4);
  font-size: 14px; font-weight: 700; color: var(--tinta); white-space: nowrap;
}
.qm-ficha-casa .wf-motivo { width: 22px; height: 22px; --motivo-traco: 5; color: #3f7fbf; }

.qm-nota {
  position: absolute; z-index: 3; left: -2%; bottom: -74px;
  display: flex; align-items: flex-end; gap: 4px;
  font-size: 15px; font-weight: 600; color: var(--tinta-suave);
}
.qm-nota span { max-width: 16ch; line-height: 1.25; }
.qm-nota-seta { width: 92px; height: 56px; flex: none; margin-bottom: 10px; overflow: visible; }
.qm-nota-seta path { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* texto */
.qm-texto { padding-bottom: 8px; }
.qm-titulo { margin: 0; color: var(--tinta); }
.qm-t-peq {
  display: block; width: fit-content;
  font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--f-texto); letter-spacing: -.02em;
  margin-bottom: .18em;
  transform: rotate(-1.5deg);
}
.qm-t-gde {
  display: block;
  font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.25rem, 1.1rem + 3.7vw, 4.75rem); line-height: .98; letter-spacing: -.005em;
}
.qm-t-l { display: inline; }
.qm-t-gde .qm-t-l:first-child { display: block; }
.qm-t-rem { margin-top: .1em; font-size: 1.12em; }
.qm-t-peq .wf-sorri svg { bottom: -.16em; height: .34em; left: 6%; width: 86%; }
.qm-atrib {
  display: flex; gap: 10px; align-items: baseline;
  margin: clamp(18px, 2vw, 26px) 0 0; max-width: 46ch;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tinta-suave);
}
.qm-atrib-traco { flex: none; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transform: translateY(-4px); }
.qm-lead { margin-top: clamp(26px, 3vw, 40px); max-width: 34ch; }
.qm-p { margin-top: 16px; color: var(--tinta-suave); max-width: 52ch; }

/* ---------- a linha da trajetória ---------- */
.qm-linha { margin-top: clamp(96px, 9vw, 140px); }
.qm-linha-tit {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(40px, 5vw, 70px);
  font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem); line-height: 1.02;
}
.qm-linha-tit .wf-motivo { width: 1.5em; height: 1.5em; --motivo-traco: 3.4; color: var(--mostarda-escura); }

.qm-trilho { position: relative; }
.qm-fio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.qm-fio-linha { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-dasharray: 9 6; stroke-linecap: round; }
.qm-fio-sombra { fill: none; stroke: rgb(30 51 84 / .18); stroke-width: 2.4; stroke-dasharray: 9 6; stroke-linecap: round; transform: translate(.8px, 1.8px); }
.qm-fio-mask { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }
.qm-fio-topo { z-index: 3; }
.qm-agulha-linha { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; }
.qm-agulha { filter: drop-shadow(0 2px 2px rgb(30 51 84 / .3)); transition: opacity .5s var(--suave); }
.qm-agulha-corpo { fill: #b9c4d2; stroke: #4d5c73; stroke-width: .9; }
.qm-agulha-olho { fill: var(--creme); }
.qm-agulha.qm-fim { opacity: 0; }

.qm-marcos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: start;
  position: static;
}
.qm-marco {
  position: relative; z-index: 1;
  padding: 30px 18px 20px;
  border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), #fffdf8;
  box-shadow: 0 1px 0 rgb(150 96 40 / .25), 0 22px 30px -22px rgb(50 26 4 / .55);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 0;
}
.qm-marco::before { /* pesponto em volta */
  content: ""; position: absolute; inset: 6px; border-radius: 2px 2px 7px 7px;
  border: 1.6px dashed rgb(30 51 84 / .32); pointer-events: none;
}
.qm-m2 { margin-top: 64px; background: repeating-linear-gradient(0deg, rgb(214 38 90 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), #f6d6df; }
.qm-m2::before { border-color: rgb(214 38 90 / .45); }
.qm-m3 { margin-top: 18px; background: repeating-linear-gradient(135deg, rgb(255 255 255 / .18) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--azul-jaleco); }
.qm-m3::before { border-color: rgb(251 246 236 / .95); }
.qm-m4 { margin-top: 84px; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--tinta); color: var(--creme); }
.qm-m4::before { border-color: rgb(242 201 76 / .7); }
.qm-m5 { margin-top: 26px; background: repeating-linear-gradient(0deg, rgb(30 51 84 / .05) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--amarelo-fita); }
.qm-m5::before { border-color: rgb(30 51 84 / .45); }

.qm-no { /* botão de costura onde a linha passa */
  position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(in oklab circle at 35% 30%, #fff6dd, var(--palha) 70%, var(--mostarda));
  box-shadow: inset 0 0 0 2.5px rgb(150 100 40 / .35), 0 2px 3px rgb(0 0 0 / .22);
}
.qm-no::before, .qm-no::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.2px; margin: -1.1px 0 0 -6px;
  background: var(--magenta); border-radius: 2px; transform: rotate(45deg);
}
.qm-no::after { transform: rotate(-45deg); }

.qm-nw { white-space: nowrap; }
.qm-marco p, .qm-marco h4, .qm-marco blockquote { margin: 0; }
.qm-ano { font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; }
.qm-m-tit { margin-top: 8px !important; font-size: clamp(1.0625rem, .98rem + .3vw, 1.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.qm-m-txt { margin-top: 10px !important; font-size: 15px; line-height: 1.45; }
.qm-m4 .qm-ano { color: var(--amarelo-fita); }
.qm-segundo {
  font-family: var(--f-titulo); font-size: clamp(4rem, 2.6rem + 3vw, 6rem); line-height: .9;
  color: var(--amarelo-fita); margin-top: 8px !important; letter-spacing: -.02em;
}
.qm-segundo span { font-size: .5em; vertical-align: .9em; margin-left: .04em; }
.qm-m4 .qm-m-tit { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); }
.qm-m4 .qm-m-tit { margin-top: 4px !important; }
.qm-m-cit { margin-top: 10px !important; font-size: 16px; line-height: 1.4; font-weight: 600; }

/* ---------- fecho ---------- */
.qm-fecho {
  margin-top: clamp(90px, 10vw, 150px);
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 84px); align-items: center;
}
.qm-cit { margin: 0; position: relative; padding-left: clamp(0px, 4vw, 64px); }
.qm-cit::before {
  content: "“"; /* a aspa de abertura (a do texto fica só para leitor de tela) */
  position: absolute; left: -.06em; top: -.42em;
  font-family: var(--f-titulo); font-size: clamp(5rem, 3rem + 6vw, 9rem); line-height: 1; color: var(--rosa);
  z-index: -1;
}
.qm-cit p { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 2.125rem); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; max-width: 34ch; text-wrap: pretty; }
.qm-cit footer { margin-top: 16px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--tinta-suave); }
.qm-acoes {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-left: clamp(28px, 3.4vw, 52px);
  border-left: 2px dashed rgb(30 51 84 / .3);
}
.qm-acoes-tit { margin: 0; font-size: var(--t-p); font-weight: 600; line-height: 1.4; max-width: 26ch; }
.qm-insta { font-size: 15.5px; }

/* ---------- entrada: a linha se costura com a rolagem e cada marco pendura ---------- */
.js .qm-marco { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 10deg)) translateY(-16px); transition: opacity .45s var(--suave), transform 1s var(--mola); }
.js .qm-marco.qm-on { opacity: 1; transform: rotate(var(--r, 0deg)); }

/* ---------- tablet e celular ---------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .qm-ficha { right: -6%; width: 210px; }
  .qm-m-txt { font-size: 14.5px; }
}
@media (max-width: 899px) {
  .qm-topo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qm-texto { order: -1; }
  .qm-fig { --w: min(80vw, 380px); justify-self: center; margin-top: calc(var(--w) * .46 + 48px); margin-bottom: 84px; }
  .qm-ficha { right: -7%; top: 24%; width: 176px; padding: 21px 12px 12px; }
  .qm-ficha-nome { font-size: 14px; }
  .qm-ficha-cro { font-size: 14px; letter-spacing: .06em; }
  .qm-nota { left: auto; right: -4%; bottom: -76px; font-size: 14px; flex-direction: row-reverse; }
  .qm-nota-seta { width: 64px; height: 42px; transform: scaleX(-1); }

  .qm-linha { margin-top: 86px; }
  .qm-marcos { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .qm-marco { width: min(86%, 380px); margin-top: 0 !important; }
  .qm-marco:nth-child(even) { justify-self: end; }
  .qm-m-txt { font-size: 15px; }
  .qm-fecho { grid-template-columns: minmax(0, 1fr); margin-top: 86px; }
  .qm-acoes { padding: 26px 0 0; border-left: 0; border-top: 2px dashed rgb(30 51 84 / .3); }
  .qm-cit { padding-left: 0; padding-top: 34px; }
  .qm-cit::before { top: -.28em; }
}

/* ===== detalhes ===== */
/* 2 · Os detalhes contam — tecido caramelo como quadro de tecido: cada detalhe preso com alfinete */

.dt { --placa-tinta: #3a2430; }
.dt .wf-in { max-width: 1280px; }

.dt-mural {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.2vw, 34px);
  row-gap: clamp(34px, 3.6vw, 56px);
  grid-template-areas:
    "cab cab cab cab cab cab pla pla pla pla pla pla"
    "frm frm frm frm frm frm pla pla pla pla pla pla"
    "not not not not not med med med ali ali ali ali"
    "pel pel pel pel tv  tv  tv  kit kit kit kit kit"
    "pel pel pel pel kem kem kem kem dio dio dio dio";
  align-items: start;
}
.dt-cab { grid-area: cab; align-self: end; }
.dt-placa { grid-area: pla; }
.dt-form { grid-area: frm; }
.dt-note { grid-area: not; }
.dt-medalha { grid-area: med; justify-self: center; }
.dt-ali { grid-area: ali; }
.dt-pel { grid-area: pel; }
.dt-tv { grid-area: tv; justify-self: center; }
.dt-kit { grid-area: kit; }
.dt-cit-k { grid-area: kem; }
.dt-cit-d { grid-area: dio; }

/* ---------- cabeçalho ---------- */
.dt-titulo {
  margin: 0; font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.375rem, 1.5rem + 3.4vw, 5rem); line-height: 1; letter-spacing: -.005em; text-wrap: balance;
}
.dt-t-rem { padding: .08em .22em .18em; }
.dt-atrib {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.dt-atrib-traco { flex: none; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.dt-lead { margin-top: clamp(18px, 2vw, 26px); max-width: 32ch; }

/* ---------- peças presas ---------- */
.dt-peca { position: relative; margin: 0; }
.dt-alfinete { /* alfinete de cabeça redonda */
  position: absolute; z-index: 6; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(in oklab circle at 34% 30%, #fff 0 8%, var(--alf, #e9b7c6) 30%, color-mix(in oklab, var(--alf, #e9b7c6), #3a1a10 38%) 100%);
  box-shadow: 0 3px 3px rgb(60 30 6 / .35), 4px 9px 7px -3px rgb(60 30 6 / .3);
}
.dt-alfinete::after { /* a sombra da agulha no pano */
  content: ""; position: absolute; left: 12px; top: 14px; width: 2px; height: 16px; border-radius: 2px;
  background: rgb(60 30 6 / .28); transform: rotate(-32deg); transform-origin: 50% 0;
}
.dt-alf-rosa { --alf: #e88aa6; }
.dt-alf-amarelo { --alf: #f2c94c; }
.dt-alf-azul { --alf: #6f9fd0; }

/* rótulo: etiqueta creme costurada sob cada peça */
.dt-rotulo {
  position: relative; z-index: 4; display: block;
  width: min(100%, 360px); margin: -18px auto 0;
  padding: 22px 18px 16px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  color: var(--tinta);
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 18px 28px -18px rgb(50 26 4 / .6);
  transform: rotate(calc(var(--rr, 1.2deg)));
}
.dt-rotulo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(rgb(30 51 84 / .1), rgb(30 51 84 / .02));
  border-bottom: 1.6px dashed rgb(30 51 84 / .5); border-radius: 3px 3px 0 0;
}
/* etiquetas pequenas: tag de papel kraft pendurada por um fio */
.dt-rotulo--peq {
  width: min(100%, 240px); margin-top: 20px !important; padding: 26px 16px 16px; text-align: center;
  background: repeating-linear-gradient(90deg, rgb(120 70 20 / .05) 0 1px, rgb(0 0 0 / 0) 1px 4px), #f0dcb4;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
  border-radius: 0 0 6px 6px; box-shadow: none;
  filter: drop-shadow(0 12px 12px rgb(50 26 4 / .35));
}
.dt-rotulo--peq::before { /* furo reforçado */
  left: 50%; right: auto; top: 8px; width: 12px; height: 12px; margin-left: -6px; border: 0; border-radius: 50%;
  background: var(--caramelo); box-shadow: 0 0 0 3px #e3c48b, inset 0 1px 2px rgb(60 30 6 / .5);
}
.dt-rotulo--peq::after { /* pesponto da tag */
  content: ""; position: absolute; inset: 26px 6px 6px; border: 1.4px dashed rgb(138 100 32 / .5); border-radius: 0 0 4px 4px; pointer-events: none;
}
.dt-rotulo--peq .dt-num { position: relative; left: auto; top: auto; margin: 4px auto 6px; width: 36px; height: 36px; font-size: 16px; }
.dt-num { /* número do detalhe: botão marinho costurado no canto da etiqueta */
  position: absolute; left: -16px; top: -16px; z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font: 400 21px/1 var(--f-titulo); color: var(--amarelo-fita);
  background: var(--tinta);
  box-shadow: 0 6px 10px -4px rgb(30 16 4 / .55);
}
.dt-num::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.4px dashed rgb(242 201 76 / .6); }
.dt-rot-tit { display: block; margin-top: 2px; font-size: var(--t-h3); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.dt-rot-txt { display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.45; font-weight: 500; }

/* ---------- detalhe 1: a placa de ursinho ---------- */
.dt-placa { justify-self: center; width: min(100%, 640px); }
.dt-placa-obj { position: relative; aspect-ratio: 520 / 540; }
.dt-placa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 22px rgb(80 30 30 / .32)) drop-shadow(0 2px 2px rgb(80 30 30 / .25)); }
.dt-urso-cordao { fill: none; stroke: #7a4a1c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dt-urso-furo circle { fill: rgb(120 60 60 / .25); stroke: #fff; stroke-width: 2; }
.dt-placa-txt {
  position: absolute; left: 10%; right: 10%; top: 41%; bottom: 10%;
  margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: 'Playwrite BR', 'Segoe Script', cursive; font-weight: 400; color: var(--placa-tinta);
  container-type: inline-size;
}
.dt-p-l1, .dt-p-l3 { font-size: clamp(18px, 7.2cqi, 34px); line-height: 1.5; }
.dt-p-l3 { margin-top: .15em; }
.dt-p-nome {
  display: block; max-width: 100%;
  font-size: calc(clamp(26px, 13.5cqi, 64px) * var(--k, 1)); line-height: 1.3; text-wrap: balance;
  padding: 0 .1em;
}
.dt-p-nome.dt-escreve { animation: dt-escreve 1.1s cubic-bezier(.45, .05, .55, .95) both; }
.js .dt-placa .dt-mao.dt-espera, .js .dt-p-nome.dt-espera { clip-path: inset(-20% 100% -20% 0); }
.dt-mao.dt-escreve { animation: dt-escreve .8s cubic-bezier(.45, .05, .55, .95) both; }
@keyframes dt-escreve { from { clip-path: inset(-20% 100% -20% -10%); } to { clip-path: inset(-20% -10% -20% -10%); } }
.dt-placa .dt-rotulo { --rr: -1deg; margin-top: -6px; }

/* ---------- o formulário ---------- */
.dt-form {
  position: relative; z-index: 5; justify-self: start;
  width: min(100%, 470px); margin: 0;
  padding: 30px 24px 22px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 24px 34px -20px rgb(50 26 4 / .6);
}
.dt-form::before { content: ""; position: absolute; inset: 7px; border-radius: 2px 2px 8px 8px; border: 1.6px dashed rgb(194 151 65 / .8); pointer-events: none; }
.dt-form-tit { margin: 0 0 14px; font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.dt-campos { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; }
.dt-campo { display: flex; flex-direction: column; gap: 6px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; }
.dt-campo input, .dt-campo select {
  width: 100%; min-height: 52px; padding: 10px 14px;
  font: 500 18px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--tinta);
  background: #fff; border: 2px solid rgb(30 51 84 / .35); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.dt-campo input::placeholder { color: rgb(30 51 84 / .55); }
.dt-campo input:focus-visible, .dt-campo select:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgb(214 38 90 / .25); }
.dt-campo select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231e3354' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; padding-right: 34px; }
.dt-form-nota { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--tinta-suave); }
.dt-form-seta { position: absolute; right: -118px; top: -30px; width: 150px; height: 84px; overflow: visible; pointer-events: none; }
.dt-form-seta path { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- detalhe 2: notebook ---------- */
.dt-note { width: min(100%, 470px); justify-self: center; }
.dt-note-obj { position: relative; padding: 0 4%; }
.dt-note-tela {
  aspect-ratio: 16 / 10.4; padding: 3.2%; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(160deg, #2a3142, #151a26);
  box-shadow: inset 0 0 0 1.5px #3a4256, 0 20px 30px -16px rgb(40 20 4 / .6);
}
.dt-slide {
  position: relative; height: 100%; overflow: hidden; border-radius: 4px;
  display: flex; flex-direction: column; justify-content: center; padding: 0 9%;
  background:
    radial-gradient(in oklab ellipse 60% 70% at 92% 10%, #f6e2e7, rgb(246 226 231 / 0)),
    radial-gradient(in oklab ellipse 50% 60% at 4% 100%, #e5eef7, rgb(229 238 247 / 0)),
    var(--creme);
  color: var(--tinta);
  container-type: inline-size;
}
.dt-slide p { margin: 0; position: relative; z-index: 1; }
.dt-slide-tit { font: 700 clamp(12px, 5.2cqi, 22px)/1.15 var(--f-texto); letter-spacing: -.01em; max-width: 13ch; }
.dt-slide-nome { margin-top: 6% !important; font-family: var(--f-titulo); font-size: clamp(18px, 9cqi, 40px); line-height: 1; text-transform: uppercase; color: var(--mostarda-escura); overflow-wrap: anywhere; }
.dt-slide-idade { font-family: var(--f-texto); font-weight: 700; font-size: .5em; text-transform: none; color: var(--tinta); white-space: nowrap; }
.dt-slide .wf-motivo { position: absolute; color: var(--tinta); --motivo-traco: 4; opacity: .85; }
.dt-slide-m1 { right: 9%; top: 12%; width: 9cqi; height: 9cqi; }
.dt-slide-m2 { right: 24%; top: 54%; width: 11cqi; height: 11cqi; color: var(--magenta) !important; }
.dt-slide-m3 { right: 5%; bottom: 4%; width: 20cqi; height: 20cqi; color: var(--mostarda-escura) !important; }
.dt-note-base {
  height: 16px; margin: 0 -4%;
  background: linear-gradient(#d6dae3, #9aa1b0);
  border-radius: 2px 2px 14px 14px;
  box-shadow: 0 10px 18px -8px rgb(40 20 4 / .55);
  position: relative;
}
.dt-note-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; margin-left: -9%; border-radius: 0 0 8px 8px; background: #8a91a0; }
.dt-note .dt-rotulo { --rr: 1.4deg; margin-top: 12px; }

/* ---------- detalhe 3: medalha ---------- */
.dt-medalha { width: min(100%, 270px); }
.dt-medalha-svg { display: block; width: 92%; margin: 0 auto; height: auto; overflow: visible; filter: drop-shadow(0 14px 14px rgb(60 30 6 / .35)); }
.dt-med-arco { font-family: var(--f-titulo); font-size: 19px; letter-spacing: .12em; fill: #6b4512; }
.dt-med-nota { font-family: var(--f-texto); font-weight: 700; font-size: 16px; letter-spacing: .3em; fill: #6b4512; }
.dt-med-10 { font-family: var(--f-titulo); font-size: 46px; fill: var(--tinta); }
.dt-medalha .dt-rotulo { --rr: -2deg; margin-top: 8px; }

/* ---------- fotos presas ---------- */
.dt-foto {
  position: relative; margin: 0;
  padding: 10px; border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgb(194 151 65 / .07) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 26px 36px -20px rgb(50 26 4 / .65);
}
.dt-foto::after { content: ""; position: absolute; inset: 4px; border-radius: 7px; border: 1.8px dashed var(--mostarda); pointer-events: none; }
.dt-foto img { display: block; width: 100%; height: auto; border-radius: 4px; }
.dt-ali { width: min(100%, 380px); justify-self: center; }
.dt-ali .dt-foto img { aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 62%; }
.dt-kit { width: min(100%, 470px); justify-self: center; }
.dt-pel { width: min(100%, 410px); justify-self: center; }
.dt-pel-jan { aspect-ratio: 840 / 1080; overflow: visible; }
.dt-pel-jan img { object-position: 50% 30%; }
.dt-pel .dt-rotulo { --rr: -1.6deg; margin-top: -10px; }
.dt-pel .dt-alfinete { top: -16px; }

/* ---------- detalhe 6: TV ---------- */
.dt-tv { width: min(100%, 290px); }
.dt-tv-obj { position: relative; width: 88%; margin: 34px auto 0; }
.dt-tv-ant { position: absolute; left: 50%; top: -34px; width: 60px; height: 34px; margin-left: -30px; }
.dt-tv-ant::before, .dt-tv-ant::after { content: ""; position: absolute; bottom: 0; width: 3px; height: 40px; background: var(--tinta); border-radius: 3px; transform-origin: 50% 100%; }
.dt-tv-ant::before { left: 18px; transform: rotate(-28deg); }
.dt-tv-ant::after { right: 18px; transform: rotate(28deg); }
.dt-tv-obj::before { /* base das antenas */
  content: ""; position: absolute; left: 50%; top: -10px; width: 30px; height: 14px; margin-left: -15px; border-radius: 14px 14px 0 0; background: var(--tinta);
}
.dt-tv-tela {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  border: 14px solid var(--tinta); border-radius: 26px;
  background: radial-gradient(in oklab ellipse 70% 70% at 40% 35%, #3c5d8f, #1a2c4b);
  box-shadow: 0 20px 26px -14px rgb(40 20 4 / .6), inset 0 0 0 2px rgb(255 255 255 / .1);
  color: var(--amarelo-fita);
}
.dt-tv-tela::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 40%); }
.dt-tv-play { width: 34%; fill: var(--creme); }
.dt-tv-notas { position: absolute; right: 12%; top: 10%; font-size: 26px; color: var(--amarelo-fita); }
.dt-tv-botoes { display: flex; justify-content: space-between; width: 50%; margin: 0 auto; }
.dt-tv-botoes i { display: block; width: 10px; height: 16px; background: var(--tinta); border-radius: 0 0 4px 4px; }
.dt-tv .dt-rotulo { --rr: -1.2deg; margin-top: 10px; }

/* ---------- citações costuradas ---------- */
.dt-cit {
  position: relative; margin: 0; padding: 26px 24px 20px;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--tinta);
  color: var(--creme);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 24px 34px -20px rgb(30 16 4 / .7);
}
.dt-cit .dt-costura { position: absolute; inset: 7px; border-radius: 2px 2px 7px 7px; border: 1.6px dashed rgb(242 201 76 / .7); pointer-events: none; }
.dt-cit p { margin: 0; font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); line-height: 1.45; font-weight: 500; }
.dt-estrelas { color: var(--amarelo-fita); letter-spacing: .1em; margin-right: 6px; }
.dt-cit-d .dt-estrelas { color: #b07f25; }
.dt-fim-nota { margin: 0; font-size: 15px; font-weight: 600; }
.dt-cit footer { margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amarelo-fita); }
.dt-cit-k { align-self: start; margin-top: 8px; }
.dt-cit-d { margin-top: 8px; background: repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), #f6d6df; color: var(--tinta); }
.dt-cit-d .dt-costura { border-color: rgb(214 38 90 / .5); }
.dt-cit-d footer { color: #a81c47; }

/* ---------- fim ---------- */
.dt-fim { margin-top: clamp(60px, 7vw, 100px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.dt-fim-txt { margin: 0; max-width: 40ch; font-size: var(--t-lead); font-weight: 600; line-height: 1.4; }

/* ---------- entrada (pendura, da base) só nas peças: rotação final em --rev-fim ---------- */
.dt-peca, .dt-form, .dt-cit { transform: var(--rev-fim, none); transform-origin: 50% 0; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) and (min-width: 700px) {
  .dt-mural {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "cab cab"
      "pla frm"
      "not med"
      "ali pel"
      "tv  kit"
      "kem dio";
  }
  .dt-form { align-self: center; }
  .dt-form-seta { display: none; }
}
/* ---------- celular ---------- */
@media (max-width: 699px) {
  .dt-mural {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cab cab" "pla pla" "frm frm" "not not" "med tv" "ali ali" "kem kem" "pel pel" "kit kit" "dio dio";
    column-gap: 14px; row-gap: 50px;
  }
  .dt-form { justify-self: stretch; width: auto; padding: 28px 18px 20px; }
  .dt-campos { grid-template-columns: minmax(0, 1fr) 108px; }
  .dt-form-seta { display: none; }
  .dt-note, .dt-kit { width: min(100%, 400px); }
  .dt-ali { width: min(84%, 320px); justify-self: end; }
  .dt-pel { width: min(84%, 340px); justify-self: start; }
  .dt-medalha, .dt-tv { width: 100%; }
  .dt-rotulo { padding: 22px 14px 14px; }
  .dt-rotulo--peq { padding: 24px 10px 12px; }
  .dt-rotulo--peq .dt-rot-tit { font-size: 17px; }
  .dt-rotulo--peq .dt-rot-txt { font-size: 14px; }
  .dt-num { width: 40px; height: 40px; font-size: 18px; left: -10px; top: -24px; }
  .dt-rotulo--peq .dt-num { left: auto; top: auto; width: 34px; height: 34px; font-size: 15px; }
  .dt-rot-txt { font-size: 15px; }
  .dt-tv-notas { font-size: 18px; }
  .dt-tv-tela { border-width: 10px; border-radius: 18px; }
}

/* ===== primeira ===== */
/* 3 · A primeira consulta — forro quente; passos costurados num fio que atravessa a seção */

.pc { --pc-fio: var(--tinta); }
.pc-in > *:not(.pc-fio) { position: relative; z-index: 2; }

/* desenhos da estampa nesta seção: caixa justa (JS) e traço constante na tela */
.pc .wf-motivo path { vector-effect: non-scaling-stroke; stroke-width: var(--pc-traco, 2.4px); }

/* ---------- topo ---------- */
.pc-topo {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}
.pc-titulo { max-width: 13ch; }
.pc-lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 44ch; color: var(--tinta); }

.pc-quando { transform: rotate(1.6deg); padding: 32px 28px 32px; max-width: 420px; justify-self: end; }
.pc-quando-t { margin: 0 0 8px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--mostarda-escura); }
.pc-quando-g { margin: 0 0 18px; font: 400 clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem)/1 var(--f-titulo); text-transform: uppercase; }
.pc-quando-l { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1.6px dashed rgb(30 51 84 / .35); display: grid; gap: 12px; }
.pc-quando-l li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; font-weight: 500; line-height: 1.35; }
.pc-quando-l .wf-motivo { width: 34px; height: 34px; }

/* ---------- fio ---------- */
.pc-fio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.pc-fio-linha { fill: none; stroke: var(--pc-fio); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 10 7; }
.pc-fio-sombra { fill: none; stroke: rgb(70 36 6 / .2); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 10 7; transform: translate(1.5px, 3px); }
.pc-fio-m { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: butt; }
.pc-agulha { opacity: 0; transition: opacity .3s; }
.pc-agulha.pc-ativa { opacity: 1; }
.pc-agulha-corpo { fill: #c9ced6; stroke: #7d8592; stroke-width: .8; filter: drop-shadow(1px 3px 2px rgb(70 36 6 / .3)); }
.pc-agulha-olho { fill: var(--creme-2); }

/* ---------- passos ---------- */
.pc-fio-area { margin-top: clamp(80px, 9vw, 130px); }
.pc-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 4vw, 60px); }
.pc-passo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.pc-passo[data-lado="d"] .pc-tag { grid-column: 2; }
.pc-passo[data-lado="d"] .pc-fala { grid-column: 1; grid-row: 1; justify-self: end; }
.pc-passo[data-lado="e"] .pc-tag { justify-self: end; }
.pc-passo[data-lado="e"] .pc-fala { margin-left: clamp(56px, 6vw, 96px); }
.pc-passo[data-lado="d"] .pc-fala { margin-right: clamp(56px, 6vw, 96px); }

.pc-tag {
  --pc-papel: var(--creme); --pc-ponto: rgb(30 51 84 / .5); --pc-fig: 76px;
  position: relative; width: 100%; max-width: 470px;
  display: grid; grid-template-columns: var(--pc-fig) 1fr; column-gap: 22px; align-items: start;
  padding: 34px 30px 28px 26px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--pc-papel);
  color: var(--tinta);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 26px 40px -24px rgb(50 26 4 / .6);
  transform: rotate(var(--pc-giro, -1.4deg));
  transform-origin: var(--pc-orig, 90% 0);
}
.pc-tag::before { content: ""; position: absolute; inset: 7px; border-radius: 3px 3px 7px 7px; border: 1.6px dashed var(--pc-ponto); pointer-events: none; }
.pc-passo[data-lado="d"] .pc-tag { --pc-giro: 1.5deg; --pc-orig: 10% 0; }
.pc-passo:nth-child(2) .pc-tag { max-width: 430px; }
.pc-passo:nth-child(3) .pc-tag { max-width: 450px; --pc-giro: -2.2deg; }
.pc-passo:nth-child(5) .pc-tag { max-width: 440px; --pc-giro: -.8deg; }
.pc-tag--azul { --pc-papel: #dcebf8; }
.pc-tag--rosa { --pc-papel: #f6d6df; --pc-ponto: rgb(214 38 90 / .55); }
.pc-tag--marinho { --pc-papel: var(--tinta); --pc-ponto: rgb(242 201 76 / .7); color: var(--creme); background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--tinta); }
.pc-tag--grande { max-width: 560px; --pc-fig: 118px; padding-block: 40px 34px; }

.pc-ico, .pc-medalha { grid-column: 1; grid-row: 1 / span 3; }
.pc-ico { width: var(--pc-fig); height: var(--pc-fig); --pc-traco: 2.6px; }
.pc-tag--grande .pc-ico { --pc-traco: 3px; }
.pc-num { grid-column: 2; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--mostarda-escura); }
.pc-tag--rosa .pc-num { color: #9a2047; }
.pc-tag--azul .pc-num { color: #2c5a8a; }
.pc-tag--marinho .pc-num { color: var(--amarelo-fita); }
.pc-tag .wf-h3 { grid-column: 2; margin: 6px 0 8px; }
.pc-tag p { grid-column: 2; margin: 0; max-width: 40ch; }
.pc-tag--grande .wf-h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }

/* o botão de costura por onde o fio passa */
.pc-no {
  position: absolute; top: -17px; right: 28px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(in oklab circle at 35% 30%, #fff6dd, var(--palha) 70%, var(--mostarda));
  box-shadow: inset 0 0 0 3px rgb(150 100 40 / .35), 0 2px 4px rgb(0 0 0 / .25);
}
.pc-passo[data-lado="d"] .pc-no { right: auto; left: 28px; }
.pc-no i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #6b4512; top: 10px; left: 10px; }
.pc-no i:nth-child(2) { left: 19px; }
.pc-no i:nth-child(3) { top: 19px; }
.pc-no i:nth-child(4) { top: 19px; left: 19px; }
.pc-no--quando { top: auto; bottom: -17px; right: auto; left: 50%; margin-left: -17px; }
.pc-no--cartao { top: -17px; right: 34px; }

/* falas dos pais, do outro lado do fio */
.pc-fala { position: relative; margin: 0; max-width: 380px; padding-top: 6px; }
.pc-fala::before { content: "“"; position: absolute; left: -14px; top: -58px; font: 700 150px/1 var(--f-texto); color: var(--rosa); z-index: -1; }
.pc-estrelas { display: block; margin: 0 0 8px 70px; font-size: 15px; letter-spacing: .18em; color: var(--mostarda-escura); }
.pc-fala p { margin: 0; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.pc-fala cite { display: block; margin-top: 12px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--mostarda-escura); }

/* medalha "Sorriso nota 10": pendurada pela fita, balança quando o fio chega */
.pc-passo--fim .pc-tag { --pc-fig: 108px; max-width: 500px; }
.pc-medalha { position: relative; width: var(--pc-fig); height: 150px; margin-top: -78px; }
.pc-medalha-g { position: absolute; inset: 0; transform: rotate(-5deg); transform-origin: 50% 0; }
.pc-fita { position: absolute; left: 50%; top: 0; width: 62px; height: 66px; margin-left: -31px;
  background: linear-gradient(90deg, #ddb238 0 50%, #f2c94c 50%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%); }
.pc-disco {
  position: absolute; left: 50%; bottom: 0; width: 98px; height: 98px; margin-left: -49px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; color: var(--tinta);
  background: radial-gradient(in oklab circle at 35% 30%, #fff3c4, #e9c25a 62%, #b98b2a);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), inset 0 0 0 7px rgb(150 100 30 / .35), 0 10px 16px -6px rgb(0 0 0 / .6);
  font: 700 11.5px/1.05 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
}
.pc-disco b:last-child { font: 400 30px/1 var(--f-titulo); letter-spacing: 0; }
.js .pc-passo--fim.pc-on .pc-medalha-g { animation: pc-balanca 2.4s .35s var(--suave) both; }
@keyframes pc-balanca {
  0% { transform: rotate(-26deg); } 22% { transform: rotate(12deg); } 42% { transform: rotate(-12deg); }
  60% { transform: rotate(3deg); } 78% { transform: rotate(-7deg); } 100% { transform: rotate(-5deg); }
}

/* ---------- base: cartão de dicas + chamada ---------- */
.pc-base {
  margin-top: clamp(90px, 10vw, 150px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center;
}
.pc-cartao {
  position: relative; padding: 46px clamp(24px, 3vw, 44px) 30px;
  background: #fffdf7; color: var(--tinta);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .25), 0 30px 50px -28px rgb(50 26 4 / .6);
  transform: rotate(-1.4deg);
}
.pc-cartao::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, var(--rosa) 0 18px, #f6d6df 18px 36px); }
.pc-cartao-sobre { margin: 0 0 6px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--mostarda-escura); }
.pc-cartao-t { margin: 0 0 20px; font: 400 clamp(1.9rem, 1.4rem + 1.8vw, 3rem)/1 var(--f-titulo); text-transform: uppercase; }
.pc-dicas { list-style: none; margin: 0; padding: 0; }
.pc-dicas li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; line-height: 1.45; padding: 12px 0; border-top: 1px solid rgb(60 78 109 / .14); }
.pc-dicas .wf-motivo { width: 40px; height: 40px; }
.pc-cartao-ass { margin: 18px 0 8px; font-weight: 700; color: var(--tinta-suave); }
.pc-cartao-acoes { display: flex; flex-wrap: wrap; gap: 4px 26px; padding-top: 10px; border-top: 1.6px dashed rgb(30 51 84 / .3); }
.pc-nq { white-space: nowrap; }
.pc-cartao-acoes .wf-link { color: var(--tinta); font: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; }
.pc-cartao-acoes svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pc-chama {
  position: relative; padding: clamp(36px, 4vw, 56px) clamp(26px, 3.4vw, 52px);
  background: repeating-linear-gradient(0deg, rgb(214 38 90 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), #f6d6df;
  border-radius: 10px 10px 46% 46% / 10px 10px 18% 18%;
  box-shadow: 0 1px 0 rgb(150 60 80 / .25), 0 26px 40px -26px rgb(90 30 40 / .55);
  transform: rotate(1.2deg);
}
.pc-chama::before { content: ""; position: absolute; inset: 9px; border-radius: 6px 6px 46% 46% / 6px 6px 17% 17%; border: 1.8px dashed rgb(214 38 90 / .6); pointer-events: none; }
.pc-chama::after { content: ""; position: absolute; left: 9px; right: 9px; top: 52px; border-top: 1.8px dashed rgb(214 38 90 / .45); }
.pc-chama-sobre { margin: 0 0 22px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: #9a2047; }
.pc-chama-t { margin: 0 0 24px; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--f-titulo); text-transform: uppercase; max-width: 16ch; }
.pc-chama-p { margin: 16px 0 0; font-size: var(--t-mini); font-weight: 500; color: var(--tinta); }

/* ---------- entrada: o passo se costura quando o fio chega ---------- */
.js .pc-tag { opacity: 0; transform: rotate(calc(var(--pc-giro, -1.4deg) - 12deg)) translateY(-18px); transition: opacity .45s var(--suave), transform 1.15s var(--mola); }
.js .pc-passo[data-lado="d"] .pc-tag { transform: rotate(calc(var(--pc-giro) + 12deg)) translateY(-18px); }
.js .pc-fala { opacity: 0; transform: translateY(14px); transition: opacity .8s .3s var(--suave), transform .9s .3s var(--suave); }
.js .pc-passo .pc-no { transform: scale(0); transition: transform .5s var(--mola); }
.js .pc-passo.pc-on .pc-tag { opacity: 1; transform: rotate(var(--pc-giro, -1.4deg)); }
.js .pc-passo.pc-on .pc-fala { opacity: 1; transform: none; }
.js .pc-passo.pc-on .pc-no { transform: scale(1); }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .pc-topo { grid-template-columns: 1fr; }
  .pc-quando { justify-self: stretch; max-width: 440px; transform: rotate(-1deg); }
  .pc-no--quando { left: 0; margin-left: 0; }
  .pc-passos { gap: 44px; padding-left: 36px; }
  .pc-passo { grid-template-columns: 1fr; gap: 22px; }
  .pc-passo[data-lado] .pc-tag { grid-column: 1; justify-self: stretch; max-width: none; --pc-giro: -.8deg; --pc-orig: 0 0; }
  .pc-passo[data-lado="d"] .pc-tag { --pc-giro: .8deg; }
  .js .pc-passo[data-lado] .pc-tag { transform: rotate(calc(var(--pc-giro) - 10deg)) translateY(-14px); }
  .js .pc-passo.pc-on[data-lado] .pc-tag { transform: rotate(var(--pc-giro)); }
  .pc-passo[data-lado] .pc-fala { grid-column: 1; grid-row: auto; justify-self: start; padding-left: 4px; margin: 0; }
  .pc-fala::before { font-size: 84px; top: -34px; }
  .pc-passo[data-lado] .pc-no { left: -19px; right: auto; top: 22px; margin-left: -17px; }
  .pc-tag { --pc-fig: 54px; column-gap: 16px; padding: 26px 20px 22px 18px; }
  .pc-tag--grande { --pc-fig: 70px; }
  .pc-passo--fim .pc-tag { --pc-fig: 74px; }
  .pc-medalha { height: 112px; margin-top: -56px; }
  .pc-disco { width: 72px; height: 72px; margin-left: -36px; font-size: 9px; }
  .pc-disco b:last-child { font-size: 22px; }
  .pc-fita { width: 46px; height: 48px; margin-left: -23px; }
  .pc-base { grid-template-columns: 1fr; }
  .pc-cartao { transform: rotate(-.6deg); }
  .pc-no--cartao { right: auto; left: 0; }
}
@media (max-width: 400px) {
  .pc-tag:not(.pc-tag--marinho) { grid-template-columns: 1fr; }
  .pc-tag:not(.pc-tag--marinho) .pc-ico { grid-row: auto; margin-bottom: 10px; }
  .pc-tag:not(.pc-tag--marinho) :is(.pc-num, .wf-h3, p) { grid-column: 1; }
  .pc-passo--fim .pc-tag { --pc-fig: 64px; column-gap: 12px; }
  .pc-chama-t { font-size: 1.6rem; }
}

/* ===== tratamentos ===== */
/* 4 · O que ela faz — tecido azul-jaleco; índice tipográfico + etiqueta que pendura */

.tr .wf-motivo path { vector-effect: non-scaling-stroke; stroke-width: var(--tr-traco, 2.6px); }

.tr-topo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.tr-topo .wf-kicker { grid-column: 1; justify-self: start; }
.tr-titulo { grid-column: 1; max-width: 14ch; }
.tr-lead { grid-column: 2; grid-row: 2; margin: 0 0 .4em; max-width: 34ch; }

.tr-painel { position: relative; margin-top: clamp(56px, 7vw, 104px); }
.tr-cordao { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; display: none; }
.tr-cordao-l { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-dasharray: 9 6; stroke-linecap: round; }
.tr-cordao-s { fill: none; stroke: rgb(15 30 55 / .22); stroke-width: 2.4; stroke-dasharray: 9 6; transform: translate(1.5px, 3px); }

/* ---------- índice (botões) ---------- */
.tr-cab { margin: 0; }
.tr-bt {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 46px 1fr 28px; align-items: center; gap: 16px;
  width: 100%; min-height: 72px; padding: 14px 18px 14px 16px;
  color: var(--tinta);
  border-top: 2px dashed rgb(30 51 84 / .4);
  transition: color .3s;
}
.tr-item:first-of-type .tr-bt { border-top-color: transparent; }
.tr-ico { width: 46px; height: 46px; --tr-traco: 2.2px; }
.tr-nome { font: 400 clamp(1.4rem, 1rem + 1.5vw, 2.35rem)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: -.005em; }
.tr-sinal { position: relative; width: 22px; height: 22px; justify-self: end; }
.tr-sinal::before, .tr-sinal::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: currentColor; border-radius: 2px; transition: transform .4s var(--mola); }
.tr-sinal::after { transform: rotate(90deg); }
.tr-bt[aria-expanded="true"] .tr-sinal::after { transform: rotate(0); }
.tr-bt:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 6px; }
.tr-bt::before { /* o remendo creme atrás do item aberto */
  content: ""; position: absolute; inset: 6px -6px; z-index: -1; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgb(194 151 65 / .07) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  box-shadow: 0 2px 0 rgb(60 90 130 / .3), 0 14px 22px -14px rgb(20 40 70 / .55);
  outline: 1.8px dashed var(--mostarda); outline-offset: -6px;
  transform: rotate(-1deg) scale(.96); opacity: 0;
  transition: opacity .3s var(--suave), transform .5s var(--mola);
}
.tr-bt[aria-expanded="true"]::before { opacity: 1; transform: rotate(-1deg); }
.tr-cab { position: relative; z-index: 0; }

/* ---------- a etiqueta de cada cuidado ---------- */
.tr-etq {
  position: relative;
  padding: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 44px) clamp(26px, 3vw, 40px);
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  color: var(--tinta);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 1px 0 rgb(60 90 130 / .3), 0 30px 46px -26px rgb(15 30 55 / .6);
}
.tr-etq::before { content: ""; position: absolute; inset: 8px; border-radius: 3px 3px 9px 9px; border: 1.6px dashed rgb(30 51 84 / .45); pointer-events: none; }
.tr-etq-topo { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 26px); align-items: center; margin-bottom: clamp(18px, 2vw, 26px); padding-bottom: clamp(18px, 2vw, 24px); border-bottom: 1.6px dashed rgb(30 51 84 / .3); }
.tr-selo {
  display: grid; place-items: center; width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), #dcebf8;
  box-shadow: inset 0 0 0 5px #dcebf8, inset 0 0 0 6.6px rgb(30 51 84 / .4);
  transform: rotate(-4deg);
}
.tr-fig { width: 64%; height: 64%; --tr-traco: 2.6px; }
.tr-conta { margin: 0 0 6px; font: 700 var(--t-mini)/1 var(--f-texto); letter-spacing: .14em; color: var(--tinta-suave); }
.tr-etq-nome { margin: 0 0 8px; font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1 var(--f-titulo); text-transform: uppercase; }
.tr-para { margin: 0; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: #2c5a8a; }
.tr-txt { margin: 0; font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }

/* o alfinete que prende a etiqueta (e por onde ela balança) */
.tr-alfinete { position: absolute; left: 50%; top: -15px; width: 84px; height: 28px; margin-left: -42px; z-index: 3; transform: rotate(-5deg); filter: drop-shadow(1px 3px 2px rgb(15 30 55 / .35)); }
.tr-alfinete svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tr-pecas { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tr-pecas li {
  padding: 8px 14px; font-weight: 700; font-size: var(--t-mini); line-height: 1.2;
  background: #dcebf8; border-radius: 4px; position: relative;
}
.tr-pecas li::before { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgb(30 51 84 / .4); border-radius: 2px; }
.tr-pecas li:nth-child(odd) { transform: rotate(-1.2deg); }
.tr-pecas li:nth-child(even) { transform: rotate(1deg); }
.tr-forma { margin: 20px 0 0; font-size: var(--t-mini); font-weight: 500; color: var(--tinta-suave); max-width: 52ch; }
.tr-fala { position: relative; margin: 24px 0 0; padding: 16px 18px 14px; background: #fff; border-radius: 3px; box-shadow: 0 1px 0 rgb(60 90 130 / .25), 0 12px 20px -14px rgb(15 30 55 / .45); }
.tr-estrelas { display: block; margin-bottom: 6px; font-size: 14px; letter-spacing: .18em; color: var(--mostarda-escura); }
.tr-fala p { margin: 0; font-weight: 500; font-size: var(--t-p); line-height: 1.45; max-width: 54ch; }
.tr-fala cite { display: block; margin-top: 8px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--mostarda-escura); }
/* a frase dela vira um remendo amarelo costurado */
.tr-fala--dela { display: inline-block; max-width: min(100%, 36ch); padding: 18px 22px 16px; background: repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--amarelo-fita); transform: rotate(-1.6deg); box-shadow: 0 2px 0 rgb(150 110 30 / .35), 0 14px 22px -14px rgb(70 50 6 / .55); }
.tr-fala--dela::before { content: ""; position: absolute; inset: 6px; border: 1.8px dashed rgb(30 51 84 / .5); border-radius: 2px; pointer-events: none; }
.tr-fala--dela p { font: 400 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.08 var(--f-titulo); text-transform: uppercase; text-wrap: balance; }
.tr-fala--dela cite { color: var(--tinta); }
.tr-falas { display: grid; gap: 12px; margin-top: 24px; }
.tr-falas .tr-fala { margin: 0; }
.tr-falas .tr-fala:nth-child(2) { transform: rotate(.7deg); margin-left: 18px; }
.tr-falas .tr-fala:nth-child(3) { transform: rotate(-.6deg); }
.tr-wa { margin-top: 18px; color: var(--tinta); }
.tr-etq > .tr-wa { display: flex; width: fit-content; }

/* chamada geral, embaixo do índice */
.tr-guia { margin-top: clamp(32px, 4vw, 52px); padding-left: 16px; }
.tr-guia-t { margin: 0 0 6px; font: 400 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.05 var(--f-titulo); text-transform: uppercase; max-width: 22ch; }
.tr-guia-p { margin: 0 0 20px; font-weight: 500; max-width: 36ch; }

/* índice: ao passar o mouse, o desenho dá um pulinho */
@media (hover: hover) {
  .tr-ico { transition: transform .45s var(--mola); }
  .tr-bt:hover .tr-ico { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
  .tr-bt[aria-expanded="false"]:hover .tr-nome { text-decoration: underline dashed 2px; text-underline-offset: 6px; }
}

/* ---------- desktop: índice à esquerda, etiqueta pendurada à direita ---------- */
@media (min-width: 900px) {
  .js .tr-painel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .js .tr-item { display: contents; }
  .js .tr-cab { grid-column: 1; }
  .js .tr-item:nth-of-type(1) .tr-cab { grid-row: 1; }
  .js .tr-item:nth-of-type(2) .tr-cab { grid-row: 2; }
  .js .tr-item:nth-of-type(3) .tr-cab { grid-row: 3; }
  .js .tr-item:nth-of-type(4) .tr-cab { grid-row: 4; }
  .js .tr-item:nth-of-type(5) .tr-cab { grid-row: 5; }
  .js .tr-aba { grid-column: 2; grid-row: 1 / span 7; }
  .js .tr-guia { grid-column: 1; grid-row: 6; }
  .js .tr-aba[hidden] { display: none; }
  .js .tr-etq { transform-origin: 50% 0; }
  .js .tr-cordao { display: block; }
  .js .tr-aba { position: relative; z-index: 2; padding-top: 6px; }
}

/* ---------- o gesto: a etiqueta aberta pendura com mola ---------- */
.tr-etq.tr-pendura { animation: tr-pendura 1.25s var(--suave) both; }
@keyframes tr-pendura {
  0% { opacity: 0; transform: rotate(-9deg) translateY(-18px); }
  30% { opacity: 1; transform: rotate(4deg) translateY(2px); }
  55% { transform: rotate(-2deg); }
  78% { transform: rotate(.8deg); }
  100% { opacity: 1; transform: rotate(0); }
}

/* ---------- celular: acordeão ---------- */
@media (max-width: 899px) {
  .tr-bt { grid-template-columns: 38px 1fr 24px; gap: 12px; min-height: 64px; padding: 12px 12px; }
  .tr-aba { padding: 6px 0 22px; }
  .js .tr-aba[hidden] { display: none; }
  .tr-etq { transform-origin: 12% 0; }
  .tr-topo { grid-template-columns: 1fr; }
  .tr-lead { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .tr-ico { width: 38px; height: 38px; }
  .tr-etq-nome { display: none; }
  .tr-selo { width: 72px; }
  .tr-alfinete { left: 34px; margin-left: 0; }
}

/* ===== pais ===== */
/* 5 · O que os pais dizem — tecido marinho, remendos costurados com as frases das avaliações */

.pa-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(80px, 8vw, 128px); }
.pa-topo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---------- coluna da esquerda: título + etiqueta da nota ---------- */
.pa-lado { position: sticky; top: 64px; }
.pa-nota-fio { width: 2px; height: 30px; margin: clamp(26px, 3vw, 40px) 0 0 64px; border-left: 2px dashed var(--amarelo-fita); position: relative; }
.pa-nota-fio::before { content: ""; position: absolute; left: -8px; top: -12px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(in oklab circle at 35% 30%, #fff6dd, var(--palha) 70%, var(--mostarda)); box-shadow: 0 2px 3px rgb(0 0 0 / .4); }
.pa-titulo { color: var(--creme); }
.pa-rem { transform: rotate(-2.4deg); margin-top: .08em; }
.pa-lead { margin-top: clamp(18px, 2vw, 26px); color: rgb(251 246 236 / .88); max-width: 30ch; }

.pa-nota {
  margin-top: -4px;
  width: min(100%, 380px);
  padding: 30px 28px 22px;
  transform: rotate(-2deg);
  transform-origin: 64px 0;
  box-shadow: 0 1px 0 rgb(0 0 0 / .3), 0 30px 46px -24px rgb(0 0 0 / .8);
}
.pa-nota p { margin: 0; }
.pa-nota-fonte { font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.pa-nota-num {
  font-family: var(--f-titulo); font-size: clamp(5.5rem, 3rem + 6vw, 8.5rem); line-height: .86;
  letter-spacing: -.02em; margin-top: 10px !important; color: var(--tinta);
}
.pa-nota-estrelas { display: flex; gap: 5px; margin-top: 10px !important; }
.pa-nota-estrelas svg { width: 28px; height: 28px; fill: var(--amarelo-fita); stroke: var(--mostarda-escura); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 2.4 1.8; }
.pa-nota-txt { margin-top: 12px !important; padding-top: 12px; border-top: 1.5px dashed rgb(30 51 84 / .4); font-size: 17px; font-weight: 500; }
.pa-nota-txt b { font-weight: 700; }
.pa-nota-data { margin-top: 4px !important; font-size: var(--t-mini); color: var(--tinta-suave); }

.pa-acoes { margin-top: 22px; }
.pa-google { color: var(--creme); }
.pa-google svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- mural de remendos (colagem, não grade) ---------- */
.pa-mural {
  list-style: none; margin: 0; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px);
  align-items: start;
}
.pa-r {
  --bg: var(--creme); --fio: var(--mostarda);
  position: relative;
  padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.4vw, 34px) clamp(22px, 2vw, 28px);
  background:
    repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 1px, rgb(0 0 0 / 0) 1px 4px),
    var(--bg);
  color: var(--tinta);
  border-radius: 12px 16px 13px 18px / 16px 12px 18px 13px;
  transform: rotate(var(--g, 0deg));
  box-shadow: 0 2px 0 rgb(0 0 0 / .22), 0 28px 40px -24px rgb(0 0 0 / .85);
}
.pa-r::before { /* pesponto do remendo */
  content: ""; position: absolute; inset: 9px; border-radius: 8px 12px 9px 14px / 12px 8px 14px 9px;
  border: 2px dashed var(--fio); pointer-events: none;
}
.pa-r::after { /* pontos em X nos cantos */
  content: ""; position: absolute; inset: 15px; pointer-events: none;
  --xs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%231e3354' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background: var(--xs) 0 0 / 9px 9px no-repeat, var(--xs) 100% 0 / 9px 9px no-repeat, var(--xs) 0 100% / 9px 9px no-repeat, var(--xs) 100% 100% / 9px 9px no-repeat;
}
.pa-r--rosa { --bg: #f6d6df; --fio: rgb(214 38 90 / .55); }
.pa-r--azul { --bg: var(--azul-jaleco); --fio: rgb(30 51 84 / .45); }
.pa-r--amarelo { --bg: var(--amarelo-fita); --fio: rgb(30 51 84 / .45); }

/* posições na colagem */
.pa-r--g { grid-column: 1 / -1; padding-top: clamp(40px, 3.6vw, 52px); }
.pa-par { grid-column: 1 / -1; position: relative; list-style: none; }
.pa-r--redondo { grid-column: 1 / 6; margin-top: 10px; }
.pa-r--picote { grid-column: 6 / 13; margin-top: 70px; }
.pa-mural > .pa-r--rosa { grid-column: 1 / 7; margin-top: -6px; margin-left: 8%; }
.pa-r--largo { grid-column: 7 / 13; margin-top: 56px; }

/* aspas grandes que escapam do remendo principal */
.pa-aspas {
  position: absolute; left: 26px; top: -34px; z-index: 2; width: clamp(68px, 6vw, 92px); height: auto;
  fill: var(--amarelo-fita); stroke: var(--tinta); stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linejoin: round;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / .22)); pointer-events: none; overflow: visible;
}

/* par "depois da consulta": dois remendos presos por uma fita */
.pa-par-lista { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); padding-top: 22px; }
.pa-par-lista > .pa-r:nth-child(2) { margin-top: 30px; }
.pa-par-fita {
  position: absolute; left: 50%; top: 0; z-index: 3; margin: 0;
  translate: -50% 0;
  padding: 8px 16px; background: var(--creme); color: var(--tinta);
  font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border-radius: 3px; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .8);
  transform: rotate(var(--g));
}
.pa-par-fita::after { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgb(30 51 84 / .45); border-radius: 2px; }

/* remendo redondo */
.pa-r--redondo {
  aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: clamp(30px, 3vw, 44px);
}
.pa-r--redondo::before { border-radius: 50%; inset: 10px; }
.pa-r--redondo::after { display: none; }
.pa-r--redondo .pa-quem { justify-content: center; }
.pa-r--redondo .pa-quem::before { display: none; }

/* remendo cortado com tesoura de picotar */
.pa-r--picote { background: none; box-shadow: none; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .22)) drop-shadow(0 18px 18px rgb(0 0 0 / .45)); padding-top: clamp(34px, 3vw, 44px); padding-bottom: clamp(30px, 2.6vw, 36px); }
.pa-fundo {
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    var(--bg);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x;
}
.pa-r--picote::before { inset: 16px 9px; border-radius: 4px; }
.pa-r--picote::after { inset: 22px 15px; }

.pa-frase { margin: 0; position: relative; }
.pa-frase p { margin: 0; font-size: clamp(18px, 1.15rem + .3vw, 21px); line-height: 1.42; font-weight: 500; text-wrap: pretty; }
.pa-r--g .pa-frase p { font-size: clamp(22px, 1.1rem + 1.1vw, 32px); line-height: 1.3; letter-spacing: -.01em; }
.pa-frase b { font-weight: 700; text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: rgb(30 51 84 / .5); }
.pa-quem { margin: 16px 0 0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; position: relative; }
.pa-quem::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.pa-quem span { font-weight: 600; font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* gesto: o remendo pousa no tecido com mola */
.js .pa [data-rev="pousa"] {
  transform: translateY(-40px) rotate(calc(var(--g, 0deg) + 7deg)) scale(1.1);
  transition: opacity .45s var(--suave), transform 1.05s var(--mola), box-shadow 1.05s var(--suave), filter 1.05s var(--suave);
  transition-delay: var(--atraso, 0s);
}
.js .pa .pa-r[data-rev="pousa"]:not(.wf-visto) { box-shadow: 0 2px 0 rgb(0 0 0 / 0), 0 80px 70px -30px rgb(0 0 0 / .45); }
.js .pa .pa-r--picote[data-rev="pousa"]:not(.wf-visto) { box-shadow: none; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0)) drop-shadow(0 60px 40px rgb(0 0 0 / .3)); }
.js .pa [data-rev="pousa"].wf-visto { opacity: 1; transform: rotate(var(--g, 0deg)); }

/* ---------- a conta dos temas: uma costura de 43 pontos por tema ---------- */
.pa-conta { padding-top: clamp(40px, 4vw, 56px); border-top: 2px dashed rgb(242 201 76 / .5); }
.pa-conta-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.pa-conta-tit { margin: 0; font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 1.2rem + 1.8vw, 44px); line-height: 1; color: var(--creme); }
.pa-conta-leg { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgb(251 246 236 / .82); }
.pa-leg-ponto { width: 10px; height: 4px; border-radius: 2px; background: var(--amarelo-fita); box-shadow: 15px 0 0 rgb(251 246 236 / .3); margin-right: 16px; }
.pa-temas { list-style: none; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; }
.pa-tema {
  display: grid; grid-template-columns: 48px 110px minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: clamp(14px, 2vw, 28px);
  padding: 18px 0; border-bottom: 1.5px dashed rgb(251 246 236 / .18);
}
.pa-tema p { margin: 0; }
.pa-tema .wf-motivo { width: 44px; height: 44px; color: var(--amarelo-fita); --motivo-traco: 3.6; }
.pa-tema-num { font-family: var(--f-titulo); font-size: clamp(2.75rem, 1.8rem + 2.2vw, 4.25rem); line-height: 1; color: var(--creme); text-align: right; }
.pa-tema-txt { font-size: var(--t-p); line-height: 1.4; color: rgb(251 246 236 / .86); max-width: 40ch; }
.pa-tema-txt b { color: var(--creme); font-weight: 700; }
.pa-ponto { /* 43 pontos: um por avaliação escrita; os do tema em amarelo */
  position: relative; display: block; height: 14px;
  background: linear-gradient(90deg, rgb(251 246 236 / .26) 0 60%, rgb(0 0 0 / 0) 60%) 0 50% / calc(100% / 43) 3px repeat-x;
}
.pa-ponto::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) / 43 * 100%);
  background: linear-gradient(90deg, var(--amarelo-fita) 0 60%, rgb(0 0 0 / 0) 60%) 0 50% / calc(100% / var(--n)) 4px repeat-x;
}

/* ---------- fitas com nome (como as de marcar roupa de escola) ---------- */
.pa-fitas-tit { margin: 0; font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 1.2rem + 1.8vw, 44px); line-height: 1; color: var(--creme); }
.pa-fitas-leg { margin: 10px 0 0; font-size: 15px; color: rgb(251 246 236 / .78); }
.pa-fitas { list-style: none; margin: clamp(24px, 2.6vw, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 18px; }
.pa-fita {
  --g: -.8deg;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 30px 11px 18px; min-height: 48px;
  background:
    repeating-linear-gradient(90deg, rgb(30 51 84 / .05) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    var(--creme);
  color: var(--tinta); font-size: 16.5px; line-height: 1.35; font-weight: 500;

  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  transform: rotate(var(--g));
}
.pa-fita:nth-child(even) { --g: 1.1deg; top: 5px; }
.pa-fita:nth-child(5n+2) { --g: -1.6deg; }
.pa-fita:nth-child(3n) { --g: -.3deg; background: repeating-linear-gradient(90deg, rgb(30 51 84 / .05) 0 1px, rgb(0 0 0 / 0) 1px 3px), #f6d6df; }
.pa-fita:nth-child(4n) { background: repeating-linear-gradient(90deg, rgb(30 51 84 / .05) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--azul-jaleco); }
.pa-fita::before { content: ""; position: absolute; left: 6px; right: 18px; top: 4px; bottom: 4px; border-top: 1.4px dashed rgb(30 51 84 / .35); border-bottom: 1.4px dashed rgb(30 51 84 / .35); pointer-events: none; }
.pa-fita q { quotes: "“" "”"; }
.pa-fita span { font-weight: 700; font-size: var(--t-mini); white-space: nowrap; padding-left: 12px; border-left: 1.5px dashed rgb(30 51 84 / .4); }

.pa-fecho { display: flex; justify-content: center; }

/* ---------- telas menores ---------- */
@media (max-width: 979px) {
  .pa-topo { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .pa-lado { position: static; }
  .pa-mural { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pa-mural > .pa-r, .pa-par { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .pa-r--redondo { width: min(86%, 300px); justify-self: center; }
  .pa-mural > .pa-r--rosa { margin-left: 6%; }
  .pa-r--picote { margin-right: 4%; }
  .pa-tema { grid-template-columns: 44px 84px minmax(0, 1fr); }
  .pa-ponto { grid-column: 2 / -1; margin-top: 10px; }
}
@media (max-width: 639px) {
  .pa-par-lista { grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
  .pa-par-lista > .pa-r:nth-child(2) { margin-top: 0; margin-left: 6%; }
  .pa-aspas { font-size: 90px; left: 16px; }
  .pa-tema { grid-template-columns: 38px auto minmax(0, 1fr); column-gap: 12px; padding: 16px 0; }
  .pa-tema .wf-motivo { width: 34px; height: 34px; }
  .pa-tema-num { font-size: 42px; min-width: 1.4ch; text-align: left; }
  .pa-ponto { grid-column: 1 / -1; }
  .pa-fita { font-size: 15px; flex-wrap: wrap; row-gap: 4px; }
  .pa-fita span { padding-left: 0; border-left: 0; }
  .pa-fita:nth-child(n+7) { display: none; }
  .pa-nota { width: 100%; }
}

/* ===== perguntas ===== */
/* 6 · Perguntas — forro claro; acordeão de <details>; o item aberto vira remendo costurado */

.fq-in {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.fq-cabeca { grid-column: 1; grid-row: 1; }
.fq-lista { grid-column: 1; grid-row: 2; }
.fq-bilhete { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(200px, 22vw, 330px); z-index: 1; }
.fq-titulo { color: var(--tinta); }
.fq-rem { transform: rotate(-2.2deg); }
.fq-lead { color: var(--tinta-suave); margin-top: clamp(18px, 2vw, 28px); max-width: 44ch; }

/* ---------- a lista ---------- */
.fq-lista { display: flex; flex-direction: column; gap: 6px; }
.fq-item {
  --fio: var(--mostarda);
  position: relative; isolation: isolate;
  border-bottom: 2px dashed rgb(30 51 84 / .22);
}
.fq-item::before { /* o remendo que aparece quando abre */
  content: ""; position: absolute; inset: -6px -14px; z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgb(194 151 65 / .06) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    #fffdf8;
  border-radius: 14px 18px 15px 20px / 18px 14px 20px 15px;
  box-shadow: 0 1px 0 rgb(150 96 40 / .25), 0 22px 34px -22px rgb(70 36 6 / .55);
  opacity: 0; transform: scale(.97) rotate(.6deg);
  transition: opacity .35s var(--suave), transform .7s var(--mola);
}
.fq-item::after { /* o pesponto que corre em volta */
  content: ""; position: absolute; inset: 3px -5px; z-index: -1; pointer-events: none;
  border: 2px dashed var(--fio); border-radius: 10px 14px 11px 16px / 14px 10px 16px 11px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s var(--suave) .12s;
}
.fq-item[open] { border-bottom-color: transparent; }
@media (hover: hover) { .fq-item:not([open]):hover::before { opacity: .55; transform: scale(.985) rotate(.3deg); } }
.fq-item[open]::before { opacity: 1; transform: rotate(-.5deg); }
.fq-item[open]::after { clip-path: inset(0 0 0 0); }
.fq-item:nth-child(3n+2) { --fio: rgb(214 38 90 / .55); }
.fq-item:nth-child(3n) { --fio: rgb(30 51 84 / .45); }

.fq-q {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; column-gap: clamp(14px, 1.8vw, 22px);
  min-height: 84px; padding: 14px 4px;
  font-weight: 700; font-size: clamp(19px, 1rem + .6vw, 24px); line-height: 1.25; letter-spacing: -.01em;
  border-radius: 10px;
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q::marker { content: ""; }
.fq-q:focus-visible { outline-offset: 4px; }

.fq-marca {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--creme-2); color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px rgb(30 51 84 / .18);
  transition: background .4s var(--suave), transform .6s var(--mola);
}
.fq-marca .wf-motivo { width: 36px; height: 36px; --motivo-traco: 3.4; }
.fq-marca [data-motivo="lua"] { transform: scale(1.75); --motivo-traco: 2.2; }
.fq-marca [data-motivo="estrela"] { transform: scale(1.6); --motivo-traco: 2.3; }
.fq-marca [data-motivo="coracao"] { transform: scale(1.45); --motivo-traco: 2.5; }
.fq-marca [data-motivo="cadente"], .fq-marca [data-motivo="dente"] { transform: scale(1.3); --motivo-traco: 2.8; }
.fq-marca [data-motivo="planeta"] { transform: scale(1.2); --motivo-traco: 3; }
/* o desenho se borda de novo quando a pergunta abre */
.fq-item[open] .fq-marca path { stroke-dasharray: var(--len, 400); animation: fq-borda 1s var(--suave) both; }
@keyframes fq-borda { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
.fq-item:nth-child(3n+1) .fq-marca { background: #fbeec9; }
.fq-item:nth-child(3n+2) .fq-marca { background: #f6e2e7; }
.fq-item:nth-child(3n) .fq-marca { background: #e5eef7; }
.fq-item[open] .fq-marca { transform: rotate(-8deg) scale(1.06); background: var(--amarelo-fita); }

/* botão de costura: linha em + que vira X magenta quando abre */
.fq-botao {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(in oklab circle at 35% 30%, #fff6dd, var(--palha) 70%, var(--mostarda));
  box-shadow: inset 0 0 0 3px rgb(150 100 40 / .35), 0 2px 3px rgb(0 0 0 / .2);
  transition: transform .6s var(--mola);
}
.fq-botao i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #6b4512; top: 13px; left: 13px; }
.fq-botao i:nth-child(2) { left: 25px; }
.fq-botao i:nth-child(3) { top: 25px; }
.fq-botao i:nth-child(4) { top: 25px; left: 25px; }
.fq-botao::before, .fq-botao::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.6px; margin: -1.3px 0 0 -9px;
  background: var(--tinta); border-radius: 2px; transition: background .3s;
}
.fq-botao::after { transform: rotate(90deg); }
.fq-item[open] .fq-botao { transform: rotate(45deg); }
.fq-item[open] .fq-botao::before, .fq-item[open] .fq-botao::after { background: var(--magenta); }
.fq-q:hover .fq-botao { transform: rotate(20deg); }
.fq-item[open] .fq-q:hover .fq-botao { transform: rotate(45deg); }

.fq-r { padding: 0 calc(44px + clamp(14px, 1.8vw, 22px)) 30px calc(56px + clamp(14px, 1.8vw, 22px) + 4px); color: var(--tinta); font-size: clamp(16.5px, 1rem + .25vw, 19px); line-height: 1.6; }
.fq-r p { margin: 0; max-width: 62ch; }
.fq-r p + p, .fq-r p + ul { margin-top: .8em; }
.fq-tel { font-weight: 700; text-decoration-style: dashed; text-underline-offset: 4px; display: inline-block; padding: 13px 0; margin: -13px 0; }
.fq-dicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fq-dicas li { position: relative; padding-left: 26px; }
.fq-dicas li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 2.4px; background: var(--mostarda); border-radius: 2px; box-shadow: 0 0 0 0 transparent; }

/* abertura suave onde houver suporte */
@supports (interpolate-size: allow-keywords) {
  .fq-item { interpolate-size: allow-keywords; }
  .fq-item::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--suave), content-visibility .5s allow-discrete; }
  .fq-item[open]::details-content { block-size: auto; }
}

/* ---------- bilhete ---------- */
.fq-bilhete {
  position: sticky; top: 96px;
  padding: 34px 28px 28px;
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), #fffdf8;
  border-radius: 4px 4px 10px 10px;
  transform: rotate(1.6deg);
  box-shadow: 0 1px 0 rgb(150 96 40 / .3), 0 26px 40px -24px rgb(70 36 6 / .6);
}
.fq-bilhete::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(rgb(214 38 90 / .14), rgb(214 38 90 / .04));
  border-bottom: 1.6px dashed rgb(214 38 90 / .5);
  border-radius: 4px 4px 0 0;
}
.fq-bilhete p { margin: 0; }
.fq-bilhete-tit { font-family: var(--f-titulo); text-transform: uppercase; font-size: clamp(26px, 1.2rem + 1vw, 34px); line-height: 1.24; }
.fq-bilhete-txt { margin-top: 12px !important; font-size: var(--t-p); color: var(--tinta-suave); }
.fq-bilhete-ass { margin-top: 10px !important; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.fq-bilhete-ass::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.fq-cta { margin-top: 22px; white-space: nowrap; }
.fq-girafa { position: absolute; right: 18px; top: -78px; width: 92px; height: 92px; color: var(--tinta); --motivo-traco: 2.6; transform: rotate(6deg); }

/* ---------- telas menores ---------- */
@media (max-width: 979px) {
  .fq-in { grid-template-columns: minmax(0, 1fr); }
  .fq-cabeca { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .fq-cabeca, .fq-lista, .fq-bilhete { grid-column: 1; grid-row: auto; }
  .fq-bilhete { position: relative; top: 0; max-width: 460px; margin-top: 60px; }
}
@media (max-width: 599px) {
  .fq-q { grid-template-columns: 44px minmax(0, 1fr) 40px; column-gap: 12px; min-height: 76px; font-size: 18px; }
  .fq-marca { width: 44px; height: 44px; }
  .fq-marca .wf-motivo { width: 28px; height: 28px; }
  .fq-botao { width: 40px; height: 40px; }
  .fq-botao i { top: 11px; left: 11px; width: 5px; height: 5px; }
  .fq-botao i:nth-child(2) { left: 23px; }
  .fq-botao i:nth-child(3) { top: 23px; }
  .fq-botao i:nth-child(4) { top: 23px; left: 23px; }
  .fq-r { padding: 0 6px 22px 56px; }
  .fq-item::before { inset: -4px -10px; }
  .fq-item::after { inset: 3px -3px; }
  .fq-bilhete { padding: 30px 22px 24px; }
}

/* ---------- o ponto de interrogação costurado (rodada 2) ---------- */
.fq-interroga {
  position: absolute; z-index: 0; right: clamp(0px, 3vw, 40px); top: -24px;
  width: clamp(120px, 15vw, 230px); height: auto; overflow: visible; pointer-events: none;
  transform: rotate(9deg);
}
.fq-interroga text { font-family: var(--f-titulo); font-size: 250px; fill: #f6d6df; }
.fq-interroga .fq-interroga-fio { fill: none; stroke: var(--magenta); stroke-opacity: .55; stroke-width: 2.4; stroke-dasharray: 9 7; transform: translate(0, 0); }
.fq-cabeca { position: relative; z-index: 1; }

/* assinatura dela no fim de cada resposta */
.fq-r::after {
  content: "Dra. Gi"; display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-weight: 700; font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--mostarda-escura);
}
.fq-r::before { content: none; }
@media (max-width: 979px) {
  .fq-bilhete { margin-top: 60px; }
  .fq-interroga { top: -34px; right: 4px; width: 92px; }
}

/* ===== contato ===== */
/* 7 · Onde fica — tecido caramelo; etiqueta grande com o endereço e o mapa preso com alfinetes */
.ct-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "topo mapa" "info mapa";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 5.4vw, 96px);
}
.ct-topo { grid-area: topo; }
.ct-info { grid-area: info; display: flex; flex-direction: column; gap: 28px; margin-top: clamp(28px, 3.4vw, 48px); }
.ct-mapa { grid-area: mapa; }

.ct-titulo .wf-remendo { transform: rotate(-3deg); }

/* etiqueta grande do endereço */
.ct-et-caixa { position: relative; max-width: 540px; transform: rotate(-1.6deg); filter: drop-shadow(0 1px 0 rgb(150 96 40 / .35)) drop-shadow(0 18px 18px rgb(50 26 4 / .28)); }
.ct-etiqueta {
  --picote: 9px;
  padding: 40px clamp(22px, 2.4vw, 36px) calc(30px + var(--picote));
  box-shadow: none;
  /* borda de baixo cortada com tesoura de picotar */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--picote)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--picote)) 100%;
}
.ct-etiqueta::after { /* pesponto em volta, como etiqueta tecida */
  content: ""; position: absolute; inset: 17px 8px calc(8px + var(--picote)); border: 1.4px dashed rgb(30 51 84 / .32); border-radius: 2px 2px 5px 5px; pointer-events: none;
}
.ct-et-rotulo {
  margin: 0 70px 12px 0; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--mostarda-escura);
}
.ct-end { font-style: normal; display: flex; flex-direction: column; gap: 4px; }
.ct-rua { font: 400 clamp(27px, 1rem + 2.3vw, 50px)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.ct-bairro { margin-top: 8px; font-weight: 700; font-size: var(--t-lead); line-height: 1.25; }
.ct-cidade { font-weight: 500; font-size: var(--t-p); color: var(--tinta-suave); letter-spacing: .02em; }

.ct-et-acoes { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px; padding-top: 18px; border-top: 1.6px dashed rgb(30 51 84 / .35); }
.ct-acao {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 16px;
  font: 700 16px/1 var(--f-texto); color: var(--tinta); text-decoration: none; cursor: pointer;
  background: rgb(232 196 141 / .38); border: 1.6px solid rgb(30 51 84 / .55); border-radius: 10px;
  transition: background-color .25s, transform .35s var(--mola);
}
.ct-acao:hover { background: var(--amarelo-fita); transform: translateY(-2px); }
.ct-acao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-aviso { margin: 10px 0 0; min-height: 1.4em; font-size: var(--t-mini); font-weight: 600; color: var(--tinta-suave); }
.ct-aviso:empty { margin: 0; min-height: 0; }

.ct-nota {
  display: flex; gap: 14px; align-items: flex-start; margin: 0; max-width: 46ch;
  font-size: var(--t-p); line-height: 1.5;
}
.ct-nota .wf-motivo { width: 46px; height: 46px; margin: -10px -6px 0 -10px; }

.ct-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ct-canais { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 18px; }
/* tags de roupa penduradas: ilhós, cordão e ponta cortada */
.ct-canais li { position: relative; filter: drop-shadow(0 8px 8px rgb(50 26 4 / .25)); transform: rotate(-2deg); }
.ct-canais li:nth-child(2) { transform: rotate(1.8deg); }
.ct-canais li::before { /* cordão */
  content: ""; position: absolute; z-index: 2; left: 9px; top: -14px; width: 22px; height: 34px;
  border: 2px solid var(--tinta); border-right: 0; border-bottom: 0; border-radius: 20px 0 0 0; opacity: .7; pointer-events: none;
}
.ct-canal {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 20px 6px 40px;
  text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.15;
  background:
    radial-gradient(circle at 20px 50%, var(--caramelo) 0 4px, var(--tinta) 4.5px 6.5px, rgb(0 0 0 / 0) 7px),
    repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transition: background-color .25s, transform .35s var(--mola);
}
.ct-canal:hover { transform: translateY(-2px) rotate(-1deg); }
.ct-canal small { display: block; font-size: var(--t-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mostarda-escura); }
.ct-canal .wf-motivo { width: 44px; height: 44px; margin: -6px -8px -6px -8px; --motivo-traco: 4; }

/* o mapa: um pedaço de forro preso no tecido com dois alfinetes */
.ct-mapa { position: relative; margin: 0; align-self: center; padding: 30px 0 0; }
.ct-pano {
  position: relative; overflow: hidden; aspect-ratio: 6 / 6.4;
  background: var(--creme);
  transform: rotate(1.4deg);
}
.ct-pano iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; filter: grayscale(.3) sepia(.32) saturate(1.05) contrast(.97); transition: filter .5s var(--suave); }
.ct-pano:hover iframe, .ct-pano:focus-within iframe { filter: none; }
.ct-espera {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(0deg, rgb(30 51 84 / .06) 0 1px, rgb(0 0 0 / 0) 1px 46px),
    repeating-linear-gradient(90deg, rgb(30 51 84 / .06) 0 1px, rgb(0 0 0 / 0) 1px 46px),
    var(--creme);
}
.ct-espera-girafa { width: 92px; height: 92px; color: var(--tinta); }
.ct-espera-txt { margin: 0; font-weight: 700; font-size: var(--t-p); }
.ct-abrir {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 16px/1 var(--f-texto); background: var(--tinta); color: var(--creme); text-decoration: none; display: inline-flex; align-items: center;
}

.ct-alfinete { position: absolute; z-index: 3; width: 46px; height: 96px; pointer-events: none; filter: drop-shadow(3px 6px 3px rgb(70 36 6 / .38)); }
.ct-alfinete svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ct-agulha { stroke: #8e96a3; stroke-width: 3.4; stroke-linecap: round; }
.ct-agulha-luz { stroke: rgb(255 255 255 / .85); stroke-width: 1.1; stroke-linecap: round; }
.ct-ponta { stroke: #8e96a3; stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.ct-furo { fill: rgb(60 40 20 / .35); }
.ct-cabeca { fill: var(--amarelo-fita); stroke: #a8821a; stroke-width: 1.4; }
.ct-brilho { fill: rgb(255 255 255 / .8); }
.ct-alfinete--1 { left: 2.5%; top: -6px; transform: rotate(-32deg); }
.ct-alfinete--2 { right: 3%; top: -2px; transform: rotate(26deg); }
.ct-alfinete--2 .ct-cabeca { fill: var(--rosa); stroke: #b8738b; }

/* selo da girafa tecido na etiqueta e o fio que costura a etiqueta ao mapa */
.ct-selo { position: absolute; right: 18px; top: 26px; width: 58px; height: 58px; border-radius: 50%; background: var(--creme); box-shadow: 0 0 0 1.4px rgb(30 51 84 / .3); padding: 4px; }
.ct-fio { position: absolute; z-index: -1; left: calc(100% - 10px); top: 34%; width: clamp(90px, 8vw, 160px); height: 120px; overflow: visible; pointer-events: none; }
.ct-fio path { fill: none; stroke: var(--creme); stroke-width: 3; stroke-dasharray: 10 6; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 1px rgb(70 36 6 / .35)); }
.js .ct-fio { clip-path: inset(0 100% 0 0); transition: clip-path 1s .2s var(--suave); }
.js .ct-in:has(.ct-mapa.wf-visto) .ct-fio { clip-path: inset(0 0 0 0); }
@media (max-width: 899px) { .ct-fio { display: none; } }

.ct-legenda {
  position: absolute; z-index: 3; left: 7%; bottom: -18px;
  padding: 9px 14px; border-radius: 4px; transform: rotate(-2.5deg);
  font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase;
  background: var(--tinta); color: var(--creme); box-shadow: 0 10px 18px -10px rgb(30 20 8 / .7);
}
.ct-legenda::after { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgb(251 246 236 / .5); border-radius: 2px; }

/* gesto: o mapa assenta e os alfinetes espetam com mola */
.js .ct-mapa .ct-pano { opacity: 0; transform: rotate(-3deg) translateY(-18px) scale(.97); transition: opacity .7s var(--suave), transform 1.1s var(--mola); }
.js .ct-mapa .ct-alfinete { opacity: 0; translate: -18px -46px; scale: 1.5; transition: opacity .3s .7s, translate .7s .7s var(--mola), scale .7s .7s var(--mola); }
.js .ct-mapa .ct-alfinete--2 { transition-delay: .9s; }
.js .ct-mapa .ct-legenda { opacity: 0; transform: rotate(-12deg) translateY(-10px); transform-origin: 0 0; transition: opacity .5s 1.15s, transform 1s 1.15s var(--mola); }
.js .ct-mapa.wf-visto .ct-pano { opacity: 1; transform: rotate(1.4deg); }
.js .ct-mapa.wf-visto .ct-alfinete { opacity: 1; translate: 0 0; scale: 1; }
.js .ct-mapa.wf-visto .ct-legenda { opacity: 1; transform: rotate(-2.5deg); }

@media (max-width: 899px) {
  .ct-in { display: flex; flex-direction: column; }
  .ct-info { display: contents; }
  .ct-et-caixa { order: 1; margin-top: 28px; transform: rotate(-1deg); }
  .ct-mapa { order: 2; margin-top: 30px; }
  .ct-nota { order: 3; margin-top: 52px; }
  .ct-acoes { order: 4; margin-top: 24px; }
  .ct-legenda-cid { display: none; }
  .ct-mapa { align-self: stretch; }
  .ct-selo { width: 48px; height: 48px; right: 14px; top: 22px; }
  .ct-pano { aspect-ratio: 1 / 1.05; }
}
@media (max-width: 420px) {
  .ct-acao { flex: 1 1 100%; justify-content: center; }
  .ct-canais { flex-direction: column; width: 100%; padding-left: 4px; }
  .ct-canal { width: 100%; }
}

/* ===== fim ===== */
/* 8 · Fecho (forro rosado) + rodapé (tecido marinho com a etiqueta interna da peça) */

/* ---------- fecho ---------- */
.fm-fecho {
  background:
    radial-gradient(in oklab ellipse 46% 60% at 22% 40%, #f6dbe3 0%, rgb(246 219 227 / 0) 100%),
    radial-gradient(in oklab ellipse 40% 50% at 92% 10%, #ffffff 0%, rgb(255 255 255 / 0) 100%),
    radial-gradient(in oklab ellipse 36% 44% at 86% 96%, #f3e1c2 0%, rgb(243 225 194 / 0) 100%),
    var(--creme);
}
.fm-fecho-in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: clamp(48px, 7vw, 120px);
}

.fm-foto { position: relative; margin: 0; max-width: 520px; justify-self: end; width: 100%; }
.fm-janela { aspect-ratio: 1 / 1.04; overflow: hidden; }
.fm-janela > img { object-position: 50% 30%; transform: scale(1.42); transform-origin: 47% 30%; }

.fm-lupa {
  position: absolute; z-index: 3; right: -12%; top: -6%;
  width: clamp(150px, 17vw, 250px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 8px var(--barra), 0 0 0 9.5px rgb(255 236 204 / .5), 0 20px 30px -6px rgb(70 36 6 / .45);
}
.fm-lupa img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.fm-lupa::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2.2px dashed var(--creme); pointer-events: none; }

.fm-linha { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.fm-linha path { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.fm-legenda {
  position: absolute; z-index: 3; right: -17%; top: calc(-6% + clamp(150px, 17vw, 250px) + 20px);
  max-width: 230px; padding: 20px 15px 12px; transform: rotate(2deg);
  font: 500 var(--t-mini)/1.35 var(--f-texto); color: var(--tinta-suave);
  background: repeating-linear-gradient(0deg, rgb(30 51 84 / .035) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--creme);
  border-radius: 3px 3px 6px 6px; box-shadow: 0 12px 20px -12px rgb(50 26 4 / .55);
}
.fm-legenda::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(rgb(30 51 84 / .1), rgb(30 51 84 / .02)); border-bottom: 1.5px dashed rgb(30 51 84 / .5); border-radius: 3px 3px 0 0; }
.fm-legenda q { display: block; margin-top: 2px; font: 700 17px/1.25 var(--f-texto); color: var(--tinta); quotes: "“" "”"; }

.fm-texto { max-width: 600px; }
.fm-titulo { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.75rem); }
.fm-lead { margin-top: clamp(20px, 2.2vw, 30px) !important; max-width: 36ch; color: var(--tinta); }
.fm-acoes { margin-top: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fm-ou { margin: 0; font-size: var(--t-p); font-weight: 500; }
.fm-ou a { font-weight: 700; text-decoration-style: dashed; text-underline-offset: 5px; display: inline-flex; min-height: 48px; align-items: center; }
.fm-nome { margin: 0; font-size: var(--t-mini); font-weight: 600; color: var(--tinta-suave); }
/* a frase dela, remendo costurado na borda da foto */
.fm-frase {
  position: absolute; z-index: 3; left: -14%; bottom: -9%; margin: 0; max-width: 340px;
  padding: 16px 18px 14px; transform: rotate(-3.5deg);
  background: repeating-linear-gradient(0deg, rgb(214 38 90 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px), #f6d6df;
  border-radius: 6px; box-shadow: 0 2px 0 rgb(180 110 130 / .35), 0 18px 26px -14px rgb(70 36 6 / .5);
}
.fm-frase::before { content: ""; position: absolute; inset: 5px; border: 1.6px dashed #c4718a; border-radius: 4px; pointer-events: none; }
.fm-frase p { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.38; color: var(--tinta); }
.fm-frase footer { margin-top: 6px; font-weight: 700; font-size: var(--t-mini); letter-spacing: .1em; text-transform: uppercase; color: #8c3b55; }

.fm-titulo .wf-sorri svg { bottom: -.2em; height: .32em; }

/* gesto do fecho: a lupa sai da frase da touca com mola e a linha se desenha */
.js .fm-foto .fm-lupa { opacity: 0; transform: translate(-60%, 60%) scale(.2); transition: opacity .4s .25s, transform 1.1s .25s var(--mola); }
.js .fm-foto .fm-legenda { opacity: 0; transform: rotate(-8deg) translateY(-12px); transform-origin: 50% 0; transition: opacity .5s 1s, transform 1s 1s var(--mola); }
.js .fm-foto .fm-linha { clip-path: inset(0 100% 0 0); transition: clip-path .8s .15s var(--suave); }
.js .fm-foto.wf-visto .fm-lupa { opacity: 1; transform: none; }
.js .fm-foto.wf-visto .fm-legenda { opacity: 1; transform: rotate(2deg); }
.js .fm-foto.wf-visto .fm-linha { clip-path: inset(0 0 0 0); }

/* ---------- rodapé ---------- */
.fm-rodape { padding-top: 0; padding-bottom: 28px; overflow: clip; }
.fm-rodape-in {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px); align-items: start;
}

/* a etiqueta interna, costurada na bainha de cima */
.fm-etiqueta-caixa { position: relative; z-index: 2; margin-top: -6px; filter: drop-shadow(0 22px 22px rgb(0 0 0 / .4)); }
.fm-etiqueta {
  position: relative; text-align: center;
  padding: 44px 30px 34px;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .45) 46%, rgb(255 255 255 / 0) 60%),
    repeating-linear-gradient(0deg, rgb(30 51 84 / .04) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    #f7f3ea;
  color: var(--tinta);
  border-radius: 0 0 6px 6px;
  transform-origin: 50% 0; transform: rotate(-1.4deg);
}
.fm-etiqueta::before { /* a dobra presa na costura */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: linear-gradient(rgb(30 51 84 / .16), rgb(30 51 84 / .03));
  border-bottom: 1.6px dashed rgb(30 51 84 / .5);
}
.fm-etiqueta::after { content: ""; position: absolute; inset: 26px 9px 9px; border: 1.2px solid rgb(30 51 84 / .18); border-radius: 0 0 3px 3px; pointer-events: none; }
.fm-etiqueta p { margin: 0; }
.fm-logo { width: 62px; height: 62px; display: block; margin: 0 auto 12px; }
.fm-et-nome { font: 400 clamp(19px, 1rem + .5vw, 23px)/1.1 var(--f-titulo); text-transform: uppercase; }
.fm-et-cro { margin-top: 8px !important; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fm-et-area { margin-top: 2px !important; font-size: var(--t-mini); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.fm-et-feito { margin: 16px auto 0 !important; padding: 8px 0; border-block: 1.4px dashed rgb(30 51 84 / .4); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.fm-et-simbolos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.fm-et-simbolos li { width: 40px; height: 40px; display: grid; place-items: center; border: 1.4px solid rgb(30 51 84 / .55); border-radius: 5px; }
.fm-et-simbolos .wf-motivo { width: 38px; height: 38px; --motivo-traco: 4.2; }
.fm-et-cuidados { margin-top: 12px !important; font-size: var(--t-mini); line-height: 1.45; color: var(--tinta-suave); }
.fm-et-contato { margin-top: 16px; padding-top: 14px; border-top: 1.4px dashed rgb(30 51 84 / .4); font-style: normal; display: flex; flex-direction: column; align-items: center; font-size: var(--t-mini); line-height: 1.45; }
.fm-et-contato a { min-height: 48px; display: inline-flex; align-items: center; font-weight: 700; text-underline-offset: 4px; text-decoration-style: dashed; }
.fm-et-contato span { margin-bottom: 6px; }

/* etiqueta de tamanho, costurada ao lado */
.fm-tam {
  position: absolute; z-index: -1; left: calc(100% + 14px); top: 0; width: 116px; padding: 26px 8px 14px; text-align: center;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / 0) 1px 3px), var(--tinta);
  color: var(--creme); border-radius: 0 0 4px 4px; box-shadow: inset 0 0 0 1px rgb(242 201 76 / .25);
  transform: rotate(2.5deg); transform-origin: 50% 0;
}
.fm-tam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-bottom: 1.4px dashed rgb(242 201 76 / .7); background: rgb(0 0 0 / .2); }
.fm-tam-r { display: block; font-size: var(--t-mini); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--amarelo-fita); }
.fm-tam-v { display: block; margin-top: 6px; font-size: var(--t-mini); font-weight: 600; line-height: 1.3; }

/* navegação */
.fm-nav { padding-top: clamp(64px, 8vw, 120px); }
.fm-nav-tit { margin: 0 0 14px; font: 700 var(--t-mini)/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo-fita); }
.fm-nav { position: relative; z-index: 2; }
.fm-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; max-width: 520px; }
.fm-nav li { break-inside: avoid; }
.fm-nav ul a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--t-lead); font-weight: 600; text-decoration: none; }
.fm-nav ul a:hover { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 6px; }
.fm-topo { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 22px; font-weight: 700; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 6px; }
.fm-topo .wf-motivo { width: 40px; height: 40px; transform: rotate(-35deg); }

/* assinatura grande, bordada em linha creme */
.fm-marca {
  position: absolute; z-index: 1; right: var(--gutter); bottom: 100px; width: min(54vw, 820px); height: auto; overflow: visible; pointer-events: none;
}
.fm-marca text { font-family: var(--f-titulo); font-size: 250px; fill: rgb(251 246 236 / .045); stroke: rgb(242 201 76 / .5); stroke-width: 2.4; stroke-dasharray: 11 7; stroke-linecap: round; }
/* a linha final */
.fm-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 16px; border-top: 2px dashed rgb(242 201 76 / .45);
  font-size: var(--t-mini); color: rgb(251 246 236 / .8);
}
.fm-base p { margin: 0; }
.fm-selo a { display: inline-flex; align-items: center; min-height: 48px; color: var(--creme); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.fm-selo a:hover { color: var(--amarelo-fita); }

/* gesto do rodapé: a etiqueta balança presa na costura */
.js .fm-etiqueta-caixa .fm-etiqueta { transform: rotate(9deg); transition: transform 1.6s var(--mola); }
.js .fm-etiqueta-caixa.wf-visto .fm-etiqueta { transform: rotate(-1.4deg); }

@media (max-width: 899px) {
  .fm-fecho-in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .fm-foto { justify-self: start; max-width: min(78%, 420px); }
  .fm-lupa { right: -26%; top: -4%; width: clamp(120px, 34vw, 170px); }
  .fm-legenda { right: -30%; top: calc(-4% + clamp(120px, 34vw, 170px) + 18px); max-width: 160px; }
  .fm-rodape-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fm-etiqueta-caixa { max-width: 380px; width: 100%; margin-inline: auto; }
  .fm-nav { padding-top: 56px; }
  .fm-base { flex-direction: column; align-items: flex-start; margin-top: 0; }
  .fm-marca { position: relative; display: block; right: auto; bottom: auto; margin: 44px 0 20px; width: 100%; }
  .fm-marca text { stroke-width: 3.4; }
  .fm-tam { display: none; }
  .fm-frase { position: relative; left: auto; bottom: auto; margin: -18px 0 0 6%; max-width: 300px; }
  .fm-frase p { font-size: 15px; }
  .fm-fecho-in { gap: 60px; }
}
@media (max-width: 480px) {
  .fm-nav ul { columns: 1; }
}