```css
/* ====================================
   MARISELA CLEANING SERVICES
   PREMIUM STYLESHEET
==================================== */

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

:root{

--pink:#d8a7b1;
--pink-dark:#c8929d;
--gold:#c8a96b;
--light:#f8f8f8;
--white:#ffffff;
--text:#333333;

}

html{
scroll-behavior:smooth;
}

body{

font-family:Arial, Helvetica, sans-serif;

color:var(--text);

line-height:1.6;

background:#fff;

}

/* =========================
   GENERAL
========================= */

.container{

width:90%;

max-width:1200px;

margin:auto;

}

section{

padding:80px 0;

}

h1{

font-size:3.5rem;

line-height:1.2;

margin-bottom:20px;

}

h2{

font-size:2.4rem;

margin-bottom:25px;

text-align:center;

}

p{

margin-bottom:15px;

}

/* =========================
   HEADER
========================= */

header{

position:sticky;

top:0;

z-index:1000;

background:white;

box-shadow:0 2px 15px rgba(0,0,0,.08);

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo img{

height:90px;

width:auto;

}

.menu{

display:flex;

gap:30px;

list-style:none;

}

.menu a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

}

.menu a:hover{

color:var(--pink);

}

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

#hero{

min-height:90vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),
url('../assets/images/hero/hero.jpg');

background-size:cover;

background-position:center;

}

.hero-content{

max-width:900px;

}

.hero-content p{

font-size:1.2rem;

max-width:700px;

margin:auto;

margin-bottom:30px;

}

.badges{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:25px;

}

.badge{

background:white;

color:#333;

padding:10px 20px;

border-radius:50px;

font-weight:bold;

}

/* =========================
   BUTTONS
========================= */

.btn{

display:inline-block;

padding:15px 35px;

background:var(--pink);

color:white;

text-decoration:none;

font-weight:bold;

border-radius:50px;

transition:.3s;

}

.btn:hover{

background:var(--pink-dark);

transform:translateY(-3px);

}

/* =========================
   PROMO
========================= */

.promo-banner{

background:
linear-gradient(
135deg,
var(--pink),
var(--gold)
);

color:white;

text-align:center;

}

/* =========================
   STATS
========================= */

#stats{

background:#f7f4f5;

}

.stats-grid{

display:grid;

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

gap:20px;

text-align:center;

}

.stat{

background:white;

padding:30px;

border-radius:20px;

}

.stat h3{

font-size:3rem;

color:var(--gold);

}

/* =========================
   WHY US
========================= */

.why-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}

.why-card{

background:white;

padding:25px;

border-radius:20px;

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

text-align:center;

font-weight:bold;

}

/* =========================
   SERVICES
========================= */

#services{

background:var(--light);

}

.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

margin-top:40px;

}

.service-card{

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.3s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card img{

width:100%;

height:240px;

object-fit:cover;

}

.service-card h3{

padding:20px;

}

.service-card p{

padding:0 20px 20px;

}

/* =========================
   BEFORE AFTER
========================= */

.ba-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.ba-grid img{

width:100%;

border-radius:20px;

display:block;

}

/* =========================
   GALLERY
========================= */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:20px;

}

.gallery-grid img{

width:100%;

height:300px;

object-fit:cover;

border-radius:20px;

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

}

/* =========================
   REVIEWS
========================= */

.reviews-box{

max-width:700px;

margin:auto;

background:white;

padding:40px;

border-radius:20px;

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

text-align:center;

}

.rating{

font-size:2rem;

color:#f4b400;

}

/* =========================
   SERVICE AREAS
========================= */

.areas-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

}

.areas-grid p{

background:white;

padding:15px;

border-radius:15px;

text-align:center;

box-shadow:
0 5px 15px rgba(0,0,0,.08);

}

/* =========================
   MAP
========================= */

#map{

background:var(--light);

}

#map iframe{

width:100%;

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.1);

}

/* =========================
   FORM
========================= */

form{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}

input,
textarea{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:1rem;

}

textarea{

height:150px;

resize:vertical;

}

button{

background:var(--pink);

color:white;

border:none;

padding:15px;

border-radius:50px;

font-size:1rem;

font-weight:bold;

cursor:pointer;

}

button:hover{

background:var(--pink-dark);

}

/* =========================
   FOOTER
========================= */

footer{

background:#222;

color:white;

text-align:center;

padding:60px 20px;

}

/* =========================
   FLOATING BUTTONS
========================= */

.whatsapp-float,
.call-float,
.facebook-float{

position:fixed;

right:20px;

padding:14px 20px;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:bold;

z-index:999;

box-shadow:
0 5px 20px rgba(0,0,0,.2);

}

.whatsapp-float{

background:#25D366;

bottom:20px;

}

.call-float{

background:var(--gold);

bottom:90px;

}

.facebook-float{

background:#1877f2;

bottom:160px;

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

nav{

flex-direction:column;

gap:20px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

}

h1{

font-size:2rem;

}

h2{

font-size:1.8rem;

}

.stats-grid{

grid-template-columns:
1fr 1fr;

}

.ba-grid{

grid-template-columns:
1fr;

}

.logo img{

height:70px;

}

}

```css
/* TESTIMONIALS */

.section-subtitle{

text-align:center;

max-width:700px;

margin:0 auto 40px;

color:#666;

}

#testimonials .service-card{

padding:30px;

text-align:center;

}

#testimonials .rating{

font-size:1.5rem;

color:#f4b400;

margin-bottom:15px;

}

#testimonials strong{

display:block;

margin-top:15px;

color:#c8929d;

font-weight:700;

}
```