.container-columns {
height: fit-content;
margin-bottom: 120px;
}
main {
min-height: 80vh;
}
.text-intro {
max-width: 800px;
padding: 0 80px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
color: #666666;
margin-bottom: 40px;
}
.bloc {
padding: 40px 0 20px 0;
}
.bloc p {
padding-top: 20px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 500px;
}
.input-group label {
font-family: sans-serif;
font-size: 16px;
color: #666666;
}
.input-group input[type='email'],
.input-texto {
width: 100%;
max-width: 500px;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
color: #333;
box-sizing: border-box;
}
.input-moderno {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-family: sans-serif;
color: #666666;
cursor: pointer;
margin-bottom: 10px;
}
.input-moderno input[type='checkbox'],
.input-moderno input[type='radio'] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border: 2px solid #ccc;
background-color: #fff;
margin: 0;
cursor: pointer;
display: grid;
place-content: center;
transition: all 0.2s ease-in-out;
}
.input-moderno input:hover {
border-color: #3a1293;
}
.input-moderno input:checked {
background-color: #3a1293;
border-color: #3a1293;
}
.input-moderno input[type='checkbox'] {
border-radius: 6px;
font-size: 14px;
}
.input-moderno input[type='checkbox']::before {
content: '';
width: 12px;
height: 12px;
transform: scale(0);
transition: transform 0.2s ease-in-out;
background-color: white;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.input-moderno input[type='checkbox']:checked::before {
transform: scale(1);
}
.input-moderno input[type='radio'] {
border-radius: 50%;
}
.input-moderno input[type='radio']::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
transform: scale(0);
transition: transform 0.2s ease-in-out;
background-color: white;
}
.input-moderno input[type='radio']:checked::before {
transform: scale(1);
}
.boton-moderno {
margin: 24px 0;
appearance: none;
-webkit-appearance: none;
font-family: sans-serif;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
color: white;
background-color: #3a1293;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.boton-moderno:hover {
background-color: #3a1293;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-1px);
}
.boton-moderno:active {
transform: translateY(1px) scale(0.98);
box-shadow: none;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.text-intro {
padding: 24px 40px !important;
}
}
@media screen and (max-width: 767px) {
.text-intro {
padding: 20px 20px;
}
}