@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --navy2:#102d3d; --ink:#17242d; --red:#d71920; --ash:#edf0f2; --line:#ccd5da; --muted:#657580; --gold:#e7b63f; --display:"Archivo Black",sans-serif; --body:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:var(--body); }
a { color:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:100; padding:.8rem; background:#fff; }
.topbar { min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem clamp(1.25rem,5vw,5.5rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { min-width:0; display:flex; align-items:center; gap:1rem; text-decoration:none; }
.brand img { width:88px; max-height:62px; object-fit:contain; }
.brand .una-logo { width:115px; }
.brand-divider { width:1px; height:52px; background:rgba(255,255,255,.4); }
.brand strong { max-width:430px; font-family:var(--display); font-size:.72rem; letter-spacing:.08em; line-height:1.35; }
.topbar nav { display:flex; align-items:center; gap:1.6rem; font-size:.78rem; font-weight:700; }
.topbar nav a { text-decoration:none; }
.topbar nav a:hover { color:#ff5d62; }
.portal-link { padding:.75rem 1rem; border:1px solid rgba(255,255,255,.48); }
main { max-width:1900px; margin:auto; background:#fff; }
.hero { position:relative; min-height:700px; display:grid; grid-template-columns:1.05fr .65fr; align-items:end; gap:5rem; overflow:hidden; padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem); color:#fff; }
.hero-image,.hero-shade,.hero-grid { position:absolute; inset:0; }
.hero-image { background:url("hero-turrialba.jpg") center 48%/cover no-repeat; transform:scale(1.035); }
.hero-shade { background:linear-gradient(90deg,rgba(3,18,29,.96) 0%,rgba(4,23,36,.78) 50%,rgba(5,24,36,.5)),linear-gradient(0deg,rgba(3,17,27,.68),transparent 60%); }
.hero-grid { opacity:.14; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:100px 100px; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.hero-copy,.hero-intro { position:relative; z-index:1; }
.eyebrow { margin:0 0 1rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2,h3 { font-family:var(--display); }
h1 { margin:0; font-size:clamp(4rem,8vw,8.8rem); line-height:.82; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-intro { max-width:520px; padding-bottom:1rem; font-size:1.08rem; line-height:1.7; }
.external-badge { display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; padding:.55rem .8rem; color:#111; background:var(--gold); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.hero-intro a { display:flex; justify-content:space-between; margin-top:2rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.45); font-weight:700; text-decoration:none; }
.notice { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1.5rem clamp(1.25rem,6vw,7rem); color:#fff; background:#9f151a; }
.notice strong { color:#ffd85f; font-size:.72rem; letter-spacing:.15em; }
.notice p { margin:0; line-height:1.55; }
.notice a { font-weight:700; white-space:nowrap; }
.scenarios,.interpret,.source { padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem); }
.section-head { display:grid; grid-template-columns:1fr .7fr; gap:5rem; align-items:end; margin-bottom:4rem; }
.section-head h2,.interpret-title h2,.source h2 { margin:.2rem 0 0; font-size:clamp(2.7rem,5vw,6rem); line-height:.92; }
.section-head>p { margin:0; color:var(--muted); line-height:1.75; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.scenario-card { position:relative; min-height:480px; display:flex; flex-direction:column; padding:2.5rem; border-right:1px solid var(--line); text-decoration:none; transition:color .25s,background .25s,transform .25s; }
.scenario-card:last-child { border:0; }
.scenario-card:hover { z-index:1; color:#fff; background:var(--red); transform:translateY(-8px); box-shadow:0 20px 45px rgba(7,29,45,.18); }
.scenario-card .number { position:absolute; right:2rem; top:1.6rem; color:#d8dfe2; font-family:var(--display); font-size:2.4rem; }
.scenario-card small { margin-bottom:auto; color:var(--red); font-weight:800; letter-spacing:.13em; }
.scenario-card h3 { max-width:400px; margin:2rem 0 1rem; font-size:clamp(1.8rem,3vw,3.2rem); line-height:1; }
.scenario-card p { color:var(--muted); line-height:1.6; }
.scenario-card b { margin-top:2rem; font-size:.8rem; }
.scenario-card:hover small,.scenario-card:hover p { color:rgba(255,255,255,.8); }
.interpret { display:grid; grid-template-columns:.72fr 1.28fr; gap:7rem; background:var(--ash); }
.interpret-title { position:sticky; top:2rem; align-self:start; }
.interpret-list article { display:grid; grid-template-columns:60px 1fr; gap:1.5rem; padding:1.7rem 0; border-top:1px solid var(--line); }
.interpret-list article>span { color:var(--red); font-family:var(--display); }
.interpret-list h3 { margin:0 0 .7rem; font-size:1.25rem; }
.interpret-list p { margin:0; color:var(--muted); line-height:1.7; }
.source { display:grid; grid-template-columns:1fr .8fr; gap:7rem; color:#fff; background:var(--navy); }
.source>div>p:not(.eyebrow) { max-width:700px; color:#aebdc5; line-height:1.75; }
.source-links { display:grid; align-content:center; }
.source-links a { display:flex; justify-content:space-between; padding:1.3rem 0; border-bottom:1px solid #38515f; font-weight:700; text-decoration:none; }
.source-links a:hover { color:#ff555b; }
footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:2.5rem clamp(1.25rem,6vw,7rem); color:#bac6cc; background:#04131d; font-size:.8rem; }
.footer-brand { display:flex; align-items:center; gap:1.2rem; }
.footer-brand img { width:88px; max-height:52px; object-fit:contain; }
footer p { line-height:1.6; }
footer a { color:#fff; font-weight:700; }
@media (max-width:1100px) { .topbar nav>a:not(.portal-link),.brand strong { display:none; } .hero,.section-head,.interpret,.source { grid-template-columns:1fr; } .scenario-grid { grid-template-columns:1fr; } .scenario-card { min-height:330px; border-right:0; border-bottom:1px solid var(--line); } .interpret-title { position:static; } .notice { grid-template-columns:1fr; gap:.8rem; } .notice a { white-space:normal; } }
@media (max-width:700px) { .topbar { min-height:84px; } .brand img { width:70px; } .brand .una-logo,.brand-divider { display:none; } .portal-link { padding:.6rem .7rem; font-size:.7rem; } .hero { min-height:650px; gap:2.5rem; } h1 { font-size:clamp(3.1rem,15vw,5.2rem); } footer { grid-template-columns:1fr; } }