/* =========================================================
   DORSEY REINFORCEMENT
   EQUIPO — ESTRUCTURA ORGÁNICA

   PALETA OFICIAL
   #0a1128
   #001f54
   #034078
   #1282a2
   #fefcfb

   IMPORTANTE:
   EL HERO SE CONTROLA ÚNICAMENTE DESDE:
   assets/css/hero-global.css

   SIN ANIMACIONES DE ENTRADA.
   SOLO EFECTOS HOVER EN ESCRITORIO.
   ========================================================= */


/* =========================================================
   SEGURIDAD DE LAYOUT
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================================
   SECCIÓN ESTRUCTURA
   Desktop: 96px
   ========================================================= */

.estructura-section {
  position: relative;

  width: 100%;

  padding:
    96px
    0;

  background:
    linear-gradient(
      180deg,
      #fefcfb 0%,
      rgba(18, 130, 162, 0.055) 100%
    );
}


.estructura-section > .container {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.estructura-heading {
  width: 100%;

  max-width: 800px;

  margin:
    0
    auto
    64px;

  text-align: center;
}


.estructura-heading .equipo-eyebrow {
  margin:
    0
    0
    10px;

  color: #1282a2;

  font-size: 0.875rem;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


/* =========================================================
   H2
   Desktop: 36px — 48px
   ========================================================= */

.estructura-heading h2 {
  margin:
    0
    0
    16px;

  color: #001f54;

  font-size:
    clamp(
      2.25rem,
      3.2vw,
      3rem
    );

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: -0.02em;
}


.estructura-heading > p:last-child {
  max-width: 720px;

  margin:
    0
    auto;

  color: #034078;

  font-size: 1rem;

  line-height: 1.7;
}


/* =========================================================
   ORGANIGRAMA
   ========================================================= */

.organigrama {
  position: relative;

  width: 100%;

  max-width: 1248px;

  margin:
    0
    auto;

  padding: 0;

  background: transparent;

  border: 0;

  box-shadow: none;
}


/* =========================================================
   NIVELES
   ========================================================= */

.organigrama-level {
  position: relative;

  display: grid;

  justify-content: center;

  gap: 24px;
}


/* DIRECTOR */

.organigrama-level--principal {
  grid-template-columns:
    minmax(
      280px,
      350px
    );
}


/* CONSEJO */

.organigrama-level--consejo {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  padding-top: 32px;
}


/* GESTIÓN */

.organigrama-level--gestion {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  padding-top: 32px;
}


/* =========================================================
   CONECTORES ORGANIGRAMA
   ========================================================= */

.organigrama-line--vertical {
  width: 2px;

  height: 56px;

  margin:
    0
    auto;

  background:
    linear-gradient(
      to bottom,
      rgba(18, 130, 162, 0.22),
      rgba(3, 64, 120, 0.72)
    );
}


/* Línea horizontal */

.organigrama-level--consejo::before,
.organigrama-level--gestion::before {
  content: "";

  position: absolute;

  top: 0;

  right: 12.5%;
  left: 12.5%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(3, 64, 120, 0.48) 12%,
      rgba(3, 64, 120, 0.48) 88%,
      transparent 100%
    );
}


/* Conector hacia cada tarjeta */

.organigrama-level--consejo .equipo-card::before,
.organigrama-level--gestion .equipo-card::before {
  content: "";

  position: absolute;

  top: -32px;
  left: 50%;

  width: 2px;
  height: 32px;

  background:
    rgba(3, 64, 120, 0.48);

  transform:
    translateX(-50%);
}


/* =========================================================
   TARJETAS
   ========================================================= */

.equipo-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 320px;

  padding:
    30px
    20px
    24px;

  overflow: hidden;

  background: #fefcfb;

  border:
    1px solid
    rgba(3, 64, 120, 0.14);

  border-radius: 16px;

  box-shadow:
    0 12px 30px
    rgba(10, 17, 40, 0.08);

  text-align: center;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   ACENTO INFERIOR
   ========================================================= */

.equipo-card::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #001f54,
      #034078,
      #1282a2
    );

  transform: scaleX(0);

  transform-origin: left center;

  transition:
    transform 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.equipo-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(18, 130, 162, 0.30);

  box-shadow:
    0 20px 44px
    rgba(10, 17, 40, 0.13);
}


.equipo-card:hover::after {
  transform:
    scaleX(1);
}


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.equipo-card--principal {
  min-height: 360px;

  padding:
    34px
    24px
    26px;

  border-color:
    rgba(3, 64, 120, 0.24);
}


.equipo-card--principal::after {
  transform:
    scaleX(1);
}


/* =========================================================
   FOTOGRAFÍAS
   ========================================================= */

.equipo-card__image {
  position: relative;

  flex:
    0
    0
    auto;

  width: 132px;
  height: 132px;

  margin:
    0
    auto
    22px;

  padding: 5px;

  overflow: hidden;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #034078,
      #1282a2
    );

  box-shadow:
    0 0 0 6px
      rgba(18, 130, 162, 0.08),
    0 14px 28px
      rgba(10, 17, 40, 0.13);
}


.equipo-card--principal
.equipo-card__image {
  width: 156px;
  height: 156px;
}


.equipo-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  border:
    4px solid
    #fefcfb;

  border-radius: 50%;
}


/* =========================================================
   CARGO
   Texto secundario: 14px
   ========================================================= */

.equipo-card__role {
  min-height: 39px;

  margin:
    0
    0
    8px;

  color: #1282a2;

  font-size: 0.875rem;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   NOMBRE
   H3 Desktop: 28px — 32px
   ========================================================= */

.equipo-card h3 {
  margin:
    auto
    0
    0;

  color: #001f54;

  font-size:
    clamp(
      1.75rem,
      2vw,
      2rem
    );

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: -0.015em;

  overflow-wrap: break-word;
}


.equipo-card--principal h3 {
  font-size:
    clamp(
      1.8rem,
      2.1vw,
      2rem
    );
}


/* =========================================================
   ACCIONES
   ========================================================= */

.estructura-actions {
  display: flex;

  justify-content: flex-end;

  width: 100%;

  max-width: 1248px;

  margin:
    64px
    auto
    0;
}


/* =========================================================
   BOTÓN DESCARGAR
   ========================================================= */

.btn-descargar {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding:
    11px
    20px;

  border:
    1px solid
    #001f54;

  border-radius: 9px;

  background: #001f54;

  color: #fefcfb;

  font-family: var(--font-body);

  font-size: 0.875rem;
  font-weight: 700;

  line-height: 1.4;

  cursor: pointer;

  box-shadow:
    0 9px 22px
    rgba(0, 31, 84, 0.18);

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.btn-descargar:hover {
  transform:
    translateY(-2px);

  background: #034078;

  border-color: #034078;

  box-shadow:
    0 14px 30px
    rgba(3, 64, 120, 0.24);
}


.btn-descargar:active {
  transform:
    translateY(0);
}


.btn-descargar:focus-visible {
  outline:
    3px solid
    rgba(18, 130, 162, 0.35);

  outline-offset:
    3px;
}


.btn-descargar span {
  font-size: 1.125rem;

  line-height: 1;
}


/* =========================================================
   NOTA DE DESCARGA
   ========================================================= */

.estructura-download-note {
  width: 100%;

  max-width: 1248px;

  min-height: 20px;

  margin:
    10px
    auto
    0;

  color: #034078;

  font-size: 0.75rem;

  line-height: 1.5;

  text-align: right;
}


/* =========================================================
   TABLET GRANDE
   981px — 1180px
   ========================================================= */

@media (min-width: 981px) and (max-width: 1180px) {

  /* SECCIÓN */

  .estructura-section {
    padding:
      88px
      0;
  }


  .estructura-heading {
    max-width: 760px;

    margin-bottom: 56px;
  }


  .estructura-heading h2 {
    font-size:
      clamp(
        2.25rem,
        4vw,
        2.65rem
      );
  }


  /* ORGANIGRAMA */

  .organigrama {
    max-width: 920px;
  }


  .organigrama-level {
    gap: 20px;
  }


  .organigrama-level--principal {
    grid-template-columns:
      minmax(
        280px,
        330px
      );
  }


  .organigrama-level--gestion {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 20px;
  }


  /*
     Gestión pasa a dos filas.
     No usamos línea horizontal porque quedaría
     visualmente incorrecta.
  */

  .organigrama-level--gestion::before,
  .organigrama-level--gestion .equipo-card::before {
    display: none;
  }


  /* TARJETAS */

  .equipo-card {
    min-height: 304px;

    padding:
      26px
      18px
      22px;
  }


  .equipo-card--principal {
    min-height: 344px;

    padding:
      30px
      22px
      24px;
  }


  .equipo-card__image {
    width: 122px;
    height: 122px;

    margin-bottom: 20px;
  }


  .equipo-card--principal
  .equipo-card__image {
    width: 148px;
    height: 148px;
  }


  .equipo-card h3 {
    font-size:
      clamp(
        1.65rem,
        2.3vw,
        1.8rem
      );
  }


  .equipo-card--principal h3 {
    font-size:
      clamp(
        1.75rem,
        2.5vw,
        1.9rem
      );
  }


  .estructura-actions,
  .estructura-download-note {
    max-width: 920px;
  }

}


/* =========================================================
   TABLET
   701px — 980px
   ========================================================= */

@media (min-width: 701px) and (max-width: 980px) {

  /* SECCIÓN */

  .estructura-section {
    padding:
      72px
      0;
  }


  .estructura-section > .container {
    width:
      min(
        100% - 48px,
        760px
      );

    margin-right: auto;
    margin-left: auto;
  }


  /* HEADER */

  .estructura-heading {
    max-width: 680px;

    margin-bottom: 48px;
  }


  .estructura-heading .equipo-eyebrow {
    font-size: 0.8125rem;

    letter-spacing: 0.13em;
  }


  .estructura-heading h2 {
    font-size:
      clamp(
        2rem,
        5vw,
        2.35rem
      );
  }


  .estructura-heading > p:last-child {
    font-size: 1rem;

    line-height: 1.68;
  }


  /* ORGANIGRAMA */

  .organigrama {
    max-width: 720px;
  }


  .organigrama-level {
    gap: 18px;
  }


  .organigrama-level--principal {
    grid-template-columns:
      minmax(
        280px,
        330px
      );
  }


  /*
     Consejo sigue en 3 columnas,
     porque son únicamente 3 integrantes.
  */

  .organigrama-level--consejo {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 14px;
  }


  /*
     Gestión se adapta a 2 columnas.
  */

  .organigrama-level--gestion {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 18px;
  }


  .organigrama-level--gestion::before,
  .organigrama-level--gestion .equipo-card::before {
    display: none;
  }


  /* TARJETAS */

  .equipo-card {
    min-height: 280px;

    padding:
      24px
      14px
      20px;

    border-radius: 14px;
  }


  .equipo-card--principal {
    min-height: 330px;

    padding:
      28px
      20px
      22px;
  }


  .equipo-card__image {
    width: 108px;
    height: 108px;

    margin-bottom: 18px;
  }


  .equipo-card--principal
  .equipo-card__image {
    width: 140px;
    height: 140px;
  }


  .equipo-card__role {
    min-height: 38px;

    font-size: 0.75rem;

    letter-spacing: 0.06em;
  }


  .equipo-card h3 {
    font-size:
      clamp(
        1.5rem,
        3vw,
        1.65rem
      );
  }


  .equipo-card--principal h3 {
    font-size:
      clamp(
        1.65rem,
        3.2vw,
        1.8rem
      );
  }


  /* ACCIONES */

  .estructura-actions {
    margin-top: 48px;
  }


  .estructura-actions,
  .estructura-download-note {
    max-width: 720px;
  }

}


/* =========================================================
   CELULAR
   HASTA 700px
   ========================================================= */

@media (max-width: 700px) {

  /* =======================================================
     SECCIÓN
     ======================================================= */

  .estructura-section {
    width: 100%;

    padding:
      56px
      0;

    overflow-x: hidden;
  }


  .estructura-section * {
    box-sizing: border-box;
  }


  .estructura-section > .container {
    width: 100%;

    max-width: none;

    margin-right: auto;
    margin-left: auto;

    padding-right: 20px;
    padding-left: 20px;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  .estructura-heading {
    width: 100%;

    max-width: 100%;

    margin:
      0
      0
      40px;

    text-align: left;
  }


  .estructura-heading .equipo-eyebrow {
    margin-bottom: 8px;

    font-size: 0.75rem;

    letter-spacing: 0.12em;
  }


  /*
     H2 MÓVIL
     28px — 32px
  */

  .estructura-heading h2 {
    margin-bottom: 14px;

    font-size:
      clamp(
        1.75rem,
        7.5vw,
        2rem
      );

    line-height: 1.25;
  }


  .estructura-heading > p:last-child {
    max-width: 100%;

    margin: 0;

    color: #034078;

    font-size: 1rem;

    line-height: 1.68;
  }


  /* =======================================================
     ORGANIGRAMA MÓVIL
     ======================================================= */

  .organigrama {
    position: relative;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding:
      0
      0
      0
      18px;
  }


  /*
     Línea vertical lateral.
     Mantiene la lectura jerárquica
     sin comprimir las tarjetas.
  */

  .organigrama::before {
    content: "";

    position: absolute;

    top: 34px;
    bottom: 34px;
    left: 4px;

    width: 2px;

    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(3, 64, 120, 0.55) 7%,
        rgba(3, 64, 120, 0.55) 93%,
        transparent 100%
      );
  }


  /* NIVELES */

  .organigrama-level--principal,
  .organigrama-level--consejo,
  .organigrama-level--gestion {
    grid-template-columns: 1fr;

    gap: 14px;

    padding-top: 0;
  }


  /*
     Se eliminan las líneas de escritorio.
  */

  .organigrama-level--consejo::before,
  .organigrama-level--gestion::before,
  .organigrama-level--consejo .equipo-card::before,
  .organigrama-level--gestion .equipo-card::before {
    display: none;
  }


  /*
     Espacio entre niveles.
  */

  .organigrama-line--vertical {
    width: 14px;

    height: 26px;

    margin: 0;

    background: transparent;
  }


  /* =======================================================
     TARJETA HORIZONTAL MÓVIL
     ======================================================= */

  .equipo-card,
  .equipo-card--principal {
    position: relative;

    display: grid;

    grid-template-columns:
      82px
      minmax(0, 1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: 16px;

    align-items: center;

    width: 100%;

    min-height: 112px;

    padding: 14px;

    border-radius: 13px;

    text-align: left;

    box-shadow:
      0 7px 20px
      rgba(10, 17, 40, 0.07);
  }


  /*
     Conexión lateral de cada tarjeta.
  */

  .equipo-card::before,
  .equipo-card--principal::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -14px;

    display: block;

    width: 14px;
    height: 2px;

    background:
      rgba(3, 64, 120, 0.55);

    transform:
      translateY(-50%);
  }


  /*
     En móvil el acento inferior
     queda fijo únicamente en el director.
  */

  .equipo-card:hover::after {
    transform: scaleX(0);
  }


  .equipo-card--principal:hover::after,
  .equipo-card--principal::after {
    transform: scaleX(1);
  }


  /* =======================================================
     FOTOGRAFÍA
     ======================================================= */

  .equipo-card__image,
  .equipo-card--principal
  .equipo-card__image {
    grid-column: 1;

    grid-row:
      1 / 3;

    width: 82px;
    height: 82px;

    margin: 0;

    padding: 4px;

    box-shadow:
      0 0 0 4px
        rgba(18, 130, 162, 0.07),
      0 8px 18px
        rgba(10, 17, 40, 0.12);
  }


  /* =======================================================
     CARGO
     ======================================================= */

  .equipo-card__role {
    grid-column: 2;
    grid-row: 1;

    min-height: auto;

    margin:
      0
      0
      5px;

    font-size: 0.75rem;

    line-height: 1.4;

    letter-spacing: 0.06em;
  }


  /* =======================================================
     NOMBRE
     H3 MÓVIL: 24px — 28px
     ======================================================= */

  .equipo-card h3,
  .equipo-card--principal h3 {
    grid-column: 2;
    grid-row: 2;

    margin: 0;

    font-size:
      clamp(
        1.5rem,
        5.8vw,
        1.75rem
      );

    line-height: 1.3;
  }


  /* =======================================================
     HOVER DESACTIVADO EN MÓVIL
     ======================================================= */

  .equipo-card:hover {
    transform: none;

    border-color:
      rgba(3, 64, 120, 0.14);

    box-shadow:
      0 7px 20px
      rgba(10, 17, 40, 0.07);
  }


  /* =======================================================
     ACCIONES
     ======================================================= */

  .estructura-actions {
    justify-content: stretch;

    width: 100%;

    margin-top: 40px;
  }


  .btn-descargar {
    width: 100%;

    min-height: 46px;

    padding:
      12px
      16px;

    font-size: 0.875rem;
  }


  .btn-descargar:hover {
    transform: none;

    background: #001f54;

    border-color: #001f54;

    box-shadow:
      0 9px 22px
      rgba(0, 31, 84, 0.18);
  }


  .estructura-download-note {
    width: 100%;

    margin-top: 9px;

    font-size: 0.75rem;

    text-align: center;
  }

}


/* =========================================================
   CELULAR MEDIANO
   HASTA 480px
   ========================================================= */

@media (max-width: 480px) {

  .estructura-section {
    padding:
      52px
      0;
  }


  .estructura-section > .container {
    padding-right: 18px;
    padding-left: 18px;
  }


  .estructura-heading {
    margin-bottom: 36px;
  }


  .estructura-heading h2 {
    font-size:
      clamp(
        1.75rem,
        8vw,
        1.95rem
      );
  }


  .organigrama {
    padding-left: 16px;
  }


  .organigrama::before {
    left: 3px;
  }


  .organigrama-level--principal,
  .organigrama-level--consejo,
  .organigrama-level--gestion {
    gap: 13px;
  }


  .equipo-card,
  .equipo-card--principal {
    grid-template-columns:
      76px
      minmax(0, 1fr);

    column-gap: 14px;

    min-height: 104px;

    padding: 13px;
  }


  .equipo-card::before,
  .equipo-card--principal::before {
    left: -13px;

    width: 13px;
  }


  .equipo-card__image,
  .equipo-card--principal
  .equipo-card__image {
    width: 76px;
    height: 76px;
  }


  .equipo-card__role {
    font-size: 0.75rem;
  }


  .equipo-card h3,
  .equipo-card--principal h3 {
    font-size:
      clamp(
        1.5rem,
        6.3vw,
        1.65rem
      );
  }


  .estructura-actions {
    margin-top: 36px;
  }

}


/* =========================================================
   CELULAR PEQUEÑO
   HASTA 390px
   ========================================================= */

@media (max-width: 390px) {

  .estructura-section {
    padding:
      48px
      0;
  }


  .estructura-section > .container {
    padding-right: 16px;
    padding-left: 16px;
  }


  .estructura-heading {
    margin-bottom: 32px;
  }


  .estructura-heading h2 {
    font-size: 1.75rem;
  }


  .estructura-heading > p:last-child {
    font-size: 1rem;
  }


  .organigrama {
    padding-left: 14px;
  }


  .organigrama::before {
    left: 2px;
  }


  .equipo-card,
  .equipo-card--principal {
    grid-template-columns:
      70px
      minmax(0, 1fr);

    column-gap: 12px;

    padding: 12px;
  }


  .equipo-card::before,
  .equipo-card--principal::before {
    left: -12px;

    width: 12px;
  }


  .equipo-card__image,
  .equipo-card--principal
  .equipo-card__image {
    width: 70px;
    height: 70px;
  }


  .equipo-card__role {
    font-size: 0.75rem;

    letter-spacing: 0.05em;
  }


  .equipo-card h3,
  .equipo-card--principal h3 {
    font-size: 1.5rem;
  }

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .equipo-card:hover {
    transform: none;
  }


  .equipo-card:hover::after {
    transform: scaleX(0);
  }


  .equipo-card--principal:hover::after {
    transform: scaleX(1);
  }


  .btn-descargar:hover {
    transform: none;
  }

}


/* =========================================================
   IMPRESIÓN / PDF
   ========================================================= */

@media print {

  @page {
    size: A4 landscape;
    margin: 12mm;
  }


  body {
    background: #fefcfb;
  }


  .skip,
  .estructura-actions,
  .estructura-download-note,
  [data-include] {
    display: none !important;
  }


  /*
     El hero global también se oculta al imprimir
     sin depender de la antigua clase .equipo-hero.
  */

  .hero {
    display: none !important;
  }


  .estructura-section {
    padding: 0;

    background: #fefcfb;
  }


  .estructura-heading {
    margin-bottom: 32px;
  }


  .organigrama {
    max-width: 100%;
  }


  .organigrama-level--gestion {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }


  .organigrama-level--gestion::before {
    display: block;
  }


  .organigrama-level--gestion
  .equipo-card::before {
    display: block;
  }


  .equipo-card {
    min-height: 240px;

    padding: 16px;

    break-inside: avoid;

    box-shadow: none;
  }


  .equipo-card--principal {
    min-height: 270px;
  }


  .equipo-card__image,
  .equipo-card--principal
  .equipo-card__image {
    width: 96px;
    height: 96px;
  }


  .equipo-card h3,
  .equipo-card--principal h3 {
    font-size: 1.25rem;
  }


  .equipo-card__role {
    font-size: 0.75rem;
  }

}