/* Páginas de venda da SanWeb (05/10/2026): /solucoes, /site-sob-medida, /sistema-sob-medida.
   Mesma identidade do site (cores, Tilt Warp, SWCore), foco em PESSOAS: muita foto, pouco termo técnico. */

.pg { overflow-x: clip; background: var(--surface); color: var(--text); }
.pg-limite { width: min(calc(100% - 3.2rem), 128rem); margin-inline: auto; }

/* Topo simples */
.pg-topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 1.2rem clamp(1.6rem, 4vw, 4.8rem);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.pg-topo img { display: block; height: 3rem; width: auto; }
.pg-topo nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 3.2rem); }
.pg-topo nav a { color: var(--text); font-size: 1.44rem; font-weight: 600; text-decoration: none; }
.pg-topo nav a:hover { color: var(--color-accent-2); }
.pg-topo nav .pg-oculta { display: none; }
@media (min-width: 900px) { .pg-topo nav .pg-oculta { display: inline; } }

/* Botões */
.pg-btn {
  display: inline-flex; align-items: center; gap: 1rem; min-height: 4.8rem;
  padding: 1.2rem 2.4rem; border-radius: .8rem; border: 1px solid transparent;
  font-size: 1.52rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.pg-btn--wa { background: #22c55e; color: #fff; }
.pg-btn--pri { background: var(--color-primary); color: #fff; }
.pg-btn--linha { border-color: color-mix(in srgb, var(--text) 25%, transparent); color: var(--text); }
.pg-btn:hover { transform: translateY(-3px); box-shadow: 0 1.6rem 4rem color-mix(in srgb, #000 30%, transparent); }
.pg-btn i { font-size: 1.8rem; }
.pg-btns { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Textos */
.pg-selo { display: inline-block; margin: 0 0 1.6rem; color: var(--color-accent-2); font-size: 1.2rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.pg h1, .pg h2, .pg h3 { font-family: var(--font-titulo); font-weight: 400; letter-spacing: -.04em; margin: 0; }
.pg h1 { font-size: clamp(4rem, 7vw, 8.8rem); line-height: .95; }
.pg h2 { font-size: clamp(3.2rem, 5vw, 6.4rem); line-height: 1; }
.pg h3 { font-size: clamp(2.6rem, 3vw, 3.6rem); line-height: 1.05; }
.pg em { color: var(--color-accent-2); font-style: normal; }
.pg p { color: var(--text-muted); font-size: clamp(1.56rem, 1.4vw, 1.8rem); line-height: 1.7; }
.pg-secao { padding-block: clamp(7.2rem, 10vw, 12.8rem); }
.pg-cabeca { max-width: 76rem; margin-bottom: clamp(4rem, 6vw, 6.4rem); }
.pg-cabeca p { margin: 1.6rem 0 0; }

/* Hero com colagem de fotos */
.pg-hero { position: relative; padding-block: clamp(4.8rem, 8vw, 9.6rem) clamp(6.4rem, 8vw, 9.6rem); }
.pg-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70rem; height: 70rem; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent);
  pointer-events: none;
}
.pg-hero__grade { position: relative; display: grid; gap: clamp(4rem, 6vw, 6.4rem); align-items: center; }
.pg-hero__texto p { max-width: 56rem; margin: 2.4rem 0 3.2rem; }
.pg-colagem { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.pg-colagem figure { margin: 0; overflow: hidden; border-radius: 1.2rem; box-shadow: 0 2.4rem 6.4rem color-mix(in srgb, #000 35%, transparent); }
.pg-colagem img { display: block; width: 100%; height: 100%; object-fit: cover; animation: pg-zoom 14s ease-in-out infinite alternate; }
.pg-colagem figure:nth-child(1) { grid-row: span 2; aspect-ratio: 3 / 4.6; }
.pg-colagem figure:nth-child(2), .pg-colagem figure:nth-child(3) { aspect-ratio: 4 / 3; }
.pg-colagem figure:nth-child(2) img { animation-delay: -4s; }
.pg-colagem figure:nth-child(3) img { animation-delay: -8s; }
.pg-balao {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.4rem; border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 1.28rem; font-weight: 700; box-shadow: 0 1.2rem 3.2rem color-mix(in srgb, #000 30%, transparent);
  animation: pg-flutua 5s ease-in-out infinite;
}
.pg-balao i { color: #22c55e; font-size: 1.6rem; }
.pg-balao--1 { left: -1rem; bottom: 12%; }
.pg-balao--2 { right: -1rem; top: 8%; animation-delay: -2.5s; }
@keyframes pg-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes pg-flutua { 50% { transform: translateY(-.8rem); } }

/* Faixa de dores (o que a empresa precisa) */
.pg-dores { display: grid; gap: 1.6rem; }
.pg-dor {
  position: relative; display: flex; min-height: 34rem; overflow: hidden; border-radius: 1.4rem;
  color: #fff; text-decoration: none; isolation: isolate;
}
.pg-dor img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.pg-dor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,7,12,.92), rgba(5,7,12,.2) 60%); }
.pg-dor div { align-self: flex-end; padding: 2.4rem; }
.pg-dor b { display: block; margin-bottom: .8rem; color: var(--color-accent-2); font: 700 1.2rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.pg-dor strong { display: block; font-family: var(--font-titulo); font-size: 2.4rem; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.pg-dor span { display: inline-flex; gap: .6rem; margin-top: 1.2rem; font-size: 1.36rem; font-weight: 700; opacity: .9; }
.pg-dor:hover img { transform: scale(1.06); }

/* Produtos alternados */
.pg-produto { display: grid; gap: clamp(3.2rem, 5vw, 6.4rem); align-items: center; padding-block: clamp(4.8rem, 7vw, 8rem); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.pg-produto__foto { position: relative; margin: 0; }
.pg-produto__foto > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; border-radius: 1.4rem; box-shadow: 0 3.2rem 8rem color-mix(in srgb, #000 35%, transparent); }
.pg-produto__foto .pg-balao { bottom: -1.6rem; left: 1.6rem; }
.pg-produto__num { color: var(--acento, var(--color-accent-2)); font: 700 1.28rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.pg-produto h3 { margin: 1.2rem 0 0; }
.pg-produto h3 span { color: var(--acento, var(--color-accent-2)); }
.pg-produto__pergunta { margin: 1.6rem 0 0; color: var(--text) !important; font-family: var(--font-titulo); font-size: clamp(2rem, 2vw, 2.6rem) !important; line-height: 1.25 !important; }
.pg-lista { display: grid; gap: 1rem; margin: 2.4rem 0 3.2rem; padding: 0; list-style: none; }
.pg-lista li { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.56rem; color: var(--text); }
.pg-lista i { flex: 0 0 auto; margin-top: .3rem; color: var(--acento, var(--color-accent-2)); }
.pg-produto--google { --acento: #22c55e; }
.pg-produto--acheme { --acento: #ff8a34; }
.pg-produto--swsis { --acento: #6f91ff; }
.pg-produto--site { --acento: var(--color-accent-2); }
.pg-produto--sistema { --acento: #c084fc; }

/* Passos */
.pg-passos { display: grid; gap: 1.6rem; counter-reset: passo; }
.pg-passo { padding: 2.8rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 1.2rem; background: color-mix(in srgb, var(--text) 3%, transparent); }
.pg-passo b { display: block; margin-bottom: 1.6rem; color: var(--color-accent-2); font: 700 1.28rem/1 ui-monospace, monospace; }
.pg-passo h3 { font-size: 2.4rem; }
.pg-passo p { margin: 1rem 0 0; font-size: 1.52rem; }

/* Quem atende */
.pg-sandro { display: grid; gap: clamp(3.2rem, 5vw, 6.4rem); align-items: center; }
.pg-sandro img { display: block; width: min(100%, 44rem); margin-inline: auto; border-radius: 1.4rem; }
.pg-sandro p { margin: 2rem 0 3.2rem; }

/* Chamada final */
.pg-final { position: relative; overflow: hidden; border-radius: 2rem; padding: clamp(4rem, 7vw, 8rem) clamp(2.4rem, 5vw, 6.4rem); color: #fff; isolation: isolate; }
.pg-final img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pg-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,7,12,.94), rgba(5,7,12,.55)); }
.pg-final h2 { max-width: 18ch; }
.pg-final p { max-width: 56rem; margin: 2rem 0 3.2rem; color: #d6d8de; }

/* Perguntas */
.pg-faq { display: grid; gap: 1.2rem; max-width: 88rem; }
.pg-faq details { padding: 2rem 2.4rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 1rem; }
.pg-faq summary { cursor: pointer; font-size: 1.68rem; font-weight: 700; color: var(--text); }
.pg-faq details p { margin: 1.2rem 0 0; font-size: 1.52rem; }

/* Trabalhos (páginas sob medida) */
.pg-trabalhos { display: grid; gap: 1.6rem; }
.pg-trabalho { overflow: hidden; border-radius: 1.4rem; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text) 3%, transparent); }
.pg-trabalho img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.pg-trabalho div { padding: 2rem 2.4rem 2.4rem; }
.pg-trabalho strong { display: block; font-family: var(--font-titulo); font-size: 2.4rem; font-weight: 400; }
.pg-trabalho span { display: block; margin-top: .6rem; color: var(--text-muted); font-size: 1.44rem; }
.pg-trabalho:hover img { transform: scale(1.04); }

.pg-rodape { padding-block: 4rem; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); text-align: center; }
.pg-rodape p { margin: 0; font-size: 1.36rem; }
.pg-rodape a { color: var(--text); }

@media (min-width: 700px) {
  .pg-dores { grid-template-columns: repeat(2, 1fr); }
  .pg-passos { grid-template-columns: repeat(3, 1fr); }
  .pg-trabalhos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .pg-hero__grade { grid-template-columns: 1.05fr .95fr; }
  .pg-dores { grid-template-columns: repeat(6, 1fr); }
  .pg-dor { grid-column: span 2; }
  .pg-dor:nth-child(4), .pg-dor:nth-child(5) { grid-column: span 3; }
  .pg-produto { grid-template-columns: 1fr 1fr; }
  .pg-produto:nth-child(even) .pg-produto__foto { order: 2; }
  .pg-sandro { grid-template-columns: .8fr 1.2fr; }
  .pg-trabalhos { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-colagem img, .pg-balao { animation: none; }
  .pg-btn, .pg-dor img, .pg-trabalho img { transition: none; }
}

/* Ícone ✓ (o CSS enxuto do site só traz os ícones da home) */
.swi-check:before { content: "\ea41"; }

/* Abertura ocupa a tela toda (Sandro 05/10: "muita área vaga") */
.pg-limite { width: min(calc(100% - 3.2rem), 148rem); }
.pg-hero { display: flex; min-height: calc(100svh - 7.2rem); flex-direction: column; justify-content: center; padding-block: clamp(3.2rem, 5vw, 6.4rem) 2.4rem; }
.pg-hero__grade { flex: 1; }
@media (min-width: 1000px) {
  .pg-hero__grade { grid-template-columns: 1fr 1.05fr; }
  .pg-colagem { gap: 1.6rem; }
  .pg-colagem figure:nth-child(1) { aspect-ratio: 3 / 4.2; }
}
.pg-faixa {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
  margin-top: clamp(3.2rem, 5vw, 5.6rem); padding-top: 2.4rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.pg-faixa div { display: flex; align-items: center; gap: 1.2rem; }
.pg-faixa b { font-family: var(--font-titulo); font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 400; color: var(--color-accent-2); line-height: 1; }
.pg-faixa span { color: var(--text-muted); font-size: 1.36rem; line-height: 1.35; }
@media (min-width: 900px) { .pg-faixa { grid-template-columns: repeat(4, 1fr); } }

/* Mosaico de fotos passando (o mesmo efeito das vendas do AcheMe/SWSIS) */
.pg-hero { position: relative; isolation: isolate; width: 100%; max-width: none; padding-inline: max(1.6rem, calc((100% - 148rem) / 2)); overflow: hidden; }
.pg-hero__texto { position: relative; z-index: 1; max-width: 68rem; }
.pg-hero__grade { grid-template-columns: 1fr !important; }
.pg-mosaico { position: absolute; inset: -10% -4% -10% 46%; z-index: -2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; transform: rotate(-6deg) scale(1.12); }
.pg-mosaico__col { overflow: hidden; }
.pg-mosaico__trilho { display: flex; flex-direction: column; gap: 1.4rem; animation: pg-sobe 60s linear infinite; }
.pg-mosaico__col:nth-child(2) .pg-mosaico__trilho { animation-duration: 75s; animation-direction: reverse; }
.pg-mosaico__col:nth-child(3) .pg-mosaico__trilho { animation-duration: 68s; }
.pg-mosaico img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.4rem; }
.pg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 38%, color-mix(in srgb, var(--surface) 55%, transparent) 58%, transparent 80%); }
.pg-hero .pg-balao--1 { position: absolute; left: auto; right: 6%; bottom: 22%; }
.pg-hero .pg-balao--2 { position: absolute; right: 30%; top: 14%; }
@keyframes pg-sobe { to { transform: translateY(-50%); } }
@media (max-width: 999px) {
  .pg-mosaico { inset: -10% -20%; opacity: .35; }
  .pg-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), var(--surface) 85%); }
  .pg-hero .pg-balao { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pg-mosaico__trilho { animation: none; } }

.pg-topo nav a { white-space: nowrap; }
@media (max-width: 480px) { .pg-topo nav a { font-size: 1.3rem; } .pg-topo img { height: 2.4rem; } }

/* Faixa de números legível por cima das fotos */
.pg-faixa { position: relative; z-index: 1; padding: 2rem clamp(1.6rem, 3vw, 3.2rem); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 1.4rem; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2rem 5rem color-mix(in srgb, #000 30%, transparent); }
.pg-faixa span { color: var(--text); }

.pg-faixa b { white-space: nowrap; }
@media (max-width: 480px) { .pg-faixa { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; } .pg-faixa div { flex-direction: column; align-items: flex-start; gap: .4rem; } .pg-faixa b { font-size: 2.6rem; } }

/* Voltar ao topo */
.pg-topo-btn { position: fixed; right: 1.6rem; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 2.4rem; font-weight: 800; cursor: pointer; box-shadow: 0 1.2rem 3rem color-mix(in srgb, #000 40%, transparent); transition: transform .2s ease; }
.pg-topo-btn:hover { transform: translateY(-3px); }
.pg-topo-btn[hidden] { display: none; }

/* Links do menu deslizam até a área */

@media (prefers-reduced-motion: reduce) { html:has(body.pg) { scroll-behavior: auto; } }