
:root{
  --brand:#cc5b8f; /* tono rosa del logo aproximado */
  --brand-dark:#9a3f6b;
  --bg:#fff9fb;
  --text:#2a2a2a;
  --accent:#f6d7e6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eee;
}
.container{width:min(1200px, 94%); margin:auto}
.nav{
  display:flex; align-items:center; justify-content:space-between; padding:.7rem 0;
}
.logo{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--brand-dark)}
.logo img{width:40px; height:40px; border-radius:50%}
.logo b{font-family:'Playfair Display', serif; letter-spacing:.5px; font-size:1.1rem}

nav a{margin:0 .7rem; text-decoration:none; color:#444; font-weight:600}
nav a:hover{color:var(--brand)}

.hero{position:relative}
.slider{position:relative; overflow:hidden; height:68vh; min-height:420px; border-radius:18px;}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover}
.slider-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.slider-dots button{
  width:10px;height:10px;border-radius:50%;border:none;background:#fff8;cursor:pointer
}
.slider-dots button.active{background:var(--brand)}

.hero h1{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  color:white; text-align:center; text-shadow:0 10px 30px rgba(0,0,0,.5);
  font-family:'Playfair Display', serif; font-size:clamp(28px,5vw,60px);
  letter-spacing:.5px;
}

.section{padding:60px 0}
.section h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 4vw, 42px);
  margin:0 0 10px; color:var(--brand-dark)
}
.section p{margin:0 0 20px; color:#555}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.card{
  background:#fff; padding:22px; border-radius:16px; border:1px solid #eee;
  box-shadow:0 8px 30px rgba(0,0,0,.04);
}

.gallery{columns:1; column-gap:14px}
@media(min-width:700px){.gallery{columns:2}}
@media(min-width:1000px){.gallery{columns:3}}
.gallery img{width:100%; border-radius:12px; margin:6px 0; display:block; break-inside:avoid; cursor:pointer}

.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.video{position:relative;padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%}

.contact{
  display:grid; grid-template-columns:1.2fr .8fr; gap:22px
}
@media(max-width:900px){.contact{grid-template-columns:1fr}}

form{
  background:#fff; padding:22px; border:1px solid #eee; border-radius:16px;
}
label{display:block; font-weight:600; margin:8px 0 6px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ddd; outline:none
}
button{
  padding:12px 18px; border:none; border-radius:12px; background:var(--brand); color:white; font-weight:700; cursor:pointer
}
button:hover{background:var(--brand-dark)}

.aside{
  background:linear-gradient(180deg, var(--accent), #fff);
  padding:22px; border-radius:16px; border:1px solid #eee
}
.social a{display:inline-block; margin-right:12px; text-decoration:none; font-weight:700; color:var(--brand-dark)}

footer{
  margin-top:40px; padding:26px 0; text-align:center;
  background:#fff; border-top:1px solid #eee; color:#666
}
footer a{color:var(--brand-dark); text-decoration:none; font-weight:700}

.whatsapp-float{
 position:fixed; bottom:20px; right:20px; width:58px; height:58px;
 background:#25D366; border-radius:50%; box-shadow:0 10px 30px rgba(0,0,0,.2);
 display:grid; place-items:center; z-index:60;
}
.whatsapp-float img{width:32px; height:32px; filter:invert(1)}
/* Lightbox */
#lightbox{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:80}
#lightbox img{max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
#lightbox.close{display:none}

.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:18px
}
.service-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.04)}
.service-card h4{margin:.2rem 0 .6rem;color:var(--brand-dark)}
.service-list{list-style:none;padding-left:0;margin:0}
.service-list li{padding:8px 0;border-bottom:1px dashed #eee;display:flex;gap:8px;align-items:flex-start}
.service-list li:last-child{border-bottom:none}
.service-list .icon{min-width:1.1rem}
.tag{display:inline-block;background:var(--accent);color:var(--brand-dark);padding:.2rem .55rem;border-radius:999px;font-size:.8rem;margin-right:.3rem}

@media(max-width:768px){
  .slider{height:50vh;min-height:300px}
  .slide img{object-position:center;object-fit:cover}
  .hero h1{font-size:clamp(20px,6vw,36px);padding:0 10px}
}
