/*
 * paginas.css
 * Cabecera de las páginas internas, bloque lateral (aside) y Nosotros.
 */

/* Cabecera de las páginas internas */
.cabecera-pagina {
  padding: var(--espacio-4) 0 var(--espacio-5);
  background: var(--negro);
  color: var(--blanco);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
}

.cabecera-pagina h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
}

.cabecera-pagina-texto {
  max-width: 55ch;
  font-size: 1.125rem;
  color: var(--gris-claro);
}

/* Bloque lateral (aside) reutilizado en varias páginas */
.tarjeta-aside {
  align-self: start;
  padding: var(--espacio-3);
  border-top: 6px solid var(--naranja);
  background: var(--blanco);
  box-shadow: var(--sombra-elevada);
}

.tarjeta-aside-titulo {
  font-size: 1.4rem;
}

.tarjeta-aside-nota {
  margin: var(--espacio-2) 0 0;
  color: var(--gris-texto);
}

.lista-horario-clara .lista-horario-fila {
  border-bottom-color: var(--gris-borde);
}

.lista-horario-clara dd {
  color: var(--gris-texto);
}

/* Nosotros */
.nosotros-grid {
  display: grid;
  gap: var(--espacio-4);
}

.nosotros-texto p {
  max-width: 62ch;
  font-size: 1.075rem;
}

.principios {
  display: grid;
  gap: var(--espacio-3);
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: principio;
}

.principio {
  counter-increment: principio;
}

.principio::before {
  content: counter(principio, decimal-leading-zero);
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--naranja);
}

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--espacio-3);
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
}

.instructor-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--espacio-2);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 600;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.instructor-nombre {
  margin-bottom: 0.25rem;
}

.instructor-especialidad {
  color: var(--gris-texto);
}

@media (min-width: 768px) {
  .principios {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--espacio-4);
  }
}

@media (min-width: 1024px) {
  .nosotros-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* Página de error */
.error-codigo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--naranja);
}