/* =========================================
   MUNDOS DE POSTGRADO — cards de programa (PEC), compartidas por todos los mundos
   Temas de color: sin clase = magenta/turquesa, .is-teal, .is-purple, .is-orange, .is-pink
   Mobile first (>= 320px) + un unico breakpoint en 768px.
   Referencia Figma: 359px (mobile) / 1729px (desktop).
   ========================================= */

.pec-card {
  --brand: #8D1A7C;
  --accent: #00BBB4;
  --accent-dark: #01837E;
  /* Los diplomas invierten algunos roles respecto de la maestria */
  --badge: var(--accent);
  --icon-bg: var(--brand);
  --certs-bg: var(--brand);
  /* Texto sobre badge y certificados (contraste AA 4.5:1): blanco sobre #00BBB4 o #F39200 no llega (2.4 y 2.35) */
  --on-badge: #231F20;
  --on-certs: #fff;
  --modulo: var(--accent);
  --grey: #767676;
  --grey-soft: #8B8A8A;
  --bg: linear-gradient(131.74deg, #FFF 61.17%, #B8B8B8 88.68%);

  position: relative;
  overflow: hidden;
  border-radius: 23px;
  background-image: var(--bg);
  box-shadow: 8px 10px 34.1px rgba(0, 0, 0, .21);
  padding: 26px 20px 34px 28px;
  color: var(--grey);
}

/* Turquesa con acentos magenta */
.pec-card.is-teal {
  --brand: #00BBB4;
  --certs-bg: #01837E;
  --accent: #A11C88;
  --accent-dark: #530D48;
  --badge: #8D1A7C;
  --on-badge: #fff;
}

/* Morado con acentos naranja */
.pec-card.is-purple {
  --brand: #5D3385;
  --accent: #F39200;
  --accent-dark: #5D3385;
  --icon-bg: var(--accent);
  --certs-bg: var(--accent);
  --modulo: var(--brand);
  /* Naranja: texto oscuro en vez de blanco */
  --on-certs: #231F20;
}

/* Naranja con acentos morado */
.pec-card.is-orange {
  --brand: #F39200;
  --accent: #5D3385;
  --accent-dark: #F39200;
  --on-badge: #fff;
  --icon-bg: var(--accent);
  --certs-bg: var(--accent);
  --modulo: var(--brand);
}

/* Rosado con acentos turquesa; certificados en el turquesa oscuro de is-teal (blanco sobre #00BBB4 no llega a AA) */
.pec-card.is-pink {
  --brand: #E22485;
  --accent: #00BBB4;
  --accent-dark: #E22485;
  --icon-bg: var(--accent);
  --certs-bg: #01837E;
  --modulo: var(--brand);
}

.pec-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pec-card * { box-sizing: border-box; }
/* :where() mantiene la especificidad en 0 para que las clases del componente manden */
.pec-card :where(p, h2, h3, ul, ol) { margin: 0; }
.pec-card :where(ul, ol) { padding: 0; list-style: none; }

.pec-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Cabecera ---------- */
.pec-eyebrow {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand);
  font-size: 16px;
  line-height: 1.08;
}

.pec-title {
  font-family: "Bebas Neue", "Roboto Condensed", sans-serif;
  font-weight: initial;
  text-transform: uppercase;
  color: var(--grey);
  font-size: 30px;
  line-height: 30px;
  margin-top: 5px !important;
}

.pec-desc {
  font-size: 13px;
  line-height: 1.25;
  color: var(--grey-soft);
  margin-top: 8px !important;
}

.pec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px !important;
}

.pec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 23px;
  padding: 5px 14px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.pec-badge--solid {
  background: var(--badge);
  color: var(--on-badge);
}

.pec-badge--outline {
  border: 1px solid var(--brand);
  color: var(--accent);
}

.pec-badge--outline img {
  width: 13px;
  height: 16px;
  display: block;
}

/* ---------- Titulos de bloque ---------- */
.pec-h3 {
  font-family: "Bebas Neue", "Roboto Condensed", sans-serif;
  font-weight: initial;
  text-transform: uppercase;
  color: var(--grey);
  font-size: 20px;
  line-height: 22px;
  margin-bottom: 10px !important;
}

/* ---------- Que aprenderas ---------- */
.pec-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pec-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  border: 1px solid var(--accent-dark);
  border-radius: 12px;
  padding: 6px 19px 6px 9px;
}

.pec-feature p {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12px;
  line-height: 11px;
  color: var(--grey);
}

.pec-feature__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--icon-bg);
}

.pec-feature__icon img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Un <img> absoluto resuelve su tamano por el intrinseco, no por los insets: hay que darle medidas */
.pec-feature__icon--a img  { top: 21.15%; left: 19.23%; width: 63.46%; height: 63.46%; }
.pec-feature__icon--b img  { top: 0; left: 0; width: 100%; height: 100%; }
.pec-feature__icon--c img  { top: 20.19%; left: 19.23%; width: 59.62%; height: 59.62%; }
.pec-feature__icon--d1 img { top: 22.12%; left: 23.08%; width: 55.77%; height: 55.76%; }
.pec-feature__icon--d2 img { top: 21.16%; left: 20.20%; width: 58.65%; height: 58.63%; }
.pec-feature__icon--d3 img { top: 29.81%; left: 17.31%; width: 63.94%; height: 40.38%; }

/* ---------- Ruta curricular ---------- */
/* Alto y margen del título del ciclo: los comparten el título y las flechas, que van a su misma altura */
.pec-ruta {
  --label-h: 22px;
  --label-gap: 8px;
}

.pec-modulo { display: none; }
.pec-modulo.is-active { display: block; }

.pec-modulo__label {
  font-family: "Bebas Neue", "Roboto Condensed", sans-serif;
  font-weight: initial;
  text-transform: uppercase;
  color: var(--modulo);
  font-size: 16px;
  line-height: var(--label-h);
  margin-bottom: var(--label-gap) !important;
}

.pec-ruta__body { position: relative; }

/* Flechas arriba, centradas sobre la ruta y a la altura del título del ciclo */
.pec-ruta__nav {
  position: absolute;
  top: calc(-1 * (var(--label-h) + var(--label-gap)));
  left: 0;
  right: 0;
  height: var(--label-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

/* Zona táctil de 44x44px (mínimo recomendado para dedos; WCAG 2.2 AA pide 24px) */
.pec-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

/* display:flex anula el atributo hidden que pone script.js cuando no hay nada que paginar */
.pec-ruta__nav[hidden] { display: none; }

.pec-nav[disabled] { cursor: default; opacity: .25; }
.pec-nav img { display: block; width: 24px; height: 24px; }
/* Figma exporta el mismo glifo para ambas flechas: la de avanzar va rotada */
.pec-nav[data-dir="1"] img { transform: rotate(180deg); }

/* En mobile solo caben 4 hitos: el resto se pagina desplazando el track */
.pec-ruta__viewport {
  position: relative;
  overflow: hidden;
}

.pec-ruta__viewport::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--brand);
}

.pec-track {
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--page, 0) * -100%));
  transition: transform .3s ease;
}

.pec-step {
  position: relative;
  z-index: 1;
  flex: 0 0 25%;
  /* Columnas iguales aunque una palabra sea más ancha, con aire entre textos vecinos */
  min-width: 0;
  padding-inline: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}

.pec-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
}

.pec-step__texto {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 10px;
  line-height: 11px;
  color: var(--grey);
  max-width: 78px;
  /* Palabras enteras: el tema parte palabras largas ("Transformaci-ón") */
  overflow-wrap: normal;
  word-break: normal;
}

/* Ruta completa: hasta 5 cursos en una sola línea también en mobile, sin paginar */
.pec-ruta--completa .pec-step { flex: 1 1 0; }

.pec-ruta--completa .pec-ruta__viewport::before {
  left: calc(50% / var(--steps, 5));
  right: calc(50% / var(--steps, 5));
}

/* Ruta alterna: todos los cursos en una línea, textos impares abajo y pares arriba.
   Grid de 3 filas (texto arriba / punto / texto abajo); cada <li> ocupa su columna con subgrid,
   así la lista conserva su semántica y el texto puede ocupar el hueco de los vecinos del lado contrario. */
.pec-ruta--alterna .pec-ruta__viewport { overflow: visible; }
.pec-ruta--alterna .pec-ruta__viewport::before { content: none; }

.pec-ruta--alterna .pec-track {
  display: grid;
  grid-template-columns: repeat(var(--steps, 7), minmax(0, 1fr));
  /* ~0.45 columnas de aire a cada lado: así el primer y el último texto también van centrados bajo su número
     (padding = 0.45 · (ancho − 2·padding) / pasos  →  0.45 / (pasos + 0.9) del ancho) */
  padding-inline: calc(100% * .45 / (var(--steps, 7) + .9));
  grid-template-rows: auto auto auto;
  row-gap: 5px;
  position: relative;
  transform: none;
}

.pec-ruta--alterna .pec-step {
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  /* Columna fija al ancho del curso: con "auto" los % del texto se resuelven contra el propio texto */
  grid-template-columns: minmax(0, 1fr);
  gap: 5;
  padding: 0;
  text-align: center;
}

.pec-ruta--alterna .pec-dot {
  grid-row: 2;
  justify-self: center;
  position: relative;
  margin: 0;
}

/* Línea: cada curso dibuja el tramo desde su punto hasta el centro del siguiente (un ancho de curso), por detrás.
   Absoluto dentro de su fila 2 (líneas explícitas: con "auto" el área llegaría al borde del grid). */
.pec-ruta--alterna .pec-step:not(:last-child)::after {
  content: "";
  position: absolute;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  top: calc(50% - 1px);
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--brand);
  z-index: -1;
}

/* Cada texto ocupa ~2 columnas: los vecinos de su misma fila están a 2 columnas de distancia */
.pec-ruta--alterna .pec-step__texto {
  grid-row: 3;
  align-self: start;
  justify-self: center;
  width: 180%;
  max-width: none;
}

.pec-ruta--alterna .pec-step:nth-child(even) .pec-step__texto {
  grid-row: 1;
  align-self: end;
}



/* ---------- Certificados ---------- */
/* La foto mide 210px y va abajo (menos los 34px de padding de la card): con uno o dos certificados
   el bloque queda bajo y la foto se montaría sobre la ruta, así que el bloque reserva ese alto */
.pec-certs { min-height: 180px; }

.pec-certs__box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 53%;
  border-radius: 15px;
  background: var(--certs-bg);
  padding: 20px 16px;
}

.pec-certs__box li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pec-certs__box img {
  flex: 0 0 auto;
  display: block;
  width: 13px;
  height: 17px;
  margin-top: 1px;
}

.pec-certs__box span {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  color: var(--on-certs);
}

/* ---------- Foto ---------- */
/* En mobile manda el alto para igualar las 4 fotos; en desktop manda el ancho */
.pec-photo {
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -3.6%;
  /* width explicito + justify-end: el tema aplica figure{width:100%} y empujaria la imagen a la izquierda */
  width: max-content;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  line-height: 0;
}

.pec-photo img {
  flex: 0 0 auto;
  width: auto;
  height: 210px;
  max-width: none;
  display: block;
}

/* =========================================
   DESKTOP (>= 768px)
   ========================================= */
@media only screen and (min-width: 768px) {

  .pec-card {
    --bg: linear-gradient(128.5deg, rgba(255, 255, 255, .7) 54.27%, rgba(153, 153, 153, .7) 92.3%);
    padding: 35px 50px 40px 50px;
  }

  .pec-card__inner { gap: 22px; }

  .pec-eyebrow { font-size: clamp(18px, 1.9vw, 26px); }

  .pec-title {
    font-size: clamp(42px, 5.2vw, 74px);
    line-height: .87em;
    margin-top: 8px !important;
  }

  .pec-desc {
    font-size: 21px;
    max-width: 70%;
    margin-top: 14px !important;
  }

  .pec-badges {
    gap: 14px;
    margin-top: 18px !important;
  }

  .pec-badge {
    font-size: clamp(15px, 1.6vw, 22px);
    line-height: 1.2;
    padding: 7px 16px;
    gap: 8px;
  }

  .pec-badge--outline { border-width: 2px; }
  .pec-badge--outline img { width: 17px; height: 21px; }

  .pec-h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; }

  .pec-features {
    flex-direction: row;
    gap: 16px;
  }

  .pec-feature {
    flex: 1 1 0;
    min-width: 0;
    max-width: 292px;
    min-height: 72px;
    border-width: 2px;
    border-radius: 17px;
    padding: 8px 14px;
    gap: 13px;
  }

  .pec-feature p { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.15; }
  .pec-feature__icon { width: 38px; height: 38px; }

  .pec-ruta {
    --label-h: calc(clamp(18px, 1.8vw, 26px) * 1.15);
    --label-gap: 14px;
  }

  .pec-modulo__label {
    font-size: clamp(18px, 1.8vw, 26px);
    padding-left: 0;
  }

  /* En desktop entra el ciclo completo: las flechas solo saltan de ciclo */
  .pec-ruta__body { --track-w: clamp(calc(var(--steps, 4) * 95px), calc(var(--steps, 4) * 10.4%), 1100px); }

  /* Desktop: flechas a los lados de la ruta, a la altura de los círculos.
     Mismo aire a ambos lados: 40px (margen de la ruta) + ancho real de la ruta (con su tope del 52%) + 40px */
  .pec-ruta__nav {
    top: 0;
    right: auto;
    left: 0;
    width: calc(min(var(--track-w), 52%) + 80px);
    max-width: 100%;
    height: 31px;
    justify-content: space-between;
    gap: 0;
  }

  /* Desktop (mouse): sin mínimo táctil */
  .pec-nav { min-width: 0; min-height: 0; }
  .pec-nav img { width: 29px; height: 29px; }

  .pec-ruta__viewport {
    width: var(--track-w);
    /* Tope para que los hitos no se metan debajo de la foto */
    max-width: 52%;
    margin-left: 40px;
  }

  .pec-track {
    width: 100%;
    transform: none;
  }

  .pec-step {
    flex: 1 1 0;
    gap: 14px;
  }

  .pec-dot { width: 31px; height: 31px; }

  /* La línea va del centro del primer punto al del último: media columna a cada lado */
  .pec-ruta__viewport::before {
    top: 14px;
    left: calc(50% / var(--steps, 4));
    right: calc(50% / var(--steps, 4));
  }

  .pec-step__texto {
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 1px;
    max-width: 100%;
  }

  .pec-ruta--alterna .pec-track { row-gap: 12px; }

  .pec-certs { min-height: 0; }

  .pec-certs__box {
    flex-direction: row;
    gap: clamp(16px, 3vw, 40px);
    width: 61%;
    min-height: 95px;
    border-radius: 17px;
    padding: 20px clamp(16px, 2.5vw, 36px);
    align-items: center;
  }

  .pec-certs__box li { flex: 1 1 0; align-items: center; gap: clamp(8px, 1vw, 14px); }
  .pec-certs__box img { width: 23px; height: 30px; margin-top: 0; }
  .pec-certs__box span { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.1; max-width: 167px; }

  /* Cuatro certificados: menos aire entre ellos para que quepan en la caja */
  .pec-certs__box:has(li:nth-child(4)) { gap: clamp(10px, 1.4vw, 20px); padding-inline: clamp(14px, 1.6vw, 24px); }

  /* Dos certificados: el primero (corto) mide lo que su texto y el segundo (largo) toma el espacio sobrante */
  .pec-certs__box:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) { padding: 16px clamp(14px, 1.6vw, 22px); gap: clamp(14px, 2vw, 24px); }
  .pec-certs__box li:first-child:nth-last-child(2) { flex: 0 0 auto; }
  .pec-certs__box li:last-child:nth-child(2) { flex: 1 1 auto; }
  .pec-certs__box li:last-child:nth-child(2) span { max-width: none; }

  /* Un solo certificado: el texto usa todo el ancho de la caja */
  .pec-certs__box li:only-child span { max-width: none; }

  .pec-photo {
    right: 3.9%;
    width: 37%;
  }

  .pec-photo img {
    width: 100%;
    height: auto;
  }

  /* Fotos recortadas en el borde: pegadas a la derecha para que el corte coincida con el borde de la card */
  .pec-page--foto-borde .pec-photo { right: 0; }

  /* Foto alta (is-foto-alta): se topa en alto para no montarse sobre el título y la descripción */
  .pec-card.is-foto-alta .pec-photo { height: 72%; }

  .pec-card.is-foto-alta .pec-photo img {
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* Tablet: la ruta queda estrecha junto a la foto; los textos necesitan letra más compacta */
@media only screen and (min-width: 768px) and (max-width: 1099px) {
  .pec-step__texto {
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 0;
  }
}