.vexel-header-eclipse { --vexel-header-eclipse-linea: color-mix(in srgb, var(--wp--preset--color--bg) 16%, transparent);
position: relative;
background-color: var(--wp--preset--color--primary);
background-image: var(--vexel-header-eclipse-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vexel-header-eclipse.is-sticky {
position: sticky;
top: 0;
z-index: 100;
}
.vexel-header-eclipse__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--40);
min-height: 72px; padding-block: 24px;
} .vexel-header-eclipse__logo {
display: block;
flex-shrink: 0;
line-height: 0;
}
.vexel-header-eclipse__logo img {
display: block;
width: 224px;
height: 64px;
max-width: 100%;
object-fit: contain;
object-position: left center;
} .vexel-header-eclipse__side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.vexel-header-eclipse__phone {
margin: 0;
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--bg);
text-align: right;
}
.vexel-header-eclipse__phone a {
color: inherit;
text-decoration: none;
}
.vexel-header-eclipse__phone a:hover,
.vexel-header-eclipse__phone a:focus-visible {
text-decoration: underline;
}
.vexel-header-eclipse__nav {
display: block;
}
.vexel-header-eclipse__list {
display: flex;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.vexel-header-eclipse__item {
position: relative;
margin: 0;
} .vexel-header-eclipse__link,
.vexel-header-eclipse__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 0;
border: 0;
background: none;
font-family: inherit;
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--bg-cream);
text-decoration: none;
cursor: pointer;
}
.vexel-header-eclipse__link:hover,
.vexel-header-eclipse__link:focus-visible,
.vexel-header-eclipse__trigger:hover,
.vexel-header-eclipse__trigger:focus-visible {
color: var(--wp--preset--color--bg);
text-decoration: underline;
}
.vexel-header-eclipse__link[aria-current="page"],
.vexel-header-eclipse__item.has-current > .vexel-header-eclipse__trigger {
color: var(--wp--preset--color--bg);
text-decoration: underline;
}
.vexel-header-eclipse__caret {
flex-shrink: 0;
width: 24px;
height: 24px;
transition: transform 0.2s ease;
}
.vexel-header-eclipse__item.has-panel:hover .vexel-header-eclipse__caret,
.vexel-header-eclipse__item.has-panel:focus-within .vexel-header-eclipse__caret,
.vexel-header-eclipse__trigger[aria-expanded="true"] .vexel-header-eclipse__caret {
transform: rotate(180deg);
} .vexel-header-eclipse__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: var(--wp--custom--radius--md);
background-color: var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--navy);
text-decoration: none;
}
.vexel-header-eclipse__cta:hover,
.vexel-header-eclipse__cta:focus-visible {
background-color: var(--wp--preset--color--accent-hover);
color: var(--wp--preset--color--navy);
} .vexel-header-eclipse__panel {
position: absolute;
top: 100%;
right: 0;
z-index: 20;
min-width: 320px;
padding: var(--wp--preset--spacing--30);
border-radius: var(--wp--custom--radius--md);
background-color: var(--wp--preset--color--bg-cream);
box-shadow: var(--wp--custom--shadow--lg);
}
.vexel-header-eclipse__panel[hidden] {
display: none;
} .vexel-header-eclipse__item.has-mega {
position: static;
} .vexel-header-eclipse__item.has-mega .vexel-header-eclipse__trigger {
position: relative;
}
.vexel-header-eclipse__item.has-mega .vexel-header-eclipse__trigger::after {
content: "";
position: absolute;
top: 100%;
left: -16px;
right: -16px;
height: 26px;
} @media (min-width: 1024px) {
.vexel-header-eclipse__item.has-panel:hover .vexel-header-eclipse__panel,
.vexel-header-eclipse__item.has-panel:focus-within .vexel-header-eclipse__panel {
display: block;
} .vexel-header-eclipse__item.has-panel.is-closed .vexel-header-eclipse__panel,
.vexel-header-eclipse__item.has-panel.is-closed:focus-within .vexel-header-eclipse__panel {
display: none;
}
}
.vexel-header-eclipse__panel-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px var(--wp--preset--spacing--30);
margin: 0;
padding: 0;
list-style: none;
}
.vexel-header-eclipse__panel-links a {
display: block;
padding: 4px 0;
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--navy);
text-decoration: none;
white-space: nowrap;
}
.vexel-header-eclipse__panel-links a:hover,
.vexel-header-eclipse__panel-links a:focus-visible,
.vexel-header-eclipse__panel-links a[aria-current="page"] {
color: var(--wp--preset--color--celeste-texto);
text-decoration: underline;
} .vexel-header-eclipse__panel.is-mega {
position: absolute;
top: 100%;
right: auto;
left: 0;
width: 100%;
min-width: 0;
padding: 56px 0 64px;
border-radius: 0;
background-color: var(--wp--preset--color--bg-soft);
box-shadow: var(--wp--custom--shadow--md);
}
.vexel-header-eclipse__panel-inner {
display: grid;
grid-template-columns: 336px 1fr 1fr;
gap: 0 72px;
align-items: start;
} .vexel-header-eclipse__panel-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.vexel-header-eclipse__panel-heading {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--2-xl);
font-weight: 500;
line-height: 40px;
color: var(--wp--preset--color--secondary);
}
.vexel-header-eclipse__panel-heading em,
.vexel-header-eclipse__panel-heading i {
font-style: italic;
font-weight: inherit;
color: var(--wp--preset--color--celeste-texto);
}
.vexel-header-eclipse__panel-texto {
margin: 0;
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
color: var(--wp--preset--color--secondary);
}
.vexel-header-eclipse__panel-cta {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 208px;
padding-inline: 16px;
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
text-decoration: none;
} .vexel-header-eclipse__panel-todas {
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--celeste-texto);
text-decoration: underline;
text-underline-offset: 3px;
}
.vexel-header-eclipse__panel-todas:hover,
.vexel-header-eclipse__panel-todas:focus-visible {
color: var(--wp--preset--color--secondary);
} .vexel-header-eclipse__panel-grupo-titulo {
margin: 0 0 24px;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--xl);
font-weight: 400;
line-height: 32px;
color: var(--wp--preset--color--secondary);
}
.vexel-header-eclipse__panel-grupo-lista {
display: grid;
grid-template-columns: repeat(var(--vexel-header-panel-cols, 1), minmax(0, 1fr)); gap: 16px 32px;
margin: 0;
padding: 0;
list-style: none; grid-auto-flow: column;
grid-template-rows: repeat(4, auto);
}
.vexel-header-eclipse__panel-grupo-lista li {
margin: 0;
}
.vexel-header-eclipse__panel-grupo-lista a {
display: inline-block;
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
color: var(--wp--preset--color--secondary);
text-decoration: none;
}
.vexel-header-eclipse__panel-grupo-lista a:hover,
.vexel-header-eclipse__panel-grupo-lista a:focus-visible,
.vexel-header-eclipse__panel-grupo-lista a[aria-current="page"] {
color: var(--wp--preset--color--celeste-texto);
text-decoration: underline;
text-underline-offset: 3px;
} .vexel-header-eclipse__toggle {
display: none;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--bg-cream);
cursor: pointer;
}
.vexel-header-eclipse__burger,
.vexel-header-eclipse__burger::before,
.vexel-header-eclipse__burger::after {
display: block;
width: 24px;
height: 1px;
margin-inline: auto;
background-color: currentColor;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.vexel-header-eclipse__burger::before,
.vexel-header-eclipse__burger::after {
content: "";
}
.vexel-header-eclipse__burger::before {
transform: translateY(-8px);
}
.vexel-header-eclipse__burger::after {
transform: translateY(8px);
} .vexel-header-eclipse__toggle[aria-expanded="true"] .vexel-header-eclipse__burger {
background-color: transparent;
}
.vexel-header-eclipse__toggle[aria-expanded="true"] .vexel-header-eclipse__burger::before {
transform: translateY(0) rotate(45deg);
}
.vexel-header-eclipse__toggle[aria-expanded="true"] .vexel-header-eclipse__burger::after {
transform: translateY(0) rotate(-45deg);
}
@media (max-width: 1023px) { .vexel-header-eclipse__inner {
flex-wrap: nowrap;
align-items: center;
min-height: 0;
padding-block: 16px;
}
.vexel-header-eclipse__logo img {
width: 168px;
height: 48px;
} .vexel-header-eclipse__logo,
.vexel-header-eclipse__toggle {
position: relative;
z-index: 210;
}
.vexel-header-eclipse__toggle {
display: block;
margin-left: auto;
} .vexel-header-eclipse__side {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0; padding: 80px 0 var(--wp--preset--spacing--50);
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--wp--preset--color--navy);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.vexel-header-eclipse__side.is-open {
visibility: visible;
opacity: 1;
transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.vexel-header-eclipse__side {
transition: none;
}
} .vexel-header-eclipse__phone {
order: 2;
margin: var(--wp--preset--spacing--30) var(--wp--custom--gutter) 0;
padding: var(--wp--preset--spacing--20) 0 0;
border-top: 1px solid var(--vexel-header-eclipse-linea);
font-size: var(--wp--preset--font-size--md);
text-align: left;
}
.vexel-header-eclipse__phone a {
font-weight: 700;
} .vexel-header-eclipse__nav {
order: 1;
padding-inline: var(--wp--custom--gutter);
}
.vexel-header-eclipse__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.vexel-header-eclipse__item + .vexel-header-eclipse__item {
border-top: 1px solid var(--vexel-header-eclipse-linea);
}
.vexel-header-eclipse__item.is-cta {
border-top: 0;
padding-top: var(--wp--preset--spacing--30);
} .vexel-header-eclipse__link,
.vexel-header-eclipse__trigger {
justify-content: space-between;
width: 100%;
min-height: 56px;
padding-block: var(--wp--preset--spacing--20);
font-size: var(--wp--preset--font-size--md);
text-align: left;
}
.vexel-header-eclipse__caret {
transition: transform 0.2s ease;
}
.vexel-header-eclipse__trigger[aria-expanded="true"] .vexel-header-eclipse__caret {
transform: rotate(180deg);
}
.vexel-header-eclipse__cta {
width: 100%;
min-height: 56px;
}  .vexel-header-eclipse__panel {
position: static;
min-width: 0;
box-shadow: none;
} .vexel-header-eclipse__panel-links {
grid-template-columns: 1fr;
}
.vexel-header-eclipse__item.has-mega .vexel-header-eclipse__trigger::after {
content: none;
}
.vexel-header-eclipse__panel.is-mega {
position: static;
width: auto;
padding: 0 0 var(--wp--preset--spacing--30);
background-color: transparent;
box-shadow: none;
}
.vexel-header-eclipse__panel.is-mega .vexel-header-eclipse__panel-inner {
display: block;
max-width: none;
padding-inline: 0;
} .vexel-header-eclipse__panel-grupo {
padding-left: var(--wp--preset--spacing--30);
}
.vexel-header-eclipse__panel-intro {
display: none;
}
.vexel-header-eclipse__panel-grupo + .vexel-header-eclipse__panel-grupo {
margin-top: var(--wp--preset--spacing--30);
}
.vexel-header-eclipse__panel-grupo-titulo {
margin-bottom: var(--wp--preset--spacing--10);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--xs);
line-height: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--bg);
opacity: 0.6;
}
.vexel-header-eclipse__panel-grupo-lista {
grid-auto-flow: row;
grid-template-rows: none;
grid-template-columns: 1fr;
gap: 0;
}
.vexel-header-eclipse__panel-grupo-lista a {
display: flex;
align-items: center;
min-height: 44px;
color: var(--wp--preset--color--bg);
}
.vexel-header-eclipse__panel-grupo-lista a:hover,
.vexel-header-eclipse__panel-grupo-lista a:focus-visible,
.vexel-header-eclipse__panel-grupo-lista a[aria-current="page"] {
color: var(--wp--preset--color--bg);
text-decoration: underline;
}
} .vexel-header-eclipse-abierto,
.vexel-header-eclipse-abierto body {
overflow: hidden;
}