@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("fonts/michroma-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #07070A; --surface: #0E0F14; --surface-2: #14161D; --text: #F3F3F5; --muted: #9A9CA8; --line: rgba(255,255,255,.08);
  --accent: #E51C24; --accent-glow: rgba(229,28,36,.35); --gold: #E9B872; --ok: #3DDC97;
  --sans: "Inter Tight", Inter, system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1); --largura: min(1240px, calc(100% - clamp(40px, 8vw, 120px)));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--gold); }
h2 { font-size: clamp(40px, 5vw, 68px); }
.pular { position: absolute; top: -5rem; left: 1rem; z-index: 50; padding: .7rem 1rem; background: var(--accent); color: #fff; }
.pular:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.botao { display: inline-flex; min-height: 52px; align-items: center; gap: 12px; padding: 0 24px; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 10px 40px -10px var(--accent-glow); transition: transform .25s var(--ease), box-shadow .25s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px var(--accent-glow); }
.botao--pequeno { min-height: 42px; padding: 0 18px; font-size: 14px; }
.botao--grande { min-height: 60px; padding: 0 32px; font-size: 17px; }
.link { padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.35); color: var(--text); font-weight: 500; }
.link:hover { border-color: var(--gold); color: var(--gold); }
.cabeca { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 40px; margin-bottom: 36px; }
.cabeca p { margin: 0; color: var(--muted); font-size: 17px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(20px, calc((100% - 1240px) / 2)); background: rgba(7,7,10,.8); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca img { width: 30px; height: 30px; border-radius: 8px; }
.marca b { color: #fff; font-family: "Michroma", var(--sans); font-size: 16px; font-weight: 400; letter-spacing: .18em; line-height: 1; }
.rodape .marca img { width: 24px; height: 24px; }
.rodape .marca b { font-size: 13px; }
.nav { display: flex; gap: 28px; color: var(--muted); font-size: 14px; }
.nav a:hover { color: var(--text); }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 80px); width: var(--largura); min-height: calc(100svh - 72px); margin: 0 auto; padding: 50px 0 80px; }
.hero::before { position: absolute; inset: -10% -30% auto 30%; z-index: -1; height: 90%; background: radial-gradient(ellipse at 60% 40%, rgba(229,28,36,.18), transparent 60%), radial-gradient(ellipse at 90% 80%, rgba(233,184,114,.1), transparent 55%); content: ""; filter: blur(10px); }
.selo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 13px; }
.selo span { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.hero h1 { font-size: clamp(50px, 6.4vw, 96px); }
.hero__texto { max-width: 520px; margin: 26px 0 34px; color: var(--muted); font-size: 18px; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.hero__pilha { position: relative; aspect-ratio: 1.15; perspective: 1400px; }
.pilha__tela { position: absolute; top: 50%; left: 50%; width: 88%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: var(--surface); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transform-style: preserve-3d; transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s; }
.pilha__tela img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pilha__tela figcaption { position: absolute; bottom: 12px; left: 12px; padding: 5px 12px; border-radius: 99px; background: rgba(7,7,10,.8); font-size: 12px; font-weight: 600; }
.pilha__tela[data-pos="0"] { z-index: 5; transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, -8deg)); }
.pilha__tela[data-pos="1"] { z-index: 4; opacity: .75; filter: brightness(.6); transform: translate(-40%, -62%) rotateY(-8deg) scale(.9) translateZ(-120px); }
.pilha__tela[data-pos="2"] { z-index: 3; opacity: .45; filter: brightness(.45); transform: translate(-30%, -72%) rotateY(-8deg) scale(.8) translateZ(-240px); }
.pilha__tela[data-pos="3"], .pilha__tela[data-pos="4"] { z-index: 1; opacity: 0; transform: translate(-60%, -40%) scale(.85); }

/* Projetos */
.projetos { width: var(--largura); margin: 0 auto; padding: clamp(70px, 9vw, 120px) 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtro { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; color: var(--muted); font-size: 14px; transition: all .2s; }
.filtro:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.filtro[aria-pressed="true"] { border-color: var(--gold); background: rgba(233,184,114,.12); color: var(--gold); }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cartao { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: transform .4s var(--ease), border-color .3s; }
.cartao[hidden] { display: none; }
.cartao:hover, .cartao.tocando { transform: translateY(-4px); border-color: rgba(233,184,114,.35); }
.cartao__tela { position: relative; aspect-ratio: 16 / 10.6; overflow: hidden; background: #000; }
.cartao__barra { position: absolute; top: 0; right: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(20,22,29,.92); border-bottom: 1px solid var(--line); }
.cartao__barra i { width: 9px; height: 9px; border-radius: 50%; background: #2c2f3a; }
.cartao__barra span { margin-left: 10px; padding: 2px 12px; border-radius: 99px; background: #0b0c10; color: var(--muted); font-size: 11px; }
.cartao__tela img, .cartao__tela video { position: absolute; inset: 30px 0 0; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top; }
.cartao__tela video { opacity: 0; transition: opacity .4s; }
.cartao.tocando video { opacity: 1; }
.cartao__corpo { display: grid; gap: 10px; padding: 22px 24px 24px; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cartao__segmento { color: var(--muted); font-size: 13px; }
.cartao__tipo { padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cartao__tipo--modelo { border: 1px solid var(--line); color: var(--muted); }
.cartao__tipo--cliente { background: rgba(61,220,151,.12); color: var(--ok); }
.cartao h3 { font-size: 30px; }
.cartao p { margin: 0; color: #c9cad3; font-size: 15px; }
.cartao__recursos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.cartao__recursos li { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.cartao__abrir { margin-top: 6px; color: var(--gold); font-weight: 600; font-size: 14px; }

/* Cartão ímpar no fim: vira destaque de largura total */
@media (min-width: 961px) {
  .grade .cartao:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; align-items: center; }
  .grade .cartao:last-child:nth-child(odd) .cartao__corpo { padding: 34px 38px; }
  .grade .cartao:last-child:nth-child(odd) h3 { font-size: 40px; }
}

/* Sob medida */
.sob-medida { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; margin-top: 26px; padding: 24px 28px; border: 1px solid rgba(233,184,114,.3); border-radius: 20px; background: linear-gradient(120deg, rgba(233,184,114,.1), rgba(229,28,36,.06)); }
.sob-medida strong { font-family: var(--serif); font-size: 28px; font-style: italic; font-weight: 400; color: var(--gold); }
.sob-medida span { color: #d4d5dc; font-size: 15px; }
@media (max-width: 760px) { .sob-medida { grid-template-columns: 1fr; } }

/* Padrão */
.padrao { width: var(--largura); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.padrao__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 44px 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; counter-reset: item; }
.padrao__lista li { display: grid; gap: 8px; padding: 30px 28px; background: var(--bg); counter-increment: item; }
.padrao__lista li::before { color: var(--accent); font: 600 13px var(--sans); content: "0" counter(item); }
.padrao__lista strong { font-size: 20px; }
.padrao__lista span { color: var(--muted); font-size: 15px; }

/* Como funciona */
.como { width: var(--largura); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; }
.como__passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.como__passos li { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.como__passos span { color: var(--gold); font-family: var(--serif); font-size: 56px; font-style: italic; line-height: 1; }
.como__passos h3 { margin: 16px 0 10px; font-size: 24px; }
.como__passos p { margin: 0; color: var(--muted); font-size: 15px; }

/* Incluso */
.incluso { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; width: var(--largura); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.incluso__copy p { margin: 20px 0 0; color: var(--muted); font-size: 17px; }
.incluso__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.incluso__lista li { display: grid; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.incluso__lista strong { font-size: 18px; }
.incluso__lista span { color: var(--muted); font-size: 14px; }

/* Dúvidas */
.duvidas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; width: var(--largura); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; }
.duvidas__lista { border-top: 1px solid var(--line); }
.duvidas details { border-bottom: 1px solid var(--line); }
.duvidas summary { position: relative; padding: 22px 40px 22px 0; cursor: pointer; font-size: 18px; font-weight: 500; list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { position: absolute; right: 6px; color: var(--gold); content: "+"; font-size: 22px; line-height: 1; }
.duvidas details[open] summary::after { content: "−"; }
.duvidas details p { margin: 0 0 22px; color: var(--muted); }

/* Final */
.final { position: relative; display: grid; justify-items: center; gap: 22px; margin: 40px auto 0; padding: clamp(80px, 11vw, 150px) 20px; overflow: hidden; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 50% 120%, rgba(229,28,36,.28), transparent 60%); }
.final h2 { max-width: 820px; font-size: clamp(42px, 6vw, 84px); }
.final p { max-width: 520px; margin: 0; color: var(--muted); font-size: 18px; }
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px max(20px, calc((100% - 1240px) / 2)); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.rodape p { margin: 0; }
.final__canais { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.final__canais a, .form__lgpd a, .form__ok a { color: var(--gold); border-bottom: 1px solid rgba(233,184,114,.4); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 20px; }
.rodape__links a:hover { color: var(--text); }
.fixo { display: none; }

/* Sistemas e automações */
.sistemas { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; width: var(--largura); margin: 0 auto; padding: clamp(70px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.sistemas__copy p:not(.selo) { margin: 22px 0 30px; color: var(--muted); font-size: 17px; }
.sistemas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sistemas__lista li { display: grid; align-content: start; gap: 8px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.sistemas__icone { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(229,28,36,.12); color: var(--accent); font-size: 20px; }
.sistemas__lista strong { font-size: 18px; }
.sistemas__lista li > span:last-child { color: var(--muted); font-size: 14px; }

/* Janela de contato */
.janela { width: min(520px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 40px 120px -20px rgba(0,0,0,.9); }
.janela::backdrop { background: rgba(4,4,6,.72); backdrop-filter: blur(6px); }
.janela[open] { animation: surgir .35s var(--ease); }
@keyframes surgir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.form { position: relative; display: grid; padding: 34px 30px 28px; }
.form [data-etapa-form] { display: grid; gap: 14px; }
.form [data-etapa-form][hidden], .form__ok[hidden] { display: none; }
.form h2 { font-size: clamp(32px, 5vw, 42px); }
.form__apoio { margin: 0 0 6px; color: var(--muted); }
.form label { display: grid; gap: 6px; color: #c9cad3; font-size: 13px; font-weight: 500; }
.form label > span { color: var(--muted); font-weight: 400; }
.form input:not([type="checkbox"]), .form select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: var(--bg); color: var(--text); font: 16px var(--sans); }
.form input:focus, .form select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(233,184,114,.18); }
.form__interesse { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.form__interesse legend { width: 100%; margin-bottom: 8px; color: #c9cad3; font-size: 13px; font-weight: 500; }
.form__interesse label { display: inline-flex; cursor: pointer; }
.form__interesse input { position: absolute; opacity: 0; }
.form__interesse label > span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: var(--text); font-size: 14px; }
.form__interesse input:checked + span { border-color: var(--gold); background: rgba(233,184,114,.14); color: var(--gold); }
.form__interesse input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form__isca { position: absolute; left: -9999px; }
.form__erro { min-height: 1.2em; margin: 0; color: #ff7a7f; font-size: 14px; }
.form .botao { justify-content: center; border: 0; cursor: pointer; font-family: var(--sans); }
.form .botao:disabled { opacity: .6; cursor: wait; }
.form__lgpd { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.janela__fechar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; font-size: 22px; line-height: 1; }
.form__ok { display: grid; justify-items: center; gap: 12px; padding: 20px 0; text-align: center; }
.form__ok p { margin: 0 0 8px; color: var(--muted); }
.form__check { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: rgba(61,220,151,.14); color: var(--ok); font-size: 30px; }

@media (max-width: 960px) {
  .sistemas { grid-template-columns: 1fr; }
  .nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero__pilha { max-width: 560px; }
  .grade { grid-template-columns: 1fr; }
  .padrao__lista { grid-template-columns: 1fr 1fr; }
  .incluso, .duvidas { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  body { padding-bottom: 76px; }
  .topo .botao { display: none; }
  .hero h1 { font-size: clamp(44px, 12vw, 58px); }
  .hero__texto { font-size: 16px; }
  .cabeca { grid-template-columns: 1fr; gap: 14px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: 0 0 auto; }
  .padrao__lista, .como__passos, .incluso__lista, .sistemas__lista { grid-template-columns: 1fr; }
  .form { padding: 30px 20px 22px; }
  .cartao h3 { font-size: 26px; }
  .fixo { position: fixed; right: 14px; bottom: 12px; left: 14px; z-index: 30; display: flex; min-height: 54px; align-items: center; justify-content: center; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 12px 40px -8px var(--accent-glow); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* ===== Veja o seu negócio aqui ===== */
.amostra { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); grid-template-areas: "controles janela" "fim janela"; column-gap: clamp(28px, 4vw, 60px); row-gap: 0; align-items: center; width: var(--largura); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.amostra__apoio { margin: 18px 0 26px; color: var(--muted); font-size: 17px; }
.amostra__campo { display: grid; gap: 8px; color: #c9cad3; font-size: 13px; font-weight: 500; }
.amostra__campo input { min-height: 56px; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: var(--surface); color: var(--text); font: 500 18px var(--sans); }
.amostra__campo input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(233,184,114,.18); }
.amostra__segmentos { margin: 20px 0 24px; padding: 0; border: 0; }
.amostra__segmentos legend { margin-bottom: 10px; color: #c9cad3; font-size: 13px; font-weight: 500; }
.amostra__segmentos div { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra__chip { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; transition: all .2s; }
.amostra__chip:hover { color: var(--text); }
.amostra__chip[aria-pressed="true"] { border-color: var(--gold); background: rgba(233,184,114,.12); color: var(--gold); }
.amostra .botao { border: 0; cursor: pointer; font-family: var(--sans); }
.amostra__nota { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.amostra__janela { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #000; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(233,184,114,.06); }
.amostra__janela .cartao__barra { position: relative; }
.amostra__palco { position: relative; overflow: hidden; }

/* Site desenhado em 1100 × 640 e reduzido por --k */
.site { position: absolute; top: 0; left: 0; width: 1100px; height: 640px; overflow: hidden; transform: scale(var(--k, .5)); transform-origin: top left; opacity: 0; transition: opacity .45s ease; font-family: var(--sans); }
.site.entrou { opacity: 1; }
.site__topo { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 78px; padding: 0 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.site__marca { max-width: 360px; overflow: hidden; font-size: 26px; white-space: nowrap; text-overflow: ellipsis; }
.site__topo nav { display: flex; gap: 30px; margin-left: auto; font-size: 14px; opacity: .8; }
.site__botao { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 99px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.site__botao--pequeno { min-height: 40px; padding: 0 18px; font-size: 13px; }
.site__hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; height: 562px; padding: 0 56px; }
.site__rotulo { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .2em; opacity: .8; }
.site h3 { margin: 0; font-weight: 400; line-height: .98; }
.site__nome { display: block; max-width: 560px; font-size: 76px; overflow-wrap: anywhere; }
.site h3 em { display: block; margin-top: 10px; font-size: 44px; font-style: italic; }
.site__sub { max-width: 470px; margin: 20px 0 26px; font-size: 17px; line-height: 1.6; opacity: .78; }
.site__acoes { display: flex; align-items: center; gap: 22px; }
.site__link { padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 600; }
.site__prova { margin: 26px 0 0; font-size: 13px; opacity: .75; }
.site__midia { position: relative; height: 470px; }
.site__midia img { width: 100%; height: 100%; object-fit: cover; }
.site__orbe { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b70, #E51C24 40%, #3a0507 75%); filter: blur(2px); box-shadow: 0 0 120px rgba(229,28,36,.45); }

.site--estetica { background: radial-gradient(ellipse at 80% 20%, #3b1b28, #150b10 60%); color: #f5e9e4; }
.site--estetica .site__marca, .site--estetica h3 { font-family: var(--serif); }
.site--estetica h3 em, .site--estetica .site__rotulo { color: #e9b0a0; }
.site--estetica .site__botao { background: #e9b0a0; color: #2a1219; }
.site--estetica .site__midia img { border-radius: 240px 240px 18px 18px; }

.site--barbearia { background: linear-gradient(90deg, #0b1511 45%, #10241c); color: #efece3; }
.site--barbearia .site__marca { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.site--barbearia h3 { font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.site--barbearia .site__nome { font-size: 70px; }
.site--barbearia h3 em { color: #ddc18e; text-transform: none; font-weight: 700; }
.site--barbearia .site__rotulo { color: #ddc18e; }
.site--barbearia .site__botao { background: #c4a574; color: #0e1915; border-radius: 2px; }
.site--barbearia .site__midia { margin-right: -56px; height: 562px; }
.site--barbearia .site__midia img { object-position: 70% center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }

.site--salao { background: linear-gradient(120deg, #faf6f0 50%, #efdcd2); color: #2e2526; }
.site--salao .site__topo { border-color: rgba(46,37,38,.12); }
.site--salao .site__marca, .site--salao h3 { font-family: var(--serif); }
.site--salao h3 em, .site--salao .site__rotulo { color: #a5645b; }
.site--salao .site__botao { background: #a5645b; color: #fff; border-radius: 4px; }
.site--salao .site__midia img { border-radius: 16px; }

.site--pet { background: #f5f2e9; color: #202820; }
.site--pet .site__topo { border-color: rgba(32,40,32,.12); }
.site--pet .site__marca, .site--pet h3 { font-family: var(--serif); }
.site--pet h3 em, .site--pet .site__rotulo { color: #52684e; }
.site--pet .site__botao { background: #202820; color: #f5f2e9; }
.site--pet .site__midia img { border-radius: 240px 240px 24px 24px; }

.site--padaria { background: radial-gradient(ellipse at 75% 50%, rgba(217,169,59,.22), transparent 55%), #0e0c09; color: #f7efe1; }
.site--padaria .site__marca { color: #f2cf72; font-family: var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.site--padaria h3 { font-family: var(--serif); }
.site--padaria h3 em, .site--padaria .site__rotulo { color: #d9a93b; }
.site--padaria .site__botao { background: #d9a93b; color: #0e0c09; }
.site--padaria .site__midia img { border: 2px solid rgba(217,169,59,.6); border-radius: 50%; aspect-ratio: 1; height: auto; box-shadow: 0 0 0 18px rgba(217,169,59,.08); }

.site--outro { background: #07070A; color: #F3F3F5; }
.site--outro h3 em, .site--outro .site__rotulo { color: #E9B872; }
.site--outro h3 em { font-family: var(--serif); }
.site--outro .site__nome { font-weight: 600; letter-spacing: -.04em; }
.site--outro .site__botao { background: #E51C24; color: #fff; }

.amostra__controles { grid-area: controles; align-self: end; }
.amostra__janela { grid-area: janela; }
.amostra__fim { grid-area: fim; align-self: start; }
.amostra__segmentos { margin-bottom: 20px !important; }
@media (max-width: 960px) { .amostra { grid-template-columns: 1fr; grid-template-areas: "controles" "janela" "fim"; row-gap: 24px; } }
@media (max-width: 640px) { .amostra__segmentos div { gap: 6px; } .amostra__chip { min-height: 40px; padding: 0 13px; } }