/* Demostraciones de la página de fotografía inmobiliaria. Marcas y datos ficticios:
   "Estadía" no imita el diseño de ninguna plataforma real y no usa logos ajenos. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;color:#1d2228;background:#fff;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #0b6e68;outline-offset:2px}

/* Foto doble: la final y la toma sin editar, superpuestas */
.doble{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#d9d5cf}
.doble picture,.doble img{position:absolute;inset:0;width:100%;height:100%}
.doble img{object-fit:cover}
.doble-s{opacity:0;transition:opacity .5s ease}
html[data-fotos="sin"] .doble-s{opacity:1}

/* Avisos comunes */
.d-franja{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 1.2rem;background:#0d1b2a;color:#fff;font-size:.8rem}
.d-franja-volver{font-weight:600;white-space:nowrap}
html.embebido .d-franja-volver,html.embebido .d-cta{display:none}
.d-cta{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:1rem;width:min(calc(100% - 2rem),720px);padding:.7rem .8rem .7rem 1.1rem;border-radius:16px;background:#0d1b2a;color:#fff;font-size:.88rem}
.d-cta p{flex:1;min-width:0}
.d-cta-btn{flex:none;padding:.6rem 1rem;border-radius:10px;background:#e30613;font-weight:600;white-space:nowrap}
.d-cta-x{flex:none;width:36px;height:36px;font-size:1.3rem;line-height:1;color:#fff}
.d-cta[hidden]{display:none}
.d-toast{position:fixed;left:50%;bottom:5.4rem;transform:translateX(-50%);z-index:60;max-width:calc(100% - 2rem);padding:.7rem 1.1rem;border-radius:12px;background:#1d2228;color:#fff;font-size:.9rem;text-align:center}
html.embebido .d-toast{bottom:1.2rem}
.d-toast[hidden]{display:none}

/* ---------- Renta corta ---------- */
.demo--renta{--acento:#0b6e68}
.demo--renta{padding-bottom:5.5rem}
html.embebido .demo--renta{padding-bottom:1rem}
.r-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,4vw,2.6rem);border-bottom:1px solid #e8e6e2}
.r-logo{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:1.25rem;letter-spacing:-.03em;color:var(--acento)}
.r-busca{display:flex;align-items:center;padding:.3rem .35rem .3rem 0;border:1px solid #e0ded9;border-radius:999px;font-size:.86rem;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.r-busca span{padding:0 1rem;border-right:1px solid #e8e6e2}
.r-busca span:nth-child(3){border:0;color:#6b7076}
.r-busca i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--acento)}
.r-cuenta{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .4rem .3rem .7rem;border:1px solid #e0ded9;border-radius:999px}
.r-cuenta b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#3a4048;color:#fff;font-size:.8rem}
.r-main{max-width:1160px;margin:0 auto;padding:1.4rem clamp(1rem,4vw,2.6rem) 2rem}
.r-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.r-cab h1{font-size:1.65rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.r-acciones{display:flex;gap:1.1rem;font-size:.88rem;font-weight:500;text-decoration:underline;white-space:nowrap}
.r-marco{position:relative}
.r-fotos{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:8px;border-radius:14px;overflow:hidden}
.r-foto{position:relative;display:block;min-width:0;overflow:hidden}
.r-foto--1{grid-row:span 2}
.r-foto:hover .doble{filter:brightness(.92)}
.r-todas{position:absolute;right:.9rem;bottom:.9rem;padding:.45rem .85rem;border-radius:9px;background:#fff;border:1px solid #1d2228;font-size:.84rem;font-weight:600}
.r-contador{display:none}
.r-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,5vw,4rem);margin-top:1.8rem}
.r-info>section,.r-claves{padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid #e8e6e2}
.r-info h2{font-size:1.28rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.8rem}
.r-resumen h2{margin-bottom:.15rem}
.r-resumen p{color:#40464d}
.r-nuevo{display:inline-flex;align-items:center;gap:.3rem;margin-top:.3rem;font-weight:600;color:#1d2228!important}
.r-anfitrion{display:flex;align-items:center;gap:.8rem}
.r-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#3a4048;color:#fff;font-weight:600}
.r-anfitrion div{display:flex;flex-direction:column}
.r-anfitrion span:last-child{color:#6b7076;font-size:.9rem}
.r-claves{display:grid;gap:1rem}
.r-claves b{display:block;font-weight:600}
.r-claves span{color:#6b7076;font-size:.92rem}
.r-cuartos{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.r-cuartos .doble,.r-areas .doble{aspect-ratio:3/2;height:auto;border-radius:12px}
.r-cuartos figcaption{margin-top:.5rem}
.r-cuartos figcaption b{display:block;font-weight:600}
.r-cuartos figcaption span{color:#6b7076;font-size:.9rem}
.r-amen{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem 1.2rem}
.r-amen li{position:relative;padding-left:1.3rem}
.r-amen li::before{content:"";position:absolute;left:.1rem;top:.56em;width:9px;height:5px;border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(-45deg)}
.r-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.r-areas figcaption{margin-top:.4rem;font-weight:500;font-size:.92rem}
.r-reserva{position:sticky;top:1.4rem;align-self:start;padding:1.3rem;border:1px solid #e0ded9;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.r-precio{font-size:1rem;margin-bottom:.9rem}
.r-precio b{font-size:1.4rem;font-weight:600}
.r-fechas{display:grid;grid-template-columns:1fr 1fr;border:1px solid #bfc2c6;border-radius:10px;font-size:.9rem;margin-bottom:.9rem}
.r-fechas>div{padding:.5rem .7rem}
.r-fechas>div:first-child{border-right:1px solid #bfc2c6}
.r-hues{grid-column:span 2;border-top:1px solid #bfc2c6}
.r-fechas small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.04em}
.r-btn{width:100%;padding:.8rem 1rem;border-radius:10px;background:var(--acento);color:#fff;font-weight:600}
.r-nota{margin-top:.6rem;text-align:center;color:#6b7076;font-size:.82rem}
.r-total{display:flex;justify-content:space-between;margin-top:.9rem;padding-top:.8rem;border-top:1px solid #e8e6e2;font-weight:600}
.r-movil-reserva{display:none}
.d-galeria{width:min(960px,100vw);max-width:none;max-height:100dvh;height:100dvh;margin:0 auto;padding:0;border:0;overflow-y:auto;background:#fff}
.d-galeria::backdrop{background:rgba(0,0,0,.5)}
.d-galeria-lista{display:grid;gap:.5rem;padding:0 .9rem 1rem}
.d-galeria-lista .doble{aspect-ratio:3/2;height:auto;border-radius:8px}
.d-cerrar{position:sticky;top:0;left:0;display:block;margin-left:auto;padding:.8rem 1rem;background:#fff;font-weight:600;text-decoration:underline;z-index:2}

/* ---------- Página de venta ---------- */
.demo--venta{--tinta:#20241f;--papel:#f6f3ec;--acento:#a4502a;background:var(--papel);color:var(--tinta);padding-bottom:5.5rem}
html.embebido .demo--venta{padding-bottom:0}
.demo--venta h1,.demo--venta h2,.v-marca,.v-precio,.v-intro p{font-family:'Fraunces',Georgia,serif;font-weight:400}
.v-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,4vw,3rem);background:rgba(246,243,236,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(32,36,31,.12)}
.v-marca{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-top nav{display:flex;gap:1.6rem;font-size:.9rem}
.v-boton{flex:none;padding:.5rem 1rem;border-radius:999px;background:var(--tinta);color:var(--papel);font-size:.86rem;font-weight:500}
.v-hero{position:relative;height:calc(100vh - 110px);min-height:480px;max-height:820px;overflow:hidden;background:#000}
.v-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0,transparent 55%)}
.v-hero-txt{position:absolute;left:clamp(1rem,4vw,3rem);right:clamp(1rem,4vw,3rem);bottom:clamp(1.4rem,4vw,2.8rem);z-index:2;color:#fff}
.v-hero-txt p:first-child{font-size:.9rem;letter-spacing:.04em}
.v-hero h1{font-size:clamp(2.6rem,7vw,5.6rem);line-height:1.02;letter-spacing:-.02em}
.v-precio{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-top:.3rem}
.v-datos{display:grid;grid-template-columns:repeat(5,1fr);padding:0 clamp(1rem,4vw,3rem);border-bottom:1px solid rgba(32,36,31,.14)}
.v-datos li{padding:1.1rem .4rem;font-size:.92rem;color:#565b53}
.v-datos b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:1.6rem;color:var(--tinta);line-height:1.15}
.v-intro{max-width:820px;margin:0 auto;padding:clamp(3rem,7vw,5.4rem) clamp(1rem,4vw,2rem)}
.v-intro p{font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.22;letter-spacing:-.01em}
.v-espacio{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:clamp(1.4rem,4vw,3.4rem);padding:0 clamp(1rem,4vw,3rem) clamp(2.4rem,5vw,4rem)}
.v-espacio--inv{grid-template-columns:1fr 1.5fr}
.v-espacio--inv .v-espacio-foto{order:2}
.v-espacio-foto .doble{aspect-ratio:3/2;height:auto}
.v-espacio-txt span{font-size:.8rem;letter-spacing:.14em;color:var(--acento)}
.v-espacio-txt h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.08;margin:.2rem 0 .5rem}
.v-espacio-txt p{color:#565b53;max-width:34ch}
.v-franja-foto{position:relative;height:clamp(420px,76vh,720px);overflow:hidden;color:#fff;background:#000}
.v-franja-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6) 0,transparent 50%)}
.v-franja-foto>div{position:absolute;left:clamp(1rem,4vw,3rem);bottom:clamp(1.2rem,4vw,2.6rem);z-index:2}
.v-franja-foto h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05}
.v-mosaico{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.v-mosaico .doble{aspect-ratio:3/2;height:auto}
.v-mosaico .doble:first-child{grid-row:span 2;height:100%;aspect-ratio:auto}
.v-amen{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;padding:clamp(3rem,6vw,4.6rem) clamp(1rem,4vw,3rem)}
.v-amen h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.08}
.v-amen ul{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
.v-amen li{padding:.65rem 0;border-top:1px solid rgba(32,36,31,.16)}
.v-visita{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:clamp(2.4rem,5vw,4rem) clamp(1rem,4vw,3rem);background:var(--tinta);color:var(--papel)}
.v-visita h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.08;margin-bottom:.4rem}
.v-agente{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem;font-size:.9rem}
.v-agente span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--papel);color:var(--tinta);font-weight:600}
.v-form{display:grid;gap:.7rem}
.v-form label{display:grid;gap:.2rem;font-size:.85rem}
.v-form input{min-height:42px;padding:.4rem .7rem;border-radius:8px;border:1px solid rgba(246,243,236,.3);background:rgba(246,243,236,.08);color:var(--papel);font:inherit}
.v-form button{min-height:46px;border-radius:8px;background:var(--papel);color:var(--tinta);font-weight:600}
.v-pie{padding:1.1rem clamp(1rem,4vw,3rem);font-size:.82rem;color:#565b53}

/* ---------- Celular ---------- */
@media (max-width:760px){
  .d-franja{font-size:.72rem;padding:.4rem .9rem}
  .d-franja span b{display:block}
  .d-cta{bottom:4.6rem;gap:.5rem;padding:.55rem .4rem .55rem .85rem;font-size:.82rem;line-height:1.25}
  .d-cta p span{display:none}
  .d-cta-btn{padding:.55rem .75rem;font-size:.78rem;white-space:normal;max-width:9.4rem;text-align:center}
  .demo--venta .d-cta{bottom:.8rem}
  .r-top{padding:.6rem .9rem}
  .r-busca{flex:1;min-width:0;font-size:.8rem}
  .r-busca span{padding:0 .6rem;white-space:nowrap}
  .r-busca span:nth-child(n+2){display:none}
  .r-busca i{margin-left:auto}
  .r-logo{font-size:1.05rem}
  .r-cuenta{display:none}
  .r-main{padding:0 0 2rem}
  .r-cab{padding:.9rem .9rem .7rem;order:2}
  .r-cab h1{font-size:1.4rem}
  .r-acciones{display:none}
  .r-main{display:flex;flex-direction:column}
  .r-marco{order:1}
  .r-fotos{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;gap:0;border-radius:0;grid-template-rows:none;-webkit-overflow-scrolling:touch}
  .r-foto{flex:0 0 100%;aspect-ratio:3/2;scroll-snap-align:center}
  .r-todas{display:none}
  .r-contador{display:block;position:absolute;right:.7rem;bottom:.7rem;padding:.15rem .6rem;border-radius:7px;background:rgba(0,0,0,.66);color:#fff;font-size:.76rem;z-index:2}
  .r-cuerpo{order:3;display:block;margin-top:.2rem;padding:0 .9rem}
  .r-reserva{display:none}
  .r-amen{grid-template-columns:1fr}
  .r-areas{grid-template-columns:repeat(3,70vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-.9rem}
  .r-movil-reserva{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .9rem;background:#fff;border-top:1px solid #e0ded9}
  .r-movil-reserva .r-btn{width:auto;padding:.65rem 1.5rem}
  .r-movil-reserva b{font-size:1.15rem;font-weight:600}
  .v-top nav{display:none}
  .v-hero{height:70vh;min-height:420px}
  .v-hero-foto img{object-position:68% 50%}
  .v-datos{grid-template-columns:repeat(2,1fr)}
  .v-espacio,.v-espacio--inv{grid-template-columns:1fr;padding-left:0;padding-right:0}
  .v-espacio--inv .v-espacio-foto{order:0}
  .v-espacio-txt{padding:0 1rem}
  .v-mosaico{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .v-mosaico .doble:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:3/2;height:auto}
  .v-amen,.v-visita{grid-template-columns:1fr}
  .v-amen ul{grid-template-columns:1fr}
}