/* ===== opinioes (prefixo op-) — a persiana de 335 lâminas e as frases como frestas de luz ===== */
.op-cab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end}
.op-titulo{font-size:clamp(2.4rem,5.2vw,5rem)}
.op-intro{padding-bottom:.4rem}
.op-h3{margin:0;font-family:var(--serifa);font-weight:300;font-size:clamp(1.8rem,3.1vw,3rem);line-height:1.06;letter-spacing:-.018em}
.op-h3 em{font-style:italic;color:var(--creme)}

/* (a) 177 de 335: a persiana, uma lâmina por opinião. No celular, cinco panos de 67; no computador, um pano só de 335 */
.op-a{margin-top:clamp(2.6rem,8vh,5rem)}
.op-palco{position:relative}
.op-persiana{display:grid;gap:4px;margin-inline:calc(var(--margem) * -1)}
.op-persiana i{display:block;position:relative;height:46px;--op-t:67;--op-n:67;--op-c:.64;
  background:repeating-linear-gradient(90deg, rgba(233,223,198,.12) 0 calc(100% / var(--op-t) * var(--op-c)), transparent calc(100% / var(--op-t) * var(--op-c)) calc(100% / var(--op-t)))}
.op-persiana i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(100% * var(--op-n) / var(--op-t));
  background:linear-gradient(180deg in oklab, #fbf4e2 0%, var(--creme) 38%, #b9ad92 100%);
  -webkit-mask-image:repeating-linear-gradient(90deg, #000 0 calc(100% / var(--op-n) * var(--op-c)), transparent calc(100% / var(--op-n) * var(--op-c)) calc(100% / var(--op-n)));mask-image:repeating-linear-gradient(90deg, #000 0 calc(100% / var(--op-n) * var(--op-c)), transparent calc(100% / var(--op-n) * var(--op-c)) calc(100% / var(--op-n)));
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease)}
.op-persiana i:nth-child(2)::before{transition-delay:.4s}
.op-persiana i:nth-child(3){--op-n:43}
.op-persiana i:nth-child(3)::before{transition-delay:.8s}
.op-persiana i:nth-child(n+4)::before{content:none}
.op-persiana.wf-visto i::before,.wf-sem-js .op-persiana i::before{clip-path:inset(0 0 0 0)}
.op-legenda{margin:1rem 0 0;display:flex;align-items:center;gap:.7rem}
.op-legenda::before{content:"";flex:none;width:.4rem;height:1.2rem;background:var(--creme)}
.op-a-num{margin-top:1.8rem}
.op-a-num b{display:block;font-size:clamp(6rem,34vw,9rem);color:var(--creme);letter-spacing:-.045em;line-height:.86;margin-left:-.04em}
.op-a-num .op-h3{margin-top:.9rem}
.op-a-num p{margin:.7rem 0 0;max-width:22em}
.op-a-frases{display:grid;gap:1.7rem;margin-top:2.4rem}

/* a fresta: uma fenda de luz, e a luz que entra por ela */
.op-f{position:relative;margin:0;padding:.35rem 0 .35rem calc(var(--op-w,4px) + 1.3rem)}
.op-f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--op-w,4px);background:linear-gradient(180deg, #fff8e6, var(--creme));box-shadow:0 0 18px 1px rgba(233,223,198,.4)}
.op-f::after{content:"";position:absolute;z-index:-1;left:var(--op-w,4px);top:-22%;bottom:-22%;width:min(100%,24rem);pointer-events:none;
  background:linear-gradient(90deg, rgba(233,223,198,.17) 0%, rgba(233,223,198,.05) 50%, transparent 100%);clip-path:polygon(0 15%, 100% 0, 100% 100%, 0 85%);filter:blur(7px)}
.op-f p{margin:0;font-family:var(--serifa);font-style:italic;font-weight:300;font-size:clamp(1.14rem,1.5vw,1.4rem);line-height:1.4}
.op-f footer{margin-top:.55rem;font-size:var(--t-mini);color:var(--texto-suave)}
.op-f--media p{font-size:clamp(1.4rem,2.3vw,2.15rem);line-height:1.24}

/* (c) a janela aberta: a frase grande e os pacientes de muitos anos */
.op-c{position:relative;margin-top:clamp(3.4rem,10vh,6.5rem);display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);column-gap:clamp(1.6rem,4vw,4rem);row-gap:clamp(1.4rem,3.6vh,2.4rem);align-items:end;
  padding:clamp(2rem,4.4vw,4.2rem);border-radius:var(--raio);color:var(--tinta);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0, rgba(255,255,255,0) calc(100% / 12 * .45), rgba(95,82,73,.1) calc(100% / 12)), linear-gradient(100deg in oklab, #f8f2e1 0%, var(--creme) 62%, #d6c9aa 100%);
  box-shadow:0 0 130px -6px rgba(233,223,198,.32), 0 50px 70px -46px rgba(0,0,0,.9)}
/* a luz da janela cai no chão */
.op-c::after{content:"";position:absolute;z-index:-1;left:-3%;right:-3%;top:100%;height:clamp(6rem,16vh,10rem);pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(233,223,198,.16) 0 calc(100% / 12 * .72), transparent calc(100% / 12 * .72) calc(100% / 12));
  clip-path:polygon(3% 0, 97% 0, 100% 100%, 0 100%);-webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 100%);mask-image:linear-gradient(180deg, #000 0%, transparent 100%);filter:blur(3px)}
.op-c .op-h3{grid-column:1/-1;font-size:clamp(1.4rem,1.9vw,1.8rem);display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--fio-tinta)}
.op-c .op-h3 em{color:var(--verde-tinta)}
.op-grande{margin:0}
.op-grande p{margin:0;font-family:var(--serifa);font-weight:300;font-size:clamp(1.85rem,4.2vw,4.05rem);line-height:1.06;letter-spacing:-.022em;text-indent:-.42em}
.op-grande em{font-style:italic;color:var(--verde-tinta)}
.op-grande footer{margin-top:1.2rem;font-size:var(--t-mini);color:var(--tinta-suave)}
.op-c-f{margin:0}
.op-c-f + .op-c-f{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--fio-tinta)}
.op-c-f p{margin:0;font-family:var(--serifa);font-style:italic;font-size:clamp(1.1rem,1.35vw,1.26rem);line-height:1.4}
.op-c-f footer{margin-top:.4rem;font-size:var(--t-mini);color:var(--tinta-suave)}

/* (b) clareza */
.op-b{margin-top:clamp(5rem,17vh,9.5rem)}
.op-b-cab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1rem,5vw,5rem);align-items:end}
.op-b-cab p{margin:0;max-width:24em;padding-bottom:.3rem}
.op-b-frases{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,3.2fr) minmax(0,3.4fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start;margin-top:clamp(1.8rem,5vh,3rem)}
.op-b-frases .op-f:nth-child(2){margin-top:clamp(0rem,7vh,4.5rem)}
.op-b-frases .op-f:nth-child(3){margin-top:clamp(0rem,3vh,1.6rem)}

.op-fim{margin:clamp(3rem,9vh,5.5rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--fio-claro);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 2rem}
.op-fim .wf-link{font-size:1.05rem}

@media (min-width:861px){
  .op-persiana{display:block;margin-inline:0}
  .op-persiana i:nth-child(n+2){display:none}
  .op-persiana i:first-child{height:clamp(15.5rem,25vw,22.5rem);--op-t:335;--op-n:177;--op-c:.58}
  /* ondas do pano: a luz não bate igual em todas as lâminas */
  .op-persiana i:first-child::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(100% * 177 / 335);pointer-events:none;
    background:linear-gradient(180deg, rgba(19,11,6,0) 55%, rgba(19,11,6,.34) 100%), repeating-linear-gradient(90deg, rgba(19,11,6,0) 0, rgba(19,11,6,.3) 8.5%, rgba(19,11,6,0) 17%)}
  .op-persiana{filter:drop-shadow(0 0 34px rgba(233,223,198,.16))}
  .op-a-num{position:absolute;margin:0;left:calc(100% * 177 / 335 + clamp(1.6rem,3.6vw,3.6rem));right:0;bottom:clamp(1.2rem,2.4vw,2.2rem)}
  .op-a-num b{font-size:clamp(5.4rem,12.2vw,11.2rem)}
  .op-a-frases{grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start}
  .op-a-frases .op-f:nth-child(2){margin-top:2.2rem}
  .op-a-frases .op-f:nth-child(3){margin-top:4.4rem}
}
@media (max-width:860px){
  .op-cab,.op-c,.op-b-cab,.op-b-frases{grid-template-columns:1fr}
  .op-titulo{font-size:clamp(2.5rem,11.4vw,3.4rem)}
  .op-a-frases .op-f:nth-child(2){margin-left:7%}
  .op-a-frases .op-f:nth-child(3){margin-left:14%}
  .op-c{margin-inline:calc(var(--margem) * -1);border-radius:0;padding:2.2rem var(--margem) 2.4rem;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0, rgba(255,255,255,0) calc(100% / 5 * .45), rgba(95,82,73,.1) calc(100% / 5)), linear-gradient(100deg in oklab, #f8f2e1 0%, var(--creme) 62%, #d6c9aa 100%)}
  .op-c::after{left:0;right:0;clip-path:none;background:repeating-linear-gradient(90deg, rgba(233,223,198,.16) 0 calc(100% / 5 * .72), transparent calc(100% / 5 * .72) calc(100% / 5))}
  .op-grande p{font-size:clamp(1.9rem,8.6vw,2.7rem);text-indent:-.4em;padding-left:.4em}
  .op-b-frases .op-f:nth-child(n){margin-top:0}
  .op-b-frases .op-f:nth-child(2){margin-left:7%}
  .op-b-frases .op-f:nth-child(3){margin-left:14%}
  .op-f footer,.op-grande footer,.op-c-f footer{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .op-persiana i::before{clip-path:none;transition:none}
}