.teachers-page{

  background:#eaf6ff;

  padding:var(--space-8) 0;

}

.teacher-grid{

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;

}

/* Tarjetas horizontales: foto a la izquierda, texto a la derecha.
   Da mucho más ancho para leer que una columna angosta. */

.teachers-page .teacher-card{

  background:linear-gradient(160deg, var(--primary), var(--primary-dark));

  display:flex;
  align-items:flex-start;
  gap:20px;

  padding:var(--space-5);
  text-align:left;

}

.teachers-page .teacher-card:hover{

  box-shadow:var(--shadow-lg);

}

.teachers-page .teacher-photo{

  width:90px;
  height:90px;

  flex-shrink:0;
  margin:0;

  background:rgba(255,255,255,.18);

}

.teachers-page .teacher-info{

  text-align:left;

}

.teachers-page .teacher-info h3{

  color:var(--secondary);

}

.teachers-page .teacher-info span{

  color:var(--white);
  font-weight:600;
  opacity:.9;

}

.teachers-page .teacher-info p{

  color:#c9d4e6;
  font-style:italic;

  margin:10px 0 8px;
  padding:2px 0 2px 14px;

  border-left:3px solid var(--secondary);

}

.teacher-subject{

  display:inline-block;

  padding:4px 14px;

  border-radius:var(--radius-pill);

  background:rgba(255,255,255,.15);
  color:var(--secondary);

  font-size:.75rem;
  font-weight:700;
  letter-spacing:.5px;

}

@media (max-width:900px){

  .teacher-grid{
    grid-template-columns:1fr;
  }

}

@media (max-width:480px){

  .teachers-page .teacher-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .teachers-page .teacher-info{
    text-align:center;
  }

  .teachers-page .teacher-info p{
    text-align:left;
  }

}