:root{
  --beige:#D8C0A9;
  --sand:#F6F0E8;
  --ink:#181818;
  --muted:#5b5b5b;
  --blue:#0A1A3A;
  --line:#E3D6C7;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(10,26,58,.10);
  --radius: 18px;
  --maxw: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(var(--maxw), calc(100% - 40px)); margin:0 auto}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(227,214,199,.7);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:baseline; gap:10px; font-weight:800; letter-spacing:.06em;}
.brand .name{font-size:18px}
.brand .club{
  font-size:14px; color:var(--blue); font-weight:700;
  padding:6px 10px; border:1px solid rgba(10,26,58,.15); border-radius:999px;
}
nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center}
nav a{font-size:14px; color:rgba(24,24,24,.85); padding:10px 10px; border-radius:10px;}
nav a:hover{background:rgba(216,192,169,.25)}
nav a.active{background:rgba(10,26,58,.08); color:var(--blue); font-weight:600}
.menu-btn{display:none; border:1px solid rgba(10,26,58,.18); background:var(--white); padding:10px 12px; border-radius:12px;}

.hero{position:relative; overflow:hidden; background: linear-gradient(90deg, var(--sand), var(--beige));}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; padding:56px 0;}
.hero h1{font-size: clamp(34px, 4.2vw, 54px); line-height:1.05; margin:0 0 14px; letter-spacing:-.02em;}
.hero p{margin:0 0 22px; color:rgba(24,24,24,.72); font-size:16px; max-width:54ch;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0}
.badge{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid rgba(10,26,58,.14); background:rgba(255,255,255,.55);}

.card-hero{background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.75); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;}
.card-hero img{width:100%; height:100%; object-fit:cover}

.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; font-weight:650; border:1px solid transparent; transition: transform .08s ease, background .2s ease, border .2s ease;}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--blue); color:var(--white)}
.btn.primary:hover{background:#08152f}
.btn.ghost{background:rgba(255,255,255,.55); border-color: rgba(10,26,58,.18); color:var(--blue)}
.btn.ghost:hover{background:rgba(255,255,255,.72)}

.section{padding:64px 0}
.section .kicker{text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:rgba(10,26,58,.70); margin:0 0 10px;}
.section h2{font-size: clamp(26px, 3vw, 38px); margin:0 0 12px; letter-spacing:-.02em;}
.section p.lead{color:rgba(24,24,24,.72); margin:0 0 18px; max-width:70ch}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.feature{border:1px solid rgba(227,214,199,.85); border-radius: var(--radius); padding:18px; background:var(--white); box-shadow: 0 8px 18px rgba(0,0,0,.04);}
.feature h3{margin:0 0 6px; font-size:16px}
.feature p{margin:0; color:rgba(24,24,24,.70); font-size:14px}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center;}
.panel{border-radius: var(--radius); overflow:hidden; border:1px solid rgba(227,214,199,.85); box-shadow: var(--shadow); background:var(--white);}
.panel .pad{padding:18px}
.panel ul{margin:10px 0 0; padding-left:18px; color:rgba(24,24,24,.70)}
.panel li{margin:6px 0}

.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.price{border:1px solid rgba(227,214,199,.85); border-radius: var(--radius); padding:18px; background:linear-gradient(180deg, rgba(246,240,232,.65), rgba(255,255,255,1)); box-shadow: 0 10px 26px rgba(0,0,0,.05);}
.price .tag{display:inline-flex; gap:8px; align-items:center; font-size:12px; padding:7px 10px; border-radius:999px; background:rgba(10,26,58,.08); color:var(--blue); font-weight:650}
.price h3{margin:12px 0 8px}
.price p{margin:0 0 12px; color:rgba(24,24,24,.70); font-size:14px}
.price ul{margin:0; padding-left:18px; color:rgba(24,24,24,.70); font-size:14px}
.price li{margin:6px 0}

.gallery{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;}
.g1{grid-column: span 7}
.g2{grid-column: span 5}
.g3{grid-column: span 4}
.g4{grid-column: span 8}
.gallery .tile{border-radius: var(--radius); overflow:hidden; border:1px solid rgba(227,214,199,.85); box-shadow: var(--shadow);}
.gallery img{height:100%; width:100%; object-fit:cover}

.cta{background: linear-gradient(90deg, var(--beige), var(--sand)); border-top:1px solid rgba(227,214,199,.85); border-bottom:1px solid rgba(227,214,199,.85);}
.cta-box{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:center; padding:34px 0;}
.cta-box h2{margin:0 0 8px}
.cta-box p{margin:0; color:rgba(24,24,24,.72)}
.cta-actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap}

footer{padding:26px 0; color:rgba(24,24,24,.65); font-size:13px;}
.footer-grid{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(227,214,199,.85); padding-top:18px;}
.small-links{display:flex; gap:14px; flex-wrap:wrap}
.small-links a{color:rgba(24,24,24,.65)}
.small-links a:hover{color:var(--blue)}

.whatsapp{position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:999px; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.2);}
.whatsapp:hover{background:#08152f}

.form{display:grid; gap:12px;}
input, textarea, select{width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(227,214,199,.95); background:var(--white); font: inherit;}
textarea{min-height:120px; resize:vertical}
.note{font-size:12px; color:rgba(24,24,24,.60)}

@media (max-width: 900px){
  .hero-grid, .split, .cta-box{grid-template-columns: 1fr}
  .cta-actions{justify-content:flex-start}
  .grid-3{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .gallery{grid-template-columns: 1fr;}
  .g1,.g2,.g3,.g4{grid-column:auto}
  nav ul{
    display:none; position:absolute; left:0; right:0; top:58px;
    background:rgba(255,255,255,.95); backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(227,214,199,.85);
    padding:12px 20px; flex-direction:column; gap:6px;
  }
  nav ul.open{display:flex}
  .menu-btn{display:inline-flex}
}