@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

 * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     line-height: 1.5;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

 }

 .cartel {
     margin-top: 72px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #3897b7;
     width: 100%;
     height: 30vh;
     padding: 0 20px;
 }

 .cartel h1 {
     color: white;
     font-size: 2.5em;
     /* Permite que el h2 ocupe el espacio disponible */
     margin-right: 60px;
     /* Espacio entre el texto y la imagen */
 }

 .cartel #imgCartelServicio {
     width: 150px;
     height: auto;
     display: block;
 }


 .contConsultar {
     margin: 5% 10% 5% 10%;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .contConsultar #textoConsulta {
     background-color: rgba(243, 243, 243, 0.7);
     padding: 2rem 0;
     border-radius: 30px;
     box-shadow: inset 0 0 5px white, 0 0 10px rgba(0, 0, 0, 0.5);

 }

 .contConsultar .consultar {
     color: #FFF;
     margin: 5% 0 1% 0;
     padding: 5% 5%;
     background-color: #171515;
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     opacity: 1;
     transition: opacity 0.6s ease-in-out;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }

 .consultar.ocultar {
     opacity: 0;
     display: none;
 }

 .contConsultar .consultar .consultarInput {
     transition: .5s ease;
     width: 60%;
     height: 3rem;
     text-align: center;
     border: none;
     border-radius: 10px;
     font-size: 1.2rem;
 }

 .contConsultar .consultar .consultarButton {
     transition: .5s ease;
     margin-top: 20px;
     font-size: 1.5rem;
     width: 40%;
     height: 4rem;
     background-color: #3897B7;
     border: none;
     border-radius: 10px;
     color: #FFF;
 }

 .contConsultar .consultar .consultarInput:hover,
 .consultarButton:hover {
     transform: scale(1.1);
     cursor: pointer;
     box-shadow: 0 0 10px rgba(255, 255, 255, .7);
 }

 .contConsultar .consultar .consultarInput:focus,
 .consultarButton:hover {
     transition: .5s ease-in-out;
     outline: none;
     box-shadow: 0 0 10px rgba(255, 255, 255, .7);
     animation: brillo 1.5s infinite alternate;
     transform: scale(1.1);
     font-weight: bolder;
 }




 .contConsultar .error {
     padding: 5%;
     transition: .5s ease;
     font-size: 1.5rem;
     width: 100%;
     height: auto;
     background-color: rgb(183, 56, 56);
     border: 2px solid #b73838;
     border-radius: 16px;
     font-weight: bolder;
     color: tomato;
     text-shadow: 0 0 5px rgba(0, 0, 0, 1);
 }

 .contConsultar .resultado {
     position: relative;
     /* Esencial para que el .closeButton se posicione con respecto a él */
     margin-top: 20px;
     padding: 10px;
     width: 100%;
     height: auto;
     background-color: #171515;
     border: 2px solid #3897B7;
     border-radius: 16px;
     font-weight: bolder;
     color: #FFF;
     opacity: 1;
     transition: opacity 0.6s ease-in-out;
 }


 .closeButton {
     transition: all .6s ease-out;
     position: absolute;
     /*Para que el boton pueda ser modificado en relacion a su classe padre (resultado)*/
     top: 5px;
     right: 15px;
     font-size: 3rem;
     font-weight: 500;
     color: #3897b7;
     cursor: pointer;
     z-index: 10;
     /* Asegura que esté por encima de otros elementos */
     padding: 5px 10px;
 }

 .closeButton:hover {
     transition: all .4s ease-in-out;
     color: crimson;
     font-weight: 700;

 }

 .contConsultar .fila {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: start;
     margin: 20px 0;
     flex-wrap: nowrap;
 }

 .contConsultar .columna {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: first baseline;
     width: 45%;
     text-align: left;
 }


 .contConsultar span {
     color: #3897B7;
 }

 @media screen and (max-width: 723px) {
     .cartel h1 {
         text-align: center;
         font-size: 2em;
         margin: 0 auto;
     }

     .cartel #imgCartelServicio {
         display: none;
     }

     .contConsultar {
     margin: 10px;
 }


     .contConsultar #textoConsulta {
         padding: 2rem 1rem;
         font-size: 1rem;
     }

     .contConsultar .consultar {
         color: #FFF;
         margin: 5% 0 1%;
         padding: 3rem .5rem;
         background-color: #171515;
         border-radius: 20px;
     }

     .contConsultar .consultar h1 {
         font-size: 1.2rem;
     }

     .contConsultar .consultar .consultarInput {
         transition: .5s ease;
         width: 80%;
         height: 3rem;
         font-size: 1.2rem;
     }

     .contConsultar .consultar .consultarButton {
         margin-top: 10px;
         font-size: 1rem;
         width: 80%;
         height: 3rem;
     }

     .contConsultar .consultar .consultarInput:hover,
     .consultarButton:hover {
         transform: scale(1);
         box-shadow: 0 0 15px #3897b7;
     }

     .contConsultar .consultar .consultarInput:focus {
         transform: scale(1);
     }

     .contConsultar .error {
         padding: 5%;
         font-size: 1.2rem;
         margin: 10px 0;
     }

     .contConsultar .resultado {
         padding: 3.5rem 1rem 0;
         border: none;
         box-shadow: 0 0 10px black;
         font-weight: 600;
         font-size: .9rem;

     }

     .closeButton {
         font-size: 2.3rem;
         font-weight: 600;
         padding: 10px;
     }

     .contConsultar .fila {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         flex-wrap: nowrap;
     }

     .contConsultar .columna {
         width: 100%;
         background-color: #191919;
         box-shadow: 0 0 10px #000;
         margin: 5px 0;
         padding: 1rem;
         border-radius: 12px;
     }

 }