/* =========================================================================
   Palacio Rural Universitas — hoja de estilo del prototipo

   Direccion: entre clasico y moderno. Fondo claro en casi toda la pagina y el
   azul noche del logo reservado para barra, pie y contacto. La piedra de la
   fachada deja de mandar: lo que se ensena es el interior.

   El logo viene en oro sobre su propio fondo azul, asi que solo puede ir sobre
   azul noche (barra y pie) y no se le aplica ningun filtro de color.
   ========================================================================= */

/* ---------- TIPOGRAFIA AUTOHOSPEDADA ---------- */
/* Cormorant Garamond: solo para titulos. Sus remates son muy finos y se
   rompen por debajo de 1.3rem, asi que el texto corrido va en Inter. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fuentes/cormorant-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fuentes/cormorant-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fuentes/cormorant-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fuentes/cormorant-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fuentes/inter-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fuentes/inter-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fuentes/inter-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- FICHAS DE DISENO ---------- */
:root{
  --papel:#fbf9f5;        /* marfil calido: el fondo de casi toda la pagina */
  --crema:#f3eee4;        /* la banda alterna, un tono mas caliente */
  --tinta:#1c1f26;
  --piedra:#6b7079;       /* texto secundario */
  --linea:#e6e0d4;

  --noche:#191e31;        /* el azul del logo: barra, pie y contacto */
  --oro:#d4b268;          /* el oro de la linea del logo, sobre fondo oscuro */
  --oro-luz:#e6cf9a;
  --acento:#8d7230;       /* el mismo oro oscurecido, legible sobre claro */

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --texto:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  --barra-alto:80px;
  --margen:clamp(1.15rem,4vw,5.5rem);
  --hueco:clamp(4rem,7.5vw,9rem);
  --curva:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--barra-alto)}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);
  font-size:clamp(1rem,.96rem+.2vw,1.0625rem);line-height:1.7;-webkit-font-smoothing:antialiased}
/* height:auto es obligatorio: las imagenes llevan width/height en el HTML (para
   reservar sitio y no dar saltos), y con las dos medidas fijadas el navegador
   ignora el aspect-ratio del CSS y usa la altura del atributo. */
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.008em}
h4{margin:0;font-family:var(--texto);font-weight:600;line-height:1.35}

/* ---------- PIEZAS COMPARTIDAS ---------- */
.seccion{padding:var(--hueco) var(--margen)}
.seccion--crema{background:var(--crema)}

.etiqueta{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--acento);
  font-weight:600;margin:0 0 1.2rem;display:flex;align-items:center;gap:.9rem}
.etiqueta::after{content:"";flex:1;max-width:4.5rem;height:1px;background:currentColor;opacity:.45}

.cab{margin-bottom:clamp(2.5rem,5vw,4.5rem);max-width:60ch}
.cab h2{font-size:clamp(2.2rem,1.3rem+3.3vw,4.2rem)}
.cab p{margin:1.2rem 0 0;color:var(--piedra);max-width:58ch}

/* Filete con rombo: la firma grafica que se repite en toda la pagina. */
.filete{display:flex;align-items:center;gap:.7rem;margin:0}
.filete::before,.filete::after{content:"";height:1px;background:var(--acento);opacity:.4;flex:1}
.filete i{width:5px;height:5px;background:var(--acento);transform:rotate(45deg);flex:none}

.boton{display:inline-flex;align-items:center;gap:.6rem;background:var(--noche);color:#fff;
  text-decoration:none;font-weight:500;font-size:.88rem;letter-spacing:.03em;padding:1rem 1.9rem;
  border:1px solid var(--noche);transition:background .25s,color .25s,transform .25s var(--curva)}
.boton:hover{background:#252c47;transform:translateY(-2px)}
.boton--linea{background:none;color:var(--tinta);border-color:var(--linea)}
.boton--linea:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.boton--oro{background:var(--oro);color:var(--noche);border-color:var(--oro)}
.boton--oro:hover{background:var(--oro-luz);border-color:var(--oro-luz)}

/* Enlace de texto con filete debajo. */
.enlace{display:inline-block;text-decoration:none;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acento);padding-bottom:.35rem;
  border-bottom:1px solid currentColor;transition:opacity .25s}
.enlace:hover{opacity:.6}

/* Aparicion al entrar en pantalla. Se anula con prefers-reduced-motion.
   Solo se esconde si hay JS (html.js): sin JS el contenido tiene que verse. */
.js [data-revelar]{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--curva),transform .8s var(--curva)}
.js [data-revelar].visible{opacity:1;transform:none}

/* ---------- BARRA ---------- */
.barra{position:sticky;top:0;z-index:50;background:var(--noche);color:#fff;
  min-height:var(--barra-alto);display:flex;align-items:center;gap:1.5rem;
  padding:.5rem var(--margen);transition:min-height .3s var(--curva),background .3s}
.barra.encogida{min-height:64px;background:rgba(25,30,49,.96);backdrop-filter:blur(10px)}
.marca{display:flex;align-items:center;gap:.9rem;text-decoration:none;margin-right:auto}
.marca img{height:52px;width:auto;transition:height .3s var(--curva)}
.barra.encogida .marca img{height:40px}
.marca-txt{font-family:var(--display);font-size:1.3rem;line-height:1.1}
.marca-txt small{display:block;font-family:var(--texto);font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;opacity:.65;margin-top:.3rem;font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,2rem);list-style:none;margin:0;padding:0;font-size:.85rem}
.nav a{text-decoration:none;opacity:.85;padding:.4rem 0;border-bottom:1px solid transparent;
  transition:opacity .2s,border-color .2s;white-space:nowrap}
.nav a:hover{opacity:1;border-color:var(--oro)}
.tel{display:inline-flex;align-items:center;gap:.5rem;background:none;color:var(--oro);
  text-decoration:none;font-weight:500;font-size:.9rem;padding:.6rem 1.15rem;
  border:1px solid rgba(212,178,104,.55);white-space:nowrap;transition:background .25s,color .25s}
.tel:hover{background:var(--oro);color:var(--noche)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:.5rem .75rem;font-size:1.05rem;cursor:pointer}
@media(max-width:1080px){
  .nav{display:none}
  .menu-btn{display:block}
  .barra.abierto .nav{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--noche);
    flex-direction:column;align-items:stretch;gap:0;padding:.3rem var(--margen) 1.2rem}
  .barra.abierto .nav a{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
}
@media(max-width:620px){
  .marca img{height:42px}
  .marca-txt{font-size:1.05rem}
  .marca-txt small{display:none}
  .tel span{display:none}
  .tel{padding:.6rem .8rem}
}

/* ---------- PORTADA PARTIDA ----------
   Texto sobre marfil a un lado, foto de interior al otro. La fachada de piedra
   ya no abre la pagina: abre una sala con luz calida. */
.portada{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  min-height:calc(100svh - var(--barra-alto));background:var(--papel)}
.portada-txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,6rem) clamp(1.15rem,4.5vw,5.5rem)}
.portada-txt .sitio{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acento);font-weight:600;margin:0 0 1.6rem}
.portada-txt h1{font-size:clamp(2.6rem,1.4rem+4.4vw,5.4rem);max-width:13ch;text-wrap:balance}
.portada-txt .bajada{margin:1.6rem 0 2.4rem;max-width:44ch;color:var(--piedra);
  font-size:clamp(1rem,.95rem+.35vw,1.15rem)}
.portada-acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.portada-pie{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--linea);padding-top:1.5rem}
/* lining-nums: Cormorant compone cifras elzevirianas por defecto y un "11"
   acaba leyendose como dos palotes. Los numeros grandes van de caja alta. */
.portada-pie div b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;
  color:var(--tinta);font-weight:400;font-variant-numeric:lining-nums}
.portada-pie div span{display:block;margin-top:.45rem;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--piedra)}

.portada-foto{position:relative;overflow:hidden;background:var(--crema)}
.carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  height:100%;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel figure{margin:0;flex:0 0 100%;scroll-snap-align:center;overflow:hidden}
.carrusel img{width:100%;height:100%;object-fit:cover}
/* Ken Burns: solo en la lamina visible, y muy lento. */
.carrusel figure.activa img{animation:acercar 12s var(--curva) forwards}
@keyframes acercar{from{transform:scale(1.06)}to{transform:scale(1)}}

.pie-foto{position:absolute;left:0;bottom:0;background:var(--noche);color:#fff;
  padding:.85rem 1.3rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;z-index:2}
.indice{position:absolute;right:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);z-index:3;
  display:flex;align-items:center;gap:1rem}
.indice-barras{display:flex;gap:.4rem}
.indice button{width:26px;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .3s,transform .3s}
.indice button[aria-current="true"]{background:var(--oro);transform:scaleY(2.5)}
.indice-num{font-size:.7rem;letter-spacing:.2em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.indice-num b{color:var(--oro);font-weight:600}

@media(max-width:900px){
  .portada{grid-template-columns:1fr;min-height:0}
  .portada-foto{order:-1;height:clamp(300px,52vh,460px)}
  .portada-txt{padding-block:clamp(2.5rem,7vw,4rem)}
}
/* En estrecho el rotulo y el indice se pisan: manda el indice. */
@media(max-width:620px){.pie-foto{display:none}}

/* ---------- UNIVERSITAS (el porque del nombre) ---------- */
.universitas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center}
.universitas figure{margin:0;overflow:hidden;position:relative}
.universitas figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.universitas figure figcaption{position:absolute;left:0;bottom:0;background:var(--noche);
  color:var(--oro);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.1rem}
.cita{font-family:var(--display);font-size:clamp(1.6rem,1rem+2.1vw,2.7rem);line-height:1.3;
  font-style:italic;margin:0 0 1.6rem;text-wrap:balance}
.cita-pie{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acento);
  font-weight:600;margin:0 0 2.2rem}
@media(max-width:900px){.universitas{grid-template-columns:1fr}}

/* ---------- HABITACION DESTACADA ---------- */
.destacada{position:relative;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.destacada figure{margin:0;overflow:hidden}
.destacada figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.destacada .panel{background:var(--noche);color:#fff;padding:clamp(1.8rem,3.5vw,3.2rem)}
@media(min-width:900px){
  .destacada figure img{aspect-ratio:21/9}
  .destacada .panel{position:absolute;right:clamp(2rem,4vw,5rem);bottom:0;
    transform:translateY(20%);width:min(30rem,42%);box-shadow:0 30px 70px rgba(28,31,38,.22)}
  .destacada{margin-bottom:clamp(6rem,10vw,10rem)}
}
.destacada h3{font-size:clamp(1.9rem,1.3rem+1.6vw,2.7rem);margin-bottom:.9rem}
.destacada .panel p{color:#c3c9d4}
.destacada .panel .etiqueta{color:var(--oro)}
.destacada .panel .etiqueta::after{opacity:.5}

/* ---------- REJILLA DE HABITACIONES ---------- */
/* align-items:start para que cada tarjeta mida lo suyo: si no, la tarjeta alta
   estira toda la fila y las vecinas quedan con un palmo de aire debajo. */
.habitaciones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.6rem);
  align-items:start}
@media(max-width:940px){.habitaciones{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.habitaciones{grid-template-columns:1fr}}
.hab{display:flex;flex-direction:column;text-decoration:none}
.hab figure{margin:0 0 1.2rem;overflow:hidden;background:var(--linea)}
.hab figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--curva)}
.hab:hover figure img{transform:scale(1.045)}
/* Una tarjeta alta por fila rompe la monotonia del catalogo. */
.hab--alta figure img{aspect-ratio:3/4}
.hab h3{font-size:clamp(1.35rem,1.05rem+.9vw,1.8rem);margin-bottom:.5rem}
.hab .resumen{color:var(--piedra);font-size:.95rem;margin:0 0 1rem}
.hab .detalle{display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);font-weight:600}
.hab .detalle::after{content:"";width:1.6rem;height:1px;background:currentColor;
  transition:width .3s var(--curva)}
.hab:hover .detalle::after{width:2.6rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.4rem;padding:0}
.etiquetas li{font-size:.74rem;color:#c3c9d4;border:1px solid rgba(255,255,255,.2);padding:.26rem .7rem}

/* ---------- ZONAS COMUNES ----------
   Bento: la boveda manda por tamano y las demas la acompanan. */
.comunes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.4rem)}
.comun{position:relative;overflow:hidden;text-decoration:none;color:#fff;display:block;background:var(--noche)}
.comun img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.comun:hover img{transform:scale(1.05)}
.comun figcaption{position:absolute;inset:auto 0 0;padding:clamp(1.2rem,2.2vw,2rem);
  background:linear-gradient(transparent,rgba(16,19,31,.9))}
.comun h3{font-size:clamp(1.3rem,1.05rem+.9vw,2rem);margin-bottom:.3rem}
.comun p{margin:0;font-size:.9rem;color:rgba(255,255,255,.82);max-width:42ch}
.comun--grande{grid-column:span 2;grid-row:span 2}
.comun--grande img{aspect-ratio:1}
.comun--ancha{grid-column:span 2}
.comun--ancha img{aspect-ratio:2/1}
@media(max-width:900px){
  .comunes{grid-template-columns:repeat(2,1fr)}
  .comun--grande{grid-column:span 2;grid-row:auto}
  .comun--grande img{aspect-ratio:3/2}
}
@media(max-width:560px){
  .comunes{grid-template-columns:1fr}
  .comun--grande,.comun--ancha{grid-column:span 1}
  .comun img,.comun--grande img,.comun--ancha img{aspect-ratio:3/2}
}

/* ---------- SERVICIOS ---------- */
.rejilla-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.8vw,3rem)}
@media(max-width:940px){.rejilla-serv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rejilla-serv{grid-template-columns:1fr}}
.serv{border-top:1px solid var(--acento);padding:1.5rem 0 0}
.serv-icono{width:30px;height:30px;color:var(--acento);margin-bottom:1.1rem}
.serv h4{font-size:1.05rem;margin-bottom:.5rem}
.serv p{margin:0;color:var(--piedra);font-size:.93rem}

/* ---------- GALERIA ---------- */
.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.1vw,1.1rem)}
.galeria figure{margin:0;overflow:hidden;background:var(--linea)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.galeria figure:hover img{transform:scale(1.05)}
.g-7{grid-column:span 7}.g-5{grid-column:span 5}.g-4{grid-column:span 4}
.g-6{grid-column:span 6}.g-8{grid-column:span 8}
.g-alto img{aspect-ratio:3/4}.g-ancho img{aspect-ratio:16/9}.g-cuad img{aspect-ratio:1}
@media(max-width:900px){.g-7,.g-5,.g-4,.g-6,.g-8{grid-column:span 6}}
@media(max-width:520px){.g-7,.g-5,.g-4,.g-6,.g-8{grid-column:span 12}}

/* ---------- ENTORNO ---------- */
.lugares{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1.4rem,2.6vw,2.6rem)}
.lugar figure{margin:0 0 1.1rem;overflow:hidden}
.lugar img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--curva)}
.lugar:hover img{transform:scale(1.045)}
.lugar .dist{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento);
  font-weight:600;margin:0 0 .45rem}
.lugar h3{font-size:1.35rem;margin:0 0 .5rem}
.lugar p{color:var(--piedra);font-size:.93rem;margin:0}
.creditos{margin:clamp(2.5rem,5vw,4rem) 0 0;font-size:.79rem;line-height:1.7;
  color:var(--piedra);max-width:82ch;border-top:1px solid var(--linea);padding-top:1.4rem}

/* ---------- CONTACTO ---------- */
.contacto{display:grid;grid-template-columns:1.1fr 1fr}
@media(max-width:900px){.contacto{grid-template-columns:1fr}}
.contacto .foto{margin:0}
.contacto .foto img{width:100%;height:100%;min-height:330px;object-fit:cover}
.contacto .datos{background:var(--noche);color:#fff;padding:clamp(2.2rem,5.5vw,5rem)}
.contacto .datos .etiqueta{color:var(--oro)}
.contacto .datos h2{font-size:clamp(1.9rem,1.3rem+1.9vw,2.9rem);margin-bottom:1.6rem}
.datos-lista{list-style:none;margin:0 0 2.2rem;padding:0;line-height:1.8}
.datos-lista li+li{margin-top:1.3rem}
.datos-lista strong{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);font-weight:600;margin-bottom:.35rem}
.datos-lista a{color:#fff}

/* ---------- PIE ---------- */
/* Fondo --noche y no otro tono: el logo lleva su propio fondo azul (#191d30) y
   sobre cualquier otro color se le ve el recorte. */
.pie{background:var(--noche);color:#b9bfca;padding:var(--hueco) var(--margen) 2.4rem;font-size:.92rem}
.pie-rejilla{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(2rem,4vw,4rem)}
@media(max-width:800px){.pie-rejilla{grid-template-columns:1fr;gap:2.2rem}}
/* width:auto es imprescindible: al fijar solo la altura, el ancho se queda en
   el del atributo width del HTML y el logo sale estirado a lo ancho. */
.pie img.logo{height:88px;width:auto;margin-bottom:1.3rem}
.pie h3{color:#fff;font-family:var(--texto);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;margin-bottom:1.1rem}
.pie ul{list-style:none;margin:0;padding:0;line-height:2.1}
.pie a{color:#b9bfca;text-decoration:none;transition:color .2s}
.pie a:hover{color:var(--oro)}
.legal{margin-top:3.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.76rem;opacity:.6}

/* ---------- FICHA DE HABITACION ---------- */
.volver{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acento);text-decoration:none;font-weight:600;margin-bottom:1.6rem}
.volver:hover{opacity:.7}
.ficha-cab{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.ficha-cab h1{font-size:clamp(2.4rem,1.5rem+3.4vw,4.4rem)}
.ficha-cab .sub{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1rem+.7vw,1.6rem);
  color:var(--acento);margin:.6rem 0 0}
.ficha-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.1vw,1rem);
  margin-bottom:clamp(2.5rem,5vw,4rem)}
.ficha-fotos figure{margin:0;overflow:hidden;background:var(--linea)}
.ficha-fotos img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.ficha-fotos figure:hover img{transform:scale(1.04)}
.ficha-fotos .principal{grid-column:span 4}
.ficha-fotos .principal img{aspect-ratio:21/9}
.ficha-fotos .menor img{aspect-ratio:3/4}
@media(max-width:700px){
  .ficha-fotos{grid-template-columns:repeat(2,1fr)}
  .ficha-fotos .principal{grid-column:span 2}
  .ficha-fotos .principal img{aspect-ratio:3/2}
}
.ficha-cuerpo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.ficha-cuerpo{grid-template-columns:1fr}}
.ficha-texto p{font-size:clamp(1.02rem,.98rem+.25vw,1.12rem);max-width:60ch}
.ficha-texto .entradilla{font-family:var(--display);font-size:clamp(1.4rem,1.1rem+1.1vw,2rem);
  line-height:1.38;margin-bottom:1.6rem}
.ficha-lado{background:var(--crema);padding:clamp(1.6rem,3vw,2.4rem);
  position:sticky;top:calc(var(--barra-alto) + 1.5rem)}
@media(max-width:900px){.ficha-lado{position:static}}
.ficha-lado h2{font-size:1.6rem;margin-bottom:1.2rem}
.tabla-datos{list-style:none;margin:0 0 1.8rem;padding:0;font-size:.93rem}
.tabla-datos li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--linea)}
.tabla-datos li:last-child{border-bottom:0}
.tabla-datos span{color:var(--piedra)}
.tabla-datos b{font-weight:600;text-align:right}
.aviso-dato{font-size:.78rem;color:var(--piedra);margin:1.2rem 0 0;line-height:1.6}

/* ---------- MOVIMIENTO REDUCIDO ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js [data-revelar]{opacity:1;transform:none}
  .carrusel{scroll-behavior:auto}
  .carrusel figure.activa img{animation:none}
}

/* ---------- CONTACTO SIEMPRE A MANO ----------
   El cliente insiste en dos cosas: que se alquila la casa entera, y que el
   telefono y el correo se encuentren sin buscarlos. De ahi la barra superior
   con los dos, dos cintas repartidas por la pagina y, en movil, una barra fija
   abajo. */
.contacto-barra{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.correo{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;
  font-size:.86rem;opacity:.9;white-space:nowrap}
.correo:hover{opacity:1;color:var(--oro-luz)}
@media(max-width:1180px){.correo span{display:none}}
@media(max-width:700px){.contacto-barra{gap:.7rem}}

.cinta{background:var(--noche);color:#fff;padding:clamp(1.6rem,3.4vw,2.6rem) var(--margen);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2.4vw,2.2rem)}
.cinta p{margin:0;max-width:52ch;font-size:clamp(.98rem,.9rem+.3vw,1.12rem);opacity:.92}
.cinta strong{color:var(--oro-luz)}
.cinta-acciones{display:flex;flex-wrap:wrap;gap:.7rem}
.boton--linea-claro{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.boton--linea-claro:hover{border-color:var(--oro);color:var(--oro-luz)}

.contacto-acciones{display:flex;flex-wrap:wrap;gap:.7rem}
.pie-tel{font-weight:600;letter-spacing:.02em}

/* Barra fija de movil. En escritorio no aparece: alli ya estan la barra de
   arriba y las dos cintas. */
.contacto-fijo{display:none}
@media(max-width:700px){
  .contacto-fijo{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0;z-index:60;
    background:var(--noche);border-top:1px solid rgba(255,255,255,.14)}
  .contacto-fijo a{padding:.95rem .6rem;text-align:center;color:#fff;text-decoration:none;
    font-size:.92rem;font-weight:600;letter-spacing:.02em}
  .contacto-fijo a:first-child{background:var(--oro);color:var(--noche)}
  /* que la barra fija no tape el final del pie */
  body{padding-bottom:3.4rem}
}

/* ---------- VIDEO ----------
   El bucle de portada ocupa el hueco donde antes iba el carrusel. Pesa 4 MB y
   no lleva sonido. En movil y con movimiento reducido no se reproduce: se
   queda el cartel, que es un fotograma del propio video. */
.video-portada{position:relative;overflow:hidden;background:var(--noche)}
.video-portada video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:900px){.video-portada video{aspect-ratio:4/3}}

/* El video completo no se descarga hasta que alguien lo pide. */
.video-completo{max-width:1100px;margin:0 auto}
.video-lanzar{display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--noche);overflow:hidden}
.video-lanzar img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1s var(--curva),opacity .4s}
.video-lanzar:hover img{transform:scale(1.03);opacity:.9}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;
  display:grid;place-items:center;background:rgba(25,30,49,.78);color:var(--oro-luz);
  font-size:clamp(1.3rem,2vw,1.7rem);padding-left:.18em;
  border:1px solid rgba(255,255,255,.35);transition:background .3s,transform .3s var(--curva)}
.video-lanzar:hover .video-play{background:var(--noche);transform:translate(-50%,-50%) scale(1.07)}
.video-txt{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;font-size:.86rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(10,12,20,.72),transparent)}
.video-completo video{width:100%;height:auto;aspect-ratio:16/9;background:#000;display:block}
.video-completo iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.portada-aerea{margin:0;overflow:hidden;background:var(--linea)}
.portada-aerea img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:900px){.portada-aerea img{aspect-ratio:4/3}}

/* Red de seguridad: sobre fondo oscuro, el boton de linea nunca en tinta. */
.contacto .datos .boton--linea,.cinta .boton--linea{color:#fff;border-color:rgba(255,255,255,.45)}
.contacto .datos .boton--linea:hover,.cinta .boton--linea:hover{background:#fff;color:var(--noche)}

/* ---------- PORTADA A TODA PANTALLA (variante B) ----------
   La portada partida reduce la foto a media columna y la recorta a 16/9: a ese
   tamano una vista aerea no impacta, porque todo sale pequeno. Esta variante
   da a la foto el ancho entero y pone el titulo encima. */
.portada-plena{position:relative;min-height:min(86vh,760px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--noche)}
.portada-plena-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portada-plena::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,13,24,.86) 0%,rgba(10,13,24,.55) 38%,rgba(10,13,24,.12) 70%,rgba(10,13,24,.3) 100%)}
.portada-plena-caja{position:relative;z-index:2;color:#fff;padding:clamp(2rem,5vw,4.4rem) var(--margen) 0;
  max-width:46rem}
.portada-plena-caja .sitio{color:var(--oro-luz)}
.portada-plena-caja h1{font-size:clamp(2.3rem,1.4rem+3.6vw,4.6rem);line-height:1.04;margin:.5rem 0 1rem;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.portada-plena-caja .bajada{color:rgba(255,255,255,.92);font-size:clamp(1rem,.94rem+.35vw,1.2rem);
  max-width:40ch;margin-bottom:1.8rem}
.portada-plena .portada-acciones{display:flex;flex-wrap:wrap;gap:.7rem}
.portada-plena-cifras{position:relative;z-index:2;display:flex;flex-wrap:wrap;
  gap:clamp(1.4rem,4vw,3.4rem);padding:clamp(1.8rem,3.4vw,2.8rem) var(--margen);
  border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(2rem,5vw,3.6rem);color:#fff}
.portada-plena-cifras b{display:block;font-family:var(--display);font-size:clamp(1.5rem,1.1rem+1.4vw,2.3rem);
  color:var(--oro-luz);font-variant-numeric:lining-nums}
.portada-plena-cifras span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
@media(max-width:700px){.portada-plena{min-height:78vh}}

/* ---------- CABECERA (portada) ----------
   Pensada para telefono primero: la foto ocupa la pantalla, el texto va encima
   y la ficha de datos cae debajo a lo ancho. En escritorio la ficha flota sobre
   el borde inferior de la foto, como en la referencia aprobada por el cliente.
   La portada partida anterior dejaba media pantalla vacia y en movil no servia. */
.cabecera{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:84svh;overflow:hidden;background:var(--noche);
  padding-bottom:clamp(1.2rem,3vw,2.4rem)}
@supports not (min-height:84svh){.cabecera{min-height:84vh}}
.cabecera-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.cabecera::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,10,18,.92) 0%,rgba(8,10,18,.70) 26%,
    rgba(8,10,18,.22) 58%,rgba(8,10,18,.42) 100%)}
.cabecera-texto{color:#fff;padding:0 var(--margen)}
.cabecera-texto h1{font-size:clamp(2.1rem,1.2rem+4.6vw,4.2rem);line-height:1.06;
  margin:.9rem 0 .8rem;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.cabecera-texto .bajada{color:rgba(255,255,255,.93);max-width:42ch;margin:0;
  font-size:clamp(.98rem,.92rem+.3vw,1.14rem)}

/* Chips. En movil solo se ven los dos primeros: lo demas estorba en 390 px. */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.chip{font-size:.74rem;letter-spacing:.02em;padding:.42rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px)}
.chip--oro{background:var(--oro);color:var(--noche);border-color:var(--oro);font-weight:600}
@media(max-width:620px){.chip--extra{display:none}}

/* Ficha de datos: debajo en movil, flotando en escritorio. */
.ficha{position:relative;margin:clamp(1.4rem,3vw,2.2rem) var(--margen) 0;background:var(--noche);
  color:#fff;border-radius:16px;padding:clamp(1.1rem,2.4vw,1.6rem);
  display:flex;flex-direction:column;gap:1rem;box-shadow:0 18px 40px rgba(8,10,18,.34)}
.ficha-datos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem}
.ficha-datos>div{min-width:0}
.ficha-datos span{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--oro-luz);margin-bottom:.2rem}
.ficha-datos b{font-family:var(--display);font-size:clamp(1.05rem,.95rem+.5vw,1.35rem);
  font-weight:600;line-height:1.2;font-variant-numeric:lining-nums}
.ficha-datos a{color:#fff;text-decoration:none}
.ficha-acciones{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.ficha-acciones .boton{justify-content:center;padding:.9rem 1rem;font-size:.85rem}

@media(min-width:760px){
  .ficha{flex-direction:row;align-items:center;justify-content:space-between;
    margin:clamp(2rem,4vw,3rem) auto -2.6rem;max-width:min(1080px,calc(100% - 2*var(--margen)));
    gap:clamp(1.2rem,3vw,2.6rem);padding:1.5rem 1.8rem}
  .ficha-datos{grid-template-columns:repeat(3,auto);gap:0}
  .ficha-datos>div{padding:0 clamp(1rem,2.4vw,2rem);border-left:1px solid rgba(255,255,255,.16)}
  .ficha-datos>div:first-child{border-left:0;padding-left:0}
  .ficha-acciones{grid-template-columns:auto auto}
}
/* El telefono, a lo ancho en movil: es el dato que mas se pulsa. */
.ficha-tel{grid-column:1 / -1}
@media(min-width:760px){.ficha-tel{grid-column:auto}}

/* ---------- NOMBRES DE LAS ESTANCIAS ----------
   Antes el nombre iba en el mismo cuerpo que el resto y no se leia como lo que
   es: lo que hay que recordar de cada habitacion. Ahora el tipo va arriba en
   oro pequeno y el nombre en display grande, con un filete corto debajo. */
.hab .hab-tipo{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento);
  font-weight:600;margin:0 0 .15rem}
.hab .hab-nombre{font-family:var(--display);font-size:clamp(1.7rem,1.25rem+1.5vw,2.4rem);
  line-height:1.08;margin:0 0 .55rem;position:relative;padding-bottom:.6rem}
.hab .hab-nombre::after{content:"";position:absolute;left:0;bottom:0;width:2.2rem;height:2px;
  background:var(--oro);transition:width .4s var(--curva)}
.hab:hover .hab .hab-nombre::after{width:4rem}
.hab .hab-alias{display:block;font-family:var(--texto);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--piedra);margin-top:.35rem;font-style:normal}

/* ---------- BANNER DE PORTADA: varias laminas ----------
   Fundido lento entre las mejores fotos. Solo la primera se descarga de
   entrada; el resto van en lazy y entran cuando les toca. */
.cabecera-fotos{position:absolute;inset:0;z-index:-2}
.cabecera-fotos .cabecera-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out}
.cabecera-fotos .cabecera-foto.activa{opacity:1}
.banner-indice{position:absolute;top:clamp(.8rem,2vw,1.4rem);right:var(--margen);z-index:2;
  display:flex;align-items:center;gap:.7rem;padding:.45rem .8rem;border-radius:999px;
  background:rgba(10,13,24,.46);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.banner-barras{display:flex;gap:.3rem}
.banner-barras button{width:1.1rem;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .3s,width .3s var(--curva)}
.banner-barras button.activa{background:var(--oro);width:1.8rem}
.banner-num{margin:0;font-size:.68rem;letter-spacing:.12em;color:rgba(255,255,255,.72);
  font-variant-numeric:lining-nums}
.banner-num b{color:var(--oro-luz);font-weight:600}
@media(max-width:520px){.banner-num{display:none}}

/* ---------- COSTURA ENTRE EL BANNER Y LO QUE VIENE DEBAJO ----------
   Antes la foto terminaba en una linea recta y la seccion siguiente empezaba
   de cero: un corte plano. Ahora la cabecera cierra con las esquinas
   redondeadas y la ficha de datos cuelga por debajo del borde, de modo que
   toca las dos zonas y cose una con otra. La seccion de abajo deja sitio para
   esa parte que invade. */
.cabecera{border-radius:0 0 clamp(16px,2.6vw,30px) clamp(16px,2.6vw,30px);padding-bottom:0}

/* Velo extra en la base: la foto se apaga hacia el color del papel en vez de
   cortarse de golpe. */
.cabecera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,10vw,120px);
  z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,10,18,0),rgba(8,10,18,.55))}

/* La ficha baja y queda a caballo entre las dos. */
.ficha{margin:clamp(1.4rem,3vw,2.2rem) var(--margen) clamp(-4.4rem,-7vw,-2.6rem);
  border:1px solid rgba(255,255,255,.08)}
.cabecera + .seccion{padding-top:calc(var(--hueco) + clamp(3rem,6vw,5rem))}

@media(min-width:760px){
  .ficha{margin:clamp(2rem,4vw,3rem) auto clamp(-5rem,-7vw,-3.2rem)}
}
/* El recorte redondeado va en las fotos y en los velos, no en la cabecera:
   si lo lleva la cabecera, corta la ficha que cuelga por debajo. */
.cabecera{overflow:visible}
.cabecera-fotos,.cabecera::before,.cabecera::after{
  border-radius:0 0 clamp(16px,2.6vw,30px) clamp(16px,2.6vw,30px);overflow:hidden}

/* El nombre del espacio y su pie cambian con la lamina; el titular no. */
.chip--lamina{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);font-weight:600}
.pie-lamina{margin:.9rem 0 0;color:rgba(255,255,255,.82);font-size:.88rem;max-width:46ch;
  border-left:2px solid var(--oro);padding-left:.8rem;transition:opacity .4s}
.cambiando .pie-lamina,.cambiando .chip--lamina{opacity:.25}

/* Caja de datos mas grande: tiene que tocar la foto y la seccion de abajo. */
.ficha{padding:clamp(1.5rem,3.4vw,2.2rem);border-radius:20px;gap:1.3rem}
.ficha-datos b{font-size:clamp(1.2rem,1rem+.8vw,1.7rem)}
.ficha-datos span{font-size:.7rem}
.ficha-acciones .boton{padding:1.05rem 1.2rem;font-size:.9rem}
.ficha{margin:clamp(1.6rem,3.4vw,2.6rem) var(--margen) clamp(-6rem,-9vw,-3.6rem)}
.cabecera + .seccion{padding-top:calc(var(--hueco) + clamp(4.5rem,8vw,7rem))}
@media(min-width:760px){
  .ficha{margin:clamp(2.4rem,4.5vw,3.6rem) auto clamp(-6.5rem,-9vw,-4.4rem);
    padding:1.9rem 2.2rem;max-width:min(1140px,calc(100% - 2*var(--margen)))}
}

/* La ficha, en dos datos cortos y los contactos en los botones: el telefono
   iba dos veces, como dato y como boton, y en movil se comia media caja. */
.ficha-datos{grid-template-columns:auto auto;gap:0 clamp(1.2rem,5vw,2.4rem);justify-content:start}
.ficha-datos>div+div{padding-left:clamp(1.2rem,5vw,2.4rem);border-left:1px solid rgba(255,255,255,.18)}
@media(min-width:760px){
  .ficha-datos{grid-template-columns:auto auto}
  .ficha-datos>div{padding:0}
  .ficha-datos>div+div{padding-left:clamp(1.6rem,3vw,2.6rem)}
  .ficha-datos>div:first-child{border-left:0}
}

/* La pastilla de datos, un punto mas grande: es lo primero que se toca. */
.ficha{padding:clamp(1.8rem,4vw,2.6rem);border-radius:24px;gap:1.5rem}
.ficha-datos span{font-size:.74rem;letter-spacing:.16em;margin-bottom:.3rem}
.ficha-datos b{font-size:clamp(1.45rem,1.1rem+1.1vw,2.1rem)}
.ficha-acciones .boton{padding:1.2rem 1.4rem;font-size:.95rem}
@media(min-width:760px){
  .ficha{padding:2.4rem 2.8rem;max-width:min(1220px,calc(100% - 2*var(--margen)));
    margin:clamp(2.6rem,4.5vw,3.8rem) auto clamp(-7.5rem,-10vw,-5rem)}
  .ficha-datos>div+div{padding-left:clamp(2rem,3.4vw,3.2rem)}
}
.cabecera + .seccion{padding-top:calc(var(--hueco) + clamp(5.5rem,9vw,8rem))}
/* Que ocupe mas: la pastilla llega hasta los margenes de la pagina. */
@media(min-width:760px){
  .ficha{max-width:none;margin-left:var(--margen);margin-right:var(--margen);
    padding:2.8rem 3.2rem;gap:2rem}
  .ficha-datos{gap:0 clamp(2.4rem,4vw,4rem)}
  .ficha-acciones{gap:.8rem}
  .ficha-acciones .boton{padding:1.3rem 2rem}
}
/* Mas estrecha: centrada y claramente mas corta que la pagina, como en la
   referencia del cliente. Lo de ancho completo quedaba basto. */
@media(min-width:760px){
  .ficha{max-width:min(860px,calc(100% - 2*var(--margen)));margin-left:auto;margin-right:auto;
    padding:2.2rem 2.6rem;gap:1.6rem}
  .ficha-datos{gap:0 clamp(1.8rem,3vw,2.6rem)}
  .ficha-acciones .boton{padding:1.1rem 1.6rem}
}

/* ---------- LIMPIEZA DE LA CABECERA EN TELEFONO ----------
   En 390 px el titular, la bajada, el pie de lamina y la pastilla tapaban casi
   toda la foto. Se queda lo imprescindible: los dos chips, el titular y el pie
   que cambia con la imagen. La bajada se repite entera en la seccion siguiente,
   asi que en movil no hace falta dos veces. */
@media(max-width:700px){
  .cabecera-texto .bajada{display:none}
  .cabecera-texto h1{font-size:clamp(1.85rem,1.1rem+4vw,2.6rem);margin:.7rem 0 .55rem}
  .pie-lamina{font-size:.82rem;margin-top:.55rem;padding-left:.7rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Con menos texto, el velo puede ser mas corto y se ve mas foto. */
  .cabecera::before{background:linear-gradient(to top,rgba(8,10,18,.90) 0%,rgba(8,10,18,.62) 20%,
    rgba(8,10,18,.10) 48%,rgba(8,10,18,.34) 100%)}
  .chips{gap:.35rem}
  .chip{font-size:.69rem;padding:.36rem .7rem}
  .ficha{padding:1.3rem 1.4rem;gap:1rem}
  .ficha-datos b{font-size:1.25rem}
  .ficha-acciones .boton{padding:1rem .8rem;font-size:.88rem}
}

/* ---------- PASTILLAS OPACAS EN TELEFONO ----------
   El cristal translucido se lee bien sobre una foto oscura y fatal sobre una
   clara: en la lamina de la piscina el texto blanco desaparecia. En movil, que
   es donde el contraste cambia mas, van con fondo solido. */
@media(max-width:700px){
  .chip{background:#141827;border-color:#141827;color:#fff;backdrop-filter:none;
    box-shadow:0 2px 10px rgba(8,10,18,.3)}
  .chip--oro{background:var(--oro);border-color:var(--oro);color:var(--noche)}
  .chip--lamina{background:#141827;border-color:rgba(255,255,255,.22);color:#fff}
  /* El pie de lamina tambien va sobre foto: se le da cuerpo. */
  .pie-lamina{background:rgba(20,24,39,.82);border-radius:10px;padding:.6rem .8rem;
    border-left:3px solid var(--oro);color:#fff}
  .banner-indice{background:#141827;border-color:#141827}
}

/* Con "reducir movimiento" el banner cambia de imagen igual, pero de golpe:
   se quita el fundido, no el contenido. */
@media(prefers-reduced-motion:reduce){
  .cabecera-fotos .cabecera-foto{transition:none}
  .pie-lamina,.chip--lamina{transition:none}
}
/* En telefono fuera el pie que describe la lamina: se come la foto. */
@media(max-width:700px){
  .pie-lamina{display:none}
}
/* En telefono la foto de portada se recorta por los lados: la desplazamos un
   poco a la izquierda y hacia abajo para que la piscina no se quede fuera. */
@media(max-width:759px){
  .cabecera-fotos picture .cabecera-foto{object-position:30% 72%}
}
.cabecera-fotos picture{display:contents}

/* El banner, mas alto en escritorio: con una foto de 1,55:1 en una franja de
   1,9:1 el navegador recortaba piscina o fachada. Ahora la caja se adapta a la
   proporcion de la foto, con tope para que no se coma la pantalla entera. */
@media(min-width:760px){
  .cabecera{min-height:min(94vh, calc(100vw / 1.58))}
}

/* En telefono la pastilla baja mas: libera franja de foto por arriba, que es
   donde esta la piscina en la primera lamina. */
@media(max-width:759px){
  .ficha{margin-top:1rem;margin-bottom:-6.5rem}
  .cabecera + .seccion{padding-top:calc(var(--hueco) + 8.5rem)}
}

/* ---------- TELEFONO: LA PASTILLA, SOLO BOTONES ----------
   "Uso exclusivo" ya lo dice el chip dorado y los once dormitorios salen en la
   seccion de estancias. En movil esos dos datos solo tapaban la piscina, asi
   que la pastilla se queda en lo unico que no puede faltar: llamar y escribir. */
@media(max-width:759px){
  .ficha-datos{display:none}
  .ficha{padding:.9rem;border-radius:16px;gap:0;margin-bottom:-4.6rem}
  .ficha-acciones{gap:.5rem}
  .ficha-acciones .boton{padding:.95rem .7rem;font-size:.9rem}
  .cabecera + .seccion{padding-top:calc(var(--hueco) + 6.5rem)}
  /* y la primera lamina se asienta un poco mas abajo, para ganar agua */
  .cabecera-fotos picture .cabecera-foto{object-position:32% 82%}
}

/* "Alejar" la foto en telefono = caja menos alta. Con object-fit:cover, cuanto
   mas alta es la caja mas tiene que ampliar la imagen para rellenarla y mas se
   come por los lados. Bajando el alto, la foto se ve mas entera. */
@media(max-width:759px){
  .cabecera{min-height:66svh}
  .cabecera-fotos picture .cabecera-foto{object-position:34% 76%}
}
@supports not (min-height:66svh){
  @media(max-width:759px){.cabecera{min-height:66vh}}
}

/* En telefono el recorte se come los lados, y el guerrero esta pegado al borde
   derecho de la foto: esa lamina se ancla a la derecha para que no desaparezca. */
@media(max-width:759px){
  /* Vuelve a rellenar la pantalla: sin bandas negras. La cama queda centrada,
     que es como mejor se veia; la armadura se cae del encuadre y se ve en la
     galeria y en la ficha de la estancia. */
  .cabecera-fotos .foco-guerrero{object-fit:cover;object-position:58% center}
}
/* Al ver la foto entera queda banda oscura arriba y abajo: se disimula con el
   mismo azul del fondo, que es el color de la casa. */
@media(max-width:759px){
  .cabecera{background:#0e121f}
}

/* La foto termina recta, a sangre: nada de esquinas redondeadas en el banner.
   Lo unico redondeado es la pastilla de llamar y escribir. */
.cabecera,.cabecera-fotos,.cabecera::before,.cabecera::after{border-radius:0}

/* ---------- TELEFONO: LOS DATOS VUELVEN, EN UNA LINEA ----------
   Quitarlos del movil dejaba la ficha diciendo algo distinto a la de escritorio.
   Vuelven, pero en una sola fila baja: etiqueta pequena encima del valor, los
   dos datos uno al lado del otro. Ocupa ~35 px en vez de los ~90 de antes. */
@media(max-width:759px){
  .ficha-datos{display:grid;grid-template-columns:auto auto;justify-content:start;
    gap:0 1.1rem;margin-bottom:.15rem}
  .ficha-datos>div+div{padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.18)}
  .ficha-datos span{font-size:.6rem;letter-spacing:.14em;margin-bottom:0;line-height:1.3}
  .ficha-datos b{font-size:1rem;line-height:1.2}
  .ficha{padding:1rem;gap:.8rem}
}

/* ---------- MENOS AIRE ENTRE SECCIONES ----------
   Las secciones quedaban muy sueltas unas de otras, y la primera muy lejos del
   banner. Se recorta el hueco general y, sobre todo, el que dejaba la seccion
   que va justo debajo de la cabecera. */
:root{--hueco:clamp(2.8rem,5vw,6rem)}
.cabecera + .seccion{padding-top:calc(var(--hueco) + clamp(2.2rem,4vw,3.4rem))}
@media(max-width:759px){
  .cabecera + .seccion{padding-top:calc(var(--hueco) + 4.2rem)}
}

/* ---------- EL AZUL, EL DEL LOGO Y NINGUN OTRO ----------
   Medido sobre el propio fichero del logo: su fondo es #191d30. La variable
   decia #191e31 y la barra encogida ademas era translucida, asi que el
   recuadro del logo se recortaba contra la barra. Ahora es el mismo color y
   es opaco. */
:root{--noche:#191d30}
.barra,.barra.encogida{background:#191d30;backdrop-filter:none}

/* La piscina esta en la esquina de abajo a la izquierda de la foto: en telefono
   el encuadre se ancla ahi para que no se pierda nunca. */
@media(max-width:759px){
  .cabecera-fotos picture .cabecera-foto{object-position:18% 100%}
}

/* ---------- TELEFONO: EL TEXTO ARRIBA, EL AGUA ABAJO ----------
   La piscina esta en el borde inferior de la foto y el titular tambien iba
   abajo: se tapaban. En movil el bloque de texto sube bajo la barra, el velo
   se invierte (oscurece arriba) y la franja de abajo queda libre para la
   imagen, con solo la pastilla de llamar encima. */
@media(max-width:759px){
  .cabecera{justify-content:space-between;padding-top:1.1rem}
  .cabecera::before{background:linear-gradient(to bottom,
    rgba(8,10,18,.88) 0%,rgba(8,10,18,.52) 22%,rgba(8,10,18,.06) 52%,rgba(8,10,18,.30) 100%)}
  .cabecera::after{background:linear-gradient(to bottom,rgba(8,10,18,0),rgba(8,10,18,.38))}
  .ficha{margin-top:auto}
  .cabecera-fotos picture .cabecera-foto{object-position:18% 100%}
}

/* El bloque de texto no puede comerse media foto: la bajada se esconde en
   todo lo que no sea escritorio ancho, y el pie que rota se queda en una linea. */
@media(max-width:1024px){
  .cabecera-texto .bajada{display:none}
}
.pie-lamina{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* En escritorio esa linea unica cortaba casi todos los pies: el mas corto ya
   pasa de 46ch. Aqui caben enteros en dos lineas, con el alto reservado para
   que el bloque no pegue un salto cada vez que cambia la lamina. */
@media(min-width:1025px){
  .pie-lamina{-webkit-line-clamp:2;max-width:58ch;min-height:3.4em}
}
@media(min-width:760px){
  .cabecera-texto h1{margin:.7rem 0 .6rem}
  .cabecera-texto .bajada{margin-bottom:0}
}

/* ---------- TELEFONO: NADA DE PASTILLAS SOBRE LA FOTO ----------
   Peticion del cliente. En movil desaparecen los chips y el indice de laminas:
   sobre la foto se queda solo el titular. La pastilla de llamar sigue abajo,
   que es el unico sitio donde hace falta tocar. */
@media(max-width:759px){
  .cabecera .chips,.cabecera .banner-indice{display:none}
  .cabecera-texto{padding-top:.4rem}
}

/* ---------- CORRECCION: EL PIE VOLVIA A SALIR EN MOVIL ----------
   La regla de recorte a una linea se escribio sin media query y, al ir
   despues, pisaba el display:none del telefono. Va aqui, al final, para que
   mande esta. */
@media(max-width:759px){
  .cabecera-texto .bajada,.pie-lamina{display:none}
  /* La pastilla, mas abajo todavia. */
  .ficha{margin-bottom:-7rem}
  .cabecera + .seccion{padding-top:calc(var(--hueco) + 6.4rem)}
}

/* Menos zoom en la portada del telefono: caja mas baja = la foto se amplia
   menos para rellenarla = entra mas jardin y la curva entera de la piscina. */
@media(max-width:759px){
  .cabecera{min-height:58svh}
  .cabecera-fotos picture .cabecera-foto{object-position:14% 100%}
}
@supports not (min-height:58svh){
  @media(max-width:759px){.cabecera{min-height:58vh}}
}

/* ---------- MOVIL: FUERA LA FRASE, PUNTOS PARA LAS LAMINAS ----------
   1) La frase de debajo del titular no sale en ningun tamano por debajo de
      escritorio. Con !important porque hay varias reglas cruzadas y esta manda.
   2) Hacen falta puntos que avisen de que hay mas fotos, pero sin pastilla:
      sueltos sobre la imagen, centrados, encima del boton de llamar. */
@media(max-width:1023px){
  .cabecera-texto .bajada,.pie-lamina{display:none !important}
}
@media(max-width:759px){
  .cabecera .banner-indice{display:flex;position:absolute;top:auto;bottom:1.1rem;
    left:0;right:0;justify-content:center;background:none;border:0;padding:0;
    backdrop-filter:none;z-index:3}
  .cabecera .banner-num{display:none}
  .cabecera .banner-barras{gap:.45rem}
  .cabecera .banner-barras button{width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.45)}
  .cabecera .banner-barras button.activa{width:7px;background:var(--oro)}
  /* sitio para los puntos, que no los tape la pastilla */
  .ficha{margin-bottom:-7.4rem}
}

/* ---------- CARTA DE PRESENTACION ----------
   El cliente queria el corte en diagonal de la web vieja: azul del logo a un
   lado, foto al otro. Aquella llevaba una foto mala del recibidor; aqui va la
   portada labrada. El corte se hace con clip-path sobre el panel azul. */
.carta{position:relative;isolation:isolate;overflow:hidden;background:var(--noche);
  min-height:clamp(260px,38vw,460px);display:flex;align-items:stretch}
.carta-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.carta-marca{position:relative;z-index:1;background:var(--noche);
  width:min(58%,640px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,4vw,3.4rem) clamp(1.4rem,3.5vw,3rem);
  clip-path:polygon(0 0, 100% 0, 58% 100%, 0 100%)}
.carta-logo{width:clamp(170px,22vw,300px);height:auto;display:block}
.carta-sitio{margin:.9rem 0 0;color:rgba(255,255,255,.72);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase}
.carta-lema{margin:.5rem 0 0;color:var(--oro-luz);font-family:var(--display);
  font-size:clamp(1.1rem,.9rem+.8vw,1.7rem);line-height:1.2;max-width:18ch}

/* En telefono el corte va horizontal: foto arriba, carta abajo. */
@media(max-width:700px){
  .carta{flex-direction:column;min-height:0}
  .carta-foto{position:relative;height:clamp(180px,46vw,260px)}
  .carta-marca{width:100%;clip-path:polygon(0 14%, 100% 0, 100% 100%, 0 100%);
    margin-top:-6%;padding-top:clamp(2rem,9vw,3rem);align-items:flex-start}
  .carta-lema{max-width:none}
}

/* La carta, dentro de la columna de "Por que Universitas": misma idea que la
   imagen que le gustaba al cliente — foto, y encima el panel azul del logo
   cortado en diagonal — pero con una foto buena y a tamano de columna. */
.carta--columna{margin:0;min-height:clamp(260px,34vw,420px);border-radius:0}
.carta--columna .carta-marca{width:min(66%,360px);padding:clamp(1.1rem,2.4vw,2rem);
  clip-path:polygon(0 0, 100% 0, 52% 100%, 0 100%)}
.carta--columna .carta-logo{width:clamp(130px,16vw,200px)}
.carta--columna .carta-sitio{font-size:.64rem;margin-top:.7rem}
@media(max-width:900px){
  .carta--columna{min-height:0;flex-direction:column}
  .carta--columna .carta-foto{position:relative;height:clamp(200px,52vw,300px)}
  .carta--columna .carta-marca{width:100%;margin-top:-7%;padding-top:clamp(1.6rem,8vw,2.4rem);
    clip-path:polygon(0 16%, 100% 0, 100% 100%, 0 100%)}
}

/* CORRECCION: la diagonal cortaba el logo ("ACIO RUR..."). El panel se ensancha,
   la diagonal se suaviza y el logo se queda dentro de la zona segura. */
.carta--columna .carta-marca{width:min(60%,330px);
  clip-path:polygon(0 0, 100% 0, 72% 100%, 0 100%);
  justify-content:flex-end;padding:clamp(1.2rem,2.4vw,1.8rem);
  padding-right:clamp(2.6rem,6vw,4.4rem);padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.carta--columna .carta-logo{width:clamp(120px,14vw,170px)}
.carta--columna .carta-sitio{font-size:.6rem;letter-spacing:.16em;margin-top:.6rem;max-width:22ch}
@media(max-width:900px){
  .carta--columna .carta-marca{width:100%;clip-path:polygon(0 16%, 100% 0, 100% 100%, 0 100%);
    padding-right:clamp(1.2rem,4vw,2rem)}
}

/* CAUSA REAL DEL LOGO CORTADO: ".universitas figure img" impone aspect-ratio
   4/5 y object-fit:cover a toda imagen de ese figure, y el logo, al vivir
   dentro, salia estirado al alto de una foto vertical. Se le devuelve su
   proporcion. */
.universitas .carta-logo,.carta .carta-logo{aspect-ratio:auto;height:auto;object-fit:contain}
.universitas .carta-foto,.carta .carta-foto{aspect-ratio:auto}

/* El montaje de Universitas, mas alto: la foto gana presencia y el logo, que
   ahora respeta su proporcion, sigue holgado dentro del panel. */
.carta--columna{min-height:clamp(340px,42vw,580px)}
@media(max-width:900px){
  .carta--columna{min-height:0}
  .carta--columna .carta-foto{height:clamp(240px,60vw,360px)}
}

/* La foto del montaje es vertical (1086x1448): en una caja apaisada se recorta
   el 60% y queda rara. La caja pasa a ser cuadrada en escritorio y casi
   cuadrada en movil, con lo que apenas se recorta: eso es el "menos zoom". */
.carta--columna{min-height:0;aspect-ratio:1/1}
@media(max-width:900px){
  .carta--columna{aspect-ratio:auto}
  .carta--columna .carta-foto{height:auto;aspect-ratio:4/5;object-fit:cover}
}

/* El logo, arriba del panel: la diagonal va del 100% arriba al 72% abajo, asi
   que la zona ancha es la de arriba y es donde el logo respira. */
.carta--columna .carta-marca{justify-content:flex-start;
  padding-top:clamp(1.6rem,3vw,2.4rem);padding-bottom:clamp(1.2rem,2.4vw,1.8rem)}
@media(max-width:900px){
  .carta--columna .carta-marca{justify-content:center;padding-top:clamp(1.8rem,8vw,2.6rem)}
}
/* Y la seccion de abajo sube: esta pieza ya es alta de por si. */
#universitas{padding-bottom:calc(var(--hueco) * .5)}
#estancias{padding-top:calc(var(--hueco) * .65)}

/* El video, a sangre en escritorio: el cartel ocupa el ancho entero de la
   pagina y solo el titulo conserva los margenes. */
@media(min-width:900px){
  #video{padding-left:0;padding-right:0}
  #video .cab{padding-left:var(--margen);padding-right:var(--margen)}
  #video .video-completo{max-width:none;margin:0}
  #video .video-lanzar img{aspect-ratio:21/9}
}

/* ---------- VOLVER ARRIBA ----------
   Aparece al pasar de la primera pantalla y desaparece arriba del todo. En
   movil se coloca encima de la barra fija de llamar para no taparla. */
.arriba{position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);
  z-index:55;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--noche);color:var(--oro-luz);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(8,10,18,.32);text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s var(--curva),visibility .3s,background .25s}
.arriba svg{width:20px;height:20px}
.arriba:hover{background:#232a45;color:var(--oro)}
.arriba.visible{opacity:1;visibility:visible;transform:none}
@media(max-width:700px){
  .arriba{bottom:calc(3.4rem + .7rem);width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.arriba{transition:opacity .2s,visibility .2s}}

/* ---------- TABLETA (760–1080 px) ----------
   Hasta ahora caia en "escritorio": entraban los cinco chips, la bajada y el
   pie en una cabecera que en un iPad solo mide unos 650 px de alto, y quedaba
   todo apretado. Tramo propio: menos texto, titular mas contenido y la
   cabecera algo mas alta en proporcion. */
@media(min-width:760px) and (max-width:1080px){
  .cabecera{min-height:min(88vh, calc(100vw / 1.34))}
  .cabecera-texto h1{font-size:clamp(2.2rem,1.2rem+3.4vw,3.2rem);margin:.6rem 0 .5rem}
  .cabecera-texto .bajada{display:none}
  .pie-lamina{display:none}
  .chip--extra{display:none}
  .ficha{max-width:min(680px,calc(100% - 2*var(--margen)));padding:1.6rem 1.8rem}
  .ficha-datos b{font-size:1.35rem}
  .ficha-acciones .boton{padding:1rem 1.3rem;font-size:.88rem}
  /* La carta del montaje, menos cuadrada: en dos columnas estrechas se comia el alto */
  .carta--columna{aspect-ratio:4/3}
  .carta--columna .carta-marca{width:min(64%,300px)}
  .carta--columna .carta-logo{width:clamp(110px,13vw,150px)}
  /* El bento de zonas comunes con cuatro columnas deja piezas diminutas */
  .comunes{grid-template-columns:repeat(2,1fr)}
  .comun--grande{grid-column:span 2;grid-row:auto}
  .comun--grande img{aspect-ratio:16/9}
  .comun--ancha{grid-column:span 1}
  .comun--ancha img{aspect-ratio:4/3}
}

/* En tableta, igual que en telefono: sobre la foto solo el titular. Cinco
   etiquetas encima de la imagen cargan la portada y no aportan. */
@media(max-width:1080px){
  .cabecera .chips,.cabecera .banner-indice{display:none}
}
/* ...pero los puntos de las laminas si, que si no no se ve que hay mas fotos */
@media(max-width:1080px){
  .cabecera .banner-indice{display:flex;position:absolute;top:auto;bottom:1.2rem;
    left:0;right:0;justify-content:center;background:none;border:0;padding:0;
    backdrop-filter:none;z-index:3}
  .cabecera .banner-num{display:none}
  .cabecera .banner-barras button{width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.45)}
  .cabecera .banner-barras button.activa{width:7px;background:var(--oro)}
}

/* ---------- TELEFONO: SIN PASTILLA BAJO EL CARRUSEL ----------
   Se quita la caja de datos y botones del banner en movil: la foto llega
   limpia hasta abajo. El contacto no se pierde — la barra fija de "Llamar /
   Escribir" sigue pegada al pie de pantalla. En tableta y escritorio no cambia. */
@media(max-width:759px){
  .cabecera .ficha{display:none}
  .cabecera{padding-bottom:clamp(1.4rem,4vw,2rem)}
  .cabecera + .seccion{padding-top:var(--hueco)}
  /* los puntos del carrusel bajan, ya no hay pastilla que esquivar */
  .cabecera .banner-indice{bottom:.9rem}
}

/* En telefono, "La casa es vuestra mientras esteis" sube: menos aire bajo la
   foto y menos por encima del titular, para que no se note el corte. */
@media(max-width:759px){
  .cabecera{padding-bottom:1rem}
  .cabecera + .seccion{padding-top:1.7rem}
  .cabecera + .seccion .cab{margin-bottom:.2rem}
}

/* Primera lamina sin texto encima: la foto del cliente se ve limpia. El
   titular aparece con la segunda. */
.cabecera-texto{transition:opacity .5s ease, visibility .5s}
.cabecera.primera .cabecera-texto{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.cabecera-texto{transition:none}}

/* La barra fija muestra el numero y el correo completos, no "Llamar/Escribir".
   El correo es largo: se le da mas sitio y cuerpo menor para que entre en 390 px. */
@media(max-width:700px){
  .contacto-fijo{grid-template-columns:auto 1fr}
  .contacto-fijo a{font-size:.78rem;letter-spacing:0;padding:.9rem .5rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .contacto-fijo a:first-child{padding-inline:.9rem}
  .contacto-fijo a:last-child{font-size:.74rem}
}
@media(max-width:360px){
  .contacto-fijo a{font-size:.7rem}
  .contacto-fijo a:last-child{font-size:.66rem}
}

/* Teléfono y correo, mitad y mitad: dos columnas iguales. El correo lleva
   cuerpo algo menor porque son 26 caracteres frente a 11 del numero. */
@media(max-width:700px){
  .contacto-fijo{grid-template-columns:1fr 1fr}
  .contacto-fijo a{padding:.9rem .4rem;font-size:.76rem;text-align:center}
  .contacto-fijo a:first-child{padding-inline:.4rem;font-size:.82rem}
  .contacto-fijo a:last-child{font-size:.68rem}
}
@media(max-width:360px){
  .contacto-fijo a:first-child{font-size:.76rem}
  .contacto-fijo a:last-child{font-size:.62rem}
}

/* ---------- ROTULO AZUL DE LAS ESTANCIAS (telefono) ----------
   El nombre es lo que hay que recordar de cada estancia. En movil va sobre una
   banda azul que monta sobre el borde inferior de la foto, como una placa. */
@media(max-width:759px){
  .hab{position:relative}
  .hab figure{margin-bottom:0}
  .hab-rotulo{position:relative;z-index:2;background:var(--noche);color:#fff;
    margin:-2.6rem 1rem 1rem;padding:.9rem 1.1rem;border-radius:14px;
    box-shadow:0 10px 26px rgba(8,10,18,.34)}
  .hab .hab-tipo{color:var(--oro-luz);margin-bottom:.1rem}
  .hab .hab-nombre{color:#fff;margin:0;padding-bottom:.45rem;font-size:1.75rem}
  .hab .hab-nombre::after{background:var(--oro)}
  .hab .hab-alias{color:rgba(255,255,255,.72)}
  .hab .resumen{padding:0 .2rem}
}

/* La placa, mas estrecha y con el sello del palacio a la derecha. */
@media(max-width:759px){
  .hab-rotulo{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    margin:-2rem .9rem .9rem;padding:.6rem .9rem;border-radius:12px}
  .hab .hab-tipo{font-size:.6rem;letter-spacing:.18em;margin-bottom:.05rem}
  .hab .hab-nombre{font-size:1.4rem;padding-bottom:.35rem;line-height:1.1}
  .hab .hab-nombre::after{width:1.6rem;height:2px}
  .hab .hab-alias{font-size:.62rem;margin-top:.2rem}
  .hab-sello{width:54px;height:auto;flex:0 0 auto;opacity:.9}
}

/* ---------- LA PLACA, TAMBIEN EN TABLETA Y ESCRITORIO ----------
   Misma idea que en telefono pero mas contenida: en tres columnas la banda
   tiene que ser baja, o once placas azules cargan la rejilla. */
@media(min-width:760px){
  .hab{position:relative}
  .hab figure{margin-bottom:0}
  .hab-rotulo{position:relative;z-index:2;display:flex;align-items:center;
    justify-content:space-between;gap:.7rem;background:var(--noche);color:#fff;
    margin:-1.8rem .8rem .9rem;padding:.55rem .9rem;border-radius:12px;
    box-shadow:0 10px 24px rgba(8,10,18,.26)}
  .hab .hab-tipo{color:var(--oro-luz);font-size:.58rem;letter-spacing:.18em;margin-bottom:.05rem}
  .hab .hab-nombre{color:#fff;margin:0;padding-bottom:.3rem;
    font-size:clamp(1.25rem,.9rem+.75vw,1.65rem);line-height:1.1}
  .hab .hab-nombre::after{background:var(--oro);width:1.5rem;height:2px}
  .hab .hab-alias{color:rgba(255,255,255,.7);font-size:.6rem;margin-top:.15rem}
  .hab-sello{width:46px;height:auto;flex:0 0 auto;opacity:.85}
  .hab .resumen{padding:0 .2rem}
}

/* ---------- MISMO ROTULO EN ZONAS COMUNES ----------
   Las piezas con nombre —la cueva, el salon, la barbacoa— usan la misma placa
   que las estancias: nombre y sello del palacio sobre banda azul. */
.comun figcaption{background:none;padding:clamp(.8rem,1.6vw,1.2rem)}
.comun-rotulo{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  background:var(--noche);border-radius:12px;padding:.5rem .85rem;margin-bottom:.5rem;
  box-shadow:0 10px 24px rgba(8,10,18,.3)}
.comun-rotulo h3{margin:0;color:#fff;font-size:clamp(1.15rem,.95rem+.6vw,1.6rem);line-height:1.1}
.comun-rotulo .hab-sello{width:42px;opacity:.85}
.comun figcaption p{background:rgba(8,10,18,.55);backdrop-filter:blur(4px);
  border-radius:10px;padding:.5rem .85rem;margin:0;font-size:.86rem}
@media(max-width:560px){
  .comun-rotulo{padding:.45rem .7rem}
  .comun-rotulo .hab-sello{width:36px}
  .comun figcaption p{font-size:.8rem}
}

/* Los sitios de interes no son la casa: misma placa, pero sin sello y sobre
   el papel, no sobre foto. */
.comun-rotulo--claro{background:none;box-shadow:none;padding:0;margin-bottom:.35rem}
.comun-rotulo--claro h3{color:var(--tinta)}

/* La placa se ajusta al nombre, no al ancho de la tarjeta: a todo lo ancho
   parecia una banda plantada en mitad de la foto. */
.comun figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.comun-rotulo{width:fit-content;max-width:100%;margin-bottom:0}
.comun figcaption p{max-width:min(100%,34ch)}
@media(max-width:560px){.comun figcaption p{max-width:100%}}

/* Todos los nombres a la misma altura: la placa va siempre pegada abajo y el
   texto encima. Antes, un parrafo mas largo empujaba el nombre hacia arriba y
   cada tarjeta lo tenia a una altura distinta. */
.comun figcaption{flex-direction:column-reverse;justify-content:flex-start}

/* ---------- ZONAS COMUNES: TEXTO FUERA DE LA FOTO ----------
   Igual que las estancias: la foto arriba, la placa azul montando sobre su
   borde inferior y el texto debajo, sobre el papel. Nada de parrafos encima
   de la imagen. */
.comun{background:none;color:var(--tinta);display:flex;flex-direction:column;overflow:visible}
.comun img{position:relative;width:100%;height:auto;object-fit:cover;border-radius:0}
.comun figcaption{position:static;display:block;padding:0;background:none}
.comun figcaption .comun-rotulo{position:relative;z-index:2;width:fit-content;max-width:calc(100% - 1.6rem);
  margin:-1.8rem .8rem .55rem;box-shadow:0 10px 24px rgba(8,10,18,.28)}
.comun figcaption p{background:none;backdrop-filter:none;color:var(--piedra);
  padding:0 .9rem;max-width:46ch;font-size:.92rem}
.comun:hover img{transform:none}

/* ---------- FRANJA UNICA PARA TODOS LOS NOMBRES ----------
   De lado a lado de la tarjeta, misma altura en todas, el sello del palacio
   siempre al mismo tamano y en el mismo sitio. Vale igual para las estancias
   y para las zonas comunes. */
.hab-rotulo,.comun figcaption .comun-rotulo{
  width:100%;max-width:none;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  min-height:62px;margin:-1.9rem 0 .7rem;padding:.5rem clamp(.8rem,1.6vw,1.1rem);
  border-radius:0;background:var(--noche);box-shadow:0 10px 24px rgba(8,10,18,.26)}
.hab-rotulo>div,.comun-rotulo>div{min-width:0}
.hab .hab-tipo{font-size:.58rem;letter-spacing:.2em;margin:0 0 .1rem}
.hab .hab-nombre,.comun-rotulo h3{margin:0;padding:0;color:#fff;
  font-size:clamp(1.2rem,.95rem+.6vw,1.55rem);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hab .hab-nombre::after{display:none}
.hab .hab-alias{display:inline;margin:0 0 0 .45rem;font-size:.58rem;
  color:var(--oro-luz);letter-spacing:.12em;white-space:nowrap}
.hab-sello,.comun-rotulo .hab-sello{width:48px;height:auto;flex:0 0 48px;opacity:.9}
.hab .resumen,.comun figcaption p{padding:0 clamp(.8rem,1.6vw,1.1rem)}
@media(max-width:560px){
  .hab-rotulo,.comun figcaption .comun-rotulo{min-height:56px;margin-top:-1.7rem}
  .hab-sello,.comun-rotulo .hab-sello{width:42px;flex-basis:42px}
}

/* ---------- AVISO DE ALQUILER INTEGRO ----------
   Peticion del promotor: que no quede duda de que se alquila el palacio
   entero. Va inmediatamente despues de la portada, a todo el ancho, antes de
   cualquier otra seccion. */
.aviso-integro{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);
  background:var(--noche);color:#fff;padding:clamp(1rem,2.2vw,1.5rem) var(--margen);
  border-top:2px solid var(--oro);border-bottom:2px solid var(--oro)}
.aviso-integro p{margin:0;max-width:92ch;font-size:clamp(.95rem,.9rem+.3vw,1.1rem);line-height:1.5}
.aviso-integro strong{color:var(--oro-luz)}
.aviso-sello{width:52px;height:auto;flex:0 0 52px;opacity:.9}
@media(max-width:620px){
  .aviso-integro{gap:.8rem;padding:.9rem var(--margen)}
  .aviso-sello{width:40px;flex-basis:40px}
  .aviso-integro p{font-size:.88rem}
}

/* Etiqueta permanente en la barra. */
.marca-integro{display:inline-block;margin-left:.9rem;padding:.3rem .7rem;border-radius:999px;
  background:var(--oro);color:var(--noche);font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media(max-width:1080px){.marca-integro{display:none}}

/* Prueba: sin la isla de datos en escritorio. La portada termina en la foto y
   la seccion siguiente entra directa. El contacto no se pierde: telefono y
   correo estan en la barra de arriba, siempre visibles. */
@media(min-width:1081px){
  .cabecera .ficha{display:none}
  .cabecera{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
  .cabecera + .seccion{padding-top:var(--hueco)}
}

/* Solo en telefono: una linea bajo la foto del carrusel con el mensaje del
   alquiler integro. En tableta y escritorio no aparece — alli ya esta la
   pildora de la barra y la franja de antes de Reservas. */
.aviso-movil{display:none}
@media(max-width:759px){
  .aviso-movil{display:flex;align-items:center;gap:.7rem;margin:0;
    background:var(--noche);color:#fff;padding:.7rem var(--margen);
    border-bottom:2px solid var(--oro);font-size:.82rem;line-height:1.35}
  .aviso-movil img{width:34px;height:auto;flex:0 0 34px;opacity:.9}
  .aviso-movil strong{color:var(--oro-luz)}
  .cabecera + .aviso-movil + .seccion{padding-top:1.5rem}
}

/* El sello no es una foto de la pieza: hay que sacarlo de las reglas de
   proporcion de las tarjetas (.comun--grande impone 1/1 y lo recortaba). */
.comun .hab-sello,.hab .hab-sello,.aviso-movil img,.aviso-integro .aviso-sello{
  aspect-ratio:auto;height:auto;object-fit:contain}

/* Fuera la isla tambien en tableta: ya no aparece en ningun tamano. La portada
   termina en la foto y la seccion siguiente entra directa en los tres. */
@media(min-width:760px){
  .cabecera .ficha{display:none}
  .cabecera{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
  .cabecera + .seccion{padding-top:var(--hueco)}
}

/* ---------- VER LAS FOTOS + VISOR ---------- */
.ver-fotos{display:inline-flex;align-items:center;gap:.45rem;margin:.6rem clamp(.8rem,1.6vw,1.1rem) 0;
  background:none;border:1px solid var(--linea);color:var(--acento);cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.ver-fotos::before{content:"⧉";font-size:.9rem;line-height:1}
.ver-fotos:hover{background:var(--noche);color:#fff;border-color:var(--noche)}
.ver-fotos--claro{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(8,10,18,.5);
  margin-top:.5rem;backdrop-filter:blur(4px)}
.ver-fotos--claro:hover{background:var(--oro);color:var(--noche);border-color:var(--oro)}

.visor{position:fixed;inset:0;z-index:100;background:rgba(6,8,14,.96);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.4rem,2vw,1.4rem);
  padding:clamp(.8rem,3vw,2rem)}
.visor[hidden]{display:none}
.visor-marco{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0}
.visor-marco img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;
  border-radius:4px;background:#0b0e16}
.visor-marco figcaption{color:rgba(255,255,255,.8);font-size:.8rem;letter-spacing:.06em;text-align:center}
.visor-marco figcaption b{color:var(--oro-luz);margin-left:.5rem}
.visor-nav,.visor-cerrar{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  width:46px;height:46px;font-size:1.6rem;line-height:1;padding:0;transition:background .2s}
.visor-nav:hover,.visor-cerrar:hover{background:var(--oro);color:var(--noche);border-color:var(--oro)}
.visor-cerrar{position:absolute;top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);
  font-size:1.1rem;width:42px;height:42px;z-index:2}
@media(max-width:620px){
  .visor{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px}
  .visor-ant{left:.6rem} .visor-sig{right:.6rem}
  .visor-marco img{max-height:72vh}
}
body.visor-abierto{overflow:hidden}

/* ---------- LAS ESTANCIAS: PASTILLA FLOTANTE ----------
   Vuelven a ser una pastilla que flota sobre el borde de la foto, con esquinas
   redondeadas y sombra: no una franja de lado a lado. Mantienen el alto igual
   en todas y el sello al mismo tamano. */
.hab-rotulo{width:fit-content;max-width:calc(100% - 1.6rem);
  margin:-2rem .8rem .8rem;padding:.55rem 1rem;border-radius:14px;
  min-height:58px;gap:1.1rem;
  box-shadow:0 12px 28px rgba(8,10,18,.34)}
.hab .resumen{padding:0 .9rem}
@media(max-width:560px){
  .hab-rotulo{margin:-1.8rem .7rem .7rem;min-height:54px;padding:.5rem .85rem;gap:.85rem}
}

/* La pastilla, de lado a lado de la tarjeta: sigue flotando sobre la foto con
   esquinas redondeadas y sombra, pero ocupa todo el ancho (menos el margen),
   con el nombre a la izquierda y el sello pegado a la derecha. */
.hab-rotulo{width:auto;max-width:none;display:flex;align-items:center;
  justify-content:space-between;margin-left:.8rem;margin-right:.8rem}
@media(max-width:560px){
  .hab-rotulo{margin-left:.7rem;margin-right:.7rem}
}