/* =========================================================================
   KONSILIA DEPARTAMENTOS
   Fondo lavanda, tinta morada, fotografía en una sola columna.
   El morado #57187C está tomado del logo; el lavanda es ese mismo morado
   muy rebajado, así que toda la página vive dentro de la marca.
   ========================================================================= */

:root{
  --lavanda:#E7E2F1;        /* fondo de toda la página */
  --lavanda-hondo:#DAD2E9;  /* líneas y separadores */
  --morado:#57187C;         /* tinta: títulos, textos y enlaces */
  --morado-hondo:#38104F;   /* estados activos y hover */
  --blanco:#FFFFFF;

  --ancho:1120px;
  /* Medidas de la galería, tomadas de la página de referencia a 1440px:
     columna de 1296px (90% del ancho), las horizontales ocupan la columna
     completa y las verticales exactamente la mitad, centradas. */
  --col-galeria:90%;
  /* 34px entre fotos, como el collage de /amenities del modelo */
  --hueco-galeria:clamp(1rem,2.4vw,34px);

  /* Curvas de animación tomadas de la página de referencia */
  --fade:cubic-bezier(.33,0,.2,1);      /* fundido de las fotos, 1s */
  --suave:cubic-bezier(.4,0,.2,1);      /* entrada deslizada, .8s */

  --display:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --texto:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--lavanda);
  color:var(--morado);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--morado);outline-offset:4px}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.centrado{text-align:center}

/* Etiqueta en minúsculas y muy espaciada: el gesto tipográfico de la página */
.espaciado{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:lowercase;
}

/* =========================================================================
   Cabecera: logo centrado y, debajo, la navegación. Sin barra fija.
   ========================================================================= */
.cabecera{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);text-align:center}

.cabecera__logo{display:inline-block}
.cabecera__logo img{
  width:clamp(210px,26vw,320px);
  height:auto;
  margin-inline:auto;
}

.cabecera__nav{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.4rem 1.9rem;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}

.nav-link{
  font-family:var(--display);
  font-size:.94rem;
  letter-spacing:.11em;
  text-transform:lowercase;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,opacity .2s ease;
  cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;
  color:inherit;font-family:var(--display);
}
.nav-link:hover{border-bottom-color:var(--morado)}
/* La pestaña de la página actual queda subrayada */
.nav-link[aria-current="page"]{border-bottom-color:var(--morado);color:var(--morado-hondo)}

/* Separador sutil entre el grupo de filtros y el resto de los enlaces */
.nav-sep{width:1px;height:14px;background:var(--lavanda-hondo);align-self:center}

.nav-link--airbnb{position:relative}
.nav-link--airbnb::after{content:" ↗";font-size:.85em}

/* =========================================================================
   Portada: una sola fotografía, con aire lavanda a los lados.
   ========================================================================= */
.portada{margin:0}
.portada img{
  width:min(var(--col-galeria),1500px);
  margin-inline:auto;
  height:clamp(300px,72vh,720px);
  object-fit:cover;
}

/* =========================================================================
   Presentación
   ========================================================================= */
.intro{padding:clamp(3.5rem,8vw,6rem) 0;text-align:center}
.intro h1{
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  letter-spacing:-.005em;
  max-width:20ch;margin-inline:auto;
}
.intro__direccion{
  margin-top:1.4rem;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.1em;
  text-transform:lowercase;
  opacity:.75;
}
.intro__ficha{
  margin-top:1.1rem;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:lowercase;
}
.intro__texto{
  max-width:58ch;margin:2.2rem auto 0;
  font-size:1.02rem;
}

/* Lo que incluye: una línea continua, separada por puntos, sin viñetas */
.incluye{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.5rem;
  max-width:52ch;margin:2.4rem auto 0;padding:0;
  list-style:none;
  font-family:var(--display);
  font-size:.84rem;letter-spacing:.16em;text-transform:lowercase;
}
.incluye li{position:relative}
.incluye li + li::before{
  content:"·";position:absolute;left:-.85rem;opacity:.45;
}

/* Botones: contorno finísimo, sin relleno ni esquinas redondeadas */
.acciones{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
  margin-top:2.6rem;
}
.boton{
  display:inline-block;
  font-family:var(--display);
  font-size:.86rem;
  letter-spacing:.18em;
  text-transform:lowercase;
  padding:.95rem 2rem;
  border:1px solid var(--morado);
  transition:background-color .22s ease,color .22s ease;
}
.boton:hover{background:var(--morado);color:var(--lavanda)}
.boton--lleno{background:var(--morado);color:var(--lavanda)}
.boton--lleno:hover{background:var(--morado-hondo);color:var(--lavanda)}

/* =========================================================================
   Hoja: la estructura de cada página interior
   ========================================================================= */
.hoja{
  width:min(var(--col-galeria),1500px);
  margin:0 auto;
  padding:clamp(1rem,3vw,2.5rem) 0 clamp(4rem,8vw,6rem);
}
.hoja--centrada{text-align:center}

.hoja__cabecera h1{
  font-size:clamp(2rem,4.2vw,3.2rem);
  font-weight:300;
  letter-spacing:-.01em;
}
.hoja__entradilla{
  margin-top:1rem;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.04em;
  opacity:.75;
  max-width:52ch;
}
.hoja--centrada .hoja__entradilla{margin-inline:auto}

.hoja__texto{
  max-width:62ch;
  margin-top:clamp(2rem,4vw,3rem);
  font-size:1.02rem;
}
.hoja__texto strong{font-weight:400;border-bottom:1px solid var(--lavanda-hondo)}
.hoja__texto a{border-bottom:1px solid var(--lavanda-hondo)}
.hoja__texto a:hover{border-bottom-color:var(--morado)}

/* =========================================================================
   Atajos del inicio: cuatro accesos a las demás páginas
   ========================================================================= */
.atajos{
  width:min(var(--col-galeria),1500px);
  margin:0 auto;padding-bottom:clamp(3rem,7vw,5rem);
  columns:2;
  column-gap:var(--hueco-galeria);
}
.atajo{
  display:block;
  break-inside:avoid;
  margin-bottom:calc(var(--hueco-galeria) + 1.5rem);
}
/* Sin recorte: la foto conserva su proporción. Las del departamento son
   todas verticales y cualquier recorte les quitaba el sentido. */
.atajo img{width:100%;height:auto}
.atajo__txt{
  display:block;margin-top:1rem;
  font-family:var(--display);
  font-size:.86rem;letter-spacing:.18em;text-transform:lowercase;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.atajo:hover .atajo__txt{border-bottom-color:var(--morado)}

/* =========================================================================
   Galería por secciones, en collage

   Medidas tomadas de /amenities de la página de referencia (a 1440px):
   columna de 1296px con dos columnas de 631px y 34px entre ellas.
   Se usa `columns` de CSS para que las fotos se acomoden solas según su alto,
   sin filas con el borde inferior disparejo.
   ========================================================================= */
.collage{
  columns:2;
  column-gap:var(--hueco-galeria);
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
  list-style:none;
}
.collage__item{
  break-inside:avoid;          /* que ninguna foto se parta entre columnas */
  margin:0 0 var(--hueco-galeria);
}
.collage__btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.collage__btn img{width:100%;height:auto}

/* =========================================================================
   El barrio
   ========================================================================= */
.barrio__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(2rem,4vw,3rem) clamp(2rem,5vw,4rem);
  margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;list-style:none;
}
.lugar{border-top:1px solid var(--lavanda-hondo);padding-top:1.3rem}
.lugar__dist{
  font-family:var(--display);
  font-size:.74rem;letter-spacing:.2em;text-transform:lowercase;
  opacity:.6;margin:0 0 .5rem;
}
.lugar h2{font-size:1.08rem;margin-bottom:.5rem}
.lugar p:last-child{font-size:.94rem;opacity:.85;margin:0}

/* =========================================================================
   Contacto
   ========================================================================= */
.contacto__datos{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.6rem clamp(2.5rem,6vw,5rem);
  margin:clamp(3rem,6vw,4rem) 0 0;padding:0;
}
.contacto__datos div{min-width:190px}
.contacto__datos dt{
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.2em;text-transform:lowercase;
  opacity:.6;
}
.contacto__datos dd{margin:.4rem 0 0;font-size:.98rem;line-height:1.5}
.contacto__datos a{border-bottom:1px solid var(--lavanda-hondo)}
.contacto__datos a:hover{border-bottom-color:var(--morado)}

/* =========================================================================
   Pie con el sello
   ========================================================================= */
.pie{
  padding:clamp(3.5rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--lavanda-hondo);
  text-align:center;
}
.pie__sello{width:104px;height:auto;margin:0 auto 1.8rem;opacity:.9}
.pie__razon{font-family:var(--display);font-size:.95rem;letter-spacing:.06em}
.pie__meta{font-size:.85rem;opacity:.7;margin-top:.5rem}
.pie__legal{font-size:.78rem;opacity:.55;margin-top:1.8rem}

/* =========================================================================
   WhatsApp flotante: un círculo discreto, en la tinta de la página
   ========================================================================= */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:50;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--morado);color:var(--lavanda);
  box-shadow:0 4px 20px rgba(56,16,79,.28);
  transition:background-color .2s ease,transform .2s ease;
}
.wa:hover{background:var(--morado-hondo);transform:translateY(-2px)}
.wa svg{width:26px;height:26px}

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;
  background:var(--lavanda);
  padding:clamp(3.5rem,7vw,5rem) clamp(1rem,4vw,4rem);
}
.lightbox.abierto{display:flex}
.lightbox__img{max-width:100%;max-height:84vh;object-fit:contain}
.lightbox__pie{
  position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);
  text-align:center;font-family:var(--display);
  font-size:.78rem;letter-spacing:.18em;text-transform:lowercase;
  opacity:.65;padding-inline:5rem;
}
.lb-btn{
  position:absolute;background:none;border:0;color:var(--morado);
  width:46px;height:46px;cursor:pointer;
  display:grid;place-items:center;
  transition:opacity .2s ease;opacity:.55;
}
.lb-btn:hover{opacity:1}
.lb-btn--cerrar{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-btn--prev{left:clamp(.3rem,2vw,1.5rem)}
.lb-btn--next{right:clamp(.3rem,2vw,1.5rem)}

/* =========================================================================
   Animaciones

   Dos gestos, con los mismos valores que la página de referencia:
   1. Cada foto entra con un fundido de 1s cuando termina de cargar.
   2. Los bloques suben 20px y aparecen al entrar en pantalla.

   Todo el estado inicial cuelga de la clase .js, que el propio JavaScript
   pone en <html>. Si el JavaScript falla o está desactivado, la página se ve
   completa y quieta en vez de quedar en blanco.
   ========================================================================= */

.js .foto{opacity:0;transition:opacity 1s var(--fade)}
.js .foto.cargada{opacity:1}

.js .revelar{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--suave), transform .8s var(--suave);
}
.js .revelar.visible{opacity:1;transform:none}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:820px){
  .cabecera__nav{gap:.3rem 1.2rem}
  .nav-link{font-size:.86rem;letter-spacing:.08em}
  .nav-sep{display:none}
}

@media (max-width:720px){
  /* En pantalla angosta el collage pasa a una sola columna. */
  .collage{columns:1}
  .hoja,.atajos{width:100%;padding-inline:1.25rem}
  .atajos{columns:1}
  .portada img{width:100%;height:clamp(340px,62vh,520px)}
  .acciones .boton{flex:1 1 100%;text-align:center}
  .lightbox__pie{padding-inline:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  /* Para quien pidió menos movimiento, nada se oculta ni se desplaza */
  .js .foto,.js .revelar{opacity:1 !important;transform:none !important}
}