/* ==========================================================================
   MODO — 04. Dirección Estratégica
   Doble página editorial. Fondo claro: es la pausa luminosa entre dos
   secciones oscuras. Las personas son las protagonistas.
   ========================================================================== */

.direccion {
  position: relative;
  background-color: var(--blanco);
  color: var(--azul-oscuro);
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Macro del isotipo
   El manual habilita el uso de fragmentos del iso como recurso de
   composición. Entra recortado por el borde, casi imperceptible.
   -------------------------------------------------------------------------- */
.direccion__macro {
  position: absolute;
  right: -18%;
  top: 34%;
  width: min(62vw, 900px);
  color: var(--azul-oscuro);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}

.direccion .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
.direccion__head {
  max-width: 900px;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}

.direccion__eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--azul-electrico);
}

.direccion__title {
  font-size: clamp(2.125rem, 4.6vw, 3.875rem);
}
.direccion__title em {
  font-style: normal;
  color: var(--azul-electrico);
}

/* --------------------------------------------------------------------------
   Perfil
   Fotografía sobre un bloque tonal; la figura desborda por arriba.
   -------------------------------------------------------------------------- */
.perfil {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.perfil + .perfil { margin-top: clamp(2.75rem, 5.5vw, 5rem); }

/* El segundo perfil invierte la lógica: texto a la izquierda */
.perfil--invertido { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.perfil--invertido .perfil__foto { order: 2; }
.perfil--invertido .perfil__datos { order: 1; }

/* --- Fotografía --- */
.perfil__foto {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* Bloque tonal detrás: no toca la cabeza, arranca bajo el mentón */
.perfil__foto::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(4.5rem, 9vw, 8rem);
  bottom: 0;
  background-color: var(--blanco-lila);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.perfil__img {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: grayscale(1) contrast(1.02);
}

/* --- Datos --- */
.perfil__datos { padding-bottom: clamp(1rem, 3vw, 3rem); }

.perfil__rule { margin-bottom: var(--sp-4); }

.perfil__cargo {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--azul-electrico);
}

.perfil__nombre {
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.perfil__bio {
  max-width: 540px;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.66;
  color: var(--gris-oscuro);
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .perfil,
  .perfil--invertido {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .perfil--invertido .perfil__foto { order: 0; }
  .perfil--invertido .perfil__datos { order: 1; }

  .perfil__foto { justify-content: flex-start; }
  .perfil__foto::before { right: 34%; }
  .perfil__img { max-width: 360px; }

  .direccion__macro { right: -34%; opacity: 0.035; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  /* El bloque tonal ocupa todo el ancho y la figura va centrada:
     antes el bloque llegaba al 88% y la foto quedaba alineada a la
     izquierda, así que no coincidían. */
  .perfil__foto { justify-content: center; }
  .perfil__foto::before { left: 0; right: 0; }
  .perfil__img { max-width: 320px; }
  .perfil__datos { padding-bottom: 0; }
  .direccion__macro { display: none; }
}