/* =========================================================
   X2D — ajustes da 3D Club sobre os estilos de referência
   (x2d-ref.css). Aqui ficam: o que dependia de estilo inline
   ou de bibliotecas (Swiper/MUI) na página original, os
   estados controlados por JS e os blocos comerciais.
   ========================================================= */
:root { --media-fade-duration: 400ms; }
body.x2d { background: #121212; }
.x2d-page { padding-top: var(--navBarHeight); overflow-x: clip; }
.x2d-page img, .x2d-page video { max-width: none; }
.x2d-page button { font: inherit; }

/* Obtenha os destaques — posições da grade (no original vinham inline) */
@media (min-width: 1025px) {
  .css-6wnn7e > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .css-6wnn7e > :nth-child(2) { grid-area: 3 / 2 / 4 / 4; }
  .css-6wnn7e > :nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
  .css-6wnn7e > :nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
  .css-6wnn7e > :nth-child(5) { grid-area: 2 / 3 / 3 / 5; }
  .css-6wnn7e > :nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
  .css-6wnn7e > :nth-child(7) { grid-area: 3 / 4 / 4 / 5; }
}

/* palavras dos títulos: passam pelo roxo ao acender (cinza → roxo → cor final) */
.x2d .title .word.visible.x-flash { color: var(--x2d-color); }
.x2d .theme-dark .title .word.visible.x-flash { color: var(--x2d-color-dark); }

/* vídeos: aparecem sobre a imagem quando começam a tocar */
.video-layer { transition: opacity var(--media-fade-duration) ease-out; }

/* Comparação: 3 colunas em todas as larguras (rolagem lateral no celular) */
.css-lcsd1i { --col-count: 3; }
.productOffer { margin-top: 2px; font-size: 12px; line-height: 17px; font-weight: 500; color: #505050; text-align: center; max-width: 100%; }
@media (max-width: 1024px) { .productOffer { font-size: 11px; line-height: 15px; } }

/* ---------- Carrosséis (substitui o Swiper) ---------- */
.x2d .swiper { position: relative; overflow: hidden; touch-action: pan-y; }
.x2d .swiper-wrapper { display: flex; transition: transform .4s ease; will-change: transform; }
.x2d .swiper-wrapper.is-dragging { transition: none; cursor: grabbing; }
.x2d .swiper-slide { flex-shrink: 0; margin-right: var(--Content-Gap-7); user-select: none; }
.x2d .swiper-slide:last-child { margin-right: 0; }
.x2d .css-ra914l .swiper-slide { margin-right: var(--Gutter-Gap-1); }
.x2d .swiper-slide img { -webkit-user-drag: none; }
.x2d .swiper-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: var(--Content-Gap-6); }
.x2d .swiper-pagination-bullet {
  position: relative; width: 16px; height: 16px; padding: 4px; margin: 0 !important; background: transparent; border-radius: 50%;
  cursor: pointer; opacity: 1; transition: width .1s;
}
.x2d .swiper-pagination-bullet::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 4px; background: #505050; opacity: .4; }
.x2d .swiper-pagination-bullet-active { width: 56px; }
.x2d .swiper-pagination-bullet-active::after { background: #000; opacity: 1; }
.x2d .theme-dark .swiper-pagination-bullet::after, .x2d .css-e0nkmf .swiper-pagination-bullet::after { background: #c2c2c2; }
.x2d .theme-dark .swiper-pagination-bullet-active::after, .x2d .css-e0nkmf .swiper-pagination-bullet-active::after { background: #f5f5f5; }

/* ---------- Abas da Câmera de IA ---------- */
.x2d .s1-pic { transition: opacity .4s; }
.x2d .MuiTabs-list { display: flex; position: relative; }
.x2d .MuiTabs-scroller { position: relative; overflow-x: auto; scrollbar-width: none; }
.x2d .MuiTabs-scroller::-webkit-scrollbar { display: none; }
.x2d .MuiTabs-indicator { position: absolute; bottom: 0; height: 2px; background: var(--x2d-color-dark); transition: left .3s, width .3s; }
.x2d .MuiTab-root { background: none; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; }

/* ---------- ações ---------- */
.x2d [data-support-open] { cursor: pointer; }
.x2d a.buyBtn, .x2d a.buyNowBtn, .x2d a.linkItem { text-decoration: none; }

/* ---------- Modal: compatibilidade de suporte ---------- */
.smodal {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity 225ms, visibility 0s linear 225ms;
}
.smodal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.smodal__box {
  position: relative; width: min(996px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; color: #1a1a1a; padding: 60px 24px 32px;
  box-shadow: 0 11px 15px -7px rgba(145,158,171,.2), 0 24px 38px 3px rgba(145,158,171,.14), 0 9px 46px 8px rgba(145,158,171,.12);
}
@media (min-width: 1025px) { .smodal__box { padding: 60px; } }
.smodal__close { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; color: #1a1a1a; }
.smodal__close svg { width: 100%; height: 100%; }
.smodal__title { font-size: var(--Title-1-Size); line-height: var(--Title-1-Line-Height); font-weight: 700; text-align: center; margin: 0 0 48px; }
.smodal__table { display: grid; grid-template-columns: 1fr; gap: 32px 0; }
@media (min-width: 768px) { .smodal__table { grid-template-columns: 1fr 1fr; } }
.smodal__th, .smodal__td { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 16px; font-size: 16px; line-height: 21px; }
.smodal__th { min-height: 72px; background: #d9d9d9; font-weight: 700; }
.smodal__td { min-height: 47px; background: #fafafa; font-weight: 500; white-space: pre-line; }

/* botões do hero: altura de linha do tema original (MUI) */
.x2d .buttonContent .button, .x2d .buttonContent .button span { font-size: 14px; line-height: 20px; }
@media (min-width: 1025px) { .x2d .buttonContent .button, .x2d .buttonContent .button span { font-size: 16px; line-height: 22px; } }
/* cada slide com sua própria altura (Swiper usa align-items: flex-start via autoHeight) */
.x2d .swiper-wrapper { align-items: flex-start; }

/* Bambu Studio: a 2ª camada (preenchimento roxo) começa sem tamanho — no original vinha inline */
.x2d .featureTitle { background-repeat: no-repeat; background-size: 100% 100%, 0% 100%; }