/* =========================================================
   VARIABLES GENERALES
========================================================= */

:root {
    --color-dark: #303030;
    --color-dark-2: #383838;
    --color-white: #ffffff;
    --color-light: #f7f6f3;
    --color-text: #252525;
    --color-gray: #8a8a8a;
    --color-gray-light: #d9d9d9;

    --color-green: #21a875;
    --color-green-dark: #18885f;

    --container-max: 1180px;

    --font-body: Arial, Helvetica, sans-serif;
    --font-title: Georgia, "Times New Roman", serif;
}


/* =========================================================
   RESET / BASE
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;

    color: var(--color-text);
    background-color: var(--color-white);

    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}
.sobreNosotros {
	padding-left:7%!important;
	padding-right:7%!important;
}

.container {
    max-width: var(--container-max);
}


/* =========================================================
   TIPOGRAFÍA GENERAL
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: inherit;
}

h1,
h2,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-title);
    font-weight: 400;
    letter-spacing: -0.045em;
}

p {
    margin-bottom: 1rem;
	font-family: 'Inter 18pt'!important;
}

.small {
    font-size: 0.78rem;
}

.logo{
	max-width:295px!important;
	height:auto;
}

.text-gray {
    color: var(--color-gray) !important;
}
.titulo-noto{
	font-family: 'Noto Serif Disp ExtCond'!important;
}
.texto-inter{
	font-family: 'Inter 18pt Light'!important;
}
.texto-botones{
	font-size:15px!important;
	font-weight:300!important;
}
.comillas{
	width: 24px;
	height:auto;
	margin-bottom:35px;
}
.testimonial p{
	
}
.p-lg-5 {
    padding: 3rem 4.5rem !important;
}
.doctoralia {
  border: 1px solid #00C8A8!important;
  background: transparent;
  color:#fff;
  background-image:url(images/dralia.svg);
  background-repeat: no-repeat;
  background-size:16px;
  background-position: 18px 10px;
  padding: 8px 10px 8px 24px !important;
  
}
.doctoralia:hover {
  border: 1px solid #00C8A8!important;
  background: transparent!important;
  color:#00C8A8;
  background-image:url(images/dralia.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
}
.whatsApp {
  border: 1px solid #65CF72!important;
  background: transparent;
  color:#fff!important;
  background-image:url(images/whatsapp_icon.svg);
  background-repeat: no-repeat;
  background-size:16px;
  background-position: 18px 10px;
  padding: 8px 10px 8px 24px !important;
}
.whatsApp:hover {
  border: 1px solid #65CF72!important;
  background: transparent!important;
  color:#65CF72!important;
  background-image:url(images/whatsapp_icon.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
}
.mapa_embe{
	width:100%!important;
	min-height:400px!important;
}

.doctoralia_WH {
  border: 1px solid #00C8A8!important;
  background: transparent;
  color:#fff;
  background-image:url(images/dralia_white.svg);
  background-repeat: no-repeat;
  background-size:16px;
  background-position: 18px 7px;
    padding: 8px 10px 8px 24px !important;
    font-size: 15px !important;
    width: 140px!important;
  
}
.doctoralia_WH:hover {
  border: 1px solid #00C8A8!important;
  background: transparent!important;
  color:#00C8A8;
  background-image:url(images/dralia_white.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 7px!important;
  padding: 8px 10px 8px 24px !important;
}
.whatsApp_WH {
  border: 1px solid #65CF72!important;
  background: #65cf72;
  color:#fff!important;
  background-image:url(images/whatsapp_white.svg)!important;
  background-repeat: no-repeat;
  background-size:16px;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
  font-size: 15px !important;
  width: 140px!important;
}
.whatsApp_WH:hover {
  border: 1px solid #65cf72!important;
  background: transparent!important;
  color:#65CF72!important;
  background-image:url(images/whatsapp_white.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
}
.tel_WH {
  border: 1px solid #ffffff!important;
  background: #fff!important;
  color:#000!important;
  background-image:url(images/tel.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
  font-size: 15px !important;
  width: 140px!important;
}
.tel_WH:hover {
  border: 1px solid #fff!important;
  background: transparent!important;
  color:#fff!important;
  background-image:url(images/tel_wh.svg)!important;
  background-repeat: no-repeat!important;
  background-size:16px!important;
  background-position: 18px 10px!important;
  padding: 8px 10px 8px 24px !important;
}
.social-icon{
	float:left;
	margin-left:12px;
}

.social-icon img{
	width:20px;
	height:20px;
	}
	
	
	.whatsapp-float {
    position: fixed;

    /* Posición */
    right: 25px;
    bottom: 25px;

    /* Tamaño */
    width: 60px;
    height: 60px;

    /* Apariencia */
    background-image: url(images/whats_logo.png);
	background-repeat: no-repeat;
	background-size: contain;
    color: #ffffff;

    /* Centrar icono */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Icono */
    font-size: 32px;


    /* Siempre encima */
    z-index: 9999;

    /* Quitar decoración del enlace */
    text-decoration: none;

    /* Animación */
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                background-color 0.25s ease;
}


/* HOVER */

.whatsapp-float:hover {
    background-color: transparent;
	

    transform: scale(1.1);

}


/* MÓVIL */

@media (max-width: 576px) {

    .whatsapp-float {
        width: 52px;
        height: 52px;

        right: 15px;
        bottom: 15px;

        font-size: 27px;
    }

}
/* =========================================================
   SECCIONES GENERALES
========================================================= */

.section-padding {
    padding-top: 110px;
    padding-bottom: 110px;
}

.bg-dark-custom {
    background-color: var(--color-dark) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    background-color: var(--color-dark);
    color: var(--color-white);

    overflow: hidden;
}

.hero-content {
    min-height: 650px;
	background-image: url(images/bg_banner.jpg);
	background-size: contain;
}

.hero-content .py-5{
	padding-top:10%!important;
	margin-top: -80px;
}

.hero h1 {
    max-width: 680px;
    font-family: 'Noto Serif Disp ExtCond';
    font-size: clamp(3rem, 5vw, 5.25rem);
    line-height: 0.96;
    margin-bottom: 30px;
}

.hero .lead {
    max-width: 430px;

    font-size: 0.92rem !important;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.82);
	font-family: 'Inter 18pt Light';
}

.hero .small.text-uppercase {
    letter-spacing: 0.14em;
}

.hero .btn-light {
    padding: 11px 25px;
    font-family: 'Inter 18pt';
    font-size: 0.76rem;
    font-weight: 500;

    background-color: var(--color-white);
    color: #222;

    border: none;
    border-radius: 50px;

    transition: all 0.25s ease;
}

.hero .btn-light:hover {
    background-color: #eaeaea;
    transform: translateY(-2px);
}


/* =========================================================
   PLACEHOLDERS DE IMAGEN
========================================================= */

.image-placeholder {
    min-height: 460px;

    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(images/Sobre_Mi.png);
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
    color: #777;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.doctor-placeholder {
    min-height: 650px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0px;
    padding-bottom: 0px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
	background-image: url(images/Imagen_Hero.png)!important;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 96%;
}


/* =========================================================
   SOBRE MÍ
========================================================= */


.about-dark {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px !important;

    background-color: var(--color-dark);
    color: var(--color-white);
}

.about-dark h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;

    margin-bottom: 35px;
}

.about-dark p {
    max-width: 480px;

    font-size: 0.88rem;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.86);
}


/* =========================================================
   TÍTULOS DE SECCIÓN
========================================================= */

section > .container > .row .display-6 {
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    line-height: 1;

    margin-bottom: 0;
}
.titulo-logos{
    margin-bottom:10%!important;
}


/* =========================================================
   ESPECIALIDADES
========================================================= */

.specialty-item {
    padding: 18px 0 22px;

    border-bottom: 1px solid #ebebeb;
}

.specialty-item:last-child {
    border-bottom: none;
}

.specialty-item h6 {
    margin-bottom: 8px;

    font-family: var(--font-body);
    font-size: 0.80rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.specialty-item p {
    max-width: 470px;

    font-size: 0.82rem;
    line-height: 1.55;

    color: #555;
}

.specialty-arrow {
    width: 34px;
    height: 22px;

    margin-top: 2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    border-radius: 40px;

    background-color: #adb4ba;
    color: var(--color-white);

    font-size: 0.8rem;
}

section .col-lg-5 .d-flex {
    font-size: 0.8rem;
    letter-spacing: 0.015em;
}

section .col-lg-5 .fw-bold {
    font-weight: 700 !important;
}


/* =========================================================
   CTA CENTRAL
========================================================= */

.bg-dark-custom.py-4 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.bg-dark-custom.py-4 .container {
    max-width: 920px;
}

.bg-dark-custom.py-4 .row {
    min-height: 50px;
}

.bg-dark-custom.py-4 .col-md-auto {
    font-family: var(--font-title);
    font-size: 1.15rem;
}

.bg-dark-custom.py-4 .btn {
    min-width: 135px;

    padding: 8px 22px;

    font-size: 0.72rem;

    border-width: 1px;
}


/* =========================================================
   BOTONES
========================================================= */

.btn {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.btn-success:hover {
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.btn-outline-success {
    color: var(--color-green);
    border-color: var(--color-green);
}

.btn-outline-success:hover {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: white;
}


/* =========================================================
   SEGUROS
========================================================= */

.insurance-logo {
    min-height: 70px;

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

    text-align: center;

    font-size: 1rem;
    font-weight: 600;

    color: #737373;
}


/* =========================================================
   TESTIMONIOS
========================================================= */

.testimonial {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 15px 20px !important;
}

.testimonial .display-6 {
    margin-bottom: 18px;

    font-family: Georgia, serif;
    font-size: 2.4rem;

    color: #333;
}

.testimonial p {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
    color: #4d4d4d;
	font-weight:400!important;
}

.testimonial strong {
    margin-top: 15px;

    font-size: 1rem;
}


/* =========================================================
   CONTACTO
========================================================= */

#contacto {
    padding-top: 80px;
    padding-bottom: 80px;
}

#contacto h2 {
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.9;
    margin-bottom: 40px;
}

#contacto p {
    color: rgba(255, 255, 255, 0.82);
}

#contacto .small {
    font-size: 0.98rem;
}

#contacto .btn {
    min-width: 115px;

    margin-bottom: 8px;

    font-size: 0.72rem;
}

.map-placeholder {
    min-height: 460px;

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

    background-color: #e4e8eb;

    color: #6f7579;

    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* =========================================================
   ESPACIADO DE COLUMNAS
========================================================= */
@media (max-width: 767px){
    .hero h1{
        max-width: 530px!important;
    }
}
.row.g-5 {
    --bs-gutter-x: 5rem;
}

.row.g-3 {
    --bs-gutter-x: 1rem;
}
@media (max-width: 1024px) {
	.section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero-content {
        min-height: auto;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .doctor-placeholder {
        min-height: 450px;
    }

    .about-dark {
        padding: 45px !important;
    }

    .row.g-5 {
        --bs-gutter-x: 1.8rem;
    }
	.doctor-placeholder {
    min-height: 650px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0px;
    padding-bottom: 0px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background-image: url(images/Imagen_Hero.png) !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 95%;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero-content {
        min-height: auto;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .doctor-placeholder {
        min-height: 450px;
		background-image: none!important;
    }

	.hero-content {
    max-height: 600px !important;
    background-image:
            url(images/Imagen_Hero.png),
            url(images/bg_banner.jpg);

    background-size: contain,cover;
	background-position:
            92% 80%,
            center center;
	background-repeat: no-repeat, repeat-y;
	}
	.hero-content .py-5 {
    padding-top: 0px!important;
    margin-top: 60px!important;
    padding-left: 30px!important;
    }
    .row.g-5 {
    --bs-gutter-x: 1.3rem!important;
    }
			
    .about-dark {
        padding: 45px !important;
    }

    .row.g-5 {
        --bs-gutter-x: 2.5rem;
    }

    #contacto h2 {
        font-size: 4rem;
    }

    .map-placeholder {
        min-height: 380px;
    }

}
@media (max-width: 768px) {
	.hero-content {
    max-height: 600px !important;
    background-image:
            url(images/Imagen_Hero.png),
            url(images/bg_banner.jpg);
    background-size: 50%, cover;
        background-position: 119% 124%, center center;
	background-repeat: no-repeat, repeat-y;
	}
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    #contContacto .display-5{
    max-width: 230px;
    }

    #contContacto .mb-4{
		float:left!important;
		width:30%!important;
		margin-left: 25px;
	}
	#contContacto .ubic{
		float:left!important;
		width:30%!important;
	}

    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }


    /* HERO */

    .hero {
        text-align: left;
    }

    .hero .col-lg-7 {
        padding-top: 55px !important;
        padding-bottom: 40px !important;
    }
	.hero-content {
    max-height: 600px !important;
    background-image:
            url(images/Imagen_Hero.png),
            url(images/bg_banner.jpg);
    background-size: 56%, cover;
        background-position: 128% 124%, center center;
	background-repeat: no-repeat, repeat-y;
	}

    .hero h1  {
        font-size: 3rem;
        line-height: 1;
        max-width: 560px!important;
    }
    .hero h1.display-4{
        max-width: 530px!important;
        font-size: 3rem;
        line-height: 1;
    }

    .hero .lead {
        font-size: 0.86rem !important;
    }

    .doctor-placeholder {
        min-height: 320px;
    }


    /* SOBRE MÍ */

    .image-placeholder {
        min-height: 300px;
    }

    .about-dark {
        padding: 35px 28px !important;
    }

    .about-dark h2 {
        font-size: 2.8rem;
    }

    .about-dark p {
        font-size: 0.84rem;
    }


    /* TITULOS */

    section > .container > .row .display-6 {
        font-size: 3rem;
    }


    /* ESPECIALIDADES */

    .specialty-item {
        padding-top: 16px;
        padding-bottom: 18px;
    }

    .specialty-item p {
        font-size: 0.75rem;
    }


    /* CTA */

    .bg-dark-custom.py-4 {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .bg-dark-custom.py-4 .col-12 {
        width: 100%;
        text-align: center;
    }


    /* TESTIMONIOS */

    .testimonial {
        min-height: auto;

        padding: 10px 0 30px !important;
    }


    /* CONTACTO */

    #contacto {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #contacto h2 {
        font-size: 3.4rem;
    }

    .map-placeholder {
        min-height: 300px;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 575.98px) {

    .container {
        padding-left: 22px;
        padding-right: 22px;
    }
    
	    .hero .col-lg-7{
        padding-top: 0px !important;
        padding-bottom: 40px !important;
    }
	
	    .hero-content {
        max-height: 600px !important;
        background-image: url(images/Imagen_Hero.png), url(images/bg_banner.jpg);
        background-size: 65%, cover;
        background-position: 130% 124%, center center;
        background-repeat: no-repeat, repeat-y;
    }
	
    .hero h1 {
        font-size: 2.65rem;
		max-width: 70%;
    }
	
	.hero .lead {
    max-width: 200px;
    }

    .about-dark h2,
    section > .container > .row .display-6 {
        font-size: 2.65rem;
    }

    #contacto h2 {
        font-size: 3rem;
    }

    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
	
	.testimonial{
    min-height: 210px;
    max-width: 260px;
    margin: 0 auto;
    }
	
	#contContacto .mb-4{
    float: left !important;
    width: 40% !important;
    margin-left: 25px;
    }
	
	    #contContacto .mb-4
    {
        float: left !important;
        width: 40% !important;
        margin-left: 25px;
    }
	
	#contContacto .ubic{
     width: 100% !important;
    }

}

@media (max-width: 425px) {
	.hero .lead{
    max-width: 74%;
    }
}

@media (max-width: 375px) {
	#contContacto .mb-4:first-child {
        float: left !important;
        width: 40% !important;
        margin-left: 0px;
    }
	
	#contContacto .mb-4 {
        float: left !important;
        width: 40% !important;
        margin-left: 30px;
    }
}

@media (max-width: 320px) {
             .hero, .hero-content{
        min-height: 650px;
    }   
	 
	   .hero .col-lg-7{
        padding-top: 0px !important;
        padding-bottom: 20px !important;
    }
	
	    .hero h1 {
        font-size: 2.65rem;
        max-width: 100%;
    }
	
	    .hero-content .py-5 {
        padding-top: 0px !important;
        margin-top: 20px !important;
        padding-left: 30px !important;
    }
	    .hero-content {
        max-height: 600px !important;
        background-image: url(images/Imagen_Hero.png), url(images/bg_banner.jpg);
        background-size: 68%, cover;
        background-position: 132px 124%, center center;
        background-repeat: no-repeat, repeat-y;
    }
	    #contContacto .mb-4:first-child{
        float: left !important;
        width: 100% !important;
        margin-left: 0px;
    }
	#contContacto .mb-4 {
        float: left !important;
        width: 100% !important;
        margin-left: 0px;
    }
	
}