/* ──────────────────────────────────────────────────────────
   cards-pucp.css — Cards estilo PUCP (limpio, minimalista)
   ────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   CARD base (PUCP-style)
   - Fondo blanco
   - Border-radius 12px suave
   - Imagen 4/3 arriba, sin border-radius extra (hereda del card)
   - Padding interno 22-24px en el body
   - Título h3/h4 peso 700 azul oscuro
   - Descripción gris suave
   - Sin meta footer, sin CTA visible
   - Hover sutil (lift mínimo + sombra suave)
   ════════════════════════════════════════════════════════════ */
body:not(.admin-body) .card {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out), border-color 350ms ease;
}
body:not(.admin-body) .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -16px rgba(11,37,69,0.18) !important;
  border-color: var(--line-strong) !important;
}

/* Imagen 4:3 (PUCP usa ~4:3) */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  background: var(--bg-soft);
  margin: 0;
  display: block;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.03); }

/* Tag flotante sobre la imagen (suave) */
.card__media-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--primary) !important;
  font-family: var(--font-display);
  font-size: 0.65rem !important;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Body del card — estilo PUCP simple */
.card__body {
  padding: 22px 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1;
}

/* Eyebrow opcional encima del título (sutil) */
.card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem !important;
  font-weight: 700;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 !important;
}

/* Título grande estilo PUCP */
.card__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.card__title a { color: inherit !important; text-decoration: none; }
.card:hover .card__title { color: var(--primary) !important; }

/* Descripción */
.card__excerpt {
  font-family: var(--font-body);
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
}

/* Meta + CTA visibles pero discretos — importantes para SEO (info estructurada) */
.card__meta {
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  flex-wrap: wrap;
  margin-top: 6px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line) !important;
  font-family: var(--font-display);
  font-size: 0.72rem !important;
  color: var(--ink-mute) !important;
  font-weight: 600 !important;
}
.card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card__meta svg { opacity: 0.7; }

/* CTA discreto al final tipo "Ver detalle →" */
.card__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 4px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  transition: gap var(--t-fast);
}
.card__cta::after { content: '→'; transition: transform var(--t-fast); }
body:not(.admin-body) .card:hover .card__cta::after { transform: translateX(3px); }

/* Card como anchor — todo clickeable */
a.card, a.card:hover { color: inherit; }

/* ════════════════════════════════════════════════════════════
   NEWS FEATURE — Cards medianas con el mismo estilo PUCP
   (la grande de la izquierda se mantiene con overlay)
   ════════════════════════════════════════════════════════════ */
.news-feature__med {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out), border-color 350ms ease !important;
  display: flex;
  flex-direction: column;
}
.news-feature__med:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -16px rgba(11,37,69,0.18) !important;
  border-color: var(--line-strong) !important;
}

.news-feature__med-img {
  aspect-ratio: 4 / 3 !important;
  background-size: cover;
  background-position: center;
  transition: transform 800ms var(--ease-out);
}
.news-feature__med:hover .news-feature__med-img { transform: scale(1.03); }

.news-feature__med-body {
  padding: 22px 24px 26px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-feature__med-tag {
  font-family: var(--font-display);
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
.news-feature__med-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.news-feature__med:hover .news-feature__med-title { color: var(--primary) !important; }
.news-feature__med-date {
  font-family: var(--font-display);
  font-size: 0.78rem !important;
  color: var(--ink-mute) !important;
  margin-top: auto !important;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   NEWS FEATURE BIG — la grande mantiene overlay PUCP-style
   ════════════════════════════════════════════════════════════ */
.news-feature__big {
  border-radius: 12px !important;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out) !important;
}
.news-feature__big:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(11,37,69,0.25) !important;
}

/* ════════════════════════════════════════════════════════════
   HERO STRIP — Item del strip de 2 noticias debajo del hero
   ════════════════════════════════════════════════════════════ */
.hero-strip__item {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out), border-color 350ms ease !important;
}
.hero-strip__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -16px rgba(11,37,69,0.18) !important;
  border-color: var(--line-strong) !important;
}
.hero-strip__img { aspect-ratio: 4 / 3 !important; }
.hero-strip__body {
  padding: 22px 24px 26px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-strip__tag {
  font-family: var(--font-display);
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: transparent !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
.hero-strip__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}

/* ════════════════════════════════════════════════════════════
   NEWS TICKER CARD (la card vieja por compatibilidad)
   ════════════════════════════════════════════════════════════ */
.news-ticker__card {
  border-radius: 12px !important;
}
.news-ticker__body { padding: 22px 24px 26px !important; }
.news-ticker__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Mobile ajustes */
@media (max-width: 640px) {
  .card__body, .news-feature__med-body, .hero-strip__body, .news-ticker__body {
    padding: 18px 20px 22px !important;
  }
  .card__title, .news-feature__med-title, .hero-strip__title { font-size: 1rem !important; }
}