/* Anoki header & footer — from the site's original header/footer code.
   Uses --b-* brand tokens (defined in anoki.css) so page colours never change the header. */
.anoki-chrome, .anoki-chrome *{ box-sizing:border-box; }
.anoki-chrome{ font-family: var(--b-font-body); color: var(--b-ink); -webkit-font-smoothing: antialiased; }
.anoki-chrome a{ color:inherit; text-decoration:none; }
.anoki-chrome ul{ list-style:none; margin:0; padding:0; }
.anoki-chrome img{ max-width:100%; display:block; }
.anoki-chrome button{ font-family:inherit; cursor:pointer; border:none; background:none; margin:0; }
.anoki-chrome p, .anoki-chrome h2{ margin:0; padding:0; }
:where(.anoki-chrome) .utility-bar{background: var(--b-primary-dark); color: var(--b-border); font-size: 13px}
:where(.anoki-chrome) .utility-inner{max-width: var(--b-container); margin: 0 auto; padding: 8px 24px; display:flex; align-items:center; justify-content:space-between; gap: 16px}
:where(.anoki-chrome) .utility-left{display:flex; align-items:center; gap: 22px}
:where(.anoki-chrome) .utility-item{display:flex; align-items:center; gap: 7px; white-space: nowrap}
:where(.anoki-chrome) .utility-item svg{width:14px; height:14px; flex-shrink:0; opacity:0.85}
:where(.anoki-chrome) .utility-item a:hover{color:#fff}
:where(.anoki-chrome) .utility-right{display:flex; align-items:center; gap: 18px; font-weight:500}
:where(.anoki-chrome) .utility-right a:hover{color: var(--b-accent)}
:where(.anoki-chrome) .site-header{background: var(--b-bg); border-bottom: 1px solid var(--b-border); position: relative; z-index: 100}
:where(.anoki-chrome) .header-inner{max-width: var(--b-container); margin: 0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap: 20px}
:where(.anoki-chrome) .logo{display:flex; align-items:center; flex-shrink: 0}
:where(.anoki-chrome) .logo img{height: 48px; width: auto; object-fit: contain}
:where(.anoki-chrome) .main-nav{display:flex; align-items:center; gap: 2px}
:where(.anoki-chrome) .nav-item{position: relative}
:where(.anoki-chrome) .nav-link{display:flex; align-items:center; gap:5px; padding: 10px 13px; font-size: 14.5px; font-weight: 500; color: var(--b-ink); border-radius: var(--b-radius); transition: color 0.15s ease, background 0.15s ease}
:where(.anoki-chrome) .nav-link:hover{color: var(--b-primary); background: var(--b-bg-tint)}
:where(.anoki-chrome) .nav-link svg.chev{width: 10px; height:10px; transition: transform 0.15s ease; opacity: 0.55}
:where(.anoki-chrome) .nav-item:hover .chev{transform: rotate(180deg)}
:where(.anoki-chrome) .dropdown{position:absolute; top: calc(100% + 8px); left: 0; min-width: 300px; background:#fff; border:1px solid var(--b-border); border-radius: 10px; box-shadow: 0 12px 32px color-mix(in srgb, var(--b-ink) 12%, transparent); padding: 10px; opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 40}
:where(.anoki-chrome) .nav-item:hover .dropdown{opacity:1; visibility:visible; transform: translateY(0)}
:where(.anoki-chrome) .dd-link{display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 7px}
:where(.anoki-chrome) .dd-link:hover{background: var(--b-bg-tint)}
:where(.anoki-chrome) .dd-link .avatar{width: 34px; height:34px; border-radius:50%; background: var(--b-primary-tint); color: var(--b-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:700}
:where(.anoki-chrome) .dd-link .txt .name{font-size: 14px; font-weight:600; color: var(--b-ink); display:block}
:where(.anoki-chrome) .dd-link .txt .role{font-size: 12px; color: var(--b-ink-soft); display:block; margin-top:1px}
:where(.anoki-chrome) .dropdown hr{border:none; border-top:1px solid var(--b-border); margin: 6px 4px}
:where(.anoki-chrome) .dropdown .view-all{display:block; padding: 10px 12px; font-size: 13.5px; font-weight:700; color: var(--b-primary); border-radius:7px}
:where(.anoki-chrome) .dropdown .view-all:hover{background: var(--b-bg-tint)}
:where(.anoki-chrome) .dropdown .view-all svg{width:12px; height:12px; margin-left:4px}
:where(.anoki-chrome) .mega{position:absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); width: 620px; background:#fff; border:1px solid var(--b-border); border-radius: 12px; box-shadow: 0 16px 40px color-mix(in srgb, var(--b-ink) 14%, transparent); padding: 20px; opacity:0; visibility:hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 40}
:where(.anoki-chrome) .nav-item:hover .mega{opacity:1; visibility:visible; transform: translate(-50%, 0)}
:where(.anoki-chrome) .mega-head{display:flex; align-items:center; justify-content:space-between; padding: 0 4px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--b-border)}
:where(.anoki-chrome) .mega-head span.title{font-size: 12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--b-ink-soft)}
:where(.anoki-chrome) .mega-head a{font-size: 13px; font-weight:700; color: var(--b-primary); display:flex; align-items:center; gap:5px}
:where(.anoki-chrome) .mega-head a svg{width:12px; height:12px}
:where(.anoki-chrome) .mega-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 4px 10px}
:where(.anoki-chrome) .mega-link{display:flex; align-items:flex-start; gap:10px; padding: 9px 10px; border-radius: 8px}
:where(.anoki-chrome) .mega-link:hover{background: var(--b-bg-tint)}
:where(.anoki-chrome) .mega-link .icon{width: 30px; height:30px; border-radius:8px; background: var(--b-primary-tint); color: var(--b-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px}
:where(.anoki-chrome) .mega-link .icon svg{width:15px; height:15px}
:where(.anoki-chrome) .mega-link .label{font-size: 13.5px; font-weight:600; color: var(--b-ink); line-height:1.35; padding-top:4px}
:where(.anoki-chrome) .header-actions{display:flex; align-items:center; gap: 10px; flex-shrink:0}
:where(.anoki-chrome) .icon-btn{width: 38px; height: 38px; display:flex; align-items:center; justify-content:center; border-radius: 50%; border: 1px solid var(--b-border); color: var(--b-primary); transition: background 0.15s ease, border-color .15s ease}
:where(.anoki-chrome) .icon-btn:hover{background: var(--b-bg-tint); border-color: var(--b-primary)}
:where(.anoki-chrome) .icon-btn svg{width:17px; height:17px}
:where(.anoki-chrome) .icon-btn.whatsapp{color: var(--b-whatsapp)}
:where(.anoki-chrome) .btn-primary{display:inline-flex; align-items:center; gap: 8px; background: var(--b-accent); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--b-radius); transition: background 0.15s ease; white-space:nowrap}
:where(.anoki-chrome) .btn-primary:hover{background: var(--b-accent-dark)}
:where(.anoki-chrome) .btn-primary svg{width:15px; height:15px}
:where(.anoki-chrome) .mobile-toggle{display:none; width: 40px; height:40px; align-items:center; justify-content:center; border-radius: 8px; border: 1px solid var(--b-border); flex-shrink:0; color: var(--b-primary)}
:where(.anoki-chrome) .mobile-toggle svg{width:19px; height:19px}
:where(.anoki-chrome) .mobile-overlay{position:fixed; inset:0; background: color-mix(in srgb, var(--b-ink) 60%, transparent); opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 200}
:where(.anoki-chrome) .mobile-overlay.open{opacity:1; visibility:visible}
:where(.anoki-chrome) .mobile-panel{position:fixed; top:0; right:0; height:100%; width: min(360px, 88vw); background:#fff; z-index: 201; transform: translateX(100%); transition: transform .25s ease; display:flex; flex-direction:column; box-shadow: -10px 0 30px rgba(0,0,0,0.15)}
:where(.anoki-chrome) .mobile-overlay.open .mobile-panel{transform: translateX(0)}
:where(.anoki-chrome) .mp-head{display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom: 1px solid var(--b-border); flex-shrink:0}
:where(.anoki-chrome) .mp-head img{height: 35px; width: auto; object-fit: contain}
:where(.anoki-chrome) .mp-close{width:34px; height:34px; border-radius:50%; border:1px solid var(--b-border); display:flex; align-items:center; justify-content:center; color: var(--b-ink)}
:where(.anoki-chrome) .mp-close:hover{background: var(--b-bg-tint)}
:where(.anoki-chrome) .mp-close svg{width:16px; height:16px}
:where(.anoki-chrome) .mp-body{flex:1; overflow-y:auto; padding: 8px 12px}
:where(.anoki-chrome) .mp-link{display:flex; align-items:center; justify-content:space-between; padding: 14px 12px; font-size: 15px; font-weight:600; color: var(--b-ink); border-bottom: 1px solid var(--b-border)}
:where(.anoki-chrome) .mp-link svg.chev{width:14px; height:14px; color: var(--b-ink-soft); transition: transform .2s ease}
:where(.anoki-chrome) .mp-item.open > .mp-link svg.chev{transform: rotate(180deg)}
:where(.anoki-chrome) .mp-submenu{max-height:0; overflow:hidden; transition: max-height .25s ease; background: var(--b-bg-tint); border-radius: 8px; margin: 0 0 6px}
:where(.anoki-chrome) .mp-item.open .mp-submenu{max-height: 900px}
:where(.anoki-chrome) .mp-submenu a{display:block; padding: 11px 18px; font-size: 13.5px; color: var(--b-ink-soft); font-weight:500}
:where(.anoki-chrome) .mp-submenu a:hover{color: var(--b-primary)}
:where(.anoki-chrome) .mp-submenu .mp-viewall{font-weight:700; color: var(--b-primary)}
:where(.anoki-chrome) .mp-foot{padding: 16px 20px; border-top: 1px solid var(--b-border); display:flex; gap:10px; flex-shrink:0}
:where(.anoki-chrome) .mp-foot a{flex:1; text-align:center; padding: 12px; border-radius: var(--b-radius); font-size:13.5px; font-weight:700}
:where(.anoki-chrome) .mp-foot .call{border:1.5px solid var(--b-border); color: var(--b-ink)}
:where(.anoki-chrome) .mp-foot .book{background: var(--b-accent); color:#fff; transition: background 0.15s ease}
:where(.anoki-chrome) .mp-foot .book:hover{background: var(--b-accent-dark)}
:where(.anoki-chrome) .site-footer{background: var(--b-primary-dark); color: var(--b-border); padding: 64px 24px 0}
:where(.anoki-chrome) .footer-inner{max-width: var(--b-container); margin: 0 auto}
:where(.anoki-chrome) .footer-grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--b-footer-line)}
:where(.anoki-chrome) .f-brand{padding-right: 12px}
:where(.anoki-chrome) .f-logo{display: block; margin-bottom: 18px}
:where(.anoki-chrome) .f-logo img{height: 48px; width: auto; object-fit: contain; filter: brightness(0) invert(1)}
:where(.anoki-chrome) .f-brand p{font-size: 14px; line-height: 1.65; color: var(--b-primary-line); margin-bottom: 20px; max-width: 320px}
:where(.anoki-chrome) .f-socials{display:flex; gap:10px}
:where(.anoki-chrome) .f-socials a{width:36px; height:36px; border-radius:50%; border: 1px solid var(--b-footer-line); display:flex; align-items:center; justify-content:center; transition: background .15s ease, border-color .15s ease; color: #fff}
:where(.anoki-chrome) .f-socials a:hover{background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3)}
:where(.anoki-chrome) .f-socials svg{width:16px; height:16px}
:where(.anoki-chrome) .f-col h4{font-family: var(--b-font-body); font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 18px; letter-spacing: 0.01em}
:where(.anoki-chrome) .f-col ul li{margin-bottom: 11px}
:where(.anoki-chrome) .f-col a{font-size: 14px; color: var(--b-primary-line); transition: color .15s ease}
:where(.anoki-chrome) .f-col a:hover{color: var(--b-accent-tint)}
:where(.anoki-chrome) .f-contact-item{display:flex; gap: 10px; margin-bottom: 16px; align-items:flex-start}
:where(.anoki-chrome) .f-contact-item svg{width:17px; height:17px; color: var(--b-accent); flex-shrink:0; margin-top: 2px}
:where(.anoki-chrome) .f-contact-item a, :where(.anoki-chrome) .f-contact-item span{font-size: 14px; color: var(--b-border); line-height:1.55}
:where(.anoki-chrome) .f-contact-item a:hover{color:#fff}
:where(.anoki-chrome) .f-trust{display:flex; flex-wrap:wrap; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--b-footer-line)}
:where(.anoki-chrome) .f-trust-item{display:flex; align-items:center; gap: 10px; font-size: 13.5px; color: var(--b-primary-line)}
:where(.anoki-chrome) .f-trust-item svg{width:19px; height:19px; color: var(--b-accent); flex-shrink:0}
:where(.anoki-chrome) .f-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0 26px; font-size: 12.5px; color: var(--b-primary-line)}
:where(.anoki-chrome) .f-bottom-links{display:flex; gap:18px; flex-wrap:wrap}
:where(.anoki-chrome) .f-bottom-links a:hover{color:#fff}
:where(.anoki-chrome) .f-disclaimer{max-width: var(--b-container); margin: 0 auto; padding: 0 0 28px; font-size: 12px; line-height: 1.6; color: var(--b-primary-line); border-top: none}
@media (max-width: 1100px){
  :where(.anoki-chrome) .main-nav{display:none}
  :where(.anoki-chrome) .mobile-toggle{display:flex}
  :where(.anoki-chrome) .header-actions .icon-btn{display:none}
}
@media (max-width: 980px){
  :where(.anoki-chrome) .footer-grid{grid-template-columns: 1fr 1fr; row-gap: 40px}
  :where(.anoki-chrome) .f-brand{grid-column: 1 / -1}
}
@media (max-width: 720px){
  :where(.anoki-chrome) .utility-bar{display:none}
  :where(.anoki-chrome) .btn-primary span{display:none}
  :where(.anoki-chrome) .btn-primary{padding: 10px 12px}
}
@media (max-width: 560px){
  :where(.anoki-chrome) .footer-grid{grid-template-columns: 1fr}
  :where(.anoki-chrome) .f-bottom{flex-direction:column; align-items:flex-start}
}
