/* GYZA, página de Serviços (arquivo novo; usa os tokens e componentes de style.css sem editá-lo) */

.serv .nav { position: fixed; }
.serv main { position: relative; }
.serv section[id] { scroll-margin-top: 120px; }
@media (max-width: 900px) { .serv section[id] { scroll-margin-top: 112px; } }

/* ---------- abertura ---------- */
.s-hero { position: relative; overflow: hidden; padding: clamp(140px, 15vw, 200px) 0 clamp(72px, 8vw, 120px); }
.s-hero__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 80% 0%, rgba(31,79,216,.30), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(31,79,216,.12), transparent 70%); }
.s-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.s-kicker { color: var(--azul-claro); font-size: 16px; font-weight: 500; margin-bottom: 18px; }
.s-hero__t { font-size: var(--fs-hero); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.s-hero__lead { margin-top: 28px; max-width: 56ch; font-size: var(--fs-lead); color: var(--apoio); }
.s-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.s-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.s-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease-out); }
.s-link:hover::after { transform: scaleX(0); }

/* pirâmide: a assinatura da marca, camada a camada */

/* ---------- camadas ---------- */
.camada { position: relative; padding: clamp(96px, 11vw, 168px) 0; border-radius: var(--raio-secao); margin-top: calc(-1 * var(--raio-secao)); }
.camada--light { background: var(--papel); color: var(--tinta); z-index: 1; }
.camada--dark { background: var(--preto-2); color: var(--gelo); z-index: 2; }
.camada__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.camada__head { position: sticky; top: 150px; display: grid; gap: 22px; justify-items: start; }
.camada__frase { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; color: var(--azul-claro); max-width: 24ch; }
.camada--light .camada__frase { color: var(--azul); }
.camada__txt { max-width: 52ch; font-size: var(--fs-lead); color: var(--apoio); }
.camada--light .camada__txt { color: var(--tinta-2); }
.camada__rot { font-size: 16px; font-weight: 500; color: var(--cinza); margin-bottom: 18px; }
.camada--light .camada__rot { color: var(--tinta-2); }

.grp + .grp { margin-top: clamp(40px, 5vw, 64px); }
.grp__t { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }

/* entregas: lista com + que abre a descrição */
.its { border-top: 1px solid var(--linha); }
.camada--light .its { border-top-color: var(--linha-papel); }
.it { border-bottom: 1px solid var(--linha); }
.camada--light .it { border-bottom-color: var(--linha-papel); }
.it summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.02em; transition: color .3s var(--ease), padding .4s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.it summary::-webkit-details-marker { display: none; }
.it summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); transition: background .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease-out); }
.camada--light .it summary i { border-color: var(--linha-papel); }
.it summary i::before, .it summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .4s var(--ease-out); }
.it summary i::after { transform: rotate(90deg); }
.it[open] summary i { background: var(--azul); border-color: var(--azul); color: #fff; transform: rotate(180deg); }
.it[open] summary i::after { transform: rotate(0); }
.it summary:focus-visible { outline-offset: 2px; }
.it p { padding: 0 56px 22px 0; max-width: 56ch; color: var(--apoio); font-size: 16px; }
.camada--light .it p { color: var(--tinta-2); }
@supports (interpolate-size: allow-keywords) {
  .it { interpolate-size: allow-keywords; }
  .it::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .it[open]::details-content { block-size: auto; }
}

/* ---------- fecho ---------- */
.s-fecho { position: relative; z-index: 2; overflow: hidden; background: var(--preto); border-radius: var(--raio-secao); margin-top: calc(-1 * var(--raio-secao)); padding: clamp(110px, 13vw, 200px) 0 calc(clamp(110px, 13vw, 200px) + 28px); }
.s-fecho__in { position: relative; display: grid; gap: 28px; justify-items: start; }
.s-fecho__t { font-size: clamp(38px, 5.6vw, 88px); font-weight: 500; line-height: 1; letter-spacing: -.045em; max-width: 16ch; }
.s-fecho__p { max-width: 52ch; font-size: var(--fs-lead); color: var(--apoio); }
.s-fecho .pill { height: 56px; }

/* ---------- entrada na rolagem (só com JS; o conteúdo nunca fica escondido sem ele) ---------- */
.rv-on .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.rv-on .rv.is-in { opacity: 1; transform: none; }
@keyframes s-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.s-hero__copy > * { animation: s-entra 1.1s var(--ease-out) both; }
.s-hero__copy > :nth-child(2) { animation-delay: .08s; } .s-hero__copy > :nth-child(3) { animation-delay: .16s; } .s-hero__copy > :nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
  .s-hero__copy > * { animation: none; }
  .it::details-content { transition: none; }
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .s-hero { padding-top: 120px; }
  .s-hero__grid { grid-template-columns: 1fr; }
  .camada__grid { grid-template-columns: 1fr; gap: 36px; }
  .camada__head { position: static; }
  .camada__frase { max-width: none; }
  .it p { padding-right: 0; }
  .s-fecho .pill { width: 100%; }
  .s-hero__ctas .pill { width: 100%; }
}

/* revisão final (05/11/2026): trilho só com o nome da camada; inativos com contraste de texto; foco visível no tema claro; abas abaixo do topo e com fade na borda no celular */
.s-kicker { font-size: 14px; letter-spacing: .02em; }
.s-hero__t { font-size: var(--fs-h2); line-height: 1; }
.s-fecho__t { font-size: var(--fs-h2); }
.s-hero__lead { max-width: 62ch; }

/* sem as pirâmides grandes da abertura e do fecho (pedido do Vitor, 05/11/2026): o texto ocupa a largura.
   Abertura: título à esquerda e o apoio com os botões à direita, alinhados pela base, como os outros títulos do site. */
.s-hero__grid { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  .s-hero__copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .s-hero__copy .s-kicker { grid-column: 1; grid-row: 1; }
  .s-hero__copy .s-hero__t { grid-column: 1; grid-row: 2; }
  .s-hero__copy .s-hero__lead { grid-column: 2; grid-row: 2; margin-top: 0; }
  .s-hero__copy .s-hero__ctas { grid-column: 2; grid-row: 3; }
  .s-fecho__t { max-width: 20ch; }
}

/* camadas sem a mini pirâmide e sem o número (Vitor, 05/11/2026): o nome grande abre a camada; a coluna da camada sobe para o título não ficar solto */
.camada__head { gap: 18px; }

/* acordeão: o destaque de hover só com mouse (no toque ele grudava) */
@media (hover: hover) {
  .it summary:hover { color: var(--azul-claro); padding-left: 8px; }
  .camada--light .it summary:hover { color: var(--azul); }
  .it summary:hover i { border-color: var(--azul-claro); }
  .camada--light .it summary:hover i { border-color: var(--azul); }
}

/* ritmo único de respiro (Vitor, 05/11/2026), o mesmo da folha geral */
.camada__head { gap: var(--r-titulo); }
.s-fecho__in { gap: var(--r-titulo); }
.s-fecho .pill { margin-top: 8px; }
.s-hero__lead { margin-top: var(--r-titulo); }
@media (max-width: 900px) {
  .camada__grid { gap: var(--r-conteudo); }
  .s-hero__ctas { margin-top: 28px; }
}

/* nome grande da camada (regra restaurada: tinha saído junto com a limpeza das pirâmides) */
.camada__nome { font-size: var(--fs-h2); font-weight: 500; line-height: .98; letter-spacing: -.05em; }

/* abertura de Serviços (Vitor, 05/11/2026): o trilho começa dentro da primeira camada (abaixo da divisa), fica fixo só enquanto as camadas
   passam e pega o tom do fundo que está embaixo dele; divisões retas como no resto do site; botão da abertura no azul da marca */
.camada, .s-fecho { border-radius: 0; margin-top: 0; }
.s-hero__ctas .pill { --bg: var(--azul); --fg: #fff; }
.s-hero__ctas .pill::before { background: var(--azul-vivo); }
.s-hero__ctas .pill:hover { color: #fff; }

/* abertura enxuta (Vitor, 06/11/2026): sem a historinha; só o título da página e a página entra direto nas camadas */
.s-hero { padding: clamp(132px, 11vw, 168px) 0 clamp(40px, 4vw, 56px); }
.s-hero__copy { display: block; }
.s-hero__t { font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.045em; }
@media (max-width: 900px) {
  .s-hero { padding: calc(124px + env(safe-area-inset-top, 0px)) 0 28px; }
}

/* sem o trilho (Vitor, 06/11/2026): a primeira camada começa mais perto do título da página */
.s-hero + .camada { padding-top: clamp(64px, 6vw, 96px); }