/* Hero con foto REAL (29-sep-2026) · Mario: "esa foto ficticia... ese no soy yo".
   El hero usaba una celda del sprite course-scenes.webp, que son seis escenas generadas
   por IA. Aquí se sustituye SOLO la del hero por una clase de verdad: el instructor
   explicando el diagrama con la cámara grabando para los alumnos en línea.
   Las otras cinco celdas del sprite siguen siendo generadas — pendientes de sustituir. */
.hero .photo-hero{
  background-image:url('hero-clase-real.webp');
  background-size:cover;
  background-position:58% 42%;   /* mantiene al instructor visible fuera del degradado */
}
@media (max-width:900px){
  .hero .photo-hero{background-position:62% 40%}
}

/* Las otras cinco escenas del sprite, también sustituidas por fotos reales (29-sep-2026).
   No se toca la geometría del sprite: cada clase recibe su propia imagen con cover, así
   que si algún día se borra course-scenes.webp no se rompe nada. */
.photo-practice      {background-image:url('escena-presencial.webp');     background-size:cover;background-position:center}
.photo-online        {background-image:url('escena-en-linea.webp');       background-size:cover;background-position:50% 35%}
.photo-specialty     {background-image:url('escena-especialidades.webp'); background-size:cover;background-position:center}
.photo-electric      {background-image:url('escena-electricidad.webp');   background-size:cover;background-position:center}
.photo-refrigeration {background-image:url('escena-refrigeracion.webp');  background-size:cover;background-position:center}

/* La sección del maestro reutilizaba la celda del hero. Aquí va su retrato real. */
.master .photo-hero{background-image:url('instructor-retrato.webp');background-size:cover;background-position:50% 30%}