/* ==========================================================================
   EmpleosTech Academy — capa visual sobre el design system (ds-*).
   Sin build: se enlaza desde las vistas de Academy (hub, categoría, ficha).
   ========================================================================== */

/* ---- Hero ---- */
.ac-hero{border-radius:var(--ds-r-xl);padding:40px 28px;margin-bottom:36px}
@media (min-width:992px){.ac-hero{padding:56px 48px}}
.ac-hero__grid{display:grid;gap:28px;align-items:center}
@media (min-width:992px){.ac-hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.ac-hero__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-mint);margin:0 0 14px}
.ac-hero__kicker i{font-size:16px}
.ac-hero h1{margin:0 0 14px;font-size:clamp(30px,4.2vw,48px)}
.ac-hero p.ac-hero__lead{font-size:16.5px;line-height:1.55;max-width:58ch;margin:0 0 22px}
.ac-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.ac-hero__ghost{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
.ac-hero__ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.ac-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ac-hero__chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--ds-r-pill);background:rgba(255,255,255,.1);font-size:13px;color:#fff}
.ac-hero__chips i{color:var(--ds-mint);font-size:15px}
.ac-hero__art{display:flex;justify-content:center}

/* ---- Sello (diploma) ---- */
.ac-seal{width:min(280px,70vw);height:auto;filter:drop-shadow(0 24px 40px rgba(6,8,15,.35))}
.ac-seal--sm{width:132px;filter:drop-shadow(0 10px 20px rgba(6,8,15,.14))}
@media (prefers-reduced-motion:no-preference){
  .ac-seal__ring{transform-origin:50% 50%;animation:ac-spin 40s linear infinite}
  @keyframes ac-spin{to{transform:rotate(360deg)}}
}

/* ---- Tarjeta de curso ---- */
.ac-course{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;transition:transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease),border-color var(--ds-dur)}
.ac-course:hover{transform:translateY(-3px);box-shadow:var(--ds-shadow-md);border-color:var(--ds-line-2)}
.ac-course__cover{position:relative;height:132px;display:flex;align-items:flex-end;padding:14px 16px;color:#fff;isolation:isolate;overflow:hidden}
.ac-course__cover::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:28px 28px}
.ac-course__cover i{position:absolute;right:14px;top:12px;font-size:64px;line-height:1;opacity:.28}
.ac-course__cover .ds-badge{background:rgba(255,255,255,.18);color:#fff}
.ac-cover--0{background:linear-gradient(135deg,#0A65CC 0%,#3B8DFF 100%)}
.ac-cover--1{background:linear-gradient(135deg,#0E8F5F 0%,#34E0A1 100%)}
.ac-cover--2{background:linear-gradient(135deg,#7C3AED 0%,#A78BFA 100%)}
.ac-cover--3{background:linear-gradient(135deg,#B45309 0%,#FFB547 100%)}
.ac-cover--4{background:linear-gradient(135deg,#0B1020 0%,#1F2937 100%)}
.ac-course__body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;flex:1}
.ac-course__title{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0}
.ac-course__title a{color:var(--ds-ink-2);text-decoration:none}
.ac-course__title a:hover{color:var(--ds-blue)}
.ac-course__summary{font-size:14px;color:var(--ds-muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ac-course__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--ds-muted-2);margin:auto 0 0;padding-top:8px}
.ac-course__meta span{display:inline-flex;align-items:center;gap:4px}
.ac-course__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px 18px}
.ac-course__diploma{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#0E8F5F}

/* ---- Secciones ---- */
.ac-section{margin-bottom:40px}
.ac-section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.ac-section__title{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ds-ink-2);margin:0}
.ac-section__sub{font-size:14px;color:var(--ds-muted);margin:4px 0 0}

/* ---- Cómo funciona ---- */
.ac-steps{display:grid;gap:14px}
@media (min-width:768px){.ac-steps{grid-template-columns:repeat(3,1fr)}}
.ac-step{position:relative;padding:22px 20px 20px}
.ac-step__n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--ds-blue-soft);color:var(--ds-blue);font-weight:700;margin-bottom:12px}
.ac-step__t{font-size:16px;font-weight:700;color:var(--ds-ink-2);margin:0 0 6px}
.ac-step__p{font-size:14px;color:var(--ds-muted);margin:0}

/* ---- Ganchos (alumnos / instructores) ---- */
.ac-hooks{display:grid;gap:16px}
@media (min-width:992px){.ac-hooks{grid-template-columns:1fr 1fr}}
.ac-hook{display:flex;flex-direction:column;gap:12px;padding:28px}
.ac-hook--ink{background:var(--ds-ink);border-color:transparent;color:#fff}
.ac-hook--ink .ac-hook__t,.ac-hook--ink .ac-hook__p{color:#fff}
.ac-hook--ink .ac-hook__p{color:rgba(255,255,255,.75)}
.ac-hook__icon{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--ds-blue-soft);color:var(--ds-blue)}
.ac-hook--ink .ac-hook__icon{background:rgba(255,255,255,.1);color:var(--ds-mint)}
.ac-hook__kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-blue);margin:0}
.ac-hook--ink .ac-hook__kicker{color:var(--ds-mint)}
.ac-hook__t{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ds-ink-2);margin:0}
.ac-hook__p{font-size:14.5px;color:var(--ds-muted);margin:0;max-width:52ch}
.ac-hook__list{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.ac-hook__list li{display:flex;gap:8px;align-items:flex-start}
.ac-hook__list i{color:#0E8F5F;margin-top:3px}
.ac-hook--ink .ac-hook__list i{color:var(--ds-mint)}
.ac-hook__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}

/* ---- Ficha de curso ---- */
.ac-course-seal{display:flex;gap:18px;align-items:center;padding:18px 20px;background:var(--ds-paper);border-color:transparent}
.ac-course-seal__t{font-size:15px;font-weight:700;color:var(--ds-ink-2);margin:0 0 4px}
.ac-course-seal__p{font-size:13.5px;color:var(--ds-muted);margin:0}
.ac-teach-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:20px 22px}
.ac-teach-strip__t{font-size:16px;font-weight:700;color:var(--ds-ink-2);margin:0 0 2px}
.ac-teach-strip__p{font-size:13.5px;color:var(--ds-muted);margin:0}

/* ---- Tutores del equipo ---- */
.ac-avatar{flex:0 0 auto;border-radius:50%;display:block}
.ac-course__tutor{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ds-ink-3);margin:2px 0 0}
.ac-course__tutor-title{color:var(--ds-muted-2)}
.ac-tutor{display:flex;gap:18px;align-items:flex-start;padding:20px 22px}
.ac-tutor__kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-blue);margin:0 0 4px}
.ac-tutor__name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--ds-ink-2);margin:0}
.ac-tutor__title{font-size:13.5px;color:var(--ds-muted);margin:2px 0 8px}
.ac-tutor__bio{font-size:14px;color:var(--ds-ink-3);margin:0 0 8px}
.ac-tutor__disclosure{font-size:12.5px;color:var(--ds-muted-2);margin:0}
.ac-tutor__disclosure a{color:var(--ds-blue);font-weight:600;margin-left:4px}
.ac-tutors{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ac-tutor-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:20px 14px}
.ac-tutor-card .ac-avatar{margin-bottom:6px}
.ac-tutor-card__name{font-size:15px;font-weight:700;color:var(--ds-ink-2);margin:0}
.ac-tutor-card__title{font-size:12.5px;color:var(--ds-muted);margin:0}
.ac-tutor-card__count{font-size:12px;color:var(--ds-blue);font-weight:600;margin:4px 0 0}
.ac-tutors__note{font-size:12.5px;color:var(--ds-muted-2);margin:12px 0 0}
@media (max-width:575px){.ac-tutor{flex-direction:column;gap:12px}}

/* ---- Temas (categorías) ---- */
.ac-topics{margin-bottom:28px}
.ac-topic{padding:8px 14px;font-size:13.5px;background:var(--ds-surface);border:1px solid var(--ds-line);color:var(--ds-ink-3);text-decoration:none;transition:border-color var(--ds-dur),color var(--ds-dur)}
.ac-topic:hover{border-color:var(--ds-blue);color:var(--ds-blue)}
.ac-topic__n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ds-r-pill);background:var(--ds-blue-soft);color:var(--ds-blue);font-size:11.5px}

/* ---- Fotos (Unsplash, licencia libre) ---- */
.ac-course__cover--photo{height:164px;padding:12px 14px}
.ac-course__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform .5s var(--ds-ease)}
.ac-course:hover .ac-course__photo{transform:scale(1.04)}
.ac-course__cover--photo::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(6,8,15,0) 35%,rgba(6,8,15,.72) 100%)}
.ac-course__cover--photo::after{display:none}
.ac-course__cover--photo .ac-course__icon{top:12px;right:12px;font-size:20px;opacity:1;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--ds-ink-2)}
.ac-course__badges{position:relative}
.ac-cover--0 .ac-course__icon{color:#0A65CC}.ac-cover--1 .ac-course__icon{color:#0E8F5F}.ac-cover--2 .ac-course__icon{color:#7C3AED}.ac-cover--3 .ac-course__icon{color:#B45309}

.ac-hero__photo{position:relative;width:100%;max-width:420px;margin:0 auto}
.ac-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ac-hero__photo .ac-seal{position:absolute;right:-18px;bottom:-26px;width:136px}
@media (max-width:991px){.ac-hero__photo{max-width:360px}.ac-hero__photo .ac-seal{right:-6px;width:112px}}
.ac-hero__chip{position:absolute;left:-14px;top:18px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--ds-ink-2);font-size:12.5px;font-weight:700;box-shadow:var(--ds-shadow-md)}
.ac-hero__chip i{color:#0E8F5F;font-size:15px}

.ac-hook__photo{display:block;max-width:none;width:calc(100% + 56px);margin:-28px -28px 6px;height:170px;object-fit:cover;border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0}
.ac-hook{overflow:hidden}

.ac-course-cover{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:var(--ds-r-xl);margin:6px 0 16px}
.ac-photo-credit{font-size:11.5px;color:var(--ds-muted-2);margin:24px 0 0}
.ac-photo-credit a{color:inherit;text-decoration:underline}