/* seção BANCA (prefixo bn-): os serviços por ocasião, cinco exemplares em leque.
   Nasce do hero C, recomposta no sistema do hero B (GFS Didot + Josefin Sans + a mão "Nicacio"). */

@property --bn-acento{syntax:'<color>';inherits:true;initial-value:#a0141e}

.bn-sec{
  /* cor chapada de cada edição (amostradas das fotos e do vermelho dela) */
  --bn-noivas:#a0141e;       /* o vermelho dela: batom e unhas */
  --bn-civil:#56602f;        /* oliva: folhagem da varanda */
  --bn-debutantes:#b0245f;   /* magenta: vestido de debutante */
  --bn-formatura:#7a4128;    /* bronze: a sombra do olho em macro */
  --bn-social:#9c4422;       /* terracota: as ripas de madeira da foto */
  --bn-acento:var(--bn-noivas);
  --bn-preto:#17090a;
  /* o exemplar: formato de revista (3:4) */
  --bn-l:clamp(250px,min(24vw,56vh),360px);
  --bn-a:calc(var(--bn-l)*4/3);
  transition:--bn-acento 1.6s ease;
}
.bn-sec[data-bn-ativa="noivas"]{--bn-acento:var(--bn-noivas)}
.bn-sec[data-bn-ativa="civil"]{--bn-acento:var(--bn-civil)}
.bn-sec[data-bn-ativa="debutantes"]{--bn-acento:var(--bn-debutantes)}
.bn-sec[data-bn-ativa="formatura"]{--bn-acento:var(--bn-formatura)}
.bn-sec[data-bn-ativa="social"]{--bn-acento:var(--bn-social)}

/* ---------- malha: papel tingido pela cor da capa da vez ---------- */
.bn-malha{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg in oklab,var(--papel),var(--papel-claro) 30%,var(--papel) 70%,var(--papel))}
.bn-malha i{position:absolute;border-radius:50%;will-change:transform}
.bn-malha i:nth-child(1){width:80vmax;height:80vmax;left:-20vmax;top:50%;margin-top:-34vmax;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,var(--bn-acento) 24%,var(--papel)),color-mix(in oklab,var(--bn-acento) 9%,var(--papel)) 45%,color-mix(in oklab,var(--papel) 0%,transparent));
  opacity:.8;animation:bn-deriva-a 29s ease-in-out infinite alternate}
.bn-malha i:nth-child(2){width:56vmax;height:56vmax;right:-18vmax;top:-14vmax;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,var(--areia) 70%,var(--papel)),color-mix(in oklab,var(--papel) 0%,transparent));
  opacity:.8;animation:bn-deriva-b 37s ease-in-out infinite alternate}
.bn-malha i:nth-child(3){width:54vmax;height:54vmax;right:0;bottom:-30vmax;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,var(--bn-acento) 13%,var(--pele)),color-mix(in oklab,var(--papel) 0%,transparent));
  opacity:.45;animation:bn-deriva-a 23s ease-in-out infinite alternate-reverse}
.bn-malha i:nth-child(4){width:46vmax;height:46vmax;left:30%;top:-26vmax;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,#fff 80%,transparent),color-mix(in oklab,var(--organza) 0%,transparent));
  opacity:.9;animation:bn-deriva-b 33s ease-in-out infinite alternate-reverse}
@keyframes bn-deriva-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,3vmax,0) scale(1.12)}}
@keyframes bn-deriva-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vmax,4vmax,0) scale(.94)}}

/* ---------- grade ---------- */
.bn-grade{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);column-gap:clamp(1.5rem,3.4vw,3.5rem);
  grid-template-areas:"abre abre" "banca vez" "etiquetas etiquetas" "dica dica"}
.bn-abre{grid-area:abre;display:grid;grid-template-columns:subgrid;align-items:end;row-gap:1rem}
.bn-olho{grid-column:1/-1;color:var(--tinta-media);margin:0}
.bn-olho i{font-style:normal;color:var(--vermelho);margin:0 .35em}
.bn-titulo{grid-column:1;text-wrap:balance;max-width:11.5em}
.bn-apoio{grid-column:2;margin:0 0 .5em;max-width:28em;color:var(--tinta-media);padding-top:.9rem;border-top:1px solid var(--fio)}

/* ---------- a banca ---------- */
.bn-banca{grid-area:banca;position:relative;z-index:1;height:calc(var(--bn-a)*1.27);margin-top:clamp(1.5rem,3vw,2.75rem);
  perspective:1700px;perspective-origin:50% 42%;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0}
.bn-leque{position:absolute;left:50%;top:10%;width:var(--bn-l);height:var(--bn-a);margin-left:calc(var(--bn-l)/-2);
  transform-style:preserve-3d;pointer-events:none;transform:rotateX(calc(3deg + var(--bn-ix,0deg))) rotateY(calc(-5deg + var(--bn-iy,0deg)))}
.bn-chao{position:absolute;left:50%;bottom:1%;width:calc(var(--bn-l)*2.5);height:46px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side in oklab,rgba(31,10,12,.3),rgba(31,10,12,0));transition:opacity 1s ease .3s}

/* ---------- um exemplar ---------- */
.bn-ex{--bn-cor:var(--bn-noivas);pointer-events:auto;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
  transform-origin:50% 100%;
  translate:var(--bn-x,0px) var(--bn-y,0px) var(--bn-z,0px);rotate:var(--bn-r,0deg);scale:var(--bn-s,1);
  transition:translate .85s var(--ease),rotate .85s var(--ease),scale .85s var(--ease)}
.bn-ex:focus-visible{outline:2px solid var(--tinta);outline-offset:6px}
.bn-ex--civil{--bn-cor:var(--bn-civil)}
.bn-ex--debutantes{--bn-cor:var(--bn-debutantes)}
.bn-ex--formatura{--bn-cor:var(--bn-formatura)}
.bn-ex--social{--bn-cor:var(--bn-social)}

.bn-arte{position:absolute;inset:0;display:block;overflow:hidden;container-type:size;background:var(--bn-cor);color:var(--marfim);
  /* miolo: as folhas aparecem na borda direita e no pé, como num exemplar pousado; depois, a sombra de contato */
  box-shadow:1px 1px 0 #f3ece2,2px 1px 0 #c9bdae,3px 2px 0 #f1e9de,4px 2px 0 #bfb3a3,5px 3px 0 #ece3d7,6px 3px 0 #b5a898,
    7px 5px 3px rgba(31,10,12,.32),0 14px 22px -8px rgba(31,10,12,.4),6px 36px 60px -20px rgba(31,10,12,.46)}
.bn-arte>*{position:absolute;display:block}
.bn-arte::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:var(--bn-preto);opacity:var(--bn-penumbra,0);transition:opacity .7s ease}
.bn-foto{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}

/* papel couchê: lombada grampeada à esquerda e brilho que acompanha o ponteiro */
.bn-papel{inset:0;z-index:8;pointer-events:none;mix-blend-mode:hard-light;opacity:.9;
  background:
    linear-gradient(90deg,rgba(20,6,8,.4) 0,rgba(255,255,255,.3) .9%,rgba(20,6,8,.18) 2%,rgba(255,255,255,.12) 3%,rgba(255,255,255,0) 5.5%),
    linear-gradient(112deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.2) 43%,rgba(255,255,255,.03) 52%,rgba(255,255,255,0) 66%);
  background-position:0 0,var(--bn-bx,0px) 0}

/* gramática de capa, comum às cinco: o mesmo conjunto do hero (letreiro GFS Didot, tarja preta à esquerda,
   a mão "Nicacio" e "Make up & hair" à direita), em miniatura */
.bn-linha{left:6cqw;right:6cqw;top:4.4cqw;z-index:3;display:flex;justify-content:space-between;gap:2cqw;white-space:nowrap;font-family:var(--versal);font-size:2cqw;line-height:1;letter-spacing:.24em;text-transform:uppercase;padding-bottom:1.6cqw;border-bottom:1px solid currentColor}
.bn-letreiro{left:0;right:0;top:8.6cqw;z-index:2;text-align:center;white-space:nowrap;
  font-family:var(--serifa);font-weight:400;font-size:22.4cqw;line-height:1;letter-spacing:-.012em;font-kerning:normal}
.bn-atras{inset:0;z-index:2;-webkit-mask:var(--bn-masc) top center/100% 50% no-repeat,linear-gradient(#000,#000) bottom/100% 50% no-repeat;mask:var(--bn-masc) top center/100% 50% no-repeat,linear-gradient(#000,#000) bottom/100% 50% no-repeat}
.bn-atras .bn-letreiro{position:absolute;display:block}
.bn-tarja{left:6cqw;top:31.4cqw;z-index:4;display:flex;align-items:baseline;gap:1.6cqw;background:var(--tinta);color:var(--papel);padding:1.3cqw 2cqw 1.1cqw;
  font-family:var(--versal);font-size:1.9cqw;line-height:1;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.bn-tarja b{font-family:var(--serifa);font-weight:400;font-size:2.6cqw;letter-spacing:.04em;padding-right:1.6cqw;border-right:1px solid currentColor}
.bn-ass{right:5cqw;top:27.2cqw;z-index:4;display:flex;flex-direction:column;align-items:flex-end}
.bn-mao{display:block;font-family:var(--manuscrita);font-size:11.5cqw;line-height:1;color:var(--vermelho);rotate:-6deg;white-space:nowrap;margin-right:-1cqw}
.bn-oficio{display:block;margin-top:-.6cqw;font-family:var(--versal);font-size:1.9cqw;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.bn-extra{right:6cqw;top:47cqw;z-index:4;text-align:left;font-family:var(--serifa);font-size:3.4cqw;line-height:1.12;max-width:32cqw;
  background:var(--papel-claro);color:var(--tinta);padding:2cqw 2.4cqw 1.8cqw;border-top:.9cqw solid var(--bn-cor);rotate:2deg;box-shadow:0 .8cqw 2cqw rgba(20,0,4,.22)}
.bn-lado{left:2.2cqw;bottom:40cqw;z-index:3;writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;font-family:var(--versal);font-size:1.7cqw;letter-spacing:.24em;text-transform:uppercase;opacity:.9}
.bn-bloco{left:0;right:0;bottom:0;z-index:3;padding:0 6cqw 6cqw;display:flex;flex-direction:column;align-items:flex-start}
.bn-bloco>*{display:block}
.bn-olhinho{font-family:var(--versal);font-size:2.1cqw;letter-spacing:.26em;text-transform:uppercase;margin-bottom:1.6cqw}
.bn-editoria{font-family:var(--serifa);font-weight:400;font-size:19cqw;line-height:.9;letter-spacing:-.025em;margin-left:-.05em}
.bn-chamada{font-family:var(--serifa);font-weight:400;font-size:4.5cqw;line-height:1.18;margin-top:3.6cqw;max-width:60cqw;text-wrap:balance}
.bn-fio{font-family:var(--versal);font-size:2.15cqw;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;margin-top:3cqw;padding-top:2.2cqw;border-top:1px solid currentColor;max-width:60cqw}
.bn-barras{right:6cqw;bottom:6cqw;z-index:4;width:21cqw;padding:1.6cqw 1.6cqw 1.1cqw;background:var(--papel-claro);color:var(--tinta-barras)}
.bn-barras i{display:block;height:8.4cqw;background:linear-gradient(90deg,currentColor 0 1.1%,transparent 1.1% 2.1%,currentColor 2.1% 3.2%,transparent 3.2% 4.2%,currentColor 4.2% 6.3%,transparent 6.3% 9.5%,currentColor 9.5% 10.5%,transparent 10.5% 12.6%,currentColor 12.6% 14.7%,transparent 14.7% 15.8%,currentColor 15.8% 17.9%,transparent 17.9% 18.9%,currentColor 18.9% 21.1%,transparent 21.1% 23.2%,currentColor 23.2% 25.3%,transparent 25.3% 28.4%,currentColor 28.4% 29.5%,transparent 29.5% 30.5%,currentColor 30.5% 32.6%,transparent 32.6% 35.8%,currentColor 35.8% 36.8%,transparent 36.8% 37.9%,currentColor 37.9% 40%,transparent 40% 42.1%,currentColor 42.1% 44.2%,transparent 44.2% 45.3%,currentColor 45.3% 47.4%,transparent 47.4% 48.4%,currentColor 48.4% 49.5%,transparent 49.5% 50.5%,currentColor 50.5% 51.6%,transparent 51.6% 52.6%,currentColor 52.6% 53.7%,transparent 53.7% 54.7%,currentColor 54.7% 55.8%,transparent 55.8% 60%,currentColor 60% 61.1%,transparent 61.1% 63.2%,currentColor 63.2% 64.2%,transparent 64.2% 67.4%,currentColor 67.4% 68.4%,transparent 68.4% 69.5%,currentColor 69.5% 70.5%,transparent 70.5% 74.7%,currentColor 74.7% 76.8%,transparent 76.8% 78.9%,currentColor 78.9% 81.1%,transparent 81.1% 82.1%,currentColor 82.1% 83.2%,transparent 83.2% 84.2%,currentColor 84.2% 85.3%,transparent 85.3% 89.5%,currentColor 89.5% 91.6%,transparent 91.6% 93.7%,currentColor 93.7% 95.8%,transparent 95.8% 96.8%,currentColor 96.8% 97.9%,transparent 97.9% 98.9%,currentColor 98.9% 100%)}
.bn-barras em{display:block;margin-top:.9cqw;font-family:var(--versal);font-style:normal;font-size:1.85cqw;line-height:1;letter-spacing:.1em;text-align:center;white-space:nowrap}

/* 01 Noivas: foto sangrada, letreiro vermelho passando atrás do coque, faixa chapada no pé */
.bn-ex--noivas .bn-arte{background:#e6dfd6}
.bn-ex--noivas .bn-atras{--bn-masc:url(../img/bn-capa-noivas-masc.png);color:var(--bn-cor)}
.bn-ex--noivas .bn-linha,.bn-ex--noivas .bn-lado{color:var(--tinta)}
.bn-ex--noivas .bn-oficio{color:var(--tinta)}
.bn-ex--noivas .bn-bloco{padding-top:3.5cqw;background:var(--bn-cor)}

/* 02 Casamento civil: foto sangrada, letreiro oliva atrás do coque, faixa oliva */
.bn-ex--civil .bn-arte{background:#dcd8d2}
.bn-ex--civil .bn-atras{--bn-masc:url(../img/bn-capa-civil-masc.png);color:var(--bn-cor)}
.bn-ex--civil .bn-linha,.bn-ex--civil .bn-lado,.bn-ex--civil .bn-oficio{color:var(--tinta)}
.bn-ex--civil .bn-editoria{font-size:15.5cqw;line-height:.88}
.bn-ex--civil .bn-bloco{padding-top:4.5cqw;background:var(--bn-cor)}

/* 03 Debutantes: cor chapada, a mão dela com o pincel por cima do letreiro */
.bn-ex--debutantes .bn-arte{background:radial-gradient(90% 60% at 60% 45% in oklch,color-mix(in oklch,var(--bn-cor) 84%,#ff9cc4),var(--bn-cor) 72%)}
.bn-ex--debutantes .bn-foto{inset:auto;left:-12cqw;top:17cqw;width:106cqw;height:auto;z-index:3;filter:drop-shadow(0 2.4cqw 3cqw rgba(60,0,30,.35))}
.bn-ex--debutantes .bn-mao{color:var(--marfim)}
.bn-ex--debutantes .bn-editoria{font-size:15.6cqw}

/* 04 Formatura: o olho em macro, letreiro bronze impresso sobre a pele, faixa bronze */
.bn-ex--formatura .bn-arte{background:#d9a78c}
.bn-ex--formatura .bn-foto{inset:auto;left:-14cqw;top:14cqw;width:auto;height:119.4cqw;aspect-ratio:1552/1360}
.bn-ex--formatura .bn-arte::before{content:"";position:absolute;left:0;right:0;top:0;height:22cqw;z-index:1;background:linear-gradient(180deg in oklab,#cfa38a,#c99a80 60%,rgba(201,154,128,0))}
.bn-ex--formatura .bn-letreiro{color:var(--bn-cor);mix-blend-mode:multiply;opacity:.96}
.bn-ex--formatura .bn-linha,.bn-ex--formatura .bn-lado{color:var(--bn-preto)}
.bn-ex--formatura .bn-oficio{color:var(--bn-preto)}
.bn-ex--formatura .bn-extra{display:none}
.bn-ex--debutantes .bn-extra{display:none}
.bn-ex--civil .bn-extra,.bn-ex--social .bn-extra{right:auto;left:6cqw;rotate:-2deg}
.bn-ex--formatura .bn-bloco{padding-top:3.5cqw;background:var(--bn-cor)}
.bn-ex--formatura .bn-editoria{font-size:16.4cqw}

/* 05 Social: as ripas de madeira, letreiro marfim, texto sobre o escuro da roupa */
.bn-ex--social .bn-arte{background:#7a3d1c}
.bn-ex--social .bn-mao{color:var(--marfim)}
.bn-ex--social .bn-bloco{padding-top:16cqw;background:linear-gradient(180deg in oklab,rgba(23,9,10,0),rgba(23,9,10,.72) 30%,rgba(23,9,10,.9))}
.bn-ex--social .bn-chamada{font-size:4.1cqw;max-width:62cqw}
.bn-ex--social .bn-tarja{background:var(--marfim);color:var(--tinta-barras)}

/* ---------- o leque ---------- */
.bn-ex[data-bn-slot="0"]{--bn-r:-1.5deg;--bn-z:24px;--bn-penumbra:0;cursor:grab;
  translate:calc(var(--bn-x,0px) + var(--bn-arrasto,0px)) var(--bn-y,0px) var(--bn-z,0px);rotate:calc(var(--bn-r) + var(--bn-arrasto-r,0deg))}
.bn-ex[data-bn-slot="1"]{--bn-x:36%;--bn-y:1%;--bn-z:-44px;--bn-r:6deg;--bn-s:.9;--bn-penumbra:.1}
.bn-ex[data-bn-slot="2"]{--bn-x:62%;--bn-y:3%;--bn-z:-88px;--bn-r:12deg;--bn-s:.8;--bn-penumbra:.22}
.bn-ex[data-bn-slot="4"]{--bn-x:-36%;--bn-y:1%;--bn-z:-44px;--bn-r:-8deg;--bn-s:.9;--bn-penumbra:.1}
.bn-ex[data-bn-slot="3"]{--bn-x:-62%;--bn-y:3%;--bn-z:-88px;--bn-r:-14deg;--bn-s:.8;--bn-penumbra:.22}
@media (hover:hover){
  .bn-ex:not([data-bn-slot="0"]):hover{--bn-penumbra:0;--bn-y:-2.5%}
}
.bn-arrastando .bn-ex[data-bn-slot="0"]{transition:none;cursor:grabbing}

/* troca física: a capa escolhida sai do maço, vem à frente e assenta; o couchê brilha uma vez */
.bn-ex.bn-sobe{animation:bn-sobe .85s var(--ease) both}
@keyframes bn-sobe{0%{transform:none}38%{transform:translate3d(0,-6%,70px) rotate(-2.5deg)}100%{transform:none}}
.bn-papel::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%);transform:translateX(-120%);opacity:0}
.bn-sobe .bn-papel::after{animation:bn-brilho 1.1s .35s ease-out both}
@keyframes bn-brilho{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}

/* a prateleira da banca: o fio e a etiqueta sob o maço */
.bn-prateleira{position:absolute;left:4%;right:4%;bottom:2.2rem;height:1px;background:var(--tinta);pointer-events:none}
.bn-prateleira>span{position:absolute;left:50%;top:0;transform:translateX(-50%);background:var(--tinta);color:var(--papel);padding:.45rem .9rem .35rem;white-space:nowrap;
  font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase;line-height:1.2}
.bn-prateleira i{font-style:normal;color:color-mix(in oklab,var(--bn-acento) 60%,var(--papel))}

/* entrada: o maço se abre quando a banca entra na tela */
.bn-fechada .bn-ex{--bn-x:0%;--bn-y:5%;--bn-r:0deg;--bn-s:.95}
.bn-fechada .bn-chao{opacity:0}
.bn-abrindo .bn-ex[data-bn-slot="1"],.bn-abrindo .bn-ex[data-bn-slot="4"]{transition-delay:.14s}
.bn-abrindo .bn-ex[data-bn-slot="2"],.bn-abrindo .bn-ex[data-bn-slot="3"]{transition-delay:.28s}

/* ---------- a edição da vez ---------- */
.bn-vez{grid-area:vez;align-self:center;min-width:0;padding-top:clamp(1.5rem,3vw,2.75rem)}
.bn-vez-olho{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding-bottom:.75rem;border-bottom:1px solid var(--tinta);
  font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase}
.bn-passo{display:flex;align-items:center;gap:.25rem;margin-right:-.6rem}
.bn-seta{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--tinta);cursor:pointer;border-radius:50%;transition:background-color .3s ease,color .3s ease}
.bn-seta svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.5}
.bn-seta:hover{background:color-mix(in oklab,var(--bn-acento) 10%,transparent);color:var(--bn-acento)}
.bn-vez-olho b{font-family:var(--serifa);font-weight:400;font-size:1.35em;letter-spacing:.06em;white-space:nowrap}
.bn-vez-olho small{font-size:.7em;color:var(--tinta-leve)}
.bn-vez-nome{margin:1.1rem 0 0;font-family:var(--serifa);font-weight:400;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.95;letter-spacing:-.02em;color:var(--bn-acento)}
.bn-vez-apoio{margin:.9rem 0 0;font-family:var(--versal);font-size:var(--t-mini);line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta)}
.bn-vez-fala{margin:1.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--fio)}
.bn-vez-fala p{font-size:var(--t-sub);line-height:1.18;text-wrap:balance}
.bn-vez-fala cite{display:block;margin-top:.8rem;color:var(--tinta-media)}
.bn-trocando{animation:bn-compor .6s var(--ease) both}
@keyframes bn-compor{from{clip-path:inset(0 0 100% 0);transform:translateY(-.5rem)}to{clip-path:inset(-10% -5% -10% -5%);transform:none}}
.bn-zap{margin-top:1.7rem;justify-content:center;box-shadow:.4rem .4rem 0 var(--bn-acento);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bn-zap:hover{transform:translate(-2px,-2px);box-shadow:.55rem .55rem 0 var(--bn-acento)}
.bn-nota{margin:1.3rem 0 0;font-size:var(--t-mini);line-height:1.5;color:var(--tinta-media)}
.bn-nota b{font-weight:400;color:var(--tinta);border-bottom:1px solid var(--bn-acento)}

/* ---------- etiquetas ---------- */
.bn-etiquetas{grid-area:etiquetas;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(1.25rem,2.6vw,2.5rem);border-top:1px solid var(--tinta)}
.bn-etiquetas li{display:flex;border-right:1px solid var(--fio)}
.bn-etiquetas li:last-child{border-right:0}
.bn-et{--bn-cor:var(--bn-noivas);position:relative;flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;row-gap:.3rem;align-items:baseline;align-content:start;
  min-height:48px;padding:1.1rem 1rem 1rem;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--tinta);-webkit-tap-highlight-color:transparent;transition:background-color .4s ease}
.bn-et--civil{--bn-cor:var(--bn-civil)}
.bn-et--debutantes{--bn-cor:var(--bn-debutantes)}
.bn-et--formatura{--bn-cor:var(--bn-formatura)}
.bn-et--social{--bn-cor:var(--bn-social)}
.bn-et::before{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:var(--bn-cor);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.bn-et[aria-pressed="true"]::before{transform:none}
.bn-et i{font-family:var(--serifa);font-style:normal;font-weight:400;font-size:var(--t-mini);letter-spacing:.08em;color:var(--bn-cor)}
.bn-et b{font-family:var(--serifa);font-weight:400;font-size:clamp(1.25rem,1.75vw,1.6rem);line-height:1.05;letter-spacing:-.005em}
.bn-et[aria-pressed="true"] b{color:var(--bn-cor)}
.bn-et span{grid-column:2;font-size:var(--t-mini);line-height:1.45;color:var(--tinta-media)}
.bn-et:hover{background:color-mix(in oklab,var(--bn-cor) 7%,transparent)}
.bn-et:focus-visible{outline-offset:-3px}
.bn-dica{grid-area:dica;margin:1.1rem 0 0;font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-media);text-align:right}
.bn-dica-toque{display:none}
.bn-toque .bn-dica-mouse{display:none}
.bn-toque .bn-dica-toque{display:inline}

/* ---------- 1100 a 900 ---------- */
@media (max-width:1100px){
  .bn-sec{--bn-l:clamp(220px,min(27vw,50vh),300px)}
  .bn-ex[data-bn-slot="1"]{--bn-x:34%}
  .bn-ex[data-bn-slot="4"]{--bn-x:-34%}
  .bn-ex[data-bn-slot="2"]{--bn-x:60%}
  .bn-ex[data-bn-slot="3"]{--bn-x:-60%}
}

/* ---------- em pé: tablet e celular ---------- */
@media (max-width:899px){
  .bn-sec{--bn-l:min(58vw,300px)}
  .bn-grade{display:flex;flex-direction:column}
  .bn-abre{display:block}
  .bn-titulo{margin-top:.9rem}
  .bn-apoio{margin-top:1.3rem;max-width:34em}
  .bn-banca{height:calc(var(--bn-a)*1.24);margin:1.5rem calc(var(--wf-gut)*-1) 0}
  .bn-leque{top:8%}
  .bn-chao{width:calc(var(--bn-l)*1.9);height:30px}
  .bn-ex[data-bn-slot="1"]{--bn-x:31%;--bn-r:5deg;--bn-s:.88}
  .bn-ex[data-bn-slot="4"]{--bn-x:-31%;--bn-r:-6deg;--bn-s:.88}
  .bn-ex[data-bn-slot="2"]{--bn-x:54%;--bn-r:10deg;--bn-s:.77}
  .bn-ex[data-bn-slot="3"]{--bn-x:-54%;--bn-r:-11deg;--bn-s:.77}
  .bn-etiquetas{order:2;margin-top:1.2rem}
  .bn-dica{order:1;text-align:center;margin-top:.4rem}
  .bn-vez{order:3;padding-top:2.5rem}
  .bn-zap{display:flex;width:100%}
}
@media (max-width:899px) and (min-width:700px){
  .bn-et{grid-template-columns:1fr;padding:1rem .7rem}
  .bn-et span{grid-column:1}
}
@media (max-width:699px){
  .bn-sec{--bn-l:min(66vw,300px)}
  /* seletor de ocasiões em linha rolável, logo abaixo da banca */
  .bn-etiquetas{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--wf-gut)*-1);padding-inline:var(--wf-gut);scroll-padding-inline:var(--wf-gut);border-top:0}
  .bn-etiquetas::-webkit-scrollbar{display:none}
  .bn-etiquetas li{flex:none;scroll-snap-align:start;border:1px solid var(--fio);border-right:0}
  .bn-etiquetas li:last-child{border-right:1px solid var(--fio)}
  .bn-et{grid-template-columns:auto auto;padding:0 1.05rem;min-height:52px;align-content:center;white-space:nowrap}
  .bn-et span{display:none}
  .bn-et b{font-size:1.2rem}
  .bn-et::before{top:auto;bottom:-1px}
  .bn-et[aria-pressed="true"]{background:color-mix(in oklab,var(--bn-cor) 9%,var(--papel-claro))}
  .bn-vez{padding-top:2rem}
  .bn-pr-a{display:none}
  .bn-prateleira>span{letter-spacing:.16em;padding-inline:.7rem}
  .bn-vez-olho{letter-spacing:.16em}
  .bn-vez-fala p{font-size:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .bn-malha i{animation:none!important}
}

/* tarja menor para valorizar as fotos (pedido do usuário, 20/10/2026); códigos de barras retirados */
.bn-bloco{padding:0 5cqw 4.5cqw}
.bn-ex--noivas .bn-bloco,.bn-ex--civil .bn-bloco,.bn-ex--formatura .bn-bloco{padding-top:2.6cqw}
.bn-ex--social .bn-bloco{padding-top:10cqw}
.bn-olhinho{font-size:1.8cqw;margin-bottom:1cqw}
.bn-editoria,.bn-ex--civil .bn-editoria,.bn-ex--debutantes .bn-editoria,.bn-ex--formatura .bn-editoria{font-size:11cqw;line-height:.95}
.bn-chamada,.bn-ex--social .bn-chamada{font-size:3.4cqw;margin-top:1.8cqw;max-width:84cqw}
.bn-fio{font-size:1.8cqw;margin-top:1.8cqw;padding-top:1.4cqw;max-width:84cqw}