/* =========================================
   FORMAÇÃO NINE 2026 — V3
   Artes oficiais do Canva + interatividade
   Carrega DEPOIS de formacao-v2.css
========================================= */

/* ---- HERO: arte oficial + parallax + poeira dourada ---- */
.fhero.has-bg{background-image:none!important}
.fhero-art{position:absolute;inset:-6% 0 -6% 0;z-index:0;background-image:url('assets/hero-banner-escola.jpg');background-size:cover;background-position:center bottom;will-change:transform}
.fhero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,28,35,.72) 0%,rgba(11,28,35,.5) 42%,rgba(11,28,35,.88) 100%),radial-gradient(ellipse 60% 52% at 50% 46%,rgba(11,28,35,.42),transparent 74%)}
#dust{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}
.fhero.has-bg .fhero-inner{background:none;padding:44px 28px}
.fhero.has-video .fhero-art,.fhero.has-video .fhero-scrim{display:none}

/* ---- Figura com moldura de bronze (artes já emolduradas) ---- */
.art-plate{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 20px 54px rgba(11,28,35,.4),0 0 0 1px rgba(201,165,90,.45)}
.art-plate img{width:100%;display:block}
.art-plate.wide{max-width:940px;margin:0 auto}
.art-cap{text-align:center;margin-top:14px;font-family:var(--font-ui);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.sec-dark .art-cap{color:rgba(240,230,208,.62)}

/* ---- Cards dos elementos: tilt 3D ---- */
.elements-grid{perspective:1100px}
.elem-card{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .35s ease;will-change:transform}
.elem-card .elem-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,240,200,.34),transparent 58%)}
.elem-card:hover .elem-sheen{opacity:1}
@media (hover:none){.elem-card{transform:none!important}}

/* ---- Medalhões das 9 virtudes (flip) ---- */
.virtues{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:720px;margin:44px auto 0;perspective:1000px}
.virtue{position:relative;aspect-ratio:1/1;cursor:pointer;background:none;border:none;padding:0;font:inherit;color:inherit}
.virtue-in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.1,.2,1)}
.virtue[aria-pressed="true"] .virtue-in{transform:rotateY(180deg)}
.virtue-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;transition:opacity 0s linear .35s}
.virtue-front{opacity:1}
.virtue-back{opacity:0}
.virtue[aria-pressed="true"] .virtue-front{opacity:0}
.virtue[aria-pressed="true"] .virtue-back{opacity:1}
.virtue-front{opacity:1;background:none;box-shadow:none;padding:0;overflow:visible}
.virtue-front::after{content:none}
.virtue-front img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(11,28,35,.3));transition:transform .35s ease,filter .35s ease}
.virtue:hover .virtue-front img{transform:translateY(-4px) scale(1.03);filter:drop-shadow(0 14px 26px rgba(11,28,35,.4))}
.virtue-back{transform:rotateY(180deg);opacity:0;background:radial-gradient(circle at 50% 30%,#26505f,#14313d 70%);border:1px solid rgba(201,165,90,.55);box-shadow:0 10px 26px rgba(11,28,35,.4);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);border-radius:0}
.virtue-back .vname{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:15px;color:var(--gold-bright);margin-bottom:5px}
.virtue-back p{font-size:12.5px;line-height:1.45;color:rgba(240,230,208,.9);margin:0}
.virtue:focus-visible{outline:2px solid var(--gold-bright);outline-offset:6px}
.virtue-hint{text-align:center;margin-top:22px;font-family:var(--font-ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,230,208,.5)}

/* ---- Dados que rolam ---- */
.dice-in{opacity:0;transform:translateY(18px) rotate(-24deg);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.9,.25,1)}
.dice-in.rolled{opacity:1;transform:none}

/* ---- Faixa Eterrea: respiro da legenda ---- */
.img-band .band-caption.band-left{padding-right:36%}
.img-band .band-caption.band-left h2{line-height:1.06;font-size:clamp(24px,3.6vw,42px)}
.img-band .band-caption.band-left p{margin-top:12px;font-size:clamp(14px,1.5vw,16px)}
@media (max-width:900px){.img-band .band-caption.band-left{padding-right:26%}}

/* ---- Texturas: ladrilhos contínuos (sem vinheta/emenda) ---- */
body{background-color:#e7d8c6;background-image:url('assets/stone-bege.jpg');background-size:720px auto;background-repeat:repeat}
.site{background:transparent}

/* Seções claras — dois tons distintos sobre a mesma textura */
.sec-cream,.sec-parchment{background-color:#e7d8c6!important;background-repeat:repeat!important;background-position:center top!important}
.sec-cream{background-image:linear-gradient(180deg,rgba(255,250,238,.30),rgba(255,250,238,.30)),url('assets/stone-bege.jpg')!important;background-size:auto,720px auto!important}
.sec-parchment{background-image:linear-gradient(180deg,rgba(255,253,247,.62),rgba(255,253,247,.62)),url('assets/stone-bege.jpg')!important;background-size:auto,720px auto!important}
.sec-cream.grain::before,.sec-parchment.grain::before{opacity:.3}

/* Seções escuras */
.sec-dark,.footer{background-image:linear-gradient(180deg,rgba(11,28,35,.45),rgba(11,28,35,.45)),url('assets/stone-teal.jpg')!important;background-size:auto,720px auto!important;background-repeat:repeat,repeat!important;background-position:center top,center top!important;background-color:#3e5661!important}
.img-band{background-image:linear-gradient(180deg,rgba(11,28,35,.45),rgba(11,28,35,.45)),url('assets/stone-teal.jpg');background-size:auto,720px auto;background-position:center top}

/* Divisão garantida em toda fronteira clara↔clara */
.sec-cream+.sec-parchment,.sec-parchment+.sec-cream,.sec-cream+.sec-cream,.sec-parchment+.sec-parchment{border-top:1px solid rgba(140,110,53,.3)!important}

/* ---- Contraste: superfícies claras ---- */
.sec-cream .num-item .n,.sec-parchment .num-item .n{color:var(--gold-deep)}
.sec-cream .eyebrow,.sec-parchment .eyebrow{color:#7a5a12}
.elem-card .elem-tag{color:var(--elem-t,#7a5a12)}
.elem-fogo{--elem-t:#b03f26}
.elem-agua{--elem-t:#26697f}
.elem-terra{--elem-t:#456e37}
.elem-ar{--elem-t:#7a5a12}

/* ---- Contraste nas seções que passaram a escuras ---- */
.sec-dark .fit-col{border-color:rgba(201,165,90,.45);background:rgba(240,230,208,.06)}
.sec-dark .fit-col.no{border-color:rgba(240,230,208,.18);background:rgba(11,28,35,.28)}
.sec-dark .fit-col h4{color:var(--gold-bright)}
.sec-dark .fit-col.no h4{color:rgba(240,230,208,.72)}
.sec-dark .fit-list li{color:rgba(240,230,208,.9)}
.sec-dark .fit-list li strong{color:var(--gold-bright)}
.sec-dark .fit-col.yes .fit-list li::before{color:var(--gold-bright)}
.sec-dark .fit-col.no .fit-list li::before{color:rgba(240,230,208,.5)}

.sec-dark .faq{border-top-color:rgba(201,165,90,.3)}
.sec-dark .faq-item{border-bottom-color:rgba(201,165,90,.3)}
.sec-dark .faq-q{color:var(--cream)}
.sec-dark .faq-q:hover{color:var(--gold-bright)}
.sec-dark .faq-q::after{border-color:var(--gold-bright)}
.sec-dark .faq-a-inner{color:rgba(240,230,208,.88)}
.sec-dark .faq-a-inner strong{color:var(--gold-bright)}

.sec-dark .flourish svg{color:var(--gold-bright)}
.sec-dark .microcopy{color:rgba(240,230,208,.74)}
.offer-figcaption{color:rgba(240,230,208,.74)!important}
.footer-bottom{color:rgba(240,230,208,.72)!important}
.sec-dark .kit-grid li{color:rgba(240,230,208,.9)}
.sec-dark .kit-grid li strong{color:var(--gold-bright)}
.sec-dark .elem-meta{background:linear-gradient(180deg,#fff,#f6efe0)}

/* ---- Oferta: papel marfim sobre o petróleo ---- */
.torn-wrap .offer-box.torn{background-image:linear-gradient(180deg,rgba(252,247,234,.80),rgba(252,247,234,.80)),url('assets/stone-bege.jpg')!important;background-size:auto,600px auto!important;background-repeat:repeat,repeat!important;background-color:#e7d8c6!important}

/* ---- Oferta: destaque real na frase-chave ---- */
/* o papel rasgado é claro: qualquer texto dentro dele usa a tinta escura,
   senão herda o creme da laje e some sobre o próprio papel */
.offer-box.torn p,.offer-box.torn li{color:var(--ink)}
.offer-box.torn .offer-kicker{
  margin-top:30px;padding:22px 26px;border-top:none;
  background:linear-gradient(180deg,rgba(255,252,244,.96),rgba(247,238,214,.96));
  border:1px solid rgba(140,110,53,.45);
  box-shadow:0 0 0 4px rgba(201,165,90,.14),0 10px 26px rgba(20,49,61,.14);
  border-radius:3px;
  font-family:var(--font-display);
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.42;
  font-weight:600;
  color:var(--teal-deep);
  text-align:center;
  position:relative;
}
.offer-box.torn .offer-kicker::before{
  content:'✦';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#fffcf4,#f7eed6);padding:0 12px;
  color:var(--gold-deep);font-size:14px;line-height:22px;
}
.offer-box.torn .offer-kicker strong{font-weight:700;color:#7a5a12}
@media (max-width:720px){.offer-box.torn .offer-kicker{padding:20px 18px;font-size:17.5px}}

/* ---- Conjunto das 9 insígnias ---- */
.insignias-cluster{max-width:620px;margin:40px auto 0}
.insignias-cluster img{width:100%;display:block;filter:drop-shadow(0 14px 30px rgba(11,28,35,.22))}
@media (max-width:720px){.insignias-cluster{max-width:100%;margin-top:30px}}

/* ---- Responsivo ---- */
@media (max-width:720px){
  .virtues{grid-template-columns:repeat(2,1fr);gap:16px;max-width:400px}
  .virtue-front .vname{font-size:12.5px}
  .virtue-back p{font-size:11.5px}
  .fhero-art{inset:0}
}
@media (max-width:400px){.virtues{grid-template-columns:1fr;max-width:210px}}
@media (prefers-reduced-motion:reduce){
  .fhero-art{transform:none!important}
  #dust{display:none}
  .virtue-in{transition:none}
  .virtue-face{transition:none}
  .dice-in{opacity:1;transform:none}
}