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

:root{

--primary:#d63384;
--primary-dark:#b81f6b;

--secondary:#fff5fa;

--text:#333;

--white:#ffffff;

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

}

body{

font-family:
'Segoe UI',
Arial,
sans-serif;

background:#f8f9fa;

color:var(--text);

line-height:1.5;

}

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

.topbar{

background:var(--primary);

color:white;

padding:15px 25px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo-img{

width:75px;

height:75px;

object-fit:contain;

border-radius:10px;

background:white;

padding:5px;

}

.actions{

display:flex;

gap:10px;

}

.actions a{

color:white;

text-decoration:none;

padding:10px 18px;

border-radius:8px;

font-weight:bold;

transition:.3s;

}

.actions a:hover{

background:rgba(255,255,255,.15);

}

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

.hero{

min-height:420px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

position:relative;

background-size:cover;

background-position:center;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:
rgba(0,0,0,.45);

}

.hero-overlay{

position:relative;

z-index:2;

max-width:800px;

padding:30px;

}

.hero h2{

font-size:3rem;

margin-bottom:15px;

}

.hero p{

font-size:1.2rem;

margin-bottom:25px;

}

.hero-btn{

display:inline-block;

background:white;

color:var(--primary);

text-decoration:none;

padding:14px 28px;

border-radius:10px;

font-weight:bold;

}

/* =======================================
BENEFICIOS
======================================= */

.beneficios{

background:white;

padding:40px 20px;

}

.beneficios-grid{

display:grid;

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

gap:15px;

max-width:1200px;

margin:auto;

}

.beneficio{

background:var(--secondary);

padding:18px;

border-radius:10px;

text-align:center;

font-weight:600;

}

/* =======================================
PROMOCION
======================================= */

.promocion{

padding:40px 20px;

}

.promo-card{

max-width:850px;

margin:auto;

background:white;

border-radius:16px;

padding:35px;

text-align:center;

box-shadow:var(--shadow);

}

.promo-badge{

display:inline-block;

margin-bottom:15px;

font-weight:bold;

color:var(--primary);

}

.promo-precio{

font-size:2rem;

font-weight:bold;

color:var(--primary);

margin:20px 0;

}

.btn-promocion{

display:inline-block;

background:var(--primary);

color:white;

text-decoration:none;

padding:14px 30px;

border-radius:10px;

}

/* =======================================
BUSCADOR
======================================= */

.search-bar{

padding:25px;

background:white;

text-align:center;

}

.search-bar input{

width:100%;

max-width:600px;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:1rem;

}

/* =======================================
FILTROS
======================================= */

.filtros{

text-align:center;

padding:20px;

background:white;

}

.filtros button{

background:var(--primary);

color:white;

border:none;

border-radius:8px;

padding:10px 18px;

margin:5px;

cursor:pointer;

}

/* =======================================
CATALOGO
======================================= */

.catalogo{

display:grid;

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

gap:25px;

padding:30px;

}

.card{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.card:hover{

transform:
translateY(-5px);

}

.card img{

width:100%;

height:220px;

object-fit:cover;

}

.card-content{

padding:20px;

}

.card-content h3{

margin-bottom:10px;

}

.precio{

color:var(--primary);

font-size:1.7rem;

font-weight:bold;

margin:15px 0;

}

.btn-detalle{

width:100%;

border:none;

padding:12px;

margin-bottom:10px;

border-radius:8px;

cursor:pointer;

}

.btn-wa{

display:block;

text-align:center;

background:var(--primary);

color:white;

text-decoration:none;

padding:12px;

border-radius:8px;

}

/* =======================================
GALERIA
======================================= */

.galeria{

padding:50px 20px;

background:white;

text-align:center;

}

.galeria h2{

margin-bottom:30px;

}

.galeria-grid{

display:grid;

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

gap:15px;

}

.foto-galeria{

width:100%;

height:250px;

object-fit:cover;

border-radius:12px;

}

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

.testimonios{

padding:50px 20px;

}

.testimonios-grid{

display:grid;

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

gap:20px;

}

.testimonio{

background:white;

padding:25px;

border-radius:12px;

box-shadow:var(--shadow);

}

/* =======================================
COMO COMPRAR
======================================= */

.como-comprar{

padding:50px 20px;

text-align:center;

background:white;

}

.pasos-grid{

display:grid;

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

gap:20px;

margin-top:30px;

}

.paso{

background:var(--secondary);

padding:20px;

border-radius:12px;

}

.paso span{

display:inline-flex;

width:50px;

height:50px;

border-radius:50%;

background:var(--primary);

color:white;

justify-content:center;

align-items:center;

font-weight:bold;

margin-bottom:15px;

}

/* =======================================
MAPA
======================================= */

.mapa{

padding:40px 20px;

}

.mapa iframe{

width:100%;

height:420px;

border:0;

border-radius:12px;

}

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

.footer{

background:#222;

color:white;

text-align:center;

padding:40px 20px;

}

.footer-links{

margin-top:20px;

}

.footer-links a{

color:white;

text-decoration:none;

margin:0 10px;

}

/* =======================================
MODAL
======================================= */

.modal{

display:none;

position:fixed;

inset:0;

background:
rgba(0,0,0,.8);

z-index:9999;

}

.modal-content{

background:white;

width:90%;

max-width:700px;

margin:5% auto;

padding:25px;

border-radius:12px;

}

.close{

float:right;

font-size:2rem;

cursor:pointer;

}

/* =======================================
WHATSAPP
======================================= */

.whatsapp-float{

position:fixed;

right:20px;

bottom:20px;

width:65px;

height:65px;

border-radius:50%;

background:#25d366;

color:white;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

font-size:30px;

box-shadow:
0 4px 15px rgba(0,0,0,.3);

z-index:9999;

}

/* =======================================
RESPONSIVE
======================================= */

@media(max-width:768px){

.hero h2{

    font-size:2rem;

}

.topbar{

    text-align:center;

    justify-content:center;

}

.actions{

    width:100%;

    justify-content:center;

}

}