/* Página de valores — identidade Sety (Figma zf5k8YwAehYvecWHkkLRvC): painel azul em gradiente, Inter/Sora,
   pílulas com borda branca, cantos grandes, personagem 3D. Organização dos planos inspirada na Sabino (arte no topo do card). */

html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:#fff}

/* ---------- topo ---------- */
.vt{
  position:relative;z-index:1;overflow:hidden;color:#fff;
  width:min(1840px, calc(100% - 48px));margin:24px auto 0;border-radius:56px;
  background:var(--grad-hero);padding:28px clamp(28px, 4.5vw, 72px) 230px;min-height:560px;
}
.vt .hero__bg{border-radius:inherit}
.vt__bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px}
.vt__logo img{width:clamp(130px, 11vw, 168px)}
.vt__nav{display:flex;align-items:center;gap:clamp(14px, 2vw, 28px);font-size:15px;font-weight:600}
.vt__nav a:not(.vt__cta):hover{text-decoration:underline;text-underline-offset:4px}
.vt__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--blue-deep);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;box-shadow:0 12px 26px -14px rgba(0,40,110,.6);transition:transform .3s var(--ease)}
.vt__cta:hover{transform:translateY(-2px)}
.vt a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.vt__copy{position:relative;z-index:3;max-width:640px;margin-top:clamp(48px, 6vw, 84px)}
.vt__title{font-weight:600;font-size:clamp(36px, 4.6vw, 66px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.vt__title span{color:#282828}
.vt__sub{margin-top:18px;max-width:520px;font-size:clamp(16px, 1.4vw, 19px);line-height:1.45;font-weight:500;color:rgba(255,255,255,.95)}
.vt__char{position:absolute;z-index:1;right:clamp(0px, 6vw, 140px);top:30px;width:clamp(360px, 34vw, 560px);max-width:none;pointer-events:none}

/* ---------- pacotes (sobrepostos ao painel, como no Figma) ---------- */
.vp{position:relative;z-index:2;max-width:1260px;margin:-150px auto 0;padding:0 16px clamp(64px, 7vw, 100px)}
.vp .inv__ref{margin:0 auto 20px;position:relative;z-index:3}
.vp .pkg{margin:0}
.vp .pkg__grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px;margin-top:0;align-items:stretch}

.vp .pk{padding:0;margin-top:72px;border-radius:32px;transform:none}
.vp .pk:hover{transform:translateY(-6px)}
.pk__art{margin:-72px 5% 0;pointer-events:none}
.pk__art img{width:100%;filter:drop-shadow(0 22px 26px rgba(0,30,80,.28));transition:transform .6s var(--ease)}
.vp .pk:hover .pk__art img{transform:translateY(-6px) scale(1.02)}
.pk__body{display:flex;flex-direction:column;flex:1;padding:4px 28px 30px}
.pk__kick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:28px;font-size:14px;font-weight:600;color:var(--blue)}
.pk__flag{display:inline-block;padding:6px 11px;border-radius:999px;background:linear-gradient(180deg, #3BA2FF 0%, #1188F5 100%);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.vp .pk__name{margin-top:6px;font-family:var(--font-display);font-size:clamp(28px, 2.6vw, 34px);font-weight:700;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.vp .pk__for{margin-top:10px;min-height:2.9em;font-size:14.5px}
.vp .pk__price{flex-wrap:wrap;gap:4px 10px;margin-top:20px}
.vp .pk__price b{font-size:clamp(34px, 3.2vw, 44px)}
.vp .pk__price span{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.vp .pk__cta{margin-top:20px}
.pk__inc{margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vp .pk__list{margin-top:14px}

/* destaque: a superfície azul da marca */
.vp .pk--hl .pk__kick{color:#fff}
.vp .pk--hl .pk__flag{background:#fff;color:var(--blue-deep)}
.vp .pk--hl .pk__price span,.vp .pk--hl .pk__inc{color:rgba(255,255,255,.85)}
.pk--hl .pk__art img{filter:drop-shadow(0 22px 30px rgba(0,20,70,.4))}

.vp__help{margin-top:clamp(32px, 4vw, 48px);text-align:center;font-size:15px;color:var(--muted)}
.vp__help a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.vp__nojs{text-align:center;padding:24px}

/* rodapé enxuto */
.footer__inner{height:auto;min-height:80px;padding-block:18px;flex-wrap:wrap}

/* entrada */
.js .pk.reveal{opacity:0;translate:0 24px;transition:opacity .8s var(--ease), translate .8s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease)}
.js .pk.reveal.is-in{opacity:1;translate:none}

@media (max-width: 1100px){
  .vt__char{width:clamp(300px, 34vw, 400px);right:0}
}
@media (max-width: 899.98px){
  .vt{width:auto;margin:0;border-radius:0 0 40px 40px;padding:18px 16px 190px;min-height:0;text-align:center}
  .vt__nav a:not(.vt__cta){display:none}
  .vt__copy{margin:40px auto 0}
  .vt__sub{margin-inline:auto}
  .vt__char{display:none}
  .vp{margin-top:-140px}
  .vp .pkg__grid{grid-template-columns:minmax(0, 1fr);max-width:520px;margin-inline:auto;gap:8px}
  .vp .pk:hover{transform:none}
  .vp .pk__for{min-height:0}
  .pk__body{padding:4px 20px 24px}
}
@media (prefers-reduced-motion: reduce){
  .vp .pk:hover,.vp .pk:hover .pk__art img{transform:none}
  .js .pk.reveal{opacity:1;translate:none}
}
.vp .pk__flag{position:static;top:auto;left:auto;box-shadow:none}

/* painel de título dos pacotes (meio da página, depois do portfólio) */
.vt--sec{min-height:0;margin-top:clamp(8px, 2vw, 24px);padding-top:clamp(56px, 6vw, 96px);text-align:center}
.vt--sec .vt__copy{margin:0 auto;max-width:780px}
.vt--sec .vt__sub{margin-inline:auto}
#pacotes{scroll-margin-top:12px}
@media (max-width: 899.98px){
  .vt--sec{margin:0 12px;border-radius:36px;padding:52px 16px 180px}
}
.vp__help{width:max-content;max-width:100%;margin-inline:auto;padding:12px 20px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -20px rgba(0,48,130,.45);color:var(--ink)}

/* ---------- ENTREGA: painel azul + cards translúcidos ---------- */
.proc{position:relative;overflow:hidden;color:#fff;width:min(1840px, calc(100% - 48px));margin:clamp(24px, 3vw, 48px) auto 0;border-radius:56px;background:var(--grad-quote);padding:clamp(56px, 6vw, 96px) clamp(24px, 4.5vw, 72px)}
.proc .hero__bg{border-radius:inherit}
.proc__head{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center}
.proc__title{font-weight:600;font-size:clamp(32px, 4vw, 56px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.proc__sub{margin-top:14px;font-size:clamp(16px, 1.4vw, 19px);line-height:1.45;font-weight:500;color:rgba(255,255,255,.95)}
.proc__grid{position:relative;z-index:1;list-style:none;margin:clamp(32px, 4vw, 56px) auto 0;padding:0;max-width:1400px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:18px}
.proc__card{display:flex;flex-direction:column;gap:8px;padding:24px 22px 26px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 24px 44px -32px rgba(0,40,110,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.proc__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--blue);box-shadow:0 10px 20px -12px rgba(0,40,110,.6)}
.proc__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.proc__n{margin-top:10px;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.8)}
.proc__card h3{font-size:clamp(19px, 1.5vw, 22px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.proc__card p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.92)}
@media (max-width: 1023.98px){ .proc__grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 899.98px){ .proc{width:auto;margin:24px 12px 0;border-radius:36px;padding:52px 16px} }
@media (max-width: 519.98px){ .proc__grid{grid-template-columns:minmax(0, 1fr);gap:12px} .proc__card{padding:20px} }

/* =====================================================================
   DESKTOP ONLY (≥1024px) — o celular não é afetado
   ===================================================================== */
@media (min-width: 1024px){
  /* hero: coluna de texto mais larga, título maior, botões lado a lado; personagem acompanha a coluna */
  .hero__copy{width:max(420px, calc(860*var(--s)))}
  .hero__title{font-size:max(34px, calc(80*var(--s)));line-height:1.06;letter-spacing:-.03em}
  .hero__sub{max-width:max(400px, calc(720*var(--s)));font-size:max(16px, calc(30*var(--s)))}
  .hero__ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 14px}
  .hero__char{left:max(calc(620*var(--s)), calc(232*var(--s) + max(420px, calc(860*var(--s))) - 200*var(--s)))}
  .hero__folder{left:calc(1760*var(--s))}

  /* portfólio: cards do mesmo tamanho nas duas fileiras, maiores, sem deslocamento irregular */
  .works__head{max-width:1100px}
  .carousel{--cw1:calc(760*var(--s));--cw2:calc(760*var(--s));--ch:calc(475*var(--s));--gap:calc(32*var(--s))}
  .carousel__row[data-row="2"]{margin-left:calc((var(--cw1) + var(--gap)) / 2)}
  .carousel__bar{max-width:1400px;margin-inline:auto}

  /* pacotes: mais largura em telas grandes */
  .vp{max-width:min(1440px, calc(100% - 96px))}
}
@media (min-width: 1024px) and (max-width: 1279.98px){
  .hero__folder{display:none} /* sem espaço para a pasta ao lado do personagem */
  .hero__ctas{flex-direction:column;align-items:flex-start}
}
@media (min-width: 1600px){
  .vp .pkg__grid{gap:32px}
  .pk__body{padding:4px 34px 34px}
}
@media (max-width: 519.98px){
  .proc{padding:44px 14px}
  .proc__card{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"ic n" "ic t" "ic p";column-gap:14px;row-gap:2px;padding:16px}
  .proc__ic{grid-area:ic;width:44px;height:44px}
  .proc__n{grid-area:n;margin-top:0;font-size:12px}
  .proc__card h3{grid-area:t;font-size:18px}
  .proc__card p{grid-area:p;font-size:14.5px}
}

/* fundo de ladrilhos cobre a largura toda (telas > 1920px ou zoom reduzido deixavam faixas brancas) */
.decor__top,.decor__bottom{width:max(calc(2457*var(--s)), 100%)}
/* celular: sem os ladrilhos atrás do CTA do portfólio (terminavam em corte seco antes dos pacotes) */
@media (max-width: 1023.98px){ .works__decor{display:none} }

/* =====================================================================
   DESKTOP (≥1024px): ordem hero → entrega → portfólio → pacotes
   O HTML segue a ordem do celular (aprovada); no desktop a ordem visual vem do flex `order`.
   A seção de entrega não tem itens focáveis, então a ordem de tabulação não muda.
   ===================================================================== */
@media (min-width: 1024px){
  main{display:flex;flex-direction:column}
  main > .hero{order:1}
  main > .proc{order:2}
  main > .works{order:3}
  main > #pacotes{order:4}

  /* entrega com a mesma largura e cantos do hero, colada a ele */
  .proc{
    --hs: calc(min(var(--vw), 1920px) / 2457 * .9536);
    width:calc(2457*var(--hs));max-width:none;margin:clamp(16px, calc(28*var(--hs)), 28px) auto 0;
    border-radius:calc(136*var(--hs));padding:calc(110*var(--hs)) calc(150*var(--hs)) calc(130*var(--hs));
  }
  .proc__title{font-size:clamp(36px, calc(84*var(--hs)), 64px)}
  .proc__sub{font-size:clamp(16px, calc(30*var(--hs)), 21px)}
  .proc__grid{max-width:none;gap:clamp(16px, calc(32*var(--hs)), 28px);margin-top:clamp(32px, calc(76*var(--hs)), 64px)}
  .proc__card{padding:clamp(24px, calc(50*var(--hs)), 40px) clamp(20px, calc(44*var(--hs)), 36px) clamp(26px, calc(54*var(--hs)), 42px);border-radius:clamp(22px, calc(40*var(--hs)), 32px);gap:10px}
  .proc__ic{width:clamp(46px, calc(80*var(--hs)), 60px);height:clamp(46px, calc(80*var(--hs)), 60px);border-radius:16px}
  .proc__ic svg{width:clamp(22px, calc(36*var(--hs)), 28px);height:clamp(22px, calc(36*var(--hs)), 28px)}
  .proc__n{font-size:clamp(13px, calc(22*var(--hs)), 15px)}
  .proc__card h3{font-size:clamp(20px, calc(40*var(--hs)), 28px)}
  .proc__card p{font-size:clamp(15px, calc(27*var(--hs)), 18px);line-height:1.5}

  /* portfólio logo depois da entrega: respiro menor no topo */
  .works{padding-top:calc(96*var(--s))}
}


/* desktop: personagem maior, saindo pela borda inferior do hero e recortado pela própria moldura (ref. Figma original) */
@media (min-width: 1024px){
  .hero{overflow:hidden}
  .hero__char{
    top:auto;bottom:calc(-170*var(--s));width:calc(1300*var(--s));
    left:max(calc(560*var(--s)), calc(232*var(--s) + max(420px, calc(860*var(--s))) - 222*var(--s)));
  }
  .hero__char img{display:block;width:100%}
}

/* parcelamento 5x sem juros (logo abaixo do preço à vista) */
.pk__inst{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--muted)}
.pk__inst svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pk__inst b{font-weight:700;color:var(--ink)}
.vp .pk--hl .pk__inst{color:rgba(255,255,255,.9)}
.vp .pk--hl .pk__inst svg{stroke:#fff}
.vp .pk--hl .pk__inst b{color:#fff}