/* ==========================================================================
   Alianzas — rediseño (`cid.paginas/alianzas`)
   --------------------------------------------------------------------------
   Mucho blanco y poca línea: la directora a dos columnas con su cita en
   serif, y el equipo en retratos 4:5 con el nombre sobre la foto. Al pasar,
   la foto se acerca y suben las redes.
   ========================================================================== */
.cid-al-cabeza { max-width: 900px; margin: 0 auto; padding: 100px 20px 30px; text-align: center; }

.cid-al-cabeza h1 { color: var(--azul); font-family: var(--display); font-size: 60px; font-weight: 400; line-height: 1.05; }

.cid-al-cabeza p { margin-top: 22px; color: var(--gris); font-size: 19px; line-height: 1.6; }

/* --- Directora -------------------------------------------------------------- */
.cid-al-directora {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
  max-width: 1120px;
  margin: 50px auto 0;
  padding: 0 20px 110px;
}

.cid-al-directora-foto { position: relative; }

.cid-al-directora-foto::before {
  content: "";
  position: absolute;
  inset: 28px -28px -28px 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--rojo), #8E0F1D);
}

.cid-al-directora-foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; object-fit: cover; object-position: center 25%; box-shadow: 0 30px 60px rgba(30, 50, 92, .25); }

.cid-al-directora-texto h2 { color: var(--azul); font-family: var(--display); font-size: 52px; font-weight: 400; line-height: 1.05; }

.cid-al-cargo { margin-top: 14px; color: var(--gris); font-size: 16px; line-height: 1.6; }

.cid-al-directora-texto blockquote {
  margin: 30px 0 26px;
  padding-left: 22px;
  border-left: 3px solid var(--rojo);
  color: var(--azul);
  font-family: var(--display);
  font-size: 26px;
  font-style: italic;
  line-height: 1.35;
}

/* --- Equipo ----------------------------------------------------------------- */
.cid-al-equipo { padding: 100px 20px 120px; background: #F5F6F8; }

.cid-al-equipo > .cid-antetitulo { text-align: center; }

.cid-al-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: var(--ancho); margin: 40px auto 0; }

.cid-retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  background: #3E4250;
  box-shadow: 0 10px 30px rgba(30, 50, 92, .08);
  transition: box-shadow .6s, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.cid-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }

.cid-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 33, 61, .9) 100%);
}

.cid-retrato-texto { position: absolute; inset: auto 0 0; z-index: 1; padding: 24px 26px 22px; color: var(--blanco); }

.cid-retrato h3 { font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.1; }

.cid-retrato p { margin-top: 6px; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.5; }

.cid-persona-redes { display: flex; gap: 8px; margin-top: 14px; }

.cid-persona-redes a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--blanco);
  backdrop-filter: blur(6px);
  transition: background .3s, transform .3s;
}

.cid-persona-redes a:hover { background: var(--rojo); transform: translateY(-2px); }

.cid-persona-redes svg { width: 14px; height: 14px; }

.cid-al-directora .cid-persona-redes a { background: var(--azul); }

.cid-al-directora .cid-persona-redes a:hover { background: var(--rojo); }

/* Las redes del equipo, siempre a la vista: escondidas hasta pasar el ratón,
   nadie sabía que estaban (y en cid.do salen siempre). */

.cid-retrato:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(30, 50, 92, .22); }

.cid-retrato:hover img { transform: scale(1.06); }

@media (max-width: 1024px) {
  .cid-al-directora { grid-template-columns: 1fr; gap: 60px; max-width: 620px; }

  .cid-al-rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .cid-al-cabeza { padding-top: 60px; }

  .cid-al-cabeza h1 { font-size: 42px; }

  .cid-al-directora-texto h2 { font-size: 40px; }

  .cid-al-rejilla { grid-template-columns: 1fr; }
}