/*
 * WS-ICOMP · Sistema visual institucional 2026
 * Mobile first, sin Bootstrap, jQuery, fuentes web ni librerías visuales externas.
 * Paleta base obtenida del logotipo oficial UNPA aportado al proyecto.
 */
:root {
    --unpa-green: #007d68;
    --unpa-green-deep: #005b4d;
    --unpa-green-ink: #07443b;
    --unpa-teal: #5aa4a5;
    --unpa-sky: #a6daf1;
    --unpa-yellow: #ffce01;
    --ink: #2b2523;
    --muted: #655f5c;
    --surface: #ffffff;
    --surface-soft: #f4f8f7;
    --surface-green: #eaf4f1;
    --border: #d9e6e2;
    --border-strong: #b8d2cb;
    --shadow-sm: 0 8px 24px rgba(17, 60, 52, .08);
    --shadow-md: 0 22px 64px rgba(8, 56, 47, .13);
    --radius-sm: .65rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --max-width: 1180px;
    --header-height: 72px;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; }
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--unpa-green-deep); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--unpa-green); }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
address { font-style: normal; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; letter-spacing: -.025em; }
h1 { font-size: clamp(2.55rem, 11vw, 4.8rem); }
h2 { font-size: clamp(2rem, 8vw, 3.55rem); }
h3 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
h4 { font-size: 1rem; }
ul, ol { padding-left: 1.25rem; }
::selection { background: var(--unpa-yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--unpa-yellow); outline-offset: 3px; border-radius: .25rem; }
[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 9999; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .7rem 1rem; color: var(--ink); background: var(--unpa-yellow); border-radius: .5rem; font-weight: 800; transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100% - 2rem, var(--max-width)); margin-inline: auto; }

/* Header / navegación */
.site-header { position: sticky; z-index: 1000; top: 0; min-height: var(--header-height); background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(0,125,104,.12); backdrop-filter: blur(14px); transition: box-shadow .2s ease, border-color .2s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(17,60,52,.08); border-color: transparent; }
.site-header__inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__mark { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: .75rem; color: #fff; background: var(--unpa-green); font-weight: 900; letter-spacing: -.04em; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.brand__copy { min-width: 0; display: grid; line-height: 1.15; }
.brand__copy strong { font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__copy small { margin-top: .2rem; color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-toggle { width: 46px; height: 46px; display: grid; place-content: center; gap: 5px; padding: 0; background: var(--surface-soft); border: 1px solid var(--border); border-radius: .8rem; cursor: pointer; }
.nav-toggle > span:not(.sr-only) { width: 21px; height: 2px; background: var(--ink); border-radius: 10px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
.primary-nav { position: fixed; inset: var(--header-height) 0 0; display: none; flex-direction: column; gap: .2rem; padding: 1rem; background: rgba(255,255,255,.99); overflow-y: auto; }
.primary-nav.is-open { display: flex; }
.primary-nav a { padding: .9rem 1rem; color: var(--ink); border-radius: .7rem; text-decoration: none; font-size: 1.05rem; font-weight: 720; }
.primary-nav a:hover, .primary-nav a.is-active, .primary-nav a[aria-current="page"] { background: var(--surface-green); color: var(--unpa-green-deep); }
.primary-nav .nav-cta { margin-top: .5rem; color: #fff; background: var(--unpa-green); text-align: center; }
.primary-nav .nav-cta:hover { color: #fff; background: var(--unpa-green-deep); }

/* Botones */
.button-row { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.05rem; border: 1px solid transparent; border-radius: .8rem; text-decoration: none; font-weight: 800; line-height: 1.2; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button--primary { color: #fff; background: var(--unpa-green); box-shadow: 0 8px 18px rgba(0,125,104,.17); }
.button--primary:hover { color: #fff; background: var(--unpa-green-deep); }
.button--accent { color: var(--ink); background: var(--unpa-yellow); }
.button--accent:hover { color: var(--ink); background: #f3c400; box-shadow: 0 9px 20px rgba(255,206,1,.2); }
.button--outline { color: var(--unpa-green-deep); background: transparent; border-color: var(--border-strong); }
.button--outline:hover { color: var(--unpa-green-deep); background: var(--surface-green); border-color: var(--unpa-green); }
.button--ghost-light { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.06); }
.button--ghost-light:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #07443b 0%, #006554 58%, #007d68 100%); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.hero::before { width: 380px; height: 380px; right: -210px; top: -120px; background: rgba(166,218,241,.15); }
.hero::after { width: 260px; height: 260px; left: -170px; bottom: -120px; background: rgba(255,206,1,.08); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 2.25rem; padding-block: clamp(3.5rem, 11vw, 6.8rem); }
.hero__content { max-width: 720px; }
.hero h1 { margin-bottom: 1.15rem; color: #fff; font-weight: 850; }
.hero__lead { max-width: 680px; margin-bottom: 1.65rem; color: #f1faf8; font-size: clamp(1.05rem, 3.6vw, 1.22rem); line-height: 1.75; }
.eyebrow { margin-bottom: .65rem; color: var(--unpa-green); font-size: .76rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow--light { color: #e8f6f3; }
.hero-facts { display: grid; grid-template-columns: 1fr; gap: .65rem; margin: 2rem 0 0; }
.hero-facts div { padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.17); border-radius: .8rem; background: rgba(255,255,255,.06); }
.hero-facts dt { color: #e8f6f3; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-facts dd { margin: .15rem 0 0; color: #fff; font-weight: 750; }
.hero__visual { display: none; justify-items: center; gap: 1rem; }
.institution-card { position: relative; width: min(88vw, 370px); min-height: 430px; display: grid; place-items: center; padding: 2rem 2rem 1.15rem; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 1.6rem; box-shadow: 0 28px 80px rgba(0,38,31,.24); }
.institution-card__glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; top: -110px; right: -110px; background: rgba(166,218,241,.32); }
.institution-card__logo { position: relative; z-index: 1; width: min(74%, 245px); max-height: 325px; object-fit: contain; }
.institution-card__footer { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; font-weight: 700; text-align: center; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--unpa-green); box-shadow: 0 0 0 4px rgba(0,125,104,.12); }
.hero-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.hero-topics span { padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 750; }

/* Secciones */
.section, .project-section { padding-block: clamp(4rem, 10vw, 7rem); }
.section--soft, .project-section--soft { background: var(--surface-soft); }
.section-heading { max-width: 780px; margin-bottom: 2rem; }
.section-heading h2 { margin-bottom: .9rem; }
.section-heading > p:not(.eyebrow), .section-heading--split > p { color: var(--muted); font-size: 1.05rem; }
.section-heading--split { max-width: none; }
.section-heading--split > div { max-width: 620px; }

/* Carrera */
.career-overview-grid { display: grid; gap: 1rem; }
.feature-card { padding: clamp(1.35rem, 5vw, 2.25rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-card--primary { color: #fff; background: var(--unpa-green-ink); border-color: transparent; box-shadow: var(--shadow-md); }
.feature-card--primary h3 { color: #fff; }
.feature-card--primary p { color: #d8ebe7; }
.card-kicker { display: block; margin-bottom: .6rem; color: var(--unpa-green); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.feature-card--primary .card-kicker { color: var(--unpa-yellow); }
.fact-strip { display: grid; gap: .55rem; margin-top: 1.5rem; }
.fact-strip > div { padding: .8rem .9rem; border-radius: .75rem; background: rgba(255,255,255,.08); }
.fact-strip span { display: block; color: #acd2ca; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.fact-strip strong { display: block; margin-top: .15rem; color: #fff; font-size: .92rem; }
.leadership-card__name { margin-bottom: 1.2rem; font-size: 1.12rem; font-weight: 800; }
.contact-line { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .7rem; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.contact-line > span:first-child { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: #fff; border-radius: .45rem; background: var(--unpa-green); font-size: .72rem; font-weight: 850; }
.story-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.story-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.35rem; border-bottom: 1px solid var(--border); }
.story-card__number { color: var(--unpa-green); font-size: .75rem; font-weight: 900; letter-spacing: .09em; }
.story-card p { margin-bottom: 0; color: var(--muted); }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.45rem; margin-bottom: .7rem; }
.check-list li:last-child { margin-bottom: 0; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border: 2px solid var(--unpa-green); border-radius: 50%; }

/* Perfil */
.profile-grid { display: grid; gap: 1rem; }
.profile-card { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.profile-card--graduate { box-shadow: var(--shadow-sm); }
.profile-card__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.profile-card__head p { margin: 0 0 .15rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.profile-card__head h3 { margin: 0; }
.profile-index { min-width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--unpa-green); border-radius: .75rem; font-weight: 850; }
.graduate-grid { display: grid; gap: 1.2rem; }
.graduate-grid section { padding-top: 1rem; border-top: 1px solid var(--border); }
.graduate-grid h4 { margin-bottom: .65rem; color: var(--unpa-green-deep); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.graduate-grid ul { margin: 0; }
.graduate-grid li { margin-bottom: .5rem; color: var(--muted); }
.areas-block { margin-top: 2rem; padding: clamp(1.35rem, 5vw, 2.25rem); color: #fff; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--unpa-green-deep), var(--unpa-green)); }
.areas-block h3 { color: #fff; }
.chip-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { padding: .48rem .75rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); font-size: .84rem; font-weight: 700; }

/* Plan de estudios */
.curriculum-grid { display: grid; gap: .75rem; }
.semester { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.semester summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; padding: 1rem; cursor: pointer; list-style: none; }
.semester summary::-webkit-details-marker { display: none; }
.semester[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.semester__number { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: .7rem; background: var(--unpa-green); font-size: .8rem; font-weight: 850; }
.semester__title { font-weight: 800; }
.semester__toggle { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-green); color: var(--unpa-green); font-size: 1.25rem; transition: transform .18s ease; }
.semester[open] .semester__toggle { transform: rotate(45deg); }
.semester__body { padding: 0 1rem 1rem calc(40px + 1.85rem); }
.semester__body ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.semester__body li { margin-bottom: .42rem; }
.curriculum-support-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.support-card { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--surface-green); border: 1px solid var(--border); }
.support-card--dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.support-card--dark h3 { color: #fff; }
.clean-list { margin: .9rem 0 0; padding: 0; list-style: none; }
.clean-list li { padding: .65rem 0; border-top: 1px solid rgba(0,125,104,.16); }
.support-card--dark .clean-list li { border-color: rgba(255,255,255,.13); }
.clean-list--numbered { counter-reset: path; }
.clean-list--numbered li { counter-increment: path; display: grid; grid-template-columns: auto 1fr; gap: .7rem; }
.clean-list--numbered li::before { content: counter(path, decimal-leading-zero); color: var(--unpa-yellow); font-weight: 850; }
.section-action { margin-top: 1.5rem; }

/* Proyectos */
.section--projects-intro { color: #fff; background: var(--ink); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.section--projects-intro h2 { color: #fff; }
.section--projects-intro .section-heading > p { color: #d6d1ce; }
.project-section { border-bottom: 1px solid var(--border); }
.project-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 1.75rem; }
.project-head__copy h2 { margin-bottom: .75rem; }
.project-summary { max-width: 690px; color: var(--muted); font-size: 1.05rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.project-tags span { padding: .36rem .64rem; border-radius: 999px; color: var(--unpa-green-deep); background: var(--surface-green); border: 1px solid var(--border); font-size: .76rem; font-weight: 750; }
.project-actions { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; }
.download-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .75rem; color: var(--muted); font-size: .78rem; }
.download-meta > span:not(:last-child)::after { content: "·"; margin-left: .75rem; color: var(--border-strong); }
.download-counter { color: var(--unpa-green-deep); }
.project-gallery { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.gallery-item { position: relative; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); background: #dfe9e6; cursor: zoom-in; box-shadow: 0 0 0 1px var(--border); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.gallery-item__overlay { position: absolute; inset: auto .65rem .65rem .65rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .58rem .72rem; color: #fff; border-radius: .65rem; background: rgba(21,31,29,.78); backdrop-filter: blur(8px); font-size: .75rem; font-weight: 800; opacity: .94; }
.gallery-item:hover img { transform: scale(1.025); }

/* Recursos */
.resources-grid { display: grid; gap: 1rem; }
.contact-card { padding: clamp(1.35rem, 5vw, 2rem); color: #fff; background: var(--unpa-green-ink); border-radius: var(--radius-lg); }
.contact-card h3 { color: #fff; }
.contact-card address { margin-top: 1.25rem; }
.contact-card address p { padding: .75rem 0; margin: 0; border-top: 1px solid rgba(255,255,255,.12); color: #d9ebe7; overflow-wrap: anywhere; }
.contact-card a { color: #fff; }
.contact-key { display: block; margin-bottom: .15rem; color: #9bc9bf; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.official-links { display: grid; gap: .7rem; }
.resource-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; font-weight: 750; }
.resource-card:hover { color: var(--unpa-green-deep); border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.resource-card__number { color: var(--unpa-green); font-size: .72rem; font-weight: 900; }
.integrity-note { margin-top: 1.5rem; padding: 1rem 1.1rem; border-left: 4px solid var(--unpa-yellow); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff8d6; }
.integrity-note strong { display: block; margin-bottom: .25rem; }
.integrity-note p { margin: 0; color: #635a35; }
.source-note { margin: 1rem auto 0; max-width: 900px; color: var(--muted); font-size: .78rem; text-align: center; }

/* Marcadores */
.subhero { color: #fff; background: linear-gradient(135deg, var(--unpa-green-ink), var(--unpa-green)); }
.subhero__inner { padding-block: clamp(3rem, 9vw, 5.5rem); }
.subhero h1 { margin-bottom: .6rem; color: #fff; }
.subhero p:not(.eyebrow) { max-width: 620px; color: #e8f6f3; }
.breadcrumbs { display: flex; gap: .55rem; align-items: center; margin-top: 1.2rem; color: #e8f6f3; font-size: .85rem; }
.breadcrumbs a { color: #fff; }
.marker-download { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; }
.marker-download small { color: var(--muted); text-align: center; }
.marker-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.marker-card { width: 100%; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: zoom-in; }
.marker-card__image { display: grid; place-items: center; min-height: 240px; padding: 1rem; background: var(--surface-soft); }
.marker-card__image img { max-height: 300px; object-fit: contain; }
.marker-card__caption { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; padding: .85rem 1rem; font-size: .82rem; font-weight: 750; }
.marker-card:hover { border-color: var(--unpa-green); box-shadow: var(--shadow-sm); }

/* Diálogo de galería */
.media-dialog { width: min(96vw, 1040px); max-height: 92vh; padding: 0; overflow: visible; border: 0; border-radius: var(--radius-lg); background: transparent; }
.media-dialog::backdrop { background: rgba(8,19,17,.82); backdrop-filter: blur(6px); }
.media-dialog__panel { position: relative; max-height: 92vh; display: grid; justify-items: center; padding: 2.8rem 1rem 1rem; border-radius: var(--radius-lg); background: #fff; overflow: auto; }
.media-dialog__panel img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: .6rem; }
.media-dialog__panel p { margin: .8rem 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.media-dialog__close { position: absolute; top: .55rem; right: .55rem; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; font-size: 1.45rem; line-height: 1; }

/* Footer */
.site-footer { padding-top: 3.5rem; color: #d9e5e2; background: #1f2523; }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: start; }
.footer-logo-wrap { display: grid; place-items: center; padding: .6rem; background: #fff; border-radius: .8rem; }
.footer-logo-wrap img { width: 58px; height: auto; }
.footer-brand p { margin-bottom: .65rem; }
.footer-brand small { color: #9eb0ac; }
.footer-contact h2, .footer-links h2 { margin-bottom: 1rem; color: #fff; font-size: 1rem; letter-spacing: .02em; }
.footer-contact p { margin: .4rem 0; }
.footer-contact a, .footer-links a { color: #d9e5e2; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--unpa-yellow); }
.footer-bottom { display: flex; flex-direction: column; gap: .2rem; margin-top: 2.5rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); color: #9eb0ac; font-size: .78rem; }
.footer-bottom p { margin: 0; }
.back-to-top { position: fixed; z-index: 900; right: 1rem; bottom: 1rem; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--unpa-green); border: 1px solid rgba(255,255,255,.25); border-radius: .8rem; box-shadow: var(--shadow-md); text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { color: #fff; background: var(--unpa-green-deep); }

/* 480+ */
@media (min-width: 480px) {
    .button-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .button-row .button { width: auto; }
    .hero-facts { grid-template-columns: repeat(3, 1fr); }
    .project-gallery, .marker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 720+ */
@media (min-width: 720px) {
    :root { --header-height: 78px; }
    .shell { width: min(100% - 3rem, var(--max-width)); }
    .hero__visual { display: grid; }
    .section-heading--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 2rem; align-items: end; }
    .section-heading--split > p { margin-bottom: .25rem; }
    .fact-strip { grid-template-columns: repeat(3, 1fr); }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-card { border: 1px solid var(--border); border-radius: var(--radius); }
    .graduate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .curriculum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .curriculum-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .download-meta { flex-basis: 100%; justify-content: flex-start; }
    .project-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .resources-grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); align-items: stretch; }
    .official-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .marker-download { align-items: flex-start; }
    .marker-download small { text-align: left; }
    .footer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(210px, .65fr) minmax(220px, .7fr); }
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* 960+ */
@media (min-width: 960px) {
    .brand__copy strong { font-size: 1rem; }
    .brand__copy small { font-size: .72rem; }
    .nav-toggle { display: none; }
    .primary-nav { position: static; display: flex; flex-direction: row; align-items: center; gap: .05rem; padding: 0; background: transparent; overflow: visible; }
    .primary-nav a { padding: .6rem .62rem; font-size: .82rem; }
    .primary-nav .nav-cta { margin: 0 0 0 .35rem; padding-inline: .85rem; }
    .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: center; }
    .hero__visual { justify-self: end; }
    .career-overview-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); align-items: stretch; }
    .profile-grid { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); }
    .project-head { grid-template-columns: minmax(0, 1fr) auto; }
    .project-actions { justify-content: flex-end; max-width: 520px; }
    .download-meta { justify-content: flex-end; }
}

/* 1200+ */
@media (min-width: 1200px) {
    .primary-nav a { padding-inline: .78rem; font-size: .86rem; }
    .institution-card { width: 390px; }
    .project-gallery { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .site-header, .button-row, .project-actions, .project-gallery, .back-to-top, .media-dialog, .site-footer { display: none !important; }
    body { color: #000; background: #fff; }
    .section, .project-section { padding-block: 1.5rem; }
    .semester { break-inside: avoid; }
}

/* ================================================================
 * ETAPA 10 · Fichas profesionales de proyectos AR
 * Mobile first. Sin dependencias externas.
 * ================================================================ */
.project-index { margin: 0 0 .25rem; color: var(--unpa-green-deep); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.project-text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--unpa-green-deep); font-size: .82rem; font-weight: 850; text-decoration: none; }
.project-text-link:hover { text-decoration: underline; }
.project-gallery--preview .gallery-item__overlay { align-items: flex-end; }
.project-gallery--preview .gallery-item__overlay > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; text-align: left; }
.project-gallery-more { margin-top: 1rem; text-align: right; }
.project-gallery-more a { display: inline-flex; gap: .45rem; align-items: center; font-size: .84rem; font-weight: 850; text-decoration: none; }

/* Hero de ficha individual */
.project-detail-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #073e36 0%, #006554 68%, #007d68 100%); }
.project-detail-hero::before { content: ""; position: absolute; width: 360px; height: 360px; right: -180px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.08); }
.project-detail-hero::after { content: ""; position: absolute; width: 280px; height: 280px; left: -160px; bottom: -180px; border-radius: 50%; background: rgba(255,206,1,.10); }
.project-detail-hero--sky { background: linear-gradient(145deg, #102f3d 0%, #176c7a 56%, #5aa4a5 100%); }
.project-detail-hero--yellow { background: linear-gradient(145deg, #2b2523 0%, #4d4032 58%, #71602a 100%); }
.project-detail-hero .shell { position: relative; z-index: 1; }
.breadcrumbs--project { margin: 0; padding-top: 1rem; }
.breadcrumbs--project a { color: #fff; }
.project-detail-hero__grid { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2.2rem, 9vw, 5.5rem); }
.project-detail-hero__copy h1 { margin-bottom: .9rem; color: #fff; font-size: clamp(2.7rem, 13vw, 5.4rem); }
.project-detail-hero__lead { max-width: 760px; margin-bottom: 1.15rem; color: #f1faf8; font-size: clamp(1.02rem, 3.8vw, 1.28rem); line-height: 1.6; }
.project-tags--hero span { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.project-detail-actions { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
.project-detail-actions .button { width: 100%; }
.project-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 1.3rem 0 0; }
.project-detail-stats > div { min-width: 0; padding: .8rem .75rem; border: 1px solid rgba(255,255,255,.18); border-radius: .8rem; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.project-detail-stats dt { margin-bottom: .18rem; color: #e8f6f3; font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.project-detail-stats dd { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: .9rem; font-weight: 850; }
.project-detail-stats .download-counter { color: #fff; }
.project-detail-cover { position: relative; margin: 0; padding: .6rem; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-lg); background: rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(5,25,21,.26); }
.project-detail-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
.project-detail-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 1rem; background: #fff; }
.project-detail-cover figcaption { padding: .65rem .45rem .2rem; color: #e8f6f3; font-size: .72rem; text-align: center; }

/* Propósito y características */
.project-detail-overview__grid { display: grid; gap: 1.4rem; }
.project-detail-story h2 { max-width: 760px; }
.project-detail-story__lead { max-width: 790px; color: var(--muted); font-size: 1.08rem; }
.project-audience { margin-top: 1.4rem; padding: 1rem 1.1rem; border-left: 4px solid var(--unpa-yellow); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff8d6; }
.project-audience > span { display: block; margin-bottom: .25rem; color: #685717; font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.project-audience p { margin: 0; color: #5d5230; }
.project-feature-grid { display: grid; gap: .75rem; }
.project-feature-card { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.project-feature-card > span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; color: #fff; border-radius: .65rem; background: var(--unpa-green); font-size: .7rem; font-weight: 900; }
.project-feature-card p { margin: .1rem 0 0; color: var(--muted); font-size: .91rem; line-height: 1.55; }
.page-project--sky .project-feature-card > span { background: #317f89; }
.page-project--yellow .project-feature-card > span { color: var(--ink); background: var(--unpa-yellow); }

/* Guía de uso */
.project-steps { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.project-step { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.project-step__number { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--unpa-green-deep); border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-green); font-size: .68rem; font-weight: 900; }
.project-step h3 { margin: 0 0 .25rem; font-size: 1rem; }
.project-step p { margin: 0; color: var(--muted); font-size: .88rem; }
.install-note { display: grid; gap: .25rem; margin-top: 1.2rem; padding: 1rem 1.1rem; color: #4d4430; border: 1px solid #efdc7e; border-radius: var(--radius); background: #fff9dd; }
.install-note strong { color: #493e15; }
.install-note p { margin: 0; font-size: .87rem; }

/* Ficha técnica */
.project-technical__grid { display: grid; gap: 1.4rem; }
.project-technical__intro { max-width: 780px; color: var(--muted); }
.technical-list { margin: 1.4rem 0 0; border-top: 1px solid var(--border); }
.technical-list > div { display: grid; gap: .2rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.technical-list dt { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.technical-list dd { margin: 0; color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
.integrity-card { align-self: start; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.integrity-card h3 { margin-bottom: .55rem; }
.integrity-card > p:not(.eyebrow) { color: var(--muted); font-size: .88rem; }
.hash-box { display: grid; gap: .55rem; margin-top: 1rem; }
.hash-box code { display: block; max-width: 100%; padding: .85rem; overflow-wrap: anywhere; color: #d9eee9; border-radius: .7rem; background: #18221f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; line-height: 1.55; }
.hash-box button { min-height: 42px; padding: .55rem .8rem; color: var(--unpa-green-deep); border: 1px solid var(--border-strong); border-radius: .65rem; background: #fff; cursor: pointer; font-size: .78rem; font-weight: 850; }
.hash-box button:hover { border-color: var(--unpa-green); }
.hash-box button.is-copied { color: #fff; background: var(--unpa-green); border-color: var(--unpa-green); }
.marker-status { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin-top: 1rem; padding: .85rem; border: 1px solid #bbddd5; border-radius: .75rem; background: #eaf8f4; }
.marker-status > span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #fff; border-radius: 50%; background: var(--unpa-green); font-weight: 900; }
.marker-status strong { display: block; color: var(--unpa-green-deep); font-size: .86rem; }
.marker-status p { margin: .18rem 0 0; color: #4f625e; font-size: .78rem; }
.marker-status--external { border-color: #ebd887; background: #fff8dc; }
.marker-status--external > span { color: var(--ink); background: var(--unpa-yellow); }
.marker-status--external strong { color: #5b4c13; }
.marker-status--external p { color: #675c35; }

/* Galería completa y proyectos relacionados */
.project-gallery--detail .gallery-item { aspect-ratio: 4 / 3; background: #edf3f1; }
.project-gallery--detail .gallery-item img { object-fit: contain; }
.project-gallery--detail .gallery-item__overlay { opacity: 0; transition: opacity .2s ease; }
.project-gallery--detail .gallery-item:hover .gallery-item__overlay,
.project-gallery--detail .gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.related-projects { display: grid; gap: .85rem; }
.related-project-card { display: grid; grid-template-columns: 106px minmax(0,1fr); min-height: 108px; overflow: hidden; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; text-decoration: none; }
.related-project-card:hover { color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.related-project-card__image { min-width: 0; background: var(--surface-soft); }
.related-project-card__image img { width: 100%; height: 100%; object-fit: cover; }
.related-project-card__copy { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .8rem; min-width: 0; }
.related-project-card__copy small { color: var(--unpa-green); font-size: .62rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.related-project-card__copy strong { font-size: 1.04rem; }
.related-project-card__copy > span { margin-top: .2rem; color: var(--unpa-green-deep); font-size: .74rem; font-weight: 850; }

@media (min-width: 480px) {
    .project-detail-actions { flex-direction: row; flex-wrap: wrap; }
    .project-detail-actions .button { width: auto; }
    .project-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
    .project-detail-hero__grid { grid-template-columns: minmax(0,1.1fr) minmax(300px,.72fr); gap: 2.3rem; }
    .project-detail-cover { align-self: center; }
    .project-detail-overview__grid { grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); gap: 2rem; align-items: start; }
    .project-feature-grid { grid-template-columns: 1fr; }
    .project-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .project-step { grid-template-columns: 1fr; }
    .project-technical__grid { grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 2rem; }
    .technical-list > div { grid-template-columns: minmax(160px,.42fr) minmax(0,1fr); gap: 1rem; align-items: baseline; }
    .related-projects { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 960px) {
    .project-detail-hero__grid { grid-template-columns: minmax(0,1.12fr) minmax(390px,.68fr); gap: 3.5rem; }
    .project-detail-cover img { aspect-ratio: 16 / 11; }
    .project-detail-overview__grid { grid-template-columns: minmax(0,1.1fr) minmax(420px,.9fr); gap: 3rem; }
    .project-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .project-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .related-project-card { grid-template-columns: 145px minmax(0,1fr); min-height: 130px; }
}

@media print {
    .project-detail-actions, .project-detail-cover, .project-gallery--detail, .related-projects, .hash-box button { display: none !important; }
    .project-detail-hero { color: #000; background: #fff; }
    .project-detail-hero h1, .project-detail-hero__lead, .project-detail-stats dd, .project-detail-stats .download-counter { color: #000; }
}

/* ETAPA 11 · Rendimiento visual */
@media (prefers-reduced-data: reduce) {
    .gallery-item__overlay { backdrop-filter: none; }
    .institution-card__glow { display: none; }
}

/* ETAPA 12 · Accesibilidad reforzada */
.brand__copy small { font-size: .72rem; }
.related-project-card__copy small { font-size: .72rem; }
.project-detail-stats dt { font-size: .72rem; }

@media (prefers-contrast: more) {
    :root { --border: #9ebbb3; --border-strong: #759e93; --muted: #4e4946; }
    .button--outline, .resource-card, .semester, .profile-card, .story-card, .project-feature-card, .integrity-card { border-width: 2px; }
    .gallery-item__overlay { background: rgba(21,31,29,.94); }
}

@media (forced-colors: active) {
    .button, .brand__mark, .profile-index, .semester__number, .project-feature-card > span, .back-to-top { border: 1px solid ButtonText; }
    .status-dot { forced-color-adjust: none; }
    :focus-visible { outline: 3px solid Highlight; }
}