/* ==========================================================================
   Vital Red — PÁGINAS DE SERVICIO · adaptación por tamaño de pantalla
   Puntos de control revisados: 1366 · 1024 · 900 · 768 · 620 · 430 · 360 · 320
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1024px · las composiciones de dos columnas pasan a una
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svc-portada__grid { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 38px); }
  /* La fotografía se coloca debajo del texto y se recorta a panorámica: en una
     sola columna un 4:3 a todo lo ancho ocupaba media pantalla.
     El 45 % vertical no es arbitrario: el 4:3 pierde aquí un 17 % de altura y,
     centrado más abajo, la unidad se sale por las ruedas. Con este valor la
     banda visible va del 7 % al 91 % de la fotografía y la ambulancia, que
     ocupa del 37 % al 88 %, queda entera. */
  .svc-portada__media img,
  .svc-portada__media picture { aspect-ratio: 16 / 10; object-position: 50% 45%; }

  .svc-bloque--foto { grid-template-columns: 1fr; gap: clamp(22px, 3.5vw, 32px); }
  /* En una columna manda el orden del documento: primero la fotografía, que
     abre el bloque, y después el texto. */
  .svc-bloque--foto:nth-of-type(even) .svc-bloque__media { order: -1; }
  /* En el interior de la unidad lo que importa es la camilla, no el techo: el
     recorte se lleva más parte de arriba. */
  .svc-bloque__media img { aspect-ratio: 16 / 10; object-position: 50% 65%; }
  .svc-bloque__texto { max-inline-size: 68ch; }

  .svc-cierre__grid { grid-template-columns: 1fr; gap: clamp(30px, 4vw, 42px); }
  .svc-cierre__texto { max-inline-size: 68ch; }
}


/* --------------------------------------------------------------------------
   ≤ 900px · dos columnas en «Qué puede incluir»
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .svc-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-incluye li:nth-child(-n + 3) { border-block-start: 1px solid var(--line); padding-block-start: clamp(22px, 2.6vw, 30px); }
  .svc-incluye li:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
}


/* --------------------------------------------------------------------------
   ≤ 768px · el rótulo de los bloques de texto deja de ir en columna aparte
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .svc-bloque--texto { grid-template-columns: 1fr; gap: 10px; }
  .svc-bloques { gap: clamp(34px, 6vw, 48px); }
}


/* --------------------------------------------------------------------------
   ≤ 620px · una sola columna en «Qué puede incluir»
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .svc-incluye { grid-template-columns: 1fr; }
  .svc-incluye li:nth-child(-n + 3) { border-block-start: 1px solid var(--line); padding-block-start: clamp(22px, 2.6vw, 30px); }
  .svc-incluye li:first-child { border-block-start: 0; padding-block-start: 0; }

  /* Los botones de la portada y del cierre ocupan el ancho: a esta medida dos
     píldoras en fila quedan estrechas y con el texto apretado. */
  .svc-portada__acciones .btn,
  .svc-cierre__acciones .btn { inline-size: 100%; }
}


/* --------------------------------------------------------------------------
   ≤ 700px · entra la fotografía vertical de portada
   El <picture> cambia a la versión 3:4 justo en este ancho, así que el
   contenedor pasa a 3:4 también. Si no, se estaría recortando un 40 % de una
   fotografía tomada expresamente en vertical, que es lo contrario de lo que se
   buscaba al pedirla. Los dos números —este y el `media` del <picture>— tienen
   que moverse juntos; el generador lo advierte en un comentario.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .svc-portada__media img,
  .svc-portada__media picture { aspect-ratio: 3 / 4; object-position: 50% 50%; }
}


/* --------------------------------------------------------------------------
   ≤ 430px · se recorta el aire
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .svc-portada { padding-block: 14px 34px; }
  /* La de apoyo se hace más cuadrada; la de portada se queda en 3:4, que es su
     proporción nativa y no necesita recorte. */
  .svc-bloque__media img { aspect-ratio: 5 / 4; }
  .svc-migaja { font-size: .8rem; }
}