@font-face{font-family:EvialDisplay;src:url('fonts/JuliusSansOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Los títulos evocan la geometría del logotipo; los textos conservan su legibilidad. */
h1,h2,h3,.eyebrow,.nav-caption{font-family:EvialDisplay,'Century Gothic',sans-serif;font-weight:400;letter-spacing:.035em}
h1,h2,h3{text-transform:uppercase;line-height:1.25}
.logo.evial-logo,.brand.evial-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:260px;max-width:100%;line-height:0;letter-spacing:normal}
.evial-logo img{display:block;width:100%;height:auto;max-width:100%}
.sidebar .evial-logo{width:100%;margin-block:-10px 0}
.site-footer .evial-logo{width:200px}
.dialog-content .evial-logo{width:250px;margin-bottom:12px}
.login-story .evial-logo{background:#fff;border-radius:10px;width:300px}
.demo-sidebar .evial-logo{width:100%;margin:0 0 8px}
.agenda-page>main>.evial-logo{width:280px}
#site-name .evial-logo{width:230px;background:#fff;border-radius:8px}
@media screen and (min-width:1024px){
:root{--desktop-gutter:clamp(16.8px,calc((100vw - 1100px) * .175),182px)} .header-inner{gap:24px;flex-wrap:wrap;padding-block:8px}
 .header-inner nav{gap:22px}
 .hero{gap:32px}
 .shell>header,.platform-page>header{gap:20px;flex-wrap:wrap}
 .login-story h1{font-size:clamp(32px,3vw,54px)}
 .login-story .evial-logo{max-width:100%}
}
@media(max-width:1100px){
 .header-inner .evial-logo{width:210px}
 .columns{grid-template-columns:1fr}
}
@media(max-width:760px){
 .header-inner{gap:8px}
 .header-inner .evial-logo{width:175px}
 .header-actions{gap:8px}
 .header-actions .button{padding:9px 10px}
 .site-footer .evial-logo{width:185px}
}
@media(max-width:380px){.header-inner .evial-logo{width:145px}}