@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dm-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format('woff2'); }
:root {
  --oscuro: #1f1a0e;
  --bronce: #805f30;
  --bronce-osc: #6a4f27;
  --oliva: #877a54;
  --arena: #ccc5b5;
  --crema: #f7f4ec;
  --blanco: #fff;
  --latan: #b8893f;
  --wa: #1fa855;
  --sombra: 0 10px 30px rgba(31, 26, 14, .12);
  --r: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --f-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --f-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --f-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--oscuro); background: var(--crema); -webkit-text-size-adjust: 100%; padding-bottom: 76px; }
img, video, picture { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); }
p { margin: 0; }
a { color: var(--bronce); }
:focus-visible { outline: 3px solid var(--latan); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.sec { padding: var(--s8) 0; }
.sec-head { margin-bottom: var(--s6); max-width: 640px; }
.sec-head p { margin-top: var(--s3); font-size: 1.125rem; color: #4a4126; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--bronce); margin-bottom: var(--s2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 56px; padding: 0 var(--s5); border-radius: 999px; border: 2px solid transparent; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-pri { background: var(--bronce); color: var(--blanco); }
.btn-pri:hover { background: var(--bronce-osc); }
.btn-sec { background: transparent; color: var(--bronce); border-color: var(--bronce); }
.btn-sec:hover { background: rgba(128, 95, 48, .08); }
.btn-wa { background: var(--wa); color: #021a0b; }
.btn-wa:hover { filter: brightness(.95); }
.btn-ghost { background: rgba(255, 255, 255, .14); color: var(--blanco); border-color: rgba(255, 255, 255, .6); }
.btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.btn svg, .ico { width: 22px; height: 22px; flex: none; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--crema); border-bottom: 1px solid rgba(135, 122, 84, .25); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.hdr img { height: 40px; width: auto; mix-blend-mode: multiply; }
.nav { display: none; gap: var(--s5); }
.nav a { color: var(--oscuro); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--bronce); }
.hdr .btn { min-height: 40px; padding: 0 var(--s4); font-size: .9rem; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--blanco); background: var(--oscuro); overflow: hidden; padding: 96px 0 var(--s6); }
.hero-media, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity 1s; }
.hero-media video.on { opacity: 1; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 26, 14, .5) 0%, rgba(31, 26, 14, .55) 40%, rgba(31, 26, 14, .88) 100%); }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { font-size: var(--f-display); max-width: 14ch; }
.hero .sub { margin-top: var(--s4); font-size: 1.125rem; max-width: 46ch; color: #f1ede1; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0; padding: 0; list-style: none; }
.chips li { background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .35); padding: 6px 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; backdrop-filter: blur(4px); }
.chips li b { color: #f3d9a4; }
.buscador { background: var(--blanco); color: var(--oscuro); border-radius: 20px; padding: var(--s4); box-shadow: var(--sombra); display: grid; gap: var(--s3); max-width: 560px; }
.campo { display: grid; gap: 2px; }
.campo label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bronce); }
.campo input[type=date] { font: 500 1rem var(--sans); color: var(--oscuro); border: 1px solid var(--arena); border-radius: 10px; padding: 0 var(--s3); min-height: 48px; background: var(--crema); width: 100%; }
.fechas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.huespedes { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--arena); border-radius: 10px; background: var(--crema); padding: 2px var(--s2); }
.huespedes span { font-weight: 700; font-size: 1.125rem; }
.huespedes button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bronce); background: var(--blanco); color: var(--bronce); font: 700 1.25rem var(--sans); cursor: pointer; }
.huespedes button:disabled { opacity: .35; cursor: default; }
.aviso { min-height: 1.4em; font-size: .875rem; color: #7a3b12; margin: 0; }
.aviso.ok { color: #35531f; }
.micro { font-size: .8125rem; color: #5b5233; text-align: center; margin: 0; }
.micro a { color: var(--bronce-osc); text-decoration: underline; }
.hero-links { margin-top: var(--s4); }
.hero-links a { color: var(--blanco); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--latan); padding-bottom: 2px; }


.franja { background: var(--oscuro); color: var(--arena); padding: var(--s6) 0; }
.franja .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.franja-num { font: 600 clamp(2.5rem, 1.8rem + 3vw, 3.75rem)/1 var(--serif); color: #e6cc95; }
.franja p { display: grid; gap: 2px; }
.franja strong { font: 600 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.25 var(--serif); color: var(--blanco); }
.franja span { font-size: 1rem; letter-spacing: .04em; }
.tabs { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s4); scrollbar-width: none; }
.tabs button { flex: none; border: 1px solid var(--oliva); background: transparent; color: var(--oscuro); border-radius: 999px; padding: 10px 18px; min-height: 44px; font: 600 .9375rem var(--sans); cursor: pointer; }
.tabs button[aria-pressed=true] { background: var(--oscuro); color: var(--blanco); border-color: var(--oscuro); }
.galeria { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--s2); -webkit-overflow-scrolling: touch; }
.galeria::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.foto { flex: 0 0 85%; scroll-snap-align: center; position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; border: 0; padding: 0; background: var(--arena); cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px var(--s3) var(--s3); color: var(--blanco); font-size: .875rem; text-align: left; background: linear-gradient(transparent, rgba(31, 26, 14, .75)); }
.sin-fotos { flex: 0 0 100%; aspect-ratio: 16/9; max-height: 340px; border-radius: var(--r); background: var(--arena); display: grid; place-content: center; text-align: center; gap: var(--s3); padding: var(--s5); }
.sin-fotos p { font-family: var(--serif); font-size: 1.375rem; }
.cta-galeria { margin-top: var(--s5); }
.sprite { position: absolute; }
.mt-6 { margin-top: var(--s6); }
.mt-3 { margin-top: var(--s3); }
dialog.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.lb::backdrop { background: rgba(12, 9, 3, .94); }
.lb-in { width: 100%; height: 100%; display: grid; place-items: center; position: relative; touch-action: pan-y; }
.lb-in img { max-width: 96vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lb-cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--arena); font-size: .9375rem; }
.lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.5rem; cursor: pointer; }
.lb .x { top: 16px; right: 16px; } .lb .pv { left: 12px; top: 50%; } .lb .nx { right: 12px; top: 50%; }

.comp { background: var(--blanco); }
.cards { display: grid; gap: var(--s5); }
.card { background: var(--crema); border: 1px solid var(--arena); border-radius: 20px; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); position: relative; }
.card.vh { background: var(--blanco); border: 2px solid var(--bronce); box-shadow: 0 18px 44px rgba(128, 95, 48, .22); }
.etiqueta { position: absolute; top: -14px; left: var(--s5); background: linear-gradient(90deg, var(--latan), var(--bronce)); color: var(--blanco); font-weight: 700; font-size: .8125rem; padding: 5px 14px; border-radius: 999px; }
.card .ubic { font-size: .9375rem; }
.card .lema { color: #4a4126; }
.card .desde { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--bronce); line-height: 1; }
.card .desde small { font: 500 .9rem var(--sans); color: #5b5233; }
.card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .9375rem; }
.card details { border-top: 1px solid var(--arena); padding-top: var(--s3); }
.card summary { cursor: pointer; font-weight: 700; color: var(--bronce); min-height: 32px; }
.mini { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: .9375rem; }
.mini td { padding: 6px 0; border-bottom: 1px dashed var(--arena); }
.mini td:last-child { text-align: right; font-weight: 700; }
.mini small { color: #5b5233; font-weight: 400; }
.card .btn { margin-top: auto; }
.nota { margin-top: var(--s4); font-size: .875rem; color: #5b5233; }

.servicios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.servicios li { background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s2); justify-items: start; font-weight: 500; }
.servicios .ico { width: 30px; height: 30px; color: var(--bronce); }
.matriz { margin-top: var(--s6); overflow-x: auto; }
.matriz table { border-collapse: collapse; min-width: 520px; width: 100%; background: var(--blanco); border-radius: var(--r); overflow: hidden; }
.matriz th, .matriz td { padding: 10px var(--s3); border-bottom: 1px solid var(--arena); text-align: center; font-size: .9375rem; }
.matriz th:first-child, .matriz td:first-child { text-align: left; }
.matriz .no { color: #6b6149; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: p; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); position: relative; }
.pasos li::before { content: counter(p); width: 56px; height: 56px; border-radius: 50%; background: var(--bronce); color: var(--blanco); display: grid; place-items: center; font: 600 1.5rem var(--serif); }
.pasos li:not(:last-child)::after { content: ''; position: absolute; left: 27px; top: 60px; bottom: -22px; width: 2px; background: var(--arena); }
.pasos h3 { font-size: 1.25rem; margin-bottom: 4px; }
.importante { background: var(--oscuro); color: var(--arena); border-radius: 24px; padding: var(--s6) var(--s5); }
.importante h2 { color: var(--blanco); margin-bottom: var(--s4); }
.importante ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.importante li { position: relative; padding-left: 34px; font-size: 1.0625rem; }
.importante li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #e6cc95; font-weight: 700; }
.importante strong { color: var(--blanco); }
.importante a { color: #e6cc95; }
.resena { background: var(--arena); border-radius: 24px; padding: var(--s6) var(--s5); display: grid; gap: var(--s4); }
.resena .est { color: #4a3418; font-size: 1.5rem; letter-spacing: 4px; }
.resena .btn-sec { color: var(--oscuro); border-color: var(--oscuro); }
.resena blockquote { margin: 0; font: 500 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--serif); }

.faq details { border-bottom: 1px solid var(--arena); }
.faq summary { cursor: pointer; padding: var(--s4) 0; font: 600 1.125rem/1.3 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: var(--s4); min-height: 56px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--bronce); flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 var(--s4); max-width: 70ch; }

.final { background: linear-gradient(rgba(31, 26, 14, .82), rgba(31, 26, 14, .88)), url('../img/vh-edificio.webp') center/cover; color: var(--blanco); text-align: center; padding: var(--s9) 0; }
.final h2 { max-width: 18ch; margin: 0 auto var(--s4); }
.final p { max-width: 52ch; margin: 0 auto var(--s5); color: #f1ede1; font-size: 1.125rem; }
.final .acc { display: grid; gap: var(--s3); max-width: 360px; margin: 0 auto var(--s5); }
.final .conf { font-size: .9rem; color: var(--arena); margin: 0 auto; }

.foot { background: var(--oscuro); color: var(--arena); padding: var(--s7) 0 var(--s6); font-size: .9375rem; }
.foot .wrap { display: grid; gap: var(--s5); }
.foot img { height: 44px; width: auto; }
.foot a { color: #e6cc95; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom)); background: rgba(247, 244, 236, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--arena); transform: translateY(110%); transition: transform .3s; }
.barra.on { transform: none; }
.barra .btn { width: 100%; }
.flotante { display: none; }

.legal { max-width: 760px; padding: 96px var(--s4) var(--s8); margin: 0 auto; }
.legal h1 { font-size: var(--f-h2); margin-bottom: var(--s5); }
.legal h2 { font-size: 1.375rem; margin: var(--s5) 0 var(--s2); }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .sec { padding: var(--s9) 0; }
  .wrap { padding: 0 var(--s6); }
  .hero { align-items: center; }
  .buscador { grid-template-columns: 1.2fr 1.2fr 1fr; align-items: end; max-width: none; padding: var(--s4) var(--s5); border-radius: 28px; }
  .buscador .fechas { display: contents; }
  .buscador .aviso, .buscador .micro { grid-column: 1 / -1; text-align: left; }
  .buscador .btn { grid-column: 1 / -1; }
    .foto { flex-basis: 46%; }
  .franja .wrap { flex-direction: row; justify-content: center; gap: var(--s6); text-align: left; }
  .servicios { grid-template-columns: repeat(4, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .pasos li { grid-template-columns: 1fr; }
  .pasos li:not(:last-child)::after { left: 68px; top: 27px; right: -22px; bottom: auto; width: auto; height: 2px; }
  .final .acc { grid-auto-flow: column; max-width: 560px; }
  .barra { display: none; }
  .flotante { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #06361a; box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .flotante.on { opacity: 1; pointer-events: auto; }
  .flotante svg { width: 30px; height: 30px; }
  .foot .wrap { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .nav { display: flex; }
  .buscador { grid-template-columns: 1.2fr 1.2fr 1fr auto; }
  .buscador .btn { grid-column: auto; }
  .cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .card[data-id=jardines-residenciales] { order: 1; }
  .card.vh { order: 2; transform: translateY(-16px); }
  .card[data-id=alta-villa] { order: 3; }
  .foto { flex-basis: 31%; }
}