#contact-options{position:fixed;inset:auto;margin:0;padding:23px;border:1px solid #ffffff80;border-radius:24px 4px 24px 24px;background:linear-gradient(125deg,#e5e7edf5,#b8becbf5);color:#242424;box-shadow:0 16px 50px #10151e40;backdrop-filter:blur(24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;font:400 14px/1.4 Calleo,Arial,sans-serif}
#contact-options::backdrop{background:transparent}
#contact-options .contact-options-heading{display:flex;gap:15px;align-items:center;justify-content:space-between}
#contact-options h2{margin:0;font-size:21px;font-weight:600;line-height:1.2}
#contact-options .contact-options-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#ffffff50;color:#404650;font:26px/1 Arial;cursor:pointer}
#contact-options .contact-options-intro{font-size:12px;margin:8px 0 19px;color:#585e68}
#contact-options .contact-options-links{display:grid;gap:9px}
#contact-options .contact-option{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 13px;border:1px solid #ffffff7a;border-radius:14px;background:#ffffff60;color:#242424;text-decoration:none;font:600 14px Calleo,Arial,sans-serif;text-align:left;transition:background .15s;cursor:pointer}
#contact-options .contact-option:hover{background:#ffffffa0}
#contact-options .contact-option:disabled{opacity:.55;cursor:default}
#contact-options .contact-option small{margin-left:auto;font-size:10px;font-weight:400}
#contact-options .contact-option-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#5d657313;color:#48515f}
#contact-options svg{width:21px;height:21px;display:block;flex-shrink:0}
#contact-options .contact-max{background:linear-gradient(135deg,#318cff,#8157df);color:white;font:600 20px Calleo,Arial,sans-serif}
#contact-options .contact-whatsapp{background:#168f55;color:white}
#contact-options .contact-option-arrow{margin-left:auto;font-size:19px;color:#707781}
#contact-options .contact-copy{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 10px;margin-top:15px;border:0;border-radius:25px;background:var(--gold,#f5a400);color:#242424;font:600 12px Calleo,Arial,sans-serif;cursor:pointer;min-height:44px}
#contact-options .contact-copy svg{width:17px;height:17px}
#contact-options .contact-copy-status{font-size:11px;margin:10px 0 0;color:#404650;min-height:15px;text-align:center}
#contact-options :is(button,a):focus-visible{outline:2px solid #9a6200;outline-offset:3px}
@media(max-width:380px){#contact-options{padding:18px}#contact-options h2{font-size:19px}}

/* All contact icons are served from the shared site icon directory. */
#contact-options .contact-option-icon img{display:block;width:24px;height:24px;object-fit:contain}
#contact-options .contact-max,#contact-options .contact-whatsapp{background:transparent;color:inherit}
#contact-options .contact-max img{width:30px;height:30px}
#contact-options .contact-copy>img{width:17px;height:17px;object-fit:contain}

/* Dock the contact choices to the right edge as a continuation of the header. */
.topbar.contact-expanded{border-bottom-right-radius:0}
#contact-options{border:0;border-radius:0 0 0 28px;background:linear-gradient(180deg,#737a88f2,#414b52f2);color:#fff;box-shadow:-10px 20px 40px #10151e30}
#contact-options .contact-options-intro,#contact-options .contact-copy-status{color:#e0e4eb}
#contact-options .contact-options-close{color:#fff;background:#ffffff20}
#contact-options .contact-option{color:#fff;background:#ffffff15;border-color:#ffffff30}
#contact-options .contact-option:hover{background:#ffffff2a}
#contact-options .contact-option-arrow{color:#e0e4eb}
#contact-options .contact-option-icon{background:none}
#contact-options .contact-option-icon img[src*="phone.svg"]{filter:brightness(0) invert(1)}
#contact-options .contact-whatsapp img{width:30px;height:30px;max-width:none}


/* Curved header extension: a broad shoulder flows into the right-hand contact wing. */
#contact-options{padding:54px 23px 18px calc(var(--contact-shoulder,60px) + 23px);border-radius:0;max-width:100vw;box-shadow:none;opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .3s cubic-bezier(.22,.7,.25,1),display .3s allow-discrete,overlay .3s allow-discrete}
#contact-options .contact-options-close{position:absolute;right:20px;top:12px}
#contact-options .contact-copy-status:empty{display:none}
@starting-style{#contact-options:popover-open{opacity:0;transform:translateY(-16px)}}
@media(max-width:380px){#contact-options{padding:52px 18px 18px calc(var(--contact-shoulder,48px) + 18px)}}
@media(prefers-reduced-motion:reduce){#contact-options{transition:none}}

/* Compact wing: messengers share a row, followed by the phone and copy action. */
#contact-options{padding:32px 16px 14px calc(var(--contact-shoulder,40px) + 16px)}
#contact-options .contact-options-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
#contact-options .contact-option{min-height:42px;padding:5px 8px;gap:7px;font-size:12px;border-radius:12px}
#contact-options .contact-option:nth-child(3){grid-column:1/-1;justify-content:center;font-size:13px}
#contact-options .contact-option:nth-child(-n+2) .contact-option-arrow{display:none}
#contact-options .contact-option:nth-child(3) .contact-option-arrow{margin-left:5px}
#contact-options .contact-options-close{width:22px;height:22px;right:12px;top:5px;font-size:20px}
#contact-options .contact-copy{min-height:36px;padding:8px 6px;margin-top:9px;font-size:11px;gap:6px}
#contact-options .contact-copy-status{margin-top:6px;font-size:10px}
@media(max-width:380px){#contact-options{padding:32px 14px 14px calc(var(--contact-shoulder,36px) + 14px)}}

/* Keep the left header seam straight; switching panels never leaves a height transition behind. */
.topbar.contact-expanded{transition:none}

/* Contact wing keeps the original header width and translucent background. */
#contact-options{padding-top:18px}
#contact-options .contact-options-footer{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:6px;align-items:center;margin-top:8px}
#contact-options .contact-copy{margin-top:0;font-size:10px;min-height:32px;padding:7px 5px}
#contact-options .contact-options-close{position:static;width:30px;height:32px;display:grid;place-items:center;border-radius:50%}
#contact-options .contact-options-close .ui-icon{width:17px;height:17px}
#contact-options .contact-option-arrow .ui-icon{width:15px;height:15px}
@media(max-width:380px){#contact-options{padding-top:18px}}

/* Contact extension uses the same translucent glass treatment as the header. */
#contact-options{background:linear-gradient(180deg,rgba(115,122,136,.72),rgba(92,101,116,.5));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

/* One backdrop-filter surface paints both the header and the contact wing, so alpha cannot produce a seam. */
#contact-glass{position:fixed;z-index:99;overflow:hidden;pointer-events:none;transition:height .3s cubic-bezier(.22,.7,.25,1);will-change:height}
#contact-glass[hidden]{display:none}
.contact-glass-surface{position:absolute;left:0;top:0;width:100%;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);pointer-events:none}
.topbar.contact-glass-active{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none}
#contact-options{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,.7,.25,1),display .3s allow-discrete,overlay .3s allow-discrete}
#contact-options:not(:popover-open){opacity:0;transform:translateY(-12px)}
@starting-style{#contact-options:popover-open{opacity:0;transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){#contact-glass,#contact-options{transition:none;will-change:auto}}

/* Contact actions share the copy button's pill geometry. */
#contact-options{--contact-action-radius:25px}
#contact-options .contact-option,#contact-options .contact-copy{border-radius:var(--contact-action-radius)}
#contact-options .contact-option:nth-child(-n+2){justify-content:center}
@media(min-width:701px){.topbar>a[href="#events"]{display:none}}

/* Plain contact links align in one compact row. */
#contact-options .contact-options-links{grid-template-columns:minmax(0,1fr) 34px 34px;align-items:center;gap:6px}
#contact-options .contact-option,#contact-options .contact-option:hover{background:transparent;border:0;border-radius:0;padding:0;min-height:40px;gap:5px}
#contact-options .contact-option:nth-child(3){grid-column:auto;order:-1;justify-content:flex-start;font-size:16px;white-space:nowrap}
#contact-options .contact-option:nth-child(3) .contact-option-icon{width:30px;height:30px;flex-basis:30px}
#contact-options .contact-option:nth-child(3) .contact-option-icon img{width:30px;height:30px}
#contact-options .contact-option-arrow{display:none}
@media(max-width:360px){#contact-options .contact-options-links{grid-template-columns:minmax(0,1fr) 30px 30px;gap:4px}#contact-options .contact-option:nth-child(3){font-size:15px}}

/* Equal visible icon height, including the filled Lucide phone. */
#contact-options .contact-option .contact-option-icon{width:30px;height:30px;flex:0 0 30px}
#contact-options .contact-option .contact-option-icon img{width:30px;height:30px;max-width:none}

/* Number and icons use one responsive size. */
#contact-options{--contact-item-size:clamp(18px,6vw,30px)}
#contact-options .contact-options-links{grid-template-columns:minmax(0,1fr) var(--contact-item-size) var(--contact-item-size);gap:4px}
#contact-options .contact-option:nth-child(3){font-size:var(--contact-item-size);letter-spacing:-1px;gap:4px;line-height:1}
#contact-options .contact-option .contact-option-icon,#contact-options .contact-option:nth-child(3) .contact-option-icon{width:var(--contact-item-size);height:var(--contact-item-size);flex:0 0 var(--contact-item-size)}
#contact-options .contact-option .contact-option-icon img,#contact-options .contact-option:nth-child(3) .contact-option-icon img{width:var(--contact-item-size);height:var(--contact-item-size)}

/* Content-sized links keep equal visible gaps around the messenger icons. */
#contact-options{--contact-item-size:clamp(24px,7vw,30px);--contact-link-gap:clamp(6px,2vw,10px)}
#contact-options .contact-options-links{display:flex;justify-content:space-between;gap:var(--contact-link-gap)}
#contact-options .contact-option{width:auto;flex:0 0 auto}
#contact-options .contact-option:nth-child(3){font-size:clamp(16px,4.5vw,18px);letter-spacing:0;gap:var(--contact-link-gap)}

/* Slightly tighter contact wing. */
#contact-options{padding-top:12px;padding-bottom:10px}
#contact-options .contact-options-footer{margin-top:6px}

#contact-options{padding-top:7px;padding-bottom:7px}
#contact-options .contact-options-footer{margin-top:3px}
#contact-options .contact-option{min-height:34px}

#contact-options{padding-bottom:19px}

/* Give the two contact rows room without a separate visual band. */
#contact-options .contact-options-footer{margin-top:12px}
#contact-options{padding-bottom:13px}

/* Mobile contacts expand the entire header downward. */
@media(max-width:700px){
 #contact-options{padding:10px 16px 16px}
 #contact-options .contact-options-links{justify-content:space-between}
 #contact-options .contact-options-footer{margin-top:12px}
}

#contact-options .contact-options-footer{grid-template-columns:minmax(0,1fr)}

/* Match the menu's downward unfolding motion on mobile. */
@media(max-width:700px){
 #contact-glass{transition-duration:.55s}
 #contact-options{transform:none;opacity:1;clip-path:inset(0 round 0 0 26px 26px)!important;transition:clip-path .55s cubic-bezier(.22,.7,.25,1),display .55s allow-discrete,overlay .55s allow-discrete}
 #contact-options:not(:popover-open){transform:none;opacity:1;clip-path:inset(0 0 100% 0)!important}
 @starting-style{#contact-options:popover-open{transform:none;opacity:1;clip-path:inset(0 0 100% 0)!important}}
}
@media(prefers-reduced-motion:reduce){#contact-glass,#contact-options{transition:none}}

/* Prevent focus from scrolling the clipped header after menu collapse. */
.topbar{overflow:clip}
@media(min-width:701px){#contact-options .contact-copy{height:38px;min-height:38px;padding:0 12px}}

@media(min-width:701px){#contact-options .contact-copy{font-size:13px;gap:8px}}

/* Mobile contacts are content inside the expanding header, with no popup animation. */
@media(max-width:700px){
 .topbar{transition:height .55s cubic-bezier(.22,.7,.25,1),padding-top .55s cubic-bezier(.22,.7,.25,1),padding-bottom .55s cubic-bezier(.22,.7,.25,1),transform .35s ease}
 .topbar.mobile-contact-open{height:calc(60px + var(--mobile-contact-height,108px));padding-bottom:calc(8px + var(--mobile-contact-height,108px));padding-top:8px}
 #contact-options[data-mobile-inline]{display:block;position:absolute;left:0;top:60px;width:100%;max-width:none;max-height:none;padding:10px 16px 16px;clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important;overflow:visible;background:none;backdrop-filter:none;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.topbar{transition:none}}

/* Closed inline contacts must stay hidden when the header expands for navigation. */
@media(max-width:700px){
 #contact-options[data-mobile-inline]{visibility:hidden;transition:visibility 0s .55s!important}
 .topbar.mobile-contact-open #contact-options[data-mobile-inline]{visibility:visible;transition:none!important}
 .topbar.menu-expanded:not(.mobile-contact-open) #contact-options[data-mobile-inline]{visibility:hidden!important;transition:none!important}
}

/* Menu above the main bar, contact options below it. */
@media(max-width:700px){
 .topbar.menu-expanded.mobile-contact-open{height:calc(60px + var(--menu-height) + var(--mobile-contact-height,108px));padding-top:calc(8px + var(--menu-height));padding-bottom:calc(8px + var(--mobile-contact-height,108px))}
 .topbar.menu-expanded.mobile-contact-open #contact-options[data-mobile-inline]{top:calc(60px + var(--menu-height));visibility:visible!important}
}

/* Hide contacts before their former menu offset is removed on collapse. */
@media(max-width:700px){.topbar.contacts-closing-from-menu #contact-options[data-mobile-inline]{visibility:hidden!important;transition:none!important}}

#contact-options .contact-copy{text-transform:uppercase}

#contact-options .contact-copy{--copy-content-size:clamp(12px,4.1vw,17px);font-size:var(--copy-content-size);line-height:1;white-space:nowrap}
#contact-options .contact-copy>img{width:var(--copy-content-size);height:var(--copy-content-size)}

#contact-options .contact-copy{--copy-content-size:12px}
/* Header copy action and a compact contact wing. */
.topbar>.header-contact-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-height:38px;padding:10px 16px;border:1px solid #ffffff70;background:transparent;color:#fff;white-space:nowrap;font-size:12px;line-height:1}
.topbar>.header-contact-copy>img{width:17px;height:17px;flex:0 0 17px;filter:brightness(0) invert(1)}
.header-copy-status{position:fixed;z-index:110;top:100px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border:1px solid #ffffff40;border-radius:16px;background:#343b48;color:#fff;box-shadow:0 8px 28px #0003;font:400 14px/1.4 Calleo,Arial,sans-serif;text-align:center;pointer-events:none}
.header-copy-status:empty{display:none}
@media(min-width:701px){.topbar>.header-phone{display:none}#contact-options{--contact-item-size:26px;--contact-link-gap:8px}#contact-options .contact-option:nth-child(3){font-size:16px}}
@media(min-width:701px) and (max-width:1000px){.topbar{gap:12px;padding-left:20px;padding-right:20px}.topbar .brand{width:200px}.topbar>.header-contact-copy{width:38px;padding:8px}.topbar>.header-contact-copy>span{display:none}}
@media(max-width:700px){.topbar>.header-contact-copy{width:32px;min-height:36px;padding:6px;border:0}.topbar>.header-contact-copy>span{display:none}.header-copy-status{top:72px;font-size:13px}}
/* Mobile contact actions occupy four separate rows. */
.contact-channel-label{display:none}
#contact-options .contact-options-footer[hidden]{display:none}
@media(max-width:700px){
 #contact-options .contact-options-links{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 #contact-options .contact-option,#contact-options .contact-option:nth-child(-n+2),#contact-options .contact-option:nth-child(3){width:100%;flex:0 0 auto;justify-content:flex-start;min-height:44px;padding:6px 10px;gap:12px;border:1px solid #ffffff30;border-radius:16px;background:#ffffff0d;font-size:16px}
 #contact-options .contact-channel-label{display:inline}
 #contact-options .contact-options-footer{margin-top:12px;grid-template-columns:minmax(0,1fr);gap:0}
 #contact-options .contact-copy{width:100%;min-height:44px;padding:12px;--copy-content-size:12px}
 #contact-options .contact-copy-status{position:static;transform:none;max-width:none;width:auto;padding:0;border:0;background:none;box-shadow:none;pointer-events:none}
 #contact-options .contact-copy-status:empty{display:none}
}
/* Distinct contact surfaces; messenger logos retain their white artwork. */
#contact-options .contact-option{box-shadow:0 3px 10px #10151e18;transition:filter .15s,background .15s}
#contact-options .contact-option[href^="tel:"]{background:#ffffff20;border:1px solid #ffffff40;color:#fff}
#contact-options .contact-option[title="MAX"]{background:linear-gradient(125deg,#318cff,#8157df);border:1px solid #ffffff26;color:#fff}
#contact-options .contact-option[title="WhatsApp"]{background:#25d366;border:1px solid #ffffff26;color:#fff}
#contact-options .contact-option:hover{filter:brightness(1.08)}
#contact-options .contact-copy{background:var(--gold,#f5a400);color:#242424;box-shadow:0 3px 10px #10151e18}
#contact-options .contact-copy:hover{filter:brightness(1.06)}
@media(min-width:701px){
 #contact-options .contact-options-links{gap:6px}
 #contact-options .contact-option{min-height:42px;border-radius:14px;padding:7px;justify-content:center}
 #contact-options .contact-option[href^="tel:"]{padding:7px 8px}
 #contact-options .contact-option[title]{width:42px;flex:0 0 42px}
}
@media(max-width:700px){
 #contact-options .contact-option,#contact-options .contact-option:nth-child(-n+2),#contact-options .contact-option:nth-child(3){padding:10px 14px;min-height:48px;border-radius:16px;font-weight:600}
 #contact-options .contact-copy{min-height:48px;border-radius:16px}
}
/* The same four stacked actions on desktop and mobile. */
#contact-options .contact-options-links{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-right:0}
#contact-options .contact-option,#contact-options .contact-option:nth-child(-n+2),#contact-options .contact-option:nth-child(3),#contact-options .contact-option[title]{width:100%;flex:0 0 auto;justify-content:flex-start;min-height:48px;padding:10px 14px;gap:12px;border-radius:16px;font-size:16px;font-weight:600}
#contact-options .contact-channel-label{display:inline}
#contact-options .contact-options-footer{margin-top:12px;grid-template-columns:minmax(0,1fr);gap:0}
#contact-options .contact-copy{width:100%;height:auto;min-height:48px;padding:12px;--copy-content-size:12px;border-radius:16px}
#contact-options .contact-copy-status{position:static;transform:none;width:auto;max-width:none;padding:0;border:0;background:none;box-shadow:none}
#contact-options .contact-copy-status:empty{display:none}
@media(max-width:700px){
 #contact-options .contact-copy{background:#ffffff20;border:1px solid #ffffff40;color:#fff;box-shadow:0 3px 10px #10151e18}
 #contact-options .contact-copy>img{filter:brightness(0) invert(1)}
 #contact-options .contact-copy:hover{filter:brightness(1.08)}
}