/* ============================================================
   site.css — TOPOGRAFIA PIRITUBA
   Componentes: hero petróleo com curvas de nível, folha de planta
   com o selo, grade de serviços, guia "qual serviço eu preciso",
   equipamentos, quem somos + passos, FAQ e contato.
   ============================================================ */

/* ---------- cabeçalho ---------- */

.header { border-bottom: 1px solid var(--border); }
.logo { gap: 12px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.logo-img { width: 44px; height: 44px; flex: none; }
.nav a:not(.btn) { color: var(--body); }
.nav a:not(.btn):hover { color: var(--laranja-texto); }
@media (min-width: 861px) and (max-width: 1080px) {
  .nav { gap: 20px; }
  .nav a { font-size: 14px; }
  .logo span { font-size: 16px; }
}
@media (max-width: 380px) {
  .logo { font-size: 16px; gap: 9px; }
  .logo-img { width: 38px; height: 38px; }
}

/* ---------- botões ---------- */

.btn-primary:hover { background: var(--primary-hover); }
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- cabeçalho de seção ---------- */

.eyebrow { color: var(--laranja-texto); }
.eyebrow::before {
  content: '';
  width: 18px; height: 2px;
  background: currentColor;
}
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head h2,
.h2 {
  max-width: 22ch;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.04;
  margin-block: 14px 16px;
}
.section-head .lead { max-width: 60ch; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px);
  color: #fff;
  background-color: var(--petroleo-fundo);
  /* curvas de nível desenhadas em SVG — o elemento gráfico do ramo */
  background-image:
    radial-gradient(120% 90% at 85% 10%, rgba(25, 82, 107, .95) 0%, rgba(14, 52, 69, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-40 420c90-60 160-40 230 10s150 70 240 0 170-60 250-10'/%3E%3Cpath d='M-40 460c90-60 170-30 240 20s150 60 240-10 170-50 240 0'/%3E%3Cpath d='M-40 380c80-70 160-60 230-10s150 70 240 0 160-70 250-20'/%3E%3Cpath d='M-40 340c80-80 150-80 230-30s160 60 240-10 160-80 250-40'/%3E%3Cpath d='M-40 300c70-90 150-100 230-50s160 50 240-20 160-90 250-60'/%3E%3Cpath d='M-40 510c100-50 170-20 240 30s160 50 240-20 160-40 240 10'/%3E%3Cpath d='M-40 560c100-40 180-10 250 30s160 40 230-20 160-30 240 10'/%3E%3Cpath d='M-40 250c60-90 150-120 230-70s160 40 240-30 160-100 250-80'/%3E%3Cpath d='M-40 200c60-90 150-130 230-90s160 30 240-40 160-100 250-100'/%3E%3Cpath d='M-40 150c60-80 150-130 230-100s160 20 240-50 160-90 250-110'/%3E%3C/svg%3E");
  background-size: auto, 640px 640px;
}
.hero-grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
@media (min-width: 981px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.hero .eyebrow { color: var(--laranja); }
.hero h1 {
  max-width: 17ch;
  margin-block: 18px 22px;
  color: #fff;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.03em;
}
.hero h1 em { font-style: normal; color: var(--laranja); }
.hero .lead { max-width: 52ch; color: rgba(255, 255, 255, .82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-fatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 40px 0 0;
  max-width: 560px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-fatos > div { padding: 18px 16px 0 0; }
.hero-fatos > div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .18); }
.hero-fatos dt {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-fatos dd { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .72); }

/* folha de planta com o selo sobreposto */
.hero-folha {
  position: relative;
  margin: 0;
  padding: 12px 12px 0;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.2deg);
}
.hero-folha .folha-img { width: 100%; height: auto; border-radius: 6px; }
.hero-folha figcaption {
  padding: 12px 4px 14px;
  font-size: 13px;
  color: var(--muted);
}
.folha-selo {
  position: absolute;
  left: -22px;
  bottom: -30px;
  width: clamp(96px, 12vw, 150px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35));
  transform: rotate(1.2deg);
}
@media (max-width: 980px) {
  .hero-folha { margin-inline: 8px 4px; }
  .folha-selo { left: auto; right: -8px; bottom: -34px; }
}
@media (max-width: 480px) {
  .hero-fatos > div { padding-right: 10px; }
  .hero-fatos > div + div { padding-left: 10px; }
  .hero-fatos dd { font-size: 13px; }
}

/* ---------- serviços ---------- */

.servicos {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.servicos > * { min-width: 0; }

.servico {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.servico:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.servico-foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.servico-foto img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.servico-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--card-p); }
.servico-n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--laranja-texto);
}
.servico h3 { margin: 6px 0 8px; font-size: var(--fs-h3); font-weight: 700; }
.servico p { color: var(--muted); font-size: 15px; }
.servico-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  font-size: 15px;
  color: var(--petroleo);
}
.servico-link:hover { color: var(--laranja-texto); }
.servico-link svg { transition: transform var(--dur) var(--ease); }
.servico-link:hover svg { transform: translateX(3px); }

/* ---------- guia: qual serviço eu preciso ---------- */

.guia-sec { background: var(--surface); }
.guia {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .guia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .guia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia > * { min-width: 0; }
.guia-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 20px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--laranja);
}
.guia-caso {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.guia-caso::before { content: '“'; color: var(--laranja); margin-right: 2px; }
.guia-caso::after { content: '”'; color: var(--laranja); margin-left: 1px; }
.guia-servico { display: grid; gap: 2px; }
.guia-servico .k,
.pagamento .k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.guia-servico strong { color: var(--petroleo); font-size: 16px; }
.guia-cta { margin-top: 32px; }
@media (max-width: 619px) {
  .guia-cta .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- equipamentos ---------- */

.equip {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .equip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.equip > * { min-width: 0; }
.equip-foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border);
}
.equip-foto img { width: 100%; height: 100%; object-fit: cover; }
.equip-card:nth-child(3) .equip-foto img,
.equip-card:nth-child(4) .equip-foto img { object-fit: contain; padding: 10px; }
.equip-card h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 6px; }
.equip-card p { color: var(--muted); font-size: 15px; }

/* ---------- quem somos + passos ---------- */

.sobre-sec { background: var(--petroleo-soft); }
.sobre-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) { .sobre-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sobre-texto { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 60ch; }
.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--ink); }
.checks svg {
  flex: none;
  width: 26px; height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--ink);
}
.pagamento { display: grid; gap: 10px; margin-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.passos-box {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background: var(--petroleo-fundo);
  color: #fff;
}
.passos-box .eyebrow { color: var(--laranja); }
.passos-titulo { margin: 12px 0 24px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; }
.passos { display: grid; gap: 0; counter-reset: none; }
.passos li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.passo-n {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
}
.passos h4 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.passos p { color: rgba(255, 255, 255, .75); font-size: 15px; }

/* ---------- FAQ ---------- */

.contact-grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 981px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.faq-q { min-height: 44px; }

/* ---------- contato ---------- */

.contato-sec { background: var(--surface); }
.contact-list { display: grid; gap: 11px; margin-top: 26px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
}
a.contact-item:hover { border-color: var(--laranja); }
.contact-item .icon-badge { margin: 0; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--laranja-soft); color: var(--laranja-texto); }
.contact-item .icon-badge svg { width: 18px; height: 18px; }
.contact-item .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-item .v { font-size: 16px; font-weight: 700; color: var(--ink); }

.contact-form {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.form-rows { display: grid; gap: 15px; }
.form-rows .row-2 { display: grid; gap: 15px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .form-rows .row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field input, .field select { min-height: 48px; }
.form-status { color: var(--petroleo); }
.form-note { color: var(--muted); }
.contact-form .btn { white-space: normal; }

/* ---------- rodapé ---------- */

.footer { border-top: 0; }
.footer-logo { color: var(--footer-fg); }
.footer-sobre { margin-top: 16px; max-width: 42ch; opacity: .78; font-size: 15px; }
@media (min-width: 861px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); }
}
.footer-links > span { opacity: .78; }

/* sétimo serviço fecha a grade em linha inteira, com a foto ao lado */
@media (min-width: 620px) {
  .servico:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .servico:last-child:nth-child(odd) .servico-foto { flex: 0 0 50%; aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--border); }
}
@media (min-width: 1000px) {
  .servico:last-child:nth-child(odd) .servico-foto { flex-basis: 66.6%; }
}
@media (min-width: 981px) { .hero-folha figcaption { padding-left: 130px; } }
@media (min-width: 620px) { .servico:last-child:nth-child(odd) .servico-foto { max-height: 300px; } }
.hero-fatos dd { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }