@font-face {
    font-family: 'Public Sans';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
}

main#main-contacto{
    margin: auto;
    padding: 90px 322px 51px 282.5px;
    text-align: center;
    background-color: #f8f9fa;
}

h2#titulo-contacto{
    width: 691px;
    margin: auto;
    font-size: 30pt;
    text-transform: uppercase;
    color: #1a2b3c;
}

div#form-container{
    width: 545px;
    margin: auto;
    background-color: #cecece;
    border-radius: 41px;
    border: 7px solid #1a2b3c;
    box-shadow: 0 0 30px 20px #00000050;
    padding: 30px 55px 60px 23.75px;
    margin-top: 50px;
}

h3#titulo-formulario{
    width: 553px;
    margin: 20px auto;
    font-size: 30pt;
    text-transform: uppercase;
    color: #1a2b3c;
    line-height: 1;
}

div.dom-box{
    width: 485px;
    text-align: left;
    margin: 39px auto;
}

div.dom-box > label{
    font-family: 'Poppins Bold', Helvetica, Verdana;
    font-size: 20pt;
    display: block;
    color: #1a2b3c;
    text-transform: uppercase;
    letter-spacing: 11%;
    line-height: 1.2;
    margin-bottom: 16.5px;
}

div.dom-box > input{
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 13.5pt;
    font-weight: 400;
    color: #000000;
    outline: none;
    width: 100%;
    padding: 16px 10px 16px 31.25px;
    border: none;
    border-radius: 20px;
    background: #f8f9fa;
    transition: color 0.2s step-end;
}

div.dom-box >input::placeholder{
    color: #00000080;
    font-size: 13.3pt;
    font-style: italic;
}

div.dom-box > input:focus{
    color: #000000;
    border: 1px solid #1a2b3cFF;
    background: #e2e2ff;
    box-shadow: 0 0 15px 5px #e2e2ff;
}

div.dom-box > select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 14pt;
    font-weight: 400;
    color: #000000;
    outline: none;
    width: 106%;
    padding: 16px 10px 16px 31.25px;
    border: none;
    border-radius: 20px;
    background: #f8f9fa;
    transition: color 0.2s step-end;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"%3E%3Cpolyline points="5%2C5 50%2C52 95%2C5" fill="none" stroke="%23111111" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 31.25px top 50%;
    background-size: 12px auto;
}

div.dom-box > select:focus{
    color: #000000;
    border: 1px solid #1a2b3cFF;
    background: #e2e2ff;
    box-shadow: 0 0 15px 5px #e2e2ff;
    outline: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"%3E%3Cpolyline points="5%2C5 50%2C52 95%2C5" fill="none" stroke="%231a2b3c" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 31.25px top 50%;
    background-size: 12px auto;
}

div.dom-box > select > option{
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 11pt;
    text-transform: capitalize;
}

div.dom-box > p {
    font-family: 'Poppins Bold', Helvetica, Verdana;
    font-size: 20pt;
    display: block;
    color: #1a2b3c;
    text-transform: uppercase;
    letter-spacing: 12%;
    line-height: 1.2;
    margin-bottom: 16.5px;
}

div#container-radios{
    display: flex;
    justify-content: space-between;
    margin-left: 30px;
    align-items: center;
}

div.radios-box{
    display: flex;
    align-items: center;
    gap: 9px;
}

.radios-box > label{
    font-family: 'Public Sans', sans-serif, 'Open Sauce';
    font-size: 17pt;
    font-weight: bold;
    margin: 20px auto;
}


input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f8f9fa;
    cursor: pointer;
    border: 1px solid #535353;
    box-shadow: 0 0 0 2px #f8f9fa;
    transition: all 0.18s ease;
}

input[type = "radio"]:checked{
    background: #1a2b3c;
    border: 1px solid #f8f9fa;
    box-shadow: 0 0 0 2px #1a2b3c, 0 0 5px 3px #1A2B3CFF;;
}

div#container-acepPol{
    width: 485px;
    text-align: left;
    margin: 39px auto;
}

div.aceptar-pol{
    display: flex;
    align-items: center;
    gap: 15px;
}

.aceptar-pol > input[type = "checkbox"]{
    appearance: none;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 1px solid #000000;
    background: #f8f9fa;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.18s ease;
}

.aceptar-pol > input[type = "checkbox"]:checked{
    background: #004aad;
    border: 1px solid #000000;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23ffffff" d="M 2.5288989,296.00266 106.92998,192.36477 193.58841,278.05967 418.87252,53.938544 505.09853,140.57989 176.20617,469.43071 Z"/%3E%3C/svg%3E');
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 5px 3px #004aadAA;
}

.aceptar-pol >label{
    font-family: 'Public Sans', sans-serif, 'Open Sauce';
    font-size: 14pt;
}

.aceptar-pol > label > a{
    color: #004aad;
    text-decoration: underline;
}

div#botones{
    display: flex;
    justify-content: space-evenly;
}

button.boton{
    width: 193px;
    height: 53px;
    font-family: 'Public Sans', sans-serif, 'Open Sauce';
    font-size: 15pt;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    margin: 20px 0px 10px 10px;
}

button#btn-enviar{
    background: #1a2b3c;
    color: #ffffff;
    transition: all 0.28s linear;
}

button#btn-enviar:hover, button#btn-cancelar:hover{
    box-shadow: 0 0 7px 3px #1a2b3cAA;
    transform: scale(1);
}

button#btn-cancelar{
    background: #ffffff;
    color: #1a2b3c;
    border: 2px solid #1a2b3c;
    transition: all 0.28s linear;
}

section#sección-ubicacion{
    padding: 0px 100px 30px 150px;
}

h3.subtitulos-contacto{
    font-size: 22pt;
    text-transform: capitalize;
    color: #1a2b3c;
    margin-bottom: 40px;
}

div#mapa-ubi{
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

div#mapa-ubi > iframe{
    width: 761px;
    height: 482px;
    box-shadow: 5px 5px 20px 5px #00000050;
}

span.error-msg{
    display: block;
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 13.3pt;
    font-weight: bold;
    padding: 11.25px;
    border-radius: 14px;
    margin-top: calc(1rem - 1px);
    text-align: left;
    position: relative;
    width: 96%;
    margin-left: 13.5px;
    animation: desvanecerDeslizar 0.25s ease both;
    color: #a30000;
    background-color: #ce9090;
    border-left: 6px solid #a30000;
}

@keyframes desvanecerDeslizar {
    from{
        opacity: 0;
        transform: translateY(-6px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

div #dom-btns > span.error-msg{
    text-align: center;
    color: #a30000;
    text-shadow: 0 0 5px 10px #a30000AA;
    background: none;
    border: none;
}

input.error{
    border: 2px solid #a30000 !important;
    background: #ce9090 !important;
    box-shadow: 0 0 7px #a30000;
    animation: agitar 0.38s ease-in both;
}

@keyframes agitar {
    10%, 90%{transform: translateX(-2px);}
    20%, 80%{transform: translateX(3px);}
    30%, 50%, 70%{transform: translateX(-4px);}
    40%, 60%{transform: translateX(4px);}
}

select.error{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"%3E%3Cpolyline points="5%2C5 50%2C52 95%2C5" fill="none" stroke="%23a30000" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') !important;
    background-repeat: no-repeat;
    background-position: right 31.25px top 50%;
    background-size: 12px auto;
    border: 2px solid #a30000 !important;
    background-color: #ce9090 !important;
    box-shadow: 0 0 7px #a30000;
    animation: agitar 0.38s ease-in both;
}

select.error:focus{
    box-shadow: 0 0 7px #a30000 !important;
}

.dom-box:has(select.error) label{
    color: #a30000;
}

.dom-box:has(input.error) label{
    color: #a30000;
}

#contenedor-tipoCliente.error p{
    color: #a30000;
}


input.error:focus{
  box-shadow: 0 0 7px #a30000 !important;
}


select.correcto{
    border: 2px solid #3fa300 !important;
    background-color: #a8ce90 !important;
    box-shadow: 0 0 7px #3fa300 !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"%3E%3Cpolyline points="5%2C5 50%2C52 95%2C5" fill="none" stroke="%233fa300" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') !important;
    background-repeat: no-repeat;
    background-position: right 31.25px top 50%;
    background-size: 12px auto;
}

input.correcto:not([Type = 'radio']){
    border: 2px solid #3fa300 !important;
    background: #a8ce90 !important;
    box-shadow: 0 0 7px #3fa300 !important;
}

.dom-box:has(select.correcto) label{
    color: #3fa300;
}

.dom-box:has(input:not([type = "radio"]).correcto) label{
    color: #3fa300;
}

#contenedor-tipoCliente.correcto p{
    color: #3fa300;
}

input.correcto:focus:not([type = "radio"]){
    box-shadow: 0 0 7px #3fa300 !important;
}