/* Página Servicios. Reutiliza header/footer/contacto; aquí solo hero, cinta y catálogo. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hero (mismo banner del home, más bajo) */
.hero--servicios{background:#300 url("../img/banner.webp") center/cover no-repeat;height:auto;min-height:650px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 20px}
.hero--servicios .hero__in{max-width:600px}
.hero--servicios h1{margin:0;font-size:clamp(30px,3.7vw,52px);line-height:1.12;font-weight:600;letter-spacing:-.01em;color:#fff}

/* Catálogo */
.svc{background:#fff;color:#0f172a;padding:clamp(40px,6vw,76px) var(--pad-x) clamp(56px,8vw,104px)}
.svc__intro{max-width:780px;margin:0 auto clamp(36px,5vw,64px);text-align:center;font-size:clamp(13px,1.05vw,15px);line-height:1.7;font-weight:600;color:#000}
.svc__grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}

.svc__card{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid #e6e8ec;border-radius:12px;font-family:var(--font);text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.svc__card img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}
.svc__card-name{display:block;padding:clamp(14px,1.4vw,18px) 16px;font-size:15px;font-weight:700;color:#0f172a;line-height:1.25}
.svc__card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.1)}
.svc__card[aria-expanded="true"]{border:2px solid #de241e;margin:-1px}
.svc__card:focus-visible{outline:3px solid rgba(222,36,30,.45);outline-offset:2px}

/* Panel del servicio elegido: aparece encima de la fila del servicio */
.svc__panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e6e8ec;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.06);scroll-margin-top:16px}
.svc__panel[hidden]{display:none}
.svc__panel-img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
.svc__panel-txt{padding:clamp(24px,3.4vw,48px);align-self:start}
.svc__panel-txt h2{margin:0 0 16px;font-size:clamp(24px,2.5vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#0f172a}
.svc__panel-txt p{margin:0;font-size:clamp(13px,1vw,14.5px);line-height:1.7;font-weight:500;color:#111}
.svc__panel.is-in{animation:svcIn .35s ease both}
@keyframes svcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.svc__panel.is-in{animation:none}.svc__card{transition:none}}

/* Los paneles sin mover se listan al final (sin JS se leen todos); con JS quedan ocultos */
.svc__store{max-width:1160px;margin:12px auto 0;display:grid;gap:12px}
.js .svc__store{display:none}
.js .svc__grid .svc__panel{display:grid}
.js .svc__grid .svc__panel[hidden]{display:none}

/* Contacto en esta página */
.contact--page .contact__title{max-width:none}
.contact--page .contact__intro{margin-bottom:14px;max-width:440px}
.contact--page .contact__list{margin-top:clamp(20px,3vw,36px)}

@media(max-width:900px){
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__panel{grid-template-columns:1fr}
  .svc__panel-img{min-height:0;height:auto;aspect-ratio:1.5}
}
@media(max-width:480px){
  .svc__card-name{font-size:13px;padding:12px}
  .svc__grid{gap:10px}
}