/* Fuente y colores */
:root{
  --bg:#f7f7fb;
  --ink:#1f2330;
  --brand:#6d5ca6; /* morado del logo */
  --brand2:#b79a3d; /* dorado girasol */
  --brand3:#4c6a52; /* verde hoja */
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg)}

.wrap{max-width:1100px;margin:auto;padding:0 20px}
.section{padding:64px 0}
.section.alt{background:#fff}
h1,h2{margin:0 0 12px}
p{line-height:1.6}

.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.topbar .wrap{display:flex;align-items:center;gap:24px;padding:10px 20px}
.logo{height:54px;width:auto;border-radius:8px}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--brand)}

/* Hero slider */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;overflow:hidden;background:#000}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:fade 24s infinite}
.slides img:nth-child(1){animation-delay:0s}
.slides img:nth-child(2){animation-delay:8s}
.slides img:nth-child(3){animation-delay:16s}
@keyframes fade{
  0%,33%{opacity:1}
  40%,100%{opacity:0}
}
.hero-text{position:relative;z-index:1;text-align:center;color:#fff;padding:20px;background:linear-gradient( to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35));border-radius:16px;backdrop-filter:blur(4px)}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:2px solid var(--brand);color:var(--brand)}

.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card img{width:100%;height:auto;display:block}
.card h3{margin:16px}
.card p{margin:0 16px 16px}

.checks{padding-left:18px}
.checks li{margin-bottom:8px}

.price{list-style:none;padding-left:0}
.price li{margin:8px 0;font-size:1.1rem}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s}
.gallery img:hover{transform:scale(1.02)}

.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;box-shadow:var(--shadow)}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.embed{width:100%;overflow:hidden}
.embed iframe{width:100%}

.map{position:relative;padding-bottom:56%;height:0;border-radius:12px;overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

footer.footer{background:#0f1220;color:#cfd3ea}
.footer a{color:#cfd3ea;text-decoration:underline}

.wa-fab{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:28px;text-decoration:none;box-shadow:0 12px 30px rgba(37,211,102,.4);z-index:20}
.wa-fab:hover{transform:translateY(-1px)}

/* Contact form */
form label{display:block;font-weight:600;margin:8px 0 4px}
input,textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:12px;background:#fff}
textarea{min-height:120px;resize:vertical}
.tiny{font-size:.85rem;color:#6b7280}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.lightbox img{max-width:95%;max-height:85vh;border-radius:16px;box-shadow:var(--shadow)}
.lightbox .close{position:absolute;top:10px;right:16px;font-size:40px;background:none;border:none;color:#fff;cursor:pointer}

@media (max-width:980px){
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:60vh}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .gallery img{height:180px}
}