/* =====================================================================
   King mídia: site.css
   Identidade nova da King (Pedro Padilha, 2026), tirada das peças que o
   Marcelo mandou em 15/10/2026: Poppins, palavra destacada em caixa roxa
   (<mark>), quatro quadradinhos nos cantos do título (.colchetes),
   quadrados soltos flutuando (.q) e fitas largas no fundo (a fita da coroa).
   Tema escuro, como o perfil do Instagram.
   ===================================================================== */

/* o furo nasce em -1%, não em 0%: com 0% a borda suave (0 a .5%) deixava um
   ponto transparente no centro da tela a abertura inteira (ele viu, 15/10/2026) */
@property --furo { syntax: "<percentage>"; inherits: false; initial-value: -1%; }

:root {
  --fundo: #07030F;
  --fundo-2: #0C0619;
  --cartao: #120A26;
  --cartao-2: #1A1036;
  --roxo: #8A3CF2;
  --roxo-claro: #B583FF;
  --roxo-medio: #6A24D9;
  --roxo-escuro: #3A0E9E;
  --lilas: #DCCBFF;
  --texto: #F5F0FF;
  --texto-2: #BDB1D8;
  --texto-3: #8E82AB;
  --linha: rgba(190, 150, 255, .14);
  --linha-forte: rgba(190, 150, 255, .28);
  --degrade: linear-gradient(135deg, #A45CFF 0%, #6A24D9 55%, #3A0E9E 100%);
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --larg: 1200px;
  --raio: 22px;
  --topo-alt: 72px;
  /* a coroa como máscara, pros separadores da faixa */
  --coroa-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2210%2021%20482%20250%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M39.5%2026.9C35.1%2028.9%2C28.1%2035.9%2C25.5%2041.1C13.5%2064.2%2C12.4%20101.2%2C22.1%20160C25.2%20179.5%2C31.8%20209.9%2C35.2%20220.9C42.4%20244.4%2C58.9%20259.7%2C81.1%20263.6C89%20265%2C177%20266.3%2C177%20265C177%20264.7%2C173.5%20262.7%2C169.3%20260.5C122.7%20236.3%2C79.7%20189.6%2C53.5%20134.7C37%2099.9%2C32.4%2078.6%2C38.1%2062.6C45.9%2040.3%2C64.5%2039.3%2C81.8%2060.3C91.4%2072%2C103.3%20103.1%2C115%20146.8C124.7%20183.2%2C132.7%20197.5%2C157.4%20222.8C189.8%20256%2C222.1%20269.6%2C254.5%20263.6C263%20262%2C286.8%20255.6%2C287.7%20254.6C288%20254.4%2C287.2%20250.4%2C286.1%20245.8C285%20241.2%2C282.2%20229.9%2C280%20220.5C276.2%20204.3%2C271%20184.9%2C270.4%20184.1C270.3%20184%2C267.5%20185.1%2C264.3%20186.6C255.5%20191%2C246.4%20190.6%2C230%20185.1C200.2%20175.1%2C179.9%20157.4%2C157.5%20121.9C139.5%2093.3%2C127.4%2077.5%2C112.4%2063C95%2046.2%2C74.9%2032.9%2C58.8%2027.6C49.8%2024.5%2C45%2024.4%2C39.5%2026.9M448.5%2028.4C436%2032.5%2C418.8%2042.6%2C405%2054C392%2064.8%2C339%20118.9%2C339%20121.4C339%20121.8%2C340.5%20124.4%2C342.4%20127.3C345.6%20132.2%2C366.6%20167.6%2C375.9%20183.8C380.1%20191.1%2C382%20192.7%2C382%20189C382%20185.6%2C394.6%20136.4%2C399.5%20120.7C412.4%2078.9%2C423.3%2058.2%2C437.5%2048.5C446.8%2042%2C454.8%2042.9%2C462.7%2051.2C482.8%2072.1%2C467.2%20121.9%2C423.7%20176.6C403.7%20201.7%2C391%20212.2%2C382.8%20210.5C373.2%20208.4%2C366.4%20201.7%2C358.5%20186.5C351.5%20173.2%2C336%20144.8%2C332.1%20138.2C315.1%20109.3%2C290.1%2075%2C274.5%2059.4C266.9%2051.6%2C256.6%2044%2C253.8%2044C248.2%2044.1%2C231.2%2059.4%2C216.7%2077.5C207.8%2088.6%2C187.4%20116.9%2C186.4%20119.4C186.1%20120.3%2C188.3%20123.4%2C192.2%20127.6C199%20134.8%2C217.9%20152%2C219.1%20152C219.5%20152%2C220%20151%2C220.3%20149.8C221.7%20143.3%2C240.2%2080.5%2C242.4%2074.7C245.5%2066.6%2C251.6%2054.4%2C252.9%2053.6C254.2%2052.8%2C259.9%2063.2%2C264%2073.5C270.5%2089.8%2C278.3%20122.2%2C293.5%20194.5C301.8%20234.4%2C305.7%20245.4%2C314.3%20254.3C324.2%20264.4%2C329.4%20265.2%2C382.6%20264.8C429.4%20264.4%2C429.5%20264.4%2C443.2%20256.7C461.9%20246.2%2C471.3%20229%2C479%20191C487%20151.3%2C490%20125.8%2C490%2096.6C490%2066%2C486.9%2049.9%2C478.5%2037.3C471.2%2026.3%2C462.6%2023.8%2C448.5%2028.4%22%2F%3E%3C%2Fsvg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-alt) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--fonte); font-size: 1rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte); line-height: 1.1; letter-spacing: -.03em; margin: 0; font-weight: 600; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--roxo); color: #fff; }
:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(100% - 2.5rem, var(--larg)); margin-inline: auto; }
.lilas { color: var(--roxo-claro); }

/* --------------------------- marcas da identidade ---------------------------
   <mark>: a caixa roxa atrás da palavra, como "rei" e "concorrentes" nas peças
   deles. Com JS ela "pinta" da esquerda pra direita quando o título aparece;
   o texto fica legível o tempo todo (é decoração, não esconde nada). */
mark {
  color: #fff; padding: 0 .16em; margin: 0 .02em; border-radius: 3px;
  background: linear-gradient(90deg, #8A3CF2, #7B2FF0) no-repeat left center / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.7, 0, .2, 1) .25s;
}
.js .pinta mark { background-size: 0% 100%; }
.js .pinta.visto mark { background-size: 100% 100%; }
/* os quatro quadradinhos nos cantos ("Conquiste seu território") */
.colchetes {
  --c: .2em; position: relative; padding: .38em .55em; margin-left: -.55em;
  background:
    linear-gradient(#8A3CF2, #8A3CF2) 0 0 / var(--c) var(--c) no-repeat,
    linear-gradient(#8A3CF2, #8A3CF2) 100% 0 / var(--c) var(--c) no-repeat,
    linear-gradient(#8A3CF2, #8A3CF2) 0 100% / var(--c) var(--c) no-repeat,
    linear-gradient(#8A3CF2, #8A3CF2) 100% 100% / var(--c) var(--c) no-repeat;
}
/* quadrados soltos, em camadas de parallax */
.q { position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t); border-radius: 3px; background: var(--degrade); box-shadow: 0 0 24px rgba(138, 60, 242, .45); pointer-events: none; }
.q--vazado { background: transparent; border: 2px solid #8A3CF2; box-shadow: none; }
.q--claro { background: #C9A2FF; box-shadow: 0 0 18px rgba(201, 162, 255, .6); }

/* ------------------------------ botões ------------------------------
   Brilho no hover (templates/componentes/botao-brilho-hover.html): nada se
   mexe em repouso, só a faixa de luz atravessa uma vez. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--degrade); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .98rem;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(138, 60, 242, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); border-color: var(--lilas); box-shadow: 0 16px 40px rgba(138, 60, 242, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); transition: left .65s ease; pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { left: 130%; }
.btn--vazado { background: rgba(255, 255, 255, .03); border-color: var(--linha-forte); box-shadow: none; backdrop-filter: blur(6px); }
.btn--vazado:hover, .btn--vazado:focus-visible { background: rgba(138, 60, 242, .14); box-shadow: none; }
.btn--pequeno { min-height: 42px; padding: .5rem 1.1rem; font-size: .88rem; }
.btn--largo { width: 100%; text-align: center; line-height: 1.25; }

/* ------------------------------ topo ------------------------------ */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo-alt);
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.topo.rolou { background: rgba(7, 3, 15, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--linha); }
.topo__wrap { height: 100%; width: min(100% - 2.5rem, 1320px); margin-inline: auto; display: flex; align-items: center; gap: 2rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca__coroa { width: 48px; height: 25px; fill: url(#king-grad); filter: drop-shadow(0 0 10px rgba(164, 92, 255, .45)); }
/* "King" com "midia" pequeno embaixo, à direita, como na logo deles */
.marca__nome { display: inline-grid; font-weight: 600; font-size: 1.5rem; line-height: .9; letter-spacing: -.03em; }
.marca__nome small { justify-self: end; font-size: .4em; font-weight: 500; letter-spacing: .04em; color: var(--roxo-claro); margin-top: .45em; line-height: 1; }
.menu { display: flex; gap: 1.6rem; margin-left: auto; }
.menu a { text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--texto-2); position: relative; padding: .4rem 0; transition: color .2s ease; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--degrade); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:hover, .menu a:focus-visible { color: var(--texto); }
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }

/* ------------------------------ abertura ------------------------------
   Sem nada branco em tela cheia (a versão anterior abria com um clarão).
   A saída é um furo que cresce a partir da coroa (--furo via @property);
   navegador sem @property cai no "some" logo depois, por opacidade. */
.abertura { display: none; }
.js .abertura {
  display: block; position: fixed; inset: 0; z-index: 300; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, #1d0a4a 0%, #0a0418 55%, #050210 100%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + .5%));
  mask: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + .5%));
  animation: furo 1s cubic-bezier(.7, 0, .25, 1) 2.75s forwards, some .35s ease 3.6s forwards;
}
.js.sem-abertura .abertura, .js .abertura.feita { display: none; }
@keyframes furo { to { --furo: 150%; } }
@keyframes some { to { opacity: 0; visibility: hidden; } }
.abertura__fitas { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__fita { fill: none; stroke: url(#fita-grad); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fita-varre 1.1s cubic-bezier(.6, 0, .2, 1) forwards; }
.abertura__fita--1 { stroke-width: 170; opacity: .95; }
.abertura__fita--2 { stroke-width: 110; opacity: .6; animation-delay: .18s; }
.abertura__fita--3 { stroke-width: 60; opacity: .4; animation-delay: .34s; }
@keyframes fita-varre { to { stroke-dashoffset: 0; } }
.abertura__marca {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 2.2rem 2.6rem;
  display: grid; justify-items: center; gap: .9rem;
  animation: marca-sai .8s cubic-bezier(.7, 0, .3, 1) 2.7s forwards;
}
@keyframes marca-sai { to { scale: 1.6; opacity: 0; } }
.abertura__coroa { width: min(42vw, 240px); height: auto; overflow: visible; }
.abertura__traco {
  fill: url(#king-grad); fill-opacity: 0; stroke: #E3D2FF; stroke-width: 3;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 16px rgba(164, 92, 255, .8));
  animation: traco-desenha 1s cubic-bezier(.6, 0, .3, 1) .55s forwards, traco-enche .5s ease 1.45s forwards, pulsa .7s ease 1.9s;
}
@keyframes traco-desenha { to { stroke-dashoffset: 0; } }
@keyframes traco-enche { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes pulsa { 50% { filter: drop-shadow(0 0 34px rgba(190, 130, 255, 1)); } }
.abertura__canto { position: absolute; width: 14px; height: 14px; background: #8A3CF2; box-shadow: 0 0 16px rgba(138, 60, 242, .9); opacity: 0; animation: canto .6s cubic-bezier(.2, .9, .3, 1.3) 1.3s forwards; }
.abertura__canto--1 { left: 0; top: 0; --de: -70px -70px; }
.abertura__canto--2 { right: 0; top: 0; --de: 70px -70px; animation-delay: 1.38s; }
.abertura__canto--3 { left: 0; bottom: 0; --de: -70px 70px; animation-delay: 1.46s; }
.abertura__canto--4 { right: 0; bottom: 0; --de: 70px 70px; animation-delay: 1.54s; }
@keyframes canto { from { opacity: 0; translate: var(--de); rotate: 90deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.abertura__nome { display: inline-grid; grid-template-columns: repeat(4, auto); font-weight: 600; font-size: clamp(2rem, 6vw, 3rem); line-height: .9; letter-spacing: -.03em; }
.abertura__nome span { opacity: 0; translate: 0 .5em; animation: letra .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.abertura__nome span:nth-child(1) { animation-delay: 1.65s; }
.abertura__nome span:nth-child(2) { animation-delay: 1.72s; }
.abertura__nome span:nth-child(3) { animation-delay: 1.79s; }
.abertura__nome span:nth-child(4) { animation-delay: 1.86s; }
.abertura__nome small { grid-column: 1 / -1; justify-self: end; font-size: .4em; font-weight: 500; color: var(--roxo-claro); letter-spacing: .04em; opacity: 0; animation: letra .5s ease 2.05s forwards; }
@keyframes letra { to { opacity: 1; translate: 0 0; } }

/* ------------------------------ cursor ------------------------------ */
.cursor { display: none; }
html.cursor-on .cursor { display: block; position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.cursor__anel, .cursor__ponto { position: absolute; left: 0; top: 0; transition: opacity .3s ease; }
.cursor__anel {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 255, .75);
  translate: var(--ax, -100px) var(--ay, -100px);
  transition: width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease, border-color .25s ease, opacity .3s ease;
}
.cursor__ponto { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #B583FF; border-radius: 1px; rotate: 45deg; translate: var(--px, -100px) var(--py, -100px); box-shadow: 0 0 10px rgba(181, 131, 255, .9); }
.cursor.sobre .cursor__anel { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(138, 60, 242, .16); border-color: #B583FF; }
.cursor.apertou .cursor__anel { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.cursor.fora .cursor__anel, .cursor.fora .cursor__ponto { opacity: 0; }
.rastro { position: absolute; left: 0; top: 0; width: var(--t, 6px); height: var(--t, 6px); margin: calc(var(--t, 6px) / -2) 0 0 calc(var(--t, 6px) / -2); border-radius: 1px; background: var(--c, #8A3CF2); translate: var(--x) var(--y); animation: rastro var(--dur, .8s) ease-out forwards; }
@keyframes rastro { to { opacity: 0; scale: .2; rotate: 140deg; translate: var(--x2) var(--y2); } }

/* ------------------------------ hero ------------------------------
   Hero coberto pelo scroll (padrão do site do Marcelo): fica travado e a
   página sobe por cima. --cobre (0 a 1) vem do site.js; --mx/--my (-.5 a .5)
   é o mouse. Toda seção depois dele precisa de fundo opaco. */
.hero {
  position: sticky; top: var(--hero-topo, 0px); z-index: 0; isolation: isolate;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--topo-alt) + 1.5rem) 0 3rem; overflow: clip;
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; opacity: calc(var(--cobre, 0) * .7); }
main { overflow-x: clip; }
:where(main > section:not(.hero)), .rodape { position: relative; z-index: 1; background-color: var(--fundo); }

.hero__fundo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 70% 10%, #1B0B3D 0%, var(--fundo) 60%); }
.hero__brilho {
  position: absolute; width: 1000px; height: 1000px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 60, 242, .45) 0%, rgba(106, 36, 217, .14) 38%, transparent 68%);
  translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 30px);
}
/* fitas 3D (ChatGPT, 15/10/2026): três camadas, cada uma na sua profundidade
   (--prof). O mouse e o scroll movem por translate; o balanço é por rotate. */
.hero__fitas3d { position: absolute; inset: 0; }
.fita3d {
  position: absolute; height: auto; max-width: none; pointer-events: none;
  translate: calc(var(--mx, 0) * var(--prof) * -50px) calc(var(--my, 0) * var(--prof) * -36px + var(--cobre, 0) * var(--prof) * 140px);
  animation: fita-balanca 10s ease-in-out infinite alternate;
}
.fita3d--a { width: min(56vw, 860px); right: -12%; top: 3%; opacity: .55; filter: blur(.5px); }
.fita3d--b { width: min(42vw, 640px); left: -12%; top: 62%; opacity: .3; filter: blur(1.5px); animation-duration: 13s; animation-direction: alternate-reverse; }
.fita3d--c { width: min(46vw, 720px); right: -4%; bottom: -8%; opacity: .85; animation-duration: 8s; }
@keyframes fita-balanca { from { rotate: -3deg; } to { rotate: 4deg; } }
.hero__piso {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 58%;
  background-image:
    linear-gradient(rgba(181, 131, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 131, 255, .2) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 100%);
  animation: piso-anda 6s linear infinite;
}
@keyframes piso-anda { to { background-position: 0 64px; } }
/* quadrados: cada um anda conforme a profundidade (--prof) */
.hero__quadros { position: absolute; inset: 0; }
.hero__quadros .q {
  translate: calc(var(--mx, 0) * var(--prof) * -60px) calc(var(--my, 0) * var(--prof) * -45px + var(--cobre, 0) * var(--prof) * -220px);
  animation: q-gira 9s ease-in-out infinite alternate;
}
.hero__quadros .q:nth-child(2n) { animation-duration: 12s; animation-direction: alternate-reverse; }
@keyframes q-gira { from { rotate: -12deg; } to { rotate: 18deg; } }

.hero__wrap {
  width: min(100% - 2.5rem, 1320px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem;
  translate: 0 calc(var(--cobre, 0) * -60px); scale: calc(1 - var(--cobre, 0) * .05);
}
.hero__texto { max-width: 620px; }
.selo {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .95rem; border-radius: 999px;
  background: rgba(138, 60, 242, .12); border: 1px solid var(--linha-forte);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lilas);
}
.selo__ponto { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } }
.hero h1 { margin-top: 1.1rem; font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.hero__sub { margin-top: 1.1rem; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--texto-2); max-width: 520px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__prova { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.8rem; font-size: .9rem; color: var(--texto-2); text-decoration: none; }
.hero__prova .ico { color: var(--roxo-claro); width: 1.3em; height: 1.3em; }
.hero__prova strong { color: var(--texto); font-weight: 600; }
.hero__prova:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* entrada: só com JS, e espera a abertura abrir o furo */
.js .hero__texto > * { animation: entra .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.js .hero__texto > :nth-child(1) { animation-delay: 2.95s; }
.js .hero__texto > :nth-child(2) { animation-delay: 3.05s; }
.js .hero__texto > :nth-child(3) { animation-delay: 3.15s; }
.js .hero__texto > :nth-child(4) { animation-delay: 3.25s; }
.js .hero__texto > :nth-child(5) { animation-delay: 3.35s; }
.js .hero__palco { animation: entra-palco 1.4s cubic-bezier(.2, .8, .2, 1) 2.85s backwards; }
.js.sem-abertura .hero__texto > *, .js.sem-abertura .hero__palco { animation-delay: .1s; }
@keyframes entra { from { opacity: 0; translate: 0 26px; } }
@keyframes entra-palco { from { opacity: 0; translate: 0 80px; scale: .9; } }

/* ------------------------------ totem 3D ------------------------------
   Caixa em CSS 3D: frente com a tela, costas, lados, tampa e base no chão.
   O mouse escreve --rx/--ry e o scroll gira o .palco (rotate/scale, em
   propriedades separadas pra uma não apagar a outra). Maior no desktop
   desde 15/10/2026, pedido dele: a altura acompanha a da janela. */
.hero__palco { --totem-h: clamp(520px, 68vh, 760px); position: relative; display: grid; place-items: center; min-height: calc(var(--totem-h) + 120px); }
.palco {
  padding-bottom: 40px;
  perspective: 1300px; perspective-origin: 50% 12%;
  rotate: y calc(var(--cobre, 0) * 28deg); scale: calc(1 - var(--cobre, 0) * .08);
  translate: calc(var(--mx, 0) * 14px) 0;
}
.totem { --h: var(--totem-h); --w: calc(var(--h) * .42); --d: 36px; --bw: calc(var(--w) * 1.3); --bd: calc(var(--w) * .72); --bh: 18px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.totem__corpo {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -20deg));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.totem__face { position: absolute; }
.totem__frente {
  inset: 0; border-radius: 22px; transform: translateZ(calc(var(--d) / 2));
  background: linear-gradient(160deg, #2a2733 0%, #0b0a10 40%, #0b0a10 70%, #1c1a24 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18);
  overflow: hidden;
}
.totem__tras { inset: 0; border-radius: 22px; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: linear-gradient(180deg, #1d1b24, #0d0c12); }
.totem__lado { top: 12px; bottom: 12px; width: var(--d); left: calc(50% - var(--d) / 2); }
.totem__lado--d { transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px)); background: linear-gradient(90deg, #3a3646, #15131c 60%, #24212d); }
.totem__lado--e { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 2px)); background: linear-gradient(90deg, #24212d, #15131c 40%, #3a3646); }
.totem__tampa { left: 12px; right: 12px; height: var(--d); top: calc(var(--d) / -2); transform: rotateX(90deg); background: linear-gradient(90deg, #3d3949, #585366 50%, #3d3949); border-radius: 4px; }
.totem__base { position: absolute; left: calc(50% - var(--bw) / 2); top: 100%; width: var(--bw); height: var(--bh); transform-style: preserve-3d; }
.totem__base > div { position: absolute; }
.totem__base-frente { inset: 0; transform: translateZ(calc(var(--bd) / 2)); background: linear-gradient(180deg, #2f2c38 0%, #121118 100%); border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.totem__base-topo { left: 0; right: 0; height: var(--bd); top: calc(var(--bd) / -2); transform: rotateX(90deg); background: radial-gradient(70% 90% at 50% 50%, #3a3546 0%, #1b1922 70%, #131119 100%); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.totem__base-lado { width: var(--bd); height: var(--bh); left: calc(50% - var(--bd) / 2); background: linear-gradient(90deg, #121118, #2a2733); }
.totem__base-lado--d { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.totem__base-lado--e { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.totem__queixo { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * .17); display: grid; place-items: center; }
.totem__logo { width: 26%; height: auto; aspect-ratio: 482 / 250; fill: url(#king-grad); opacity: .95; }
.totem__reflexo {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .02) 30%, transparent 31%, transparent 100%);
  translate: calc(var(--ry-num, -20) * 1.6px) 0;
}
.totem__luz { position: absolute; left: 50%; bottom: -120px; width: 640px; height: 220px; margin-left: -320px; background: radial-gradient(closest-side, rgba(138, 60, 242, .55), rgba(138, 60, 242, 0)); transform: rotateX(80deg); filter: blur(6px); pointer-events: none; }
.totem__sombra { position: absolute; left: 50%; bottom: -86px; width: 460px; height: 96px; margin-left: -230px; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); filter: blur(4px); }

/* tela: os tamanhos de dentro são em cqi, acompanham a largura do totem */
.tela {
  position: absolute; inset: 12px 12px calc(var(--h) * .17) 12px; border-radius: 10px; overflow: hidden; isolation: isolate;
  background: #05020c; container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 0 50px rgba(138, 60, 242, .4);
}
.tela__barras { position: absolute; z-index: 5; top: 3.5cqi; left: 4cqi; right: 4cqi; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqi; }
.tela__barras i { height: 1.1cqi; min-height: 3px; border-radius: 4px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.tela__barras i::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: left; scale: 0 1; }
.tela__barras i.cheia::after { scale: 1 1; }
.tela__barras i.corre::after { animation: barra var(--dur, 3.8s) linear forwards; }
@keyframes barra { to { scale: 1 1; } }

.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s ease; }
.slide.ativo { opacity: 1; z-index: 1; }
.slide__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.slide.ativo .slide__foto { animation: kenburns 4.6s ease-out both; }
@keyframes kenburns { from { scale: 1.2; } to { scale: 1.02; } }
.slide::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 22%, transparent 50%, rgba(0, 0, 0, .78) 100%); }
.slide > :not(.slide__foto) { position: relative; z-index: 1; }
.slide.ativo .anima { animation: sobe-slide .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }
@keyframes sobe-slide { from { opacity: 0; translate: 0 6cqi; } }
.slide__etq { position: absolute !important; left: 6cqi; top: 10cqi; font-size: 4.2cqi; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 1.2cqi 3cqi; border-radius: 99px; background: #8A3CF2; }
.slide__titulo { position: absolute !important; left: 6cqi; right: 6cqi; bottom: 9cqi; font-size: 15cqi; font-weight: 700; line-height: .95; letter-spacing: -.04em; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.slide__titulo--peq { font-size: 12cqi; }
.slide__rodape { position: absolute !important; left: 6cqi; bottom: 4cqi; font-size: 4cqi; font-weight: 500; color: #EBDDFF; }
.slide--cafe .slide__titulo { bottom: 12cqi; }
/* anúncio da própria King: o do ponto de ônibus deles */
.slide--king::after { background: linear-gradient(180deg, transparent 40%, rgba(12, 3, 30, .3) 60%); }
/* a foto fica só na parte de cima; embaixo é o painel roxo, como no ponto de ônibus deles */
.slide--king { background: #1c0650; }
.slide--king .slide__foto { inset: 0 0 auto 0; height: 66%; object-position: 50% 100%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.slide__marca { position: absolute !important; left: 6cqi; top: 10cqi; width: 34cqi; height: auto; max-width: none; filter: drop-shadow(0 0 5cqi rgba(164, 92, 255, .7)); }
.slide__painel { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 8cqi 6cqi 6cqi; background: linear-gradient(180deg, rgba(42, 10, 107, 0) 0%, #2a0a6b 22%, #1c0650 100%); }
.slide__frase { font-size: 9.2cqi; font-weight: 500; line-height: 1.32; letter-spacing: -.01em; }
.slide__frase mark { padding: 0 1.4cqi; }
.slide__saiba { display: flex; flex-direction: column; align-items: center; margin-top: 5cqi; font-size: 4.4cqi; font-weight: 500; }
.slide__saiba .ico { width: 6cqi; height: 6cqi; animation: saiba 1.4s ease-in-out infinite; }
@keyframes saiba { 50% { translate: 0 -1.5cqi; } }
/* hambúrguer: selo que gira */
.giro { position: absolute !important; right: 5cqi; top: 34cqi; width: 34cqi; height: 34cqi; display: grid; place-items: center; }
.giro > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 9s linear infinite; }
.giro text { font-size: 10px; font-weight: 600; fill: #fff; text-transform: uppercase; }
.giro span { width: 18cqi; height: 18cqi; border-radius: 50%; display: grid; place-items: center; background: #8A3CF2; box-shadow: 0 0 5cqi rgba(138, 60, 242, .8); }
.giro span .ico { width: 9cqi; height: 9cqi; }
@keyframes gira { to { rotate: 360deg; } }
/* moda: texto vertical e quadrados */
.slide__vertical { position: absolute !important; right: 4cqi; top: 50cqi; writing-mode: vertical-rl; rotate: 180deg; font-size: 7.5cqi; font-weight: 800; letter-spacing: .04em; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.slide__q { position: absolute !important; background: #8A3CF2; }
.slide__q--1 { width: 9cqi; height: 9cqi; right: 8cqi; top: 22cqi; }
.slide__q--2 { width: 5cqi; height: 5cqi; right: 22cqi; top: 34cqi; background: #fff; }
.slide.ativo .slide__q { animation: q-pula 1.4s cubic-bezier(.3, 1.4, .5, 1) backwards .3s; }
.slide.ativo .slide__q--2 { animation-delay: .45s; }
@keyframes q-pula { from { scale: 0; rotate: -90deg; } }
/* Fortaleza: relógio de verdade */
.slide--hora::after { background: linear-gradient(180deg, rgba(10, 4, 30, .85) 0%, rgba(10, 4, 30, .3) 45%, transparent 60%); }
.slide__hora-caixa { position: absolute !important; left: 0; right: 0; top: 12cqi; text-align: center; display: grid; justify-items: center; gap: 1cqi; }
.slide__hora-caixa .slide__etq { position: static !important; }
.slide__relogio { font-size: 26cqi; font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.slide__data { font-size: 5cqi; color: #E7D9FF; text-transform: lowercase; }

/* etiquetas flutuantes do palco (andam com o mouse) */
.tocando, .etiqueta-3d { position: absolute; z-index: 4; border-radius: 16px; background: rgba(18, 10, 38, .72); border: 1px solid var(--linha-forte); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .7); }
.tocando { left: 0; top: 16%; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; translate: calc(var(--mx, 0) * -36px) calc(var(--my, 0) * -26px); }
.tocando__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--degrade); }
.tocando__ico .ico { width: 14px; height: 14px; fill: #fff; }
.tocando__txt { display: grid; line-height: 1.2; }
.tocando__txt small { font-size: .68rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; }
.tocando__txt strong { font-size: .92rem; font-weight: 600; min-width: 9.5em; }
.tocando__num { font-size: .78rem; color: var(--roxo-claro); font-variant-numeric: tabular-nums; }
.etiqueta-3d { right: 2%; bottom: 20%; display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; font-size: .85rem; font-weight: 600; translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 30px); }
.etiqueta-3d svg { width: 30px; height: 16px; fill: url(#king-grad); }

/* ------------------------------ faixa ------------------------------ */
.faixa { border-block: 1px solid var(--linha); overflow: hidden; padding: 1.1rem 0; background: var(--fundo-2) !important; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 70px rgba(0, 0, 0, .6); margin-top: -28px; }
.faixa__trilho { display: flex; width: max-content; animation: faixa 38s linear infinite; }
.faixa__lista { display: flex; list-style: none; margin: 0; padding: 0; }
.faixa__lista li { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; font-weight: 500; font-size: clamp(1.05rem, 1.9vw, 1.4rem); color: var(--texto-2); white-space: nowrap; }
.faixa__lista li::after { content: ""; width: 26px; height: 14px; background: var(--degrade); -webkit-mask: var(--coroa-mask) center / contain no-repeat; mask: var(--coroa-mask) center / contain no-repeat; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ------------------------------ seções ------------------------------ */
.secao { padding: clamp(5rem, 10vw, 8.5rem) 0; isolation: isolate; }
.cabeca { max-width: 740px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.cabeca--centro { margin-inline: auto; text-align: center; }
.olho { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--roxo-claro); margin-bottom: 1rem; }
.olho::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #8A3CF2; }
.secao h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 600; line-height: 1.18; }
.cabeca__sub { margin-top: 1.4rem; font-size: 1.05rem; color: var(--texto-2); }

/* ------------------------------ se torne o rei ------------------------------ */
.rei { overflow: hidden; background: radial-gradient(70% 60% at 80% 40%, #1a0b3c 0%, var(--fundo) 70%) !important; }
.rei__palavra { position: absolute; z-index: -1; top: 50%; left: 0; margin: -.55em 0 0; white-space: nowrap; font-size: clamp(8rem, 20vw, 18rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(181, 131, 255, .1); pointer-events: none; }
.rei__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.rei__texto { position: relative; z-index: 1; }
.rei__texto h2 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); line-height: 1.18; }
.rei__pontos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.rei__pontos li { display: flex; align-items: center; gap: .9rem; font-weight: 500; }
.rei__pontos span { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(138, 60, 242, .15); border: 1px solid var(--linha-forte); color: var(--roxo-claro); }
.rei__arte { position: relative; isolation: isolate; }
.rei__foto { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; border: 1px solid var(--linha-forte); box-shadow: 0 50px 100px -30px rgba(138, 60, 242, .55); }
.rei__foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; }
.rei__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 3, 30, .9) 100%); }
.rei__selo { position: absolute; z-index: 1; left: 2.2rem; bottom: 2rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; line-height: 1.2; margin: 0; }
/* fita 3D passando por trás do cartão, saindo dos dois lados */
.rei__fita { position: absolute; z-index: -1; left: -10%; top: 38%; width: 128%; max-width: none; height: auto; opacity: .85; pointer-events: none; }
.q--solto { z-index: 2; }

/* ------------------------------ produtos ------------------------------ */
.produtos { background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 100%) !important; }
.produtos__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.produto {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--raio); background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
  border: 1px solid var(--linha); transition: border-color .3s ease, translate .3s ease;
}
.produto::before {
  content: ""; position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(164, 92, 255, .2), transparent 60%);
}
.produto:hover { border-color: var(--linha-forte); translate: 0 -4px; }
.produto:hover::before { opacity: 1; }
.produto__cena { height: 270px; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--linha); }
.produto__foto { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; opacity: .9; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.produto:hover .produto__foto { scale: 1.06; }
.produto__cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 3, 15, .1) 0%, rgba(18, 10, 38, .85) 100%); }
.produto__cena > :not(.produto__foto) { position: relative; z-index: 1; }
.produto__corpo { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.produto__num { font-weight: 600; font-size: .85rem; color: var(--roxo-claro); letter-spacing: .1em; }
.produto h3 { font-size: 1.5rem; }
.produto__corpo > p:not(.produto__num) { color: var(--texto-2); font-size: .97rem; }
.produto__usos { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .45rem; }
.produto__usos li { display: flex; align-items: center; gap: .55rem; font-size: .93rem; font-weight: 500; }
.produto__usos .ico { color: #4ADE80; width: 1em; height: 1em; stroke-width: 3; }
.produto__link { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--roxo-claro); text-decoration: none; }
.produto__link .ico { transition: translate .25s ease; }
.produto__link:hover .ico { translate: 4px 0; }

.mini-totem { width: 96px; height: 204px; border-radius: 12px; padding: 7px 7px 26px; background: linear-gradient(160deg, #2a2733, #0c0b11); box-shadow: 0 30px 40px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 40px rgba(138, 60, 242, .35); }
.mini-totem::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 20px; height: 8px; margin-left: -10px; border-radius: 2px; background: var(--degrade); opacity: .8; }
.mini-parede { width: 260px; aspect-ratio: 16 / 9; border-radius: 10px; padding: 6px; background: #0c0b11; box-shadow: 0 30px 40px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 40px rgba(138, 60, 242, .35); }
.mini-tela { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #8A3CF2, #3A0E9E); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; gap: 8px; }
.mini-tela > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: respira 6s ease-in-out infinite alternate; }
@keyframes respira { from { scale: 1; } to { scale: 1.12; } }
.mini-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .7)); }
.mini-tela > span { position: relative; z-index: 1; }
.mini-tela__titulo { font-weight: 700; font-size: 1rem; line-height: 1.02; color: #fff; }
.mini-tela--horizontal { background: linear-gradient(135deg, #1a0b3b, #0b0418); justify-content: center; }
.mini-tela--horizontal::after { display: none; }
.mini-tela__progresso { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mini-tela__progresso i { display: block; height: 100%; width: 87%; border-radius: inherit; background: linear-gradient(90deg, #4ADE80, #A45CFF); transform-origin: left; animation: progresso 3.6s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes progresso { 0% { scale: 0 1; } 60%, 100% { scale: 1 1; } }
.mini-tela__linhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-tela__linhas i { height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.mini-tela--pub { justify-content: flex-end; align-items: flex-start; }
.mini-tela--pub > img { object-position: 50% 12%; }
.mini-tela--pub::after { display: block; background: linear-gradient(90deg, rgba(42, 10, 107, .85) 0%, transparent 70%); }
.mini-tela--pub .mini-tela__titulo { font-size: 1.6rem; }
.mini-tela__etiqueta { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; background: #8A3CF2; color: #fff; padding: 2px 7px; border-radius: 3px; }

/* ------------------------------ simulador ------------------------------ */
.simulador { background: radial-gradient(80% 50% at 50% 0%, #170a33 0%, var(--fundo) 70%) !important; }
.sim { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.sim__cena {
  --cor: #8A3CF2;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; min-height: 560px;
  border: 1px solid var(--linha-forte); background: #0b0716;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.sim__fotos { position: absolute; inset: -20px; z-index: -1; translate: var(--fx, 0px) var(--fy, 0px); transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
.sim__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.sim__foto.ativa { opacity: 1; }
.sim__fotos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 3, 15, .1) 0%, rgba(7, 3, 15, .15) 55%, rgba(7, 3, 15, .55) 100%); }
.sim__aviso { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: rgba(7, 3, 15, .6); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .15); }
.sim__aparelho {
  position: absolute; left: 50%; bottom: 7%; z-index: 1;
  translate: calc(-50% + var(--ax, 0px)) var(--ay, 0px);
  transition: translate .6s cubic-bezier(.2, .7, .2, 1), width .6s cubic-bezier(.2, .7, .2, 1), bottom .6s cubic-bezier(.2, .7, .2, 1);
  width: 25%; max-width: 190px;
}
.sim__moldura {
  position: relative; border-radius: 16px; padding: 10px 10px 46px;
  background: linear-gradient(160deg, #2c2936 0%, #0b0a10 45%, #17151e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 50px -10px rgba(0, 0, 0, .7), 0 0 60px -10px color-mix(in srgb, var(--cor) 60%, transparent);
  transition: padding .6s ease, border-radius .6s ease;
}
.sim__tela {
  position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 9 / 16; background: #000;
  --cor-cl: color-mix(in srgb, var(--cor) 55%, #fff);
  --cor-esc: color-mix(in srgb, var(--cor) 45%, #000);
}
.sim__queixo { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: grid; place-items: center; }
.sim__queixo::after { content: ""; width: 26px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.sim__pe { width: 46%; height: 12px; margin: 0 auto; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #1c1a23, #3a3646 50%, #1c1a23); }
.sim__sombra { position: absolute; left: -15%; right: -15%; bottom: -14px; height: 26px; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); transition: opacity .4s ease; }
.sim__cena[data-formato="parede"] .sim__aparelho { width: 58%; max-width: 470px; bottom: 34%; }
.sim__cena[data-formato="parede"] .sim__moldura { padding: 8px; border-radius: 12px; }
.sim__cena[data-formato="parede"] .sim__tela { aspect-ratio: 16 / 9; }
.sim__cena[data-formato="parede"] .sim__queixo, .sim__cena[data-formato="parede"] .sim__pe { display: none; }
.sim__cena[data-formato="parede"] .sim__sombra { opacity: 0; }

.sslide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: .5em; padding: 8%; font-size: clamp(10px, 1.25vw, 15px);
  background: linear-gradient(165deg, var(--cor-esc) 0%, #08040f 100%);
  opacity: 0; scale: 1.05; transition: opacity .6s ease, scale 1s cubic-bezier(.2, .7, .2, 1);
}
.sslide.ativo { opacity: 1; scale: 1; }
.sim__cena[data-formato="parede"] .sslide { font-size: clamp(9px, 1.05vw, 14px); }
.sslide__logo { width: 5.4em; height: 5.4em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--cor-cl), var(--cor)); box-shadow: 0 0 30px color-mix(in srgb, var(--cor) 70%, transparent); overflow: hidden; }
.sslide__logo svg { width: 64%; height: 64%; fill: #fff; }
.sslide__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 12%; }
.sslide__logo span { font-weight: 700; font-size: 2.3em; color: #fff; }
.sslide__nome { font-weight: 700; font-size: 2em; line-height: 1.02; letter-spacing: -.03em; word-break: break-word; }
.sslide__sub { font-size: 1em; color: rgba(255, 255, 255, .78); }
.sslide__etq { font-size: .72em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .35em .8em; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.sslide__titulo { font-weight: 700; font-size: 2.6em; line-height: 1; letter-spacing: -.035em; }
.sslide--cor { background: linear-gradient(160deg, var(--cor-cl) -20%, var(--cor) 40%, var(--cor-esc) 100%); }
.sslide--cor .sslide__etq { background: #fff; color: var(--cor-esc); }
.sslide__ico { width: 3em; height: 3em; border-radius: 1em; display: grid; place-items: center; background: color-mix(in srgb, var(--cor) 35%, transparent); color: var(--cor-cl); }
.sslide__ico .ico { width: 1.6em; height: 1.6em; }
.sslide__senha { font-weight: 700; font-size: 4.2em; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sslide__barra { width: 80%; height: .8em; border-radius: 1em; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sslide__barra i { display: block; height: 100%; width: 87%; background: linear-gradient(90deg, var(--cor-cl), #4ADE80); border-radius: inherit; transform-origin: left; }
.sslide.ativo .sslide__barra i { animation: progresso 2.6s cubic-bezier(.2, .7, .2, 1) both; }
.sslide__marca-peq { position: absolute; bottom: 5%; left: 0; right: 0; font-size: .7em; font-weight: 600; opacity: .6; letter-spacing: .06em; }

.sim__painel { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem; border-radius: 26px; background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--linha); }
.campo { display: grid; gap: .55rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo__rotulo { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); padding: 0; }
.campo input[type="text"] {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linha-forte); color: var(--texto);
  font-size: 1rem; font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease;
}
.campo input[type="text"]::placeholder { color: var(--texto-3); font-weight: 400; }
.campo input[type="text"]:focus { outline: none; border-color: var(--roxo-claro); box-shadow: 0 0 0 4px rgba(138, 60, 242, .25); }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.chip, .alternar button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .5rem .6rem;
  border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); color: var(--texto-2);
  font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover, .alternar button:hover { border-color: var(--linha-forte); color: var(--texto); }
.chip[aria-checked="true"], .alternar button[aria-checked="true"] { background: rgba(138, 60, 242, .22); border-color: var(--roxo); color: #fff; box-shadow: inset 0 0 0 1px rgba(164, 92, 255, .4); }
.campo-duplo { display: grid; gap: 1.1rem; }
.alternar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cores { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-height: 46px; }
.cores button { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid transparent; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); cursor: pointer; transition: scale .2s ease; }
.cores button:hover { scale: 1.1; }
.cores button[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--c), inset 0 0 0 2px rgba(0, 0, 0, .25); }
.logo-up {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .7rem 1rem;
  border-radius: 14px; border: 1px dashed var(--linha-forte); color: var(--texto-2); font-weight: 500; font-size: .92rem; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.logo-up:hover, .logo-up:focus-within { border-color: var(--roxo-claro); background: rgba(138, 60, 242, .1); color: var(--texto); }
.logo-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.logo-up small { font-weight: 400; color: var(--texto-3); }
.sim__nota { font-size: .78rem; color: var(--texto-3); text-align: center; margin-top: -.4rem; }

/* ------------------------------ cartaz x tela ------------------------------ */
.versus__grade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "texto cortina" "lista cortina"; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.versus__texto { grid-area: texto; align-self: end; }
.versus .cortina { grid-area: cortina; }
.versus .vantagens { grid-area: lista; align-self: start; }
.vantagens { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.vantagens li { display: flex; gap: 1rem; align-items: flex-start; }
.vantagens__ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(138, 60, 242, .15); border: 1px solid var(--linha-forte); color: var(--roxo-claro); }
.vantagens strong { font-size: 1.02rem; font-weight: 600; }
.vantagens p { color: var(--texto-2); font-size: .95rem; margin-top: .15rem; }
.cortina {
  position: relative; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: #d9d3c8; border: 1px solid var(--linha-forte); user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.cortina__lado { position: absolute; inset: 0; display: grid; place-items: center; padding: 10%; }
.cortina__lado--papel { background: radial-gradient(120% 80% at 30% 20%, #e9e4da 0%, #cfc8bb 70%, #bdb5a6 100%); }
.cortina__lado--tela { background: radial-gradient(120% 80% at 70% 20%, #2a2140 0%, #120c22 70%, #09060f 100%); clip-path: inset(0 0 0 var(--pos)); }
.cartaz {
  position: relative; width: 72%; aspect-ratio: 3 / 4; padding: 10% 9%; background: #f6efe0; color: #4a3f36;
  box-shadow: 0 18px 30px -12px rgba(60, 40, 20, .45); rotate: -2.2deg; display: flex; flex-direction: column; gap: .6rem;
  filter: saturate(.55) sepia(.18);
}
.cartaz__fita { position: absolute; top: -12px; width: 80px; height: 26px; background: rgba(240, 225, 170, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.cartaz__fita--e { left: -18px; rotate: -32deg; }
.cartaz__fita--d { right: -18px; rotate: 28deg; }
.cartaz__etiqueta { align-self: flex-start; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; background: #c4554a; color: #fbe9e2; padding: .25rem .6rem; }
.cartaz__titulo { font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.05; color: #6a5a4c; }
/* a mesma foto da tela, impressa e desbotada: a comparação fica justa */
.cartaz__foto { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: 50% 45%; filter: sepia(.5) saturate(.5) contrast(.82) brightness(1.08); opacity: .85; mix-blend-mode: multiply; }
.cartaz__preco { margin-top: auto; font-weight: 600; font-size: .92rem; color: #8a6f5c; text-decoration: line-through; text-decoration-color: #c4554a; text-decoration-thickness: 2px; }
.cartaz__mancha { position: absolute; right: 12%; top: 38%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(160, 130, 80, .25), transparent 70%); }
.tela-parede { width: 72%; aspect-ratio: 3 / 4; padding: 8px; border-radius: 14px; background: #0b0a10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -15px rgba(0, 0, 0, .8), 0 0 80px rgba(138, 60, 242, .45); }
.tela-parede__vidro { position: relative; overflow: hidden; height: 100%; border-radius: 8px; background: #0b0418; container-type: inline-size; }
.tp { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.tp.ativo { opacity: 1; }
.tp img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tp.ativo img { animation: kenburns 3.4s ease-out both; }
.tp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 4, 30, .7) 0%, transparent 30%, transparent 48%, rgba(10, 4, 30, .9) 100%); }
.tp__etq, .tp__titulo { position: absolute; z-index: 1; right: 7cqi; text-align: right; }
.tp__etq { bottom: 30cqi; font-size: 4.6cqi; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 1.2cqi 3cqi; border-radius: 99px; background: #8A3CF2; }
.tp__titulo { bottom: 9cqi; left: 7cqi; font-size: 11cqi; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.tp.ativo .tp__etq, .tp.ativo .tp__titulo { animation: sobe-slide .7s cubic-bezier(.2, .8, .2, 1) backwards .15s; }
.tp.ativo .tp__titulo { animation-delay: .25s; }
.tela-parede__barras { position: absolute; z-index: 2; top: 4cqi; left: 6cqi; right: 6cqi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.tela-parede__barras i { height: 1.2cqi; min-height: 3px; border-radius: 4px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.tela-parede__barras i::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: left; scale: 0 1; }
.tela-parede__barras i.cheia::after { scale: 1 1; }
.tela-parede__barras i.corre::after { animation: barra var(--dur, 2.8s) linear forwards; }
.tela-parede__etiqueta { position: absolute; z-index: 2; right: 6cqi; top: 9cqi; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 4cqi; background: rgba(10, 4, 30, .55); backdrop-filter: blur(6px); padding: 1.4cqi 3cqi; border-radius: 999px; }
.ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; animation: pulso 2s ease-out infinite; }
.tela-parede__data { position: absolute; z-index: 2; right: 7cqi; bottom: 3.5cqi; font-size: 3.6cqi; font-weight: 500; color: #E7D9FF; }
.cortina__rotulo { position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: rgba(60, 45, 30, .7); color: #f6efe0; }
.cortina__rotulo--d { left: auto; right: 1rem; background: rgba(138, 60, 242, .75); color: #fff; }
.cortina__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 18px rgba(164, 92, 255, .9); pointer-events: none; z-index: 2; }
.cortina__pegador { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--roxo-medio); box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 6px rgba(255, 255, 255, .2); }
.cortina__pegador .ico { width: 22px; height: 22px; stroke-width: 2.6; }
.cortina__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.cortina:focus-within .cortina__pegador { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 6px var(--roxo-claro); }

/* ------------------------------ como funciona ------------------------------ */
.passos { background: var(--fundo-2) !important; border-block: 1px solid var(--linha); }
.passos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.passos__lista::before, .passos__lista::after { content: ""; position: absolute; top: 31px; left: 10%; right: 10%; height: 2px; border-radius: 2px; }
.passos__lista::before { background: var(--linha-forte); }
.passos__lista::after { background: var(--degrade); transform-origin: left; scale: var(--avanco, 1) 1; box-shadow: 0 0 12px rgba(164, 92, 255, .8); }
.passo { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0 .3rem; }
.passo__num { display: none; }
.passo__ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--cartao-2); border: 1px solid var(--linha-forte); color: var(--roxo-claro); box-shadow: 0 0 0 8px var(--fundo-2); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.passo__ico .ico { width: 26px; height: 26px; }
.passo.aceso .passo__ico { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: 0 0 0 8px var(--fundo-2), 0 10px 30px rgba(138, 60, 242, .5); }
.passo h3 { font-size: 1.04rem; margin-top: .6rem; }
.passo p { font-size: .9rem; color: var(--texto-2); }

/* ------------------------------ feedbacks ------------------------------
   Cartões no desenho dos stories deles: roxo vivo, selo do cliente
   colado no canto como adesivo, cinco estrelas, aspas grandes. */
.feedbacks { overflow: hidden; background: radial-gradient(70% 60% at 50% 30%, #1b0a40 0%, var(--fundo) 70%) !important; }
.feedbacks__fundo { position: absolute; z-index: -1; top: 4%; left: -10%; margin: 0; white-space: nowrap; font-size: clamp(7rem, 17vw, 16rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(181, 131, 255, .1); pointer-events: none; }
.fb-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; padding-top: 2.5rem; }
.fb {
  position: relative; margin: 0; padding: 3rem 1.6rem 1.6rem; border-radius: 24px; color: #fff;
  background: linear-gradient(160deg, #B347F5 0%, #8A2BE2 45%, #6418C9 100%);
  box-shadow: 0 40px 70px -30px rgba(138, 43, 226, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fb::before { content: "\201C"; position: absolute; left: 1.2rem; top: .6rem; font-size: 4.4rem; line-height: 1; font-weight: 700; opacity: .5; }
.fb--meio { margin-top: 3.5rem; }
.fb__selo { position: absolute; top: -40px; right: 18px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; rotate: 8deg; box-shadow: 0 12px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .25); transition: rotate .4s cubic-bezier(.3, 1.5, .5, 1); }
.fb:hover .fb__selo { rotate: -4deg; }
.fb__estrelas { display: flex; gap: .2rem; margin: .4rem 0 .9rem; }
.fb__estrelas .ico { width: 18px; height: 18px; fill: #fff; stroke: none; }
.fb blockquote { margin: 0; font-size: .96rem; line-height: 1.6; }
.fb figcaption { margin-top: 1.2rem; display: grid; }
.fb figcaption strong { font-size: 1.05rem; font-weight: 600; }
.fb figcaption span { font-size: .8rem; opacity: .82; }
.feedbacks__mais { text-align: center; margin-top: 2.5rem; }
.feedbacks__mais a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--roxo-claro); text-decoration: none; }
.feedbacks__mais a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------ sobre ------------------------------ */
.sobre__grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.sobre__arte { position: relative; isolation: isolate; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; display: grid; place-items: center; }
.sobre__fita { position: absolute; z-index: -1; left: -34%; top: 38%; width: 128%; max-width: none; height: auto; opacity: .75; }
.sobre__circulo { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1d0948 0%, #100028 60%, #0a001c 100%); box-shadow: 0 0 0 1px var(--linha-forte), 0 40px 100px -20px rgba(138, 60, 242, .6), inset 0 0 60px rgba(138, 60, 242, .25); }
.sobre__coroa3d { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sobre__coroa3d img { width: 96%; max-width: none; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 40px rgba(164, 92, 255, .35)); animation: flutua-rei 7s ease-in-out infinite alternate; }
.sobre__orbita { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(181, 131, 255, .25); animation: orbita 60s linear infinite; }
.sobre__orbita--2 { inset: 7%; border-style: solid; border-color: rgba(181, 131, 255, .1); animation-duration: 90s; animation-direction: reverse; }
.sobre__orbita--1::after { content: ""; position: absolute; top: 12%; left: 12%; width: 12px; height: 12px; border-radius: 2px; background: var(--roxo-claro); box-shadow: 0 0 16px var(--roxo); }
@keyframes orbita { to { rotate: 360deg; } }
.sobre__texto > p:not(.olho) { margin-top: 1.1rem; color: var(--texto-2); font-size: 1.02rem; }
.sobre__texto { position: relative; z-index: 1; }
.sobre__texto h2 { margin-bottom: .4rem; }
.sobre__texto .sobre__citacao { font-size: 1.12rem; color: var(--texto); font-weight: 500; padding-left: 1rem; border-left: 3px solid #8A3CF2; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 2rem 0 0; }
.numeros div { padding: 1.1rem 1rem; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.numeros dt { font-weight: 700; font-size: 1.35rem; background: linear-gradient(100deg, #DCCBFF, #A45CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeros dd { margin: .3rem 0 0; font-size: .82rem; color: var(--texto-2); line-height: 1.4; }

/* ------------------------------ contato ------------------------------ */
.contato { overflow: hidden; text-align: center; background: radial-gradient(70% 70% at 50% 100%, #2a0d63 0%, #12062b 45%, var(--fundo) 80%) !important; }
.contato__fundo { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.contato__fita { position: absolute; left: -10%; bottom: -6%; width: min(80vw, 1100px); max-width: none; height: auto; opacity: .45; }
.contato__coroa { width: min(90vw, 1000px); max-width: none; height: auto; opacity: .16; filter: blur(1px); }
.contato__wrap { display: flex; flex-direction: column; align-items: center; }
.contato h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); max-width: 900px; }
.contato__cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 1rem; margin-top: 2.5rem; justify-content: center; width: 100%; }
.cartao-zap {
  display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 20px; text-decoration: none; text-align: left;
  background: var(--degrade); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 20px 50px -15px rgba(138, 60, 242, .7);
  transition: translate .25s ease, box-shadow .25s ease;
}
.cartao-zap:hover, .cartao-zap:focus-visible { translate: 0 -4px; box-shadow: 0 26px 60px -15px rgba(138, 60, 242, .9); }
.cartao-zap--sec { background: rgba(255, 255, 255, .04); border-color: var(--linha-forte); box-shadow: none; backdrop-filter: blur(6px); }
.cartao-zap--sec:hover, .cartao-zap--sec:focus-visible { background: rgba(138, 60, 242, .14); box-shadow: none; }
.cartao-zap__ico { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.cartao-zap__ico .ico { width: 26px; height: 26px; }
.cartao-zap__txt { display: grid; line-height: 1.25; flex: 1; }
.cartao-zap__txt small { font-size: .74rem; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.cartao-zap__txt strong { font-size: 1.2rem; font-weight: 600; }
.cartao-zap__txt span { font-size: .92rem; opacity: .9; font-variant-numeric: tabular-nums; }
.cartao-zap__seta { opacity: .8; transition: translate .25s ease; }
.cartao-zap:hover .cartao-zap__seta { translate: 4px 0; }
.contato__insta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.8rem; font-weight: 600; color: var(--texto-2); text-decoration: none; }
.contato__insta:hover { color: var(--texto); }

/* ------------------------------ rodapé ------------------------------ */
.rodape { border-top: 1px solid var(--linha); padding: 3rem 0 6rem; }
.rodape__wrap { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.rodape__frase { color: var(--texto-2); font-size: .92rem; }
.rodape__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.rodape__links a { text-decoration: none; color: var(--texto-2); font-size: .9rem; font-weight: 500; }
.rodape__links a:hover { color: var(--texto); }
.rodape__copy { font-size: .82rem; color: var(--texto-3); }
.assinatura { margin: .6rem 0 0; text-align: center; font-size: .7rem; letter-spacing: .04em; opacity: .75; color: var(--texto-2); }
.assinatura a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .2s ease; }
.assinatura a:hover { opacity: .7; }

/* ------------------------------ whatsapp flutuante ------------------------------ */
.zap-flutuante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(37, 211, 102, .4);
  transition: translate .25s ease, opacity .3s ease, scale .3s ease;
}
.zap-flutuante svg { width: 32px; height: 32px; }
.zap-flutuante:hover { translate: 0 -3px; }
.js .zap-flutuante:not(.mostra), .js .zap-flutuante.escondido { opacity: 0; scale: .6; pointer-events: none; }

/* ------------------------------ responsivo ------------------------------ */
@media (max-width: 1080px) {
  .menu { display: none; }
  .topo .btn--pequeno { margin-left: auto; }
  .produtos__grade { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .sim { grid-template-columns: 1fr; }
  /* a cena fica grudada no alto enquanto a pessoa mexe nos controles */
  .sim__cena { min-height: 0; aspect-ratio: 4 / 3.4; position: sticky; top: calc(var(--topo-alt) + .5rem); z-index: 2; }
  .passos__lista { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-inline: auto; }
  /* no celular a linha é um trecho por passo, do ícone até o próximo */
  .passos__lista::before, .passos__lista::after { display: none; }
  .passo:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: var(--linha-forte); }
  .passo.aceso:not(:last-child)::after { background: var(--degrade); box-shadow: 0 0 10px rgba(164, 92, 255, .7); }
  .passo:last-child { padding-bottom: 0; }
  .passo { text-align: left; align-items: flex-start; gap: 0 1.1rem; padding: 0 0 1.8rem; display: grid; grid-template-columns: 64px 1fr; }
  .passo__ico { grid-row: span 2; }
  .passo h3 { margin-top: .35rem; }
  .sobre__grade, .rei__grade { grid-template-columns: 1fr; }
  .rei__arte { max-width: 460px; width: 100%; margin-inline: auto; }
  .versus__grade { grid-template-columns: 1fr; grid-template-areas: "texto" "cortina" "lista"; row-gap: 2rem; }
  .versus .vantagens { margin-top: 0; }
  .cortina { max-width: 520px; margin-inline: auto; }
  .sobre__arte { max-width: 340px; }
  /* feedbacks viram trilho de arrastar */
  .fb-lista { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3rem 1.25rem 1.5rem; margin: 0 -1.25rem; scrollbar-width: none; }
  .fb-lista::-webkit-scrollbar { display: none; }
  .fb { flex: 0 0 min(84%, 380px); scroll-snap-align: center; }
  .fb--meio { margin-top: 0; }
}
@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero__wrap { grid-template-columns: 1fr; gap: 1rem; }
  .hero__palco { --totem-h: 430px; margin-top: .5rem; }
  .totem { --d: 26px; --bh: 14px; }
  .tela { inset: 9px 9px calc(var(--h) * .17) 9px; }
  .tocando { top: 6%; left: -2%; padding: .55rem .7rem; }
  .tocando__txt strong { min-width: 0; font-size: .82rem; }
  .etiqueta-3d { display: none; }
}
@media (max-width: 560px) {
  :root { --topo-alt: 64px; }
  body { font-size: .97rem; }
  .wrap, .hero__wrap, .topo__wrap { width: calc(100% - 2rem); }
  .marca__nome { font-size: 1.3rem; }
  .marca__coroa { width: 40px; height: 21px; }
  .topo .btn--pequeno span { display: none; }
  .topo .btn--pequeno { width: 44px; min-height: 44px; padding: 0; }
  .colchetes { --c: .18em; }
  .hero__acoes .btn { width: 100%; }
  .hero__prova { font-size: .82rem; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim__painel { padding: 1.2rem; }
  .sim__cena { aspect-ratio: 4 / 3.5; border-radius: 20px; }
  .sim__aparelho { width: 29%; bottom: 5%; }
  .sim__aviso { top: .7rem; left: .7rem; font-size: .62rem; }
  .sim__cena[data-formato="parede"] .sim__aparelho { width: 78%; bottom: 30%; }
  .numeros { grid-template-columns: 1fr; }
  .numeros div { display: flex; align-items: baseline; gap: .8rem; }
  .numeros dd { margin: 0; }
  .contato__cartoes { grid-template-columns: 1fr; }
  .cortina { aspect-ratio: 4 / 5.2; }
  .rei__selo { left: 1.4rem; bottom: 1.4rem; }
}

/* ------------------------------ menos movimento ------------------------------
   Tudo para; nada fica escondido. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .js .abertura, html.cursor-on .cursor { display: none; }
  .faixa__trilho { animation: none; flex-wrap: wrap; width: auto; }
  .faixa__lista[aria-hidden="true"] { display: none; }
  .faixa__lista { flex-wrap: wrap; justify-content: center; gap: .6rem 0; }
  .js .pinta mark { background-size: 100% 100%; }
  .js .zap-flutuante:not(.mostra) { opacity: 1; scale: 1; pointer-events: auto; }
}