/* Páginas internas da Orbya (tudo menos a home), montadas como estão no .ai de 21/10/2026.
   Carrega depois do orbya.css e reaproveita os tokens, botões, cabeçalho, rodapé e pop-up dele.
   Prefixo e-: blocos das pranchetas escuras (Integração, Automação, Eletrônica, Aplicativos, Sistemas).
   Prefixo c-: blocos das pranchetas claras (Comércio, Sobre, Escritórios, Experiências, Totens, Indústria). */

:root {
  --noite: #1F0A41;
  --ametista: #7038AE;
  --verde: #78BA2C;       /* destaque em fundo claro: o lima some no branco */
  --violeta-2: #8243D3;
  --gradiente: linear-gradient(115deg, #1F0A41 0%, #3A1867 46%, #7038AE 100%);
}

.verde { color: var(--verde); }
.sub a[aria-current="page"] { background: var(--lavanda); font-weight: 700; }

/* olho com a barrinha lima, padrão das seções escuras do layout */
.e-olho { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.e-olho::before { content: ""; flex: none; width: 4px; height: 15px; border-radius: 2px; background: var(--lima); }
.e-titulo { margin: 14px 0 18px; font-size: clamp(26px, 2.5vw, 33px); font-stretch: var(--largo); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.e-txt { max-width: 34em; font-size: 16.5px; color: var(--roxo-medio); }
.e-acao { margin-top: 30px; }

/* botões que só existem nessas páginas */
.btn-contorno { background: #fff; color: var(--roxo); box-shadow: inset 0 0 0 2px var(--lima); }
.btn-contorno:hover { background: #F5FCE4; }
.btn-violeta { background: #7B4DE8; color: #fff; }
.btn-violeta:hover { background: #6A3BDA; }
.e-link { display: inline-flex; align-items: center; gap: .45em; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--lima); }
.e-link svg { width: 17px; height: 17px; transition: transform .2s; }
.e-link:hover svg { transform: translateX(3px); }
.e-link[data-pendente] svg { display: none; }

/* seções */
.e-sec { position: relative; isolation: isolate; overflow: clip; padding: 72px 0; }
.e-claro { background: #F7F5F9; }
.e-branco { background: #FBFAFE; }
.e-lavanda { background: #F2EEF8; }
.e-escuro { color: #fff; background: var(--gradiente); }
.e-escuro .e-txt { color: rgba(255, 255, 255, .86); }
.e-grade { display: grid; gap: 40px; align-items: center; }
.e-grade--estica { align-items: stretch; }
.e-grade--estica > .e-foto, .e-grade--estica > div:first-child { align-self: center; }
@media (min-width: 1100px) {
  .e-sec { padding: 88px 0; }
  .e-grade { grid-template-columns: var(--cols, 1fr 1fr); gap: 44px; }
}
/* triângulo lima no canto de baixo, como no fim das pranchetas */
.e-canto::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: clamp(56px, 7vw, 96px); aspect-ratio: 1; background: var(--lima); clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* capa */
.e-capa { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--topo-h) + 28px) 0 60px; color: #fff; background: var(--gradiente); }
.e-capa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 40%, rgba(130, 67, 211, .35), transparent 70%); }
.e-capa-grade { display: grid; gap: 40px; align-items: center; }
.e-capa .e-olho { color: var(--lima); }
.e-capa .e-olho::before { display: none; }
.e-capa h1 { margin: 14px 0 20px; font-size: clamp(32px, 3.6vw, 46px); font-stretch: var(--largo); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.e-capa-sub { max-width: 32em; font-size: clamp(16.5px, 1.4vw, 18.5px); color: rgba(255, 255, 255, .9); }
.e-capa-midia img { width: 100%; filter: drop-shadow(0 40px 50px rgba(10, 4, 24, .45)); }
@media (min-width: 1040px) {
  .e-capa { padding: calc(var(--topo-h) + 24px) 0 72px; }
  .e-capa-grade { grid-template-columns: var(--cols, 1fr 1.08fr); gap: 48px; }
}

/* fileira de ícones com legenda (capa e plataformas) */
.e-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 24px 16px; margin-top: 40px; }
.e-recursos li { display: grid; align-content: start; gap: 10px; font-size: 14.5px; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.e-recursos svg { width: 38px; height: 38px; color: var(--lima); }
@media (min-width: 760px) {
  .e-recursos { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 24px 14px; }
  .e-recursos li { font-size: 13.5px; }
}
.e-recursos--claro li { color: var(--roxo-medio); }
.e-recursos--claro svg { color: var(--roxo); }

/* lista de itens com ícone em quadrado */
.e-itens { display: grid; gap: 26px; }
.e-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.e-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--lavanda-2); color: var(--roxo); }
.e-ico svg { width: 26px; height: 26px; }
.e-ico--lima { background: #E3F5BE; }
.e-ico--roxo { background: var(--violeta-2); color: #fff; }
.e-ico--verde { background: #9EDC27; color: var(--roxo); }
.e-ico--nu { background: none; }
.e-ico--nu svg { width: 34px; height: 34px; }
.e-item h3 { margin-bottom: 4px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.e-item p { font-size: 14.5px; line-height: 1.5; color: var(--roxo-medio); }
.e-painel { padding: 28px 26px; border-radius: 18px; background: var(--lavanda-2); }

.e-foto img { width: 100%; }

/* foto com cartão sobreposto que passa da borda (fim da página de Sistemas) */
.e-foto-cartao { position: relative; }
.e-foto-cartao img { width: 100%; border-radius: 14px; }
.e-cartao { position: relative; margin: -32px 16px 0; padding: 20px 20px 22px; border: 1px solid rgba(193, 239, 77, .5); border-radius: 14px; background: rgba(30, 10, 60, .9); }
@supports (backdrop-filter: blur(1px)) { .e-cartao { background: rgba(30, 10, 60, .72); backdrop-filter: blur(10px); } }
.e-cartao svg { width: 34px; height: 34px; color: var(--lima); }
.e-cartao h3 { margin: 12px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.e-cartao p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
@media (min-width: 760px) {
  .e-foto-cartao { padding-right: 20%; }
  .e-cartao { position: absolute; top: 50%; right: 0; width: 36%; margin: 0; transform: translateY(-50%); }
}

/* cartões escuros com foto */
.e-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.e-cards--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.e-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: rgba(22, 6, 48, .45); }
.e-card img { width: 100%; }
.e-card-corpo { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.e-card h3 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.e-card p { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.e-card .e-link { margin-top: auto; padding-top: 4px; }
.e-cards--4 .e-card-corpo { padding: 14px 16px 18px; }
.e-cards--4 h3 { font-size: 15px; }
.e-checks { display: grid; gap: 7px; }
.e-checks li { display: flex; gap: 9px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
.e-checks svg { width: 16px; height: 16px; margin-top: 1px; color: var(--lima); }
.e-cards--4 .e-checks li { font-size: 13px; }

/* etapas com ícone e seta */
.e-passos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; margin-top: 34px; }
.e-passos li { position: relative; display: grid; align-content: start; gap: 12px; font-size: 14.5px; line-height: 1.35; color: var(--roxo-medio); }
.e-passos svg { width: 40px; height: 40px; color: var(--violeta-2); }
@media (min-width: 760px) {
  .e-passos { grid-template-columns: repeat(4, 1fr); }
  .e-passos li:not(:last-child)::after { content: "\2192"; position: absolute; top: 8px; right: -6px; font-size: 22px; color: var(--verde); }
}

/* processo em 4 etapas com círculo (Aplicativos) */
.e-processo { display: grid; gap: 30px; }
.e-processo li { position: relative; }
.e-circulo { display: grid; place-items: center; width: 76px; height: 76px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; }
.e-circulo svg { width: 34px; height: 34px; }
.e-processo .n { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--lima); }
.e-processo h3 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.e-processo p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
@media (min-width: 760px) {
  .e-processo { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .e-processo li:not(:last-child)::after { content: "\2192"; position: absolute; top: 24px; right: 4px; font-size: 24px; color: var(--lima); }
}

/* números */
.e-numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 20px clamp(18px, 3vw, 40px); margin-top: 34px; }
.e-numeros strong { display: block; font-size: clamp(28px, 2.7vw, 38px); font-stretch: var(--largo); font-weight: 700; line-height: 1; color: var(--verde); }
.e-numeros span { display: block; margin-top: 10px; font-size: 14px; color: var(--roxo-medio); }

/* cartão de chamada */
.e-cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 36px 30px; border-radius: 18px; }
.e-cta--escuro { color: #fff; background: linear-gradient(160deg, #3B1A67 0%, #6A35A8 100%); }
.e-cta--lavanda { color: var(--roxo); background: var(--lavanda-2); }
.e-cta-ico { width: 40px; height: 40px; }
.e-cta--escuro .e-cta-ico { color: var(--lima); }
.e-cta h3 { font-size: 23px; font-stretch: var(--largo); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.e-cta p { font-size: 15.5px; line-height: 1.5; opacity: .88; }
.e-cta .btn { width: 100%; margin-top: 8px; padding: 0 18px; font-size: 15px; }

/* mini colunas com ícone (setores da Eletrônica) */
.e-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 24px 22px; margin-top: 32px; }
.e-mini svg { width: 38px; height: 38px; color: var(--violeta-2); }
.e-mini h3 { margin: 12px 0 6px; font-size: 15.5px; font-weight: 700; }
.e-mini p { font-size: 14px; line-height: 1.5; color: var(--roxo-medio); }

/* lista com ícone lima (fim da Eletrônica) */
.e-lista-ico { display: grid; gap: 22px; }
.e-lista-ico li { display: flex; align-items: center; gap: 16px; font-size: 16px; }
.e-lista-ico svg { width: 32px; height: 32px; color: var(--lima); }

/* topo de seção em duas colunas e setores com foto (Sistemas) */
.e-topo2 { display: grid; gap: 8px 48px; margin-bottom: 40px; }
@media (min-width: 1040px) { .e-topo2 { grid-template-columns: 1.1fr 1fr; align-items: end; } .e-topo2 .e-txt { padding-bottom: 20px; } }
.e-setores3 { display: grid; gap: 36px; }
@media (min-width: 760px) { .e-setores3 { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.e-setor img { width: 100%; border-radius: 14px; }
.e-setor-cab { display: flex; gap: 16px; margin-top: 20px; font-size: 18px; font-weight: 700; }
.e-setor-cab .n { color: var(--verde); }
.e-setor p { margin: 10px 0 0 40px; font-size: 15px; line-height: 1.55; color: var(--roxo-medio); }
.e-setor .e-link { margin: 18px 0 0 40px; color: var(--roxo); }

/* ======================= páginas claras (prefixo c-) ======================= */
.c-olho { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.c-titulo { margin: 12px 0 16px; font-size: clamp(28px, 3vw, 40px); font-stretch: var(--largo); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.c-sub { margin-bottom: 10px; font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; line-height: 1.4; }
.c-txt { max-width: 60em; font-size: 16.5px; color: var(--roxo-medio); }
.c-txt + .c-txt { margin-top: 16px; }
.c-cab { margin-bottom: 36px; }
.c-sec { padding: 72px 0; }
.c-lavanda { background: var(--lavanda); }
.c-roxo { color: #fff; background: var(--roxo); }
.c-roxo .c-olho { color: var(--lima); }
.c-roxo .c-txt { color: rgba(255, 255, 255, .84); }
@media (min-width: 1040px) { .c-sec { padding: 88px 0; } }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-contorno-branco { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.btn-contorno-branco:hover { background: rgba(255, 255, 255, .1); }
.c-circuito { width: 180px; height: 24px; color: var(--roxo); }

/* capa branca (Comércio, Sobre, Totens) */
.c-capa { padding: calc(var(--topo-h) + 32px) 0 56px; }
.c-capa-grade { display: grid; gap: 36px; align-items: center; }
.c-capa h1 { margin: 14px 0 22px; font-size: clamp(36px, 4.6vw, 58px); font-stretch: var(--largo); font-weight: 700; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.c-capa-sub { max-width: 32em; font-size: clamp(16.5px, 1.4vw, 19px); color: var(--roxo-medio); }
.c-capa .botoes { margin-top: 30px; }
.c-capa-foto img { width: 100%; border-radius: var(--raio-g); }
@media (min-width: 1040px) { .c-capa-grade { grid-template-columns: var(--cols, 1fr 1.1fr); gap: 56px; } }
.c-atalhos3 { display: grid; margin-top: 44px; border-top: 1px solid var(--linha); }
.c-atalhos3 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--linha); font-size: 18px; font-weight: 600; text-decoration: none; }
.c-atalhos3 .seta-c { width: 34px; height: 34px; }
.c-atalhos3 .seta-c svg { width: 16px; height: 16px; }
@media (min-width: 760px) {
  .c-atalhos3 { grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 0; }
  .c-atalhos3 a { border-bottom: 2px solid var(--roxo); }
}
.c-capa-nota { max-width: 62em; margin-top: 28px; font-size: 16.5px; color: var(--roxo-medio); }
.c-barra-lima { display: block; width: min(100%, 520px); height: 6px; margin: 4px 0 28px; border-radius: 3px; background: var(--lima); }
.c-capa-faixa { display: grid; gap: 16px; margin-top: 40px; }
.c-capa-faixa > img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.c-cartao-roxo { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px; border-radius: 20px; color: #fff; background: var(--roxo); }
.c-cartao-roxo p { font-size: clamp(22px, 2vw, 28px); font-stretch: var(--largo); font-weight: 700; line-height: 1.25; }
.c-cartao-roxo .c-circuito { color: var(--lima); }
@media (max-width: 899px) { .c-capa-faixa > img { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .c-capa-faixa { grid-template-columns: 2.5fr 1fr; gap: 18px; } }

/* capa em bloco arredondado (Escritórios lilás; Experiências e Indústria roxo) */
.c-bloco-capa { padding: calc(var(--topo-h) + 12px) 0 24px; }
.c-bloco { display: grid; overflow: hidden; border-radius: var(--raio-g); }
.c-bloco-texto { padding: 40px 24px 36px; }
.c-bloco h1 { margin: 14px 0 20px; font-size: clamp(32px, 3.8vw, 48px); font-stretch: var(--largo); font-weight: 700; line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.c-bloco-texto > p:not(.c-olho) { max-width: 34em; font-size: 16.5px; }
.c-bloco-texto > p + p { margin-top: 14px; }
.c-bloco .botoes { margin-top: 32px; }
.c-bloco-foto { min-height: 260px; }
.c-bloco-foto img { width: 100%; height: 100%; object-fit: cover; }
.c-bloco--lavanda { background: var(--lavanda-2); }
.c-bloco--lavanda .c-bloco-texto > p:not(.c-olho) { color: var(--roxo-medio); }
.c-bloco--roxo { color: #fff; background: linear-gradient(100deg, #22104A 0%, #351866 55%, #4B2787 100%); }
.c-bloco--roxo .c-olho { color: var(--lima); }
.c-bloco--roxo .c-bloco-texto > p:not(.c-olho) { color: rgba(255, 255, 255, .88); }
@media (min-width: 900px) {
  .c-bloco { grid-template-columns: 1.05fr 1fr; min-height: 540px; }
  .c-bloco-texto { display: flex; flex-direction: column; justify-content: center; padding: 56px 48px; }
}

/* três dores em cartões (Escritórios, Indústria, Experiências) ou com foto (Comércio) */
.c-dores { display: grid; gap: 16px; }
@media (min-width: 760px) { .c-dores { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.c-dor { padding: 26px 26px 30px; border-radius: 20px; background: var(--lavanda-2); }
.c-dor .n { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 700; }
.c-dor h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; line-height: 1.22; }
.c-dor p { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--roxo-medio); }
.c-dor--destaque { color: #fff; background: var(--roxo); }
.c-dor--destaque .n { color: var(--lima); }
.c-dor--destaque p { color: rgba(255, 255, 255, .85); }
.c-dor-foto img { width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; border-radius: 18px; }
.c-dor-foto h3 { margin: 18px 0 8px; font-size: 21px; font-weight: 700; }
.c-dor-foto p { font-size: 15.5px; line-height: 1.55; color: var(--roxo-medio); }

/* três dores em linhas (Totens) */
.c-linhas li { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid var(--linha); }
.c-linhas .n { font-size: 14px; font-weight: 700; }
.c-linhas h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; line-height: 1.25; }
.c-linhas p { font-size: 15.5px; line-height: 1.55; color: var(--roxo-medio); }
@media (min-width: 900px) { .c-linhas li { grid-template-columns: 44px 1fr 1.15fr; gap: 24px; align-items: start; } }

/* processo com círculos ligados (Comércio) e em colunas (Indústria) */
.c-trilha { display: grid; gap: 28px; margin-top: 36px; }
.c-trilha li { position: relative; }
.c-trilha .n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 700; color: var(--roxo); background: var(--lima); }
.c-trilha h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 700; }
.c-trilha p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
@media (min-width: 760px) {
  .c-trilha { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .c-trilha li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 40px; right: -24px; height: 2px; background: rgba(255, 255, 255, .9); }
}
.c-etapas { display: grid; gap: 30px; margin-top: 36px; }
@media (min-width: 760px) { .c-etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .c-etapas { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.c-etapas .n { font-size: 14px; font-weight: 700; color: var(--lima); }
.c-etapas h3 { margin: 12px 0 10px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.c-etapas p { font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* cases (Comércio) */
.c-cases { display: grid; gap: 24px; }
@media (min-width: 900px) { .c-cases { grid-template-columns: 1fr 1fr; gap: 28px 44px; } }
.c-case { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: start; }
.c-case img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 12px; }
.c-case h3 { font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.c-case p { margin: 8px 0 14px; font-size: 15px; line-height: 1.5; color: var(--roxo-medio); }
.c-case .btn { white-space: normal; text-align: left; }
@media (min-width: 560px) { .c-case { grid-template-columns: 168px 1fr; gap: 22px; } }

/* faixa de chamada verde-limão (ou roxa) */
.c-faixa { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 44px; padding: 28px 24px; overflow: hidden; border-radius: 20px; color: var(--roxo); background: var(--lima); }
.c-faixa h3 { font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.c-faixa p { max-width: 42em; margin-top: 8px; font-size: 16px; }
.c-faixa .btn { white-space: normal; text-align: left; }
.c-faixa .c-circuito { display: none; }
.c-faixa--solta { margin-top: 0; }
.c-faixa--roxa { color: #fff; background: var(--roxo); }
.c-faixa--roxa p { color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) {
  .c-faixa { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 30px 36px; }
  .c-faixa .btn { flex: none; white-space: nowrap; }
  .c-faixa--empilha { flex-direction: column; align-items: flex-start; gap: 22px; }
  .c-faixa--empilha .c-circuito { position: absolute; right: 36px; bottom: 32px; display: block; }
}

/* serviços em 4 colunas com foto (Escritórios, Indústria); no celular, carrossel */
.c-servicos { display: grid; gap: 24px; }
.c-servico img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.c-servico h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.28; }
.c-servico p { font-size: 15px; line-height: 1.55; color: var(--roxo-medio); }
@media (max-width: 759px) {
  .c-servicos { grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .c-servicos::-webkit-scrollbar { display: none; }
  .c-servico { scroll-snap-align: start; }
}
@media (min-width: 760px) { .c-servicos { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; } }
@media (min-width: 1040px) { .c-servicos { grid-template-columns: repeat(4, 1fr); } }

/* cartões 2x2 com foto vertical (Totens) */
.c-cards2 { display: grid; gap: 16px; }
@media (min-width: 900px) { .c-cards2 { grid-template-columns: 1fr 1fr; gap: 18px; } }
.c-card2 { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 10px; border-radius: 20px; background: var(--lavanda-2); }
.c-lavanda .c-card2 { background: #fff; }
.c-card2 img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 12px; }
.c-card2 > div { padding: 10px 10px 12px 0; }
.c-card2 h3 { font-size: 18px; font-weight: 700; line-height: 1.28; }
.c-card2 p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--roxo-medio); }
@media (min-width: 560px) { .c-card2 { grid-template-columns: 172px 1fr; gap: 22px; } .c-card2 img { height: auto; aspect-ratio: 173 / 221; } }

/* bloco de vídeo: mostra só a foto até o vídeo chegar (data-video), e a legenda aparece junto com ele */
.c-video { aspect-ratio: 16 / 9; border-radius: var(--raio-g); }
@media (min-width: 900px) { .c-video { aspect-ratio: 2.55; } }
.c-legenda { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.midia[data-video=""] + .c-legenda { display: none; }

/* por que a Orbya (Totens) */
.c-porque { display: grid; gap: 18px 32px; margin-top: 36px; }
@media (min-width: 760px) { .c-porque { grid-template-columns: repeat(3, 1fr); } }
.c-porque li { display: flex; gap: 12px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.c-porque svg { width: 20px; height: 20px; margin-top: 2px; color: var(--lima); }

/* linhas de experiência com foto ou vídeo (Experiências) */
.c-exp { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .c-exp { grid-template-columns: 1fr 1fr; gap: 64px; } .c-exp--inverte > :first-child { order: 2; } }
.c-exp .c-txt { max-width: 34em; }
.c-destaque { margin-top: 16px; font-size: 16.5px; font-weight: 700; }
.c-exp .btn { margin-top: 28px; }
.c-exp-midia { aspect-ratio: 562 / 299; border-radius: 20px; }
.c-jogo { display: grid; align-content: center; gap: 22px; aspect-ratio: 562 / 299; padding: 24px 28px; border-radius: 20px; background: var(--roxo); }
.c-jogo-rot { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lima); }
.c-jogo-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: min(100%, 340px); margin: 0 auto; }
.c-jogo-grade span { aspect-ratio: 1; border-radius: 5px; background: var(--lima); }
.c-jogo-grade .v { background: #7955FF; }
.c-jogo-grade .b { background: #EDE8F5; }
.c-jogo-grade .pisca { animation: pisca 2.6s ease-in-out infinite; }
.c-jogo-grade .pisca:nth-child(3n) { animation-delay: .9s; }
@keyframes pisca { 50% { opacity: .35; } }
.c-jogo-barra { width: min(60%, 200px); height: 8px; margin: 0 auto; border-radius: 4px; background: var(--lima); }

/* projetos (Experiências): 3 colunas; no celular, carrossel */
.c-projetos { display: grid; gap: 18px; }
.c-projeto img { width: 100%; aspect-ratio: 388 / 208; object-fit: cover; border-radius: 16px; }
.c-projeto h3 { margin-top: 12px; font-size: 18px; font-weight: 700; }
@media (max-width: 759px) {
  .c-projetos { grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .c-projetos::-webkit-scrollbar { display: none; }
  .c-projeto { scroll-snap-align: start; }
}
@media (min-width: 760px) { .c-projetos { grid-template-columns: repeat(3, 1fr); } }
.c-convite { padding: 28px 26px; border-radius: 20px; background: rgba(255, 255, 255, .07); outline: 1px solid rgba(255, 255, 255, .12); }
.c-convite p { margin-bottom: 22px; font-size: 16.5px; color: rgba(255, 255, 255, .86); }

/* Sobre */
.c-circulo-caixa { position: relative; }
.c-circulo { width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; }
.midia.c-circulo { background: var(--lima); }
.c-circulo-caixa::before { content: ""; position: absolute; left: 0; bottom: 6%; width: 92px; height: 70px; background: radial-gradient(circle, var(--roxo) 1.6px, transparent 2.2px) 0 0 / 14px 14px; opacity: .75; }
@media (min-width: 1040px) { .c-circulo { margin-right: 0; } }
.c-areas { color: #fff; background: var(--roxo); }
.c-areas ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; padding: 22px 0; }
.c-areas li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.c-areas svg { width: 18px; height: 18px; color: var(--lima); }
@media (min-width: 760px) { .c-areas ul { grid-template-columns: repeat(4, 1fr); } }
.c-duas { display: grid; gap: 20px; }
@media (min-width: 900px) { .c-duas { grid-template-columns: 1fr 1.15fr; gap: 64px; } }
.c-orbita { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; }
@media (min-width: 900px) { .c-acao-dir { justify-self: end; } }
