.noticia-card {
  display:        flex;
  flex-direction: column;
  min-width:      0; /* permite encoger en grillas angostas (móvil 2 col) */
  background:     var(--card-bg, #F2E35D);
  --btn-reveal:   var(--nexo-purple);
  --btn-reveal-fg: var(--nexo-bg);
}

.noticia-card__media {
  display:        block;
  aspect-ratio:   437 / 354;
  overflow:       hidden;
  outline:        3px solid transparent;
  outline-offset: -3px;
  transition:     outline-color var(--duration-fast) ease;
}

.noticia-card__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

/* Solo con hover real: en táctil el hover se queda pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  .noticia-card:hover .noticia-card__media     { outline-color: var(--card-cta, var(--nexo-purple)); }
  .noticia-card:hover .noticia-card__media img { transform: scale(1.04); }
}

.noticia-card__body {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  flex:           1;
  min-width:      0; /* deja que el CTA se ajuste y no fuerce el ancho */
  gap:            var(--space-4);
  padding:        clamp(var(--space-5), 2vw, var(--space-6));
  color:          var(--card-fg, var(--nexo-dark));
}

/* El CTA puede partir su texto en tarjetas angostas en vez de desbordar. */
.noticia-card__cta { max-width: 100%; min-width: 0; white-space: normal; }

/* Móvil: tarjetas más compactas para que entren bien a 2 columnas. */
@media (max-width: 540px) {
  .noticia-card__body { gap: var(--space-3); padding: var(--space-4); }
  .noticia-card__cta  { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs, 0.72rem); }
}

.noticia-card__title {
  font-family: var(--font-heading);
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color:       var(--card-fg, var(--nexo-dark));

  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.noticia-card__text {
  font-size:   var(--fs-base);
  line-height: var(--lh-base);
  color:       var(--card-fg, var(--nexo-dark));

  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.noticia-card__cta {
  align-self:         stretch;
  display:            inline-flex;
  align-items:        center;
  justify-content:    center;
  min-height:         2.9rem;
  margin-block-start: auto;
  padding:            var(--space-3) var(--space-6);
  background:         var(--card-cta, var(--nexo-red));
  color:              var(--card-cta-fg, var(--nexo-cream));
  font-family:        var(--font-heading);
  font-size:          var(--fs-sm);
  font-weight:        var(--fw-semibold);
}

.noticia-card--yellow { --card-bg: #F2E35D;            --card-fg: var(--nexo-dark);  --card-cta: var(--nexo-red);    --card-cta-fg: var(--nexo-cream); --btn-reveal: var(--nexo-purple); --btn-reveal-fg: var(--nexo-bg);   }
.noticia-card--green  { --card-bg: #29E5A0;            --card-fg: var(--nexo-dark);  --card-cta: var(--nexo-purple); --card-cta-fg: var(--nexo-cream); --btn-reveal: var(--nexo-red);    --btn-reveal-fg: var(--nexo-dark); }
.noticia-card--cyan   { --card-bg: #0CF2FF;            --card-fg: var(--nexo-dark);  --card-cta: var(--nexo-purple); --card-cta-fg: var(--nexo-cream); --btn-reveal: var(--nexo-red);    --btn-reveal-fg: var(--nexo-dark); }
.noticia-card--purple { --card-bg: var(--nexo-purple); --card-fg: var(--nexo-cream); --card-cta: var(--nexo-yellow); --card-cta-fg: var(--nexo-dark);  --btn-reveal: var(--nexo-red);    --btn-reveal-fg: var(--nexo-dark); }
.noticia-card--red    { --card-bg: var(--nexo-red);    --card-fg: var(--nexo-cream); --card-cta: var(--nexo-yellow); --card-cta-fg: var(--nexo-dark);  --btn-reveal: var(--nexo-red);    --btn-reveal-fg: var(--nexo-dark); }

.cards-carousel {
  --carousel-gap:             clamp(var(--space-5), 2.5vw, var(--space-8));

  display:                    flex;
  gap:                        var(--carousel-gap);
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:            auto;
  padding-block-end:          var(--space-4);
  cursor:                     grab;
  scrollbar-width:            none;
}

.cards-carousel::-webkit-scrollbar {
  display: none;
}

.cards-carousel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cards-carousel img,
.cards-carousel a {
  -webkit-user-drag: none;
  user-select: none;
}

.cards-carousel.is-dragging .noticia-card__media {
  outline-color: transparent;
}

.cards-carousel.is-dragging .noticia-card__media img {
  transform: none;
}

/* Vistas completas sin tarjeta cortada: 3 en desktop, 2 en tablet, 1 en móvil. */
.cards-carousel > * {
  flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
}

@media (max-width: 900px) {
  .cards-carousel > * { flex-basis: calc((100% - var(--carousel-gap)) / 2); }
}

@media (max-width: 640px) {
  .cards-carousel > * { flex-basis: 100%; }
}

.dir-card {
  display:        flex;
  flex-direction: column;
  background:     var(--dir-color, var(--nexo-cyan));
}

.dir-card__media {
  display:      block;
  aspect-ratio: 1 / 1;
  overflow:     hidden;
}

.dir-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-expo);
}


@media (hover: hover) and (pointer: fine) {
  .dir-card:hover .dir-card__img { transform: scale(1.04); }
}

.dir-card__body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  padding:        clamp(var(--space-5), 2vw, var(--space-6));
  background:     var(--dir-color, var(--nexo-cyan));
  color:          var(--dir-fg, var(--nexo-dark));
}

.dir-card__logo { display: block; }

.dir-card__logo img {
  width:  clamp(150px, 82%, 230px);
  height: auto;
}

/* Nombre en texto (colaboradores de /programa y respaldo del directorio): en negrita. */
.dir-card__logo--text {
  font-family:     var(--font-heading);
  font-weight:     var(--fw-bold);
  font-size:       var(--fs-lg);
  line-height:     var(--lh-tight);
  color:           var(--dir-fg, var(--nexo-dark));
  text-decoration: none;
}

.dir-card__text {
  font-size:   var(--fs-sm);
  line-height: var(--lh-base);
  color:       var(--dir-fg, var(--nexo-dark));

  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.dir-card__more {
  margin-block-start:    auto;
  font-family:           var(--font-heading);
  font-size:             var(--fs-sm);
  font-weight:           var(--fw-semibold);
  color:                 var(--dir-fg, var(--nexo-dark));
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            opacity var(--duration-fast) ease;
}

.dir-card__more:hover { opacity: 0.6; }

/* Logos (detectados por nexo_media_logo_attrs): contenidos, sin recorte,
   sobre el fondo que les corresponde. Aplica al media de cualquier tarjeta. */
.media--logo { background: var(--media-logo-bg, var(--nexo-dark)); }
.media--logo img { object-fit: contain; padding: clamp(0.75rem, 8%, 1.75rem); }