html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overflow-x: hidden;

}

body{
	background: #ffffff;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-family: "Montserrat", sans-serif;
}

header{
	box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 0;
    height: 20vh;
    width: 100%;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

footer{
    z-index: 100;
    position: relative;
    width: 100%;
	margin-top: 5em;
    padding-top: 20px;
    height: 40vh;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: #ffffff;
}





@media screen and (max-width:700px) {


/*NAVBAR------------------------------------------*/

#logo{
	margin-left: 10px;
	width: 120px;
}
#menu {
    font-size: 20px;
    vertical-align: middle;
    text-align: right;
    margin-right: 10px;
}
#menu ul{
    padding-left: 0;
	list-style-type: none;
}

#menu a {
	margin: 5px;
	color: black;
	text-decoration: none;
}
#menu a:hover {
	color: #eb003b;
	cursor: pointer;
}
#menu i{
    font-size: 13px;
    margin-left: 3px;
}
/*HOME-------------------------------------------*/

#landing-page {
	margin-top: 150px;
    margin-bottom: -15vh;
}

#landing-img {
    display: none;
}

#landing-logo{
    margin: 10px;
    box-shadow: 0 0 10px rgba(230, 20, 20, 0.1);
}

#landing-logo img{
    width: 100%;
}

#cta{
    text-align: center;
}

.cta-floating-btn{
    z-index: 80;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.cta-floating-btn:hover{
    background-color: #eb003b;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.cta-button:hover {
    background-color: #eb003b;
}

.cta-button:active {
    background-color: #1f618d;
}

#tel{
    text-align: center;
    font-size: larger;
}

#img-container{
    display: none;
}

/*CONTACT-BANNER----------------------------------*/

#banner-contact{
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;

}
#banner-contact-two{
    position: fixed;
    z-index: 101;
    margin-top: 10vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact-three{
    position: fixed;
    z-index: 101;
    margin-top: 17vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact a {
	margin: 5px;
	color: #ffffff;
	text-decoration: none;
}
#banner-contact a:hover {
	color: #0400eb;
	cursor: pointer;
}
#banner-contact-two a {
	margin: 5px;
	color: #ffffff;
	text-decoration: none;
}
#banner-contact-two a:hover {
	color: #0400eb;
	cursor: pointer;
}
#banner-contact-three a {
	margin: 5px;
	color: #ffffff;
	text-decoration: none;
}
#banner-contact-three a:hover {
	color: #0400eb;
	cursor: pointer;
}

#ig{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#maps{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#wpp{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*ABOUT-------------------------------------------*/
#about-container{
    margin-top: 20vh;
    margin-bottom: -15vh;
}
#about{
    margin-left: 20px;
}
#txt{
    margin-left: 20px;
    margin-right: 20px;
}
/*BANNER-----------------------------------------*/

.banner-container {

	font-size: 16px;
	font-weight:200;
	color: #000000;

	overflow: hidden;

    margin-bottom: 0;
    position: relative;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

}

.banner-container i{
    font-size: 10px;
    text-align: center;
    align-items: center;
    padding: 10px;
    color: #A61C1C;
}

.text {
	
	margin-top: 0;
	padding-left: 0%;
	white-space: nowrap;
	animation: 15s moveHorizontally  linear infinite;

}

@keyframes moveHorizontally {

	from {
		transform: translateX(100);
	}
	to {
		transform: translateX(-100%);
	}

}

/*TRATAMIENTOS-----------------------------------*/

#tratamientos-container{
    padding-top: 20vh;
}
#tratamientos{
	padding: 20px;
}
.bordo{
	color: #A61C1C;
}

#doc{
    text-align: center;
}

/*PROFESIONALES----------------------------------*/
#profesionales{
    max-width: 100%;
    margin: 20px;
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #000000;
}

/*SLIDESHOW--------------------------------------*/

#img-slideshow {

    z-index: 90;
	display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}



#imgs {
    height: 250px;
    width: 260px;
    text-align: center;
    position: relative;
    margin: auto;    

}


#imgs img {

	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	display: flex;
	border: none;

}


.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {
	background: none;
	fill: #000000;
	fill-opacity: 1;
	transition: fill 0.3s ease;
}

svg:hover {

	fill: #A61C1C;
	cursor: pointer;

}

#prev {

	background: none;
	border: none;
	transform: rotate(180deg);

}


#next {

	background: none;
	border: none;

}

/*ANIMATION*/

.fading {

	animation: fadein 3s;

}

@keyframes fadein {

	from {
		opacity: 0;

	}
	to {
		opacity: 1;
	}
}

/*CONTACT----------------------------------------*/
#consultas{
    padding-top: 20vh;
}
#contact-container{
    position:relative;
    z-index: 90;
    padding-top: 10px;
    top: 50%;
    padding-bottom: 10px;
    background-color: #A61C1C;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

#comunicate {
    max-width: 100%;
    margin: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	color: #000000;
}

#comunicate img {
display: block;
margin: 0 auto 20px;
}

#formulario {
display: flex;
flex-direction: column;
gap: 15px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-weight: bold;
margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
}

.form-group textarea {
resize: vertical;
}

.form-group input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 15px;
}

.form-group input[type="submit"]:hover {
margin-top: 15px;
background-color: #45a049;
}

/*CONFIRMACION----------------------------------*/

#cuerpo{
	padding-top: 20vh;
	height: 30vh;
	margin: 20px;
}

/*MAP------------------------------------------*/

#ubicacion{
    padding-top: 20vh;
}
#dir{
    margin-left: 50px;
}
#map {
    margin-top: 50px;
    height: 400px; 
    width: 100%; 
}

/*FOOTER--------------------------------------*/

#qr-container {
    display: none;
}



/*FIN-------------------------------*/

}

@media (min-width:700px) and (max-width: 1024px){
/*NAVBAR------------------------------------------*/

#logo{
    margin-left: 10px;
    width: 120px;
}
#menu {
    font-size: 20px;
    vertical-align: middle;
    text-align: right;
    margin-right: 10px;
}
#menu ul{
    padding-left: 0;
    list-style-type: none;
}

#menu a {
    margin: 5px;
    color: black;
    text-decoration: none;
}
#menu a:hover {
    color: #eb003b;
    cursor: pointer;
}
#menu i{
    font-size: 13px;
    margin-left: 3px;
}
/*HOME-------------------------------------------*/

#landing-page {
    margin-top: 150px;
    margin-bottom: -15vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
}

#landing-img img{
    display: none;
}

#landing-logo img{
    width: 400px;
    margin: 10px;
    box-shadow: 0 0 10px rgba(230, 20, 20, 0.1);
}

#cta{
    text-align: center;
}

.cta-floating-btn{
    z-index: 80;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.cta-floating-btn:hover{
    background-color: #eb003b;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.cta-button:hover {
    background-color: #eb003b;
}

.cta-button:active {
    background-color: #1f618d;
}

#tel{
    text-align: center;
    font-size: larger;
}

#img-container{
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 0;
    top: 0;
    transform: rotate(180deg);
}

/*CONTACT-BANNER----------------------------------*/
#banner-contact{
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;

}
#banner-contact-two{
    position: fixed;
    z-index: 101;
    margin-top: 10vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact-three{
    position: fixed;
    z-index: 101;
    margin-top: 17vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact a:hover {
    color: #0400eb;
    cursor: pointer;
}
#banner-contact-two a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact-two a:hover {
    color: #0400eb;
    cursor: pointer;
}
#banner-contact-three a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact-three a:hover {
    color: #0400eb;
    cursor: pointer;
}

#ig{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#maps{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#wpp{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*ABOUT-------------------------------------------*/
#about-container{
    margin-top: 20vh;
    margin-bottom: -15vh;
}
#about{
    margin-left: 20px;
}
#txt{
    margin-left: 20px;
    margin-right: 20px;
}
/*BANNER-----------------------------------------*/

.banner-container {

    font-size: 16px;
    font-weight:200;
    color: #000000;

    overflow: hidden;

    margin-bottom: 0;
    position: relative;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

}

.banner-container i{
    font-size: 10px;
    text-align: center;
    align-items: center;
    padding: 10px;
    color: #A61C1C;
}

.text {
    
    margin-top: 0;
    padding-left: 0%;
    white-space: nowrap;
    animation: 15s moveHorizontally  linear infinite;

}

@keyframes moveHorizontally {

    from {
        transform: translateX(100);
    }
    to {
        transform: translateX(-100%);
    }

}

/*TRATAMIENTOS-----------------------------------*/

#tratamientos-container{
    padding-top: 20vh;
    margin-right:400px;
}
#tratamientos{
    padding: 20px;
}
.bordo{
    color: #A61C1C;
}

#doc{
    text-align: center;
}

/*PROFESIONALES----------------------------------*/
#profesionales{
    max-width: 100%;
    margin: 20px;
    margin-left: 10vw;
    margin-right: 10vw;
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #000000;
}

/*SLIDESHOW--------------------------------------*/

#img-slideshow {

    z-index: 90;
	display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}



#imgs {
    height: 250px;
    width: 360px;
    text-align: center;
    position: relative;
    margin: auto;    

}


#imgs img {

	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	display: flex;
	border: none;

}


.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {

	background: none;
	fill: #000000;
	fill-opacity: 1;
	transition: fill 0.3s ease;
}

svg:hover {

	fill: #A61C1C;
	cursor: pointer;

}

#prev {

	background: none;
	border: none;
	transform: rotate(180deg);

}


#next {

	background: none;
	border: none;

}

/*ANIMATION*/

.fading {

	animation: fadein 3s;

}

@keyframes fadein {

	from {
		opacity: 0;

	}
	to {
		opacity: 1;
	}
}
/*CONTACT----------------------------------------*/
#consultas{
    padding-top: 20vh;

}
#contact-container{
    position: relative;
    z-index: 90;
    padding-top: 10px;
    top: 50%;
    padding-bottom: 10px;
    background-color: #A61C1C;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

#comunicate {
    max-width: 100%;
    margin: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #000000;
}

#comunicate img {
display: block;
margin: 0 auto 20px;
}

#formulario {
display: flex;
flex-direction: column;
gap: 15px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-weight: bold;
margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
}

.form-group textarea {
resize: vertical;
}

.form-group input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 15px;
}

.form-group input[type="submit"]:hover {
margin-top: 15px;
background-color: #45a049;
}

/*CONFIRMACION----------------------------------*/

#cuerpo{
    padding-top: 20vh;
    height: 30vh;
    margin: 20px;
}

/*MAP------------------------------------------*/

#ubicacion{
    padding-top: 20vh;
}
#dir{
    margin-left: 200px;
}
#map {
    margin-top: 50px;
    height: 400px; 
    width: 100%; 
}

/*FOOTER--------------------------------------*/

#qr-container {
    display: none;
}

/*FIN-------------------------------*/
}

@media (min-width: 1024px){
/*NAVBAR------------------------------------------*/

#logo{
    margin-left: 10px;
    width: 120px;
}
#menu {
    font-size: 20px;
    vertical-align: middle;
    text-align: right;
    margin-right: 10px;
}
#menu ul{
    padding-left: 0;
    list-style-type: none;
}

#menu a {
    margin: 5px;
    color: black;
    text-decoration: none;
}
#menu a:hover {
    color: #eb003b;
    cursor: pointer;
}
#menu i{
    font-size: 13px;
    margin-left: 3px;
}
/*HOME-------------------------------------------*/

#landing-page {
    margin-top: 150px;
    margin-bottom: -15vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 200px;
    margin-right: 200px;
    justify-content: center;
    align-items: center;
}
#landing-img img{
    padding-top: 20vh;
    position:absolute;
    z-index: -1;
    transform: scaleX(-1);
    display: flex;
    justify-content:flex-end;
    align-items:center;
    right: 0;
}

#landing-logo img{
    width: 400px;
    margin: 10px;
    box-shadow: 0 0 10px rgba(230, 20, 20, 0.1);
}

#cta{
    text-align: center;
}

.cta-floating-btn{
    z-index: 80;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.cta-floating-btn:hover{
    background-color: #eb003b;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #A61C1C;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.cta-button:hover {
    background-color: #eb003b;
}

.cta-button:active {
    background-color: #1f618d;
}

#tel{
    text-align: center;
    font-size: larger;
}

#img-container{
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 0;
    top: 0;
    transform: rotate(180deg);
}

/*CONTACT-BANNER----------------------------------*/
#cont{
    padding-top: 20vh;
}
#banner-contact{
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;

}
#banner-contact-two{
    position: fixed;
    z-index: 101;
    margin-top: 10vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact-three{
    position: fixed;
    z-index: 101;
    margin-top: 0vh;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #A61C1C;
    color: #ffffff;
}
#banner-contact a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact a:hover {
    color: #0400eb;
    cursor: pointer;
}
#banner-contact-two a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact-two a:hover {
    color: #0400eb;
    cursor: pointer;
}
#banner-contact-three a {
    margin: 5px;
    color: #ffffff;
    text-decoration: none;
}
#banner-contact-three a:hover {
    color: #0400eb;
    cursor: pointer;
}

#ig{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#maps{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#wpp{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*ABOUT-------------------------------------------*/
#about-container{
    margin-top: 20vh;
    margin-bottom: -15vh;
}
#about{
    margin-left: 200px;
}
#txt{
    margin-left: 200px;
    margin-right: 200px;
}
/*BANNER-----------------------------------------*/

.banner-container {

    font-size: 16px;
    font-weight:200;
    color: #000000;

    overflow: hidden;

    margin-bottom: 0;
    position: relative;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

}

.banner-container i{
    font-size: 10px;
    text-align: center;
    align-items: center;
    padding: 10px;
    color: #A61C1C;
}

.text {
    
    margin-top: 0;
    padding-left: 0%;
    white-space: nowrap;
    animation: 15s moveHorizontally  linear infinite;

}

@keyframes moveHorizontally {

    from {
        transform: translateX(100);
    }
    to {
        transform: translateX(-100%);
    }

}

/*TRATAMIENTOS-----------------------------------*/

#tratamientos-container{
    padding-top: 20vh;
    margin-left: 10vw;
    margin-right: 40vw;
}
#tratamientos{
    padding: 20px;
}
.bordo{
    color: #A61C1C;
}

#doc{
    text-align: center;
}

/*PROFESIONALES----------------------------------*/
#profesionales{
    max-width: 100%;
    margin: 20px;
    margin-left: 10vw;
    margin-right: 40vw;
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #000000;
}

/*SLIDESHOW--------------------------------------*/

#img-slideshow {

    z-index: 90;
	display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}



#imgs {
    height: 250px;
    width: 360px;
    text-align: center;
    position: relative;
    margin: auto;    

}


#imgs img {

	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	display: flex;
	border: none;

}


.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {
	background: none;
	fill: #000000;
	fill-opacity: 1;
	transition: fill 0.3s ease;
}

svg:hover {

	fill: #A61C1C;
	cursor: pointer;

}

#prev {

	background: none;
	border: none;
	transform: rotate(180deg);

}


#next {

	background: none;
	border: none;

}

/*ANIMATION*/

.fading {

	animation: fadein 3s;

}

@keyframes fadein {

	from {
		opacity: 0;

	}
	to {
		opacity: 1;
	}
}

/*CONTACT----------------------------------------*/
#consultas{
    padding-top: 20vh;
}
#contact-container{
    position:relative;
    z-index: 90;
    padding-left: 200px;
    padding-right: 200px;
    padding-top: 10px;
    top: 50%;
    padding-bottom: 10px;
    background-color: #A61C1C;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

#comunicate {
    max-width: 100%;
    margin: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #000000;
}

#comunicate img {
display: block;
margin: 0 auto 20px;
}

#formulario {
display: flex;
flex-direction: column;
gap: 15px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-weight: bold;
margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
}

.form-group textarea {
resize: vertical;
}

.form-group input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 15px;
}

.form-group input[type="submit"]:hover {
margin-top: 15px;
background-color: #45a049;
}

/*CONFIRMACION----------------------------------*/

#cuerpo{
    padding-top: 20vh;
    height: 30vh;
    margin: 20px;
}

/*MAP------------------------------------------*/
#ubicacion{
    padding-top: 20vh;
}
#dir{
    margin-left: 200px;
}
#map {
    margin-top: 50px;
    height: 400px; 
    width: 100%; 
}

/*FOOTER--------------------------------------*/

#qr-container {
    display: none;
}

/*FIN-------------------------------*/
}