/* =========================================================================
   EXPERIÊNCIAS DIGITAIS — estilos só desta página.
   Usa os tokens do design system (verticci.css). Anima só transform e opacity.
   ========================================================================= */

.xd { overflow-x: clip; }
.xd-cabeca { max-width: 46rem; margin-block-end: clamp(var(--v-espaco-10), 5vw, var(--v-espaco-16)); }

/* ---------- Hero ---------- */
.xd-hero { padding-block-start: var(--v-espaco-32); }
.xd-hero__grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.xd-hero__titulo {
  margin: 0; font-family: var(--v-fonte-display); font-weight: var(--v-peso-semibold);
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.8rem); line-height: var(--v-lh-display); letter-spacing: var(--v-ls-display); color: var(--v-texto);
}
.xd-linha { display: block; overflow: hidden; padding-block-end: .06em; }
.xd-linha > span { display: inline-block; }
.xd-acento { color: var(--v-acento-texto); }

/* janela que se monta */
.xd-janela {
  border: var(--v-traco-fino, 1px) solid var(--v-borda); border-radius: var(--v-raio-lg);
  background: var(--v-superficie); box-shadow: var(--v-sombra-xl); overflow: hidden;
}
.xd-janela__barra { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--v-borda-sutil); }
.xd-janela__barra i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--v-borda-forte); }
.xd-janela__barra span { margin-inline-start: .8rem; font: 400 var(--v-fs-micro)/1 var(--v-fonte-mono); color: var(--v-texto-sutil); }
.xd-janela__tela { position: relative; aspect-ratio: 4 / 3.3; padding: 7%; }
.xd-camada { position: absolute; }
.xd-camada--grade { inset: 0; background-image: linear-gradient(to right, var(--v-borda-sutil) 1px, transparent 1px); background-size: calc(100% / 12) 100%; opacity: .5; }
.xd-camada--nav { inset: 6% 7% auto; display: flex; align-items: center; gap: 4%; }
.xd-camada--nav b { width: 18%; height: .55rem; border-radius: 99px; background: var(--v-texto); }
.xd-camada--nav span { width: 9%; height: .35rem; border-radius: 99px; background: var(--v-texto-sutil); }
.xd-camada--nav span:first-of-type { margin-inline-start: auto; }
.xd-camada--nav em { width: 14%; height: .9rem; border-radius: 99px; background: var(--v-acento); }
.xd-camada--titulo { inset: 22% 46% auto 7%; display: grid; gap: .55rem; }
.xd-camada--titulo b { height: 1.1rem; border-radius: 4px; background: var(--v-texto); }
.xd-camada--titulo b.curta { width: 62%; background: var(--v-acento); }
.xd-camada--texto { inset: 52% 50% auto 7%; display: grid; gap: .4rem; }
.xd-camada--texto span { height: .35rem; border-radius: 99px; background: var(--v-texto-sutil); }
.xd-camada--texto span:last-child { width: 70%; }
.xd-camada--cta { inset: 66% 50% auto 7%; display: flex; gap: .6rem; }
.xd-camada--cta em { width: 46%; height: 1.5rem; border-radius: 99px; background: var(--v-acento); }
.xd-camada--cta span { width: 30%; height: 1.5rem; border-radius: 99px; border: 1px solid var(--v-borda-forte); }
.xd-camada--imagem {
  inset: 20% 7% 22% 56%; border-radius: var(--v-raio-md); overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--v-acento) 70%, transparent), color-mix(in srgb, var(--v-acento) 10%, transparent));
}
.xd-orbita { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--v-texto) 40%, transparent); }
.xd-orbita::after { content: ""; position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--v-texto); top: -7%; left: 43%; transform-origin: 50% 400%; animation: xd-gira 9s linear infinite; }
.xd-camada--lead {
  inset: auto 7% 6% auto; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem;
  border-radius: var(--v-raio-md); background: var(--v-superficie-alta); box-shadow: var(--v-sombra-md);
  font: 500 var(--v-fs-micro)/1 var(--v-fonte-texto); color: var(--v-texto);
}
.xd-camada--lead i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--v-cor-estado-sucesso-escuro); }
@keyframes xd-gira { to { transform: rotate(360deg); } }

/* ---------- Faixa ---------- */
.xd-faixa { border-block: 1px solid var(--v-borda); overflow: hidden; padding-block: var(--v-espaco-5); }
.xd-faixa__trilho { display: flex; width: max-content; animation: xd-faixa 46s linear infinite; }
.xd-faixa:hover .xd-faixa__trilho { animation-play-state: paused; }
.xd-faixa ul { display: flex; margin: 0; padding: 0; list-style: none; }
.xd-faixa li { display: flex; align-items: center; gap: var(--v-espaco-8); padding-inline: var(--v-espaco-8) 0; white-space: nowrap;
  font: var(--v-peso-medium) var(--v-fs-h3)/1 var(--v-fonte-display); letter-spacing: var(--v-ls-titulo); color: var(--v-texto-suave); }
.xd-faixa li::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--v-acento); }
@keyframes xd-faixa { to { transform: translateX(-50%); } }

/* ---------- Ofertas ---------- */
.xd-ofertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v-espaco-4); }
.xd-oferta {
  position: relative; display: flex; flex-direction: column; gap: var(--v-espaco-3);
  padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--v-borda); border-radius: var(--v-raio-lg);
  background: var(--v-superficie); overflow: hidden; isolation: isolate;
  transition: border-color var(--v-dur-media) var(--v-curva-padrao), transform var(--v-dur-media) var(--v-curva-padrao);
}
.xd-oferta > * { margin: 0; }
.xd-oferta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--v-dur-media);
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--v-acento) 16%, transparent), transparent 60%);
}
.xd-oferta:hover { border-color: color-mix(in srgb, var(--v-acento) 50%, var(--v-borda)); transform: translateY(-3px); }
.xd-oferta:hover::before { opacity: 1; }
.xd-oferta--cta { background: var(--v-acento); border-color: var(--v-acento); color: var(--v-acento-contraste); text-decoration: none; justify-content: space-between; }
.xd-oferta--cta .v-sobrelinha, .xd-oferta--cta span { color: inherit; opacity: .85; }
a.xd-oferta--cta:hover { color: var(--v-acento-contraste); background: var(--v-acento-hover); }

/* ---------- Como construímos (montagem fixa) ---------- */
.xd-como__grade { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.xd-como__palco { position: sticky; top: 18vh; }
.xd-montagem {
  position: relative; aspect-ratio: 1; border-radius: var(--v-raio-xl); border: 1px solid var(--v-borda);
  background: var(--v-superficie); overflow: hidden;
}
.xd-m { position: absolute; inset: 10%; opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity var(--v-dur-lenta) var(--v-curva-saida), transform var(--v-dur-lenta) var(--v-curva-saida); }
.xd-m--grade { inset: 0; background-image: linear-gradient(to right, var(--v-borda-sutil) 1px, transparent 1px), linear-gradient(to bottom, var(--v-borda-sutil) 1px, transparent 1px); background-size: 8.33% 8.33%; }
.xd-m--blocos { display: grid; grid-template-rows: .5fr 2fr 1fr; gap: 6%; }
.xd-m--blocos span { border: 1px dashed var(--v-borda-forte); border-radius: var(--v-raio-sm); }
.xd-m--tipo { inset: 24% 14% auto; display: grid; gap: .7rem; }
.xd-m--tipo b { height: 1.6rem; border-radius: 4px; background: var(--v-texto); }
.xd-m--tipo b + b { width: 70%; }
.xd-m--tipo i { height: .4rem; border-radius: 99px; background: var(--v-texto-sutil); }
.xd-m--tipo i:last-child { width: 60%; }
.xd-m--cor { inset: auto 10% 10% 10%; height: 28%; border-radius: var(--v-raio-md);
  background: linear-gradient(120deg, var(--v-acento), color-mix(in srgb, var(--v-acento) 25%, transparent)); }
.xd-m--teste { inset: auto 10% 44% auto; display: flex; gap: .4rem; align-items: center; }
.xd-m--teste span { font: 500 var(--v-fs-micro)/1 var(--v-fonte-mono); padding: .35rem .5rem; border-radius: 99px; border: 1px solid var(--v-borda-forte); color: var(--v-texto-suave); background: var(--v-superficie); }
.xd-m--teste em { font: 600 var(--v-fs-micro)/1 var(--v-fonte-mono); font-style: normal; padding: .35rem .55rem; border-radius: 99px; background: var(--v-cor-estado-sucesso-escuro); color: var(--v-cor-grafite-950); }
.xd-montagem__rotulo { position: absolute; left: 6%; bottom: 5%; margin: 0; font: 500 var(--v-fs-legenda)/1 var(--v-fonte-mono); color: var(--v-texto-sutil); letter-spacing: var(--v-ls-amplo); text-transform: uppercase; }
.xd-montagem[data-etapa="0"] .xd-m--grade,
.xd-montagem[data-etapa="1"] .xd-m:is(.xd-m--grade, .xd-m--blocos),
.xd-montagem[data-etapa="2"] .xd-m:is(.xd-m--grade, .xd-m--blocos, .xd-m--tipo),
.xd-montagem[data-etapa="3"] .xd-m:is(.xd-m--grade, .xd-m--tipo, .xd-m--cor),
.xd-montagem[data-etapa="4"] .xd-m:not(.xd-m--blocos) { opacity: 1; transform: none; }
.xd-montagem[data-etapa="3"] .xd-m--grade, .xd-montagem[data-etapa="4"] .xd-m--grade { opacity: .35; }

.xd-passos { list-style: none; margin: 0; padding: 0; }
.xd-passos li { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--v-espaco-4); padding-block: clamp(2rem, 6vh, 3.5rem); border-top: 1px solid var(--v-borda); opacity: .38; transition: opacity var(--v-dur-media); }
.xd-passos li.ativo { opacity: 1; }
.xd-passos li > .v-numero { grid-row: span 2; color: var(--v-acento-texto); }
.xd-passos h3, .xd-passos p { margin: 0; }
.xd-passos h3 { margin-block-end: var(--v-espaco-3); }

/* ---------- Estudos ---------- */
.xd-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v-espaco-6); }
.xd-case { display: flex; flex-direction: column; gap: var(--v-espaco-3); }
.xd-case > * { margin: 0; }
.xd-case__arte { position: relative; aspect-ratio: 4 / 3; border-radius: var(--v-raio-lg); overflow: hidden; margin-block-end: var(--v-espaco-3); border: 1px solid var(--v-borda); }
/* lente */
.xd-arte--lente { background: radial-gradient(circle at 50% 50%, #1a1d24, #08090a 70%); display: grid; place-items: center; }
.xd-lente { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #e8e4d8 0 18%, #2a2d33 19%); box-shadow: 0 0 0 6px #2a2d33, 0 0 0 7px #5c616a; overflow: hidden; }
.xd-lente i { position: absolute; inset: -10%; background: #111315; border-right: 1px solid #3d424a; transform-origin: 50% 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%); transform: rotate(calc(var(--k) * 60deg)) translateX(var(--abre, 0%)); transition: transform 1.4s var(--v-curva-saida); }
.xd-lente i:nth-child(1){--k:0}.xd-lente i:nth-child(2){--k:1}.xd-lente i:nth-child(3){--k:2}.xd-lente i:nth-child(4){--k:3}.xd-lente i:nth-child(5){--k:4}.xd-lente i:nth-child(6){--k:5}
.xd-case:hover .xd-lente i, .xd-case.em-vista .xd-lente i { --abre: 26%; }
/* trama */
.xd-arte--trama { background: #f1efe8; }
.xd-trama { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, #e3dfd3 0 6px, #f7f5ef 6px 12px),
  repeating-linear-gradient(0deg, rgba(13,47,94,.08) 0 6px, transparent 6px 12px); background-blend-mode: multiply;
  transition: transform 2s var(--v-curva-suave); }
.xd-case:hover .xd-trama { transform: scale(1.08); }
.xd-ficha { position: absolute; left: 8%; bottom: 10%; font: 600 .75rem/1 var(--v-fonte-mono); letter-spacing: .1em; color: #0d2f5e; background: #fff; border-left: 4px solid #1f8a4c; padding: .7rem .9rem; }
/* linha dourada */
.xd-arte--linha { background: #f3ece2; }
.xd-arte--linha svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xd-arte--linha path { fill: none; stroke: #b48a4c; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--v-curva-saida); }
.xd-case.em-vista .xd-arte--linha path, .xd-case:hover .xd-arte--linha path { stroke-dashoffset: 0; }
.xd-arco { position: absolute; right: 12%; top: 16%; width: 30%; aspect-ratio: 3/4; border-radius: 999px 999px 10px 10px; background: linear-gradient(#e2d6c5, #cdbca4); }

/* ---------- Tecnologia ---------- */
.xd-tec { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.xd-tec__lista { margin: 0; border-top: 1px solid var(--v-borda); }
.xd-tec__lista div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--v-espaco-4); padding-block: var(--v-espaco-4); border-bottom: 1px solid var(--v-borda); }
.xd-tec__lista dt { font: 500 var(--v-fs-legenda)/1.6 var(--v-fonte-mono); text-transform: uppercase; letter-spacing: var(--v-ls-amplo); color: var(--v-acento-texto); }
.xd-tec__lista dd { margin: 0; color: var(--v-texto-suave); }

/* ---------- Entradas (só com JS) ---------- */
.js-xd .xd-in, .js-xd .xd-rv { opacity: 0; transform: translateY(18px); transition: opacity var(--v-dur-lenta) var(--v-curva-saida), transform var(--v-dur-lenta) var(--v-curva-saida); transition-delay: calc(var(--d, 0) * 80ms); }
.js-xd .xd-rv.em-vista, .js-xd.xd-pronto .xd-in { opacity: 1; transform: none; }
.js-xd .xd-linha > span { transform: translateY(108%); transition: transform 1s var(--v-curva-saida); }
.js-xd .xd-linha:nth-child(2) > span { transition-delay: 90ms; }
.js-xd .xd-linha:nth-child(3) > span { transition-delay: 180ms; }
.js-xd.xd-pronto .xd-linha > span { transform: none; }
.js-xd .xd-camada { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--v-curva-saida), transform .7s var(--v-curva-saida); transition-delay: calc(var(--c, 0) * 220ms + 300ms); }
.js-xd.xd-pronto .xd-camada { opacity: 1; transform: none; }
.js-xd .xd-camada--grade { --c: 0; } .js-xd .xd-camada--nav { --c: 1; } .js-xd .xd-camada--titulo { --c: 2; }
.js-xd .xd-camada--texto { --c: 3; } .js-xd .xd-camada--cta { --c: 4; } .js-xd .xd-camada--imagem { --c: 5; } .js-xd .xd-camada--lead { --c: 7; }
.js-xd.xd-pronto .xd-camada--grade { opacity: .5; }

/* ---------- Responsivo ---------- */
@media (max-width: 64rem) {
  .xd-ofertas, .xd-cases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 52rem) {
  .xd-hero__grade, .xd-como__grade, .xd-tec { grid-template-columns: 1fr; }
  .xd-como__palco { position: sticky; top: 4.5rem; z-index: 1; width: min(15rem, 70vw); margin-inline: auto; }
  .xd-como__palco .xd-montagem { box-shadow: var(--v-sombra-lg); }
  .xd-passos li { padding-block: var(--v-espaco-10); }
}
@media (max-width: 40rem) {
  .xd-ofertas, .xd-cases { grid-template-columns: 1fr; }
  .xd-tec__lista div { grid-template-columns: 1fr; gap: var(--v-espaco-1); }
  .xd-hero { padding-block-start: var(--v-espaco-24, 6rem); }
}

/* ---------- Movimento reduzido: tudo visível e montado ---------- */
@media (prefers-reduced-motion: reduce) {
  .xd *, .xd *::before, .xd *::after { animation: none !important; transition: none !important; }
  .js-xd .xd-in, .js-xd .xd-rv, .js-xd .xd-camada, .js-xd .xd-linha > span { opacity: 1 !important; transform: none !important; }
  .xd-m { opacity: 1; transform: none; }
  .xd-m--blocos { opacity: 0; }
  .xd-passos li { opacity: 1; }
  .xd-arte--linha path { stroke-dashoffset: 0; }
}