/* Tarjetas de los 3 diplomados (portada y /docentes/cursos). Las dibuja assets/diplomados-tarjetas.js dentro de [data-diplomados].
   Cada tarjeta es de color propio con texto claro, así se ve bien en modo claro y oscuro. */
.dp-section { padding: 56px 0 8px; }
.dp-head { max-width: 760px; margin: 0 0 28px; }
.dp-eyebrow { display: block; color: #5c2679; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.dp-head h2 { font-family: Alegreya, 'Alegreya Fallback', Georgia, serif; letter-spacing: -.045em; font-size: clamp(2rem, 4vw, 3rem); line-height: .98; margin: 0 0 12px; }
.dp-head p { margin: 0; opacity: .85; }
.dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dp-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; padding: 28px 26px 26px; color: #f2f2f2; text-decoration: none; box-shadow: 0 20px 46px rgba(92,38,121,.18); transition: transform .22s ease, box-shadow .22s ease; isolation: isolate; }
.dp-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; background: rgba(255,255,255,.10); z-index: -1; }
.dp-card::after { content: ""; position: absolute; width: 170px; height: 170px; left: -70px; bottom: -70px; border-radius: 50%; background: rgba(255,255,255,.07); z-index: -1; }
.dp-card:hover, .dp-card:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(92,38,121,.28); color: #f2f2f2; }
.dp-card:focus-visible { outline: 3px solid #e5ccf0; outline-offset: 3px; }
.dp-klazen { background: linear-gradient(145deg, #5c2679 0%, #7b3a9c 100%); }
.dp-ai { background: linear-gradient(145deg, #1f5f4a 0%, #26795c 100%); }
.dp-dua { background: linear-gradient(145deg, #3b2a6b 0%, #5c2679 55%, #26795c 130%); }
.dp-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dp-badge { width: 64px; height: 64px; border-radius: 18px; background: #fff; padding: 6px; flex: none; box-shadow: 0 8px 18px rgba(0,0,0,.22); object-fit: contain; }
.dp-tag { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #e5ccf0; }
.dp-comunidad { display: block; font-weight: 800; font-size: .95rem; color: #fff; }
.dp-card h3 { font-family: Alegreya, 'Alegreya Fallback', Georgia, serif; font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; margin: 0 0 10px; color: #fff !important; }
.dp-card h3 * { color: inherit !important; }
.dp-card p { margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: #f0e8f5; }
.dp-datos { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; font-size: .86rem; }
.dp-datos li { display: flex; gap: 9px; align-items: flex-start; color: #f2f2f2; }
.dp-datos li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
.dp-ir { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 13px 22px; border-radius: 99px; background: #f2f2f2; color: #5c2679; font-weight: 800; font-size: .88rem; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.dp-card:hover .dp-ir { background: #fff; }
@media (max-width: 900px) { .dp-grid { grid-template-columns: 1fr; } .dp-section { padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .dp-card { transition: none; } .dp-card:hover, .dp-card:focus-visible { transform: none; } }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .dp-eyebrow { color: #dcb8ef; } }
html[data-theme="dark"] .dp-eyebrow { color: #dcb8ef; }