/* Hlavná hlavička webu (mliečne sklo) – spoločná pre úvod aj podstránky.
 * Úvod: tmavé sklo nad fotkou, po zrolovaní svetlé (.scrolled).
 * Podstránky: trieda .light = svetlé sklo hneď od začiatku, pod hlavičkou je .hp-spacer.
 * Výška je na všetkých stránkach a pri rolovaní stále rovnaká: 79 px (mobil 65 px), mení sa len farba skla. */
.hp-nav{--red:#e2001a;--red-d:#b80015;--ink:#1d1e22;--line:#e6e6ea;
 font-family:'Open Sans',Arial,Helvetica,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.hp-nav *,.hp-nav *:before,.hp-nav *:after{box-sizing:border-box}
.hp-nav a{text-decoration:none!important;letter-spacing:0;text-transform:none}
:where(.hp-nav) ul,:where(.hp-nav) li{margin:0;padding:0;list-style:none}
:where(.hp-nav) img{max-width:none;display:block}
.hp-nav button{font:inherit;outline-offset:2px}
html{scroll-padding-top:72px}
/* ---------- Hlavička: mliečne sklo ---------- */
.hp-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s;
 padding:16px 0;background:rgba(20,20,26,.18);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
 border-bottom:1px solid rgba(255,255,255,.15)}
.hp-nav .hp-wrap{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}
.hp-logo{flex:none;display:block;position:relative;height:46px;transition:height .3s}
.hp-logo img{height:100%;width:auto;transition:opacity .3s}
.hp-logo .dark{position:absolute;inset:0 auto auto 0;opacity:0}
.hp-menu{display:flex;gap:4px;list-style:none;margin:0 auto;padding:0}
.hp-menu a{display:block;padding:8px 14px;border-radius:999px;color:#fff;font-weight:600;font-size:15px;transition:.2s}
.hp-menu a:hover{background:rgba(255,255,255,.18)}
.hp-tel{flex:none;display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;padding:9px 18px;border-radius:999px;background:var(--red)}
.hp-tel a{color:#fff}
.hp-tel a:hover{text-decoration:underline}
.hp-tel i,.tels i{font-style:normal;opacity:.6}
.hp-tel svg{width:16px;height:16px}
.hp-burger{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.15);cursor:pointer;position:relative}
.hp-burger span,.hp-burger span:before,.hp-burger span:after{position:absolute;transform-origin:50% 50%;margin:0;right:auto;bottom:auto;left:12px;width:20px;height:2px;background:#fff;content:"";transition:.25s}
.hp-burger span{top:21px}.hp-burger span:before{top:-6px;left:0}.hp-burger span:after{top:6px;left:0}
.hp-nav.open .hp-burger span{background:transparent}
.hp-nav.open .hp-burger span:before{top:0;transform:rotate(45deg)}
.hp-nav.open .hp-burger span:after{top:0;transform:rotate(-45deg)}
/* po zrolovaní: svetlé mliečne sklo, menšia hlavička */
.hp-nav.scrolled{background:rgba(255,255,255,.82);border-bottom-color:rgba(0,0,0,.06);box-shadow:0 6px 24px rgba(0,0,0,.08)}
.hp-nav.scrolled .hp-logo .light{opacity:0}
.hp-nav.scrolled .hp-logo .dark{opacity:1}
.hp-nav.scrolled .hp-menu a{color:var(--ink)}
.hp-nav.scrolled .hp-menu a:hover{background:rgba(0,0,0,.05);color:var(--red)}
.hp-nav.scrolled .hp-burger{background:rgba(0,0,0,.06)}
.hp-nav.scrolled .hp-burger span,.hp-nav.scrolled .hp-burger span:before,.hp-nav.scrolled .hp-burger span:after{background:var(--ink)}
.hp-nav.scrolled.open .hp-burger span{background:transparent}

/* podstránky: svetlá verzia od začiatku */
.hp-nav.light{background:rgba(255,255,255,.86);border-bottom-color:rgba(0,0,0,.06);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.hp-nav.light .hp-logo .light{opacity:0}
.hp-nav.light .hp-logo .dark{opacity:1}
.hp-nav.light .hp-menu a{color:var(--ink)}
.hp-nav.light .hp-menu a:hover{background:rgba(0,0,0,.05);color:var(--red)}
.hp-nav.light .hp-burger{background:rgba(0,0,0,.06)}
.hp-nav.light .hp-burger span,.hp-nav.light .hp-burger span:before,.hp-nav.light .hp-burger span:after{background:var(--ink)}
.hp-nav.light.open .hp-burger span{background:transparent}
.hp-spacer{height:79px}
/* aktuálna stránka */
.hp-nav .hp-menu a.active,.hp-nav .hp-menu a.active:hover{background:var(--red);color:#fff}
.hp-nav .hp-tel a,.hp-nav .hp-tel a:hover,.hp-nav .hp-tel a:focus{color:#fff}

@media (max-width:1100px){
 .hp-burger{display:block;margin-left:0}
 .hp-tel{margin-left:auto}
 .hp-menu{position:absolute;top:100%;left:12px;right:12px;flex-direction:column;gap:2px;padding:10px;border-radius:16px;
  background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
 .hp-nav.open .hp-menu{opacity:1;visibility:visible;transform:none}
 .hp-menu a,.hp-nav.scrolled .hp-menu a{color:var(--ink);padding:12px 16px;font-size:16px}
 .hp-nav .hp-menu a.active{background:var(--red);color:#fff}
}
.hp-menu .tel-m{display:none}
@media (max-width:767px){.hp-tel{display:none}.hp-burger{margin-left:auto}.hp-menu .tel-m{display:block}}
.hp-menu .tel-m{border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
.hp-menu .tel-m + .tel-m{border-top:0;padding-top:0;margin-top:0}
.hp-menu .tel-m a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff!important;margin-top:6px;font-weight:700}
.hp-menu .tel-m a:before{content:"";width:16px;height:16px;flex:none;background:#fff;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.hp-menu .tel-m a:hover,.hp-nav.scrolled .hp-menu .tel-m a:hover{background:var(--red);color:#fff!important}
@media (max-width:767px){
 .hp-nav .hp-wrap{padding:0 16px}
 .hp-nav{padding:10px 0}
 .hp-logo{height:38px}
 .hp-spacer{height:65px}
}