:root{ --verde:#1f7a5a; --madera:#a87449; --arena:#f5efe7; --texto:#2d2a26; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--arena);color:var(--texto);line-height:1.55}

.hero{position:relative; min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center; color:white; background: linear-gradient(135deg,#0f5132,#1f7a5a); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35; background-image: var(--hero, url('assets/ruka_ruben_karina.jpg'))}
.hero .content{position:relative; padding:24px; max-width:980px}
.hero img.logo{width:220px; height:auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));}
.hero h1{margin:8px 0 6px; font-size: clamp(28px, 5vw, 44px)}
.hero p.sub{margin:6px 0 0; opacity:.96; font-size: clamp(14px, 3.5vw, 18px)}
.badge{display:inline-block; background:var(--madera); color:white; padding:4px 10px; border-radius:999px; font-size:13px}

nav{background:white; border-bottom:1px solid #eee; position:sticky; top:0; z-index:50}
nav .wrap{max-width:1150px; margin:0 auto; padding:10px 16px; display:flex; gap:14px; overflow:auto}
nav a{color:#2d2a26; text-decoration:none; padding:8px 12px; border-radius:999px}
nav a:hover{background:#f0f4f1}

.container{max-width:1150px; margin:0 auto; padding:28px 20px}
h2{font-size: clamp(22px, 4.5vw, 28px); margin:0 0 12px}
.card{background:white;border-radius:14px; padding:18px; box-shadow:0 8px 28px rgba(0,0,0,.08); margin:18px 0}

.grid-2{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-items:start}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); align-items:stretch}

.btn{ background:var(--verde); color:white; text-decoration:none; border-radius:999px; padding:12px 18px; font-weight:600; box-shadow:0 8px 20px rgba(31,122,90,.35); transition:.2s transform; display:inline-block}
.btn:hover{transform:translateY(-2px)}

.cta{ position:fixed; right:16px; bottom:16px; z-index:1000; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.wa{width:54px; height:54px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#25D366; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wa img{width:28px; height:28px}

footer{padding:40px 20px; text-align:center; color:#6b665f}

.gallery{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery img{width:100%; border-radius:12px; display:block; cursor:pointer; transition:.15s transform}
.gallery img:hover{transform:scale(1.01)}

.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:2000}
.lightbox.open{display:flex}
lightbox img{max-width:90vw; max-height:85vh; border-radius:12px}
.lightbox .close, .lightbox .prev, .lightbox .next{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:white; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none
}
.lightbox .close{top:8%; right:6%; transform:none}
.lightbox .prev{left:5%}
.lightbox . next{right:5%}

.tabs{display:flex; gap:8px; margin-bottom:10px}
.tab{padding:10px 14px; border-radius:999px; background:#e9efe9; cursor:pointer; font-weight:600}
.tab.active{background:var(--verde); color:white}
.form-group{display:grid; gap:6px; margin:10px 0}
input, select, textarea{padding:10px 12px; border-radius:10px; border:1px solid #ddd; width:100%}
.summary{background:#f2f7f2; border:1px dashed #bcd3c7; border-radius:12px; padding:12px; margin-top:8px; color:#1f513f}
.small{font-size:13px; color:#6b665f}

.presentacion{display:grid; gap:16px; grid-template-columns: 160px 1fr; align-items:center}
.presentacion .foto{width:160px; height:160px; border-radius:50%; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15)}
.presentacion .foto img{width:100%; height:100%; object-fit:cover}
.presentacion .texto{background:white; border-radius:14px; padding:16px; box-shadow:0 8px 28px rgba(0,0,0,.08)}
.wave{display:inline-block; animation: wave 1.6s infinite; transform-origin: 70% 70%}
@keyframes wave{0%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(14deg)}50%{transform:rotate(-4deg)}60%{transform:rotate(10deg)}70%{transform:rotate(0)}100%{transform:rotate(0)}}

.service{display:flex; flex-direction:column; justify-content:space-between; background:white; border-radius:14px; padding:16px; box-shadow:0 8px 28px rgba(0,0,0,.08)}
.service h3{margin:0 0 8px}
.service ul{margin:0 0 12px 18px; padding:0}