:root{
    --bg:#ffffff;
    --panel:#fbfbfb;
    /* --fg:#0b0f14; */
    --muted:#6b7280;
    --gold:#c8a95a;
    --radius:14px;
    --container:1100px;
}
*{
    box-sizing:border-box
}
html,body{
    margin:0;
    padding:0;
    font-family:Poppins,system-ui,Segoe UI,Roboto,Arial;color:var(--fg);
    background:var(--bg);
    line-height:1.6
}
img{
    max-width:100%;
    display:block;
    border-radius:12px
}

a{
    color:inherit
}

/* .wrap{
    width:min(var(--container),92vw);
    margin:0 auto
} */




/* heroXwave */
.heroXwave{
    position: relative;
    overflow: hidden;
    height: 40vh; /* 100% del alto de la pantalla */
    display: flex;
    align-items: center;
}
.hero_HiEms-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;


    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.28); /* oscurece el fondo un poco para leer mejor el texto */
}

.heroXwave::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(255,255,255,0.02)),url('img/celulitis-heroXwave.jpg') center/cover no-repeat;
    z-index:0
}

.heroXwave-inner{
    position:relative;
    z-index:2
}

.heroXwave-card{
    /* background:rgba(255,255,255,0.9);padding:34px; */
    border-radius:16px;
    box-shadow:0 8px 30px rgba(11,15,20,0.04);
    max-width:760px
}

.eyebrow{
    color:var(--gold);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
    font-size:12px;
    margin-bottom:10px
}

h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,4vw,40px);
    margin:0 0 12px
}

p.lead{
    color:var(--muted);
    margin:0 0 18px
}

.btn{
    padding:10px 16px;
    border-radius:999px;
    font-weight:600;
    border:1px solid rgba(15,23,42,.06);
    background:transparent;
    cursor:pointer
}

.btn-primary{
    background:linear-gradient(90deg,var(--gold),#f0d78a);color:#081018;
    border:none
}

section{
    padding:64px 0;
    border-top:1px solid #f0f0f0
}

h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,3.2vw,30px);
    margin:0 0 12px;
    color:#140b0c;
}

.muted{
    color:var(--muted)
}

.grid{
    display:grid;
    gap:18px
}

.grid.cols-3{
    grid-template-columns:repeat(3,1fr)
}

.card{
    background:var(--panel);
    padding:18px;
    border-radius:12px;
    color:#140b0c;
}

ul.benef{
    list-style:none;
    padding-left:0
}

ul.benef li::before{
    content:"•";
    color:var(--gold);
    display:inline-block;
    width:18px
}
.before-grid{
    display:grid;
    gap:12px;
    grid-template-columns:1fr 1fr
}
.before{
    height:200px;
    background:#efefef;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#999;
    font-weight:600
}


@media(min-width:900px){
    .heroXwave{
        min-height:74vh
    } 
}
@media(max-width:899px){
    .wrap{
        padding:0 18px
    } 
    .grid.cols-3{
        grid-template-columns:1fr
    } 
}