/* Safe Studio — homepage "Interactive Showroom": Winter Digital Stage, Featured Scene, Script Explorer,
   Built Different (claro), Feature Theater, seções de contraste, cupom, The Studio e rodapé. */

/* ---------- Ritmo de seções: escuro / claro / prata / profundo ---------- */
.light, .silver { position: relative; z-index: 2; color: var(--paper-ink); border-radius: var(--r-4); margin-inline: clamp(8px, 1.4vw, 20px); }
.light { background: var(--paper); }
.silver { background: linear-gradient(180deg, var(--ice-white) 0%, var(--silver) 100%); }
.section.light + .section, .section + .section.light, .section.silver + .section, .section + .section.silver, .section + .section.studio { border-top: 0; }
.light .muted, .silver .muted { color: var(--paper-muted); }
.light :focus-visible, .silver :focus-visible { outline-color: var(--paper-ink); }
.light .btn--ghost, .silver .btn--ghost { --btn-fg: var(--paper-ink); --btn-bd: rgba(11,12,14,.25); }
.light .btn--ghost:hover, .silver .btn--ghost:hover { --btn-bd: var(--paper-ink); }

/* ---------- Hero: Winter Digital Stage ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero.is-ready .hero__bg { opacity: 1; }
.hero__bg::before { content: ""; position: absolute; inset: -1px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 5%, transparent 75%); opacity: .5; }
.hero__bg::after { content: ""; position: absolute; left: 50%; top: 42%; width: 1200px; height: 760px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(241,236,229,.08), rgba(241,236,229,.02) 60%, transparent); }

.stage { padding: var(--s-7) 0 var(--s-9); }
.stage__center { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
.hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 16px; border-radius: var(--r-1); font-size: var(--fs-12); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bone); background: rgba(25,27,30,.7); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stage__title { font-size: var(--fs-mega); line-height: .9; letter-spacing: -.025em; font-weight: 700; text-transform: uppercase; font-variation-settings: "opsz" 96, "wdth" 84; color: var(--pure-white); max-width: none; }
.stage__title .split-line { white-space: nowrap; }
.stage__title .split-line + .split-line > span { color: transparent; background: linear-gradient(180deg, var(--ice-white) 0%, #8E9399 100%); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 560px) { .stage__title .split-line { white-space: normal; } }
.stage__lede { font-size: var(--fs-20); color: var(--ash); max-width: 48ch; line-height: 1.55; }
.stage__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: var(--fs-14); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-2); }

/* Card de informação (Discord, suporte) */
.hcard { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; min-width: 230px; padding: 10px 18px 10px 10px; border-radius: var(--r-2); text-align: left; background: rgba(25,27,30,.78); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out); }
.hcard:hover { box-shadow: inset 0 0 0 1px var(--bone); transform: translateY(-2px); }
.hcard__icon { width: 44px; height: 44px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--graphite-3); color: var(--bone); }
.hcard__icon svg { width: 22px; height: 22px; }
.hcard__body { display: grid; gap: 1px; min-width: 0; }
.hcard small { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
.hcard strong { font-weight: 600; font-size: var(--fs-14); }
.hcard__meta { font-size: var(--fs-12); color: var(--ash); }
.hcard__meta b { color: var(--pure-white); font-weight: 600; }
.hcard--inline { min-height: 56px; }

/* Personagens laterais (opcionais, configuráveis) */
.hero__char { position: absolute; z-index: -1; top: 0; margin: 0; width: min(28vw, 480px); height: min(92vh, 900px); pointer-events: none; --px: 0; --py: 0; }
.hero__char img { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: grayscale(1) contrast(1.05); transform: translate3d(calc(var(--px) * var(--depth, 10px)), calc(var(--py) * 6px), 0); transition: transform .5s var(--ease-out), opacity 1.2s var(--ease-out); }
.hero__char::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, transparent 35%); }
.hero__char--left { left: max(-60px, calc(50% - 940px)); --depth: -12px; }
.hero__char--right { right: max(-60px, calc(50% - 940px)); --depth: 12px; }
.js .hero:not(.is-ready) .hero__char img { opacity: 0; transform: translate3d(0, 30px, 0); }
@media (max-width: 1199px) { .hero__char { opacity: .35; } }
@media (max-width: 699px) { .hero__char { display: none; } }

/* Entrada: CTAs nunca bloqueados */
.js .stage .hero__pills, .js .stage .stage__lede, .js .stage .scene { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out) .25s, transform 1s var(--ease-out) .25s; }
.js .stage .scene { transition-delay: .45s; }
.js .hero.is-ready .hero__pills, .js .hero.is-ready .stage__lede, .js .hero.is-ready .scene { opacity: 1; transform: none; }

/* ---------- Hero Featured Scene ---------- */
.scene { position: relative; width: min(100%, 1080px); margin-top: var(--s-7); display: grid; gap: var(--s-4); text-align: left; }
@media (min-width: 1000px) { .scene { grid-template-columns: minmax(0, 1fr) 320px; align-items: end; } }
.scene__device { position: relative; border-radius: var(--r-3); background: var(--graphite); box-shadow: var(--glow-cold), var(--shadow-lift); padding: 34px 8px 8px; }
.scene__chrome { position: absolute; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--ash-2); font-size: 11px; font-family: var(--font-mono); }
.scene__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--graphite-3); }
.scene__chrome span { margin-left: auto; letter-spacing: .04em; }
.scene__screens { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r-3) - 8px); overflow: hidden; background: var(--deep); }
.scene__screen { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease-inout), transform 7s linear; }
.scene__screen.is-active { opacity: 1; transform: scale(1); }
.scene__screen img { width: 100%; height: 100%; object-fit: cover; }
.scene__institutional { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--bone); background: radial-gradient(circle at 50% 40%, var(--charcoal), var(--deep) 70%); }
.scene.has-products .scene__institutional { display: none; }
.scene__institutional svg { width: 56px; height: 56px; }
.scene__institutional strong { font-family: var(--font-title); font-size: var(--fs-31); letter-spacing: -.02em; }
.scene__institutional span { color: var(--ash); font-size: var(--fs-14); }

.scene__caption { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-3); background: rgba(25,27,30,.88); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.scene__caption:empty { display: none; }
@media (min-width: 1000px) { .scene__caption { margin-left: -64px; margin-bottom: 28px; position: relative; z-index: 2; } }
.scene__caption.is-swap > :not(.scene__nav) { animation: ss-swap .6s var(--ease-out) both; }
.scene__caption.is-swap > :nth-child(2) { animation-delay: .05s; }
.scene__caption.is-swap > :nth-child(3) { animation-delay: .1s; }
@keyframes ss-swap { from { opacity: 0; transform: translateY(8px); } }
.scene__meta { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--ash); letter-spacing: .04em; }
.scene__count { font-family: var(--font-mono); }
.scene__name { font-family: var(--font-title); font-size: var(--fs-31); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.scene__text { font-size: var(--fs-14); color: var(--ash); min-height: 2.8em; }
.scene__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene__price { font-size: var(--fs-20); }
.scene__nav { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.scene__dots { flex: 1; display: flex; gap: 4px; }
.scene__dot { flex: 1; height: 24px; display: grid; align-items: center; }
.scene__dot i { display: block; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; position: relative; }
.scene__dot i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.scene__dot[aria-selected="true"] i::after { transform: scaleX(1); }
.scene__dot.is-run i::after { transform: scaleX(0); animation: ss-progress var(--scene-dur, 6s) linear forwards; }
.scene.is-paused .scene__dot.is-run i::after { animation-play-state: paused; }
@keyframes ss-progress { to { transform: scaleX(1); } }

/* ---------- Script Explorer ---------- */
.explorer { display: grid; gap: var(--gutter); }
@media (min-width: 1000px) { .explorer { grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); align-items: start; } }
.explorer__list { display: grid; border-top: 1px solid var(--line); }
.explorer__item { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ash); transition: color var(--dur-1), background-color var(--dur-2); }
.explorer__item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-2) var(--ease-out); }
.explorer__item:hover { color: var(--bone); background: rgba(241,236,229,.03); }
.explorer__item[aria-selected="true"] { color: var(--pure-white); background: rgba(241,236,229,.05); }
.explorer__item[aria-selected="true"]::before { transform: scaleY(1); }
.explorer__idx { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ash-2); }
.explorer__iname { display: grid; font-weight: 600; font-size: var(--fs-16); line-height: 1.25; }
.explorer__iname small { font-weight: 400; font-size: var(--fs-12); color: var(--ash-2); }
.explorer__iprice { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.explorer__stage { position: relative; display: grid; }
.explorer__panel { grid-area: 1 / 1; display: grid; border-radius: var(--r-3); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--line); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.explorer__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 1; }
.explorer__media { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r-3) - 6px); overflow: hidden; background: var(--graphite-2); }
.explorer__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.4s var(--ease-out); }
.explorer__panel.is-active .explorer__media img { transform: none; }
.explorer__info { display: grid; gap: 12px; padding: 22px 18px 16px; }
.explorer__cat { font-size: var(--fs-12); color: var(--ash); display: flex; gap: 10px; }
.explorer__name { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); line-height: .95; text-transform: uppercase; letter-spacing: -.025em; font-weight: 700; font-variation-settings: "wdth" 88; }
.explorer__text { color: #C3C7CB; max-width: 60ch; }
.explorer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.explorer__price { font-size: var(--fs-25); display: inline-flex; align-items: center; gap: 8px; }
.explorer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.explorer__actions .btn { border-radius: var(--r-2); }
/* Mobile: trilho horizontal por toque; lista some, todos os painéis ficam visíveis em sequência */
@media (max-width: 999px) {
  .explorer__list { display: none; }
  .explorer__stage { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--page-pad) * -1); padding: 0 var(--page-pad) 8px; scrollbar-width: none; }
  .explorer__panel { flex: none; width: 86vw; max-width: 460px; opacity: 1; visibility: visible; transform: none; scroll-snap-align: center; }
  .explorer__media img { transform: none; }
}

/* ---------- Built Different (claro) ---------- */
.built__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1000px) { .built__grid { grid-template-columns: 5fr 7fr; } }
.built__title { font-size: var(--fs-mega); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; font-weight: 700; font-variation-settings: "wdth" 84; }
.built__text { margin-top: var(--s-5); font-size: var(--fs-20); color: var(--paper-muted); max-width: 42ch; line-height: 1.5; }
.built__points { display: grid; margin-top: var(--s-6); border-top: 1px solid var(--paper-line); }
.built__point { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--paper-line); }
.built__point dt { font-weight: 700; text-transform: uppercase; font-size: var(--fs-14); letter-spacing: .04em; }
.built__point dd { margin: 0; color: var(--paper-muted); font-size: var(--fs-14); }
.built__media { margin: 0; position: relative; border-radius: var(--r-3); overflow: hidden; background: var(--paper-2); box-shadow: 0 50px 80px -40px rgba(11,12,14,.45); transform: rotate(-1.2deg); }
.built__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.built__media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: var(--r-1); background: rgba(245,246,244,.92); color: var(--paper-ink); font-size: var(--fs-12); }

/* ---------- Feature Theater ---------- */
.theater__head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4); margin-bottom: var(--s-5); }
.theater__kicker { font-size: var(--fs-12); color: var(--ash); }
.theater__product { font-size: var(--fs-31); text-transform: uppercase; letter-spacing: -.02em; font-variation-settings: "wdth" 88; }
.theater { display: grid; gap: var(--gutter); }
@media (min-width: 1000px) { .theater { grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); align-items: stretch; } }
.theater__screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; background: var(--deep); box-shadow: var(--glow-cold); }
.theater__media { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .8s var(--ease-inout), transform 1.2s var(--ease-out); }
.theater__media.is-active { opacity: 1; transform: none; z-index: 1; }
.theater__media img, .theater__media video { width: 100%; height: 100%; object-fit: cover; }
.theater__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ash-2); font-size: var(--fs-14); }
.theater__progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(241,236,229,.12); }
.theater__progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.theater__progress.is-run span { animation: ss-progress var(--theater-dur, 7s) linear forwards; }
.is-paused .theater__progress span { animation-play-state: paused; }
.theater__nav { display: grid; align-content: start; border-top: 1px solid var(--line); }
.theater__item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 8px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ash); transition: color var(--dur-1), background-color var(--dur-2); }
.theater__item:hover { color: var(--bone); }
.theater__item[aria-selected="true"] { color: var(--pure-white); background: rgba(241,236,229,.04); }
.theater__num { font-family: var(--font-mono); font-size: var(--fs-12); padding-top: 4px; color: var(--ash-2); }
.theater__item[aria-selected="true"] .theater__num { color: var(--pure-white); }
.theater__txt strong { display: block; font-size: var(--fs-16); font-weight: 600; }
.theater__desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2); font-size: var(--fs-14); color: var(--ash); }
.theater__desc > * { overflow: hidden; min-height: 0; }
.theater__item[aria-selected="true"] .theater__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
@media (max-width: 999px) { .theater__nav { grid-auto-flow: column; grid-auto-columns: minmax(220px, 70vw); overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; gap: 8px; scrollbar-width: none; } .theater__item { scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r-2); } }

/* YouTube sob demanda */
.yt { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); transition: transform var(--dur-2) var(--ease-out); }
.yt:hover .yt__play { transform: scale(1.08); }
.yt__play svg { width: 26px; height: 26px; }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Todos os scripts ---------- */
.showcase__more { display: flex; justify-content: center; margin-top: var(--s-7); }

/* ---------- Cupom (claro) ---------- */
.coupon { position: relative; z-index: 1; display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-3); background: var(--snow-white); color: var(--paper-ink); box-shadow: 0 30px 60px -30px rgba(11,12,14,.35), inset 0 0 0 1px var(--paper-line); overflow: hidden; }
@media (min-width: 900px) { .coupon { grid-template-columns: 1.2fr auto; align-items: center; padding: var(--s-7); } }
.coupon::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 14px; background: radial-gradient(circle at 100% 50%, var(--silver) 6px, transparent 6.5px) 0 0 / 14px 20px repeat-y; }
.coupon__kicker { font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); }
.coupon__title { font-size: var(--fs-display-s); line-height: 1; max-width: 16ch; text-transform: uppercase; letter-spacing: -.03em; margin-top: 8px; }
.coupon__terms { color: var(--paper-muted); font-size: var(--fs-14); display: grid; gap: 4px; margin-top: var(--s-3); }
.coupon__side { display: grid; gap: 10px; justify-items: start; }
.coupon__code { display: flex; align-items: stretch; border-radius: var(--r-2); background: var(--paper-ink); overflow: hidden; }
.coupon__code code { display: grid; place-items: center; padding: 0 24px; font-family: var(--font-mono); font-size: var(--fs-25); letter-spacing: .1em; color: var(--snow-white); border-right: 1px dashed rgba(241,236,229,.3); }
.coupon__code .btn { border-radius: 0; min-height: 64px; }
.coupon .btn--quiet { color: var(--paper-muted); }
.coupon .btn--quiet:hover { color: var(--paper-ink); }

/* ---------- The Studio (preto profundo) ---------- */
.studio { background: var(--deep); }
.studio__grid { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .studio__grid { grid-template-columns: 6fr 5fr; align-items: start; } }
.studio__kicker { font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.studio__title { font-size: var(--fs-display-s); line-height: 1; letter-spacing: -.04em; max-width: 16ch; }
.studio__copy { display: grid; gap: var(--s-5); align-content: start; }
.studio__copy > p { font-size: var(--fs-20); line-height: 1.5; color: var(--ash); max-width: 44ch; }
.studio__process { display: grid; border-top: 1px solid var(--line); }
.studio__step { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.studio__step b { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-14); color: var(--silver); padding-top: 3px; }
.studio__step h3 { font-size: var(--fs-20); }
.studio__step p { color: var(--ash); margin-top: 4px; }
.studio__media { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: var(--s-8); }
.studio__shot { margin: 0; border-radius: var(--r-3); overflow: hidden; background: var(--graphite); box-shadow: var(--shadow-lift); }
.studio__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.studio__shot:nth-child(1) { grid-column: 1 / span 7; }
.studio__shot:nth-child(2) { grid-column: 6 / span 7; margin-top: 18%; }
.studio__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.studio__fact h4 { font-size: var(--fs-16); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.studio__fact p { font-size: var(--fs-14); color: var(--ash); margin-top: 4px; }

/* ---------- Rodapé ---------- */
.footer { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--line); padding: var(--s-9) 0 0; margin-top: var(--s-9); background: linear-gradient(180deg, var(--ink), var(--deep)); }
.footer--winter { padding-top: 150px; }
.page-home .footer { margin-top: 0; border-top: 0; }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer__brand { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
.footer__brand p { color: var(--ash); max-width: 36ch; font-size: var(--fs-14); }
.footer h4 { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ash-2); margin-bottom: var(--s-4); }
.footer ul { display: grid; gap: 10px; font-size: var(--fs-14); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding: var(--s-5) 0 var(--s-7); border-top: 1px solid var(--line); color: var(--ash-2); font-size: var(--fs-12); }

/* =====================================================================
   Home enxuta — "Frontier": hero dividido, scripts com abas, por que, chamada final
   ===================================================================== */
.frontier { padding: var(--s-7) 0 var(--s-9); }
.frontier .hero__bg::before { mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 5%, transparent 75%); opacity: .35; }
.frontier .hero__bg::after { left: 72%; top: 46%; width: 900px; height: 700px; background: radial-gradient(closest-side, rgba(211,34,44,.22), rgba(211,34,44,.05) 55%, transparent); }
.frontier__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1000px) { .frontier__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); min-height: min(68vh, 680px); } }
.frontier__copy { display: grid; gap: var(--s-5); justify-items: start; }
.frontier__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); font-size: var(--fs-14); font-weight: 500; color: var(--bone); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.frontier__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(211,34,44,.25); }
.frontier__title { font-size: clamp(3rem, 1.2rem + 5vw, 6.4rem); line-height: .9; letter-spacing: -.02em; font-weight: 700; text-transform: uppercase; font-variation-settings: "opsz" 96, "wdth" 78; color: var(--pure-white); }
.frontier__title .split-line + .split-line > span { color: var(--red); }
.frontier__lede { font-size: var(--fs-20); color: var(--ash); max-width: 44ch; line-height: 1.55; }
.frontier__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.frontier__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: var(--s-4); border-top: 1px solid var(--line); width: 100%; font-size: var(--fs-14); color: var(--ash); }
.frontier__facts li { display: inline-flex; align-items: center; gap: 8px; }
.frontier__facts svg { width: 16px; height: 16px; color: var(--red); }
.js .frontier .frontier__lede, .js .frontier .frontier__ctas, .js .frontier .frontier__facts, .js .frontier .frontier__eyebrow { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-out) .2s, transform 1s var(--ease-out) .2s; }
.js .frontier .frontier__ctas { transition-delay: .3s; }
.js .frontier .frontier__facts { transition-delay: .4s; }
.js .hero.is-ready .frontier__lede, .js .hero.is-ready .frontier__ctas, .js .hero.is-ready .frontier__facts, .js .hero.is-ready .frontier__eyebrow { opacity: 1; transform: none; }
/* Cena à direita: inclinação leve, legenda sobreposta embaixo */
.frontier__scene { margin-top: 0; width: 100%; grid-template-columns: 1fr !important; }
.frontier__scene .scene__device { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; transition: transform 1s var(--ease-out); }
.frontier__scene:hover .scene__device { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.frontier__scene .scene__caption { margin: -72px 0 0 auto !important; width: min(340px, 88%); position: relative; z-index: 2; }
.js .frontier .scene { opacity: 0; transform: translateX(24px); transition: opacity 1s var(--ease-out) .35s, transform 1.2s var(--ease-out) .35s; }
.js .hero.is-ready .scene { opacity: 1; transform: none; }
@media (max-width: 999px) { .frontier__scene .scene__device { transform: none; } .frontier__scene .scene__caption { margin: -40px auto 0 !important; } }
@media (prefers-reduced-motion: reduce) { .frontier__scene .scene__device { transform: none; } }

/* Abas segmentadas por subcategoria */
.seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; margin-bottom: var(--s-6); border-radius: var(--r-pill); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg__btn { position: relative; z-index: 1; height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--fs-14); font-weight: 500; color: var(--ash); white-space: nowrap; transition: color var(--dur-2); }
.seg__btn small { font-size: 11px; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.seg__btn:hover { color: var(--bone); }
.seg__btn[aria-selected="true"] { color: var(--accent-ink); }
.seg__pill { position: absolute; z-index: 0; top: 4px; left: 0; height: 40px; border-radius: var(--r-pill); background: var(--red); transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
.pgrid--home { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Por que */
.why__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.why__grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.why__item { position: relative; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r-3); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.why__item::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg, var(--red), transparent); }
.why__num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--red); }
.why__item h3 { font-size: var(--fs-20); text-transform: uppercase; letter-spacing: -.01em; font-variation-settings: "wdth" 86; }
.why__item p { color: var(--ash); font-size: var(--fs-14); }

/* Chamada final */
.finale { position: relative; overflow: hidden; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(211,34,44,.28), transparent 70%), var(--deep); }
.finale .ornaments { color: var(--bone); }
/* Fundo natalino da chamada final: paisagem de neve escurecida, com brilho quente e bordas que se fundem à página */
.finale { isolation: isolate; }
/* Sem caixa: a chamada (logo abaixo do hero) não tem borda nem fundo sólido; escurece no meio e volta a ser transparente para emendar no catálogo */
.page-home .section.finale { border-top: 0; background: linear-gradient(180deg, transparent 0%, rgba(7,6,6,.5) 30%, rgba(7,6,6,.5) 70%, transparent 100%); }
.page-home .section.finale + .section { border-top: 0; }
/* Rodapé da homepage: começa transparente e escurece, emendando no FAQ */
.page-home .footer { background: linear-gradient(180deg, transparent, var(--deep) 220px); }
.finale::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(211,34,44,.32), transparent 70%),
    radial-gradient(ellipse 45% 40% at 50% 8%, rgba(255,196,120,.10), transparent 70%),
    radial-gradient(ellipse 55% 60% at 50% 52%, rgba(7,6,6,.72), rgba(7,6,6,.35) 75%, transparent),
    linear-gradient(180deg, rgba(7,6,6,.7), rgba(7,6,6,.42) 40%, rgba(7,6,6,.55) 65%, var(--deep)),
    var(--ss-img-finale, none) 62% 40% / cover no-repeat;
  filter: saturate(.9) brightness(.85);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 34%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%);
}
.finale__inner { display: grid; justify-items: center; gap: var(--s-6); }
.finale__title { font-size: clamp(2.8rem, 1rem + 5.4vw, 6.2rem); line-height: .92; text-transform: uppercase; letter-spacing: -.02em; font-variation-settings: "wdth" 78; }
.finale__title .split-line + .split-line > span { color: var(--red); }
.finale__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.finale__coupon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; color: var(--ash); font-size: var(--fs-14); }
.finale__code { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: var(--r-2); background: var(--snow-white); color: var(--paper-ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,.2); transition: transform var(--dur-1); }
.finale__code:hover { transform: translateY(-1px); }
.finale__code code { font-family: var(--font-mono); letter-spacing: .1em; }
.finale__code svg { width: 16px; height: 16px; }
.finale__code.is-done { background: var(--red); color: #fff; }

.finale__mark { width: 120px; height: auto; filter: drop-shadow(0 16px 40px rgba(211,34,44,.45)); }

/* Título do hero sempre dentro da própria coluna: o tamanho segue a largura da coluna (container query),
   nunca invade a tela de destaque. Sem suporte a container query, o título pode quebrar linha. */
.frontier__copy { container-type: inline-size; min-width: 0; position: relative; z-index: 2; }
.frontier__title .split-line { white-space: normal; }
@supports (font-size: 1cqi) {
  .frontier__title { font-size: min(6.4rem, 13.2cqi); }
  .frontier__title .split-line { white-space: nowrap; }
}

/* =====================================================================
   Texturas e divisórias (arte original gerada por tools/gen-textures.py)
   ===================================================================== */
/* Fundo da página: grão escuro com pigmento vermelho, tileável */
/* Imagens: URLs vêm do layout.html via asset() (na Tebex cada asset tem endereço próprio; caminho relativo não funciona) */
body { background: var(--ink) var(--ss-img-grain, none) repeat; background-size: 512px 512px; }

/* Homepage e catálogo de scripts: imagem de fundo fixa, desfocada e bem discreta, que surge em fade e some para a cor da página embaixo */
.page-home::after, .page-category::after {
  content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background: var(--ss-img-home, none) center / cover no-repeat;
  filter: blur(6px) saturate(.85);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 55%, transparent 100%);
  opacity: .28; animation: ss-home-bg-in 2.4s var(--ease-out) both;
}
@keyframes ss-home-bg-in { from { opacity: 0; filter: blur(18px) saturate(.85); } }
.page-category::after { background-image: var(--ss-img-scripts, none); }
@media (prefers-reduced-motion: reduce) { .page-home::after, .page-category::after { animation: none; } }

/* Seção "Por que": véu escuro translúcido com brilho vermelho suave; bordas em fade, sem papel rasgado, deixando o fundo da página aparecer */
.torn { position: relative; z-index: 2; border-top: 0 !important;
  padding-block: calc(var(--s-9) + var(--s-6));
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(150,20,30,.22), transparent 75%),
    linear-gradient(180deg, rgba(14,6,7,.7), rgba(14,6,7,.7));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.torn .sec-head__lede { color: #E9C9C4; }
.torn .why__item { background: rgba(12, 6, 6, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.torn .why__item::after { background: linear-gradient(90deg, var(--snow-white), transparent); opacity: .6; }
.torn .why__num { color: #FFB3B3; }
.torn .why__item p { color: #E2CFCB; }
.section.torn + .section, .section + .section.torn { border-top: 0; }

/* Hero ocupa a primeira tela inteira: a chamada "Escolha um script" só aparece ao rolar */
.page-home .frontier { min-height: calc(100vh - var(--bar-h) - var(--nav-h) - 10px); min-height: calc(100svh - var(--bar-h) - var(--nav-h) - 10px); display: flex; flex-direction: column; justify-content: center; }
.page-home .frontier > .wrap { width: 100%; }

/* FAQ da homepage: título à esquerda, perguntas à direita; sem borda de seção para emendar com "Em foco" */
.page-home .section.home-faq { border-top: 0; }
.home-faq__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .home-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } .home-faq__head { position: sticky; top: calc(var(--nav-h) + var(--s-6)); } }
.home-faq .faq summary { font-size: var(--fs-18, 1.125rem); }