:root{
  --bg:#0a0a0a;
  --card:#111;
  --muted:#bdbdbd;
  --white:#fff;
  --brand:#e0d5c2;
  --accent:#e4b061;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:20px;
}

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

/* MAIN SCROLL SNAP */
main{
  scroll-snap-type:y mandatory;
}

/* SECCIONES */
section.snap{
  min-height:100vh;
  position:relative;
  scroll-snap-align:start;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  isolation:isolate;
}

/* BACKGROUNDS */
.bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  transition:transform .8s ease;
  will-change:transform;
}

.veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 120% at 50% 80%, rgba(0,0,0,.05), rgba(0,0,0,.6) 60%, rgba(0,0,0,.85));
  pointer-events:none;
}

section.snap:is(:hover,:focus-within) .bg{
  transform:scale(1.06)
}

/* HEADER */
header{
  position:fixed;
  inset:0 0 auto 0;
  height:64px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px, 4vw, 48px);
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  backdrop-filter:saturate(160%) blur(6px);
}

.brand{display:flex; gap:12px; align-items:center; letter-spacing:2px}
.brand__logo{
  width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center;
  font-weight:700; font-family:"Playfair Display", serif;
}
.brand__name{ font-family:"Playfair Display", serif; font-weight:700; font-size:1.1rem }

nav{display:flex; gap:20px; align-items:center}
nav a{
  color:var(--white); text-decoration:none; font-weight:500; font-size:.95rem;
  opacity:.85; position:relative; padding:.25rem 0;
}
nav a:hover, nav a.active{opacity:1}
nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent);
  transition:width .3s ease;
}
nav a:hover::after, nav a.active::after{ width:100% }

.burger{
  display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; background:transparent; color:#fff; cursor:pointer;
}
.burger span{display:block; width:22px; height:2px; background:#fff; margin:0 auto; position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
}
.burger span::before{ top:-6px }
.burger span::after{ top:6px }

/* DRAWER MENU MÓVIL */
.drawer{
  position:fixed; inset:64px 0 auto 0;
  background:rgba(0,0,0,.9);
  transform:translateY(-110%);
  transition:transform .35s ease;
  z-index:40; padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer.open{ transform:translateY(0) }
.drawer a{ display:block; padding:14px 10px; color:#fff; text-decoration:none; border-radius:10px }
.drawer a:hover{ background:rgba(255,255,255,.06) }

/* HERO */
.hero h1{ font-family:"Playfair Display", serif; font-size: clamp(38px,6vw,84px); line-height:1.05; letter-spacing:.5px; margin:0 0 12px;}
.hero p{ max-width:800px; color:var(--muted); font-size: clamp(16px, 2.1vw, 20px) }
.cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap }

.btn{appearance:none; border:none; cursor:pointer; font-weight:600; letter-spacing:.4px; padding:12px 20px; border-radius:999px; box-shadow:var(--shadow);}
.btn--primary{ background:var(--accent); color:#1a1a1a }
.btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3) }
.btn:active{ transform:translateY(1px) }

/* SECCIÓN SERVICIOS */
.section-title{ width:100%; max-width:1200px; margin-inline:auto; padding:0 8px 18px; font-family:"Playfair Display", serif; letter-spacing:.4px; font-size: clamp(24px, 3.2vw, 36px) }

.servicio.row {
  display:flex; align-items:center; justify-content:space-between;
  margin:40px 0; gap:20px;
}
.servicio.row.invertido { flex-direction:row-reverse; }
.servicio img{
  width:400px; height:250px; object-fit:cover; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.servicio .texto{ flex:1; color:white; }

/* CONTACTO */
.contact{
  width:100%; max-width:1100px; margin-inline:auto;
  display:flex; flex-direction:column; gap:20px;
  align-items:center;
  z-index:2;
  position:relative;
}
.contact__card{
  width:100%; max-width:600px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px;
}

/* FORM ELEMENTS */
.contact form{ display:flex; flex-direction:column; gap:12px }
input, textarea, select{
  background:#0c0c0c; border:1px solid rgba(255,255,255,.16);
  color:#fff; padding:12px 14px; border-radius:12px; font:inherit;
}
textarea{ min-height:120px; resize:vertical; }

/* FOOTER */
footer{
  padding:28px; border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted); text-align:center
}

/* ANIMACIONES */
.fade-up{ opacity:0; transform:translateY(10px); transition:all .6s ease }
.fade-up.in{ opacity:1; transform:none }

/* RESPONSIVE GENERAL */
@media (max-width:1024px){
  .servicio.row, .servicio.row.invertido{ flex-direction:column; text-align:center; gap:16px }
  .servicio img{ width:100%; height:auto; max-width:500px }
  .servicio .texto{ width:100%; }
}

@media (max-width:768px){
  .servicio.row, .servicio.row.invertido{ gap:12px }
  .servicio img{ width:100%; height:auto }
  .contact{ padding:0 16px; }
  header nav.desktop-nav{ display:none }
  .burger{ display:flex }
}