@import url('./animated-button.css');
/* OPERO: one main bar. The compact navigation opens only on demand. */
html:has(.op-header){scroll-padding-top:112px}
.op-header{--op-head-blue:var(--opero-accent);--op-head-ink:var(--opero-ink);--op-head-muted:var(--opero-ink);--op-head-line:var(--opero-line);position:sticky;top:0;z-index:80;margin:12px 14px 0;border:1px solid var(--op-head-line);border-radius:20px;background:rgb(255 255 255 / .98);color:var(--op-head-ink);box-shadow:0 10px 34px rgb(24 24 27 / .06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.op-header *{box-sizing:border-box}
.op-header a{color:inherit;text-decoration:none}
.op-header svg{display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.op-header :is(a,button):focus-visible{outline:3px solid var(--opero-accent);outline-offset:3px}
.op-header-row{position:relative;width:min(1620px,calc(100% - 56px));min-height:88px;margin-inline:auto;display:flex;align-items:center;gap:18px}
.op-brand{width:154px;min-width:154px;height:52px;margin-right:auto;display:flex;align-items:center;border-radius:8px}
.op-brand svg{width:154px;height:40px;max-width:100%;stroke:none}
.op-header-menu{display:flex;align-items:center;gap:16px}
.op-services{display:flex;align-items:center;gap:6px}
.op-services-link,.op-page-link{min-height:48px;display:inline-flex;align-items:center;gap:8px;padding:10px 9px;border-radius:12px;color:var(--op-head-muted);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:color .18s,background .18s}
.op-services-link:hover{color:var(--op-head-ink);background:transparent}
.op-page-link:hover{color:var(--op-head-ink);background:transparent}
.op-services-link:is([aria-current=page],[aria-current=true]){color:var(--op-head-ink);background:var(--opero-surface-warm);box-shadow:inset 0 -2px 0 var(--opero-accent)}
.op-page-link:is([aria-current=page],[aria-current=true]){color:var(--op-head-ink);background:var(--opero-surface-warm);box-shadow:inset 0 -2px 0 var(--opero-accent)}
.op-nav-icon{width:19px;height:19px;flex:0 0 auto}
.op-chevron{width:10px;height:10px}
.op-service-switch{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--op-head-line);border-radius:999px;background:transparent}
.op-service-option{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid transparent;border-radius:12px;color:var(--op-head-muted);font-size:15px;font-weight:550;line-height:1;white-space:nowrap;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}
.op-service-option:hover{color:var(--opero-ink);background:transparent}
.op-service-option:is([aria-selected=true],[aria-current=page],[aria-current=true]){color:var(--op-head-ink);background:var(--opero-surface-warm);border-color:transparent;box-shadow:inset 0 -2px 0 var(--opero-accent)}
.op-service-option .op-nav-icon{width:18px;height:18px}
.op-page-links{display:flex;align-items:center;gap:2px;padding-left:8px;border-left:1px solid var(--op-head-line)}
.op-header-cta{flex-shrink:0;z-index:2}
.op-menu-toggle{display:none;min-width:44px;min-height:48px;align-items:center;justify-content:center;gap:8px;padding:8px 11px;border:1px solid var(--opero-line);border-radius:10px;background:var(--opero-surface);color:var(--op-head-ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.op-menu-toggle svg{width:18px;height:18px}
.page-servizi .es-content{padding-top:36px}
@media(min-width:1181px) and (max-width:1380px){
 .op-header-row{width:calc(100% - 40px);gap:12px}
 .op-brand{width:140px;min-width:140px}.op-brand svg{width:140px}
 .op-header-menu{gap:10px}.op-services{gap:4px}
 .op-services-link,.op-page-link{font-size:14px;padding-inline:7px;gap:6px}
 .op-service-option{font-size:14px;padding-inline:10px;gap:6px}
 .op-header .op-header-cta.animated-button{padding:13px 30px;font-size:14px;min-height:52px}
}
@media(max-width:1180px){
 html:has(.op-header){scroll-padding-top:24px}
 .op-header{position:relative;margin:8px 8px 0;border-radius:14px}
 .op-header-row{width:calc(100% - 28px);min-height:76px;gap:12px;flex-wrap:wrap}
 .op-brand{width:144px;min-width:144px}.op-brand svg{width:144px;height:38px}
 .op-header-menu{order:4;flex:0 0 100%;display:grid;gap:12px;padding:0 0 14px}
 .op-services{display:block}
 .op-services-link{display:none}
 .op-service-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .op-service-option{min-width:0;padding-inline:10px}
 .op-page-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 0 0;border:0;border-top:1px solid var(--op-head-line)}
 .op-page-link{justify-content:center}
 html.op-nav-ready .op-menu-toggle{display:inline-flex}
 html.op-nav-ready .op-header-row{flex-wrap:nowrap}
 html.op-nav-ready .op-header-menu{position:absolute;inset:calc(100% + 8px) 0 auto;padding:14px;display:none;border:1px solid var(--op-head-line);border-radius:14px;background:var(--opero-surface);box-shadow:0 15px 35px rgb(24 24 27 / .14);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
 html.op-nav-ready .op-header-menu[data-open=true]{display:grid}
 .op-header .op-header-cta.animated-button{min-height:48px;padding:12px 30px;font-size:13px}
}
@media(max-width:650px){
 .op-header{margin:5px 5px 0;border-radius:12px}
 .op-header-row{width:calc(100% - 20px);min-height:68px;gap:8px}
 .op-brand{width:116px;min-width:116px;height:44px}.op-brand svg{width:116px;height:32px}
 .op-menu-toggle{padding-inline:10px;flex-shrink:0}
 .op-menu-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .op-service-option{min-height:44px;gap:6px;padding:7px 5px;font-size:13px}
 .op-service-option .op-nav-icon{width:14px;height:14px}
 .op-page-link{min-height:44px;padding-inline:4px;gap:5px;font-size:13px}.op-page-link .op-nav-icon{width:15px;height:15px}
 html.op-nav-ready .op-header-menu{padding:10px;left:0;right:0}
}
@media(max-width:370px){
 .op-brand{width:90px;min-width:90px}.op-brand svg{width:90px}
 .op-header-row{gap:7px}
 .op-header .op-header-cta.animated-button{padding-inline:25px}
 .op-service-option .op-nav-icon{display:none}
 .op-page-link .op-nav-icon{display:none}
}
@media(prefers-reduced-motion:reduce){.op-header :is(a,button){transition:none!important}}