/* Versión 5.2: rutas por intención del paciente y equilibrio clínico-quirúrgico. */

.orientacion-paciente {
  display: grid;
  margin-top: 78px;
  padding: clamp(32px, 4vw, 48px);
  align-items: center;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(32px, 5vw, 70px);
  border: 1px solid var(--jg-borde);
  border-radius: 18px;
  background: var(--jg-aqua-claro);
}

.orientacion-paciente h2 {
  max-width: 500px;
  margin: 0;
  color: var(--jg-azul);
  font-family: "Cocogoose", sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.13;
}

.orientacion-paciente__encabezado > p:last-child {
  margin: 15px 0 0;
  color: var(--jg-texto);
  font-size: 15px;
  line-height: 1.6;
}

.orientacion-paciente__acciones {
  display: grid;
  gap: 12px;
}

.orientacion-paciente__acciones > a {
  display: block;
  padding: 20px 22px;
  border: 1px solid rgba(57, 127, 123, 0.28);
  border-radius: 11px;
  color: var(--jg-azul);
  background: rgba(255, 255, 255, 0.78);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.orientacion-paciente__acciones > a:hover,
.orientacion-paciente__acciones > a:focus-visible {
  border-color: var(--jg-aqua-oscuro);
  color: var(--jg-azul);
  background: var(--jg-blanco);
  transform: translateY(-2px);
}

.orientacion-paciente__acciones strong,
.orientacion-paciente__acciones span {
  display: block;
}

.orientacion-paciente__acciones strong {
  font-size: 16px;
  line-height: 1.4;
}

.orientacion-paciente__acciones span {
  margin-top: 5px;
  color: var(--jg-aqua-oscuro);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.orientacion-paciente__acciones b {
  display: inline-block;
  transition: transform 0.2s ease;
}

.orientacion-paciente__acciones > a:hover b,
.orientacion-paciente__acciones > a:focus-visible b {
  transform: translateX(4px);
}

.rutas-especialidad {
  margin-top: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ruta-especialidad {
  min-height: 345px;
  padding: clamp(28px, 3vw, 40px);
}

.ruta-especialidad h3 {
  font-size: clamp(23px, 2.15vw, 30px);
}

.ruta-especialidad--reciente {
  border-color: var(--jg-azul);
  color: var(--jg-blanco);
  background: var(--jg-azul);
}

.ruta-especialidad--reciente::after {
  border-color: rgba(83, 183, 179, 0.2);
}

.ruta-especialidad--reciente .etiqueta-nueva,
.ruta-especialidad--reciente .ruta-especialidad__numero,
.ruta-especialidad--reciente a {
  color: #79cfcb;
}

.ruta-especialidad--reciente h3 {
  color: var(--jg-blanco);
}

.ruta-especialidad--reciente p:not(.etiqueta-nueva) {
  color: #c7d2d7;
}

@media (max-width: 1050px) {
  .orientacion-paciente {
    grid-template-columns: 1fr;
  }

  .rutas-especialidad {
    grid-template-columns: 1fr;
  }

  .ruta-especialidad {
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .orientacion-paciente {
    margin-top: 50px;
    padding: 28px 24px;
  }

  .orientacion-paciente h2 {
    font-size: 30px;
  }

  .orientacion-paciente__acciones > a {
    padding: 18px;
  }

  .rutas-especialidad {
    margin-top: 14px;
  }
}