/* © Fernando Martínez Marín · VEOVIRTUAL® · veovirtual.com */
body .vvf-form,
body .vvf-form * {
box-sizing:border-box;
}
body .vvf-form {
display:flex;
flex-direction:column;
gap:18px;
margin:0;
}
body .vvf-form__trampa {
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
body .vvf-form__rejilla {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px 18px;
}
body .vvf-form__campo {
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
body .vvf-form__campo--ancho,
body .vvf-form__campo--completo {
grid-column:1 / -1;
}
body .vvf-form__etiqueta,
body .vvf-form__grupo legend {
color:var(--vv-oscuro,#222);
font-size:15px;
font-weight:600;
}
body .vvf-form__req {
color:var(--vv-acento,#b5502d);
}
body .vvf-form input[type=text],
body .vvf-form input[type=email],
body .vvf-form input[type=tel],
body .vvf-form input[type=number],
body .vvf-form input[type=date],
body .vvf-form input[type=url],
body .vvf-form select,
body .vvf-form textarea {
width:100%;
min-height:52px;
padding:0 16px;
border:1px solid color-mix(in srgb,var(--vv-texto,#333) 22%,transparent);
border-radius:var(--vv-radio,12px);
background-color:#fff;
color:var(--vv-texto,#333);
font-family:inherit;
font-size:16px;
transition:border-color .2s ease,box-shadow .2s ease;
}
body .vvf-form textarea {
min-height:140px;
padding:14px 16px;
line-height:1.5;
resize:vertical;
}
body .vvf-form input:focus,
body .vvf-form select:focus,
body .vvf-form textarea:focus {
border-color:var(--vv-acento,#b5502d);
box-shadow:0 0 0 3px color-mix(in srgb,var(--vv-acento,#b5502d) 22%,transparent);
outline:0;
}
body .vvf-form input[type=file] {
padding:14px;
border:2px dashed color-mix(in srgb,var(--vv-texto,#333) 22%,transparent);
border-radius:var(--vv-radio,12px);
background-color:var(--vv-claro,#faf7f2);
font-family:inherit;
font-size:15px;
}
body .vvf-form__grupo {
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
border:0;
}
body .vvf-form__grupo legend {
margin:0 0 8px;
padding:0;
}
body .vvf-form__casilla {
position:relative;
cursor:pointer;
}
body .vvf-form__casilla input {
position:absolute;
opacity:0;
}
body .vvf-form__casilla span {
display:inline-flex;
align-items:center;
min-height:44px;
padding:0 16px;
border:1px solid color-mix(in srgb,var(--vv-texto,#333) 22%,transparent);
border-radius:999px;
background-color:#fff;
font-size:15px;
}
body .vvf-form__casilla input:checked + span {
border-color:var(--vv-acento,#b5502d);
background-color:var(--vv-acento,#b5502d);
color:#fff;
}
body .vvf-form__casilla input:focus-visible + span {
outline:2px solid var(--vv-oscuro,#222);
outline-offset:2px;
}
body .vvf-form__ayuda {
margin:0;
color:color-mix(in srgb,var(--vv-texto,#333) 70%,transparent);
font-size:14px;
}
body .vvf-form__campo.is-error input,
body .vvf-form__campo.is-error select,
body .vvf-form__campo.is-error textarea {
border-color:#c0392b;
}
body .vvf-form__campo.is-error .vvf-form__etiqueta {
color:#c0392b;
}
body .vvf-form__privacidad {
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.5;
cursor:pointer;
}
body .vvf-form__privacidad input {
flex-shrink:0;
width:20px;
height:20px;
margin:1px 0 0;
accent-color:var(--vv-acento,#b5502d);
}
body .vvf-form__privacidad a {
color:inherit;
text-decoration:underline;
}
body .vvf-form__estado {
margin:0;
font-size:15px;
}
body .vvf-form__estado:empty {
display:none;
}
body .vvf-form__estado--error {
color:#c0392b;
font-weight:600;
}
body .vvf-form__boton {
align-self:flex-start;
min-height:54px;
padding:0 32px;
border:0;
border-radius:999px;
background-color:var(--vv-acento,#b5502d);
color:#fff;
font-family:inherit;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:transform .2s ease,background-color .2s ease;
}
body .vvf-form__boton:hover {
background-color:var(--vv-oscuro,#222);
transform:translateY(-2px);
}
body .vvf-form__boton.is-cargando {
opacity:.6;
pointer-events:none;
}
body .vvf-form__gracias {
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
padding:36px 20px;
border-radius:var(--vv-radio,12px);
background-color:var(--vv-claro,#faf7f2);
text-align:center;
outline:0;
}
body .vvf-form__gracias svg {
width:52px;
height:52px;
padding:12px;
border-radius:50%;
background-color:var(--vv-acento,#b5502d);
fill:none;
stroke:#fff;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
body .vvf-form__gracias p {
max-width:440px;
margin:0;
font-size:17px;
}
@media (max-width:767px) {
body .vvf-form__rejilla {
grid-template-columns:minmax(0,1fr);
}
body .vvf-form__boton {
align-self:stretch;
}
}