/* ============================================================
   VILA PIRES OFICINA PORTO
   Estrutura: bandas full-width + 2 "ilhas" boxed
   (barra de confiança e CTA final), que é o efeito do design.
   ============================================================ */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-padding-top: 96px; scrollbar-gutter: stable; }
body { overflow-x: clip; }
/* trava o scroll com o menu aberto (a gutter estável evita o pulo de layout) */
html.nav-open, body.nav-open { overflow: hidden; }

/* === TOKENS === */
:root {
  --navy-900: #0A1132;
  --navy-800: #0E1740;
  --navy-700: #131E56;
  --navy-card: #1A2668;
  --black: #0B0D12;

  --blue: #2C5CE8;
  --blue-light: #5B87FF;
  --blue-soft: #EAF0FF;

  --ink: #0C1436;
  --ink-body: #414D6B;
  --ink-dim: #6B7794;

  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-soft: rgba(255, 255, 255, 0.82);
  --on-dark-dim: rgba(255, 255, 255, 0.72);

  --bg: #FFFFFF;
  --bg-soft: #F4F6FA;
  --line: rgba(12, 20, 54, 0.10);
  --line-dark: rgba(255, 255, 255, 0.12);

  --radius: 16px;
  --radius-lg: 26px;
  --shadow: 0 24px 60px -26px rgba(12, 20, 54, 0.28);
  /* respiro lateral fluido: acompanha a proporção do mockup (~5% por lado) */
  --pad-x: clamp(20px, 4.8vw, 96px);
  /* subiu de 84px junto com o logo (44px -> 62px), pra ele não encostar
     nas bordas da barra */
  --nav-h: 96px;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; }

.container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--pad-x); }

.text-accent { color: var(--blue); }
.text-accent-light { color: var(--blue-light); }
.text-center { text-align: center; }

/* === BANDAS DE SEÇÃO (full width) === */
.section { padding: 96px 0; }
.section--tight { padding: 44px 0; }
.section--navy { background: linear-gradient(168deg, var(--navy-700) 0%, var(--navy-900) 100%); }
.section--black { background: var(--black); }
.section--soft { background: var(--bg-soft); }

.section__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 58px;
}
/* precisa vencer o color base de .section__title */
.section__title.text-white { color: #fff; }
.section__title.text-center { margin-left: auto; margin-right: auto; max-width: 700px; }
/* usado quando um parágrafo de apoio (.section-lead) vem logo abaixo do título */
.section__title.mb-sm { margin-bottom: 18px; }
.section-lead { max-width: 620px; margin: 0 auto 46px; color: var(--ink-body); font-size: 15.5px; line-height: 1.7; }

/* === BOTÕES === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(44, 92, 232, 0.65);
}
.btn--primary:hover { background: #3D6BF2; }

.btn--outline {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1.6px solid rgba(255, 255, 255, 0.42);
}
.btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn--white { background: #fff; color: var(--navy-800); }
.btn--white:hover { background: var(--blue-soft); }

.btn--sm { padding: 12px 22px; font-size: 13.5px; }

/* === HEADER === */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
.header.is-scrolled {
  background: rgba(11, 17, 50, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.7);
}
/* com o menu aberto o header fica sobre o overlay, sem fundo próprio */
.header.is-nav-open { background: transparent; box-shadow: none; backdrop-filter: none; }
.header__inner { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.brand__logo { height: 62px; width: auto; }
/* no rodapé o logo respira mais que no header (não disputa espaço com CTA
   nem hamburger) */
.brand--footer .brand__logo { height: 76px; }
/* selo "Oficina Porto" separado do logo por um filete */
.brand__tag {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
/* na header o texto ficava apagado demais contra o navy; no rodapé mantém o tom sutil */
.header .brand__tag { color: #fff; }

.header__cta { margin-left: auto; }

/* === BOTÃO HAMBURGER === */
.burger {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  padding: 8px 4px;
  z-index: 2;
}
.burger__box { position: relative; width: 26px; height: 17px; }
.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.38s cubic-bezier(0.65, 0.05, 0.36, 1),
              opacity 0.2s ease, width 0.3s ease;
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 7.5px; width: 66%; }
.burger__line:nth-child(3) { top: 15px; }
.burger:hover .burger__line:nth-child(2) { width: 100%; }
.burger__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.header.is-nav-open .burger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.header.is-nav-open .burger__line:nth-child(2) { opacity: 0; transform: translateX(-14px); }
.header.is-nav-open .burger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* === OVERLAY DE NAVEGAÇÃO === */
.navmenu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: linear-gradient(155deg, #080E29 0%, #101A4C 55%, #0A1132 100%);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.42s ease, visibility 0.42s;
}
.navmenu.is-open { opacity: 1; visibility: visible; }
.navmenu__glow {
  position: absolute;
  top: -20%; right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(44, 92, 232, 0.30) 0%, transparent 68%);
  pointer-events: none;
}
.navmenu__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 60px;
  align-items: center;
  min-height: 100%;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 56px;
}

.navmenu__nav { display: flex; flex-direction: column; }
.navmenu__nav a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.navmenu.is-open .navmenu__nav a { opacity: 1; transform: none; }
.navmenu__nav a:nth-child(1) { transition-delay: 0.10s; }
.navmenu__nav a:nth-child(2) { transition-delay: 0.15s; }
.navmenu__nav a:nth-child(3) { transition-delay: 0.20s; }
.navmenu__nav a:nth-child(4) { transition-delay: 0.25s; }
.navmenu__nav a:nth-child(5) { transition-delay: 0.30s; }
.navmenu__nav a:nth-child(6) { transition-delay: 0.35s; }
.navmenu__nav a:nth-child(7) { transition-delay: 0.40s; }
.navmenu__nav a:nth-child(8) { transition-delay: 0.45s; }
.navmenu__nav a:nth-child(9) { transition-delay: 0.50s; }
.navmenu__nav a:nth-child(10) { transition-delay: 0.55s; }
.navmenu__nav a:nth-child(11) { transition-delay: 0.60s; }

.navmenu__label {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.navmenu__label::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 2px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.navmenu__nav a:hover .navmenu__label { transform: translateX(14px); color: var(--blue-light); }
.navmenu__nav a:hover .navmenu__label::after { transform: scaleX(1); }

.navmenu__aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-left: 46px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.4s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.navmenu.is-open .navmenu__aside { opacity: 1; transform: none; }
.navmenu__block h4 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 11px;
}
.navmenu__block p { font-size: 15px; color: var(--on-dark-soft); line-height: 1.7; }
.navmenu__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  padding: 3px 0;
  transition: color 0.2s ease;
}
.navmenu__contact svg { color: var(--blue-light); }
.navmenu__contact:hover { color: var(--blue-light); }
.navmenu__cta { align-self: flex-start; }
.navmenu__social { display: flex; gap: 11px; }
.navmenu__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.18s ease, transform 0.18s ease;
}
.navmenu__social a:hover { background: var(--blue); transform: translateY(-2px); }

/* === HERO === */
.hero {
  position: relative;
  background: linear-gradient(115deg, #0A1132 0%, #101A4E 55%, #16215E 100%);
  overflow: clip;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  top: -25%; left: 26%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(44, 92, 232, 0.26) 0%, transparent 68%);
  pointer-events: none;
  z-index: 1;
}
.hero__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 57%;
  z-index: 0;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0B1234 0%, rgba(11, 18, 52, 0.86) 16%, rgba(11, 18, 52, 0.34) 40%, transparent 66%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: 680px; padding: calc(var(--nav-h) + 70px) 0 138px; }
.hero__title {
  font-size: clamp(38px, 3.1vw, 55px);
  font-weight: 800;
  line-height: 1.14;
  color: #fff;
  margin-bottom: 24px;
  text-wrap: initial;
  text-shadow: 0 2px 24px rgba(6, 11, 34, 0.45);
}
.hero__text {
  color: var(--on-dark-soft);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.68;
  max-width: 540px;
  margin-bottom: 34px;
}
.hero__actions { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 34px; }

/* === PLACEHOLDERS === */
.placeholder-img {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 15px),
    linear-gradient(150deg, #22326F 0%, #0D1440 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.42);
  position: relative;
}
.placeholder-img[data-placeholder-label]::before {
  content: attr(data-placeholder-label);
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 12px;
  border-radius: 30px;
}

/* === ILHA 1: BARRA DE CONFIANÇA === */
.trust-wrap { position: relative; z-index: 3; }
.trust-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: -62px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-bar__item {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.trust-bar__item:last-child { border-right: none; }
.trust-bar__icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-bar__item strong {
  display: block;
  font-size: 13.5px; font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 1.35;
}
.trust-bar__item span { font-size: 13.5px; color: var(--ink-body); line-height: 1.5; }

/* === COMO FUNCIONA === */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; position: relative; }
.steps__line {
  position: absolute;
  top: 37px; left: 11%; right: 11%;
  border-top: 2px dashed rgba(12, 20, 54, 0.16);
  z-index: 0;
}
.step { text-align: center; position: relative; z-index: 1; }
.step__circle {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  box-shadow: 0 14px 28px -12px rgba(12, 20, 54, 0.5);
}
.step__num {
  position: absolute;
  top: -5px; right: -5px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
}
.step h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.step p { font-size: 14px; color: var(--ink-body); line-height: 1.6; }

/* === SERVIÇOS === */
.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.service-card {
  background: var(--navy-card);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 28px 22px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 135, 255, 0.55);
  background: #1E2C78;
}
.service-card svg { color: var(--blue-light); margin-bottom: 16px; }
.service-card h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.service-card p { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.55; }

/* largura cheia: com o número de serviços variando, uma faixa full-width
   sempre fecha a grade de forma limpa, em vez de sobrar um card sozinho
   numa última linha (acontecia com 11 itens numa grade de 5 colunas) */
.service-card--cta {
  grid-column: 1 / -1;
  background: var(--blue);
  border-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 22px;
}
.service-card--cta:hover { background: #3D6BF2; border-color: transparent; }
.service-card--cta h3 { font-size: 17px; margin-bottom: 6px; }
.service-card--cta p { color: rgba(255, 255, 255, 0.95); }

/* === POR QUE OFICINA PORTO === */
/* conteúdo curto: sem teto de largura as colunas esticam e abrem vãos enormes */
/* ocupa a largura cheia do .container como as demais seções: tinha um
   max-width: 1220px próprio que deixava essa faixa visivelmente mais
   estreita que o resto do site (Serviços, Diferenciais, etc.) */
.why-porto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(44px, 6vw, 120px);
  align-items: center;
  justify-items: center;
}
.why-porto__text { justify-self: stretch; }
.why-porto__text .section__title { margin-bottom: 18px; }
.why-porto__text p { color: var(--ink-body); font-size: 17px; line-height: 1.7; max-width: 46ch; }
/* card claro: fundo branco dá contraste consistente pro logo Porto */
.why-porto__badge {
  width: clamp(250px, 20vw, 320px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  text-align: center;
  box-shadow: 0 26px 50px -24px rgba(12, 20, 54, 0.35);
}
.why-porto__badge img { width: clamp(118px, 9vw, 150px); height: auto; }
.why-porto__badge-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.why-porto__list { display: flex; flex-direction: column; gap: 19px; justify-self: stretch; }
.why-porto__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 16.5px; font-weight: 600;
  color: var(--ink);
}
.why-porto__list svg { color: var(--blue); }

/* === DIFERENCIAIS === */
/* sem column-gap: a separação entre colunas é a divisória + o padding */
.differentials { display: grid; grid-template-columns: repeat(6, 1fr); gap: 38px 0; }
.differential { padding: 2px 28px; border-left: 1px solid rgba(255, 255, 255, 0.13); text-align: center; }
.differential:nth-child(6n + 1) { border-left: none; padding-left: 0; }
.differential:nth-child(6n) { padding-right: 0; }
.differential svg { color: var(--blue-light); margin: 0 auto 18px; display: block; }
.differential h3 { font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.35; }
.differential p { font-size: 13.5px; color: rgba(255, 255, 255, 0.76); line-height: 1.6; }

/* === VANTAGENS === */
/* cada bloco vira um card branco de largura cheia, alinhado ao centro (o
   título da seção já é centralizado, então o conteúdo embaixo também
   precisa ser, senão a página fica com "cabeça centralizada, corpo à
   esquerda"). O bloco de descontos sobrescreve o fundo pra navy. */
.perk-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 46px clamp(22px, 4vw, 56px);
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 22px 50px -32px rgba(12, 20, 54, 0.25);
}
.perk-block:last-child { margin-bottom: 0; }
.perk-eyebrow {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.perk-eyebrow--outline { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); }
.perk-block__title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 auto 14px; max-width: 560px; }
.perk-block__text { color: var(--ink-body); font-size: 15.5px; max-width: 560px; margin: 0 auto 32px; }

.perk-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 46px; }
.perk-checklist__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  width: 168px;
  font-size: 14.5px; font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.perk-checklist__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* faixa navy pra destacar os descontos, mesmo tratamento visual do cta-box */
.perk-block--discounts {
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border-color: transparent;
  box-shadow: 0 30px 60px -30px rgba(12, 20, 54, 0.5);
}
.perk-block--discounts .perk-block__title { color: #fff; }

.discount-stats { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; }
.discount-stat { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 280px; }
.discount-stat__value { display: flex; align-items: baseline; }
/* número com brilho animado passando por cima: chama atenção pro desconto
   sem depender de cor sozinha (pedido explícito de "efeito de texto animado") */
.discount-stat__num {
  font-size: 66px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--blue-light) 50%, #fff 62%, #fff 100%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: perk-shine 3.4s linear infinite;
}
.discount-stat__pct {
  font-size: 30px;
  font-weight: 800;
  color: var(--blue-light);
  margin-left: 2px;
}
.discount-stat p { color: var(--on-dark-soft); font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
.discount-stat p strong { color: #fff; }

@keyframes perk-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -60% 0; }
}

.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.perk-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.perk-card:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 20px 40px -26px rgba(12, 20, 54, 0.28); }
.perk-card__icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.perk-card h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 7px; line-height: 1.3; }
.perk-card p { font-size: 13px; color: var(--ink-body); line-height: 1.5; }

/* bônus de aniversário: reaproveita o mesmo tratamento visual do cta-box
   (faixa navy + ícone em círculo azul sólido) em vez de uma caixa
   pontilhada genérica, pra ficar consistente com o resto do site */
.perk-highlight {
  display: flex;
  align-items: center;
  gap: 22px;
  text-align: left;
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border-radius: 16px;
  padding: 26px 30px;
  box-shadow: 0 24px 46px -28px rgba(12, 20, 54, 0.5);
}
.perk-highlight__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 14px 26px -12px rgba(44, 92, 232, 0.7);
}
.perk-highlight__text strong { display: block; font-size: 16px; color: #fff; margin-bottom: 4px; }
.perk-highlight__text p { font-size: 14px; color: var(--on-dark-soft); line-height: 1.5; }

/* asterisco no título, remete ao aviso logo abaixo */
.perk-asterisk { color: var(--blue); font-weight: 800; margin-left: 1px; }

/* aviso: benefícios exclusivos dependem da apólice de cada segurado. Fica
   logo abaixo do título, ANTES da grade de benefícios (não escondido no
   rodapé do bloco), com contraste forte pra ser impossível de não ver. */
.perk-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  max-width: 640px;
  margin: 0 auto 34px;
  padding: 18px 22px;
  background: var(--blue-soft);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
}
.perk-notice__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.perk-notice p { font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.perk-notice p strong { color: var(--ink); }
.perk-notice a { color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.perk-notice a:hover { color: #3D6BF2; }

/* === PRODUTOS === */
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 820px; margin: 0 auto 46px; }
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 38px -26px rgba(12, 20, 54, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(12, 20, 54, 0.34); }
.product-card__media {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  padding: 22px;
}
/* a arte do Fuel System Cleaner já vem com fundo preto embutido na imagem */
.product-card__media--dark { background: #0B0D12; }
.product-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card__body { padding: 22px 24px 26px; text-align: center; }
.product-card__body h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.product-card__body p { font-size: 14px; color: var(--ink-body); line-height: 1.6; }

/* === AVALIAÇÕES === */
/* carrossel: uma linha só, scroll horizontal nativo (touch/wheel) + setas.
   scroll-snap alinha cada card na borda, scrollbar nativa escondida. */
.reviews-carousel { display: flex; align-items: center; gap: 14px; margin-bottom: 42px; }
.reviews {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 clamp(260px, 27vw, 320px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 16px 38px -24px rgba(12, 20, 54, 0.28);
}
.reviews-arrow {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.reviews-arrow:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.reviews-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.reviews-arrow svg { transform: rotate(90deg); }
.reviews-arrow--next svg { transform: rotate(-90deg); }
.review-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.review-card__head strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.stars { display: flex; gap: 2px; margin-left: auto; color: #F5A623; }
.review-card > p { font-size: 15px; color: var(--ink-body); line-height: 1.65; margin-bottom: 22px; }
.review-card__author { display: flex; align-items: center; gap: 13px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
/* iniciais em vez de foto real: reviewer é pessoa física sem consentimento explícito pra aparecer no site.
   especificidade .avatar.avatar--initial: precisa vencer ".review-card__author span" (cor apagada) */
.avatar.avatar--initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.review-card__author strong { display: block; font-size: 14.5px; color: var(--ink); }
.review-card__author span { font-size: 12.5px; color: var(--ink-dim); }

/* === SOBRE === */
.about { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.about__media { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.about__text .section__title { margin-bottom: 20px; }
.about__text > p { color: var(--ink-body); margin-bottom: 16px; font-size: 15.5px; line-height: 1.7; }
.about__badges { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.about__badges div {
  display: flex; align-items: center; gap: 13px;
  font-size: 14.5px; font-weight: 600;
  color: var(--ink);
}
.about__badges svg { color: var(--blue); flex-shrink: 0; }

/* === FAQ === */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; align-content: start; }
.faq-item {
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  height: fit-content;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.faq-item.is-open { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.faq-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 21px 24px;
  font-size: 15.5px; font-weight: 700;
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
}
.faq-item__q svg { color: var(--blue); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item.is-open .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item__a p { padding: 0 24px 22px; font-size: 14.5px; color: var(--ink-body); line-height: 1.65; }

/* === ILHA 2: CTA === */
.cta-box {
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  box-shadow: 0 30px 60px -30px rgba(12, 20, 54, 0.55);
}
.cta-box__text { display: flex; align-items: center; gap: 22px; }
.cta-box__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 16px 30px -12px rgba(44, 92, 232, 0.7);
}
.cta-box__text h3 { color: #fff; font-size: 24px; font-weight: 800; margin-bottom: 7px; }
.cta-box__text p { color: var(--on-dark-soft); font-size: 15px; line-height: 1.6; max-width: 470px; }

/* === FOOTER === */
.footer { background: var(--black); color: var(--on-dark-dim); padding-top: 68px; }
.footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 50px; }
.brand--footer { margin-bottom: 18px; }
.footer__col p { font-size: 14px; line-height: 1.85; }
.footer__col h4 {
  color: #fff;
  font-size: 13.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer__line { display: flex; align-items: center; gap: 9px; }
.footer__line svg { color: var(--blue-light); }
/* width:100% + wrap liberado: numa coluna estreita de rodapé um .btn
   nowrap (padrão) estoura a largura em vez de encolher */
.footer__cta {
  display: flex;
  width: 100%;
  max-width: 260px;
  margin-top: 16px;
  white-space: normal;
  text-align: center;
}
/* só um dos dois aparece por vez: desktop reaproveita o texto da marca
   (coluna 1), mobile fica embaixo do telefone (coluna que sobra à
   esquerda no grid 2x2) — ver breakpoints abaixo */
.footer__cta--mobile { display: none; }
.footer__social-title { margin-top: 26px; }
.footer__social { display: flex; gap: 11px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer__social a:hover { background: var(--blue); transform: translateY(-2px); }

/* padding-bottom extra = área segura pro FAB do WhatsApp (position:fixed no
   canto inferior direito), senão ele cobre o crédito da direita */
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.09); padding: 22px 0 100px; }
/* 3 colunas (1fr auto 1fr) pro selo do meio ficar centrado de verdade na
   página, mesmo padrão do rodapé do site do Grupo H-Tech */
.footer__bottom-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--on-dark-soft);
}
.footer__bottom-inner > :last-child { justify-self: end; }
.footer__seal { display: flex; align-items: center; gap: 11px; }
/* chip branco: o logo da Porto já vem com fundo branco (jpg), o chip evita
   que a borda da imagem fique visível sobre o rodapé escuro */
.footer__seal img {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 5px;
  padding: 4px 6px;
}
.footer__credit { color: var(--on-dark-soft); opacity: 0.7; transition: opacity 0.2s ease; }
.footer__credit:hover { opacity: 1; }
/* copyright + "Preferências de cookies" (reabre o banner, LGPD: revogar a
   qualquer momento) empilhados na coluna da esquerda, sem tirar o selo do centro */
.footer__legal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer__cookie-prefs {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--on-dark-soft);
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.footer__cookie-prefs:hover,
.footer__cookie-prefs:focus-visible { opacity: 1; }

/* === BOTÃO FLUTUANTE === */
.fab-whatsapp {
  position: fixed;
  right: 28px; bottom: calc(28px + var(--cookie-banner-offset, 0px));
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px -10px rgba(44, 92, 232, 0.7);
  z-index: 90;
  transition: transform 0.15s ease, opacity 0.25s ease, bottom 0.3s ease;
}
.fab-whatsapp:hover { transform: scale(1.08); }
/* some quando o menu está aberto */
body.nav-open .fab-whatsapp { opacity: 0; pointer-events: none; }

/* === CONSENTIMENTO DE COOKIES === */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: rgba(11, 17, 50, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-dark);
  padding: 20px var(--pad-x);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.cookie-consent.is-visible { transform: translateY(0); }
.cookie-consent__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cookie-consent__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 62ch;
}
.cookie-consent__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

@media (max-width: 760px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-consent__text { max-width: none; }
  .cookie-consent__actions .btn { flex: 1; }
}

/* === REVELAÇÃO NO SCROLL === */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
  .discount-stat__num { animation: none; background-position: 0 0; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(3, 1fr); }
  /* 3 colunas: a divisória some no início de cada linha */
  .differentials { grid-template-columns: repeat(3, 1fr); }
  .differential:nth-child(6n + 1) { border-left: 1px solid rgba(255, 255, 255, 0.13); padding-left: 28px; }
  .differential:nth-child(6n) { padding-right: 28px; }
  .differential:nth-child(3n + 1) { border-left: none; padding-left: 0; }
  .differential:nth-child(3n) { padding-right: 0; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  .steps__line { display: none; }
  .hero__media { width: 50%; }
  .about { grid-template-columns: 1fr; gap: 36px; }
  .about__media { height: 300px; }
  .navmenu__label { font-size: 30px; }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .discount-stats { gap: 40px; }
}

@media (max-width: 900px) {
  .navmenu__inner { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .navmenu__aside { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 30px; }
  .navmenu__label { font-size: 27px; }

  /* mobile: a imagem pega a largura toda da tela e fica ENTRE o parágrafo e
     os botões, com o azul de cima esvoaçando pra dentro dela (pedido do
     Rodrigo: não é um frame com margem e canto arredondado).
     display:contents em .hero__inner/.hero__content promove título, texto,
     botões e checks a filhos diretos do .hero — é o que permite intercalar
     a imagem no meio deles com `order`, já que ela é irmã do .hero__content,
     não filha. Em troca some o padding lateral do .container, então cada
     item de texto recupera o seu; a imagem fica sem, de propósito. */
  .hero { display: flex; flex-direction: column; padding-bottom: 72px; }
  .hero__inner,
  .hero__content { display: contents; }

  .hero__title {
    order: 1;
    padding: calc(var(--nav-h) + 38px) var(--pad-x) 0;
    font-size: 38px;
    margin-bottom: 18px;
  }
  .hero__text {
    order: 2;
    padding: 0 var(--pad-x);
    max-width: none;
    margin-bottom: 24px;
  }
  .hero__media { order: 3; }
  .hero__actions { order: 4; padding: 26px var(--pad-x) 0; margin-bottom: 26px; }

  .hero__media {
    position: relative;
    width: auto;
    height: clamp(280px, 42vh, 400px);
    clip-path: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    /* máscara em vez de véu sólido por cima: assim a imagem desaparece
       gradualmente e quem aparece no lugar é o próprio fundo do hero, sem
       risco de emenda de cor (o fundo é um degradê, não uma cor chapada,
       então um véu #0B1234 fixo criaria uma faixa visível) */
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 15%,
      #000 44%,
      #000 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 15%,
      #000 44%,
      #000 82%,
      transparent 100%
    );
  }
  .hero__img { object-position: 50% center; }
  /* o véu diagonal é só do layout desktop */
  .hero__media::after { display: none; }

  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__item:nth-child(2) { border-right: none; }
  .trust-bar__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .why-porto { grid-template-columns: 1fr; text-align: center; gap: 38px; }
  .why-porto__text p { max-width: 540px; margin-left: auto; margin-right: auto; }
  .why-porto__badge { margin: 0 auto; }
  .why-porto__list { align-items: flex-start; max-width: 340px; margin: 0 auto; text-align: left; }

  /* mobile/tablet: setas somem, o scroll por toque já resolve */
  .reviews-arrow { display: none; }
  .review-card { flex-basis: 78%; }
  .faq { grid-template-columns: 1fr; }
  .perk-highlight { flex-direction: column; text-align: center; }
  .products { grid-template-columns: 1fr; max-width: 420px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* 2x2: marca e telefone caem na mesma coluna (esquerda), então o CTA
     migra pro fim dessa coluna, embaixo do telefone, em vez de duplicado */
  .footer__cta--desktop { display: none; }
  .footer__cta--mobile { display: flex; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; --nav-h: 80px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 30px 0; }
  .section__title { font-size: 29px; margin-bottom: 38px; }

  .header__cta { display: none; }
  .burger { margin-left: auto; }
  .burger__label { display: none; }
  .brand__logo { height: 48px; }
  .brand--footer .brand__logo { height: 60px; }
  .brand__tag { display: none; }
  .navmenu__label { font-size: 25px; }
  .navmenu__nav a { padding: 11px 0; gap: 14px; }

  .hero__title { font-size: 30px; }
  .hero__text { font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__media { height: clamp(240px, 38vh, 330px); }

  .trust-bar { grid-template-columns: 1fr; margin-top: 28px; }
  .trust-bar__item { border-right: none; border-bottom: 1px solid var(--line); }
  .trust-bar__item:last-child { border-bottom: none; }

  .steps { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr 1fr; gap: 14px; }
  .service-card { padding: 22px 18px; }
  /* 2 colunas: divisória só na coluna da direita */
  .differentials { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .differential { padding: 2px 18px; }
  .differential:nth-child(3n + 1) { border-left: 1px solid rgba(255, 255, 255, 0.13); padding-left: 18px; }
  .differential:nth-child(3n) { padding-right: 18px; }
  .differential:nth-child(2n + 1) { border-left: none; padding-left: 0; }
  .differential:nth-child(2n) { padding-right: 0; }

  .about__media { height: 220px; }

  .perk-block { padding: 34px 22px; }
  .perk-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .perk-checklist { gap: 24px 30px; }
  .discount-stats { gap: 30px; }
  .discount-stat__num { font-size: 52px; }
  .discount-stat__pct { font-size: 24px; }
  .perk-highlight { padding: 22px; }
  .perk-notice { padding: 16px 18px; gap: 12px; }

  .cta-box { padding: 32px 24px; border-radius: 20px; }
  .cta-box__text { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta-box__text h3 { font-size: 21px; }
  .cta-box .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  /* empilha no mobile, sem virar 3 colunas espremidas */
  .footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__bottom-inner > :last-child { justify-self: auto; }
  .footer__legal { align-items: center; }

  .fab-whatsapp { right: 20px; bottom: calc(20px + var(--cookie-banner-offset, 0px)); width: 54px; height: 54px; }
}