.evento {
  --evento-borde: #e7eaee;
  --evento-radio: 12px;
  --evento-sangria: 42px;
  --evento-preliminar: #b26a00;
  --evento-confirmado: var(--green-800);
}

/* Hero con velo uniforme y no degradado: así lo pide el diseño, y la foto ya trae su propio azul a la derecha */

.header__bg--eventos {
  min-height: 222px;
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(rgba(9, 32, 57, .62), rgba(9, 32, 57, .62)),
    var(--evento-cabecera, url('/images/eventos-hero.webp'));
}

/* El 80% está ajustado a la foto genérica; la de cada evento se encuadra al centro */
.header__bg--foto-propia {
  background-position: center;
}

@supports not (background-image: url('/images/x.webp')) {
  .header__bg--eventos {
    background-image:
      linear-gradient(rgba(9, 32, 57, .62), rgba(9, 32, 57, .62)),
      var(--evento-cabecera, url('/images/eventos-hero.jpg'));
  }
}

.evento .header__img {
  color: var(--white);
}

.header__bg--eventos .header__title .title {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
}

.evento-hero__edicion {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* Color, borde, radio y peso vienen de los botones de style.css: aquí solo el alto y el relleno */

.evento-boton {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--spacing-s);
  font-size: var(--text-body-s);
  text-decoration: none;
}

/* Secciones: el espacio lo pone el contenedor, así cualquier orden armado en el panel queda con el mismo ritmo */

.evento-secciones {
  padding: var(--spacing-s) 0 88px;
}

.evento-secciones > * + * {
  margin-top: 88px;
}

.evento-secciones > .evento-bloque--presentacion + * {
  margin-top: var(--spacing-xxl);
}

.evento-secciones:has(> .evento-instituciones:last-child) {
  padding-bottom: 0;
}

.evento-vista-previa {
  padding: 10px 0;
  border-bottom: 1px solid #ffd79a;
  background-color: #fff4e0;
  color: #8a5200;
  font-size: var(--text-body-s);
}

/* Propósito y cifras */

.evento-proposito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 490px;
  gap: var(--spacing-xl) 60px;
  align-items: center;
}

.evento-proposito__texto {
  padding-left: var(--evento-sangria);
}

.evento-proposito__texto h2 {
  font-family: var(--font-slab);
  font-size: var(--text-heading-l);
  font-weight: var(--weight-bold);
  line-height: 1.12;
  color: var(--dark-500);
  margin: 0 0 var(--spacing-s);
}

.evento-proposito__texto p {
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

.evento-proposito__texto .evento-postulacion {
  margin-top: var(--spacing-s);
  font-size: var(--text-body-s);
}

.evento-postulacion a {
  color: var(--link-default);
  font-weight: var(--weight-medium);
}

.evento-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--spacing-m);
}

.evento-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m) 36px;
  margin: 0;
  padding: 40px 44px;
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
}

.evento-cifra {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-xxs);
}

.evento-cifra dd {
  margin: 0;
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--primary-600);
  font-variant-numeric: tabular-nums;
}

.evento-cifra dt {
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: .14em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--gray-600);
}

/* Paneles con borde: agenda y repositorio */

.evento-panel {
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
  padding: var(--spacing-xl) var(--evento-sangria) 50px;
}

.evento-seccion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s) var(--spacing-xl);
  margin-bottom: 44px;
}

.evento .title--slab {
  margin: 0;
  padding: 2px 0 2px 15px;
  border-left-width: 3px;
}

.evento-seccion__nota {
  max-width: 432px;
  margin: 0;
  color: var(--gray-600);
  font-size: var(--text-body-xs);
  line-height: 1.3;
}

.evento-seccion__nota--corta {
  max-width: 370px;
}

/* Agenda */

.evento-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-body-xs);
  color: var(--gray-700);
}

.evento-leyenda li {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.evento-estado {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.evento-estado--confirmado { background-color: var(--evento-confirmado); }
.evento-estado--preliminar { background-color: var(--evento-preliminar); }
.evento-estado--tentativo  { background-color: var(--gray-400); }
.evento-estado--realizada  { background-color: var(--primary-600); }

.evento-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 67px 0 34px;
}

.evento-dia {
  min-height: 32px;
  padding: 0 var(--spacing-s);
  border: 1.5px solid var(--gray-200);
  border-radius: 3px;
  background-color: var(--white);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
  transition: border-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

.evento-dia:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
}

.evento-dia--activo,
.evento-dia--activo:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--white);
  font-weight: var(--weight-bold);
}

.evento-fichas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.evento-ficha {
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  gap: 22px;
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
  padding: 22px var(--spacing-m) 22px;
  transition: border-color var(--hover-dur) var(--hover-ease);
}

.evento-ficha:hover {
  border-color: var(--primary-300);
}

.evento-ficha__fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  padding-right: var(--spacing-m);
  border-right: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  letter-spacing: .12em;
}

.evento-ficha__fecha span:first-child {
  font-size: 10px;
  color: var(--gray-600);
}

.evento-ficha__fecha strong {
  font-size: 2.5rem;
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--primary-600);
}

.evento-ficha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xxs);
  font-size: var(--text-body-xs);
  color: var(--gray-600);
}

.evento-ficha__tipo {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--weight-bold);
  color: var(--text-color);
}

.evento-ficha__horario {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.evento-ficha__cuerpo h3 {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  margin: 0 0 6px;
}

.evento-ficha__descripcion,
.evento-ficha__participa {
  color: var(--gray-700);
  font-size: var(--text-body-s);
  margin: 0 0 10px;
}

.evento-ficha__participa {
  display: flex;
  align-items: center;
  gap: 6px;
}

.evento-ficha__participa svg,
.evento-ficha__lugar svg {
  color: var(--gray-400);
}

.evento-ficha__materiales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin-bottom: 10px;
}

.evento-ficha__materiales a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-body-xs);
  font-weight: var(--weight-medium);
  color: var(--link-default);
}

.evento-ficha__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--gray-100);
  font-size: var(--text-body-xs);
  color: var(--gray-600);
}

.evento-organizadores {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.evento-organizadores li {
  background-color: var(--gray-50);
  border-radius: 3px;
  padding: 2px 8px;
  color: var(--gray-700);
}

.evento-ficha__lugar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: var(--weight-medium);
}

.evento-agenda__mas {
  margin-top: 51px;
}

/* Participantes */

.evento-participantes {
  padding: 0 var(--evento-sangria);
}

.evento-personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.evento-persona {
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
  overflow: hidden;
  transition: border-color var(--hover-dur) var(--hover-ease);
}

.evento-persona:hover {
  border-color: var(--primary-300);
}

.evento-persona__retrato {
  height: 181px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-50);
  color: var(--gray-400);
}

.evento-persona__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evento-persona__iniciales {
  font-family: var(--font-slab);
  font-size: 2.35rem;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
}

.evento-persona__datos {
  padding: var(--spacing-s) var(--spacing-s) 20px;
}

.evento-persona__datos p {
  margin: 0;
}

.evento-persona__actividad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  color: var(--primary-600);
  margin-bottom: var(--spacing-xxxs) !important;
}

.evento-persona__datos h3 {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  margin: 0 0 var(--spacing-xxxs);
}

.evento-persona__rol {
  font-size: var(--text-body-xs);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--gray-700);
}

.evento-persona__institucion {
  font-size: 13px;
  color: var(--gray-600);
}

/* Repositorio */

.evento-filtro {
  display: block;
  margin: 51px 0 6px;
  font-size: var(--text-body-xs);
  color: var(--gray-700);
}

.evento-filtro__select {
  width: 177px;
  height: 45px;
  padding: 0 38px 0 var(--spacing-xs);
  border: 1.5px solid var(--gray-200);
  border-radius: 3px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  font-size: var(--text-body-xs);
  color: var(--text-color);
  appearance: none;
}

.evento-repositorio__vacio {
  margin: 22px 0 0;
  color: var(--gray-600);
  font-size: var(--text-body-s);
}

.evento-materiales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin-top: 22px;
}

.evento-material {
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
  padding: 14px var(--spacing-s);
  transition: border-color var(--hover-dur) var(--hover-ease);
}

.evento-material:hover {
  border-color: var(--primary-300);
}

.evento-material__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
  font-size: var(--text-body-xs);
  color: var(--gray-600);
}

.evento-material h3 {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin: 0 0 var(--spacing-xxxs);
}

.evento-material p {
  font-size: 15px;
  color: var(--gray-700);
  margin: 0 0 var(--spacing-xxs);
}

.evento-material .evento-material__categoria {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.evento-material a {
  font-size: var(--text-body-s);
  font-weight: var(--weight-bold);
  color: var(--link-default);
  text-decoration: underline;
}

/* Etiquetas de estado y de tipo de material */

.evento-etiqueta {
  display: inline-block;
  border: 1.5px solid transparent;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.evento-etiqueta--confirmado { background-color: var(--green-50); border-color: var(--green-200); color: var(--evento-confirmado); }
.evento-etiqueta--preliminar { background-color: #fff4e0; border-color: #ffd79a; color: #8a5200; }
.evento-etiqueta--tentativo  { background-color: var(--gray-50); border-color: var(--gray-200); color: var(--gray-700); }
.evento-etiqueta--realizada  { background-color: var(--info-50); border-color: var(--info-200); color: var(--info-800); }
.evento-etiqueta--enlace     { background-color: var(--info-50); border-color: var(--info-200); color: var(--info-800); }
.evento-etiqueta--archivo,
.evento-etiqueta--pdf        { background-color: var(--warning-50); border-color: var(--warning-200); color: var(--warning-900); }
.evento-etiqueta--video      { background-color: #ede7f6; border-color: #c5b3e6; color: #4527a0; }

/* Texto libre */

.evento-texto {
  padding: 0 var(--evento-sangria);
}

.evento .evento-texto h2 {
  margin-bottom: var(--spacing-m);
}

.evento-texto p {
  max-width: 72ch;
  color: var(--gray-700);
}

/* Instituciones vinculadas */

.evento-instituciones {
  background-color: var(--gray-50);
  padding: 45px 0 52px;
}

.evento-instituciones__rotulo {
  margin: 0 0 40px;
  font-size: var(--text-body-xs);
  font-weight: var(--weight-regular);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.evento-instituciones__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sin logo, el nombre ocupa la misma caja para que la grilla no se descuadre. */
.evento-institucion {
  width: 128px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  border: 1px solid var(--evento-borde);
  background-color: var(--white);
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  text-align: center;
  color: var(--gray-700);
}

.evento-institucion:has(img) {
  padding: 0;
  border: 0;
}

.evento-institucion__enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.evento-institucion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Índice de eventos */

.evento-destacado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 490px;
  gap: var(--spacing-xl) 60px;
  align-items: center;
}

.evento-destacado__texto {
  padding-left: var(--evento-sangria);
}

.evento-destacado__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0 0 var(--spacing-s);
  font-size: var(--text-body-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-700);
}

.evento-destacado h2 {
  font-family: var(--font-slab);
  font-size: var(--text-heading-l);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--dark-500);
  margin: 0;
}

.evento-destacado__edicion {
  margin: var(--spacing-xxxs) 0 var(--spacing-s);
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.evento-destacado__bajada {
  max-width: 60ch;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--gray-700);
}

.evento-anio {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--spacing-s) var(--spacing-m);
  padding-top: var(--spacing-m);
  border-top: 1px solid var(--gray-100);
}

.evento-anio + .evento-anio {
  margin-top: var(--spacing-xl);
}

.evento .evento-anio__numero {
  margin: 0;
  font-family: var(--font-slab);
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--primary-600);
}

.evento-registro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.evento-registro__item {
  position: relative;
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  border: 1px solid var(--evento-borde);
  border-radius: var(--evento-radio);
  padding: 22px var(--spacing-m);
  transition: border-color var(--hover-dur) var(--hover-ease);
}

.evento-registro__item:hover,
.evento-registro__item:focus-within {
  border-color: var(--primary-300);
}

.evento-registro__cuerpo h4 {
  margin: var(--spacing-xxs) 0 4px;
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--dark-500);
}

/* Toda la tarjeta lleva al evento; los enlaces de agenda y materiales quedan encima para seguir siendo clicables */
.evento-registro__enlace {
  color: inherit;
  text-decoration: none;
}

.evento-registro__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.evento-registro__enlace:focus-visible {
  outline: none;
}

.evento-registro__item:has(.evento-registro__enlace:focus-visible) {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.evento-registro__detalle {
  margin: 0 0 10px;
  font-size: var(--text-body-s);
  color: var(--gray-700);
}

.evento-registro__legado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin: 0;
}

.evento-registro__legado a {
  position: relative;
  z-index: 1;
  font-size: var(--text-body-xs);
  font-weight: var(--weight-medium);
  color: var(--link-default);
}

.evento-registro__ir {
  align-self: center;
  color: var(--primary-600);
}

.evento-registro__vacio {
  margin: 0;
  color: var(--gray-600);
}

.evento-etiqueta--proximo   { background-color: var(--white); border-color: var(--primary-300); color: var(--primary-700); }
.evento-etiqueta--en-curso  { background-color: var(--green-50); border-color: var(--green-200); color: var(--evento-confirmado); }
.evento-etiqueta--realizado { background-color: var(--info-50); border-color: var(--info-200); color: var(--info-800); }

/* Esta hoja solo se carga aquí: la banda de instituciones cierra contra el pie, sin el margen que el pie trae en el resto del sitio */
.footer {
  margin-top: 0;
}

@media (max-width: 991px) {
  .evento-proposito,
  .evento-destacado {
    grid-template-columns: 1fr;
  }

  .evento-proposito__texto,
  .evento-destacado__texto {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .evento {
    --evento-sangria: var(--spacing-s);
  }

  .evento-proposito__texto h2 {
    font-size: 1.75rem;
  }

  .evento-cifras {
    padding: var(--spacing-m);
  }

  .evento-cifra dd {
    font-size: var(--text-heading-m);
  }

  .evento-dias {
    margin-top: 0;
  }

  .evento-ficha,
  .evento-registro__item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    padding: var(--spacing-s);
  }

  .evento-registro__ir {
    display: none;
  }

  .evento-anio {
    grid-template-columns: 1fr;
  }

  .evento .evento-anio__numero {
    font-size: var(--text-heading-l);
  }


  .evento-ficha__fecha {
    flex-direction: row;
    align-items: baseline;
    gap: .4rem;
    padding: 0 0 var(--spacing-xxs);
    border-right: 0;
    border-bottom: 1px solid var(--gray-100);
  }

  .evento-ficha__fecha strong {
    font-size: 1.5rem;
  }

  .evento-ficha__lugar {
    margin-left: 0;
  }

  .evento-secciones > * + * {
    margin-top: var(--spacing-xxl);
  }

  .evento-secciones > .evento-bloque--presentacion + * {
    margin-top: 40px;
  }
}
