@charset "UTF-8";
:root{--white:#fff;--ice:#eff5fb;--ink:#102b46;--blue:#146bd1;--gold:#d5a34b;--muted:#536579;--line:#d4e1ec;--ease:cubic-bezier(.2,.75,.2,1);--ease-out:cubic-bezier(.23,1,.32,1);--display:'DM Serif Display',Georgia,serif;--body:Manrope,Arial,sans-serif;--header-h:105px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px;scrollbar-gutter:stable}body{margin:0;padding-top:var(--header-h);background:var(--white);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}button,input,select{font:inherit}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}button,a,summary,[role=button]{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button{color:inherit}button:disabled{cursor:default}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.035em}h2{font-size:clamp(46px,5.2vw,76px)}em{font-weight:400}h3{font-size:19px;line-height:1.5;font-weight:700}p{overflow-wrap:break-word}a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:5px}::selection{background:#cfe1f6;color:var(--ink)}.section-dark ::selection,.site-footer ::selection{background:#e3b35f;color:#102b46}input,textarea{caret-color:var(--blue)}.section-dark :focus-visible,.site-footer :focus-visible{outline-color:#f0c778}.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:10px;left:10px;background:var(--ink);color:#fff;z-index:100;padding:12px 20px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:60}.site-header{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid transparent;backdrop-filter:blur(16px);transition:border-color .3s,box-shadow .3s}.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px #102b460d}.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:28px;transition:height .3s var(--ease)}.site-header.scrolled .header-inner{height:72px}.brand{display:block;flex:0 0 200px}.brand img{width:200px;height:auto;transition:width .3s var(--ease)}.site-header.scrolled .brand img{width:158px}.header-inner nav{display:flex;gap:30px;font-size:14px;font-weight:600}.header-inner nav a{position:relative;white-space:nowrap;padding-block:14px}.header-inner nav a:after{content:'';position:absolute;left:0;right:100%;height:1px;bottom:8px;background:var(--blue);transition:right .3s}.header-inner nav a:hover:after{right:0}.button{border:1px solid var(--blue);background:var(--blue);color:#fff;display:inline-flex;gap:18px;align-items:center;justify-content:center;min-height:58px;padding:15px 25px;border-radius:6px;font-size:15px;font-weight:700;line-height:1.3;transition:background .2s,box-shadow .2s,transform .16s var(--ease-out)}@media (hover:hover) and (pointer:fine){.button:hover{background:#0a55af;box-shadow:0 8px 20px #146bd121}}.button:active{transform:scale(.97)}.button .icon{transition:transform .2s var(--ease-out)}@media (hover:hover) and (pointer:fine){.button:hover .icon{transform:translate(2px,-2px)}}.button-small{font-size:13px;min-height:48px;padding:12px 19px}.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:15px;padding-block:8px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--blue);line-height:1.6;transition:color .2s}.text-link .icon{transition:transform .2s var(--ease-out)}@media (hover:hover) and (pointer:fine){.text-link:hover .icon{transform:translateX(3px)}.text-link:hover .icon:has(use[href="#down"]){transform:translateY(2px)}}.menu-toggle{display:none}.hero{overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:660px;gap:20px}.hero-copy{position:relative;z-index:2;padding-block:50px}.hero h1{font-size:clamp(65px,7.1vw,105px);letter-spacing:-.048em;line-height:1.05}.hero h1 em{color:var(--blue);white-space:nowrap}.hero-copy>p{font-size:19px;line-height:1.65;max-width:540px;color:#526172;margin-top:30px}.hero-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:36px}.hero-actions .button{border-radius:50px;padding-inline:28px}.hero-actions .text-link{color:var(--ink);font-size:14px}.values-strip{display:grid;grid-template-columns:repeat(3,1fr);padding-block:36px 42px;border-top:1px solid #afc9e5;margin-top:18px}.values-strip>div{padding-left:54px;border-left:1px solid var(--line)}.values-strip>div:first-child{padding-left:0;border-left:0}.values-strip span{font-size:12px;color:#9d6d24;display:inline-block;margin-bottom:10px}.values-strip span:after{content:'';display:block;width:26px;height:1px;background:var(--gold);margin-top:6px}.values-strip p{font:400 clamp(23px,2.5vw,35px)/1.2 var(--display);letter-spacing:-.02em}.section-space{padding-block:110px}.section-label{display:flex;align-items:center;gap:17px;text-transform:uppercase;letter-spacing:.23em;font-size:11px;font-weight:700;color:var(--blue);margin-bottom:28px}.section-label:before{content:'';width:38px;height:1px;background:var(--gold);display:inline-block;flex-shrink:0}.gold-text{color:var(--gold)}.section-dark{background:var(--ink);color:#fff}.section-dark .section-label{color:#e3b35f}.section-intro{font-size:19px;color:#b8cbe0;line-height:1.65;max-width:800px;margin-top:25px}.community{overflow:hidden;padding-block:70px}.community-grid{display:grid;grid-template-columns:.82fr 1.3fr;align-items:center;gap:30px}.community-copy{position:relative;z-index:2}.community-copy h2{font-size:clamp(40px,4vw,59px);line-height:1.08}.community-copy h2 em{color:#e0b76f}.community-copy>p:not(.section-label){font-size:16px;color:#b9ccdf;max-width:420px;margin-top:24px}.simulation-count{display:flex;gap:16px;align-items:center;margin-top:32px}.simulation-count strong{font:400 66px/1 var(--display);letter-spacing:-.05em}.simulation-count span{max-width:125px;line-height:1.5;font-size:13px;color:#bdcee0}.community-copy .connection-story{font-size:12px!important;min-height:38px;border-left:1px solid var(--gold);padding-left:14px}.globe-column{min-width:0}.globe-loading{min-height:550px;display:grid;place-items:center;color:#bfd4e6}.model h2 em{color:var(--ink)}.model-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:55px;margin-top:46px;align-items:start}.model-photo{margin:0}.model-photo img{width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:8px}.model-photo figcaption{font-size:12px;letter-spacing:.01em;color:var(--muted);margin-top:18px;display:flex;align-items:center;gap:18px}.model-photo figcaption:before{content:'';width:30px;height:1px;background:var(--gold)}details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}.feature{border-bottom:1px solid var(--line);transition:background .3s;padding:22px 25px}.feature[open]{background:var(--ice);border-radius:8px;border-bottom-color:transparent}.feature summary{display:flex;align-items:center;gap:20px;min-height:48px}.feature-number{color:#8a9db1;font-size:14px;border-right:1px solid #b9cde1;padding-right:18px}.feature[open] .feature-number{color:var(--blue)}.feature h3{font-size:19px}.summary-sign{position:relative;margin-left:auto;width:28px;min-width:28px;height:28px}.summary-sign:before,.summary-sign:after{content:'';position:absolute;background:currentColor;top:13px;left:5px;width:18px;height:1px;transition:transform .25s}.summary-sign:after{transform:rotate(90deg)}details[open]>.summary-sign:after,details[open]>summary>.summary-sign:after{transform:rotate(0)}.feature>p{border-top:1px solid #ccdeee;padding-top:20px;margin-top:20px;font-size:16px;line-height:1.9;color:#445b73}.model-features>.text-link{margin:30px 25px 0}.catalog{position:relative;overflow:hidden}.catalog .wrap{position:relative}.decorative-orbit{position:absolute;right:-15%;top:-300px;width:650px;height:650px;border:1px solid #6f98b655;border-radius:50%}.decorative-orbit:after{content:'';position:absolute;inset:28px;border:1px solid #d5a34b80;border-radius:50%}.program-tabs{display:flex;gap:20px;margin:40px 0 25px}.program-tabs button{display:flex;align-items:center;gap:12px;color:#bfd0e3;background:none;border:1px solid transparent;border-radius:40px;padding:12px 22px;font-size:14px;min-height:50px}.program-tabs button span{font-size:11px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#315475;color:#c5daed}.program-tabs button[aria-selected=true]{background:#fff;color:var(--ink);font-weight:700}.program-tabs button[aria-selected=true] span{background:#e5eff9;color:var(--ink)}@media (hover:hover) and (pointer:fine){.program-tabs button:hover:not([aria-selected=true]){background:#ffffff0d;border-color:#ffffff30}}.program-row{display:grid;grid-template-columns:45px 1fr 47px;gap:28px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #486783;padding:23px 4px;color:#fff;text-decoration:none;transition:background .2s}.program-code,.program-title{transition:transform .25s var(--ease-out)}@media (hover:hover) and (pointer:fine){.program-row:hover{background:#ffffff04}.program-row:hover .program-code,.program-row:hover .program-title{transform:translateX(10px)}}.program-index{font-size:13px;color:#b3c8dd}.program-title{font:400 clamp(22px,2.45vw,34px)/1.3 var(--display);letter-spacing:-.015em}.program-arrow{width:43px;height:43px;border:1px solid #bfd0e3;border-radius:50%;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s var(--ease-out)}@media (hover:hover) and (pointer:fine){.program-row:hover .program-arrow{background:#fff;color:var(--ink);transform:rotate(-40deg)}}.program-row:active .program-arrow{transform:rotate(-40deg) scale(.94)}.catalog-note{margin-top:35px;font-size:13px;color:#b5cadd;display:flex;gap:20px;align-items:center}.catalog-note:before{content:'';width:35px;height:1px;background:var(--gold)}.validity-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}.validity-heading h2{font-size:clamp(44px,4.5vw,66px)}.validity-heading h2 em{color:var(--blue)}.validity-heading p{font-size:16px;line-height:1.8;color:#42566e}.validity-heading .text-link{margin-top:20px}.validity-meta{display:flex;gap:35px;border-top:1px solid var(--line);padding-top:24px;margin-top:50px;font-size:12px;color:var(--muted)}.validity-meta strong{font-weight:600;color:var(--ink)}.table-scroll{overflow-x:auto;margin-top:25px;border:1px solid #e2ebf4;border-radius:4px}.agreement-table{border-collapse:collapse;width:100%;font-size:13px;text-align:left;min-width:680px}.agreement-table th{background:var(--ice);padding:17px 23px;font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;vertical-align:middle}.agreement-table th:nth-child(1){width:48%}.agreement-table td{padding:23px;border-top:1px solid var(--line);line-height:1.6}.agreement-table td+td,.agreement-table th+th{border-left:1px solid #e2ebf4}.agreement-table td small{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em;margin-bottom:5px}.agreement-table td a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);text-decoration:underline;text-underline-offset:5px;font-weight:700}.agreement-table td a .icon{width:16px;height:16px}.table-toggle{margin-top:22px;font-size:13px}.source-note{display:flex;gap:20px;margin-top:30px;font-size:13px;color:#617286;align-items:start}.source-note p{max-width:920px;line-height:1.9}.source-note a{text-decoration:underline;text-underline-offset:3px}.info-icon{border:1px solid #8a9fb5;min-width:22px;height:22px;border-radius:50%;text-align:center;font-size:12px;font-weight:700;line-height:20px}.admissions{background:var(--ice);padding-block:85px}.admissions-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:95px;align-items:center}.admissions h2{font-size:clamp(44px,4.8vw,68px)}.admissions h2 em{color:#a5752a}.admissions p{font-size:16px;line-height:1.9;max-width:520px;margin-top:24px;color:#42566e}.admissions .button{margin-top:30px}.admission-steps{list-style:none;margin:0;padding:0}.admission-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:24px;align-items:start;border-bottom:1px solid #b8cbde;padding:24px 0}.admission-steps li:last-child{border-bottom:0}.admission-steps li>span{font:400 44px/1.1 var(--display);color:var(--blue);text-align:center}.admission-steps h3{font-size:16px}.admission-steps p{font-size:14px;margin-top:7px;line-height:1.6}.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:100px}.faq h2 em{color:#a5752a}.faq-grid>div>p:not(.section-label){color:var(--muted);font-size:14px;margin-top:25px;line-height:1.9}.faq-items details{border-bottom:1px solid var(--line);padding:22px 25px}.faq-items details[open]{background:var(--ice);border-color:transparent;border-radius:6px}.faq-items summary{display:flex;align-items:center;gap:20px;font-size:15px;font-weight:700;min-height:35px}.faq-items details p{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.9;color:#42566e}.faq-items a,.inline-button{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.inline-button{background:none;border:0;padding:0;font:inherit}.site-footer{background:var(--ink);color:#c0d0de;padding-top:65px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr 1fr;gap:55px}.footer-brand img{width:200px;background:white;border-radius:4px;padding:9px 12px}.footer-brand p{font:400 24px/1.3 var(--display);color:#fff;margin-top:24px}
.footer-social{display:flex;gap:10px;list-style:none;margin:24px 0 0;padding:0}
.footer-grid .footer-social a{display:grid;place-items:center;width:42px;height:42px;margin:0;border:1px solid #536d83;border-radius:50%;color:#dbe6f1;transition:color .2s,border-color .2s}
.footer-grid .footer-social a:hover{color:#fff;border-color:#c0d0de}
.footer-social .icon{width:18px;height:18px}
.footer-bottom span a{text-decoration:underline;text-decoration-color:#ffffff59;text-underline-offset:3px}.footer-grid h2{font:italic 400 23px/1.2 var(--display);letter-spacing:0;color:#fff;margin-bottom:20px}.footer-grid a,.footer-link{display:block;font-size:12px;margin-top:10px;line-height:1.8}.footer-link{border:0;background:none;color:inherit;padding:0;display:flex;align-items:center;gap:9px;text-align:left}.footer-link .icon{width:16px;height:16px}.footer-grid a:hover,.footer-link:hover{color:#fff}.footer-institution p{font-size:12px;line-height:1.9;margin-top:15px}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #536d83;margin-top:55px;padding-block:24px;font-size:12px}.footer-bottom a:hover{color:white}dialog{border:0;background:white;color:var(--ink);width:min(680px,calc(100% - 32px));max-height:calc(var(--usable-height) - 40px);padding:55px;border-radius:15px;box-shadow:0 24px 100px #06182866;overflow:auto}dialog::backdrop{background:#081c31a6;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:white}@media (hover:hover) and (pointer:fine){.dialog-close:hover{background:var(--ice)}}dialog h2{font-size:43px;line-height:1.1;margin-bottom:24px}dialog h2 em{color:var(--blue)}dialog .section-label{font-size:11px;margin-bottom:22px}dialog>p:not(.section-label),.program-description{font-size:14px;line-height:1.9;color:var(--muted)}dialog label{display:block;font-size:12px;font-weight:700;margin-top:28px;margin-bottom:9px}/* Same white field and chevron in every browser (WebKit otherwise draws its own grey menulist). */
dialog select{width:100%;border:1px solid #aebfd2;-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102b46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/15px 15px;color:var(--ink);padding:13px 38px 13px 12px;border-radius:5px;font-size:13px}
/* iOS Safari zooms into any form control under 16px when it is tapped. */
@media(pointer:coarse){dialog select{font-size:16px}}.contact-options{display:flex;flex-direction:column;gap:12px;margin-top:25px}.button-outline{color:var(--blue);background:white}@media (hover:hover) and (pointer:fine){.button-outline:hover{color:white}}.dialog-note{font-size:12px!important;line-height:1.8!important;margin-top:20px!important;color:var(--muted)}.program-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--ice);padding:25px;margin:28px 0}.program-facts dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.program-facts dd{margin:0;font-size:14px;font-weight:600}.program-facts .agreement-number{font:400 35px/1.1 var(--display);color:var(--blue)}.program-source-links{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0 28px;font-size:12px}.program-source-links a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}.program-availability{font-size:12px;color:var(--muted);line-height:1.8;margin-top:20px}
/* Catalog and contact without JavaScript (<noscript> in index.html, generated from programs.js). */
.program-static{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 56px;margin-top:40px}
.program-static h3{font-size:20px;color:#fff}
.program-static ul{list-style:none;margin:12px 0 0;padding:0}
.program-static li{padding:12px 0;border-bottom:1px solid #ffffff24}
.program-static strong{display:block;font-size:15px;color:#fff}
.program-static span{display:block;margin-top:3px;font-size:12.5px;color:#bcd0e4}
.program-static p{grid-column:1/-1;font-size:13px;color:#bcd0e4}
.program-static a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.program-static{grid-template-columns:1fr}}
.contact-static{margin-top:22px;font-size:16px;line-height:1.7}
.contact-static a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* Program names in the agreements table: a link to the program's page (a click opens its sheet). */
.agreement-program{color:var(--ink);text-decoration:underline;text-decoration-color:#b7c8d9;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.agreement-program:hover{color:var(--blue);text-decoration-color:currentColor}
/* Index of programs in the home page footer (generated by scripts/make-program-pages.mjs). */
.footer-programs{padding:30px 0 6px;border-top:1px solid #ffffff1f;margin-top:40px}
.footer-programs>h2{font-size:15px}
.footer-programs__groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 30px;margin-top:14px}
.footer-programs h3{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#bcd0e4}
.footer-programs ul{list-style:none;margin:8px 0 0;padding:0}
.footer-programs li+li{margin-top:5px}
.footer-programs a{font-size:12.5px;line-height:1.5;color:#dbe6f1}
.footer-programs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.footer-programs__groups{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-programs__groups{grid-template-columns:1fr}}
/* Static program pages (public/programas/<id>/, generated by scripts/make-program-pages.mjs): the same
   sheet as the dialog, on its own page without scripts. */
body.program-page{padding-top:0}
.program-page__header{border-bottom:1px solid var(--line);background:#fff}
.program-page__header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.program-page__header .brand img{display:block;width:160px;height:auto}
.program-page__main{max-width:860px;padding-block:30px 72px}
.program-page__crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font-size:13px;color:var(--muted)}
.program-page__crumbs a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.program-page h1{margin-top:8px;font-size:clamp(34px,5vw,52px);line-height:1.1}
.program-page .program-description{margin-top:14px;font-size:16px;line-height:1.8;color:#42566e}
.program-page .program-profile>:is(h2,h3):first-child,.program-page .program-plan>h2{font-size:22px}
.program-plan__trunk-title{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.program-page .program-actions{margin-top:30px}
.program-page .program-actions .button{margin-top:0}
.program-page .program-availability{margin-top:18px;font-size:12px;line-height:1.8;color:var(--muted)}
.program-related{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.program-related h2{font-size:22px}
.program-related ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0}
.program-related a{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px 16px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);transition:border-color .2s,background .2s}
.program-related a span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.program-related a:hover{border-color:var(--blue);background:var(--ice)}}
@media(max-width:600px){.program-related ul{grid-template-columns:1fr}}
/* A printed program page keeps the sheet and drops navigation and actions; sources show their address. */
@media print{
  .program-page .skip-link,.program-page__header .text-link,.program-page__crumbs,.program-page .program-actions,.program-related{display:none}
  .program-page__header{border:0}
  .program-page__main{padding-block:10px 20px}
  .program-page .program-source-links a::after{content:' ('attr(href)')';font-size:8pt;word-break:break-all}
  .program-page .program-facts,.program-page .program-plan__trunk{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .program-page .program-plan__terms>li,.program-page .program-intake__groups>div{break-inside:avoid}
}
.program-page__footer{padding:26px 0 34px;border-top:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--muted)}
.program-page__footer a{color:var(--blue)}
/* Intake profile: one line in the dialog, the full lists on a program page (program-content.js). */
.program-intake__audience{margin-top:12px;font-size:14px;line-height:1.7;color:#42566e}
.program-intake__audience strong{color:var(--ink)}
.program-intake{margin:4px 0 24px;padding-top:22px;border-top:1px solid var(--line)}
.program-intake>:is(h2,h3){font-size:22px}
.program-intake>.program-intake__audience{margin-top:8px}
.program-intake__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px;margin-top:14px}
.program-intake__groups :is(h3,h4){margin:0 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.program-intake__groups ul{margin:0;padding-left:17px;font-size:13px;line-height:1.55;color:#42566e}
.program-intake__groups li+li{margin-top:3px}
@media(max-width:760px){.program-intake__groups{grid-template-columns:1fr}}
/* Graduate profile and job areas inside a program sheet (app.js, curricula.js). */
.program-profile{margin:4px 0 24px;padding-top:22px;border-top:1px solid var(--line)}
.program-profile :is(h2,h3){font-size:18px}
.program-profile :is(h2,h3)+p{margin-top:8px;font-size:14px;line-height:1.75;color:#42566e}
.program-profile :is(p,ul)+:is(h2,h3){font-family:var(--body);font-weight:700;margin-top:18px;font-size:15px}
.program-profile__graduation{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:10px 0 0;padding-left:20px;font-size:13.5px;color:#42566e}
@media(max-width:650px){.program-profile__graduation{grid-template-columns:1fr}}
.program-profile__areas{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0;padding:0}
.program-profile__areas li{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--ice);font-size:12.5px;color:var(--ink)}
/* Subjects per term inside a program sheet (app.js, curricula.js). */
.program-plan{margin:4px 0 28px;padding-top:22px;border-top:1px solid var(--line)}
.program-plan>:is(h2,h3){font-size:18px}
.program-plan__terms{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.program-plan__terms :is(h3,h4){margin:0 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.program-plan__terms ul{margin:0;padding-left:17px;font-size:13px;line-height:1.55;color:#42566e}
.program-plan__terms ul li+li{margin-top:2px}
.program-plan__terms li>p{margin:0;font-size:13px;color:#42566e}
.program-plan__terms .program-plan__area{margin:10px 0 4px;font-size:12.5px;font-weight:700;color:var(--ink)}
.program-plan__terms :is(h3,h4)+.program-plan__area{margin-top:0}
.program-plan__trunk{margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--ice)}
.program-plan__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;text-align:left;color:var(--ink);cursor:pointer}
.program-plan__toggle .icon{flex:none;width:16px;height:16px;transition:transform .2s var(--ease)}
.program-plan__toggle[aria-expanded=true] .icon{transform:rotate(45deg)}
.program-plan__toggle[aria-expanded=true]{margin-bottom:4px}
.program-plan .program-plan__note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:650px){.program-plan__terms{grid-template-columns:1fr}}
/* Printing (or saving as PDF) with a program sheet open gives just the sheet, with the address of
   each source and of the sheet itself spelled out on paper. */
.program-print-address,.program-print-logo{display:none}
@media print{
  .program-print-logo{display:block;width:170px;height:auto;margin-bottom:26px}
  /* The sheet is an island: its wrapper (astro-island, display:contents) stays. */
  body:has(#program-dialog[open])>:not(#program-dialog,:has(#program-dialog)){display:none!important}
  /* A modal dialog is fixed, and fixed boxes do not split across pages: absolute ones do. */
  #program-dialog[open]{position:absolute;inset:0 auto auto 0;width:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible;opacity:1;transform:none}
  #program-dialog::backdrop{background:none}
  #program-dialog .dialog-close,#program-dialog .program-actions{display:none}
  #program-dialog .program-source-links a::after{content:' ('attr(href)')';font-size:8pt;word-break:break-all}
  #program-dialog .program-facts{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .program-print-address{display:block;margin-top:14px;font-size:9pt;color:var(--muted)}
  /* The folded trunk prints too, and no term is split across two pages. */
  #program-plan-trunk[hidden]{display:block}
  .program-plan__terms>li{break-inside:avoid}
  #program-dialog .program-plan__toggle .icon{display:none}
}
.program-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.program-share{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.program-share .icon{width:17px;height:17px}
.program-share:hover span{text-decoration:underline;text-underline-offset:4px}@media(min-width:1600px){.hero-grid{min-height:720px}.wrap{width:min(1370px,calc(100% - 140px))}.hero h1{font-size:112px}}
@media(max-width:1180px){:root{--header-h:90px}.wrap{width:calc(100% - 72px)}.header-inner{gap:20px}.brand,.brand img{width:170px;flex-basis:170px}.header-inner nav{gap:20px;font-size:12px}.header-cta{font-size:12px;padding:11px 13px}.hero-grid{min-height:590px}.hero-copy>p{font-size:16px}.hero-actions{gap:18px}.hero-actions .button{padding-inline:21px;font-size:13px}.hero-actions .text-link{font-size:12px}.model-grid{gap:35px}.feature h3{font-size:16px}.feature{padding:20px}.feature summary{gap:14px}.community-grid{grid-template-columns:.8fr 1.2fr;gap:15px}.community-copy h2{font-size:45px}.validity-heading{gap:40px}.admissions-grid{gap:60px}.faq-grid{gap:50px}.footer-grid{gap:30px}}
@media(max-width:900px){.header-cta{display:none}.header-inner nav{font-size:13px}.hero-grid{grid-template-columns:1fr 1fr;gap:10px;min-height:510px}.hero h1{font-size:7.2vw}.hero-copy>p{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column;gap:12px;margin-top:25px}.values-strip>div{padding-left:25px}.values-strip p{font-size:23px}.section-space{padding-block:80px}.community-grid{grid-template-columns:1fr}.community-copy{max-width:680px}.community-copy h2{font-size:54px}.community-copy>p:not(.section-label){max-width:600px}.community-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:36px;align-items:end}.community-copy>*{grid-column:1/-1}.community-copy>p:not(.section-label):not(.connection-story){grid-column:1}.simulation-count{grid-column:2;margin-top:24px}.community-copy .connection-story{max-width:100%!important}.globe-column{max-width:680px;width:100%;margin:auto}.model-grid{grid-template-columns:1fr 1fr;gap:25px}.feature-number{padding-right:12px}.feature{padding:15px}.feature h3{font-size:15px}.feature>p{font-size:14px}.feature summary{gap:10px}.program-tabs{gap:10px}.program-tabs button{padding-inline:18px;font-size:12px}.validity-heading{grid-template-columns:1fr;gap:25px}.validity-heading p{max-width:650px}.admissions-grid{gap:35px}.admissions h2{font-size:46px}.admission-steps li{gap:20px}.admission-steps h3{font-size:14px}.faq-grid{grid-template-columns:.65fr 1fr;gap:35px}.faq h2{font-size:48px}.footer-grid{grid-template-columns:1fr 1fr;gap:40px}.footer-bottom>span:nth-child(2){display:none}}
@media(max-width:650px){:root{--header-h:78px}html{scroll-padding-top:74px}.wrap{width:calc(100% - 40px)}.site-header.scrolled .header-inner{height:64px}.site-header.scrolled .brand img{width:136px}.brand,.brand img{width:164px;flex-basis:164px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;width:44px;height:44px;background:white;border:1px solid var(--line);border-radius:50%}.menu-toggle span{width:18px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.header-inner nav{display:none;position:absolute;left:0;right:0;top:100%;background:white;padding:12px 24px 24px;border-bottom:1px solid var(--line);box-shadow:0 20px 25px #102b4610}.header-inner nav.open{display:flex;flex-direction:column;gap:0}.header-inner nav a{font-size:15px;padding:14px 0}.hero-grid{display:flex;flex-direction:column;gap:0}.hero-copy{padding:42px 0 35px;width:100%}.hero h1{font-size:clamp(55px,12vw,77px);line-height:1.06}.hero-copy>p{font-size:15px;margin-top:22px;line-height:1.8;max-width:390px}.hero-actions{flex-direction:row;align-items:center;gap:18px;margin-top:25px}.hero-actions .button{font-size:12px;min-height:48px;padding:13px 18px;gap:10px}.hero-actions .text-link{font-size:13px;gap:6px}.hero-actions .icon{width:17px;height:17px}.desktop-break{display:none}.values-strip{margin-top:12px;padding-block:22px 30px;gap:10px}.values-strip>div{padding-left:12px}.values-strip p{font-size:19px;line-height:1.2}.values-strip span{font-size:12px;margin-bottom:7px}.section-space{padding-block:65px}h2{font-size:45px;line-height:1.07}.section-label{font-size:11px;letter-spacing:.2em;margin-bottom:23px;gap:13px}.section-label:before{width:26px}.community{padding:55px 0 35px}.community-copy h2{font-size:43px;max-width:390px}.community-copy>p:not(.section-label){font-size:14px;max-width:100%;margin-top:20px}.community-copy{display:block}.simulation-count{margin-top:24px}.simulation-count strong{font-size:58px}.simulation-count span{font-size:12px;max-width:135px}.community-copy .connection-story{font-size:12px!important;min-height:25px}.community-grid{gap:10px}.globe-loading{min-height:400px}.model-grid{grid-template-columns:1fr;gap:24px;margin-top:30px}.model-photo img{aspect-ratio:1.3}.model-photo figcaption{font-size:12px;margin-top:13px}.feature{padding:18px 20px}.feature h3{font-size:16px}.feature-number{font-size:12px;padding-right:18px}.feature summary{gap:18px}.feature>p{font-size:14px}.model-features>.text-link{font-size:13px;margin-top:22px}.section-intro{font-size:15px;line-height:1.8;margin-top:22px}.program-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.program-tabs button{justify-content:space-between;border-color:#54708b;border-radius:30px;padding:10px 17px;font-size:12px}.program-row{grid-template-columns:20px 1fr 35px;gap:15px;padding:21px 0}.program-title{font-size:23px;line-height:1.3}.program-index{font-size:12px}.program-arrow{width:33px;height:33px}.program-arrow .icon{width:17px;height:17px}.catalog-note{align-items:flex-start;gap:13px;font-size:12px;line-height:1.8}.catalog-note:before{margin-top:9px;flex-shrink:0;width:23px}.validity-heading h2{font-size:43px}.validity-heading p{font-size:14px}.validity-heading .text-link{font-size:12px}.validity-meta{flex-direction:column;gap:6px;font-size:12px;margin-top:30px;padding-top:20px}.table-scroll{margin-top:20px}.agreement-table{min-width:580px;font-size:12px}.agreement-table td{padding:18px 15px}.agreement-table th{padding:15px;font-size:12px}.source-note{font-size:12px;gap:12px}.table-toggle{font-size:12px}.admissions-grid{grid-template-columns:1fr;gap:30px}.admissions h2{font-size:43px}.admissions p{font-size:14px;margin-top:20px}.admissions .button{font-size:13px;min-height:52px;margin-top:25px}.admission-steps li{padding:20px 0}.admission-steps li>span{font-size:38px}.admission-steps h3{font-size:15px}.admission-steps p{font-size:12px;margin-top:5px}.faq-grid{grid-template-columns:1fr;gap:30px}.faq h2{font-size:47px}.faq-grid>div>p:not(.section-label){font-size:13px;max-width:350px;margin-top:20px}.faq-items details{padding:18px 16px}.faq-items summary{font-size:13px;line-height:1.8;gap:15px}.faq-items details p{font-size:12px;line-height:1.9}.site-footer{padding-top:45px}.footer-grid{gap:35px 24px}.footer-brand{grid-column:span 2}.footer-brand img{width:185px}.footer-brand p{font-size:25px}.footer-grid h2{font-size:21px;margin-bottom:14px}.footer-grid a,.footer-link{font-size:13px}.footer-institution{grid-column:span 2}.footer-institution p{max-width:280px;font-size:13px;margin-top:10px}.footer-bottom{margin-top:35px;font-size:12px;flex-wrap:wrap;padding-block:20px;gap:10px}dialog{padding:50px 25px 30px;border-radius:10px}dialog h2{font-size:35px}.program-facts{padding:18px;gap:20px 16px}.program-facts dd{font-size:12px}.program-facts dt{font-size:12px}.program-facts .agreement-number{font-size:30px}dialog .button{font-size:12px;min-height:52px}.program-source-links{font-size:12px;gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== Design pass, 19 Oct 2026 =====
   Labels name the section in sentence case (same words as the menu); only the cover line keeps
   the italic. Motion answers the visitor (tabs, rows, questions, dialogs, menu) plus one
   orchestrated entrance on the cover; ambient motion lives only in the globe and the campus map. */
.section-label{text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:600;margin-bottom:20px}
.section-label:before{width:28px}

/* Cover: one entrance, played once. */
.hero h1 .hero-line{display:block}

.values-strip>p{padding-left:54px;border-left:1px solid var(--line)}
.values-strip>p:first-child{padding-left:0;border-left:0}
.values-strip>p:before{content:'';display:block;width:26px;height:1px;background:var(--gold);margin-bottom:14px}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .hero-line{animation:line-in .9s var(--ease) both}
  .hero h1 .hero-line+.hero-line{animation-delay:.12s}
  .hero-copy>p{animation:soft-in .8s var(--ease) .32s both}
  .hero-actions{animation:soft-in .8s var(--ease) .44s both}
  
  
  
  
  
}
@keyframes line-in{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}
@keyframes soft-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Menu: the section being read keeps its underline. */
.header-inner nav a[aria-current]{color:var(--blue)}
.header-inner nav a[aria-current]:after{right:0}

/* Community: live feed of the simulation instead of an oversized number. */
.connection-feed{margin-top:30px;max-width:440px}
.connection-feed__title{font-size:13px;font-weight:600;color:#9fb9cc;margin-bottom:10px}
/* The list keeps room for its four rows from the start: growing as connections arrive would push
   the globe down on narrow screens (layout shift). */
.connection-feed ol{list-style:none;margin:0;padding:0;min-height:calc(4 * 60px);border-top:1px solid rgb(255 255 255 / .1)}
.connection-feed li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:60px;padding:9px 0;border-bottom:1px solid rgb(255 255 255 / .08);font-size:14px;color:#dce9f2}
.connection-feed li.connection-feed__empty{display:block;color:#b9ccdf}
.feed-mark{justify-self:center;width:8px;height:8px;border-radius:50%;background:#c9f6fb;box-shadow:0 0 8px rgb(159 233 243 / .9)}
.connection-feed li[data-state=answer] .feed-mark{background:#ffb23f;box-shadow:0 0 8px rgb(255 160 60 / .9)}
.connection-feed li[data-state=lit] .feed-mark{width:11px;height:16px;border-radius:0;background:url('assets/globe/flama.webp') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 4px rgb(255 140 40 / .8))}
.feed-place{display:grid;min-width:0}
.feed-place strong,.feed-place small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-place strong{font-weight:600}
.feed-place small{font-size:12px;color:#9fb9cc}
.feed-status{font-size:12px;color:#9fb9cc;white-space:nowrap}
.connection-feed li[data-state=lit] .feed-status{color:#ffc46b}

/* Model: the icon of the cover button that opens each feature. */
.feature-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#e3edf7;color:var(--blue);transition:background .3s,color .3s}
.feature-icon .icon{width:19px;height:19px}
.feature[open] .feature-icon{background:var(--blue);color:#fff}
.feature.is-highlighted{animation:feature-flash 1.3s var(--ease)}
@keyframes feature-flash{from{box-shadow:0 0 0 0 rgb(20 107 209 / .35)}to{box-shadow:0 0 0 16px rgb(20 107 209 / 0)}}

/* Catalog: the agreement number leads each row; a pill slides to the selected level. */
.program-row{grid-template-columns:118px minmax(0,1fr) 47px}
.program-code{font-size:13px;font-weight:600;color:#e3b35f;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.program-tabs{position:relative;isolation:isolate}
.tab-indicator{display:none}
@media(min-width:651px){
  .tab-indicator{display:block;position:absolute;left:0;top:0;bottom:0;width:var(--indicator-w,0);transform:translateX(var(--indicator-x,0));border-radius:40px;background:#fff;z-index:-1;transition:transform .3s var(--ease-out),width .3s var(--ease-out)}
  .program-tabs button[aria-selected=true]{background:transparent}
  /* Until the island measures the pill (it renders on the server first), the chosen tab keeps its own. */
  .program-tabs:not([style*="--indicator-w"]) button[aria-selected=true]{background:#fff}
}
@keyframes row-in{from{opacity:0;transform:translateX(var(--from,0))}to{opacity:1;transform:none}}
@keyframes feed-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .program-list[data-dir=next] .program-row,.program-list[data-dir=prev] .program-row{animation:row-in .55s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
  .program-list[data-dir=next] .program-row{--from:26px}
  .program-list[data-dir=prev] .program-row{--from:-26px}
  .agreement-table tr.row-in{animation:soft-in .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
  .connection-feed li{animation:feed-in .5s var(--ease) both}
  .contact-preview blockquote.is-updated{animation:soft-in .35s var(--ease)}
  /* Questions and features open smoothly where the browser supports it (Chromium 131+). */
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height .3s var(--ease-out),content-visibility .3s allow-discrete}
  details[open]::details-content{height:auto}
  /* Dialogs rise into place instead of appearing abruptly. */
  dialog{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .28s var(--ease),transform .28s var(--ease),overlay .28s allow-discrete,display .28s allow-discrete}
  dialog[open]{opacity:1;transform:none}
  dialog::backdrop{background-color:transparent;transition:background-color .28s,overlay .28s allow-discrete,display .28s allow-discrete}
  dialog[open]::backdrop{background-color:#081c31a6}
  @starting-style{dialog[open]{opacity:0;transform:translateY(14px) scale(.985)}dialog[open]::backdrop{background-color:transparent}}
}

/* Contact: preview of the message that will be prepared. */
.contact-preview{margin:18px 0 0;padding:14px 16px;border-left:1px solid var(--gold);border-radius:0 6px 6px 0;background:var(--ice)}
.contact-preview figcaption{margin-bottom:6px;font-size:12px;font-weight:700;color:var(--muted)}
.contact-preview blockquote{margin:0;font-size:14px;line-height:1.7;color:var(--ink)}

/* Cover: the virtual campus in 3D, after the historical ODM illustration. The scene itself is
   drawn by hero3d.js; the page provides the stage, the list of areas and the caption. */
.hero{position:relative;background:radial-gradient(58% 64% at 74% 46%,#e4eef9 0%,rgb(228 238 249 / 0) 72%),linear-gradient(180deg,#fff 0%,#f6f9fd 100%)}
.hero-grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:16px;min-height:calc(100svh - var(--header-h));padding-block:18px 8px}
/* width:100% keeps the figure as wide as its column: on phones the single-line list of areas
   would otherwise make it as wide as all the chips together. */
.hero-campus{--stage-bleed:48px;position:relative;margin:0;min-width:0;width:100%;align-self:center}
.hero-stage{position:relative;width:calc(100% + var(--stage-bleed));margin-right:calc(-1 * var(--stage-bleed));aspect-ratio:16/10.5;max-height:min(600px,64svh)}
.hero-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline:none}
.hero-stage.is-pointer canvas{cursor:pointer}
/* Without WebGL the stage shows a still of the scene (rendered from hero3d.js itself). The
   loading state stays empty so the entrance of the 3D campus is not spoiled. */
.hero-stage[data-state=static]{background:url('assets/hero-campus.webp') center/contain no-repeat}
.hero-areas{margin-top:2px}
.hero-areas__title{margin-bottom:10px;font-size:13px;font-weight:600;color:var(--muted)}
.hero-area-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-area-list button{min-height:44px;padding:9px 16px;border:1px solid #cfdcea;border-radius:100px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .16s var(--ease-out)}
.hero-area-list button.is-hovered{border-color:var(--blue);color:var(--blue);box-shadow:0 6px 16px #146bd11a}@media (hover:hover) and (pointer:fine){.hero-area-list button:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 6px 16px #146bd11a}}.hero-area-list button:active{transform:scale(.97)}
.hero-area-list button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.hero-area-caption{min-height:78px;margin-top:14px;padding-left:16px;border-left:1px solid var(--gold)}
.hero-area-caption strong{display:block;font-size:15px;line-height:1.4}
.hero-area-caption p{max-width:540px;margin-top:2px;font-size:14px;line-height:1.6;color:var(--muted)}
.hero-area-caption a{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding-block:4px;font-size:14px;font-weight:700;color:var(--blue);border-bottom:1px solid currentColor}
.hero-area-caption a .icon{width:16px;height:16px}
@media(prefers-reduced-motion:no-preference){.hero-area-caption.is-updated{animation:caption-in .15s var(--ease-out)}@keyframes caption-in{from{opacity:.35}}.hero-campus{animation:soft-in 1s var(--ease) .15s both}}
/* Up to 1180 px the page gutter is 36 px: a 48 px bleed put the campus under the scrollbar. */
@media(max-width:1180px){.hero-campus{--stage-bleed:24px}}
.hero-area-caption__keys{display:block;margin-top:2px;font-size:13px;color:var(--muted)}

/* Greeting of the person who attends the open area (positioned by hero3d.js over their head). */
.hero-bubble{position:absolute;left:0;top:0;z-index:2;width:max-content;max-width:min(240px,46%);margin-top:-12px;padding:9px 13px;border-radius:12px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 10px 26px rgb(16 43 70 / .18);pointer-events:none;transform-origin:50% 100%}
.hero-bubble::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;border-radius:2px;background:inherit;transform:translateX(-50%) rotate(45deg)}
@media(prefers-reduced-motion:no-preference){.hero-bubble.is-in{animation:hero-bubble-in .3s var(--ease-out) .3s both}}
@keyframes hero-bubble-in{from{opacity:0;scale:.9}}
/* Serafina's lines: warm, like her fur, so they never read as a staff greeting. */
.hero-bubble--cat{z-index:3;max-width:min(230px,44%);background:#fff7e9;box-shadow:0 10px 26px rgb(16 43 70 / .18),inset 3px 0 0 var(--gold)}
@media(prefers-reduced-motion:no-preference){.hero-bubble--cat.is-in{animation-delay:0s}}

/* Card of the open area: who attends, what can be solved there and how to reach them. It follows
   the list of areas on narrow screens and floats over the right side of a wide stage. */
.area-card{--area-accent:var(--ink);position:relative;margin-top:14px;padding:14px 16px 16px;border-radius:16px;background:#fff;border:1px solid #dce6f0;border-top:3px solid var(--area-accent);box-shadow:0 18px 44px rgb(16 43 70 / .12)}
.area-card[data-area=ciae]{--area-accent:#f08a2c}
.area-card[data-area=control]{--area-accent:var(--blue)}
.area-card[data-area=pagos]{--area-accent:var(--gold)}
.area-card[data-area=academico]{--area-accent:#7a6fd0}
.area-card[data-area=admisiones]{--area-accent:#2fb47c}
.area-card[data-area=plataforma]{--area-accent:#2f7fe0}
.area-card[data-area=redes]{--area-accent:#e2574c}
.area-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.area-card__team{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--muted)}
.area-card__team::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--area-accent);flex:none}
/* Previous, next and close stay at the top of the card, always in view. */
.area-card__tools{display:flex;gap:2px;flex:none;margin-right:-8px}
.area-card__tool{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink);transition:background .2s,color .2s,transform .16s var(--ease-out)}.area-card__tool:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.area-card__tool:hover{background:var(--ice);color:var(--blue)}}
.area-card__tool .icon{width:18px;height:18px}
@media(pointer:coarse){.area-card__tool{width:44px;height:44px}}
.icon--back{transform:scaleX(-1)}
.area-card__title{margin-top:4px;font-family:inherit;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:0}
.area-card__text{margin-top:5px;font-size:13.5px;line-height:1.55;color:#42566e}
.area-card__label{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--ink)}
.area-card__tasks{list-style:none;margin:5px 0 0;padding:0;display:grid;gap:3px}
.area-card__tasks li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45;color:#2b4058}
.area-card__tasks li::before{content:'';position:absolute;left:2px;top:4px;width:11px;height:6px;border-left:2px solid var(--area-accent);border-bottom:2px solid var(--area-accent);transform:rotate(-45deg)}
.area-card__note{margin-top:8px;padding:7px 10px;border-radius:8px;background:var(--ice);font-size:12.5px;line-height:1.5;color:#42566e}
.area-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px}
.area-card__actions:empty{display:none}
.area-card__primary{min-height:44px;padding:10px 16px;border-radius:50px;font-size:13px}
.area-card__primary .icon{width:15px;height:15px}
.area-card__more{display:inline-flex;align-items:center;gap:8px;padding-block:4px;font-size:13.5px;font-weight:700;color:var(--blue);border-bottom:1px solid currentColor}
.area-card__more .icon{width:15px;height:15px}
.area-card__admissions{flex-basis:100%;padding:2px 0;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;text-decoration:underline;text-underline-offset:3px}
.area-card__admissions:hover{color:var(--ink)}
/* Below the list (narrow screens) the card already names the area: the caption stays only for
   screen readers, which announce each new area through it. */
.hero-campus.has-card:not(.is-card-overlay) .hero-area-caption{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:650px){.hero-bubble{max-width:62%;padding:7px 11px;font-size:12px}}
.hero-campus.is-card-overlay .area-card{position:absolute;z-index:3;top:12px;right:calc(12px - var(--stage-bleed));width:min(320px,44%);max-height:calc(var(--stage-h,540px) - 24px);margin:0;overflow:auto;overscroll-behavior:contain}
/* On a short stage the card scrolls, and its way to ask for help stays pinned at the bottom. */
.hero-campus.is-card-overlay .area-card__actions{position:sticky;bottom:-16px;margin:10px -16px -16px;padding:10px 16px 14px;background:#fff;border-top:1px solid #e3ebf3}
@media(prefers-reduced-motion:no-preference){.area-card.is-updated{animation:area-card-in .24s var(--ease-out)}}
@keyframes area-card-in{from{opacity:0;translate:0 8px}}

/* Location: Google's official map of the institution. */
.location{background:var(--ice);padding-block:90px}
.location-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center}
.location-map{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#dfe8f1;box-shadow:0 18px 50px #102b4614}
.location-map iframe{display:block;width:100%;aspect-ratio:4/3;border:0}
/* The map takes keyboard focus (to pan it with the arrows): its frame shows where focus is
   (has-focus comes from app.js, since focus inside the iframe does not reach :focus-within). */
.location-map:focus-within,.location-map.has-focus{outline:3px solid var(--gold);outline-offset:4px}
.location-copy h2{font-size:clamp(40px,4vw,58px);line-height:1.08}
.location-copy>p:not(.section-label){max-width:440px;margin-top:22px;font-size:16px;line-height:1.8;color:#42566e}
.location-address{margin-top:26px;padding-left:16px;border-left:1px solid var(--gold);font-style:normal;font-size:17px;line-height:1.7;color:var(--ink)}
.location-actions{margin-top:28px}

/* Institution: who runs ODM, its rector, dated milestones with their sources, and an offer for
   organizations (research/institucion-odm.md). */
.institution{background:#fff}
/* After the (also white) validity section, a rule replaces the doubled white space. */
.validity+.institution{padding-top:0}
.validity+.institution .institution-wrap{padding-top:90px;border-top:1px solid var(--line)}
@media(max-width:650px){.validity+.institution .institution-wrap{padding-top:60px}}
.institution-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.institution h2{font-size:clamp(40px,4.2vw,60px);line-height:1.08}
.institution-copy>p:not(.section-label){max-width:520px;margin-top:22px;font-size:16px;line-height:1.8;color:#42566e}
.institution-copy>.institution-areas{margin-top:28px;font-size:13px;line-height:1.7;color:var(--muted)}
.institution-rector-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-block:4px;font-size:14px;font-weight:700;color:var(--blue);border-bottom:1px solid currentColor}
.institution-rector-link .icon{width:16px;height:16px}
.milestones{list-style:none;margin:0;padding:0}
.milestones li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.milestones li:first-child{padding-top:4px}
.milestone-year{font:400 34px/1 var(--display);color:var(--blue)}
.milestones h3{font-size:16px;line-height:1.35}
.milestones p{margin-top:6px;font-size:13.5px;line-height:1.6;color:#42566e}
.milestones .milestone-sources{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.milestone-sources a{font-size:13px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* Across the full width under the copy and the milestones, with its offer beside the call. It sits
   outside .institution-grid so the sticky copy, bounded by that grid, never slides over it. */
.organizations{margin-top:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 56px;align-items:center;padding:34px 36px;border-radius:16px;background:var(--ice)}
.organizations h3{font-size:20px}
.organizations p{margin-top:8px;font-size:14px;line-height:1.7;color:#42566e}
.organizations-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.organizations-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.6;color:#42566e}
.organizations-list li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.organizations-list strong{color:var(--ink)}
.organizations .button{margin-top:20px}
/* Organizations that have trusted ODM, with the logos and names shown on ODM Universidad's own site
   (design/source-images/aliados/FUENTES-LOGOS.json). The name stays visible: two logos are icons only. */
.organizations-clients{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--line)}
.organizations .organizations-clients__title{margin-top:0;font-size:14px;font-weight:700;color:var(--ink)}
.organizations-clients ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0}
.organizations-clients li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:112px;padding:14px 10px;border:1px solid #d9e5f0;border-radius:12px;background:#fff;text-align:center}
/* --logo-h (inline, per logo) gives every logo about the same area, so wide wordmarks and tall emblems weigh alike.
   Each logo sits centred in the same 70px band at the top of its card, so the names below line up across a row. */
.organizations-clients img{display:block;width:auto;max-width:100%;height:var(--logo-h,52px);margin-block:calc((70px - var(--logo-h,52px)) / 2);object-fit:contain}
.organizations-clients li:not(.organizations-clients__text){justify-content:flex-start;padding-top:18px}
.organizations-clients span{font-size:12px;font-weight:600;line-height:1.35;color:var(--ink)}
/* An ally without a logo on file: its name, linked to its own page, in place of the mark. */
.organizations-clients__text a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);text-decoration:none}
.organizations-clients__text strong{font:400 21px/1.15 var(--display);color:var(--ink)}
.organizations-clients__text a:hover strong{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.organizations-clients ul{grid-template-columns:1fr 1fr}}
.organizations .organizations-clients__source{margin-top:10px;font-size:12px;color:var(--muted)}
.organizations-clients__source a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* Photographs of Innova Calidad's sede (scripts/make-images.py), credited in the note below them. */
.organizations-photos{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.organizations-photos figure{margin:0}
.organizations-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:#dfe8f1}
.organizations-photos figcaption{margin-top:7px;font-size:13px;font-weight:700;color:var(--ink)}
.organizations .organizations-photos-note{grid-column:1/-1;margin-top:0;font-size:12px;color:var(--muted)}
@media(max-width:650px){.organizations-photos{grid-template-columns:1fr 1fr}.organizations-photos figure:first-child{grid-column:1/-1}}
.location-photo{max-width:440px;margin:24px 0 0}
.location-photo img{display:block;width:100%;height:auto;aspect-ratio:560/258;object-fit:cover;border-radius:12px;background:#dfe8f1}
.location-photo figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
@media(max-width:900px){.location-photo{max-width:none}}
/* The milestones run longer than the copy: the copy stays in view. */
@media(min-width:901px){.institution-copy{position:sticky;top:var(--sticky-top,calc(var(--header-h) + 28px))}}
@media(max-width:900px){.institution-grid{grid-template-columns:1fr;gap:44px}.organizations{margin-top:44px;grid-template-columns:1fr}}
@media(max-width:650px){.institution h2{font-size:40px}.milestones li{grid-template-columns:64px minmax(0,1fr);gap:12px}.milestone-year{font-size:28px}.organizations{padding:24px 20px}}

.footer-institution address{margin-top:15px;font-style:normal;font-size:12px;line-height:1.9}
@media(max-width:900px){
  .values-strip>p{padding-left:25px}
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-campus{--stage-bleed:0px}
  .hero-stage{aspect-ratio:16/10.5;max-height:none}
  .location-grid{grid-template-columns:1fr;gap:34px}
  .location-copy{order:-1}
}
@media(max-width:650px){
  .section-label{font-size:13px}
  .values-strip>p{padding-left:12px}
  .program-row{grid-template-columns:minmax(0,1fr) 35px;gap:4px 15px}
  .program-code{grid-column:1;grid-row:1;font-size:12px}
  .program-title{grid-column:1;grid-row:2}
  .program-arrow{grid-column:2;grid-row:1/span 2}
  .hero-stage{aspect-ratio:16/9.5;margin-inline:-14px;width:calc(100% + 28px)}
  /* On phones the areas scroll sideways instead of stacking four rows of chips. */
  .hero-area-list{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scroll-padding-inline:20px;scroll-snap-type:x proximity;scrollbar-width:none}
  .hero-area-list::-webkit-scrollbar{display:none}
  .hero-area-list li{flex:none;scroll-snap-align:start}
  .location{padding-block:65px}
  .location-copy h2{font-size:43px}
  .location-map iframe{aspect-ratio:1/1}
  .footer-institution address{font-size:13px}
}

/* "Volver arriba" uses the drawn arrow of the icon set, turned upward. */
.back-to-top{display:inline-flex;align-items:center;gap:6px}
.back-to-top .icon{width:14px;height:14px;transform:rotate(180deg)}

/* Agreements on phones: each programme becomes a stacked row with labelled facts, so the validity
   date stays in view instead of behind a sideways scroll. Explicit roles keep the table semantics. */
@media(max-width:650px){
  .table-scroll{overflow:visible}
  .agreement-table{min-width:0}
  .agreement-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .agreement-table tbody,.agreement-table tr,.agreement-table td{display:block}
  .agreement-table tr{display:grid;grid-template-columns:64px 72px minmax(0,1fr);gap:14px 20px;padding:18px 16px;border-top:1px solid var(--line)}
  .agreement-table tbody tr:first-child{border-top:0}
  .agreement-table td,.agreement-table td+td{padding:0;border:0}
  .agreement-table td:first-child{grid-column:1/-1}
  .agreement-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12px;font-weight:400;color:var(--muted)}
}

/* Campus mode (#campus): the campus of the cover as its own page in the same place. The stage
   grows from the cover to the window below the header (a view transition: the stage and the list
   of areas travel, the bar and the card arrive after them); the scene keeps running. The figure is
   a grid item centred on the cover: place-self:stretch lets the fixed layer fill its insets. */
.campus-bar{display:none}
.campus-hint--touch{display:none}
@media (pointer:coarse){.campus-hint--fine{display:none}.campus-hint--touch{display:inline}}
.campus-enter{position:absolute;z-index:3;top:14px;right:calc(14px - var(--stage-bleed));display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;border:1px solid #cfdcea;border-radius:100px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 8px 20px rgb(16 43 70 / .1);transition:border-color .2s,color .2s,box-shadow .2s,transform .16s var(--ease-out)}
.campus-enter .icon{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.campus-enter:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 10px 24px rgb(20 107 209 / .16)}}
.campus-enter:active{transform:scale(.97)}
#hero-stage{view-transition-name:campus-stage}
#hero-area-list{view-transition-name:campus-dock}

html.is-campus{overflow:hidden;overscroll-behavior:none}
html.is-campus .site-header{border-bottom-color:var(--line)}
html.is-campus .hero-campus{position:fixed;z-index:30;top:var(--campus-top,72px);left:0;right:0;bottom:0;width:auto;margin:0;place-self:stretch;animation:none;background:radial-gradient(60% 62% at 56% 50%,#e6effa 0%,rgb(230 239 250 / 0) 72%),linear-gradient(180deg,#fbfdff 0%,#edf3f9 100%)}
html.is-campus .hero-stage{position:absolute;inset:0;width:auto;height:auto;max-height:none;aspect-ratio:auto;margin:0}
/* A light veil under the title and tools keeps them legible over the scene. */
html.is-campus .hero-campus::before{content:'';position:absolute;z-index:4;top:0;left:0;right:0;height:150px;background:linear-gradient(180deg,#fbfdff 34%,rgb(251 253 255 / 0));pointer-events:none}
html.is-campus .hero-stage.is-explore{cursor:grab}
html.is-campus .hero-stage:focus-visible{outline:3px solid var(--blue);outline-offset:-6px}
html.is-campus .hero-stage.is-dragging{cursor:grabbing}
html.is-campus .campus-enter{display:none}
html.is-campus .campus-bar{view-transition-name:campus-bar;position:absolute;z-index:5;top:20px;left:28px;right:28px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}
html.is-campus .campus-bar>*{pointer-events:auto}
.campus-bar__name{font:400 30px/1.1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.campus-bar__hint{margin-top:6px;font-size:13px;color:var(--muted)}
.campus-bar__tools{display:flex;align-items:center;gap:8px}
.campus-tool{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cfdcea;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 6px 16px rgb(16 43 70 / .08);transition:border-color .2s,color .2s,transform .16s var(--ease-out)}
.campus-tool .icon{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.campus-tool:hover{border-color:var(--blue);color:var(--blue)}}
.campus-tool:active,.campus-exit:active{transform:scale(.96)}
.campus-exit{display:inline-flex;align-items:center;gap:8px;height:44px;margin-left:4px;padding:0 18px 0 13px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;box-shadow:0 8px 20px rgb(16 43 70 / .18);transition:background .2s,transform .16s var(--ease-out)}
.campus-exit .icon{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.campus-exit:hover{background:#0a1f35}}
html.is-campus .hero-areas{margin:0}
html.is-campus .hero-areas__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The list of areas docks at the bottom of the campus. */
html.is-campus .hero-area-list{position:absolute;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-wrap:nowrap;gap:4px;width:max-content;max-width:calc(100% - 56px);margin:0;padding:6px;overflow-x:auto;scrollbar-width:none;background:#fff;border:1px solid #dce6f0;border-radius:18px;box-shadow:0 18px 40px rgb(16 43 70 / .14),0 2px 6px rgb(16 43 70 / .06)}
html.is-campus .hero-area-list::-webkit-scrollbar{display:none}
/* Controls and the campus itself are not text: a long press neither selects nor opens the callout. */
.hero-area-list button,.campus-enter,.campus-tool,.campus-exit,.area-card__tool,.program-tabs button,html.is-campus .hero-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.is-campus .hero-area-list{overscroll-behavior-x:contain}
html.is-campus .hero-area-list li{flex:none}
html.is-campus .hero-area-list button{min-height:40px;padding:8px 14px;border-color:transparent;box-shadow:none;white-space:nowrap}
html.is-campus .hero-area-list button.is-hovered{border-color:transparent;background:var(--ice);box-shadow:none}@media (hover:hover) and (pointer:fine){html.is-campus .hero-area-list button:hover{border-color:transparent;background:var(--ice);box-shadow:none}}
html.is-campus .hero-area-list button[aria-pressed=true]{background:var(--ink);color:#fff}
/* What the pointer is over, where its card opens (the upper left belongs to ODM's accounts). */
html.is-campus .hero-area-caption{position:absolute;z-index:5;top:96px;right:28px;width:min(360px,30%);min-height:0;margin:0;padding:11px 15px 12px;border:1px solid #dce6f0;border-radius:12px;background:#fff;box-shadow:0 10px 24px rgb(16 43 70 / .08)}
/* With an area open its card says it all: the caption stays for screen readers only. */
html.is-campus .hero-campus.has-card .hero-area-caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;box-shadow:none}
html.is-campus .hero-campus.is-card-overlay .area-card{view-transition-name:campus-card;top:96px;right:28px;width:min(340px,34%);max-height:calc(100% - 96px - 96px)}
html.is-campus .hero-campus.is-card-sheet .area-card{view-transition-name:campus-card;position:absolute;z-index:5;left:12px;right:12px;bottom:76px;max-height:min(50%,440px);margin:0;overflow:auto;overscroll-behavior:contain;box-shadow:0 -12px 32px rgb(16 43 70 / .14)}
html.is-campus .hero-campus.is-card-sheet .area-card__actions{position:sticky;bottom:-16px;margin:10px -16px -16px;padding:10px 16px 14px;background:#fff;border-top:1px solid #e3ebf3}
@media(max-width:700px){
  html.is-campus .campus-bar{top:12px;left:16px;right:12px}
  .campus-bar__name{font-size:20px}
  .campus-bar__hint{font-size:12px}
  .campus-exit{padding:0 14px 0 11px;font-size:13px}
  html.is-campus .hero-area-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.is-campus .hero-area-list{left:12px;right:12px;bottom:12px;transform:none;width:auto;max-width:none;border-radius:16px}
}
@media (pointer:coarse) and (max-width:700px){.campus-tool[data-campus-zoom]{display:none}}
@media(max-width:440px){.campus-exit__more{display:none}}
/* On phones the stage is short: the way into the campus sits under it, full width. */
@media(max-width:700px){.campus-enter{position:static;justify-content:center;width:100%;min-height:48px;margin:4px 0 14px;box-shadow:none}}

/* The view transition: the stage and the list travel (the stage shows the campus at its new
   size from the start, so it opens like a window), the bar and the card arrive after them.
   Strong ease-out both ways (Emil Kowalski's curve); leaving (260 ms) is quicker than arriving
   (460 ms). Without view transitions, or with reduced motion, the change is immediate. */
::view-transition-group(campus-stage),::view-transition-group(campus-dock){animation-duration:.46s;animation-timing-function:var(--ease-out)}
::view-transition-old(campus-stage){animation:none;opacity:0}
::view-transition-new(campus-stage){animation:none;width:100%;height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-new(campus-bar){animation:campus-bar-in .3s var(--ease-out) .12s both}
::view-transition-new(campus-card){animation:campus-card-in .3s var(--ease-out) .16s both}
::view-transition-old(campus-bar),::view-transition-old(campus-card){animation:campus-fade-out .16s ease both}
html[data-campus-vt=out]::view-transition-group(campus-stage),html[data-campus-vt=out]::view-transition-group(campus-dock){animation-duration:.26s}
@keyframes campus-bar-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes campus-card-in{from{opacity:0;transform:translateX(18px)}}
@keyframes campus-fade-out{to{opacity:0}}

/* Admisiones guide (campus card and #requisitos): the level, a checklist to tick, the steps.
   Written for students who skim: one line per document in bold, its condition below. */
.admission-guide__level{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;border:0}
.admission-guide__level legend{width:100%;margin-bottom:6px;padding:0;font-size:12.5px;font-weight:700;color:var(--ink)}
.admission-guide__level label{position:relative}
.admission-guide__level input{position:absolute;opacity:0;pointer-events:none}
.admission-guide__level span{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid #cfdcea;border-radius:100px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s,border-color .2s,color .2s,transform .16s var(--ease-out)}
.admission-guide__level span:active{transform:scale(.97)}
.admission-guide__level input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.admission-guide__level input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.admission-guide p{max-width:none;margin:0;font-size:inherit;line-height:inherit;color:inherit}
.admission-guide .admission-guide__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--ink)}
.admission-guide__count{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.admission-guide.is-complete .admission-guide__count{color:#1f8a5b}
.admission-docs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.admission-docs label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px solid #e3ebf3;border-radius:10px;background:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.admission-docs input{width:18px;height:18px;margin:1px 0 0;accent-color:#1f8a5b}
.admission-docs strong{display:block;font-size:13.5px;line-height:1.35;color:var(--ink)}
.admission-docs small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:#42566e}
.admission-docs input:checked+span strong{color:#1f8a5b}
.admission-docs label:has(input:checked){background:#f2faf6;border-color:#cfe9dc}
@media (hover:hover) and (pointer:fine){.admission-docs label:hover{border-color:#bcd0e4}}
.admission-howto{list-style:none;margin:6px 0 0;padding:0;counter-reset:howto;display:grid;gap:8px}
.admission-howto li{position:relative;padding-left:30px;counter-increment:howto}
.admission-howto li::before{content:counter(howto);position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--area-accent,var(--ink));color:#fff;font-size:11.5px;font-weight:700}
.admission-howto strong{display:block;font-size:13.5px;line-height:1.35;color:var(--ink)}
.admission-howto span{display:block;margin-top:1px;font-size:12.5px;line-height:1.5;color:#42566e}
.admission-howto a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.admission-guide .admission-guide__note{margin-top:10px;padding:7px 10px;border-radius:8px;background:var(--ice);font-size:12.5px;line-height:1.5;color:#42566e}
/* On the page the guide sits in two columns: the checklist and the steps. */
.admission-docs-block{margin-top:56px;padding-top:40px;border-top:1px solid #b8cbde}
.admission-docs-block__intro h3{font:400 clamp(26px,2.6vw,34px)/1.15 var(--display);color:var(--ink)}
.admission-docs-block__intro p{max-width:560px;margin-top:8px;font-size:15px;line-height:1.7;color:#42566e}
.admission-docs-block__intro a,.admission-steps a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.admission-docs-block .admission-guide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"level level" "doclabel howlabel" "docs how" "docs note";grid-template-rows:auto auto auto 1fr;column-gap:40px;margin-top:18px}
.admission-docs-block .admission-guide__level{grid-area:level}
.admission-docs-block .admission-guide__label:nth-of-type(1){grid-area:doclabel}
.admission-docs-block .admission-docs{grid-area:docs}
.admission-docs-block .admission-guide__label:nth-of-type(2){grid-area:howlabel}
.admission-docs-block .admission-howto{grid-area:how;align-self:start}
.admission-docs-block .admission-guide__note{grid-area:note;align-self:start}
.admission-docs--static{list-style:disc;padding-left:20px;font-size:14px;line-height:1.7;color:#2b4058}
@media(max-width:820px){.admission-docs-block .admission-guide{display:block}.admission-docs-block{margin-top:40px;padding-top:32px}}

/* Control Escolar: services and their costs; each row opens its conditions. */
.area-card__label small{font-weight:500;color:var(--muted)}
.school-services__list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid #e3ebf3}
.school-services__list>li{border-bottom:1px solid #e3ebf3}
.school-services summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "days price";column-gap:10px;padding:8px 2px;cursor:pointer;list-style:none}
.school-services summary::-webkit-details-marker{display:none}
.school-services__name{grid-area:name;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.school-services__name em{font-style:normal;font-weight:600;color:var(--muted)}
.school-services__days{grid-area:days;font-size:12px;color:var(--muted)}
.school-services__price{grid-area:price;align-self:center;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.school-services details ul{margin:0 0 10px;padding-left:18px;font-size:12.5px;line-height:1.5;color:#42566e}
.school-services details[open] summary .school-services__name{color:var(--blue)}
.school-services__note{margin-top:8px;font-size:12.5px;line-height:1.5;color:#42566e}

/* CIAE: ODM's official accounts. */
.area-social__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.area-social__list a{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:7px 10px;border:1px solid #e3ebf3;border-radius:10px;color:var(--ink);transition:border-color .2s,background .2s,transform .16s var(--ease-out)}
.area-social__list a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.area-social__list a:hover{border-color:var(--area-accent);background:#fff8f1}}
.area-social__list .icon{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--ice);color:var(--ink)}
.area-social__list strong{display:block;font-size:13.5px;line-height:1.3}
.area-social__list small{display:block;font-size:12.5px;color:var(--muted)}

/* The rector and his CV: the face and the name first, then his words, three credentials and the
   CV in short groups (a few lines each, the strongest first), what organizations he has worked
   with, and the sources. On wide screens the portrait stays in view beside the CV (when the window
   is tall enough to hold it); on phones it shrinks beside his name so the CV comes right after. */
.rector-profile{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;margin-top:96px;padding-top:72px;border-top:1px solid var(--line)}
@media(min-width:761px) and (min-height:820px){.rector-profile__aside{position:sticky;top:calc(var(--header-h) + 28px)}}
.rector-profile__aside{align-self:start}
.rector-profile__photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;background:#dfe8f1;outline:1px solid rgba(16,43,70,.08);outline-offset:-1px}
.rector-profile__id{margin-top:24px}
.rector-profile__id .section-label{margin-bottom:10px}
.rector-profile h3{font:400 30px/1.15 var(--display);letter-spacing:0;color:var(--ink);text-wrap:balance}
.rector-profile__role{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.rector-profile__focus{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.rector-profile__focus li{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:600;line-height:1.5;color:#42566e}
.rector-profile__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:18px}
.rector-profile__links a,.rector-profile__next{display:inline-flex;align-items:center;gap:6px;padding-block:3px;font-size:14px;font-weight:700;color:var(--blue);border-bottom:1px solid currentColor}
.rector-profile__links .icon,.rector-profile__next .icon{width:14px;height:14px}
.rector-profile__quote{margin:0}
.rector-profile__quote p{max-width:34ch;font:italic 400 clamp(24px,2.3vw,31px)/1.38 var(--display);color:var(--ink);text-wrap:pretty}
.rector-profile__quote p::before{content:"";display:block;width:32px;height:1px;margin:6px 0 18px;background:var(--gold)}
.rector-creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:36px 0 0;padding:0;list-style:none}
.rector-creds li{padding:18px 18px 16px;border:1px solid #dce6f0;border-radius:14px;background:var(--ice)}
.rector-creds strong{display:block;font:400 23px/1.15 var(--display);color:var(--ink)}
.rector-creds span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.rector-cv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;margin-top:44px}
.rector-cv__group--wide{grid-column:1/-1}
.rector-cv h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.rector-cv h4::before{content:"";width:18px;height:1px;background:var(--gold)}
.rector-cv ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rector-cv li strong{display:block;font-size:15px;line-height:1.45;color:var(--ink)}
.rector-cv li span{display:block;margin-top:2px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.rector-cv li a,.rector-cv__sources a{color:var(--blue);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.rector-cv .rector-cv__orgs{display:flex;flex-wrap:wrap;gap:8px}
.rector-cv__orgs li{padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:600;color:var(--ink)}
.rector-cv__sources{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.7;color:var(--muted)}
.rector-profile__next{margin-top:24px}
@media(max-width:1000px){.rector-profile{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:40px}.rector-creds{grid-template-columns:1fr}.rector-creds li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:12px 16px}.rector-creds span{margin-top:0}}
@media(max-width:760px){
  .rector-profile{grid-template-columns:1fr;gap:28px;margin-top:64px;padding-top:48px}
  .rector-profile__aside{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 16px;align-items:center}
  .rector-profile__photo{border-radius:12px}
  .rector-profile__id{margin-top:0}
  .rector-profile__focus,.rector-profile__links{grid-column:1/-1}
  .rector-profile h3{font-size:24px}
  .rector-creds{margin-top:28px;gap:8px}
  .rector-creds strong{font-size:20px}
  .rector-cv{grid-template-columns:1fr;gap:28px;margin-top:32px}
}
/* Plataforma: ODM's two accesses, each row a link to its sign-in page. */
.area-access__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.area-access__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px 8px 12px;border:1px solid #e3ebf3;border-radius:10px;color:var(--ink);transition:border-color .2s,background .2s,transform .16s var(--ease-out)}
.area-access__list a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.area-access__list a:hover{border-color:var(--area-accent);background:#f3f8ff}}
.area-access__logo{display:block;max-width:100%;height:auto;margin:3px 0 5px}
.area-access__list small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.area-access__go{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.area-access__go .icon{width:15px;height:15px;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.area-access__list a:hover .icon{transform:translate(2px,-2px)}}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Mobile viewport: let backgrounds reach the edges while controls clear the camera and home bar. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--viewport-height:100vh;--usable-height:calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom))}
@supports(height:100dvh){:root{--viewport-height:100dvh}}
body{padding-top:calc(var(--header-h) + var(--safe-top));padding-left:var(--safe-left);padding-right:var(--safe-right)}
html{scroll-padding-top:calc(88px + var(--safe-top))}
.site-header{padding:var(--safe-top) var(--safe-right) 0 var(--safe-left)}
.site-footer{padding-bottom:var(--safe-bottom)}
dialog{inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 24px);overscroll-behavior:contain}
@media screen{html:has(dialog[open]){overflow:hidden;overscroll-behavior:none}}
html.is-campus .hero-campus{height:calc(var(--viewport-height) - var(--campus-top,72px));bottom:auto}
html.is-campus .campus-bar{left:calc(28px + var(--safe-left));right:calc(28px + var(--safe-right))}
html.is-campus .hero-area-list{bottom:calc(20px + var(--safe-bottom));max-width:calc(100% - 56px - var(--safe-left) - var(--safe-right))}
html.is-campus .hero-campus.is-card-overlay .area-card{right:calc(28px + var(--safe-right));max-height:calc(100% - 192px - var(--safe-bottom))}
html.is-campus .hero-campus.is-card-sheet .area-card{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));bottom:calc(80px + var(--safe-bottom));max-height:min(50%,440px,calc(100% - 230px - var(--safe-bottom)))}
@media(max-width:700px){
  html.is-campus .campus-bar{left:calc(16px + var(--safe-left));right:calc(12px + var(--safe-right))}
  html.is-campus .hero-area-list{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));max-width:none}
}
@media(max-width:650px){
  html{scroll-padding-top:calc(74px + var(--safe-top))}
  .header-inner nav{max-height:calc(var(--usable-height) - var(--header-h));overflow-y:auto;overscroll-behavior:contain;padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right))}
}
@media(pointer:coarse){
  .dialog-close{width:44px;height:44px}
  html.is-campus .hero-area-list button{min-height:44px}
  .area-card__tool{min-width:44px;min-height:44px}
  dialog input,dialog select,dialog textarea{font-size:16px}
}
@media(pointer:coarse) and (prefers-reduced-motion:no-preference){html.is-campus .campus-bar{animation:campus-bar-in .24s var(--ease-out)}}
@media(pointer:coarse) and (max-height:700px) and (orientation:portrait){
  .campus-bar__hint{display:none}
  .campus-bar__name{font-size:18px}
}
/* Landscape phones need a readable scrolling card; a sticky CTA must not cover its content. */
@media(pointer:coarse) and (max-height:500px) and (orientation:landscape){
  :root{--header-h:56px}
  html{scroll-padding-top:calc(68px + var(--safe-top))}
  .site-header .header-inner,.site-header.scrolled .header-inner{height:56px}
  .site-header .brand img,.site-header.scrolled .brand img{width:130px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;width:44px;height:44px;background:white;border:1px solid var(--line);border-radius:50%}
  .menu-toggle span{width:18px;height:1px;background:var(--ink);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .header-inner nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(var(--usable-height) - 56px);overflow-y:auto;overscroll-behavior:contain;background:white;padding:8px max(24px,var(--safe-right)) 12px max(24px,var(--safe-left));border-bottom:1px solid var(--line);box-shadow:0 20px 25px #102b4610}
  .header-inner nav.open{display:flex;flex-direction:column;gap:0}
  .header-inner nav a{font-size:15px;padding:10px 0;min-height:44px}
  html.is-campus .site-header{display:none}
  html.is-campus .hero-campus{top:0;height:var(--viewport-height)}
  html.is-campus .campus-bar{top:calc(8px + var(--safe-top));left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right))}
  .campus-bar__name{font-size:20px;line-height:44px}
  .campus-bar__hint{display:none}
  .campus-exit__more{display:none}
  .campus-tool[data-campus-zoom]{display:none}
  html.is-campus .hero-area-list{bottom:calc(8px + var(--safe-bottom));max-width:calc(100% - 32px - var(--safe-left) - var(--safe-right));padding:4px}
  html.is-campus .hero-campus.is-card-overlay .area-card{top:calc(62px + var(--safe-top));right:calc(16px + var(--safe-right));width:min(360px,43%);max-height:calc(100% - 134px - var(--safe-bottom) - var(--safe-top))}
  html.is-campus .hero-campus .area-card__actions{position:static;margin:12px 0 0;padding:12px 0 0}
  .area-card__head{position:sticky;top:-14px;z-index:2;background:#fff;padding-block:6px}
}
@media(pointer:coarse) and (max-height:500px) and (orientation:landscape) and (max-width:700px){
  .area-card__team{font-size:11px;line-height:1.35;gap:0}
  .area-card__team::before{display:none}
  .area-card__title{font-size:17px}
}