/* =====================================================================
   servicios.html — estilos propios de la página (usa variables de site.css)
   ===================================================================== */

/* ---------- 1. cabecera ---------- */
.svc-hero{position:relative;padding-block:clamp(32px,6vw,72px) clamp(40px,6vw,72px)}
.svc-hero__copy{display:grid;gap:18px;max-width:820px}
.svc-hero__title{font-size:clamp(2rem,4.6vw,3.75rem);line-height:1.04;max-width:20ch;text-wrap:balance}
@media (min-width:1024px){
  .svc-hero__copy{margin-inline:auto;text-align:center;justify-items:center}
  .svc-hero__copy .lead{margin-inline:auto}
  .svc-hero__micro{justify-content:center}
}

/* ruta estática horizontal */
.svc-ruta{margin-top:clamp(32px,5vw,56px);border-top:var(--hair);border-bottom:var(--hair);padding-block:clamp(12px,2vw,20px)}
.svc-ruta .ruta{margin-inline:auto}
.svc-ruta__wide{display:none;max-height:180px}
.svc-ruta__compact{max-width:480px}
@media (min-width:900px){.svc-ruta__wide{display:block}.svc-ruta__compact{display:none}}
.svc-ruta .lbl--n{fill:#0B6FB8;font-weight:600}

/* ---------- 2. lista de servicios ---------- */
.svc-list .row__title{align-items:flex-start}
.svc-list .row__title .ico{margin-top:2px}
.svc-list a.row__data{justify-self:start;transition:color .2s}
@media (min-width:900px){.svc-list a.row__data{justify-self:end}}
@media (hover:hover){.svc-list a.row__data:hover{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px}}
@media (min-width:900px){.svc-list .row{grid-template-columns:80px 1fr 280px}}
.row:hover .row__n{color:var(--primary)}
.row__n{transition:color .2s}

/* ---------- 3. entrega paso a paso ---------- */
.svc-handover{align-items:center}
.svc-handover__media{order:-1}
@media (min-width:1024px){.svc-handover__media{order:0}}
.svc-photo{margin:0;display:grid;gap:12px}
.svc-photo .photo img{object-position:center 38%;filter:contrast(1.04) saturate(1.03)}
.svc-photo figcaption{display:flex;align-items:center;gap:8px}
.svc-photo figcaption::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary-light);flex:none}

.svc-steps{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.svc-steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:16px 0;border-bottom:var(--hair)}
.svc-steps .h3{font-size:1.125rem}

/* ---------- 4. aeropuerto ---------- */
.svc-air{display:grid;gap:24px;align-items:center;background:#fff;border:var(--hair);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px)}
@media (min-width:1024px){.svc-air{grid-template-columns:320px 1fr;gap:48px}.svc-air__route{align-self:stretch;padding-right:48px;border-right:var(--hair)}}
.svc-air__route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.svc-air__code{font:700 1.75rem/1 var(--font-display);letter-spacing:-.01em}
.svc-air__code small{display:block;font:500 .6875rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.svc-air__code--end{text-align:right}
.svc-air__line{position:relative;height:1px;background-image:linear-gradient(90deg,var(--line-strong) 50%,transparent 50%);background-size:8px 1px}
.svc-air__line .ico{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%) rotate(90deg);background:#fff;padding:0 2px;fill:var(--text);stroke:none;box-sizing:content-box}
.svc-air__copy{display:grid;gap:10px}
.svc-air__copy .h2{font-size:clamp(1.5rem,2.4vw,2rem)}
@media (max-width:1023px){.svc-air__route{padding-bottom:20px;border-bottom:var(--hair)}}
@media (max-width:599px){.svc-air .btn{width:100%;white-space:normal;padding-block:12px;line-height:1.25}}

/* ---------- 5. cta ---------- */
.svc-cta .btn-row{justify-content:center}
@media (max-width:599px){.svc-cta .btn-row{flex-direction:column;width:100%}}