/**
 * ============================================================================
 * Campus inmoautónomos.es — Estilos
 * Este código lleva la huella de Jose Antonio Echevarria – ECH
 * echevarria@megustanlastic.es - 2026-07-03
 * ============================================================================
 */

/* ── Reset & Base ─────────────────────────────────────────── */
.campus * { box-sizing: border-box; }
.campus { font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; color: #14143c; }
.campus a { text-decoration: none; color: inherit; }
.campus button { cursor: pointer; font-family: inherit; }
.campus img { max-width: 100%; }

/* ── Design Tokens ────────────────────────────────────────── */
:root {
    --campus-brand: #000064;
    --campus-brand-dark: #0b0b3d;
    --campus-ink: #14143c;
    --campus-body: #4a4d68;
    --campus-muted: #6b6e8a;
    --campus-faint: #9497b3;
    --campus-border: #ececf4;
    --campus-bg: #eef0f8;
    --campus-bg-soft: #f4f5fb;
    --campus-green: #17976a;
    --campus-green-bg: #e3f5ec;
    --campus-blue: #2e6fe0;
    --campus-blue-bg: #e6edfc;
    --campus-orange: #e5720b;
    --campus-orange-bg: #fcecdb;
    --campus-purple: #7a3fd6;
    --campus-purple-bg: #efe8fb;
    --campus-star: #f5a623;
    --campus-radius: 16px;
    --campus-radius-sm: 10px;
    --campus-radius-pill: 999px;
}

/* ── Material Symbols helper ──────────────────────────────── */
.msi { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; -webkit-font-feature-settings: 'liga'; user-select: none; vertical-align: middle; }

/* ── Layout ───────────────────────────────────────────────── */
.campus-wrap { width: 100%; max-width: 1440px; margin: 0 auto; background: #fff; min-height: 100vh; }
.campus-container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ── Header ───────────────────────────────────────────────── */
.campus-header { display: flex; align-items: center; gap: 32px; padding: 0 40px; height: 76px; border-bottom: 1px solid #ecedf5; position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 20; }
.campus-header__logo { display: flex; align-items: center; gap: 12px; }
.campus-header__logo img { height: 34px; width: auto; display: block; }
.campus-header__logo-sep { width: 1px; height: 26px; background: #e0e2ee; }
.campus-header__logo-text { font-weight: 800; font-size: 19px; letter-spacing: -.4px; color: var(--campus-brand); }
.campus-header__nav { display: flex; gap: 28px; margin-left: 8px; }
.campus-header__nav a { color: var(--campus-muted); font-weight: 500; font-size: 15px; transition: color .15s; }
.campus-header__nav a.active { color: var(--campus-brand); font-weight: 600; }
.campus-header__nav a:hover { color: var(--campus-brand); }
.campus-header__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ── Buttons ──────────────────────────────────────────────── */
.campus-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: var(--campus-radius-sm); border: none; transition: transform .15s, box-shadow .15s; }
.campus-btn:hover { transform: translateY(-1px); }
.campus-btn--primary { background: var(--campus-brand); color: #fff; }
.campus-btn--white { background: #fff; color: var(--campus-brand); }
.campus-btn--outline { border: 1.5px solid #d9dbe9; background: #fff; color: var(--campus-brand); }
.campus-btn--ghost { border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; }
.campus-btn--lg { font-size: 15px; padding: 15px 26px; border-radius: 12px; }
.campus-btn--sm { font-size: 13px; padding: 9px 16px; }
.campus-btn--full { width: 100%; justify-content: center; }
.campus-btn--green { background: var(--campus-green); color: #fff; }

/* ── Hero ─────────────────────────────────────────────────── */
.campus-hero { background: var(--campus-brand); color: #fff; padding: 64px 40px 72px; position: relative; overflow: hidden; }
.campus-hero__glow { position: absolute; right: -80px; top: -60px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); }
.campus-hero__inner { display: flex; gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; position: relative; }
.campus-hero__content { flex: 1; }
.campus-hero__pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: 7px 14px; border-radius: var(--campus-radius-pill); font-size: 13px; font-weight: 600; }
.campus-hero h1 { font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; margin: 22px 0 18px; }
.campus-hero__sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 480px; margin: 0 0 30px; }
.campus-hero__stats { display: flex; gap: 40px; margin-top: 40px; }
.campus-hero__stat-num { font-size: 28px; font-weight: 800; }
.campus-hero__stat-label { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 500; }
.campus-hero__stat-sep { width: 1px; background: rgba(255,255,255,.18); }
.campus-hero__img { width: 380px; flex-shrink: 0; display: grid; place-items: center; }

/* ── Chips (filtros) ──────────────────────────────────────── */
.campus-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.campus-chips__label { font-size: 13px; font-weight: 700; color: var(--campus-muted); text-transform: uppercase; margin-right: 4px; }
.campus-chip { border: 1.5px solid #e2e4f0; background: #fff; font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: var(--campus-radius-pill); color: var(--campus-ink); transition: background .15s, color .15s, border-color .15s; }
.campus-chip.active, .campus-chip:hover { background: var(--campus-brand); color: #fff; border-color: var(--campus-brand); }

/* ── Badge ────────────────────────────────────────────────── */
.campus-badge { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--campus-radius-pill); display: inline-flex; align-items: center; gap: 5px; }
.campus-badge--basico { background: var(--campus-green-bg); color: var(--campus-green); }
.campus-badge--intermedio { background: var(--campus-blue-bg); color: var(--campus-blue); }
.campus-badge--avanzado { background: var(--campus-purple-bg); color: var(--campus-purple); }
.campus-badge--popular { background: var(--campus-orange); color: #fff; font-size: 11px; text-transform: uppercase; }
.campus-badge--nuevo { background: var(--campus-green); color: #fff; font-size: 11px; text-transform: uppercase; }
.campus-badge--preview { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.campus-badge--completada { background: var(--campus-green-bg); color: var(--campus-green); }
.campus-badge--en_curso { background: var(--campus-blue-bg); color: var(--campus-blue); }
.campus-badge--bloqueada { background: #f1f2f8; color: var(--campus-faint); }

/* ── Cards de curso ───────────────────────────────────────── */
.campus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.campus-card { border: 1px solid var(--campus-border); border-radius: 18px; overflow: hidden; background: #fff; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.campus-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,100,.28); }
.campus-card__cover { height: 150px; position: relative; display: grid; place-items: center; overflow: hidden; }
.campus-card__cover-icon { font-size: 92px; color: rgba(255,255,255,.13); position: absolute; }
.campus-card__cover .campus-badge { position: absolute; top: 12px; }
.campus-card__cover .campus-badge:first-child { left: 12px; }
.campus-card__cover .campus-badge:last-child { right: 12px; }
.campus-card__body { padding: 18px 18px 20px; }
.campus-card__cat { display: flex; align-items: center; gap: 6px; color: #8c8fab; font-size: 12.5px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
.campus-card__title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.3px; min-height: 44px; }
.campus-card__meta { display: flex; align-items: center; gap: 14px; color: var(--campus-muted); font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.campus-card__meta .msi { font-size: 16px; }
.campus-card__tutor { display: flex; align-items: center; gap: 9px; padding-top: 14px; border-top: 1px solid #f0f1f7; }
.campus-card__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.campus-card__tutor-name { font-size: 13px; color: var(--campus-ink); font-weight: 600; flex: 1; }
.campus-card__rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--campus-ink); }
.campus-card__rating .msi { font-size: 16px; color: var(--campus-star); }
.campus-card__price { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.campus-card__price-amount { font-size: 19px; font-weight: 800; }
.campus-card__price-free { color: var(--campus-green); }
.campus-card__price-link { display: inline-flex; align-items: center; gap: 5px; color: var(--campus-brand); font-weight: 700; font-size: 13.5px; }

/* ── Itinerarios ──────────────────────────────────────────── */
.campus-path { border: 1px solid var(--campus-border); border-radius: 18px; padding: 24px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.campus-path:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,100,.18); }
.campus-path__icon { width: 46px; height: 46px; border-radius: 13px; color: #fff; display: grid; place-items: center; }
.campus-path__icon .msi { font-size: 24px; }
.campus-path h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.3px; }
.campus-path p { color: var(--campus-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; min-height: 40px; }
.campus-path__meta { display: flex; align-items: center; gap: 16px; color: var(--campus-muted); font-size: 13px; font-weight: 600; }
.campus-path__meta .msi { font-size: 16px; }

/* ── Ficha de curso: header ───────────────────────────────── */
.campus-curso-header { background: var(--campus-brand); color: #fff; padding: 34px 40px 40px; }
.campus-curso-header__breadcrumb { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; margin-bottom: 20px; }
.campus-curso-header__breadcrumb span { color: rgba(255,255,255,.9); }
.campus-curso-header h1 { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; margin: 0 0 16px; }
.campus-curso-header__stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; font-size: 14px; }
.campus-curso-header__stats .msi { font-size: 19px; }

/* ── Ficha: temario accordion ─────────────────────────────── */
.campus-unit { border: 1px solid var(--campus-border); border-radius: 14px; overflow: hidden; }
.campus-unit__header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; background: #fbfbfe; transition: background .15s; }
.campus-unit__header:hover { background: #f4f5fb; }
.campus-unit__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.campus-unit__title { flex: 1; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.campus-unit__meta { font-size: 13px; color: var(--campus-muted); font-weight: 500; }
.campus-unit__chev { transition: transform .2s; color: var(--campus-faint); }
.campus-unit.open .campus-unit__chev { transform: rotate(180deg); }
.campus-unit__body { display: none; border-top: 1px solid var(--campus-border); }
.campus-unit.open .campus-unit__body { display: block; }
.campus-unit__lesson { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 14px; border-bottom: 1px solid #f6f7fb; }
.campus-unit__lesson:last-child { border-bottom: none; }
.campus-unit__lesson-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }
.campus-unit__lesson-title { flex: 1; font-weight: 500; color: var(--campus-ink); }
.campus-unit__lesson-dur { font-size: 13px; color: var(--campus-faint); font-weight: 500; }

/* ── Ficha: planes ────────────────────────────────────────── */
.campus-plan { border: 1px solid var(--campus-border); border-radius: var(--campus-radius); padding: 22px 20px; position: relative; background: #fff; }
.campus-plan--highlight { border-color: var(--campus-brand); border-width: 2px; }
.campus-plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--campus-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: var(--campus-radius-pill); white-space: nowrap; }
.campus-plan__name { font-size: 13px; color: #8c8fab; font-weight: 700; text-transform: uppercase; }
.campus-plan__price { font-size: 30px; font-weight: 800; margin: 8px 0 16px; letter-spacing: -1px; }
.campus-plan__feature { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; color: var(--campus-body); font-weight: 500; margin-bottom: 10px; }
.campus-plan__feature .msi { font-size: 18px; flex-shrink: 0; }

/* ── Ficha: sidebar sticky ────────────────────────────────── */
.campus-sidebar-card { border: 1px solid var(--campus-border); border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0,0,80,.25); overflow: hidden; }
.campus-sidebar-card__preview { height: 160px; background: var(--campus-brand); position: relative; display: grid; place-items: center; }
.campus-sidebar-card__play { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; z-index: 1; cursor: pointer; }
.campus-sidebar-card__play .msi { font-size: 30px; color: var(--campus-brand); }
.campus-sidebar-card__body { padding: 22px; }

/* ── Opiniones ────────────────────────────────────────────── */
.campus-review { border: 1px solid var(--campus-border); border-radius: 14px; padding: 20px; }
.campus-review__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.campus-review__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; }
.campus-review__name { font-size: 14.5px; font-weight: 700; }
.campus-review__role { font-size: 12.5px; color: #8c8fab; }
.campus-review__stars { color: var(--campus-star); font-size: 14px; letter-spacing: 1px; }
.campus-review p { font-size: 14.5px; line-height: 1.6; color: var(--campus-body); margin: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.campus-footer { background: var(--campus-brand-dark); color: rgba(255,255,255,.6); padding: 32px 40px; text-align: center; font-size: 13px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .campus-grid { grid-template-columns: repeat(2, 1fr); }
    .campus-hero__inner { flex-direction: column; gap: 32px; }
    .campus-hero__img { display: none; }
    .campus-hero h1 { font-size: 36px; }
}
@media (max-width: 768px) {
    .campus-header { padding: 0 20px; gap: 16px; }
    .campus-header__nav { display: none; }
    .campus-hero { padding: 40px 20px 48px; }
    .campus-hero h1 { font-size: 30px; }
    .campus-hero__stats { gap: 20px; flex-wrap: wrap; }
    .campus-hero__stat-num { font-size: 22px; }
    .campus-container { padding: 0 20px; }
    .campus-grid { grid-template-columns: 1fr; }
    .campus-curso-header h1 { font-size: 28px; }
    .campus-curso-header__stats { gap: 16px; font-size: 13px; }
    .campus-curso-layout { display: block !important; }
    .campus-curso-sidebar { position: static !important; margin-top: 24px; }
    .campus-itinerario-layout { display: block !important; }
    .campus-itinerario-sidebar { position: static !important; margin-top: 24px; }
}