/* ==========================================================================
   AV Diagnostico v4 — servicios.css  (#servicios)
   Bloque agregado el 2026-08-25: credenciales + lista completa de
   prestaciones. Va DESPUES del sticky-stack de areas, en flujo normal.

   Composicion, distinta de las otras secciones a proposito (cada una tiene su
   gesto): las CREDENCIALES entran primero como una banda de tres columnas
   sobre fondo suave, y recien despues el titulo. Es al reves que el resto del
   sitio, donde el titulo abre. El motivo es el pedido del laboratorio: la
   habilitacion y la direccion tecnica tienen que leerse antes que nada y no
   quedar escondidas.

   Geometria: radius 0 en todo (regla del sistema; la unica pieza redondeada
   del sitio es la isla del nav). Sin fondo de color: se apoya en --bg-soft y
   en hairlines, para no competir con los tres mundos de color de las areas
   que vienen justo arriba.
   ========================================================================== */

#servicios {
  position: relative;
  z-index: 1;                 /* por encima de la ultima .area, que es sticky */
  background: var(--bg);
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);
}
#servicios .srv__inner { width: var(--container); margin: 0 auto; }

/* ============================================================ 1. CREDENCIALES
   Banda institucional. Fondo --bg-soft y un filete teal arriba: el unico
   momento del bloque con color de marca, porque es el dato que el laboratorio
   pidio destacar. */
#servicios .srv__cred {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px);
  background: var(--bg-soft);
  border-top: 2px solid var(--teal);
  border-bottom: 1px solid var(--rule);
}
#servicios .srv__cred-k {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
#servicios .srv__cred-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
/* El separador es un borde en el item, no un elemento: asi desaparece solo
   cuando la grilla se apila en telefono. */
#servicios .srv__cred-item + .srv__cred-item {
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--rule);
}
#servicios .srv__cred-lab {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-deep);
}
#servicios .srv__cred-val {
  margin: 0;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
/* La matricula en mono y con numeros tabulares: es un registro, se lee como
   dato, no como texto corrido. Los guiones van tal cual el certificado. */
#servicios .srv__cred-mp {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: .8125rem; letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-2);
}
/* Alcance de un registro. Va en sans y no en mono porque no es un numero: es
   la aclaracion de QUE cubre, y sin ella el RNE se lee como si respaldara la
   actividad clinica. --ink-2 y no --dim: sobre --bg-soft, --dim da 4.13:1 y a
   este cuerpo hace falta 4.5 para AA. */
#servicios .srv__cred-scope {
  margin: 7px 0 0;
  font-family: var(--sans);
  font-size: .8125rem; line-height: 1.45;
  color: var(--ink-2);
}

/* ============================================================ 2. CABECERA */
#servicios .srv__head { margin: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 52px); max-width: 46ch; }
#servicios .srv__eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
#servicios .srv__dot {
  width: 6px; height: 6px; flex: none;
  background: var(--violet);            /* el golpe de acento, 6px, nunca superficie */
}
#servicios .srv__title {
  margin: 0;
  font-family: var(--serif); font-weight: 460;
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
#servicios .srv__title em { font-style: italic; color: var(--teal-deep); }
#servicios .srv__deck {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: var(--sans);
  font-size: var(--fs-deck); line-height: 1.55;
  color: var(--ink-2);
}

/* ============================================================ 3. GRUPOS
   Tres columnas con filete superior. Sin tarjeta ni sombra: la separacion la
   da el hairline, igual que en el resto del sitio. */
#servicios .srv__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
}
#servicios .srv__group { padding-top: 16px; border-top: 1px solid var(--ink); }
#servicios .srv__group-title {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
#servicios .srv__list { list-style: none; margin: 0; padding: 0; }
#servicios .srv__item {
  position: relative;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--fs-body); line-height: 1.45;
  color: var(--ink-2);
}
/* marca cuadrada de 5px, no bullet: la geometria del sitio es cuadrada */
#servicios .srv__item::before {
  content: ''; position: absolute; left: 0; top: 1.1em;
  width: 5px; height: 5px;
  background: var(--teal);
}

/* ============================================================ 4. PIE
   Plazo de resultados + CTA. El plazo NO es una promesa general: el
   "habituales / segun la determinacion" es parte del dato y no se recorta. */
#servicios .srv__foot {
  margin-top: clamp(36px, 4.5vw, 60px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
#servicios .srv__note {
  margin: 0;
  max-width: 52ch;
  font-family: var(--sans);
  font-size: var(--fs-body); line-height: 1.55;
  color: var(--ink-2);
}
#servicios .srv__note strong { color: var(--ink); font-weight: 600; }
#servicios .srv__cta { flex: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  #servicios .srv__cred-list { grid-template-columns: 1fr 1fr; }
  /* Al pasar a dos columnas, el separador vertical solo va entre pares: en el
     item 3 (que arranca fila nueva) sobraria un borde suelto a la izquierda. */
  #servicios .srv__cred-item + .srv__cred-item { padding-left: clamp(16px, 2.5vw, 28px); }
  #servicios .srv__cred-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  #servicios .srv__cred-item:nth-child(n+3) { padding-top: 18px; border-top: 1px solid var(--rule); }
  #servicios .srv__groups { grid-template-columns: 1fr 1fr; }
  #servicios .srv__group:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  #servicios .srv__cred { padding-inline: clamp(16px, 4vw, 22px); }
  #servicios .srv__cred-list { grid-template-columns: 1fr; gap: 0; }
  #servicios .srv__cred-item + .srv__cred-item {
    padding-left: 0; border-left: 0;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule);
  }
  #servicios .srv__groups { grid-template-columns: 1fr; }
  #servicios .srv__group:nth-child(3) { grid-column: auto; }
  #servicios .srv__foot { flex-direction: column; align-items: stretch; }
  #servicios .srv__cta { width: 100%; justify-content: center; }
}

/* Nada de estado inicial en CSS: el motion de servicios.js usa gsap.from, que
   pone el estado de partida el mismo y solo si GSAP existe. Un opacity:0 aca
   dejaria la seccion invisible en un navegador sin GSAP. */