/* =========================================
   FORMAÇÃO NINE 2026 — V6
   Hero banner + bloco de abertura
   Carrega DEPOIS de formacao-v5.css
========================================= */

/* ---- Hero: banner original, sem sobreposição ---- */
.hero-banner-v6{display:block;position:relative;line-height:0;background:#1c2f36}
.hero-banner-v6 img{width:100%;display:block}

/* ---- Lajes escuras no mesmo tom do bloco de abertura ---- */
.sec-dark,.footer,.sec-abertura{
  background-color:#22333d!important;
  background-image:linear-gradient(180deg,rgba(8,18,28,.58) 0%,rgba(8,18,28,.64) 45%,rgba(5,13,21,.72) 100%),url('assets/stone-teal.jpg')!important;
}
.img-band{background-color:#22333d}

/* ---- Árvore das nove virtudes (arte enviada, fundo transparente) ---- */
.arvore-virtudes{max-width:820px;margin:-18px auto -10px}
.arvore-virtudes img{width:100%;display:block}

/* ---- Espaçamento entre blocos: menos folga vertical ---- */
.sec-pad{padding-top:clamp(46px,5.5vw,70px)!important;padding-bottom:clamp(46px,5.5vw,70px)!important}
.h-sec{margin-bottom:20px!important}
.h-sec::after{margin-top:12px!important}
#oque .product-shot{max-width:560px;margin:16px auto 18px!important}
.flourish{margin-bottom:14px!important}

/* ---- Vídeos: ao abrir o player, a moldura vira 16:9 e ocupa a largura ---- */
.video-ph.playing{max-width:none!important;width:100%;aspect-ratio:16/9!important;border-radius:14px}
.video-ph.arch.playing{border-radius:14px;box-shadow:0 0 0 1px rgba(201,165,92,.4),0 26px 64px rgba(20,49,61,.4)}
.video-ph.arch.playing::after{content:none}
.video-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}

/* ---- Vídeo da História de Eterrea ----
   #eterrea continua a MESMA laje de pedra de #oque (não é um bloco novo):
   sem corte entre os dois e sem o vão de 78px do padding duplicado. */
#oque{padding-bottom:0!important}
#eterrea{padding-top:clamp(26px,3.4vw,44px)!important}
#eterrea .eyebrow{margin-top:0}
.eterrea-video{max-width:820px;margin:0 auto}
.eterrea-video .poster{background-size:cover;background-position:center}
.eterrea-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}

/* ---- Mesa em 3D (visor interativo do kit) ----
   menus dentro do visor, um em cada lateral; o contêiner é o PAI do grid. */
.mesa3d-shell{container-type:inline-size;margin-top:34px}
.mesa3d{display:block}
.mesa3d-viewport{position:relative}
.mesa3d-stage{position:relative;min-width:0}
.mesa3d-frame{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid rgba(140,110,53,.5);background:radial-gradient(ellipse at 50% 44%,#16333B 0%,#0C242C 62%,#071A20 100%);box-shadow:inset 0 0 0 6px rgba(15,37,37,.5),inset 0 0 0 7px rgba(201,165,92,.22),inset 0 0 90px rgba(0,0,0,.5),0 26px 64px rgba(20,49,61,.4)}
.mesa3d-frame nine-mesa{position:absolute;inset:0;width:100%;height:100%;display:block}
.mesa3d-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(8,22,26,0) 40%,rgba(8,22,26,.26) 78%,rgba(6,18,22,.6) 100%)}
.mesa3d-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:5;display:flex;align-items:center;gap:8px;max-width:min(58%,340px);padding:8px 14px;border-radius:14px;border:1px solid rgba(201,165,92,.28);background:rgba(8,22,26,.6);backdrop-filter:blur(6px);pointer-events:none;text-align:center;font-family:var(--font-ui);font-size:11.5px;letter-spacing:.03em;line-height:1.35;color:#E8DCC8}
.mesa3d-hint[hidden]{display:none}

.mesa3d-menu{position:static;z-index:6;display:flex;flex-direction:column;gap:5px;padding:12px 10px;border-radius:14px;border:1px solid rgba(201,165,92,.3);background:rgba(8,22,26,.62);backdrop-filter:blur(7px);box-shadow:0 14px 34px rgba(0,0,0,.34)}
/* posicionamento sobre a cena e o recolher-ao-focar valem só no desktop:
   no mobile os menus fluem abaixo do visor e não podem herdar transform */
@container (min-width:721px){
  .mesa3d-menu{position:absolute;top:50%;transform:translateY(-50%);width:min(30%,188px)}
  .mesa3d-menu[data-side="left"]{left:14px}
  .mesa3d-menu[data-side="right"]{right:14px}
  .mesa3d-viewport.focado .mesa3d-menu{opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
  .mesa3d-viewport.focado .mesa3d-menu[data-side="left"]{transform:translateY(-50%) translateX(-14px)}
  .mesa3d-viewport.focado .mesa3d-menu[data-side="right"]{transform:translateY(-50%) translateX(14px)}
  .mesa3d-viewport.focado:hover .mesa3d-menu,.mesa3d-viewport.focado .mesa3d-menu:focus-within{opacity:1;pointer-events:auto}
  .mesa3d-viewport.focado:hover .mesa3d-menu[data-side="left"],.mesa3d-viewport.focado .mesa3d-menu[data-side="left"]:focus-within,
  .mesa3d-viewport.focado:hover .mesa3d-menu[data-side="right"],.mesa3d-viewport.focado .mesa3d-menu[data-side="right"]:focus-within{transform:translateY(-50%)}
}
.mesa3d-menu button{position:relative;width:100%;padding:8px 11px;border:1px solid transparent;border-radius:8px;background:rgba(240,230,208,.05);font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.25;letter-spacing:.02em;text-align:left;color:#E8DCC8;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.mesa3d-menu button:hover{background:rgba(201,165,92,.16);border-color:rgba(201,165,92,.4);color:#F5E7C4}
.mesa3d-menu button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(232,197,120,.24),rgba(168,135,63,.18));border-color:rgba(232,197,120,.6);color:#F7E9C6}
.mesa3d-menu button:focus-visible{outline:2px solid #E8C578;outline-offset:2px}
.mesa3d-menu .mesa3d-todos{margin-top:5px;font-family:var(--font-ui);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#CFC5AA;background:transparent;border-color:rgba(201,165,92,.28)}

.mesa3d-card{margin:16px auto 0;width:min(560px,100%);padding:20px 22px 18px;border-radius:15px;border:1px solid rgba(201,165,92,.38);background:rgba(9,26,31,.9);box-shadow:0 18px 52px rgba(0,0,0,.34)}
.mesa3d-card[hidden]{display:none}
.mesa3d-card-kicker{font-family:var(--font-ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:#CFC5AA;opacity:.72}
.mesa3d-card h3{margin:7px 0 0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;color:#E8C578}
.mesa3d-card p{margin:10px 0 0;font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:#F3E7C9;opacity:.93}
.mesa3d-verso{margin-top:14px;padding:9px 15px;border-radius:7px;border:1px solid rgba(201,165,92,.45);background:rgba(201,165,92,.1);color:#E8C578;font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.06em;cursor:pointer;transition:background .18s ease}
.mesa3d-verso:hover{background:rgba(201,165,92,.2)}
.mesa3d-verso[hidden]{display:none}
.mesa3d-voltar{display:block;margin-top:15px;padding:0;border:0;background:transparent;color:#CFC5AA;font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .18s ease}
.mesa3d-voltar:hover{color:#E8C578}

@container (max-width:720px){
  .mesa3d-menu{width:auto;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:10px;padding:0;border:0;background:none;backdrop-filter:none;box-shadow:none}
  .mesa3d-menu button{width:auto;flex:1 1 132px;font-size:12.5px;padding:12px 12px;min-height:44px;background:rgba(20,49,61,.07);border-color:rgba(140,110,53,.32);color:#4a3f2c}
  .mesa3d-menu button:hover{color:#2a2418}
  .mesa3d-menu button[aria-pressed="true"]{color:#2a2418;background:linear-gradient(180deg,rgba(232,197,120,.5),rgba(201,165,92,.38))}
  .mesa3d-menu .mesa3d-todos{color:#5d4a24}
  .mesa3d-hint{max-width:calc(100% - 28px);font-size:11px;padding:7px 11px}
}

/* ---- Bloco "A plataforma": selo Modo Voz + tablet ---- */
.split:has(.plataforma-art){grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)!important;gap:clamp(16px,3vw,40px);align-items:start}
.split:has(.plataforma-art) .prose{padding-top:clamp(10px,3vw,46px)}
.plataforma-art{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(10px,2vw,22px);margin-top:clamp(-90px,-7vw,-30px)}
.plataforma-art .voz-badge{width:clamp(104px,15vw,178px);height:auto;display:block;margin-right:clamp(6px,5vw,64px);filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.plataforma-art .tablet-shot{width:min(100%,560px);height:auto;display:block;margin-right:clamp(-26px,-2vw,0px);filter:drop-shadow(0 20px 44px rgba(0,0,0,.55))}
@media (max-width:720px){
  .split:has(.plataforma-art){grid-template-columns:1fr!important}
  .split:has(.plataforma-art) .prose{padding-top:0}
  .plataforma-art{align-items:center;gap:10px;margin-top:12px}
  .plataforma-art .voz-badge{margin-right:0;width:112px}
  .plataforma-art .tablet-shot{margin-right:0;width:100%}
}

/* ---- Ícones dourados dos cards ---- */
.hcard-icon-img{width:86px!important;height:86px!important;object-fit:contain}

/* ---- Bloco de abertura: teal com moldura e fita ---- */
.sec-abertura{
  position:relative;
  overflow:hidden;
  padding:0 0 74px;
  background-color:#2c3c41;
  background-image:linear-gradient(180deg,rgba(10,22,24,.52),rgba(10,22,24,.52)),url('assets/stone-teal.jpg');
  background-size:auto,560px auto;
  background-repeat:repeat,repeat;
  background-position:center top,center top;
  color:#f4ecdc;
  box-shadow:inset 14px 0 22px -12px rgba(255,255,255,.08),inset -20px 0 26px -10px rgba(8,20,20,.75);
}
.abertura-orn{
  position:absolute;top:0;left:0;right:0;
  aspect-ratio:1600/240;
  background:url('assets/bloco2-ornamento.webp') top center/100% 100% no-repeat;
  pointer-events:none;
  z-index:1;
}
.abertura-inner{position:relative;z-index:2;padding-top:clamp(96px,15vw,190px)}

.abertura-eyebrow{
  text-align:center;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#e9d7a8;
  max-width:640px;
  margin:0 auto 26px;
  line-height:1.6;
}
.abertura-h1{
  text-align:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.22;
  color:#f7f0e2;
  margin:0 0 34px;
  letter-spacing:.005em;
  text-wrap:pretty;
}
.abertura-h1 em{font-style:italic;color:#e3b95f;font-weight:500}

.abertura-prose{max-width:600px;margin:0 auto;text-align:center}
.abertura-prose p{
  font-family:var(--font-display);
  font-size:clamp(16px,1.85vw,19.5px);
  line-height:1.72;
  color:rgba(244,236,220,.9);
  margin:0 0 20px;
}
.abertura-prose p:last-child{margin-bottom:0}
.abertura-prose strong{color:#e3b95f;font-weight:500}

@media (max-width:720px){
  .sec-abertura{padding-bottom:52px}
  .abertura-inner{padding-top:clamp(70px,22vw,120px)}
  .abertura-h1{font-size:26px;line-height:1.26}
  .abertura-h1 br{display:none}
  .abertura-prose p{font-size:15.5px}
}