/* ================================================================
   RUS SALUD | Lo propio de la landing de pasos.

   El hero, el stepper, los pasos, las opciones tipo radio y la botonera
   salen de travel.css (clases vt-*), igual que en el cotizador de náutica, y
   las tarjetas de plan del paso 2 son las .pack de style.css, las mismas que
   el resto de los productos. Acá está sólo lo que ninguno de los dos tenía:
   el acomodo de esas tarjetas adentro de la landing, el desplegable de
   integrantes del grupo familiar y las subpantallas del paso 6.
   ================================================================ */

/* ── Tarjetas de plan del paso 2 ──────────────────────────────────────────
   Son las mismas .pack que los packs de la vista checkbox y los planes de
   náutica, así que de la forma se encarga style.css. Acá va sólo lo que hace
   falta para usarlas adentro de la landing: la separación entre tarjetas (en
   la vista checkbox la pone un d-flex del contenedor) y la bajada de la
   modalidad, que es lo único propio de salud. */
.salud-modalidades {
  display:flex; flex-direction:column; gap:8px;
}
.salud-plan {
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.salud-plan:hover {
  border-color:var(--primary,#1A6BF5) !important;
}
.salud-plan__desc {
  font-size:13px; color:var(--gray-900,#212529); margin:2px 0 0; line-height:1.5;
}

/* Desplegable de integrantes: aparece dentro de la opción familiar cuando
   se la elige, con una línea arriba que lo separa del resto de la opción */
.salud-miembros {
  display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-300,#DDE3EC);
}
.salud-miembros .form-label {
  font-size:13px; font-weight:600; color:var(--primary-dark,#1556C9);
}
.salud-miembros .form-select {
  max-width:260px;
}

/* Preguntas que no se le muestran al usuario porque se contestan solas con
   otra respuesta (hoy: "seleccione si es mayor a 30", que sale de la edad).
   Siguen en el formulario, así que la respuesta igual viaja a SIAPI. */
.cf-derivada {
  display:none !important;
}

@media(max-width:600px) {
  .salud-miembros .form-select {
    max-width:100%;
  }
}

/* ── "Qué cubre" ───────────────────────────────────────────────────────────
   La grilla y las tarjetas son las de travel.css (vt-cov-*). Acá va sólo lo
   propio: el ícono, que es una cruz rellena y no un trazo como los de
   viajero, y la nota legal del pie. */
.salud-cov-ico {
  background:#FDEAE5;
}
/* El botón "¿Qué cubre?" del paso 1 baja hasta acá. Con el header fijo del
   sitio arriba, un scroll "al principio" dejaría tapado el encabezado de la
   sección: el margen lo baja el alto del header (variable de style.css). */
.vt-coverage {
  scroll-margin-top:calc(var(--header-alto, 75px) + 24px);
}
.salud-cov-legal {
  margin:28px 0 0; font-size:12px; line-height:1.5; color:var(--gray-600,#6B7A94); text-align:center;
}

/* Preguntas frecuentes: la caja y el acordeón son los de la ficha de producto
   (clases de Bootstrap), así que acá sólo se acomoda la sección. Viene pegada
   abajo de "Qué cubre", que ya trae sus 120px de aire, y por eso arranca con
   menos padding arriba. */
.salud-faq {
  background:#fff; padding-top:64px; scroll-margin-top:calc(var(--header-alto, 75px) + 24px);
}
@media(max-width:720px) {
  .salud-faq {
    padding-top:48px;
  }
}