/* =============================================================================
   servicios.html — page-only styles (unlayered: wins over @layer f1.*)
   Sections: hero + service index · intro · catalogue rows 01–04 · capabilities ·
             ¿Por qué elegirnos? · FAQ  (ticker + final CTA are shared partials)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. HERO — standard inner hero + shared .page-index strip of the 4 services
   --------------------------------------------------------------------------- */
/* Taller-4 is much brighter than the other hero photos: .overlay--strong in the markup,
   an extra L→R step here, and a soft shadow under the small red/grey text on top of it */
.svc-hero { padding-bottom: var(--sp-l); }
.svc-hero__img { object-position: 72% 50%; }
.svc-hero .overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 25%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 30%, transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 50%, rgba(0,0,0,.4) 100%);
}
.svc-hero .eyebrow,
.svc-hero .breadcrumb { text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }

@media (max-width: 991px) {
  /* text spans most of the width on tablets/phones: darken the whole photo, not only the left side */
  .svc-hero .overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.82) 15%, rgba(0,0,0,.85) 60%, #000 100%);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* the service names are too long for 4 mono columns on tablets ("MANTENIMIE/NTO"):
     use the shared ≤767 two-column layout from 991 down */
  .svc-hero .page-index__list { --page-index-cols: 2; }
  .svc-hero .page-index__list > li:nth-child(odd) { border-left: 0; }
  .svc-hero .page-index__list > li:nth-child(odd) .page-index__link { padding-left: 0; }
  .svc-hero .page-index__list > li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .svc-hero .page-index__link { padding-block: .875rem; }
}
@media (max-width: 767px) {
  .svc-hero { padding-bottom: var(--sp-m); }
}

/* ---------------------------------------------------------------------------
   2. INTRO — text + square photo with brackets
   --------------------------------------------------------------------------- */
.svc-intro .split { --split-gap: var(--sp-2xl); }
.svc-intro__list { width: 100%; max-width: 36rem; margin-block: .25rem; }
.svc-intro__media { padding: var(--sp-s); }
/* the photo's own bottom edge cuts through its "Cajas automaticas F1" watermark: a square frame
   anchored to the top (1280×1405 source) crops that strip off at every width */
.svc-intro__media .media-frame__img { --ratio: 1 / 1; object-position: 50% 0; }
@media (max-width: 991px) {
  .svc-intro__media { max-width: 34rem; }
}
@media (max-width: 767px) {
  .svc-intro__media { padding: .75rem; }
}

/* ---------------------------------------------------------------------------
   3. CATALOGUE — large numbered rows 01–04
   --------------------------------------------------------------------------- */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.svc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: var(--sp-l);
  align-items: start;
  padding: var(--sp-l);
  background: var(--bg-2);
}
.svc__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  font-size: clamp(4.5rem, 2rem + 5.5vw, 9rem);
  line-height: .8;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brand);
  transition: color .6s var(--ease-osmo);
}
.svc:focus-within .svc__num,
.svc:target .svc__num { color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc__num { color: var(--brand); }
}
.svc__head { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
.svc__icon { --icon-size: 2.25rem; color: var(--brand); stroke-width: 1.35; }
.svc__title { font-size: clamp(2.25rem, 1.2rem + 2.3vw, 3.5rem); line-height: .92; max-width: 12ch; }
@media (min-width: 992px) {
  /* use the whole title column: every title sets in 2 balanced lines */
  .svc__title { max-width: none; text-wrap: balance; }
}
.svc__body { display: grid; gap: 1.25rem; align-content: start; justify-items: start; padding-top: .25rem; }
.svc__text { font-size: 1.125rem; line-height: 1.45; letter-spacing: .015em; color: var(--fg-muted); max-width: 50ch; }
.svc__cta { margin-top: .5rem; }

@media (max-width: 1100px) {
  .svc { grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-m); }
}
@media (max-width: 991px) {
  .svc { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-m); }
  .svc__body { grid-column: 1 / -1; }
  .svc__num { font-size: 6rem; min-width: 1.1ch; }
  .svc__title { max-width: 18ch; }
}
@media (max-width: 767px) {
  .svc { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem 1.75rem; row-gap: 1.25rem; }
  .svc__num { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 4rem; -webkit-text-stroke-width: 1px; }
  .svc__head { gap: 1.25rem; padding-right: 4.5rem; }
  .svc__body { grid-column: auto; }
  .svc__text { font-size: 1.0625rem; }
  .svc__cta { width: 100%; }
  .svc__cta .btn { width: 100%; }
  .svc__cta .btn.btn--ready { display: grid; }
}

/* ---------------------------------------------------------------------------
   4. CAPABILITIES — dark, sticky head + 2×2 cards
   --------------------------------------------------------------------------- */
.svc-caps .split { --split-gap: var(--sp-2xl); }
.svc-caps__head .h2 { max-width: 12ch; }
.svc-caps__head .lead { max-width: 38ch; }
.svc-caps__grid .card { min-height: 19rem; }
.svc-caps__grid .card__top { margin-bottom: 3.5rem; }
.svc-caps__grid .card__icon { --icon-size: 2.5rem; }
.svc-caps__grid .card__title { min-height: 2.1em; }   /* titles of 1–2 lines keep texts aligned per row */
@media (max-width: 1199px) {
  /* not enough width for head + 2×2 cards side by side: head becomes a split header on top */
  .svc-caps .split { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-xl); }
  .svc-caps__head { position: static; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--sp-2xl); align-items: end; }
  .svc-caps__head > .eyebrow { grid-column: 1 / -1; }
  .svc-caps__head > .h2 { max-width: 16ch; }
  .svc-caps__head > .lead { padding-bottom: .35rem; }
  .svc-caps__grid .card__title { min-height: 0; }
}
@media (max-width: 991px) {
  .svc-caps__head { grid-template-columns: minmax(0, 1fr); }
  .svc-caps__grid .card { min-height: 0; }
  .svc-caps__grid .card__top { margin-bottom: 2rem; }
  .svc-caps__grid .card__title { min-height: 2.1em; }
}
@media (max-width: 767px) {
  .svc-caps__grid .card__top { margin-bottom: 1.25rem; }
  .svc-caps__grid .card__title { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   6. ¿POR QUÉ ELEGIRNOS? — photo + floating stat card, text + checklist
   --------------------------------------------------------------------------- */
.svc-why .split { --split: 1fr 1.05fr; --split-gap: var(--sp-2xl); }
.svc-why__media { padding: var(--sp-m); }
.svc-why__media .media-frame__img { --ratio: 1 / 1; object-position: 40% 50%; }
.svc-why__list { width: 100%; margin-top: .25rem; }
@media (max-width: 991px) {
  .svc-why__media { max-width: 40rem; }
  .svc-why__media .media-frame__img { --ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .svc-why__media { padding: .75rem; }
  .svc-why__media .float-card { margin-top: -2rem; }
}

/* ---------------------------------------------------------------------------
   7. FAQ
   --------------------------------------------------------------------------- */
.svc-faq .split { --split-gap: var(--sp-2xl); }