.services-page {
  --services-heading-size: clamp(2rem, 7vw, 5.5rem);
  --services-top: max(clamp(24px, 5svh, 48px), calc(env(safe-area-inset-top) + 24px));
  --services-heading-gap: clamp(20px, 3svh, 32px);
  --services-caption-space: 5rem;
  --services-nav-space: calc(7rem + env(safe-area-inset-bottom));
}
.services-page > .page-shell {
  padding-top: var(--services-top);
  padding-bottom: var(--services-nav-space);
}
.services-page > .page-shell > .page-heading { margin-bottom: var(--services-heading-gap); }
.services-page > .page-shell > .page-heading h1 { font-size: var(--services-heading-size); }
.services-page > .page-shell .work-card {
  scroll-margin-block: var(--services-top) var(--services-nav-space);
}
@media (min-width: 700px) {
  /* Keep the original proportions until the viewport needs a shorter image. */
  .services-page > .page-shell .work-image {
    width: 100%;
    max-height: max(15rem, calc(100svh - var(--services-top) - var(--services-heading-size) * 1.1 - var(--services-heading-gap) - var(--services-caption-space) - var(--services-nav-space)));
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .services-page { --services-caption-space: 7.5rem; }
}
@media (max-width: 699px) {
  .services-page { --services-nav-space: calc(9rem + env(safe-area-inset-bottom)); }
  .services-page > .page-shell .work-caption { flex-wrap: wrap; }
  .services-page > .page-shell .work-name { flex: 1 1 12rem; }
}

#service-dialog > .dialog-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--black);
}
.service-introduction { padding: var(--space-3) var(--space-3) 0; }
.service-introduction h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
}
.service-media { padding: var(--space-3); }
#service-dialog-image,
#service-dialog-video {
  width: 100%;
  height: min(58dvh, 620px);
  object-fit: contain;
  background: var(--black);
}
#service-dialog-caption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
}
/* Let photographs keep their own proportions without letterboxing. */
#service-dialog-image { height: auto; }
#service-dialog-caption strong {
  display: block;
  color: var(--white);
  margin-bottom: 4px;
}
.service-clip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.service-clip-picker button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--control-radius);
  background: var(--black);
  font-size: .875rem;
  line-height: 1.4;
}
.service-clip-picker button[aria-pressed="true"] {
  border-color: var(--yellow);
  color: var(--yellow);
}
.service-clip-picker button:hover { border-color: var(--yellow); }
.service-media-error {
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--black);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}
.service-topics {
  padding: 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}
.service-topics li {
  padding-block: var(--space-2);
  border-top: 1px solid var(--line);
}
.service-topics h3,
.service-related h3 {
  font-size: .9375rem;
  line-height: 1.4;
}
.service-topics p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.service-related {
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.service-related ul { list-style: none; padding: 0; margin: var(--space-1) 0; }
.service-related li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  font-size: .9375rem;
}
.service-related li a span { color: var(--yellow); }
.service-related li a:hover { color: var(--yellow); }
.service-treatment {
  min-width: 0;
  padding: var(--space-3) var(--space-3) 0;
}
.service-benefits {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
  color: var(--muted);
  line-height: 1.6;
}
.service-benefits li::marker { color: var(--yellow); }
.service-treatment h3 { font-size: 1rem; line-height: 1.4; }
.service-treatment-note {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--muted);
  line-height: 1.6;
}
.service-sector { border-top: 1px solid var(--line); }
.service-sector:last-child { border-bottom: 1px solid var(--line); }
.service-sector summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 80px;
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--duration-ui);
}
.service-sector summary::-webkit-details-marker { display: none; }
.service-sector summary:hover,
.service-sector summary:active,
.service-sector[open] > summary { color: var(--yellow); }
.service-sector-name {
  min-width: 0;
  font: 700 1rem/1.4 var(--display);
  font-stretch: 125%;
}
.service-sector-meta {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font: 400 .875rem/1.5 var(--body);
}
.service-sector-toggle { flex-shrink: 0; color: var(--yellow); font-size: 1.75rem; }
.service-sector[open] .service-sector-toggle { font-size: 0; }
.service-sector[open] .service-sector-toggle::after { content: "−"; font-size: 1.75rem; }
.service-sector-body { padding-bottom: var(--space-3); }
.service-sector-body > p,
.service-levels p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.service-sector-body figure { margin-block: var(--space-3); }
.service-sector-body figcaption { margin-top: var(--space-1); color: var(--muted); font-size: .875rem; line-height: 1.6; }
/* Frame the diagram area of each original plate; the explanation remains HTML text. */
.service-diagram {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--diagram-width) / var(--diagram-height);
}
.service-diagram img {
  position: absolute;
  width: calc(108000% / var(--diagram-width));
  max-width: none;
  height: auto;
  left: calc(-100% * var(--diagram-x) / var(--diagram-width));
  top: calc(-100% * var(--diagram-y) / var(--diagram-height));
}
.service-diagram-doors { --diagram-x: 96; --diagram-y: 684; --diagram-width: 880; --diagram-height: 880; }
.service-diagram-floor { --diagram-x: 190; --diagram-y: 704; --diagram-width: 704; --diagram-height: 880; }
.service-diagram-roof { --diagram-x: 96; --diagram-y: 668; --diagram-width: 896; --diagram-height: 908; }
.service-levels { list-style: none; padding: 0; margin: 0; }
.service-levels li + li { margin-top: var(--space-2); }
.service-levels li > span { display: block; color: var(--yellow); margin-bottom: var(--space-1); }
@media (min-width: 700px) {
  #service-dialog .gallery-body { grid-template-columns: 1.15fr 1fr; }
  .service-introduction {
    grid-column: 2;
    grid-row: 1;
    padding: var(--space-4) var(--space-4) 0;
  }
  .service-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: var(--space-4);
  }
  #service-dialog .gallery-information { grid-column: 2; grid-row: 2; padding-top: 0; }
  .service-treatment { grid-column: 2; grid-row: 2; padding-inline: var(--space-4); }
  #service-dialog[data-service="insonorizacion"] .service-media { grid-row: 1 / span 3; align-self: start; }
  #service-dialog[data-service="insonorizacion"] .gallery-information { grid-row: 3; }
}