/* in · Por fora e por dentro — a pedra vista de cima (o retrato) e em corte lateral (coroa, cinta, pavilhão) */
.in-secao { --in-c: 21%; --in-vao: clamp(3rem, 8vw, 8rem); }
.in-grade { display: grid; grid-template-columns: minmax(0, 1fr); }
.in-cabeca { order: 0; } .in-retrato { order: 1; } .in-corte { order: 2; } .in-fora { order: 3; } .in-dentro { order: 4; } .in-avalia { order: 5; }

/* título em quatro linhas, com recuo */
.in-cabeca { margin-bottom: clamp(2rem, 6vw, 3rem); }
.in-titulo { margin-top: clamp(1.2rem, 2.4vw, 2rem); font-size: clamp(3.3rem, 15vw, 5.4rem); line-height: .94; }
.in-titulo span { display: block; }
.in-titulo em { display: block; }
.in-titulo .in-recuo { padding-left: .95em; }

/* retrato: a pedra vista de cima (octógono alongado, chanfro igual à largura da "coroa" do corte) */
.in-retrato, .in-corte { position: relative; width: 100%; max-width: 35rem; margin-inline: auto; }
.in-foto { aspect-ratio: 2 / 3; clip-path: polygon(var(--in-c) 0, calc(100% - var(--in-c)) 0, 100% 14%, 100% 86%, calc(100% - var(--in-c)) 100%, var(--in-c) 100%, 0 86%, 0 14%); background: #6b4636; }

/* anotações ao longo das arestas, como num desenho de lapidação */
.in-nota { position: absolute; font-family: var(--f-titulo); font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1; letter-spacing: .04em; color: var(--rosa-texto); white-space: nowrap; pointer-events: none; }
.in-nota-a { left: 10.5%; top: 7%; transform: translate(-50%, -50%) rotate(-45deg) translateY(-1em); }
.in-nota-b { left: 89.5%; top: 7%; transform: translate(-50%, -50%) rotate(45deg) translateY(-1em); }
.in-nota-c { left: 25%; top: 66.75%; transform: translate(-50%, -50%) rotate(37deg) translateY(1.15em); }
.in-nota-d { left: 75%; top: 66.75%; transform: translate(-50%, -50%) rotate(-37deg) translateY(1.15em); }

/* corte lateral */
.in-corte { margin-top: 6%; }
.in-desenho { position: relative; }
.in-svg { display: block; width: 100%; height: auto; overflow: visible; }
.in-proj line { stroke: var(--rosa); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; opacity: .8; }
.in-f { stroke: var(--aresta); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.in-pav path { fill: none; stroke: var(--rosa); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.in-cinta-fio { fill: var(--rosa); }
.in-luz { fill: #fffaf2; opacity: 0; animation: in-acende 15s ease-in-out infinite; animation-delay: calc(3.5s + var(--i) * 2.5s); }
@keyframes in-acende { 0%, 16%, 100% { opacity: 0; } 8% { opacity: .62; } }
.in-arco { fill: none; stroke: var(--rosa-texto); stroke-width: 1; vector-effect: non-scaling-stroke; }
.in-grau { position: absolute; left: 4.6%; top: 14.5%; transform: translate(-50%, -50%); font-size: var(--t-mini); font-weight: 500; letter-spacing: .04em; color: var(--rosa-texto); }
.in-prumo { display: none; }
.in-dentro-palavra { position: absolute; left: 50%; transform: translate(-50%, -50%); font-family: var(--f-titulo); font-size: clamp(1rem, 4.4vw, 1.7rem); line-height: 1; color: var(--tinta); white-space: nowrap; display: inline-flex; align-items: center; gap: .7em; }
.in-dentro-palavra i { width: .34em; height: .34em; background: var(--rosa); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.in-p1 { top: 45.75%; } .in-p2 { top: 66.6%; } .in-p3 { top: 84.5%; font-size: clamp(.95rem, 3.6vw, 1.35rem); }

/* entrada do corte: projeção desce, a coroa se monta, o pavilhão é traçado */
.in-proj line { transform-box: fill-box; transform-origin: 50% 0; transition: transform 1.1s var(--suave) .15s; }
.in-f { transition: opacity .9s var(--suave); transition-delay: calc(.7s + var(--i) * .13s); }
.in-pav path { transition: stroke-dashoffset 1.6s var(--suave); transition-delay: calc(1.3s + var(--i) * .22s); }
.in-pav-fundo, .in-dentro-palavra, .in-corte .in-nota, .in-arco, .in-grau, .in-prumo { transition: opacity 1.2s var(--suave) 2.2s; }
.js .in-corte:not(.wf-visto) .in-proj line { transform: scaleY(0); }
.js .in-corte:not(.wf-visto) .in-f,
.js .in-corte:not(.wf-visto) .in-pav-fundo,
.js .in-corte:not(.wf-visto) .in-dentro-palavra,
.js .in-corte:not(.wf-visto) .in-nota,
.js .in-corte:not(.wf-visto) .in-arco,
.js .in-corte:not(.wf-visto) .in-grau,
.js .in-corte:not(.wf-visto) .in-prumo { opacity: 0; }
.js .in-corte:not(.wf-visto) .in-pav path { stroke-dashoffset: 1; }
.js .in-corte[data-entra] { transform: none; }

/* blocos de texto */
.in-bloco { margin-top: clamp(2.2rem, 7vw, 3.5rem); }
.in-ordem { display: flex; align-items: baseline; gap: .8rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.in-ordem b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; min-width: 1.6rem; }
.in-bloco .wf-sub { margin-top: .5rem; font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1; }
.in-bloco .wf-texto { margin-top: 1rem; }
.in-cita { margin: 0; }
.in-avalia { margin-top: clamp(2.2rem, 7vw, 3.5rem); padding-left: 1.2rem; border-left: 1px solid var(--rosa); }
.in-fala-media { font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.22; }
.in-fala-grande { font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }

/* a cinta: a faceta em que as duas metades se encontram. Placa com três facetas, arestas a 37° */
.in-cinta { --c: clamp(26px, 5vw, 70px); --in-a1: 80%; --in-a2: 90%; position: relative; z-index: 1; margin-top: clamp(4rem, 9vw, 8rem); padding: clamp(2.8rem, 6.5vw, 6rem) clamp(1.4rem, 5vw, 5rem);
  background:
    linear-gradient(var(--rosa), var(--rosa)) 0 0 / 100% 5px no-repeat,
    linear-gradient(127deg, transparent 0 var(--in-a1), rgb(255 250 243 / .95) var(--in-a1) calc(var(--in-a1) + 1.5px), rgb(220 184 166 / .34) calc(var(--in-a1) + 1.5px) 100%),
    linear-gradient(233deg, transparent 0 var(--in-a2), rgb(255 250 243 / .95) var(--in-a2) calc(var(--in-a2) + 1.5px), rgb(207 211 214 / .45) calc(var(--in-a2) + 1.5px) 100%),
    linear-gradient(180deg in oklab, var(--pedra-1), var(--pedra-2));
  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)); display: grid; gap: 2.4rem; }
.in-lipedema { margin-top: .5rem; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(3.4rem, 9vw, 7.6rem); line-height: .92; letter-spacing: -.015em; }
.in-cinta-a .wf-texto { margin-top: 1.2rem; max-width: 27em; }
.in-cinta-a .in-lipedema + .wf-texto { margin-top: 1.6rem; }
.in-botao { margin-top: 1.9rem; }
.in-cita-2 { margin-top: 1.8rem; max-width: 30rem; }

@media (max-width: 520px) {
  .in-botao { display: flex; }
}
/* celular e tablet: cada metade vira um verbete, com o algarismo grande à esquerda e um filete em cima */
@media (max-width: 999px) {
  .in-bloco { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: .4rem; padding-top: 1.5rem; border-top: 1px solid var(--fio); }
  .in-bloco > * { grid-column: 2; }
  .in-bloco .in-ordem { display: contents; }
  .in-bloco .in-ordem b { grid-column: 1; grid-row: 1 / span 3; font-size: 2.9rem; line-height: .9; color: var(--rosa); letter-spacing: 0; }
  .in-bloco .in-ordem span { grid-column: 2; grid-row: 1; }
  .in-bloco .wf-sub { grid-row: 2; }
  .in-fora { margin-top: clamp(3rem, 9vw, 4rem); }
  .in-dentro { margin-top: 2rem; }
  .in-corte, .in-retrato { max-width: 32rem; }
  .in-cinta { --in-a1: 91%; --in-a2: 95.5%; padding-bottom: clamp(4.6rem, 14vw, 6rem); }
  .in-avalia { max-width: 32rem; }
}

@media (min-width: 1000px) {
  .in-grade { grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); column-gap: var(--in-vao); grid-template-rows: auto 1fr auto; }
  .in-cabeca { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .in-titulo { font-size: clamp(4rem, 7.6vw, 7.4rem); }
  .in-retrato { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
  .in-fora { grid-column: 2; grid-row: 2; align-self: end; margin-top: 2rem; padding-bottom: 16%; }
  .in-corte { grid-column: 1; grid-row: 3; max-width: none; align-self: start; }
  /* o bloco II começa na altura da primeira faixa do pavilhão: 6% + 27,5% da largura da coluna 1 (= 79,1% da coluna 2) */
  .in-avalia { grid-column: 1; grid-row: 4; align-self: start; margin-top: clamp(1.5rem, 3vw, 3rem); margin-left: 12%; padding-left: 1.4rem; }
  .in-dentro { grid-column: 2; grid-row: 3 / span 2; align-self: start; margin-top: 0; padding-top: calc(26.5% - .65rem); }
  .in-bloco .wf-texto { max-width: 30em; }
  .in-dentro-palavra { font-size: clamp(1.2rem, 2vw, 1.75rem); }
  .in-p3 { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
  /* chamadas: um fio liga cada bloco à parte da pedra de que ele fala */
  .in-ordem { position: relative; }
  .in-bloco .in-ordem::before { content: ""; position: absolute; right: calc(100% + 1rem); top: 50%; height: 1px; width: calc(var(--in-vao) - 1rem); background: var(--rosa); opacity: .8; }
  .in-bloco .in-ordem::after { content: ""; position: absolute; right: calc(100% + var(--in-vao) - 4px); top: calc(50% - 4px); width: 9px; height: 9px; background: var(--rosa); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
  .in-dentro .in-ordem::before { width: calc(var(--in-vao) - 1rem + 6.64%); }
  .in-dentro .in-ordem::after { right: calc(100% + var(--in-vao) + 6.64% - 4px); }
  /* o prumo: da ponta da cinta até o canto da placa do lipedema (a placa cobre o que sobra) */
  .in-prumo { display: block; position: absolute; left: 0; top: 35.4%; width: 1px; height: 50rem; background: repeating-linear-gradient(180deg, var(--rosa) 0 2px, transparent 2px 7px); opacity: .8; }
  .in-cinta-b { max-width: 34rem; }
  .in-cinta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
  .in-fala-grande { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
}