@charset "UTF-8";
/* A página e a história compartilham o mesmo espaço, sem palco isolado. */
.hero .button { gap: 9px; padding-inline: 18px; }
.hero .button .arrow { margin-left: 4px; }
.hero-art::before { background: radial-gradient(ellipse, #d6f5ff, #fff0 70%); }
.hero-wordmark { top: 72%; }
.service-journey {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, #eff8fc 22%, #e5f4fa 65%, #d5f1fa 100%);
  --pipe-x: 84%;
  --actor-size: clamp(230px, 28vw, 380px);
  --repair-y: 42%;
  --finish-y: calc(100% - 260px);
  --fixed: 1;
  --coupling: 1;
  --sealed: 1;
  --leak: 0;
  --pose-frame: 5;
}
.journey-art { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.journey-pipe {
  position: absolute;
  left: var(--pipe-x);
  width: 26px;
  margin-left: -13px;
  border-inline: 1px solid #718fa4;
  background: linear-gradient(90deg, #7892a1, #cedfe5 18%, #f9feff 36%, #a6c9d8 58%, #68869b 85%, #accbd9);
  box-shadow: 5px 0 10px #163b5b12;
}
.journey-pipe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 230px, #648598 231px 233px, #f1faff 234px 238px, #7399ad 239px 242px, transparent 243px 480px);
}
.pipe-upper { top: 0; height: calc(var(--repair-y) - 20px); }
.pipe-lower { top: calc(var(--repair-y) + 20px); bottom: 0; }
.pipe-upper::after, .pipe-lower::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  height: 14px;
  background: linear-gradient(90deg, #7892a1, #f9feff, #68869b);
  clip-path: polygon(0 0,100% 0,100% 80%,70% 50%,50% 100%,30% 55%,0 90%);
}
.pipe-upper::after { bottom: -12px; }
.pipe-lower::after { top: -12px; transform: rotate(180deg); }
.pipe-joint {
  position: absolute;
  left: var(--pipe-x);
  top: var(--repair-y);
  width: 44px;
  height: 82px;
  border: 2px solid #648496;
  border-radius: 8px;
  background: linear-gradient(90deg, #6b899a, #f3fbff 28%, #bcd7e3 60%, #57778d);
  transform: translate(calc(-50% + (1 - var(--coupling)) * 55px), -50%) scaleX(calc(.8 + var(--coupling) * .2));
  opacity: var(--coupling);
}
.pipe-joint::before, .pipe-joint::after { content: ""; position: absolute; inset-inline: -5px; height: 8px; background: linear-gradient(#f3fbff, #557b94); border: 1px solid #6e8c9f; border-radius: 3px; }
.pipe-joint::before { top: 5px; }
.pipe-joint::after { bottom: 5px; }
/* A chave encontra os parafusos da luva antes de a água parar. */
.joint-bolt { position: absolute; left: -6px; width: 13px; height: 13px; background: linear-gradient(135deg, #f8fdff, #688597); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); transform: rotate(var(--tighten, 90deg)); }
.joint-bolt::after { content: ""; position: absolute; inset: 4px; border: 1px solid #496476; border-radius: 50%; }
.bolt-one { top: 27px; }
.bolt-two { bottom: 10px; }
.repair-spray { position: absolute; left: var(--pipe-x); top: var(--repair-y); opacity: var(--leak); }
.repair-spray span { position: absolute; width: 5px; height: 8px; border-radius: 50%; background: #1aa9e5; border: 1px solid #86e5ff; opacity: calc(1 - var(--spray-travel, 0)); transform: translate(calc(var(--dx) * var(--spray-travel, 0)), calc(var(--dy) * var(--spray-travel, 0))); }
.repair-spray span:nth-child(1) { --dx: -40px; --dy: 40px; }
.repair-spray span:nth-child(2) { --dx: 32px; --dy: 65px; }
.repair-spray span:nth-child(3) { --dx: -25px; --dy: 90px; }
.repair-spray span:nth-child(4) { --dx: 20px; --dy: 110px; }
.repair-sealed { position: absolute; left: var(--pipe-x); top: calc(var(--repair-y) + 65px); width: 26px; height: 26px; padding: 4px; border: 1px solid #087b42; border-radius: 50%; color: #087b42; background: #eefbf6; opacity: var(--sealed); transform: translateX(-50%) scale(calc(.7 + var(--sealed) * .3)); }
.journey-leak { position: absolute; left: calc(var(--pipe-x) - 50px); top: var(--repair-y); width: 130px; height: 200px; object-fit: contain; opacity: var(--leak); transform-origin: top; transform: scaleY(calc(.65 + var(--leak) * .35)); }
.journey-actor { position: absolute; width: var(--actor-size); height: var(--actor-size); left: calc(var(--pipe-x) - var(--actor-size) * .935); top: 0; transform: translateY(calc(var(--actor-y, var(--finish-y)) - var(--actor-size) * .56)); filter: drop-shadow(0 10px 9px #163b5b16); }
.journey-pose { width: 100%; height: 100%; overflow: hidden; transform-origin: 93.5% 56%; transform: rotate(var(--effort, 0deg)); }
.journey-pose img { width: 700%; max-width: none; height: 100%; transform: translateX(calc(var(--pose-frame) * -100% / 7)); }
[data-pose="walk-a"] { --pose-frame: 0; }
[data-pose="walk-b"] { --pose-frame: 1; }
[data-pose="lower"] { --pose-frame: 2; }
[data-pose="repair"] { --pose-frame: var(--repair-frame, 3); }
[data-pose="rise"] { --pose-frame: 4; }
[data-pose="done"] { --pose-frame: 5; }
.service-journey > section { position: relative; width: 100%; max-width: 1240px; margin: auto; padding: 100px 5%; }
.service-journey h2 { font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -1.8px; line-height: 1.1; }
.journey-copy, .service-journey .section-heading, .service-cards, .how-intro, .contact-steps, .contact-inner, .faq-inner { width: 57%; max-width: 640px; }
.journey-copy > p:not(.eyebrow), .how-intro > p:not(.eyebrow) { font-size: 17px; line-height: 1.75; color: var(--muted); }
.journey-intro { min-height: 560px; }
.journey-copy .journey-hint { font-size: 12px; color: #557589; margin-top: 32px; }
.motion-toggle { color: var(--ink); border-color: #95afc0; }
.js .motion-toggle { display: inline-flex; }
.service-journey .section-heading { display: block; margin-bottom: 38px; }
.service-journey .section-heading > p { margin-top: 24px; }
.service-cards { display: block; }
.service-card { border: 0; border-top: 1px solid #a9c7d7; border-radius: 0; background: transparent; padding: 30px 0; }
.service-card:last-child { border-bottom: 1px solid #a9c7d7; }
.service-card:hover { transform: none; background: #ffffff36; }
.service-card .card-top { margin-bottom: 16px; }
.service-card .card-top > span { color: #648397; }
.service-card p { max-width: 430px; }
.service-card a { border: 0; margin-top: 0; padding-top: 0; color: var(--blue); }
.service-card .service-icon { width: 36px; height: 36px; }
.service-journey .how-section { display: block; border: 0; }
.contact-steps { margin-top: 44px; }
.contact-steps li { border-color: #a9c7d7; }
.service-journey .contact-section { background: transparent; color: var(--ink); overflow: visible; }
.contact-inner { margin: 0; }
.contact-inner h2 span { color: var(--blue); }
.contact-inner > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.contact-inner .button { background: #087b42; color: white; }
.contact-phone { font-size: 18px; }
.floating-whatsapp { background: #128c4c; border: 2px solid white; box-shadow: 0 6px 22px #07552a33; }
.floating-whatsapp .icon { width: 29px; height: 29px; }
.floating-whatsapp:hover { background: #0b753d; transform: translateY(-3px); }
.header-contact .icon { color: #087b42; }
.button:active, .floating-whatsapp:active { transform: scale(.97); }
@media (min-width: 1400px) { .service-journey { --pipe-x: calc(50% + 425px); } }
@media (max-width: 700px) {
  .hero .button { font-size: 12px; padding-inline: 12px; }
  .hero .button .arrow { display: none; }
  .service-journey { --pipe-x: 89%; --actor-size: 34vw; }
  .service-journey > section { padding: 65px 6%; }
  .journey-copy, .service-journey .section-heading, .service-cards, .how-intro, .contact-steps, .contact-inner, .faq-inner { width: 64%; }
  .service-journey h2 { font-size: clamp(25px, 6.3vw, 36px); letter-spacing: -.8px; }
  .service-journey .eyebrow { font-size: 8px; letter-spacing: 1px; line-height: 1.6; }
  .journey-intro { min-height: 460px; }
  .journey-copy > p:not(.eyebrow), .how-intro > p:not(.eyebrow), .section-heading > p, .service-card p, .contact-inner > p:not(.eyebrow) { font-size: 14px; line-height: 1.65; }
  .service-card { padding: 24px 0; }
  .service-card h3 { font-size: 24px; }
  .service-card a, .text-link { font-size: 12px; gap: 8px; }
  .service-card a .icon { flex-shrink: 0; }
  .contact-steps li { gap: 10px; }
  .contact-steps h3 { font-size: 18px; }
  .contact-steps p { font-size: 13px; }
  .contact-inner .button { font-size: 12px; padding: 12px 10px; gap: 8px; }
  .contact-inner .button .arrow { display: none; }
  .contact-phone { font-size: 14px; }
  .journey-pipe { width: 14px; margin-left: -7px; }
  .pipe-joint { width: 25px; height: 54px; border-radius: 5px; }
  .joint-bolt { width: 8px; height: 8px; left: -4px; }
  .joint-bolt::after { inset: 2px; }
  .bolt-one { top: 16px; }
  .bolt-two { bottom: 8px; }
  .repair-sealed { top: calc(var(--repair-y) + 42px); width: 21px; height: 21px; }
  .journey-leak { width: 70px; height: 130px; left: calc(var(--pipe-x) - 34px); }
  .motion-toggle { font-size: 10px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }
html:not(.js) .journey-actor { top: auto; bottom: 160px; transform: none; }

.faq { padding-top: 56px; padding-bottom: 24px; }
.faq details { border-top: 1px solid #a9c7d7; padding: 18px 0; }
.faq details:last-of-type { border-bottom: 1px solid #a9c7d7; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); line-height: 1.4; }
.faq details p { margin: 12px 0 0; color: var(--muted); line-height: 1.7; max-width: 520px; }