/* The site's own header, menu, footer and floating buttons. */
:root { --ink: #031B4E; --text: #313956; --blue: #01BAEB; --tint: #F3F3FF; --night: #000114; --green: #128C4B; }

.sh { position: sticky; top: 0; z-index: 1000; display: flex; align-items: stretch; background: var(--tint); }
.sh-logo { display: flex; align-items: center; flex: none; padding: 15px; }
.sh-logo img { display: block; width: auto; height: 80px; }
.sh-nav { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; padding: 0 20px; border-radius: 0 0 0 30px; background: #fff; }
.sh-menu, .sh-sub { margin: 0; padding: 0; list-style: none; }
.sh-menu { display: flex; flex-wrap: nowrap; gap: 26px; }
.sh-menu li { position: relative; }
.sh-menu a { display: block; padding: 8px 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.3; }
.sh-menu a:hover, .sh-menu a:focus, .sh-menu .sh-current > a { color: var(--blue); }
.sh-menu > li > a { white-space: nowrap; }
.sh-menu > li:has(> .sh-sub) > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.sh-sub { position: absolute; top: 100%; left: 0; z-index: 2; visibility: hidden; min-width: 250px; padding: 10px 0; border-radius: 10px; background: #fff; box-shadow: 0 10px 35px rgba(0, 0, 0, .1); opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; }
.sh-sub .sh-sub { top: -10px; left: 100%; }
.sh-sub li:hover > .sh-sub, .sh-sub li:focus-within > .sh-sub, .sh-menu > li:hover > .sh-sub, .sh-menu > li:focus-within > .sh-sub { visibility: visible; opacity: 1; transform: none; }
.sh-sub a { padding: 8px 20px; font-size: 14px; }
.sh-sub li:has(> .sh-sub) > a::after { content: "›"; float: right; margin-left: 10px; }
.sh-sub-open { display: none; }

.sh-actions { display: flex; flex: none; align-items: center; gap: 12px; padding: 0 20px 0 12px; background: #fff; }
.sh-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--ink); }
.sh-icon svg { width: 16px; height: 16px; }
.sh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sh-btn:hover { background: var(--ink); color: #fff; }
.sh-btn svg { width: 14px; height: 14px; }
.sh-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sh-toggle svg { width: 32px; height: 32px; }
.sh-close { display: none; }

.sf { padding-top: 80px; background: var(--night) url(/wp-content/uploads/2024/04/pattern-02.png); color: #c8cbdb; }
.sf-wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.sf a { color: #c8cbdb; }
.sf a:hover { color: var(--blue); }
.sf h2 { margin: 0 0 20px; color: #fff; font-size: 20px; line-height: 1.3; }
.sf ul { margin: 0; padding: 0; list-style: none; }
.sf-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.sf-main li { margin-bottom: 10px; }
.sf-main p { margin: 0; line-height: 1.6; }
.sf-logo img { display: block; width: auto; height: 80px; margin-bottom: 20px; border-radius: 12px; background: #fff; }
.sf dl { margin: 0; }
.sf dl div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sf dt { font-weight: 600; }
.sf dd { margin: 0; color: #fff; text-align: right; }
.sf-contact { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; margin-top: 48px !important; padding: 28px !important; border-radius: 30px; background: rgba(255, 255, 255, .06); }
.sf-contact li { display: flex; align-items: center; gap: 14px; }
.sf-contact svg { flex: none; width: 26px; height: 26px; color: var(--blue); }
.sf-contact span { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; font-weight: 700; }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; }
.sf-bottom p { margin: 0; }
.sf-bottom p a { text-decoration: underline; }
.sf-social { display: flex; gap: 10px; }
.sf-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.sf-social a:hover { background: var(--blue); color: #fff; }
.sf-social svg { width: 16px; height: 16px; }

.float-contact { position: fixed; bottom: 24px; left: 24px; z-index: 900; display: grid; gap: 14px; }
.float-contact a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.float-contact svg { width: 24px; height: 24px; }
.float-whatsapp { background: #25D366; }
.float-call { background: #E0202C; }
.to-top { position: fixed; right: 24px; bottom: 74px; z-index: 900; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); cursor: pointer; }
.to-top.is-visible { display: grid; }
.to-top svg { width: 16px; height: 16px; }

@media (max-width: 1240px) {
  .sh-menu { gap: 16px; }
  .sh-menu a { font-size: 14px; }
  .sh-logo img { height: 64px; }
  .sh-icon { display: none; }
}

@media (max-width: 1060px) {
  .sh { align-items: center; justify-content: space-between; }
  .sh-logo img { height: 58px; }
  .sh-actions { padding-right: 10px; border-radius: 0 0 0 30px; align-self: stretch; }
  .sh-icon { display: grid; }
  .sh-btn { display: none; }
  .sh-toggle { display: block; }
  .sh-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; display: block; width: min(340px, 86vw); padding: 80px 0 24px; border-radius: 0; overflow-y: auto; box-shadow: -10px 0 35px rgba(0, 0, 0, .15); transform: translateX(105%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .sh.is-open .sh-nav { transform: none; visibility: visible; }
  .sh.is-open .sh-toggle { position: fixed; top: 14px; right: 12px; z-index: 1200; }
  .sh.is-open .sh-open { display: none; }
  .sh.is-open .sh-close { display: block; }
  .sh-menu { display: block; }
  .sh-menu li { border-top: 1px solid #edeef6; }
  .sh-menu li:has(> .sh-sub) { display: grid; grid-template-columns: 1fr 52px; }
  .sh-menu a { padding: 13px 20px; font-size: 16px; white-space: normal; }
  .sh-menu > li > a { white-space: normal; }
  .sh-menu > li:has(> .sh-sub) > a::after, .sh-sub li:has(> .sh-sub) > a::after { content: none; }
  .sh-sub-open { display: block; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .sh-sub-open svg { width: 14px; height: 14px; transition: transform .15s; }
  .sh-sub-open[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sh-sub, .sh-sub .sh-sub { position: static; display: none; grid-column: 1 / -1; min-width: 0; padding: 0; border-radius: 0; background: var(--tint); box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .sh-sub.is-open { display: block; }
  .sh-sub a { padding-left: 32px; font-size: 15px; }
  .sh-sub .sh-sub a { padding-left: 44px; }

  .sf { padding-top: 56px; }
  .sf-main { grid-template-columns: 1fr 1fr; gap: 36px; }
  .sf-contact { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .float-contact { display: none; }
  .to-top { bottom: 124px; right: 16px; }
  .sf-main { grid-template-columns: 1fr; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}

.sf dt, .sf dd { white-space: nowrap; }
@media (min-width: 1061px) { .sf-main { grid-template-columns: 1.4fr .9fr .9fr 1.2fr; gap: 40px; } }
.sf-bottom { padding-right: 150px; }
@media (max-width: 767px) { .sf-bottom { padding-right: 0; padding-bottom: 110px; } }

.sh-logo img { height: 64px; }
.sf-logo img { height: 64px; padding: 0; border-radius: 0; background: none; }
@media (max-width: 1240px) { .sh-logo img { height: 56px; } }
@media (max-width: 1060px) { .sh-logo img { height: 48px; } }
