/* ==========================================================================
   Esgomil — Seções da home (depois da primeira dobra)
   ========================================================================== */
.section { padding-block: var(--space-9); scroll-margin-top: 72px; }
.section--dark { background: var(--color-preto); color: var(--color-branco); }
.section--white { background: var(--surface); }

/* Serviços: 3 colunas, os 2 primeiros em destaque */
.services-full { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.service-card--featured { background: var(--color-amarelo); border-color: var(--color-amarelo); }
.service-card--featured .service-card__text, .service-card--featured .service-card__num { color: var(--color-grafite); }
.service-card--featured:hover { border-color: var(--color-preto); }
.service-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: var(--space-2) var(--space-5); background: var(--color-preto); border-color: var(--color-preto); color: var(--color-branco); }
.service-card--wide .service-card__text, .service-card--wide .service-card__num { color: var(--color-texto-suave-escuro); }
.service-card--wide .service-card__arrow { margin: 0; padding: 0; color: var(--color-amarelo); }
@media (max-width: 760px) { .service-card--wide { grid-template-columns: minmax(0, 1fr); } }
.services-foot { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.services-foot p { margin: 0; color: var(--fg-muted); }

/* Água potável: texto + caminhão de inox chegando */
.water { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-8); align-items: end; }
.water > div:first-child { display: contents; }
.water .section-head { grid-column: 1; margin-bottom: 0 !important; }
.water__uses { grid-column: 2; }
.water__actions { grid-column: 1; margin-top: 0 !important; }
.water__stage { grid-column: 1 / -1; margin-top: var(--space-6); }
.water__uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.water__use { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--radius-md); font-weight: 600; font-size: var(--fs-small); }
.water__drop { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--color-preto); color: var(--color-amarelo); }
.water__drop svg { width: 16px; height: 16px; }
.water__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.water__stage { position: relative; padding-bottom: var(--space-4); min-width: 0; }
.water__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-3); height: 6px; border-radius: 3px; background: var(--tape); opacity: .9; }
/* cena em unidades da imagem do caminhão (900 de largura) + 280 para o Mil */
.water__scene { position: relative; aspect-ratio: 1220 / 330; max-width: 100%; }
.water__scene .truck { position: absolute; left: 0; top: 0; width: 73.77%; }
.water__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
/* Caixa d'água enchendo: a superfície (elipse) sobe do fundo até a borda,
   crescendo em perspectiva. Valores em pixels da imagem da caixa. */
.caixa__water { transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0, 290px) scale(.71, .56); opacity: 0; }
.anim-run .caixa__water { animation: caixa-fill 8s cubic-bezier(.35, 0, .45, 1) 3.6s forwards; }
@keyframes caixa-fill {
  0%   { transform: translate(0, 290px) scale(.71, .56); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate(0, 22px) scale(.97, .95); opacity: 1; }
}
.caixa__ring { transform-box: fill-box; transform-origin: 50% 50%; }
.anim-run .caixa__ring { animation: caixa-ring 1.6s ease-out 3.6s infinite; }
@keyframes caixa-ring { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caixa__water { transform: translate(0, 22px) scale(.97, .95); opacity: 1; animation: none !important; } .caixa__ring { animation: none !important; opacity: 0; } }

/* Como funciona: linha de mangote ligando os passos */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.steps__line { position: absolute; left: 28px; right: 12%; top: calc(var(--space-6) + 28px); height: 14px; transform: translateY(-50%); }

/* Por que a Esgomil: lista + bloco de números */
.why { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.why__list { display: grid; gap: var(--space-6); }
.why__card { position: sticky; top: 104px; background: var(--color-preto); color: var(--color-branco); border-radius: var(--radius-lg); overflow: hidden; }
.why__card-body { padding: var(--space-6); display: grid; gap: var(--space-6); }
.why__card .stat__value { color: var(--color-amarelo); font-size: 3.5rem; }
.why__card .stat__label { color: var(--color-texto-suave-escuro); }
.why__card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.why__card .seal-spin { width: 96px; }
.why__quote { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; line-height: 1.05; }

/* Área de atendimento: lista de cidades + mapa com o caminhão */
.area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.city-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.city-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-pill);
  font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-drip);
}
.city-btn small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--color-preto); color: var(--color-amarelo); padding: 2px 6px; border-radius: var(--radius-pill); }
.city-btn__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-linha); transition: background var(--dur-fast); }
.city-btn:hover { border-color: var(--fg); transform: translateY(-2px); }
.city-btn[aria-pressed="true"] { border-color: var(--color-preto); background: var(--color-amarelo); }
.city-btn[aria-pressed="true"] .city-btn__dot { background: var(--color-preto); }
.city-panel { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-5); background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--radius-md); }
.city-panel__tag { color: var(--fg-muted); }
.city-panel .city__name { margin-top: var(--space-1); }
.city-panel.is-swap .city__name { animation: drop var(--dur-slow) var(--ease-drip) both; }
.area__note { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
.area__note a { color: var(--fg); font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.area__map { position: relative; aspect-ratio: 440 / 400; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: var(--border-w) solid var(--border); box-shadow: var(--shadow-md); background: #F4F1E6; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* cores de mapa: papel, água e estrada. Fixas, não mudam com o tema */
.map__paper { fill: #F4F1E6; }
.map__grid path { stroke: #E4DFCC; stroke-width: 1; }
.map__relief path { fill: none; stroke: #DCD4BA; stroke-width: 1; }
.map__sea { fill: #CFE3EA; }
.map__coast { fill: none; stroke: #9DBFCB; stroke-width: 1.5; }
.map__sea-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; fill: #6F98A6; }
.map__rivers path { fill: none; stroke: #8FC0D2; stroke-width: 3; stroke-linecap: round; }
.map__river-label { font-family: var(--font-body); font-style: italic; font-size: 9px; fill: #5F8B99; }
.map__roads-casing path { fill: none; stroke: #C9C2A8; stroke-width: 7; stroke-linecap: round; }
.map__roads path { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; }
.map__ref circle { fill: #F4F1E6; stroke: #8E8A7C; stroke-width: 1.5; }
.map__ref text { font-family: var(--font-body); font-size: 10px; font-weight: 500; fill: #8E8A7C; paint-order: stroke; stroke: #F4F1E6; stroke-width: 3px; }
.map__scale path { fill: none; stroke: var(--color-grafite); stroke-width: 1.5; }
.map__scale text { font-family: var(--font-mono); font-size: 8.5px; fill: var(--color-grafite); }
.map__shield rect { fill: #FFFFFF; stroke: var(--color-grafite); stroke-width: 1; }
.map__shield text { font-family: var(--font-mono); font-size: 7px; font-weight: 500; fill: var(--color-preto); }
.map-pin { cursor: pointer; outline: none; }
.map-pin__ring { fill: none; stroke: var(--color-preto); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-pin__dot { fill: var(--color-preto); transition: r var(--dur-base) var(--ease-drip); }
.map-pin__core { fill: var(--color-amarelo); }
.map-pin__label { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .02em; fill: var(--color-preto); paint-order: stroke; stroke: #F4F1E6; stroke-width: 4px; stroke-linejoin: round; }
.map-pin__dot { stroke: var(--color-amarelo); stroke-width: 2.5; }
.map-pin.is-active .map-pin__label { fill: var(--color-preto); stroke: var(--color-amarelo); stroke-width: 6px; }
.map-pin:hover .map-pin__dot, .map-pin.is-active .map-pin__dot { r: 9; }
.map-pin.is-active .map-pin__ring { animation: pin-ping 1.6s var(--ease-out) infinite; }
@keyframes pin-ping { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.2); } }
.map-truck__flip { transition: transform var(--dur-base) var(--ease-out); }
.map-truck.is-left .map-truck__flip { transform: scaleX(-1); }
.map-truck.is-moving .map-truck__bob { animation: truck-idle 120ms linear infinite; }
.anim-run .map-pin { animation: pop var(--dur-slow) var(--ease-drip) both; animation-delay: calc(500ms + var(--i) * 90ms); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .map-pin.is-active .map-pin__ring, .map-truck.is-moving .map-truck__bob, .anim-run .map-pin { animation: none; } }

/* Licenças: selos oficiais em cinza, ganham cor no hover */
.licenses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.license { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.license__logo { height: 96px; display: grid; place-items: center; }
.license__logo img { max-height: 96px; max-width: 100%; width: auto; }
.license:hover { transform: translateY(-4px); border-color: var(--color-preto); box-shadow: var(--shadow-md); }
.license__org { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.license__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; line-height: 1.05; }
.license__text { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); }
.licenses-foot { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-5); border: 2px dashed var(--border); border-radius: var(--radius-md); }
.licenses-foot p { margin: 0; max-width: 60ch; }
@media (max-width: 960px) { .licenses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .licenses { grid-template-columns: minmax(0, 1fr); } .license { flex-direction: row; align-items: center; } .license__logo { width: 80px; height: 72px; flex: none; } .license__logo img { max-height: 72px; } }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
.faq-wrap .section-head { position: sticky; top: 104px; align-self: start; }

/* CTA final */
.cta { position: relative; overflow: hidden; }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-6); align-items: end; }
.cta__title { color: var(--color-branco); }
.cta__title .highlight { color: var(--color-preto); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cta__phone { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: var(--color-amarelo); text-decoration: none; line-height: 1; }
.cta__phone--alt { color: var(--color-branco); font-size: clamp(1.5rem, 3vw, 2rem); }
.cta__mil {
  width: 100%; max-width: 360px; justify-self: end; margin-bottom: calc(-1 * var(--space-9));
  /* a base da ilustração é névoa clara: o degradê funde com o fundo preto */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
}

@media (max-width: 960px) {
  .services-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__line { display: none; }
  .water .section-head, .water__uses, .water__actions, .water__stage { grid-column: 1; }
  .water, .why, .area, .faq-wrap, .cta__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .why__card, .faq-wrap .section-head { position: static; }
  .area__map { width: 100%; }
  /* celular: mapa logo depois do título, para ver o caminhão andar ao tocar */
  .area__text { display: contents; }
  .area .section-head { order: 1; margin-bottom: 0; }
  .area__map { order: 2; }
  .city-list { order: 3; }
  .city-panel { order: 4; margin-top: 0; }
  .area__note { order: 5; margin-top: 0; }
  .cta__mil { justify-self: center; max-width: 280px; }
}
@media (max-width: 560px) {
  .section { padding-block: var(--space-8); }
  .services-full, .steps, .water__uses { grid-template-columns: minmax(0, 1fr); }
  .cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}