/* =========================================================
   autoridades.css — Página Autoridades (diseño 2026)
   Solo estilos propios de esta página. La navbar viene de navbar.css
   y la base, el encabezado y el pie vienen de rediseno-paginas.css.
   ========================================================= */

.autoridades-lista { padding-top: 56px; padding-bottom: 80px; }

/* ---------- Tarjetas de autoridades ---------- */
.autoridades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 230px));
  justify-content: start;
  gap: 24px;
}

@media (max-width: 600px) { .autoridades-grid { justify-content: center; } }

.autoridad-card {
  --ac: var(--ep-celeste-oscuro);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ep-blanco);
  border: 2px solid var(--ep-gris);
  border-top: 8px solid var(--ac); /* franja de color arriba: ya no tapa la foto */
  border-radius: 20px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.autoridad-card.acento-amarillo { --ac: var(--ep-amarillo-oscuro); }
.autoridad-card.acento-rojo { --ac: var(--ep-rojo-claro); }

.autoridad-card:hover { transform: translateY(-6px); border-color: var(--ac); }

.autoridad-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ep-gris); }

.autoridad-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.5s ease;
}
.autoridad-card:hover .autoridad-foto img { transform: scale(1.04); }

.autoridad-info { padding: 16px 16px 20px; }

.autoridad-info h3 {
  margin: 0 0 8px;
  font: 800 1.4rem/1 var(--ep-f-titulo);
  letter-spacing: 0;
  text-transform: uppercase;
}

.autoridad-info p { margin: 0; font: 600 0.95rem/1.35 var(--ep-f-texto); }

/* ---------- Equipo de trabajo (bloque comentado en el HTML) ---------- */
.section-title-row { margin: 64px 0 24px; }
.section-title-row h2 { margin: 0; font: 800 2.2rem/1 var(--ep-f-titulo); letter-spacing: 0; text-transform: uppercase; }

.equipo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.equipo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--ep-gris);
  border-radius: 16px;
}

.equipo-foto {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ep-celeste-oscuro);
  color: var(--ep-negro);
  font-size: 28px;
}
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; }

.equipo-info h4 { margin: 0 0 2px; font: 600 1.1rem/1.2 var(--ep-f-texto); }
.equipo-info p { margin: 0; font-size: 0.97rem; }

.equipo-card.ejemplo { border: 2px dashed var(--ep-negro); }
.equipo-card.ejemplo .equipo-info p::after { content: " (ejemplo)"; }