@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');


/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}



/* GENERAL */

body{

font-family:

'Inter',
sans-serif;

background:

#F8F5EF;

color:

#222;

line-height:

1.6;

}



h1,
h2,
h3,
.logo{

font-family:

'Cormorant Garamond',
serif;

letter-spacing:

0.5px;

}



/* BOTONES */

.btn{

background:

#587E44;

color:

white;

padding:

18px 35px;

border-radius:

12px;

text-decoration:

none;

transition:

0.3s;

display:

inline-block;

}



.btn:hover{

transform:

translateY(-3px);

}



.btn-secondary{

border:

2px solid #587E44;

padding:

18px 35px;

border-radius:

12px;

text-decoration:

none;

color:

#587E44;

transition:

0.3s;

display:

inline-block;

}



.btn-secondary:hover{

transform:

translateY(-3px);

}



/* NAVBAR */

.navbar{

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

padding:

20px 80px;

background:

white;

box-shadow:

0 5px 20px rgba(0,0,0,.03);

}



.logo img{

height:

130px;

}



.navbar ul{

display:flex;

gap:

40px;

list-style:none;

}



.navbar a{

text-decoration:none;

color:

#222;

font-size:

1.05rem;

font-weight:

500;

transition:

0.3s;

}



.navbar a:hover{

color:

#587E44;

}



.btn-whatsapp{

background:

#587E44;

color:

white !important;

padding:

15px 30px;

border-radius:

10px;

transition:

0.3s;

}



.btn-whatsapp:hover{

transform:

translateY(-3px);

}



/* HERO */

.hero{

display:flex;

align-items:center;

justify-content:center;

padding:

80px;

gap:

60px;

background:

#F7F5EF;

}



.hero-left{

flex:1;

}



.hero-tag{

display:inline-block;

padding:

10px 18px;

background:

#EAF0E0;

border-radius:

30px;

margin-bottom:

30px;

color:

#587E44;

}



.hero-left h1{

font-size:

5rem;

line-height:

1;

margin-bottom:

25px;

}



.hero-left span{

display:block;

font-style:

italic;

font-weight:

300;

color:

#7A9B58;

}



.hero-left p{

font-size:

1.3rem;

margin-bottom:

40px;

color:

#444;

}



.hero-buttons{

display:flex;

gap:

20px;

}



.hero-right{

flex:1;

}



.hero-right img{

width:

100%;

height:

600px;

object-fit:

cover;

border-radius:

30px;

box-shadow:

0 20px 40px rgba(0,0,0,.12);

}



/* BENEFICIOS */

.beneficios{

display:flex;

justify-content:

space-around;

padding:

50px;

background:

white;

margin:

50px;

border-radius:

25px;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

}



/* NOSOTROS */

.nosotros-hero{

padding:

220px 80px 100px;

text-align:center;

}



.nosotros-hero h1{

font-size:

4rem;

margin-bottom:

30px;

}



.nosotros-hero p{

max-width:

900px;

margin:auto;

font-size:

1.3rem;

line-height:

2;

}



.valores{

display:flex;

gap:

30px;

padding:

60px;

}



.valor{

background:

white;

padding:

40px;

border-radius:

20px;

flex:1;

text-align:center;

box-shadow:

0 10px 25px rgba(0,0,0,.04);

}



.mision{

display:flex;

gap:

50px;

align-items:center;

padding:

100px;

}



.mision img{

width:

50%;

border-radius:

25px;

}



/* CONSTRUCTION */

.construction{

min-height:

100vh;

display:flex;

flex-direction:

column;

justify-content:center;

align-items:center;

text-align:center;

padding:

200px 20px;

}



.construction img{

width:

500px;

max-width:

90%;

margin-bottom:

40px;

}



/* SERVICIOS */

.servicios-hero{

padding:

220px 80px 100px;

text-align:center;

}



.servicios-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:

30px;

padding:

80px;

}



.service-card{

background:

white;

padding:

40px;

border-radius:

25px;

text-align:center;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

transition:

0.3s;

}



.service-card:hover{

transform:

translateY(-5px);

}



.service-card h2{

margin:

20px 0;

}



/* DR */

.doctor{

display:flex;

gap:

80px;

align-items:center;

padding:

120px 100px;

background:

white;

}



.doctor-img{

flex:1;

text-align:center;

}



.doctor-img img{

width:

420px;

max-width:

100%;

}



.doctor-info{

flex:1.5;

}



.doctor-tag{

display:inline-block;

background:

#EAF0E0;

padding:

10px 20px;

border-radius:

30px;

margin-bottom:

25px;

color:

#587E44;

}



.doctor-info h2{

font-size:

4rem;

}



.doctor-info p{

font-size:

1.15rem;

line-height:

2;

}



.doctor-list{

list-style:none;

margin:

40px 0;

}



.doctor-buttons{

display:flex;

gap:

20px;

}



/* CONTACTO */

.contacto-hero{

padding:

220px 80px 100px;

text-align:center;

}



.contacto-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:

30px;

padding:

80px;

}



.contact-card{

background:

white;

padding:

40px;

border-radius:

25px;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

}



.mapa{

padding:

100px;

}



.mapa iframe{

width:

100%;

height:

500px;

border:

0;

border-radius:

25px;

}



.contacto-final{

padding:

100px;

text-align:center;

background:

white;

}


/* FOOTER */



footer{

background:

#284B3D;

color:

white;

padding:

70px 80px 30px;

margin-top:

100px;

}



.footer-container{

display:flex;

justify-content:

space-between;

gap:

60px;

}



.footer-brand{

max-width:

300px;

}



.footer-brand img{

width:

180px;

margin-bottom:

20px;

filter:

brightness(1.2);

}



.footer-brand p{

color:

#ddd;

}



.footer-info h3{

margin-bottom:

20px;

font-size:

2rem;

}



.footer-info p{

margin-bottom:

15px;

color:

#ddd;

}



.footer-bottom{

border-top:

1px solid rgba(255,255,255,.15);

margin-top:

50px;

padding-top:

30px;

text-align:

center;

}



.footer-bottom p{

color:

#bbb;

font-size:

0.95rem;

}

.footer-info i{

margin-right:

10px;

color:

#A7D08C;

font-size:

1.1rem;

}


/* LINKS FOOTER */

.footer-info a{

color:

#ddd;

text-decoration:

none;

transition:

0.3s;

}



.footer-info a:hover{

color:

#A7D08C;

}



/* ICONOS BENEFICIOS */

.benefit-icon{

font-size:

2rem;

color:

#587E44;

margin-bottom:

20px;

display:

block;

}



/* HERO ICON */

.hero-tag i{

margin-right:

8px;

}



/* BOTONES CON ICONOS */

.btn i,
.btn-whatsapp i{

margin-right:

8px;

}



/* FOOTER LINKS MÁS BONITOS */

.footer-info p{

display:

flex;

align-items:

center;

gap:

10px;

}



/* HOVER FOOTER */

.footer-info p:hover{

transform:

translateX(3px);

transition:

0.3s;

}

/* SERVICIOS PREMIUM */

.service-card{

min-height:240px;

}


.service-card p{

line-height:1.8;

margin-top:15px;

}


.doctor-list{

columns:2;

gap:40px;

}


.contacto-final{

background:

linear-gradient(
180deg,
#ffffff,
#F3F7EE
);

}


.valores{

background:

white;

margin:

50px;

border-radius:

25px;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

}


.servicios-hero h1{

font-size:

5rem;

}


.servicios-hero span{

display:block;

font-style:

italic;

font-weight:

300;

color:

#7A9B58;

}

.service-card ul{

list-style:none;

margin-top:

20px;

text-align:

left;

line-height:

2;

color:

#444;

}


.service-card li{

padding:

4px 0;

}


.service-card{

min-height:

420px;

}

/* ICONOS SERVICIOS */

.service-icon{

font-size:

3rem;

color:

#587E44;

margin-bottom:

25px;

display:

block;

transition:

0.3s;

}


.service-card:hover .service-icon{

transform:

scale(1.15);

color:

#7A9B58;

}

/* PROCESO */

.proceso{

padding:

100px 80px;

background:

white;

border-radius:

30px;

margin:

80px;

text-align:

center;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

}



.proceso h2{

font-size:

3rem;

margin-bottom:

25px;

}



.proceso-texto{

max-width:

900px;

margin:

auto;

margin-bottom:

70px;

font-size:

1.15rem;

color:

#555;

}



.proceso-grid{

display:flex;

justify-content:

space-between;

gap:

30px;

}



.proceso-card{

flex:

1;

padding:

40px 25px;

background:

#FAFAFA;

border-radius:

25px;

transition:

0.3s;

}



.proceso-card:hover{

transform:

translateY(-8px);

box-shadow:

0 15px 25px rgba(0,0,0,.08);

}



.proceso-icon{

width:

90px;

height:

90px;

background:

#EAF0E0;

margin:

auto;

border-radius:

50%;

display:flex;

justify-content:

center;

align-items:

center;

margin-bottom:

25px;

}



.proceso-icon i{

font-size:

2.4rem;

color:

#587E44;

}



.proceso-card h3{

margin-bottom:

20px;

font-size:

1.8rem;

}



.proceso-card p{

color:

#555;

line-height:

1.8;

}

/* HOME NUEVA */



.inicio-ayuda{

padding:100px;

text-align:center;

}



.inicio-ayuda h2{

font-size:3rem;

margin-bottom:20px;

}



.ayuda-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:60px;

}



.ayuda-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}



.ayuda-card h3{

margin:20px 0;

}





.doctor-home{

display:flex;

align-items:center;

gap:80px;

padding:100px;

background:white;

}



.doctor-home-img img{

width:350px;

border-radius:25px;

}



.doctor-home-info{

flex:1;

}





.proceso-home{

padding:100px;

text-align:center;

}



.proceso-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:50px;

}



.proceso-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}



.cta-home{

padding:120px;

text-align:center;

background:#EAF0E0;

margin-top:100px;

}



.cta-home h2{

font-size:3rem;

margin-bottom:25px;

}



.cta-home p{

margin-bottom:40px;

font-size:1.2rem;

}