/* ==========================================================================
   Vital Red — PÁGINAS DE SERVICIO
   ==========================================================================

   Hoja que solo cargan las páginas de servicios/. No toca ni una regla de la
   página principal: todo lo que hay aquí lleva el prefijo `svc-`.

   El resto lo ponen `styles.css` y `responsive.css`: la cáscara (barra
   superior, encabezado, pie, barra inferior), los botones, los antetítulos,
   las preguntas frecuentes, los pasos y la franja de cifras se reutilizan tal
   cual para que la página se sienta el mismo sitio y no haya que mantener dos
   sistemas de diseño en paralelo.

   ORDEN
   1. Rastro de navegación
   2. Portada del servicio
   3. Introducción
   4. Bloques editoriales
   5. Qué puede incluir
   6. Cierre
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rastro de navegación
   Sobrio y pequeño: sitúa al visitante sin robar atención al titular.
   -------------------------------------------------------------------------- */
.svc-migaja {
  padding-block: 18px 0;
  font-size: .85rem;
  color: var(--text-2);
}
.svc-migaja ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-migaja li { display: inline-flex; align-items: center; gap: 10px; }
.svc-migaja li + li::before {
  content: "";
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--gray-300);
}
.svc-migaja a { color: var(--text-2); }
.svc-migaja a:hover { color: var(--blue-600); }
.svc-migaja [aria-current] { color: var(--navy-900); font-weight: 500; }

/* --------------------------------------------------------------------------
   2. Portada del servicio
   Misma gramática que el inicio —texto a la izquierda, fotografía a la
   derecha, fondo claro— para que se lea como una continuación y no como otra
   plantilla. Sin velo dramático: la fotografía va limpia.
   -------------------------------------------------------------------------- */
.svc-portada { padding-block: clamp(28px, 4vw, 56px) clamp(46px, 6vw, 84px); }
.svc-portada__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.svc-portada__texto { max-inline-size: 60ch; }
.svc-portada__titulo {
  margin: 10px 0 0;
  font-size: clamp(2.05rem, 1.2rem + 3.1vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  text-transform: uppercase;
  color: var(--navy-900);
  text-wrap: balance;
}
.svc-portada__bajada {
  max-inline-size: 54ch;
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}
.svc-portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 34px);
}
.svc-portada__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
}
.svc-portada__media img,
.svc-portada__media picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Filete de marca en el canto superior de la fotografía: el mismo gesto de los
   aros del logotipo, en pequeño. */
.svc-portada__media::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 52%, var(--red-600) 100%);
}

/* --------------------------------------------------------------------------
   2 bis. Aviso destacado
   El recordatorio del 911. Aparece una sola vez en cuerpo de página, con el
   filete rojo de marca a la izquierda: se reconoce como aviso sin necesidad de
   un icono de alerta ni de un fondo de color fuerte.
   -------------------------------------------------------------------------- */
.svc-aviso {
  max-inline-size: 74ch;
  margin: 0 0 clamp(34px, 5vw, 60px);
  padding: 16px 20px 16px 22px;
  border-inline-start: 3px solid var(--red-600);
  border-radius: 0 10px 10px 0;
  background: var(--gray-050);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   3. Introducción
   Una sola columna de prosa ancha, con la entrada destacada y la aclaración
   de condiciones al pie, separada por un filete.
   -------------------------------------------------------------------------- */
.svc-intro__cuerpo { max-inline-size: 74ch; }
.svc-intro__cuerpo p { margin: 0 0 1.05em; }
.svc-intro__cuerpo p:last-child { margin-bottom: 0; }
.svc-intro__aviso {
  max-inline-size: 74ch;
  margin: clamp(26px, 3vw, 34px) 0 0;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   4. Bloques editoriales
   Dos formas, según haya fotografía o no. Con fotografía, dos columnas que
   alternan de lado. Sin fotografía, una tira tipográfica: el rótulo a la
   izquierda y el texto a la derecha, separados por un filete. Ninguna de las
   dos usa tarjeta, sombra ni icono.
   -------------------------------------------------------------------------- */
.svc-bloques { display: grid; gap: clamp(46px, 6vw, 88px); }

.svc-bloque--foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
/* Los pares invierten el orden: la lectura zigzaguea en vez de caer siempre
   por el mismo lado. */
.svc-bloque--foto:nth-of-type(even) .svc-bloque__media { order: -1; }
.svc-bloque__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
}
.svc-bloque__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.svc-bloque__texto { max-inline-size: 56ch; }
.svc-bloque__titulo {
  margin: 8px 0 .5em;
  font-size: clamp(1.32rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.2;
  color: var(--navy-900);
  text-wrap: balance;
}
.svc-bloque__texto p { margin: 0; line-height: 1.68; color: var(--text-2); }

.svc-bloque--texto {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 52px);
  padding-block-start: clamp(26px, 3vw, 38px);
  border-block-start: 1px solid var(--line);
}
.svc-bloque--texto .svc-bloque__titulo { margin-block-start: 6px; }

/* --------------------------------------------------------------------------
   5. Qué puede incluir
   Retícula numerada, misma familia que los servicios de salud del inicio:
   número pequeño, nombre con presencia, descripción debajo y filete fino.
   Sin iconos y sin tarjeta.
   -------------------------------------------------------------------------- */
.svc-incluye {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.svc-incluye li {
  padding-block: clamp(22px, 2.6vw, 30px);
  border-block-start: 1px solid var(--line);
}
/* La primera fila no lleva filete arriba: lo pone la cabecera de la sección. */
.svc-incluye li:nth-child(-n + 3) { border-block-start: 0; padding-block-start: 0; }
.svc-incluye__n {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
}
.svc-incluye__nombre {
  margin: 0 0 .42em;
  font-size: 1.04rem;
  line-height: 1.3;
  color: var(--navy-900);
  text-wrap: balance;
}
.svc-incluye__texto { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-2); }

/* --------------------------------------------------------------------------
   5 bis. Proceso de solicitud
   Reutiliza `.pasos` y `.paso` del inicio. Aquí no hay fotografía al lado, así
   que la escalera se centra y se le pone medida para que las líneas no crucen
   toda la pantalla en un monitor ancho.
   -------------------------------------------------------------------------- */
.svc-proceso .pasos,
.svc-proceso .section__head,
.svc-proceso .pasos__cierre { max-inline-size: 760px; }

/* --------------------------------------------------------------------------
   6. Cierre
   Panel oscuro con el titular a la izquierda y los tres canales a la derecha.
   Es el mismo azul marino de las secciones oscuras del inicio.
   -------------------------------------------------------------------------- */
.svc-cierre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(30px, 4.5vw, 70px);
  align-items: center;
}
.svc-cierre__titulo {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}
.svc-cierre__texto {
  max-inline-size: 46ch;
  margin: 16px 0 0;
  line-height: 1.65;
  color: var(--text-inv-2);
}
.svc-cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.svc-canales { margin: 0; padding: 0; list-style: none; }
.svc-canales li { padding-block: 16px; border-block-start: 1px solid rgba(255, 255, 255, .16); }
.svc-canales li:first-child { border-block-start: 0; padding-block-start: 0; }
.svc-canales__rotulo {
  display: block;
  margin-bottom: 4px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-200);
}
.svc-canales a {
  font-family: var(--font-display);
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}
.svc-canales a:hover { color: var(--blue-200); text-decoration: none; }