/* OPTechnologies' navigation layout and scrollbar, adapted to the supplied orange OPT identity. */
:root { --site-header-height:60px; }
html { scroll-padding-top:calc(var(--site-header-height) + 20px); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#060f29; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#bc4700,#ff8c00); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#ff8c00,#bc4700); }
::-webkit-scrollbar-corner { background:#060f29; }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width:thin; scrollbar-color:#ff7900 #060f29; }
}
.site-header { position:fixed; inset:0 0 auto; height:var(--site-header-height); z-index:50; background:rgba(6,15,41,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid #ff6a001a; }
.site-header .nav-inner { width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:8px 12px; gap:20px; }
.site-header .header-brand { display:inline-flex; align-items:center; flex-shrink:0; padding:5px 0; margin-right:10px; }
.site-header .navbar-logo { width:auto; height:34px; max-width:none; transition:transform .3s ease,filter .3s ease; }
.site-header .header-brand:hover .navbar-logo { transform:scale(1.08); filter:drop-shadow(0 0 8px #ff6a0080); }
.site-header .desktop-nav { display:flex; align-items:center; margin-left:auto; gap:5px; font-weight:500; font-size:.95rem; }
.site-header .op-nav-link { display:flex; align-items:center; gap:8px; position:relative; padding:8px 18px; border-radius:8px; font-size:.95rem; line-height:1.5; font-weight:500; letter-spacing:.03em; color:#bfc5d2; transition:color .3s ease,background-color .3s ease; }
.site-header .op-nav-link:after { content:""; position:absolute; bottom:2px; left:50%; width:60%; height:2px; border-radius:2px; background:linear-gradient(90deg,#ff6a00,#ffb454); transform:translateX(-50%) scaleX(0); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.site-header .op-nav-link:hover,.site-header .op-nav-link:focus-visible { color:#ff9a42; background:#ff6a0014; }
.site-header .op-nav-link:hover:after,.site-header .op-nav-link:focus-visible:after { transform:translateX(-50%) scaleX(1); }
.site-header .op-nav-link.active { color:#ffad61; background:#ff6a001c; }
.site-header .op-nav-link.active:after { transform:translateX(-50%) scaleX(1); }
.site-header .product-menu>summary { padding:8px 18px; }
.site-header .product-menu summary .icon { color:currentColor; }
.site-header .product-dropdown { left:auto; right:0; top:calc(100% + 8px); width:290px; padding:8px; border:1px solid #ff6a001f; border-radius:12px; background:rgba(6,15,41,.97); backdrop-filter:blur(20px) saturate(180%); box-shadow:0 8px 32px #0006; }
.site-header .desktop-nav .product-dropdown>a { font-size:.9rem; padding:10px 16px; color:#d2d6e1; }
.site-header .product-dropdown>a:hover,.site-header .product-dropdown>a:focus-visible { color:#ff9a42; background:#ff6a001a; }
.site-header .mobile-menu { display:none; margin-left:auto; }
#contenido { padding-top:var(--site-header-height); }
@media(max-width:1100px) and (min-width:1001px) {
    .site-header .op-nav-link,.site-header .product-menu>summary { padding-inline:12px; font-size:.88rem; }
}
@media(max-width:1000px) {
    :root { --site-header-height:56px; }
    .site-header .nav-inner { padding:7px 12px; gap:15px; }
    .site-header .header-brand { padding:5px 0; }
    .site-header .navbar-logo { height:30px; }
    .site-header .desktop-nav { display:none; }
    .site-header .mobile-menu { display:block; }
    .site-header .mobile-menu summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:40px; list-style:none; cursor:pointer; border:1px solid #ffffff33; border-radius:5px; transition:border-color .3s,background-color .3s; }
    .site-header .mobile-menu summary::-webkit-details-marker { display:none; }
    .site-header .mobile-menu summary>span { display:block; width:20px; height:1px; background:#cbd1dc; transition:transform .2s,opacity .2s; }
    .site-header .mobile-menu summary:hover { border-color:#ff6a0080; background:#ff6a001a; }
    .site-header .mobile-menu[open] summary { border-color:#ff6a0070; }
    .site-header .mobile-menu[open] summary>span:first-child { transform:translateY(6px) rotate(45deg); }
    .site-header .mobile-menu[open] summary>span:nth-child(2) { opacity:0; }
    .site-header .mobile-menu[open] summary>span:last-child { transform:translateY(-6px) rotate(-45deg); }
    .site-header .mobile-menu nav { display:grid; position:absolute; top:100%; left:0; right:0; max-height:calc(100svh - var(--site-header-height)); overflow:auto; padding:12px 16px 20px; background:rgba(6,15,41,.98); backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid #ff6a002b; box-shadow:0 16px 32px #0006; }
    .site-header .mobile-menu nav a { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 10px; min-height:46px; font-size:.9rem; line-height:1.5; color:#cbd1de; border-bottom:1px solid #ffffff0c; border-radius:5px; }
    .site-header .mobile-menu nav a:hover,.site-header .mobile-menu nav a:focus-visible { background:#ff6a0014; color:#ffad61; }
    .site-header .mobile-menu nav .icon { color:#ff9b45; width:17px; height:17px; }
}
@media(prefers-reduced-motion:reduce) {
    .site-header .navbar-logo,.site-header .op-nav-link,.site-header .op-nav-link:after,.site-header .mobile-menu summary,.site-header .mobile-menu summary>span { transition:none; }
}
