/* Titulaciones: rejilla de 2x2 con icono y etiqueta verde en cada tarjeta. */
.titulaciones-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1.75rem; }
@media(min-width:901px) and (max-width:1440px){ .titulaciones-grid { gap:1rem; } }
.titulaciones-grid .card { grid-column:span 2; }
.titulaciones-grid .card { display:flex; flex-direction:column; }
.titulaciones-grid .tag { align-self:flex-start; margin:.25rem 0 .85rem; }
.titulaciones-grid .bloque-icon { width:84px; height:84px; border-radius:12px; background:rgba(89,178,166,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; margin-bottom:2.75rem; }
.titulaciones-grid .bloque-icon svg { width:42px; height:42px; color:var(--green-dark); }
@media(max-width:900px){ .titulaciones-grid { grid-template-columns:1fr; }
  .titulaciones-grid .card { grid-column:1; } }
/* Icono dentro del hueco de imagen: sin marco, contenido y sin la etiqueta "Imagen". */
.img-ph-icon { background:none; border:none; }
.img-ph-icon::before { content:none; }
.img-ph-icon img { width:100%; height:100%; object-fit:contain; display:block; }
/* La imagen se alinea solo con el cuerpo; el titulo va en su propia fila. */
.cuando-grid { grid-template-rows:auto auto; align-items:start; row-gap:2rem; }
.cuando-cabecera { grid-column:2; grid-row:1; }
.cuando-cuerpo { grid-column:2; grid-row:2; }
.cuando-img { grid-column:1; grid-row:2; }
.cuando-img img { min-height:0 !important; height:100% !important; }
@media(max-width:900px){ .cuando-grid { grid-template-rows:none; }
  .cuando-cabecera, .cuando-cuerpo, .cuando-img { grid-column:1; grid-row:auto; }
  .cuando-img img { min-height:320px !important; } }
@media(min-width:901px) and (max-width:1440px){
}

/* Movil: mismos ajustes de tarjeta que en las paginas madre. */
@media(max-width:600px){
  /* Tarjetas de Titulaciones: icono un 20% mas pequeno y los huecos internos
     recortados, como en las tarjetas de Sociedad y Quienes somos. */
  #content .card{ padding:16px 22px; border-radius:13.6px; }
  #content .card .bloque-icon{ width:67px; height:67px; margin-bottom:10px; }
  #content .card .bloque-icon svg{ width:33.6px; height:33.6px; }
  #content .titulaciones-grid .tag{ margin:0 0 6px; }   /* el margen venia en atajo */
  #content .titulaciones-grid{ gap:10px; }              /* separacion entre tarjetas */
  #content .card p{ margin-bottom:0; }

  /* La foto de practicas pasa al final de la seccion, justo antes de la abertura.
     Con order basta: es una rejilla, no hace falta tocar el HTML ni el escritorio. */
  #content .cuando-grid .cuando-img{ order:1; }
}