/* =========================================================
   Rdetail — páginas de serviço (/servicos/*)
   Complementa style.css: reaproveita botões, kicker, h2, seções, CTA e rodapé da home.
   ========================================================= */

/* ============ HERO ============ */
.sp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88vh, 820px); display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 64px) 0 clamp(64px, 9vw, 110px);
}
.sp-hero-media { position: absolute; inset: 0; z-index: -3; }
.sp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: spZoom 1.6s var(--ease) both; }
@keyframes spZoom { from { transform: scale(1.08); filter: brightness(.6); } }
.sp-hero-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(10,10,11,.9) 34%, rgba(10,10,11,.35) 64%, rgba(10,10,11,.1) 100%),
    linear-gradient(0deg, var(--black) 0%, transparent 34%),
    linear-gradient(180deg, rgba(10,10,11,.8) 0%, transparent 22%);
}
.sp-hero-speed { right: 6%; bottom: 12%; width: 22vw; height: 110px; z-index: -1; grid-template-rows: 1fr .7fr .45fr; }
.sp-hero-speed i:nth-child(2) { width: 80%; margin-left: auto; opacity: .7; }
.sp-hero-speed i:nth-child(3) { width: 55%; margin-left: auto; opacity: .45; }
.sp-hero-speed i { animation: speedIn 1.1s var(--ease) both; }
.sp-hero-content { position: relative; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 26px; padding: 0; list-style: none; font: 600 12px/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--red); }
.crumbs a { color: var(--silver); transition: color .25s; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }

.sp-title {
  font-size: clamp(38px, 5.4vw, 76px); font-weight: 900; letter-spacing: -.015em; line-height: .98;
  max-width: 16ch; margin-bottom: 26px; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.sp-title em {
  display: block; font-style: italic; font-weight: 900; color: transparent; padding-right: .06em;
  background: linear-gradient(100deg, var(--white) 0%, var(--silver) 45%, var(--red-hot) 46%, var(--red) 100%);
  background-size: 220% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.4s var(--ease);
}
.sp-title.is-in em, html:not(.js) .sp-title em { background-position: 100% 0; }
.sp-lead { max-width: 580px; font-size: clamp(17px, 1.4vw, 19px); color: #c3c6cc; margin-bottom: 36px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============ INTRO ============ */
.sp-intro { background: var(--black); }
.sp-intro-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.sp-intro-text { position: relative; isolation: isolate; }
.sp-intro-text .h2 { margin-bottom: 28px; }
.sp-intro-text p:not(.kicker) { font-size: 18px; }
.sp-signs {
  position: relative; padding: 34px 30px 32px;
  background: linear-gradient(160deg, var(--graphite), #0e0f11); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.sp-signs::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--red); }
.sp-signs h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; }
.sp-signs ul { margin-bottom: 28px; }
.sp-signs li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); color: var(--silver); }
.sp-signs li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 6px; border-left: 2px solid var(--red-hot); border-bottom: 2px solid var(--red-hot); transform: rotate(-45deg); }

/* ============ BENEFÍCIOS ============ */
.sp-benefits { background: linear-gradient(180deg, var(--ink), #0c0d0f 70%, var(--black)); }
.sp-ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-ben {
  position: relative; padding: 32px 28px 30px;
  background: linear-gradient(160deg, var(--graphite), #0e0f11); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: border-color .35s, transform .45s var(--ease);
}
.sp-ben::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--red); transition: height .5s var(--ease); }
.sp-ben:hover { border-color: #3a3d44; transform: translateY(-4px); }
.sp-ben:hover::before { height: 100%; }
.sp-ben-n { display: block; font: italic 900 15px/1 var(--font-display); color: var(--red); letter-spacing: .08em; margin-bottom: 18px; }
.sp-ben h3 { font-size: 21px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.sp-ben p { color: var(--gray); font-size: 16px; margin: 0; }

/* ============ PROCESSO ============ */
.sp-process { background: var(--black); }
.sp-steps { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.sp-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: linear-gradient(90deg, var(--red), var(--line) 70%); }
.sp-step { position: relative; padding: 0 22px 0 0; counter-increment: passo; }
.sp-step::before {
  content: counter(passo, decimal-leading-zero); position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px;
  font: italic 900 18px/1 var(--font-display); color: #fff; background: var(--red);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sp-step h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.sp-step p { color: var(--gray); font-size: 16px; margin: 0; }

/* ============ FOTOS ============ */
.sp-photos { background: linear-gradient(180deg, var(--ink), var(--black)); }
.sp-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp-photo-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.sp-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite); }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sp-photo:hover img { transform: scale(1.05); }
.sp-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px;
  font: 700 13px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--white);
  background: linear-gradient(0deg, rgba(10,10,11,.92), transparent);
}
.sp-photo figcaption::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 10px; vertical-align: 4px; background: var(--red); transform: skewX(-30deg); }

/* ============ FAQ ============ */
.sp-faq { background: var(--black); }
.sp-faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.sp-faq-grid .section-head { margin-bottom: 0; }
.sp-q { border-bottom: 1px solid var(--line); }
.sp-q:first-child { border-top: 1px solid var(--line); }
.sp-q summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0;
  font: 700 19px/1.3 var(--font-display); color: var(--white); transition: color .25s;
}
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--font-display); color: var(--red-hot); transition: transform .35s var(--ease); }
.sp-q[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sp-q summary:hover { color: var(--red-hot); }
.sp-q p { color: var(--gray); margin: 0 0 24px; max-width: 64ch; }

/* ============ ÁREA ATENDIDA ============ */
.sp-area { background: linear-gradient(180deg, var(--ink), #0c0d0f); }
.sp-area-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.sp-area .h2 { margin-bottom: 22px; }
.sp-cities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sp-cities li { position: relative; padding: 10px 18px; font: 700 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--white); isolation: isolate; }
.sp-cities li::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); background: rgba(255,255,255,.03); transform: skewX(-14deg); }
.sp-address { display: grid; grid-template-columns: auto 1fr; gap: 16px 18px; padding: 34px 30px; font-style: normal; background: var(--graphite); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.sp-address .ico { color: var(--red-hot); }
.sp-address b { color: var(--white); font-family: var(--font-display); font-size: 18px; }
.sp-address .btn { grid-column: 1 / -1; justify-self: start; margin-left: 6px; }

/* ============ RELACIONADOS ============ */
.sp-related { background: var(--black); }
.sp-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-rel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--graphite); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.sp-rel img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1s var(--ease), filter .4s; }
.sp-rel span {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  font: 800 20px/1.15 var(--font-display); text-transform: uppercase; color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sp-rel span::after { content: ""; flex: none; width: 10px; height: 10px; border-top: 2px solid var(--red-hot); border-right: 2px solid var(--red-hot); transform: rotate(45deg); transition: transform .3s var(--ease); }
.sp-rel::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.sp-rel:hover img { transform: scale(1.06); filter: brightness(.75); }
.sp-rel:hover::before { transform: scaleX(1); }
.sp-rel:hover span::after { transform: translateX(4px) rotate(45deg); }

/* ============ RODAPÉ ============ */
.pg-servico .footer-grid { grid-template-columns: 1.3fr 1.4fr 1fr; }
.f-col--wide ul { columns: 2; column-gap: 28px; }
.f-col--wide li { break-inside: avoid; }
.photo-credit { opacity: .8; }

/* ============ RESPONSIVO ============ */
@media (max-width: 960px) {
  .sp-intro-grid, .sp-faq-grid, .sp-area-grid { grid-template-columns: 1fr; }
  .sp-ben-grid, .sp-rel-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-steps { grid-template-columns: 1fr; gap: 26px; }
  .sp-steps::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--red), var(--line) 80%); }
  .sp-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 22px; padding: 0; }
  .sp-step::before { grid-row: span 2; margin: 0; }
  .sp-step h3 { align-self: end; }
  .sp-hero-speed { display: none; }
  .pg-servico .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sp-hero { min-height: 92svh; padding-bottom: 56px; }
  .sp-hero-media img { object-position: 50% 30%; }
  .sp-hero-shade { background: linear-gradient(0deg, var(--black) 30%, rgba(10,10,11,.82) 55%, rgba(10,10,11,.25) 80%, rgba(10,10,11,.7) 100%); }
  .sp-title { font-size: clamp(32px, 9.4vw, 44px); }
  .sp-actions .btn { flex: 1 1 100%; width: calc(100% - 12px); margin-left: 6px; }
  .sp-ben-grid, .sp-rel-grid, .sp-photo-grid, .sp-photo-grid--2 { grid-template-columns: 1fr; }
  .sp-photo { aspect-ratio: 4 / 4.4; }
  .sp-q summary { font-size: 17px; }
  .pg-servico .footer-grid { grid-template-columns: 1fr; }
  .f-col--wide ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-hero-media img { animation: none; }
}