/* pe · Perguntas: a pergunta aberta é a faceta acesa */
.pe-miolo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5.5rem); align-items: start; }
.pe-cabeca { align-self: stretch; }
.pe-cabeca-in { position: sticky; top: 3.5rem; }
.pe-titulo { margin-top: 1.6rem; font-size: clamp(2.7rem, 5.4vw, 5.2rem); }

/* a pedra de sete facetas (heptágono em degraus, visto de cima) */
.pe-pedra { display: flex; align-items: flex-end; gap: 1.4rem; margin-top: clamp(1.8rem, 3.2vw, 3rem); }
.pe-gema { flex: none; width: clamp(14rem, 25vw, 22rem); height: auto; overflow: visible; }
.pe-cinta { fill: none; stroke: var(--rosa); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pe-faceta { cursor: pointer; }
.pe-faceta-cor, .pe-mesa { stroke: var(--aresta); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pe-faceta-luz { fill: #fffaf2; stroke: var(--aresta); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 1.2s var(--suave); }
.pe-faceta-n { font-family: var(--f-titulo); font-size: 15px; fill: var(--tinta); pointer-events: none; }
.pe-faceta.pe-meia .pe-faceta-luz { opacity: .45; }
.pe-faceta.pe-acesa .pe-faceta-luz { opacity: .92; }
.pe-faceta-n { transition: fill .8s; }
.pe-faceta.pe-acesa .pe-faceta-n { fill: var(--rosa-texto); }
.pe-mesa { fill: var(--pedra-1); }
.pe-brilho { pointer-events: none; mix-blend-mode: soft-light; }
.pe-mesa-n { font-family: var(--f-titulo); font-size: 38px; fill: var(--rosa-texto); pointer-events: none; }
.pe-conta { display: flex; flex-direction: column; padding-bottom: 1.2rem; }
.pe-conta-n { font-family: var(--f-titulo); font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1; color: var(--tinta); white-space: nowrap; }
.pe-conta-t { margin-top: .45rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }

/* a lista: fechada é um filete; aberta vira uma placa clara, chanfrada */
.pe-lista { --c: 26px; --rec: clamp(.9rem, 1.6vw, 1.5rem); --chip: 2.75rem; --vao: clamp(.9rem, 1.6vw, 1.5rem); }
.pe-item { position: relative; background-color: rgb(251 246 239 / 0); transition: background-color .9s var(--suave); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.pe-item::after { content: ""; position: absolute; left: var(--rec); right: var(--rec); bottom: 0; height: 1px; background: var(--fio); transition: opacity .6s; }
.pe-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--rosa); opacity: 0; transition: opacity .9s var(--suave);
  clip-path: polygon(evenodd, var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0,
    calc(var(--c) + .42px) 1px, 1px calc(var(--c) + .42px), 1px calc(100% - var(--c) - .42px), calc(var(--c) + .42px) calc(100% - 1px), calc(100% - var(--c) - .42px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--c) - .42px), calc(100% - 1px) calc(var(--c) + .42px), calc(100% - var(--c) - .42px) 1px, calc(var(--c) + .42px) 1px); }
.pe-item.pe-aberta { background-color: rgb(251 246 239 / .96); }
.pe-item.pe-aberta::before { opacity: .55; }
.pe-item.pe-aberta::after { opacity: 0; }
.pe-q { font-weight: 400; }
.pe-b { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--vao); width: 100%; min-height: 5.5rem; padding: 1.15rem var(--rec); text-align: left; }
.pe-b:focus-visible { outline-offset: -6px; }
.pe-chip { display: grid; place-items: center; width: var(--chip); height: var(--chip); font-family: var(--f-titulo); font-size: 1.15rem; line-height: 1; color: var(--tinta); background: var(--pedra-2); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: background-color .8s var(--suave), color .8s var(--suave); }
.pe-q-t { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--tinta); transition: translate .7s var(--suave); }
.pe-b:hover .pe-q-t { translate: .35rem 0; }
.pe-sinal { position: relative; width: 1.1rem; height: 1.1rem; margin-right: .2rem; }
.pe-sinal::before, .pe-sinal::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--tinta); transition: rotate .7s var(--suave); }
.pe-sinal::after { rotate: 90deg; }
.pe-aberta .pe-sinal::after { rotate: 0deg; }
.pe-aberta .pe-chip { background: var(--rosa-texto); color: var(--papel-claro); }
.pe-r { display: grid; grid-template-rows: 1fr; }
.pe-r-in { overflow: hidden; min-height: 0; }
.pe-r-txt { padding: .2rem calc(var(--rec) + 2.2rem) 2rem calc(var(--rec) + var(--chip) + var(--vao)); }
.pe-r-txt p + p { margin-top: .9rem; }
.js .pe-r { transition: grid-template-rows .8s var(--suave), visibility 0s; }
.js .pe-item:not(.pe-aberta) .pe-r { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .8s var(--suave), visibility 0s .8s; }
.pe-dito { quotes: none; font-family: var(--f-titulo); font-size: 1.22em; line-height: 1.25; color: var(--tinta); }
.pe-dito::before, .pe-dito::after { content: none; }
.pe-dito-p .pe-dito { display: block; font-size: clamp(1.35rem, 1.75vw, 1.6rem); line-height: 1.2; }
.pe-r-txt .pe-dito-p { margin-top: .5rem; padding-left: 1.1rem; border-left: 1px solid var(--rosa); }
.pe-de { display: block; margin-top: .5rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .04em; }
.pe-fone { font-weight: 600; color: var(--tinta); white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; display: inline-block; padding: .8rem 0; margin-block: -.8rem; }

.pe-fecho { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--fio); }
.pe-fecho-t { font-family: var(--f-titulo); font-size: clamp(1.8rem, 3.7vw, 3.5rem); line-height: 1.04; color: var(--tinta); max-width: 15em; text-wrap: balance; }

@media (max-width: 900px) {
  .pe-miolo { grid-template-columns: 1fr; }
  .pe-gema { width: 14rem; pointer-events: none; }
  .pe-pedra { gap: 1rem; align-items: center; }
  .pe-conta { padding-bottom: 0; }
  .pe-cabeca-in { position: static; }
  .pe-lista { --c: 16px; --rec: .85rem; --chip: 2.5rem; --vao: .85rem; margin-inline: -.35rem; }
  .pe-r-txt { padding: 0 var(--rec) 1.6rem; }
  .pe-b { min-height: 4.75rem; }
  .pe-botao { width: 100%; max-width: 26rem; }
}