/* ============================================================
   Portada — segunda iteración
   Cuatro bloques nuevos, cada uno independiente del anterior:
   1. Carrusel de portada que envuelve el hero actual sin tocarlo.
   2. Franja "Asocapitales en acción" con indicadores actualizables.
   3. Franjas de los tres ejes de la agenda estratégica, con video.
   4. Sección de resultados del informe de gestión.
   ============================================================ */

/* ---------- 1. Carrusel de portada -------------------------- */

.pc-hero-slider {
  position: relative;
  display: grid;
  isolation: isolate;
  background: #040b18;
}

/* Las diapositivas comparten celda: la altura la fija la más alta y el
   cambio es un fundido, sin desplazamiento lateral que mueva el mapa. */
.pc-hero-slider > .pc-cih,
.pc-hero-slider > .pc-hs {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.pc-hero-slider > .is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .pc-hero-slider > .pc-cih,
  .pc-hero-slider > .pc-hs {
    transition: none;
  }
}

/* Espacio para la barra de control sin recortar el contenido del hero. */
.pc-hero-slider .pc-cih__inner,
.pc-hero-slider .pc-hs__inner {
  padding-bottom: clamp(96px, 12vh, 124px);
}

/* --- Diapositivas nuevas --- */

.pc-hs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #eaf1fb;
  background: #040b18;
}

.pc-hs__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: var(--hero-position, center);
}

.pc-hs__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 11, 24, 0.94) 0%, rgba(4, 11, 24, 0.82) 38%, rgba(4, 11, 24, 0.44) 72%, rgba(4, 11, 24, 0.58) 100%),
    linear-gradient(0deg, rgba(4, 11, 24, 0.7) 0%, rgba(4, 11, 24, 0) 45%);
}

.pc-hs__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--pc-container));
  margin-inline: auto;
  padding-block: clamp(88px, 12vh, 128px) clamp(40px, 7vh, 72px);
}

.pc-hs__body {
  max-width: 720px;
}

.pc-hs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f4c20d;
}

.pc-hs__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #f4c20d;
}

.pc-hs__title {
  margin: 0 0 16px;
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.9vw, 3.3rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: #fff;
}

.pc-hs__title em {
  font-style: normal;
  color: #f4c20d;
}

.pc-hs__lead {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.6;
  color: rgba(234, 241, 251, 0.82);
}

.pc-hs__lead strong {
  color: #fff;
  font-weight: 600;
}

/* Rejilla de apoyo: los cuatro verbos, o las cifras de un resultado. */
.pc-hs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.pc-hs__grid li {
  margin: 0;
  padding: 14px 16px;
  background: rgba(4, 11, 24, 0.55);
}

.pc-hs__grid b {
  display: block;
  font-family: var(--pc-display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: 800;
  line-height: 1.1;
  color: #f4c20d;
}

.pc-hs__grid span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(234, 241, 251, 0.74);
}

.pc-hs__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.pc-hs__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #f4c20d;
  color: #051f39;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pc-hs__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(244, 194, 13, 0.28);
}

.pc-hs__alt {
  color: rgba(234, 241, 251, 0.86);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 194, 13, 0.6);
  padding-bottom: 2px;
}

.pc-hs__alt:hover {
  color: #fff;
}

/* --- Barra de control --- */

.pc-hero-nav {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  top: calc(100svh - 84px);
  width: min(calc(100% - 48px), var(--pc-container));
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* El lanzador del chat vive en la esquina inferior derecha: la barra
     se queda en la mitad izquierda para no quedar debajo. */
  padding-right: 120px;
}

.pc-hero-nav__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* El area de click mide 24px de alto; la marca visible son los 3px
   centrados. Se define por posicion y no por relleno para que no
   dependa de box-sizing. */
.pc-hero-nav__dot {
  position: relative;
  width: 36px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pc-hero-nav__dot::before,
.pc-hero-nav__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  margin-top: -1.5px;
}

.pc-hero-nav__dot::before {
  right: 0;
  background: rgba(255, 255, 255, 0.34);
  transition: background 0.2s ease;
}

.pc-hero-nav__dot::after {
  width: 0;
  background: #f4c20d;
}

.pc-hero-nav__dot:hover::before {
  background: rgba(255, 255, 255, 0.5);
}

.pc-hero-nav__dot[aria-current="true"]::after {
  width: 100%;
}

/* El relleno acompaña al avance automático; con la reproducción detenida
   la marca queda completa y quieta. */
.pc-hero-slider.is-playing .pc-hero-nav__dot[aria-current="true"]::after {
  animation: pcHeroFill var(--pc-hero-delay, 7s) linear forwards;
}

@keyframes pcHeroFill {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-hero-slider.is-playing .pc-hero-nav__dot[aria-current="true"]::after {
    animation: none;
    width: 100%;
  }
}

.pc-hero-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(234, 241, 251, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-hero-nav__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-hero-nav__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(4, 11, 24, 0.5);
  color: #eaf1fb;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pc-hero-nav__btn:hover {
  background: rgba(244, 194, 13, 0.18);
  border-color: rgba(244, 194, 13, 0.6);
}

.pc-hero-nav__btn:focus-visible,
.pc-hero-nav__dot:focus-visible {
  outline: 2px solid #f4c20d;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .pc-hero-nav {
    top: auto;
    bottom: 22px;
    padding-right: 96px;
  }
}

/* La barra de control no debe quedar bajo el lanzador del chat. */
@media (max-width: 1100px) {
  .pc-hero-nav {
    gap: 12px;
  }
  .pc-hero-nav__label {
    flex-basis: 100%;
    order: 3;
  }
}

/* --- Pie de fuente de las cifras del hero --- */

.pc-cih__source {
  text-align: right;
}

.pc-cih__source,
.pc-hs__source {
  margin: 14px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(234, 241, 251, 0.46);
}

.pc-cih__source b,
.pc-hs__source b {
  font-weight: 600;
  color: rgba(234, 241, 251, 0.66);
}

/* ---------- 2. Cinta "Asocapitales en acción" --------------- */

/* Una sola línea de datos bajo el cintillo de banderas: no compite
   con las secciones, solo deja el dato a la vista. */

.pc-ribbon {
  background: var(--pc-white);
  border-block: 1px solid var(--pc-border);
}

.pc-ribbon__inner {
  width: min(calc(100% - 48px), var(--pc-container));
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
}

.pc-ribbon__tag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: 118px;
  padding: 14px 22px 14px 0;
  margin-right: 22px;
  border-right: 1px solid var(--pc-border);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--pc-blue);
}

.pc-ribbon__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px 14px 0;
  margin-right: 16px;
  border-right: 1px solid var(--pc-border);
}

.pc-ribbon__item:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.pc-ribbon__n {
  font-family: var(--pc-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pc-navy);
}

.pc-ribbon__t {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--pc-muted);
}

/* ---------- 3. Los tres ejes, a sangre ---------------------- */

/* Entradilla corta sobre blanco y, debajo, tres franjas de ancho
   completo. La altura se mantiene baja: el video acompaña, no manda. */

.pc-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(220px, 32vh, 310px);
  color: #fff;
  text-decoration: none;
}

.pc-band video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.pc-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 31, 57, 0.9) 0%, rgba(5, 31, 57, 0.62) 44%, rgba(5, 31, 57, 0.14) 78%),
    linear-gradient(0deg, rgba(5, 31, 57, 0.7) 0%, rgba(5, 31, 57, 0) 56%);
}

.pc-band:hover video {
  transform: scale(1.04);
}

.pc-band:focus-visible {
  outline: 3px solid var(--pc-yellow);
  outline-offset: -3px;
}

.pc-band__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--pc-container));
  margin-inline: auto;
  padding-block: clamp(20px, 3vh, 30px);
}

.pc-band__i {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--pc-yellow);
}

.pc-band__name {
  margin: 0 0 8px;
  max-width: 20ch;
  font-family: var(--pc-display);
  font-size: clamp(1.32rem, 2.3vw, 1.95rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pc-band__text {
  margin: 0 0 12px;
  max-width: 48ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.pc-band__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pc-yellow);
}

.pc-band__more span {
  transition: transform 0.2s ease;
}

.pc-band:hover .pc-band__more span {
  transform: translateX(4px);
}

/* ---------- 4. Resultados, partidos con foto ---------------- */

.pc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: var(--pc-white);
}

.pc-split__media {
  position: relative;
  min-height: 340px;
  background-size: cover;
  background-position: 50% 45%;
}

.pc-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 31, 57, 0.62) 0%, rgba(5, 31, 57, 0.08) 62%);
}

.pc-split__quote {
  position: absolute;
  z-index: 2;
  inset: auto 26px 24px 26px;
  margin: 0;
  color: #fff;
  font-family: var(--pc-display);
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgba(5, 31, 57, 0.8);
}

.pc-split__quote em {
  font-style: normal;
  color: var(--pc-yellow);
}

.pc-split__body {
  padding: clamp(30px, 4.2vw, 52px) clamp(22px, 3.4vw, 48px);
}

.pc-split__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-blue);
}

.pc-split__title {
  margin: 0 0 10px;
  font-family: var(--pc-display);
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--pc-navy);
}

.pc-split__lead {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pc-muted);
}

.pc-result {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--pc-border);
}

.pc-result:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.pc-result h3 {
  margin: 0 0 8px;
  font-family: var(--pc-display);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--pc-blue);
}

/* Celdas de dato: la cifra arriba y su glosa debajo. En dos columnas
   la vista tenia que saltar de una a otra y las filas quedaban
   desparejas cuando la glosa ocupaba dos o tres lineas. */
.pc-result ul {
  display: grid;
  /* Cinco datos por eje: se fija el numero de columnas para que
     auto-fit no deje pistas vacias con su filete a la derecha. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pc-border);
}

.pc-result li {
  padding: 12px 16px 14px 0;
  background: var(--pc-white);
}

.pc-result li + li {
  padding-left: 16px;
}

.pc-result li b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--pc-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pc-navy);
  /* Las cifras conservan su ancho aunque la glosa parta en dos lineas. */
  white-space: nowrap;
}

.pc-result li span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pc-muted);
}

.pc-split__source {
  margin: 20px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pc-muted);
}

.pc-split__source b {
  font-weight: 600;
  color: var(--pc-text);
}

/* ---------- Adaptación ---------- */

@media (max-width: 1100px) {
  .pc-split {
    grid-template-columns: 1fr;
  }
  .pc-split__media {
    min-height: 220px;
  }
}

@media (max-width: 767px) {
  /* La cinta se desplaza en horizontal en vez de apilarse. */
  .pc-ribbon__inner {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .pc-ribbon__tag {
    max-width: 104px;
  }
  .pc-ribbon__item {
    flex: 0 0 auto;
    min-width: 158px;
  }
  .pc-band {
    min-height: 210px;
  }
  .pc-result ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .pc-result li,
  .pc-result li + li {
    padding: 12px 12px 12px 0;
  }
  .pc-result li:nth-child(2n) {
    padding-left: 12px;
  }
}

/* Fondos de portada: originales en alta calidad, sin zoom adicional. */
.pc-hero-slider .pc-cih__bg {
  background-image: url("../images/propuesta-c/hero/ciudad-nocturna.webp");
  background-position: 58% 50%;
}