/* Eventos Boletera CUAAD: shared visual identity with the public Hub CTA.
   Tokens sampled from the deployed shell.css; no external fonts or libraries. */
:root {
  --cta-ink:#002d4b; --cta-slate:#4b5a7b; --cta-accent:#785177;
  --cta-paper:#fbfbfa; --cta-surface:#fff; --cta-line:#d9dde2;
  --cta-muted:#53616d; --cta-soft:#f1f4f7;
  --navy:var(--cta-ink); --green:var(--cta-slate); --gold:var(--cta-accent);
  --paper:var(--cta-paper); --ink:var(--cta-ink); --muted:var(--cta-muted);
  --line:var(--cta-line); --white:var(--cta-surface); --radius:12px;
}
body {font-family:Arial,Helvetica,sans-serif; background:var(--cta-paper); color:var(--cta-ink)}
h1,h2,h3 {font-weight:600; text-wrap:balance}
em {font-family:inherit; font-style:normal; font-weight:inherit; color:var(--cta-accent)}
a {color:var(--cta-ink)}
:focus-visible {outline:3px solid var(--cta-accent); outline-offset:4px}
.skip {z-index:20; color:var(--cta-ink); border:2px solid var(--cta-accent); border-radius:6px}
.institution {background:var(--cta-ink); color:#fff; font-size:11px; line-height:1.5}
.institution-inner {width:min(1280px,calc(100% - 96px)); margin:auto; display:flex; justify-content:space-between; gap:24px; padding-block:8px}
.institution strong {font-size:10px; letter-spacing:.13em}
.site-header {max-width:1280px; width:calc(100% - 96px); padding:22px 0; min-height:106px; gap:24px; flex-wrap:wrap}
.brand {gap:20px; min-width:0}
.brand-logo {display:block; width:116px; height:54px; object-fit:contain; flex:none}
.brand strong {font-size:17px; letter-spacing:0; line-height:1.4}
.brand small {font-size:11px; letter-spacing:0; color:var(--cta-muted); margin-top:4px}
.site-header nav {gap:18px; flex-wrap:wrap}
.site-header nav a,.site-header .link-button {display:inline-flex; min-height:44px; align-items:center; font-size:13px; font-weight:600}
.site-header nav a:not(.nav-pill) {border-bottom:2px solid transparent; padding:8px 0}
.site-header nav a[aria-current],.site-header nav a:hover {border-bottom-color:var(--cta-accent)}
.nav-pill {border:1px solid var(--cta-slate); border-radius:7px; padding:10px 16px; color:var(--cta-ink)}
.nav-pill:hover {background:var(--cta-soft)}
.environment {border-block:1px solid #e4dce5; background:#f6f1f6; color:#60415f; font-size:12px; padding:9px 24px; letter-spacing:0}
.container {max-width:1280px; width:calc(100% - 96px); padding:28px 0 72px}
.hero {background:var(--cta-soft); color:var(--cta-ink); border:1px solid var(--cta-line); border-radius:12px; padding:52px 48px; grid-template-columns:1.3fr 1fr; gap:32px; min-height:450px}
.hero h1 {font-size:clamp(2.6rem,4.2vw,4.25rem); line-height:1.08; letter-spacing:-.055em; margin:20px 0 25px}
.hero h1 em {color:var(--cta-accent)}
.hero p {color:var(--cta-muted); max-width:540px; line-height:1.65}
.eyebrow,.hero .eyebrow {color:var(--cta-ink); font-size:10px; letter-spacing:.16em; font-weight:700}
.hero-actions {display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:28px}
.hero-recovery {font-size:14px; min-height:44px; display:inline-flex; align-items:center}
.button {background:var(--cta-slate); border-color:var(--cta-slate); border-radius:7px; font-weight:600; min-height:46px}
.button:hover {background:var(--cta-ink); border-color:var(--cta-ink)}
.button.secondary,.button.light {background:var(--cta-surface); color:var(--cta-ink); border-color:#a0aabd}
.button.secondary:hover,.button.light:hover {background:var(--cta-soft)}
.hero-art {min-height:310px; display:flex; flex-direction:column; justify-content:center; gap:22px}
.hub-orbit {position:relative; display:grid; place-items:center; width:280px; height:280px; border:1px solid #b8c4d5; border-radius:50%; background:#e6ebf1}
.hub-orbit:before {content:""; position:absolute; inset:24px; border:1px dashed #b8c4d5; border-radius:50%}
.hub-orbit-core {z-index:1; background:var(--cta-surface); padding:18px 20px 12px; border-radius:9px; box-shadow:9px 11px 0 #b8c2d1; text-align:center}
.hub-orbit-core img {display:block; width:190px; height:88px; object-fit:contain}
.hub-orbit-core span {display:block; font-size:8px; letter-spacing:.1em; margin-top:8px; color:var(--cta-muted)}
.orbit-label {position:absolute; z-index:2; font-size:9px; letter-spacing:.1em; border:1px solid #b8c4d5; background:var(--cta-soft); border-radius:20px; padding:6px 12px}
.orbit-top {top:0; left:18px} .orbit-bottom {bottom:10px; right:0}
.art-caption {position:static; color:var(--cta-ink)!important; font-size:12px; text-align:center; letter-spacing:0; margin:0}
.art-caption small {display:block; color:var(--cta-muted); font-size:11px; margin-top:4px}
.section {padding-top:46px}
.section-heading {align-items:end; margin:12px 0 28px}
.section-heading h2 {font-size:30px}
.section-heading .muted {font-size:13px}
.event-grid {gap:20px}
.event-card {border-color:var(--cta-line); border-radius:12px; transition:border-color .18s,box-shadow .18s}
.event-card:hover,.event-card:focus-within {border-color:#a0aabd; box-shadow:0 6px 20px #002d4b08}
.poster-placeholder {background:#e6ebf1; color:var(--cta-ink)}
.poster-placeholder strong {font:600 30px/1.15 Arial,Helvetica,sans-serif; letter-spacing:-.035em}
.card-body {padding:24px}
.card-body h3 {font-size:21px}
.date-badge {border:1px solid var(--cta-line); border-radius:7px}
.badge {background:#eeedf4; color:#51496b}
.badge.green {background:#e7f1ea; color:#23543b}
.card-bottom a {display:inline-flex; align-items:center; min-height:44px; font-weight:600}
.how {background:var(--cta-soft); border:1px solid var(--cta-line); border-radius:12px; margin-top:48px}
.how li>span {color:var(--cta-accent)}
.panel,.scanner-panel {border-radius:12px; border-color:var(--cta-line); box-shadow:none}
input,select,textarea {border-color:#a0aabd; border-radius:7px; color:var(--cta-ink); background:var(--cta-surface)}
input:focus,select:focus,textarea:focus {border-color:var(--cta-accent)}
.field-help,.field-error {font-size:14px}
.link-button {color:var(--cta-ink)}
.steps {color:var(--cta-muted)}
.steps strong[aria-current] {color:var(--cta-accent)}
.login-grid {gap:64px; padding-top:48px}
.login-note {border-color:var(--cta-line); color:var(--cta-muted)}
.scanner-wrap {max-width:640px; margin:42px auto}
.scanner-wrap h1 {font-size:clamp(2rem,4vw,3rem)}
.site-footer {max-width:1280px; width:calc(100% - 96px); margin:0 auto; padding:36px 0; border-color:var(--cta-line); display:grid; grid-template-columns:1.3fr 1fr auto; gap:28px; font-size:12px}
.site-footer strong,.site-footer span {display:block}
.site-footer span {margin-top:7px; color:var(--cta-muted); max-width:310px}
.footer-links {display:flex; flex-direction:column; align-items:start; gap:4px}
.footer-links a {display:inline-flex; align-items:center; min-height:36px}
@media(max-width:1050px) {
  .site-header nav {width:100%; gap:24px}
  .hero {padding:36px 28px; gap:20px; grid-template-columns:1.2fr 1fr}
  .hub-orbit {width:240px; height:240px}
  .hub-orbit-core img {width:160px; height:74px}
  .site-footer {grid-template-columns:1fr 1fr}
}
@media(max-width:760px) {
  .institution-inner,.site-header,.container,.site-footer {width:calc(100% - 40px)}
  .institution-inner {justify-content:center; text-align:center; padding-block:8px}
  .institution-inner>span {display:none}
  .site-header {padding-block:18px; gap:16px}
  .brand {gap:14px}
  .brand-logo {width:90px; height:43px}
  .brand strong {font-size:16px}
  .brand small {font-size:10px}
  .site-header nav {gap:8px 18px; justify-content:start}
  .environment {font-size:11px; line-height:1.5; padding:10px 20px}
  .container {padding-top:20px}
  .hero {padding:30px 24px; grid-template-columns:1fr; gap:24px; min-height:0}
  .hero h1 {font-size:clamp(2.35rem,7.6vw,3.4rem)}
  .hero-art {display:none}
  .hero-actions {gap:8px 18px; margin-top:20px}
  .hero .button {width:auto}
  .section-heading {align-items:start; gap:12px; flex-direction:column}
  .section-heading h2 {font-size:27px}
  .section-heading .muted {font-size:12px}
  .how {padding:28px 24px}
  .login-grid {gap:28px; padding-top:24px}
  .scanner-wrap {margin:24px auto}
  .site-footer {grid-template-columns:1fr; gap:22px; padding-block:28px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*:before,*:after {transition:none!important; animation:none!important}
}