.badge-year-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 10px;
  padding: 0px 2px;
  margin: 1px 0px;
  border-radius: 4px;
  background: var(--superficie-soft);
  border: 1px solid var(--purpura);
  color: var(--magenta-osc);
  text-decoration: none;
  box-shadow: none;
  transition: background 0.2s, color 0.2s;
}
.badge-year-min:hover {
  background: var(--lila);
  color: var(--purpura);
}
.badge-year-num {
  font-size: 0.7em;
  font-weight: 600;
  margin-bottom: 0px;
}
.badge-year-info {
  font-size: 0.55em;
  font-weight: 400;
  opacity: 0.6;
}
.badge-year-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 16px;
  padding: 1px 3px;
  margin: 2px 1px;
  border-radius: 7px;
  background: var(--superficie-soft);
  border: 1px solid var(--purpura);
  color: var(--magenta-osc);
  text-decoration: none;
  box-shadow: 0 1px 1px var(--sombra);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.badge-year-min:hover {
  background: var(--lila);
  color: var(--purpura);
  box-shadow: 0 2px 4px var(--sombra-2);
}
.badge-year-num {
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 0px;
}
.badge-year-info {
  font-size: 0.65em;
  font-weight: 400;
  opacity: 0.7;
}
.badge-year-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 24px;
  padding: 2px 6px;
  margin: 4px 2px;
  border-radius: 10px;
  background: var(--superficie-soft);
  border: 1px solid var(--purpura);
  color: var(--magenta-osc);
  text-decoration: none;
  box-shadow: 0 1px 2px var(--sombra);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.badge-year-min:hover {
  background: var(--lila);
  color: var(--purpura);
  box-shadow: 0 2px 6px var(--sombra-2);
}
.badge-year-num {
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 0px;
}
.badge-year-info {
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.75;
}
/* Badges de año aún más delgadas y minimalistas */
.badge-year-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  min-height: 32px;
  padding: 4px 10px;
  margin: 6px 4px;
  border-radius: 14px;
  background: var(--superficie-soft);
  border: 1px solid var(--purpura);
  color: var(--magenta-osc);
  text-decoration: none;
  box-shadow: 0 1px 4px var(--sombra);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.badge-year-min:hover {
  background: var(--lila);
  color: var(--purpura);
  box-shadow: 0 2px 8px var(--sombra-2);
}
.badge-year-num {
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 1px;
}
.badge-year-info {
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.8;
}
/* =========================================================
   PALETA E IDENTIDAD
   ========================================================= */
:root{
  --azul-claro:#91C4F2; --azul-polvo:#8CA0D7; --lila:#9D79BC;
  --purpura:#A14DA0; --magenta-osc:#7E1F86;

  --bg-1:#f5f3fa; --bg-2:#ece8f7; --bg-3:#eae6f6;

  --superficie:#ffffff; --superficie-soft:#fbfaff;

  --borde:#e7e4f0; --sombra:rgba(9,12,22,.10); --sombra-2:rgba(9,12,22,.16);
  --primario:#7E1F86; --secundario:#8CA0D7;

  --link:#7E1F86; --link-hover:#A14DA0;

  --texto:#4a4660; --texto-sec:#6b6780; /* versión clara por defecto */
  --texto-claro:#fafbff;
}

/* =========================================================
   BASE + FONDO DINÁMICO
   ========================================================= */
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  color:var(--texto);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400; line-height:1.66;
  background-color:var(--bg-1);
  background-image:
    radial-gradient(900px 500px at 8% 5%,  rgba(126,31,134,.10), transparent 60%),
    radial-gradient(700px 400px at 90% 25%, rgba(161,77,160,.08), transparent 60%),
    radial-gradient(800px 450px at 40% 85%, rgba(145,196,242,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-1) 100%);
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:no-repeat;
  background-size:130% 130%, 120% 120%, 140% 140%, cover;
  animation:bgMove 26s ease-in-out infinite alternate;
}
@keyframes bgMove{
  0%{ background-position:0% 0%, 100% 15%, 30% 95%, 50% 50%; }
  100%{ background-position:14% 4%, 84% 22%, 60% 78%, 50% 50%; }
}
/* textura sutil */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.015) 1px, transparent 1px);
  background-size:2px 2px, 3px 3px; background-position:0 0, 1px 1px;
}

/* =========================================================
   TIPOGRAFÍA / ENLACES
   ========================================================= */
h1,h2,h3{
  font-family:"Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing:.2px; color:#3a3452;
}
h1{ font-weight:700 } h2,h3{ font-weight:600 }
a{ color:var(--link); text-decoration:none }
a:hover{ color:var(--link-hover); text-decoration:underline }
small,.text-muted,.listing-description,.card .card-subtitle{ color:var(--texto-sec) !important; }
strong,b{ color:#352f49; }
code,kbd,samp{ color:#5a4f76; background:#f3eefb; border-radius:.35rem; padding:.08rem .32rem; }
pre code{ background:#f6f2fc !important; color:#3f365d !important; border:1px solid #ece6f7; border-radius:.6rem; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(9,12,22,.06);
  box-shadow:0 6px 18px var(--sombra);
}
.navbar .navbar-brand, .navbar .nav-link{ color:#323d58 !important; font-weight:600; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:#242e46 !important; background:rgba(15,22,35,.08); border-radius:10px; }
.navbar .active, .navbar .active>.nav-link{ color:#242e46 !important; background:rgba(15,22,35,.12); border-radius:10px; }

/* Tools (GitHub / toggle) */
.quarto-navbar-tools a, .quarto-navbar-tools .nav-link{
  display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .58rem; border-radius:10px;
  transition:background .2s ease, color .2s ease;
}
.quarto-navbar-tools a:hover{ background:rgba(15,22,35,.08); }
.navbar .bi{ font-size:1.05rem; line-height:1; }

/* =========================================================
   SUPERFICIES GENERALES
   ========================================================= */
.page-surface{
  background:var(--superficie); border:1px solid var(--borde);
  box-shadow:0 22px 44px var(--sombra); border-radius:16px;
  padding:24px 18px; margin:18px auto 28px; color:var(--texto);
}
.table thead th{ color:#544f6a; background:#f7f3fd; border-bottom:1px solid #ece6f7; }
.table, table{ color:var(--texto); border-color:#eee9f8; }

/* =========================================================
   HÉROE
   ========================================================= */
.hero{ position:relative; border-radius:16px; margin:8px auto 22px; padding:2.4rem 1.5rem; overflow:hidden; color:#fff; }
.hero-anim{ background:linear-gradient(135deg, rgba(126,31,134,.95), rgba(161,77,160,.92) 45%, rgba(157,121,188,.90)); position:relative; }
.hero-anim::before, .hero-anim::after{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 250px at 80% 60%, rgba(255,255,255,.10), transparent 60%);
  animation:floatGlow 12s linear infinite; mix-blend-mode:screen;
  pointer-events:none; z-index:0;  /* no tapa clics */
}
.hero-anim > *{ position:relative; z-index:1; }
@keyframes floatGlow{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.03)} 100%{transform:rotate(360deg) scale(1)} }

/* Texto y botones del héroe */
.hero-anim, .hero-anim *{ color:#fff !important; }
.hero-anim h1,.hero-anim h2,.hero-anim h3{
  font-weight:800; letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.06);
}
.hero-anim p,.hero-anim .lead,.hero-anim li{ color:#f7f6ff !important; opacity:.98; }
.hero .btn{ margin-right:.5rem; margin-bottom:.5rem }

/* Botones */
.btn{ border-radius:12px; font-weight:600 }
.btn-primario{ background:#fff; color:#4b2e66; border:1px solid rgba(55,32,77,.15) }
.btn-primario:hover{ filter:brightness(.96); box-shadow:0 6px 18px rgba(55,32,77,.16) }
.btn-secundario{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.55) }
.btn-secundario:hover{ background:rgba(255,255,255,.22) }
.btn-borde{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85) }
.btn-borde:hover{ background:rgba(255,255,255,.12) }
.btn-borde-claro{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7) }
.btn-borde-claro:hover{ background:rgba(255,255,255,.15) }

/* Ocultar título global en home si lo usas así */
.quarto-title-block{ display:none; }

/* =========================================================
   TARJETAS / BLOQUES (las que estás usando)
   ========================================================= */
.card.sombra{
  border:1px solid var(--borde);
  box-shadow:0 10px 24px var(--sombra);
  border-radius:14px; background:var(--superficie); color:var(--texto);
}
.bloques{ margin:1.25rem auto; }
.bloques .row.g-4{ row-gap:1.25rem; }

.bloques .card{
  padding:18px 22px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(17,12,46,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bloques .h-100{ height:auto !important; }

.bloques .card h3, .bloques .card h4, .bloques .card h5, .bloques .card h6{
  margin:2px 0 8px; font-weight:700; letter-spacing:.2px; line-height:1.25;
}
.bloques .card p{ margin:0 0 10px; line-height:1.55; color:var(--texto-sec); }
.bloques .card a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
.bloques .card a:hover{ border-bottom-color:currentColor; }
.bloques .card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(17,12,46,.12); border-color:rgba(0,0,0,.10); }

/* =========================================================
   MALLA / TARJETAS POR AÑO
   ========================================================= */
.malla{ margin:1.25rem auto; }
.card-anio{
  text-align:center; padding:1.2rem; border-radius:14px; border:1px solid var(--borde);
  box-shadow:0 8px 18px var(--sombra); font-weight:700; color:var(--magenta-osc);
  background:linear-gradient(180deg,var(--superficie), var(--superficie-soft));
  display:block;
}
.card-anio:hover{ transform:translateY(-2px); box-shadow:0 14px 28px var(--sombra-2) }

/* =========================================================
   BANDA “ÚLTIMOS APUNTES”
   ========================================================= */
.banda.oscura{
  background:linear-gradient(135deg, rgba(126,31,134,.15), rgba(161,77,160,.15));
  padding:1.2rem 0; margin:1.8rem 0; border-radius:12px; border:1px solid var(--borde);
}
.banda.oscura h3, .banda.oscura .text-white{ color:var(--texto) !important; }
.banda.oscura table{
  background:#ffffff; color:#2a2a2a; border-radius:8px; overflow:hidden; border:1px solid var(--borde);
}

/* =========================================================
   EQUIPO (people cards)
   ========================================================= */
.people-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem; margin:1rem 0 2rem;
}
@media (max-width:992px){ .people-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .people-grid{ grid-template-columns:1fr; } }

.person-card{
  background:var(--superficie); border:1px solid var(--borde);
  box-shadow:0 10px 24px var(--sombra); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.person-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px var(--sombra-2); border-color:rgba(0,0,0,.06); }
.person-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--superficie-soft); }
.person-body{ padding:.9rem 1rem 1.1rem; }
.person-name{ margin:0 0 .15rem; font-weight:700; color:var(--texto); }
.person-role{ margin:0 0 .5rem; color:var(--texto-sec); font-weight:600; font-size:.95rem; }
.person-bio{ margin:0 0 .8rem; color:var(--texto); font-size:.95rem; }
.person-links{ display:flex; flex-wrap:wrap; gap:.4rem; }
.person-links .pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .55rem; border-radius:999px;
  background:linear-gradient(180deg, var(--superficie), var(--superficie-soft));
  border:1px solid var(--borde); color:var(--texto); text-decoration:none; font-weight:600; font-size:.9rem;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.person-links .pill:hover{ transform:translateY(-1px); box-shadow:0 8px 18px var(--sombra); }

/* =========================================================
   TEMA OSCURO (soporta html[data-bs-theme] y .quarto-dark)
   ========================================================= */
:root[data-bs-theme="dark"], .quarto-dark{
  --bg-1:#14111c; --bg-2:#1b1726; --bg-3:#261e35;
  --superficie:#1e1a27; --superficie-soft:#211d2b;
  --borde:rgba(255,255,255,.10); --sombra:rgba(0,0,0,.45); --sombra-2:rgba(0,0,0,.55);
  --texto:#e9eaf0; --texto-sec:#c9c6d8; --link:#91C4F2; --link-hover:#A14DA0;
}
:root[data-bs-theme="dark"] body, .quarto-dark body{
  background-color:var(--bg-1) !important;
  background-image:
    radial-gradient(900px 500px at 8% 5%,  rgba(126,31,134,.24), transparent 60%),
    radial-gradient(700px 400px at 90% 25%, rgba(161,77,160,.16), transparent 60%),
    radial-gradient(800px 450px at 40% 85%, rgba(145,196,242,.14), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-1) 100%);
  color:var(--texto) !important;
}
:root[data-bs-theme="dark"] .navbar, .quarto-dark .navbar{
  background:#132534 !important; border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
:root[data-bs-theme="dark"] .navbar .navbar-brand,
:root[data-bs-theme="dark"] .navbar .nav-link,
.quarto-dark .navbar .navbar-brand,
.quarto-dark .navbar .nav-link{ color:#eaf0f6 !important; }
:root[data-bs-theme="dark"] .navbar .nav-link:hover,
.quarto-dark .navbar .nav-link:hover{ background:rgba(255,255,255,.10); border-radius:10px; }

:root[data-bs-theme="dark"] .page-surface,
.quarto-dark .page-surface,
:root[data-bs-theme="dark"] .card.sombra,
.quarto-dark .card.sombra,
:root[data-bs-theme="dark"] .tile,
.quarto-dark .tile{
  background:var(--superficie) !important; border-color:var(--borde) !important;
  color:var(--texto) !important; box-shadow:0 16px 40px var(--sombra) !important;
}
:root[data-bs-theme="dark"] h1, :root[data-bs-theme="dark"] h2, :root[data-bs-theme="dark"] h3,
.quarto-dark h1, .quarto-dark h2, .quarto-dark h3{ color:#f5f7fb !important; }
:root[data-bs-theme="dark"] a, .quarto-dark a{ color:var(--link) !important; }
:root[data-bs-theme="dark"] a:hover, .quarto-dark a:hover{ color:var(--link-hover) !important; }

:root[data-bs-theme="dark"] .banda.oscura, .quarto-dark .banda.oscura{
  background:linear-gradient(135deg, var(--magenta-osc), var(--purpura));
  border-color:rgba(255,255,255,.10);
}
:root[data-bs-theme="dark"] .banda.oscura table, .quarto-dark .banda.oscura table{
  background:#2b2b2b !important; color:#f0f0f0 !important; border-color:rgba(255,255,255,.10) !important;
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-anim::before,.hero-anim::after, body{ animation:none !important; }
}
/* Permite a los navegadores optimizar ambos esquemas */
:root{ color-scheme: light dark; }

/* ====== FIX DEFINITIVO: tarjetas de "Destacados" ====== */
.bloques .card {
  /* fuerza variables de Bootstrap para la card */
  --bs-card-bg: #fff;
  --bs-card-border-color: rgba(0,0,0,.08);
  --bs-card-border-width: 1px;

  background: var(--bs-card-bg) !important;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(17,12,46,.10) !important;

  /* como no usamos .card-body, damos el padding acá */
  padding: 18px 22px !important;
  display: block !important;
}

.bloques .card h3,
.bloques .card h4,
.bloques .card h5,
.bloques .card h6 { 
  margin: 2px 0 8px !important;
  font-weight: 700;
}

.bloques .card p { 
  margin: 0 0 10px !important; 
  color: var(--texto-sec) !important;
  line-height: 1.55;
}

.bloques .card a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bloques .card a:hover { border-bottom-color: currentColor; }

.bloques .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17,12,46,.14) !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* separaciones verticales entre tarjetas */
.bloques .row.g-4 { row-gap: 1.25rem !important; }


/* ===== FIX 2: contraste dentro del héroe ===== */
.hero-anim input,
.hero-anim .form-control,
.hero-anim .form-select,
.hero-anim .form-check-input {
  color: #2a2340 !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}

.hero-anim a.btn.btn-primario,
.hero-anim .btn-primario {
  background: #ffffff !important;
  color: #4b2e66 !important;
  border: 1px solid rgba(55,32,77,.15) !important;
  box-shadow: 0 4px 14px rgba(55,32,77,.12) !important;
}

.hero-anim a:not(.btn),
.hero-anim .link-hero {
  color: #ffffff !important;           /* enlaces sueltos siguen siendo visibles */
  text-decoration: underline;
}

/* Si algún texto quedó invisible por herencia, fuerza el color del párrafo principal: */
.hero-anim p { color: #f7f6ff !important; }

/* === GRID DE FEATURES (3 columnas → 2 → 1) === */
.features-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin: .75rem 0 1rem;
}
@media (max-width: 980px){ .features-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .features-grid{ grid-template-columns:1fr; } }

/* === TILE (no depende de .card) === */
.feature-tile{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(17,12,46,.10) !important;

  padding:20px !important;
  display:flex !important;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(17,12,46,.14) !important;
  border-color:rgba(0,0,0,.12) !important;
}

/* Icono redondito arriba */
.feature-tile .ico{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  background: radial-gradient(circle at 30% 30%, rgba(144,118,255,.95), rgba(117,76,162,.9));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Tipografía interna del tile */
.feature-tile h3,
.feature-tile h4{
  margin:6px 0 2px !important;
  font-weight:800;
  line-height:1.2;
  color:#3a3452;
}
.feature-tile p{
  margin:0 !important;
  line-height:1.55;
  color:var(--texto-sec);
}
.feature-tile a{ font-weight:600; text-decoration:underline; }

/* Dark mode coherente */
:root[data-bs-theme="dark"] .feature-tile,
.quarto-dark .feature-tile{
  background: var(--superficie) !important;
  border-color: var(--borde) !important;
  color: var(--texto) !important;
  box-shadow:0 12px 30px var(--sombra) !important;
}
:root[data-bs-theme="dark"] .feature-tile p,
.quarto-dark .feature-tile p{ color: var(--texto-sec) !important; }

.navbar .navbar-brand { display:flex; align-items:center; gap:.5rem; }
.navbar .navbar-brand img { height: 28px; width:auto; }

/* más grande y alineado */
.navbar .navbar-brand {
  display:flex; align-items:center; gap:.6rem;
  padding:.25rem .4rem;              /* aire alrededor */
  border-radius:12px;                 /* para pill hover */
}

/* tamaño del logo */
.navbar .navbar-brand img {
  height: 32px;                      /* 28–36px funciona bien */
  width: auto;
}

/* hover sutil (resalta sin ser chillón) */
.navbar .navbar-brand:hover {
  background: rgba(9,12,22,.06);
  box-shadow: 0 4px 12px rgba(9,12,22,.10);
}

/* si el logo es SVG de un solo color, puedes tintarlo con filter o currentColor */
.navbar .navbar-brand img { filter: none; } /* por si tu tema aplica algo raro */

:root[data-bs-theme="dark"] .navbar .navbar-brand img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));  /* destaca en oscuro */
}

.navbar .navbar-brand {
  position: relative;
}
.navbar .navbar-brand::before {
  content:"";
  position:absolute; inset:-4px -8px;
  border-radius:14px;
  background: radial-gradient(100% 100% at 30% 30%, rgba(161,77,160,.12), rgba(145,196,242,.08));
  z-index:-1;
  transition: transform .15s ease, opacity .15s ease;
  opacity:.9;
}
.navbar .navbar-brand:hover::before { transform: scale(1.02); }

/* 1) En claro: que la negrita herede el color del texto */
strong, b {
  color: inherit;           /* ← quita el morado oscuro fijo */
  font-weight: 700;
}

/* 2) En oscuro: negrita clara y visible (usa tu paleta) */
:root[data-bs-theme="dark"] strong,
:root[data-bs-theme="dark"] b,
.quarto-dark strong,
.quarto-dark b {
  color: #EDE7FF !important;     /* o var(--azul-claro); prueba ambos */
  font-weight: 700;
}

/* (opcional) si tienes zonas con color forzado, refuerza ahí también */
:root[data-bs-theme="dark"] .page-surface strong,
:root[data-bs-theme="dark"] .tile strong,
:root[data-bs-theme="dark"] .card strong,
:root[data-bs-theme="dark"] .banda.oscura strong {
  color: #EDE7FF !important;
}

/* Contenedor de los dos semestres (ya usamos Bootstrap row/cols) */
.anio-grid h2, .anio-grid h3 {
  margin-bottom: .6rem;
}

/* Tarjetas de los cursos (listings tipo grid) */
.listing-grid .card,
.quarto-grid-item.card {
  border-radius: 16px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: 0 10px 24px var(--sombra);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.listing-grid .card:hover,
.quarto-grid-item.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px var(--sombra-2);
  border-color: rgba(0,0,0,.10);
}

/* Imagen superior de la tarjeta (si usas image: en el front matter) */
.listing-grid .card img,
.quarto-grid-item.card img {
  width: 100%;
  height: 140px;              /* ajusta a gusto */
  object-fit: cover;
  display: block;
  background: var(--superficie-soft);
}

/* Texto de la tarjeta */
.listing-grid .card-body {
  padding: 14px 16px;
}
.listing-grid .card-title {
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .35rem;
}
.listing-grid .card-text {
  color: var(--texto-sec);
  margin: 0;
}

/* Grilla de columnas: 3 en desktop, 2 en tablet, 1 en móvil */
.listing-grid.grid {
  --bs-columns: 12;
}
@media (min-width: 992px) {   /* ≥ lg */
  .listing-grid.grid .g-col-12 { width: 33.333%; }  /* 3 por fila */
}
@media (min-width: 640px) and (max-width: 991.98px) {
  .listing-grid.grid .g-col-12 { width: 50%; }      /* 2 por fila */
}
@media (max-width: 639.98px) {
  .listing-grid.grid .g-col-12 { width: 100%; }     /* 1 por fila */
}

/* ===== Minimal: grilla de años ===== */
.years-min{
  display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top:.5rem;
}
@media (max-width: 1100px){ .years-min{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .years-min{ grid-template-columns: 1fr; } }

.year-min{
  position:relative; border-radius:14px;
  padding:14px 16px;
  background: var(--superficie);
  border:1px solid var(--borde);
  /* acento sutil en el borde izquierdo */
  border-left:3px solid var(--azul-polvo);
  min-height: 84px;
  display:flex; flex-direction:column; justify-content:center;
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
}

/* hace clickeable toda la tarjeta */
.year-min .cover{ position:absolute; inset:0; border-radius:14px; z-index:1; }
.year-min > *{ position:relative; z-index:2; }

.year-min h3{
  margin:0 0 2px; font-weight:800; line-height:1.15;
}
.year-min p{
  margin:0; color:var(--texto-sec);
}

/* hover muy sobrio */
.year-min:hover{
  background: var(--superficie-soft);
  transform: translateY(-1px);
  border-left-color: var(--purpura);
}

/* modo oscuro: mantiene el contraste sin brillos */
:root[data-bs-theme="dark"] .year-min:hover,
.quarto-dark .year-min:hover{
  background: rgba(255,255,255,.02);
}

.badge-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}
.badge-year h3 {
  margin: 0.5em 0 0.2em 0;
  font-size: 1.5em;
}
.badge-year p {
  margin: 0;
  font-size: 1em;
}

  /* ==== Equipo armonizado (igual altura + tipografía compacta) ==== */
.people-grid{
  /* knobs de ajuste rápido */
  --avatar: 88px;               /* 80–96px */
  --min-h: 190px;               /* alto mínimo del card */
  --gap: .9rem;
  --pad-x: 1rem;
  --pad-y: .9rem;

  --fs-name: clamp(.92rem, .9rem + .15vw, 1rem);
  --fs-lead: clamp(.9rem, .88rem + .12vw, .98rem);
  --fs-body: clamp(.86rem, .84rem + .12vw, .94rem);
  --lh: 1.32;
}

/* Grid responsive con tarjetas de misma “presencia” visual */
.people-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 1rem !important;
}

/* Card en rejilla: columna avatar fija + contenido */
.people-grid .person-card{
  display:grid !important;
  grid-template-columns: var(--avatar) 1fr !important;
  column-gap: var(--gap) !important;
  align-items: start !important;

  min-height: var(--min-h) !important;
  padding: var(--pad-y) var(--pad-x) !important;

  border:1px solid var(--borde) !important;
  border-radius:14px !important;
  background: var(--superficie) !important;
  box-shadow: 0 6px 16px var(--sombra) !important;  /* sombra leve */
}

/* imagen como primer hijo (Quarto suele envolverla en <p>/<figure>) */
.people-grid .person-card > :first-child{ margin:0 !important; }
.people-grid .person-card :is(img, figure img):first-of-type{
  width: var(--avatar) !important;
  height: var(--avatar) !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border:1px solid var(--borde) !important;
  filter: grayscale(100%);
  display:block;
}

/* Contenido: columna 2 con “pie” pegado abajo para igualar alturas */
.people-grid .person-body{
  grid-column: 2;
  display:flex; flex-direction:column; gap:.2rem;
}
.people-grid .person-body h3{
  margin:0 0 .1rem 0 !important;
  font-size: var(--fs-name) !important;
  line-height: var(--lh) !important;
  font-weight: 600 !important;
}
.people-grid .person-body p{
  margin:.15rem 0 !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh) !important;
  color: var(--texto-sec) !important;
}
.people-grid .person-body strong{
  font-size: var(--fs-lead) !important;
  font-weight: 600 !important;
  color: var(--texto) !important;     /* baja contraste del bold largo */
}

/* Enlaces al “pie” para emparejar alturas visuales */
.people-grid .person-links{ margin-top: auto; display:flex; flex-wrap:wrap; gap:.4rem; }
.people-grid .person-links .pill{
  padding:.26rem .6rem !important; font-size:.84rem !important;
  border:1px solid var(--borde) !important; border-radius:999px !important;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-soft));
}

/* Clamps opcionales (evitan que un card se “estire” por texto muy largo) */
.people-grid .person-body p{ display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden; }
.people-grid .person-body p:first-of-type{ -webkit-line-clamp: 2; }

/* Responsivo */
@media (max-width: 992px){
  .people-grid{ --avatar: 80px; --min-h: 176px; --pad-x:.9rem; --pad-y:.8rem; }
}
@media (max-width: 576px){
  .people-grid{
    --avatar: 68px; --min-h: 164px; --gap:.75rem;
    --fs-name:.95rem; --fs-body:.88rem; --fs-lead:.9rem;
  }
}