/* Tabela de medidas UsePiri · transcrição fiel do arquivo do owner (docs/referencias/tabela-de-medidas/).
   Cores, fontes (Karla, Outfit), raios e transições iguais; o que era estilo inline virou classe pm-*. */
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/piri/fonts/karla-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/piri/fonts/karla-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:200 500;font-display:swap;src:url("/assets/piri/fonts/outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:200 500;font-display:swap;src:url("/assets/piri/fonts/outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.pm{--pm-acento:#b58f66;--pm-marcador:#2e8f8f;--pm-ink:#3f3a34;--pm-ink-2:#4a443c;--pm-ink-3:#6f6255;--pm-mudo:#a0958a;--pm-mudo-2:#b6aca0;--pm-mudo-3:#bdb3a6;--pm-borda:#efece8;--pm-borda-2:#f1eeea;
  width:100%;max-width:1120px;margin:0 auto;background:#fff;border:1px solid var(--pm-borda);border-radius:22px;box-shadow:0 40px 90px -40px rgba(60,45,30,.28),0 2px 6px rgba(60,45,30,.04);overflow:hidden;
  font-family:Karla,system-ui,sans-serif;color:var(--pm-ink);text-align:left;line-height:1.4;box-sizing:border-box}
.pm *,.pm *::before,.pm *::after{box-sizing:border-box}
.pm button{font-family:inherit;color:inherit}
.pm kbd{font-family:Outfit,sans-serif;font-size:11px;color:#a99c8c;border:1px solid #e6e0d8;border-radius:5px;padding:2px 6px;background:#fff}

/* topo */
.pm__topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px 18px;border-bottom:1px solid var(--pm-borda-2);flex-wrap:wrap}
.pm__marca{display:flex;align-items:center;gap:12px}
.pm__selo{width:46px;height:46px;display:block;flex:none}
.pm__marca-texto{padding:2px 0 2px 2px;border-left:1px solid #ece7e1}
.pm__marca-titulo{padding-left:12px;font-family:Outfit,sans-serif;font-weight:300;font-size:15px;letter-spacing:.06em;color:var(--pm-ink-2)}
.pm__marca-sub{padding-left:12px;font-size:10.5px;letter-spacing:.2em;color:var(--pm-mudo-2);text-transform:uppercase;margin-top:3px}
.pm__topo-acoes{display:flex;align-items:center;gap:8px}
.pm__unidade{display:flex;background:#f6f4f1;border-radius:999px;padding:3px}
.pm__unidade-btn{padding:7px 16px;border:0;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:all .25s ease;color:#a99c8c;background:transparent}
.pm__unidade-btn[aria-pressed="true"]{color:var(--pm-ink);background:#fff}
.pm__replay{width:36px;height:36px;border-radius:50%;border:1px solid #eae5df;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#a1927f;padding:0}
.pm__replay:hover{border-color:var(--pm-acento);transform:rotate(-90deg)}

/* corpo em duas colunas */
.pm__corpo{display:flex;flex-wrap:wrap}
.pm__esq{flex:1 1 380px;min-width:320px;padding:26px 26px 30px;background:linear-gradient(180deg,#fcfbfa 0%,#f6f4f1 100%);border-right:1px solid var(--pm-borda-2)}
.pm__dir{flex:1 1 460px;min-width:340px;padding:28px 30px 34px}

/* abas de modelo */
.pm__abas{position:relative;display:grid;grid-template-columns:repeat(var(--pm-abas,2),1fr);gap:6px;background:#efebe6;padding:4px;border-radius:12px}
.pm__abas-pilula{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px - (var(--pm-abas,2) - 1) * 6px) / var(--pm-abas,2));border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(90,70,45,.10);transition:transform .42s cubic-bezier(.3,.9,.3,1);pointer-events:none;transform:translateX(calc(var(--pm-aba-ativa,0) * (100% + 6px)))}
.pm__aba{position:relative;z-index:1;text-align:center;padding:10px 4px;border:0;background:none;border-radius:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .3s cubic-bezier(.3,.9,.3,1);color:var(--pm-ink-3)}
.pm__aba:hover,.pm__aba[aria-selected="true"]{color:var(--pm-ink)}
.pm__aba:focus-visible{outline:2px solid var(--pm-marcador);outline-offset:2px}

/* desenho */
.pm__desenho{position:relative;margin-top:14px}
.pm__desenho svg{width:100%;height:auto;display:block;overflow:visible;color:var(--pm-acento)}
.pm{--pm-escala-mult:1}
.pm-corpo{transition:transform .7s cubic-bezier(.25,.9,.3,1);transform-origin:200px 250px;transform:scale(calc(var(--pm-escala,0.944) * var(--pm-escala-mult,1)))}
.pm-modelo{transition:opacity .5s ease;opacity:0;pointer-events:none}
.pm-modelo.is-ativo{opacity:1}
.pm-selo{transition:opacity .45s ease;opacity:0}
.pm.is-desenhado .pm-selo{opacity:1}
.pm-cota{cursor:pointer;color:var(--pm-acento);outline:0}
.pm-cota.is-destaque,.pm-cota:focus-visible{color:var(--pm-marcador)}
.pm-cota [data-pm="linha"]{stroke:currentColor;stroke-width:1.2}
.pm-cota.is-destaque [data-pm="linha"],.pm-cota:focus-visible [data-pm="linha"]{stroke-width:2.4}
.pm-cota [data-pm="ponto"],.pm-cota [data-pm="numero"]{fill:currentColor}
.pm.is-desenhado .pm-cota [data-pm="linha"]{stroke-dashoffset:0!important}
.pm.is-desenhado .pm-cota [data-pm="ponto"],.pm.is-desenhado .pm-cota [data-pm="numero"],.pm.is-desenhado .pm-cota [data-pm="losango"]{opacity:1!important}
.pm.is-desenhado .pm-cota [data-pm="losango"]{transform:scale(1)!important}
.pm.is-desenhado .pm-cota.is-destaque [data-pm="losango"]{transform:scale(1.3)!important}
.pm__valor{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--pm-acento);text-shadow:0 0 4px #fdfcfa,0 0 8px #fdfcfa;pointer-events:none;transition:opacity .4s ease 1s,color .3s ease;opacity:0;white-space:nowrap}
.pm.is-desenhado .pm__valor{opacity:1}
.pm__valor.is-destaque{color:var(--pm-marcador)}
.pm__tamanho{position:absolute;left:0;bottom:-2px;display:flex;align-items:center;gap:10px}
.pm__tamanho-letra{display:flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 10px;border-radius:14px;background:#fff;border:1px solid #ece5da;box-shadow:0 8px 20px -10px rgba(90,70,45,.35);font-family:Outfit,sans-serif;font-size:26px;font-weight:300;color:var(--pm-ink);transition:all .4s cubic-bezier(.3,.9,.3,1)}
.pm__rotulo{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pm-mudo-2)}
.pm__tamanho-dica{font-size:12px;color:#8a8074;margin-top:3px}
.pm__nota-desenho{display:flex;align-items:flex-start;gap:10px;margin-top:30px}
.pm__nota-texto{font-size:11.5px;line-height:1.7;color:var(--pm-mudo);letter-spacing:.02em;flex:1}
.pm__teclas{display:flex;align-items:center;gap:4px;flex:none;padding-top:2px}
.pm__teclas span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-mudo-3);margin-left:2px}

/* tabela */
.pm__titulo{margin:0;font-family:Outfit,sans-serif;font-weight:200;font-size:38px;color:var(--pm-ink);letter-spacing:-.01em;line-height:1.1;text-transform:none}
.pm__sub{margin:8px 0 0;font-size:12.5px;color:var(--pm-mudo);letter-spacing:.02em}
/* Partes de um conjunto (Blusa / Short): alternador acima da tabela, um grupo de colunas por vez. */
.pm__partes{display:inline-flex;gap:4px;margin:18px 0 -10px;padding:3px;border-radius:999px;background:#f6f4f1}
.pm__parte{min-height:34px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#a99c8c;font:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .25s ease}
.pm__parte[aria-pressed="true"]{color:var(--pm-ink);background:#fff;box-shadow:0 2px 8px -4px rgba(90,60,30,.35)}
.pm__parte:focus-visible{outline:2px solid var(--pm-acento);outline-offset:2px}
.pm .pm__coluna[hidden],.pm .pm__celula[hidden]{display:none!important}
.pm__tabela{--pm-colunas:3}
.pm__cabecalho{display:grid;grid-template-columns:0.8fr repeat(var(--pm-colunas,3),1fr);margin-top:26px;padding:0 10px 14px;border-bottom:1px solid #ebe7e2}
.pm__coluna{text-align:center;font-size:12.5px;font-weight:700;color:var(--pm-ink-2);cursor:default;transition:color .25s ease}
.pm__coluna:hover,.pm__coluna.is-destaque{color:var(--pm-marcador)}
.pm__linhas{position:relative;margin-top:6px}
.pm__realce{position:absolute;left:0;right:0;top:0;height:48px;border-radius:10px;background:linear-gradient(90deg,#faf6f0,#fdfcfa);box-shadow:inset 0 0 0 1px #f0e7da;transition:transform .45s cubic-bezier(.3,.9,.3,1);transform:translateY(var(--pm-sel-y,0px));pointer-events:none}
.pm__realce-barra{position:absolute;left:0;top:0;width:3px;height:48px;border-radius:3px;background:var(--pm-acento);transition:transform .45s cubic-bezier(.3,.9,.3,1);transform:translateY(var(--pm-sel-y,0px));pointer-events:none}
.pm__linha{position:relative;display:grid;grid-template-columns:0.8fr repeat(var(--pm-colunas,3),1fr);align-items:center;height:48px;padding:0 10px;border-bottom:1px solid #f4f1ed;cursor:pointer;transition:opacity .5s ease,transform .5s cubic-bezier(.25,.9,.3,1);opacity:0;transform:translateY(14px);outline:0}
.pm.is-desenhado .pm__linha{opacity:1;transform:none}
.pm__linha:focus-visible{box-shadow:inset 0 0 0 2px var(--pm-marcador);border-radius:10px}
.pm__celula-tamanho{display:flex;align-items:center;justify-content:center;gap:5px}
.pm__tam{font-size:14px;font-weight:600;color:#6f6559;letter-spacing:.06em;transition:color .3s ease}
.pm__rec-ponto{width:5px;height:5px;border-radius:50%;background:var(--pm-acento);transition:opacity .3s ease;opacity:0}
.pm__linha.is-recomendada .pm__rec-ponto{opacity:1}
.pm__celula{font-size:15px;color:#7d7266;font-weight:400;text-align:center;font-variant-numeric:tabular-nums;transition:color .3s ease}
.pm__linha:hover .pm__tam,.pm__linha:hover .pm__celula{color:#5d554b}
.pm__linha.is-selecionada .pm__tam,.pm__linha.is-selecionada .pm__celula{font-weight:700;color:var(--pm-ink)}

/* recomendador e dica */
.pm__recomendador{margin-top:24px;padding:18px 18px 16px;border:1px solid #f0e9df;border-radius:14px;background:linear-gradient(180deg,#fdfbf8,#faf7f2)}
.pm__recomendador[hidden]{display:none}
.pm__recomendador-cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm__recomendador-titulo{font-family:Outfit,sans-serif;font-size:15px;font-weight:300;color:var(--pm-ink-2)}
.pm__recomendador .pm__rotulo{font-size:10.5px;letter-spacing:.14em;color:var(--pm-mudo-3)}
.pm__recomendador-linha{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.pm__campo{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;background:#fff;border:1px solid #ece5da;border-radius:11px;margin:0}
.pm__campo input{width:62px;border:none;outline:none;background:transparent;font-family:Karla,sans-serif;font-size:16px;font-weight:600;color:var(--pm-ink);padding:0;margin:0;-moz-appearance:textfield;height:auto;line-height:1.2}
.pm__campo input::-webkit-outer-spin-button,.pm__campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pm__campo:focus-within{border-color:var(--pm-acento)}
.pm__campo-unidade{font-size:11.5px;color:var(--pm-mudo-2);letter-spacing:.06em}
.pm__recomendador-texto{font-size:12px;color:#8a8074;line-height:1.5;flex:1;min-width:160px}
.pm__dica{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px 16px;background:#f8f6f3;border-radius:12px;font-size:12px;color:#8a8074;line-height:1.6}
.pm__dica[hidden]{display:none}
.pm__dica-ponto{width:6px;height:6px;border-radius:50%;background:var(--pm-marcador);flex:none}

@media (prefers-reduced-motion:reduce){.pm *{transition-duration:.01ms!important}}

/* ─── Proporção em telas estreitas (11/09/2026) ───────────────────────────────
   O desenho escala com a coluna (viewBox 400×440), mas as etiquetas de valor e o cartão do
   tamanho são HTML com tamanho fixo: no celular ficavam do tamanho do desktop e cobriam a
   peça. As etiquetas acompanham a largura do desenho (container query) e ancoram à direita
   do marcador; o cartão do tamanho passa a fluir abaixo do desenho; a peça cresce menos. */
.pm__desenho{container-type:inline-size}
/* .pm__cena = caixa do SVG: as etiquetas de valor se posicionam em % dela, não do painel inteiro. */
.pm__cena{position:relative}
.pm__valor{font-size:clamp(9px,2.6cqw,12px)}
.pm__valor.is-direita{transform:translate(-4px,-50%)}
.pm__valor{transition:left .7s cubic-bezier(.25,.9,.3,1),top .7s cubic-bezier(.25,.9,.3,1),opacity .4s ease 1s,color .3s ease}
.pm__tamanho-letra{font-size:clamp(20px,7cqw,24px)}
@media (max-width:767px){
  .pm{--pm-escala-mult:.9}
  .pm__desenho{padding:0 2px 0 6px}
  .pm__cena{max-width:360px;margin:0 auto}
  .pm__tamanho{position:static;margin-top:6px;gap:12px}
  .pm__tamanho-letra{min-width:56px;height:56px}
  .pm__nota-desenho{margin-top:18px}
}
@media (hover:none),(pointer:coarse){.pm__teclas{display:none}}

/* ── Modo foto (fiel ao arquivo do owner "Tabela de Medidas Vestido Use Piri.html", 11/09/2026): foto flat lay com os pontos de medida no lugar do desenho ── */
.pm--foto .pm__esq--foto{flex:1 1 420px;min-width:330px;padding:0 0 22px;background:#fdfcfa;border-right:1px solid #f1ece4}
.pm__foto{position:relative}
.pm__foto-cena{position:relative;transition:transform .7s cubic-bezier(.25,.9,.3,1);transform-origin:50% 46%;transform:scale(var(--pm-escala,1))}
.pm__foto-img{width:100%;height:auto;display:block;opacity:0;transition:opacity .8s ease}
.pm.is-desenhado .pm__foto-img{opacity:1}
.pm__foto-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease .4s}
.pm__foto-overlay svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pm.is-desenhado .pm__foto-overlay{opacity:1}
.pm--foto .pm__etiqueta{position:absolute;transform:translate(-50%,-50%);padding:4px 13px;border-radius:999px;background:#fff;box-shadow:0 3px 10px -3px rgba(90,60,30,.28),0 0 0 1px rgba(140,110,70,.1);font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--pm-acento);text-shadow:none;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s ease .85s,color .3s ease}
.pm--foto .pm__etiqueta[data-pm-valor="3"]{transition-delay:1s}
.pm--foto .pm__etiqueta[data-pm-valor="2"]{transition-delay:1.15s}
.pm--bermuda{--pm-acento:#8a6a45;--pm-marcador:#6b4a2a}
/* Coluna da foto acompanha a altura da tabela: a foto fica centrada no espaço que sobra, sem vão embaixo (vale para todo guia em modo foto). */
.pm--foto .pm__esq--foto{display:flex;flex-direction:column}
.pm--foto .pm__foto{flex:1;display:flex;align-items:center}
.pm--foto .pm__foto-cena{width:100%}
.pm--bermuda .pm__sub{font-weight:400}
.pm--4col .pm__etiqueta[data-pm-valor="4"]{transition-delay:1.25s}
.pm--4col .pm__coluna{min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){
 .pm--foto .pm__esq--foto{min-width:0;flex-basis:auto;width:100%}
 .pm--4col .pm__cabecalho,.pm--4col .pm__linha{padding-left:4px;padding-right:4px;grid-template-columns:.7fr repeat(4,minmax(0,1fr))}
 .pm--foto .pm__etiqueta{font-size:11px;padding:3px 7px}
}
.pm--foto.is-desenhado .pm__etiqueta{opacity:1}
.pm--foto .pm__etiqueta.is-destaque{color:var(--pm-marcador);transition-delay:0s}
.pm--foto .pm__tamanho--foto{position:static;display:flex;align-items:center;gap:12px;padding:0 26px;margin-top:2px}
.pm--foto .pm__tamanho-letra{background:#fff;border:1px solid #ece5da;box-shadow:0 8px 20px -12px rgba(90,60,30,.45);color:#3a2d1e;font-size:26px}
.pm--foto .pm__tamanho--foto .pm__rotulo{color:#b0a292}
.pm--foto .pm__tamanho-dica{color:#7a6c5a}
.pm__foto-caption{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:#4a3a28}
.pm__foto-espaco{flex:1}
.pm__foto-nota{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#bfb3a2}
.pm__nota-desenho--dir{margin-top:18px}
@media (max-width:767px){.pm--foto .pm__tamanho--foto{padding-left:18px;padding-right:18px}}