.vexel-eclipse-form {
--vexel-form-titular: 553px;
--vexel-form-ancho: 600px;
--vexel-form-padding: 70px;
--vexel-form-hueco: 28px;
--vexel-form-velo: 0.8;
position: relative;
padding-block: var(--vexel-form-padding);
overflow: hidden;
color: var(--wp--preset--color--bg);
}
.vexel-eclipse-form__fondo {
position: absolute;
inset: 0;
pointer-events: none;
}
.vexel-eclipse-form__fondo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vexel-eclipse-form__fondo::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--wp--preset--color--secondary);
opacity: var(--vexel-form-velo);
}
.vexel-eclipse-form__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vexel-form-hueco);
} .vexel-eclipse-form__cabecera {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: var(--vexel-form-titular);
max-width: 100%;
text-align: center;
}
.vexel-eclipse-form__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
width: 100%;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--3-xl);
font-weight: 500;
line-height: 1;
color: var(--wp--preset--color--bg);
} .vexel-eclipse-form__heading em,
.vexel-eclipse-form__heading i {
font-style: italic;
font-weight: inherit;
color: inherit;
}
.vexel-eclipse-form__intro {
margin: 0;
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
color: var(--wp--preset--color--bg);
}
.vexel-eclipse-form__aviso {
margin: 0;
padding: 12px 24px;
border-radius: var(--wp--custom--radius--md);
width: var(--vexel-form-ancho);
max-width: 100%;
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
}
.vexel-eclipse-form__aviso.is-ok {
background-color: var(--wp--preset--color--success);
color: var(--wp--preset--color--bg);
}
.vexel-eclipse-form__aviso.is-error {
background-color: var(--wp--preset--color--error);
color: var(--wp--preset--color--bg);
} .vexel-eclipse-form__form {
display: flex;
flex-direction: column;
gap: 24px;
width: var(--vexel-form-ancho);
max-width: 100%;
}
.vexel-eclipse-form__honeypot { position: absolute;
left: -9999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
.vexel-eclipse-form__rejilla {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.vexel-eclipse-form__campo {
margin: 0;
}
.vexel-eclipse-form__campo input,
.vexel-eclipse-form__campo textarea {
box-sizing: border-box;
display: block;
width: 100%;
height: 56px;
padding: 0 24px;
border: 1px solid var(--wp--preset--color--secondary);
border-radius: var(--wp--custom--radius--md);
background-color: var(--wp--preset--color--bg);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
color: var(--wp--preset--color--navy);
}
.vexel-eclipse-form__campo.is-mensaje textarea {
height: 88px;
padding: 16px 24px;
resize: vertical;
}
.vexel-eclipse-form__campo input::placeholder,
.vexel-eclipse-form__campo textarea::placeholder {
color: var(--wp--preset--color--text-muted);
opacity: 1;
}
.vexel-eclipse-form__campo input:focus-visible,
.vexel-eclipse-form__campo textarea:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
.vexel-eclipse-form__campo input[aria-invalid="true"],
.vexel-eclipse-form__campo textarea[aria-invalid="true"] {
border-color: var(--wp--preset--color--error);
border-width: 2px;
} .vexel-eclipse-form__pie {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
}
.vexel-eclipse-form__consentimientos {
display: flex;
flex-direction: column;
gap: 8px;
}
.vexel-eclipse-form__casilla {
display: flex;
align-items: flex-start;
gap: 16px;
font-size: var(--wp--preset--font-size--sm);
line-height: 24px;
color: var(--wp--preset--color--bg);
cursor: pointer;
} .vexel-eclipse-form__casilla input[type="checkbox"] {
appearance: none;
flex-shrink: 0;
width: 24px;
height: 24px;
margin: 0;
border: 1px solid var(--wp--preset--color--bg);
background-color: transparent;
cursor: pointer;
}
.vexel-eclipse-form__casilla input[type="checkbox"]:checked {
background-color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.vexel-eclipse-form__casilla input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 6px;
height: 12px;
margin: 3px auto 0;
border: solid var(--wp--preset--color--navy);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vexel-eclipse-form__casilla input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
.vexel-eclipse-form__casilla a {
color: inherit;
text-decoration: underline;
} .vexel-eclipse-form__enviar {
flex-shrink: 0;
width: 189px;
padding: 16px 24px;
border: 0;
border-radius: var(--wp--custom--radius--md);
background-color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--md);
line-height: 24px;
color: var(--wp--preset--color--navy);
cursor: pointer;
}
.vexel-eclipse-form__enviar:hover,
.vexel-eclipse-form__enviar:focus-visible {
background-color: var(--wp--preset--color--primary-hover);
}  @media (max-width: 767px) {
.vexel-eclipse-form__rejilla {
grid-template-columns: minmax(0, 1fr);
}
.vexel-eclipse-form__pie {
flex-direction: column;
align-items: stretch;
gap: var(--wp--preset--spacing--30);
}
.vexel-eclipse-form__enviar {
width: 100%;
}
.vexel-eclipse-form__heading {
line-height: 1.25;
}
}