@charset "utf-8";
*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-family: 'Segoe UI', sans-serif; 
	color: #4F4F4F; 
	letter-spacing: 0.7px;
}

/*NAV BOOTSTRAP  - - - - - - - - - - - - - - - - - - - - -  */
.navbar-custom {
	background-color: #F6F6F4; /* Fondo del navbar */
    border-top: 10px solid #E46E13;            
    font-size: 13pt;
	padding: 40px 10%;
	text-align: center;
	border-bottom: 1px solid #E1E1E1;
}
.navbar-brand {
    color: #E46E13; /* Color del logo */
    font-weight: 400;
    text-transform: uppercase;
    margin-left: 20px; /* Espaciado izquierdo */
}
.navbar-nav .nav-link { 
    text-transform: uppercase;
    margin: 0 10px;
}
.navbar-nav .nav-link:hover {
    color: #E46E13; 
}
/*GENERALES - - - - - - - - - - - - - - - - - - - - - - - - */
main {
	padding: 100px 0 110px 0;
}
.img-principal {
	background-color: #ECECE7;
	height: 420px;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.iquienes {
    background-image: url(imagenes/quienes-somos.jpg);    
}
.iconsultorios {
    background-image: url(imagenes/consultorios.jpg);    
}
.itratamientos {
    background-image: url(imagenes/tratamientos.jpg);
}
.iurgencias {
    background-image: url(imagenes/urgencias.jpg);    
}
.img-ppal-franquicias {
    background-image: url(imagenes/franquicia-fondo.gif);
    background-repeat: repeat-x;
    background-position: left top;
	padding-top: 60px;	
}
h2 {
	font-size: 34px;
	text-transform: uppercase;
	color: #E46E13;
	letter-spacing: 3px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 45px;
}
p {	
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 25px;
}
.contenedora {
	max-width: 1100px;
	margin: auto;
}
.barras-medio {
	border-left: 1px solid #D4D2D2;
	border-right: 1px solid #D4D2D2;
}
.margin-bottom {margin-bottom: 40px}

/*HOME - - - - - - - - - - - - - - - - - - - - - - - - -  */
header {
    height: 520px;
	background-color: #E3E6DF;
	background-image: url("imagenes/encabezado-1920.jpg");
    background-repeat: no-repeat;
    background-position: right center;
}
header img {display: none;}
.renovamos {
	width: 450px;
	padding-top:120px;
	padding-left: 10%;	
	text-align: left;
}
.renovamos h1 {
    font-size: 41px;
    line-height: 44px;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;	
}
.renovamos a {
	background-color: #E46E13;
	color: white;
	border: none;
	padding: 8px 27px;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 10px;
	margin-top: 20px;
	display: inline-block;
	text-decoration: none;
	letter-spacing: 1.5px;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.renovamos a:hover {
	background-color: #E05714;  
    transform: scale(1.03); 
}
/*BIENVENIDA - - - - - - - - - - - - - - - - - - - - - - -  */
main.home {
    background-image: url("imagenes/bienvenida-fondo.png");
    background-repeat: no-repeat;
    background-position: center top;
	padding: 100px 0 110px 0;
}
.bienvenida {
	text-align: center;
	padding-bottom: 20px;
}
.bienvenida p {
	font-size: 18px;
	max-width: 800px;
	margin: -20px auto 0 auto;
}
.bienvenida strong {
	color: #E46E13;
}
.boton {
	background-color: #E46E13;
	color: white;
	border: none;
	padding: 8px 27px;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 10px;
	margin-top: 30px;
	display: inline-block;
	text-decoration: none;
	letter-spacing: 1.5px;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.boton:hover {
	background-color: #E05714;  
    transform: scale(1.03); 
}
/*CARACTERISTICAS - - - - - - - - - - - - - - - - - - - - - */
.caracteristicas {
    padding: 180px 20px 95px 20px;
}
.co1-3 {
	display: inline-block;
	vertical-align: top;
	width: 32%;
	padding: 10px 3%;
}
.caracteristicas img {
	max-width: 70px;
	margin-bottom: 15px;
}
.caracteristicas h4 {
	font-size: 22px;
	text-transform: uppercase;
	color: #E46E13;
}
/*TRATAMIENTOS - - - - - - - - - - - - - - - - - - - - - -  */
.tratamientos {
	padding: 75px 20px 55px 20px;
	background-color: #ECECE7;
	text-align: center;
}
.trat-col {
	display: inline-block;
	vertical-align: top;
	width: 19.5%;
	padding: 10px 3%;
	margin-top: 35px;
}
.tratamientos h3 {
	font-size: 16px;
	text-transform: uppercase;
	margin-top: 15px;
}
.tratamientos h3 a {
	color: #4F4F4F;
	text-decoration: none;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.tratamientos h3 a:hover {
	color: #E46E13;  
}
/*CONSULTORIOS - - - - - - - - - - - - - - - - - - - - - -  */
.consultorios {
	padding: 75px 20px 95px 20px;
}
.col-1-2 .subtit {
	font-size: 20px;
	text-transform: uppercase;
	color: #E46E13;
}
/*CONSULTAS - - - - - - - - - - - - - - - - - - - - - - - - */
.consulta {
    background-image: url(imagenes/1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #E67E39; /*#E46E13;*/
	height: 300px;
}
.consulta .contenedora {position: relative;}
.consulta-txt p {
    font-size: 25px;
	line-height: 30px;
    text-transform: uppercase;
	position: absolute;
	top: 78px;
	right: 180px;
    font-weight: bold;
	color: #fff;
}
.consulta-txt .boton {
	margin-top: 15px;
	color: #E46E13;
	background-color: #FFFFFF;
}
/*FRANQUICIAS - - - - - - - - - - - - - - - - - - - - - - - */
.franquicias {
    padding: 75px 20px 95px 20px;
    background-position: center center;
    background-image: url(imagenes/franquicias-fondo.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.sonrisa {
	text-align: right;
	padding-top: 17px;
}
.franquicias h1, .franquicias h1 strong {
	color: #FFFFFF;
	font-size: 40px;
	text-transform: uppercase;
}
.franquicias h1 span {
	color: #FFFFFF;
	font-size: 32px;
}
.franquicias .boton {
	background-color: #FFFFFF;
	color: #E46E13;
	opacity: 1;
}
.boton:hover {
	opacity: 0.8;  
    transform: scale(1.03); 
}
/*CONTACTO - - - - - - - - - - - - - - - - - - - - - - - -  */
.contacto {
	padding: 75px 20px 0 20px;
}
.contacto h5 {
	font-size: 37px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 45px;
}
.contacto h5 span {
	font-size: 30px;
}
.col-1-2 {
	display: inline-block;
	vertical-align: top;
	width: 34%;
	margin: 18px 6% 0 0;
}
.col-1-2 a {
	color: #E46E13;
	text-decoration: none;
	opacity: 1;
	transition: all 0.3s ease-in-out, transform 0.3s ease-in-out
}
.col-1-2 a:hover {
	opacity: 0.6;
}
.instagram {
    display: block;
    padding: 10px 45px;
    background-image: url(imagenes/instagram.png);
    background-repeat: no-repeat;
    background-position: left center;
	opacity: 1;
	transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.instagram:hover {
	opacity: 0.6;
}
.col-2-2 {
	display: inline-block;
	vertical-align: top;
	width: 59%;
}
.col-2-2 h5 {
	color: #E46E13;
	font-size: 22px;
	margin-bottom: 20px;
	font-weight: normal;
}
.col02 .campos {margin-bottom: 20px;}
.campos {
	padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ECECE7;
	border-radius: 10px;
    font-size: 16px;
	background-color: #ECECE7;
	width: 100%;
}
#enviar {
	background-color: #E46E13;
	color: white;
	border: none;
	padding: 8px 15px;
	font-size: 16px;
	text-align: left;
	text-transform: uppercase;
	margin-top: 12px;
	width: 100%;
	border-radius: 10px;
	letter-spacing: 1.5px;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#enviar:hover {
	background-color: #E05714;  
}
/*SECCION - - - - - - - - - - - - - - - - - - - - - - */
.quienes-somos {
	width:100%;
	height: auto;
	border-radius: 50%;
}
.col01 {
	display: inline-block;
	vertical-align: top;
	width: 47%;
	margin-right: 5%
}
.col02 {
	display: inline-block;
	vertical-align: top;
	width: 47%;
}
.parrafo1 {
    font-size: 19px;
	line-height: 27px;
    font-style: italic;
	margin-bottom: 60px;
}
.accordion-button {
    text-transform: uppercase;
    font-weight: bold;	
}
.accordion-button img {
	width: 45px;
	height: auto;
	display: inline-block;
	margin-right: 20px;
}
.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: hsla(0, 0%, 100%, 1);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.circle-list {
  	list-style: none;
  	counter-reset: list-counter;
  	padding: 0;
	margin-bottom: 40px;
}
.circle-list li {
  	counter-increment: list-counter;
  	margin-bottom: 25px;
  	display: flex;
  	align-items: flex-start; /* Alinea el círculo con la parte superior del texto */
  	position: relative;
  	padding-left: 50px; /* Espacio para el círculo */
}
.circle-list li::before {
  	content: counter(list-counter);
  	background-color: #ECECE7; /* Color del círculo */
  	color: #4F4F4F;; /* Color del número */
  	font-weight: bold;
  	border-radius: 50%;
  	width: 30px;
  	height: 30px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	position: absolute;
  	left: 0;
  	top: -2px; /* Ajuste para mantener alineado */
}
.circle-list li span {
  display: block; /* Mantiene el texto alineado sin afectar la estructura */
}
/*FRANQUICIAS - - - - - - - - - - - - - - - - - - - - - - - */
video {
    width: 100%;
	background-color: #ccc;
    }
/*FOOTER - - - - - - - - - - - - - - - - - - - - - - - - -  */
footer {
	padding: 75px 20px 70px 20px;
	background-color: #ECECE7;
}
.col-1 {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	margin-top: 18px;
}
.col-2 {
	display: inline-block;
	vertical-align: top;
	width: 68%;
	margin-left: 6%;
	padding-left: 40px;
	border-left: 1px solid #D4D2D2;
}
.local {
	display: inline-block;
	vertical-align: top;
	width: 140px;
}
.dire {
	display: inline-block;
	vertical-align: top;
	width: 300px
}
.whap {
	display: inline-block;
	vertical-align: top;
}
.col-2 p {
	border-bottom: 1px solid #D4D2D2;
	margin-bottom: 4px;
	padding-bottom: 4px;
	font-size: 14px;
}
.whap p a {
	text-decoration: none;
	color: #4F4F4F;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}
.whap p a:hover {
	opacity: 0.6;
}
/*ENEA - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.enea {
	padding: 10px 20px;
	background-color: #4F4F4F;
}
.enea p {margin-bottom: 5px;}
.derechos, .web {
	display: inline-block;
	vertical-align: top;
	color: #fff; 
	font-size: 14px;
}
.derechos {width: 65%}
.web {width: 34%}
.web a {
	color: #fff; 
	text-decoration: none;
	display: block;
	text-align: right;
	opacity: 1;
	transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.web a:hover {
	opacity: 0.6;
}
/*RESPONSIVE - - - - - - - - - - - - - - - - - - - - - - -  */
/*1620*/
@media screen and (max-width: 1620px){
	.navbar-custom {padding: 40px 2%;}
}
/*1540*/
@media screen and (max-width: 1540px){
	header {background-image: url("imagenes/encabezado-1540.jpg");}
	.renovamos {padding-left: 70px; width: 350px;}
}
/*1350*/
@media screen and (max-width: 1350px){
	.navbar-custom {padding: 40px 0;}
	.navbar-custom a img {width: 200px; height: auto;}
	.navbar-nav .nav-link {margin: 0 6px;}	
}
/*1280*/
@media screen and (max-width: 1280px){
	header {height: 480px;}
	.renovamos {padding-left: 40px; padding-top:80px; width: 320px;}
}
/*1180*/
@media screen and (max-width: 1180px){	
	header {background-image: url("imagenes/encabezado-1180.jpg");}
	main.home {padding: 70px 0 90px 0;}
	.contenedora {max-width: 90%;}	
	.tratamientos {padding: 75px 0;}
	.trat-col {width: 24.5%; padding: 10px 2%; margin-top: 35px;	}	
	.col-1 {width: 20%; margin-top: 0;}
	.col-1 img {width: 100%; height: auto;}
	.col-2 {width: 75%; margin-left: 4%; padding-left: 30px}
}
/*980*/
@media screen and (max-width: 980px){
	.nav-item {text-align: left; margin-left: 14px}
	header {height: 400px; background-image: url("imagenes/encabezado-980.jpg");}
	.img-principal {height: 380px;}
	.franquicias {padding: 50px 20px 60px 20px;}
	.img-ppal {height: 380px;}
	.col-1-2 {width: 100%; margin: 0;}
	.col-2-2 {width: 100%;}
	.franquicias .col-1-2 {width: 34%; margin-right: 5%;}
	.franquicias .col-2-2 {width: 60%;}
	.franquicias .col-1-2 img {width: 100%; height: auto; margin-top: 30px;}
	.parrafo1 {margin-bottom: 70px;}
	.col01 {width: 100%; margin-right: 0;}
	.col02 {width: 100%;}
	.col-1 {display: none}
	.col-2 {width: 100%; margin-left: 0; padding-left: 0; border-left: none;}
	.local {width: 20%;}
	.dire {width: 49%;}
	.whap {width: 29%;}
}
/*880*/
@media screen and (max-width: 880px){	
	header {height: 360px; background-image: url("imagenes/encabezado-880.jpg");}
	.renovamos {width: 280px; padding-top:60px;}
	.renovamos h1 {font-size: 35px; line-height: 35px;  margin-bottom: 15px;}
	.renovamos a {padding: 7px 25px; font-size: 16px; margin-top: 10px;}	
	.img-principal {height: 300px;}
	main.home {padding: 70px 0;  background-position: center -30px;}
	.bienvenida p {font-size: 16px; max-width: 85%;}
	.boton {padding: 7px 22px; font-size: 16px; margin-top: 20px;}
	.caracteristicas {padding: 120px 20px 65px 20px;}
	.tratamientos {padding: 65px 20px 75px 20px;}
	.trat-col {width: 32.5%; padding: 10px 0; margin-top: 35px;	}
	.tratamientos .barras-medio {border-left: none; border-right: none;}
	.consulta {background-image: url(imagenes/banner-consulta-virtual-02.jpg); background-position: 10px center;}
	.consulta .contenedora {position: relative;}
	.consulta-txt p {top: 78px; right: 130px;}
	.franquicias .col-1-2 {width: 24%; margin-right: 5%;}
	.franquicias .col-2-2 {width: 70%;}
	.franquicias h1, .franquicias h1 strong {font-size: 33px;}
	.franquicias h1 span {font-size: 27px;}
}
/*780*/
@media screen and (max-width: 780px){
	header {background-image: none; height: auto;}
	header img {display: block; width: 100%; height: auto; }
	.renovamos {width: 100%; padding: 30px 15px;}	
	.renovamos h1 {font-size: 30px; line-height: 30px; margin-bottom: 10px; margin-top: 30px;}
	.renovamos a {padding: 5px 20px; font-size: 16px; margin-top: 10px;}
	.iconsultorios {background-image: url(imagenes/consultorios-780.jpg);}
	.co1-3 {width: 100%; padding: 10px 0}
	.caracteristicas .barras-medio {border-left: none; border-right: none;}
	.consulta {background-position: -30px center;}
	.consulta-txt p {right: 60px;}
	.contacto h5 {font-size: 30px; margin-bottom: 35px;}
	.contacto h5 span {font-size: 25px}
	h2 {font-size: 29px; margin-bottom: 40px;}
	.parrafo1 {font-size: 17px; line-height: 24px; }
	.franquicias {padding: 30px 20px 60px 20px;}
	.franquicias .col-1-2 {display:none}
	.franquicias .col-2-2 {width: 100%;}
}
/*620*/
@media screen and (max-width: 620px){
	main {padding: 80px 0;}
	.bienvenida h2 {text-align: center; font-size: 26px;}
	h2 {text-align: left;}
	.tratamientos h2 {text-align: center;}
	p {font-size: 15px; line-height: 20px; margin-bottom: 15px;}
	.parrafo1 {font-size: 17px; line-height: 23px; margin-bottom: 60px;}
	.consulta {background-image: url(imagenes/banner-consulta-virtual-03.jpg); background-position: left center; height: 200px;}
	.consulta-txt p {font-size: 20px; line-height: 25px; top: 35px; right: 110px;}
	.contacto h5 {font-size: 25px; margin-bottom: 25px; text-align: left;}
	.contacto h5 span {font-size: 20px}
	.franquicias h1, .franquicias h1 strong {font-size: 28px;}
	.franquicias h1 span {font-size: 23px;}
	.derechos, .web {width: 100%}
	.web a {text-align: left;}
	.local {width: 45%;}
	.dire {display:none;}
	.whap {width: 53%;}
}
/*520*/
@media screen and (max-width: 520px){
	main.home {background-position: center top;}
	.img-principal {height: 260px;}
	.trat-col {width: 49%; padding: 10px 0; margin-top: 35px;}
	.tratamientos h2 {text-align: center; margin-bottom: 15px;}
	.tratamientos h3 {font-size: 14px;margin-top: 12px;}
	.consulta-txt p {top: 35px; right: 30px;}
	.contacto h5 {font-size: 20px; margin-bottom: 20px;}
	.contacto h5 span {font-size: 17px}
}
/*480*/
@media screen and (max-width: 480px){
	main.home {padding: 40px 0;}
}