/* Kawsay Apart · demo
   Pensada para pasar a WordPress.com Premium: todo el movimiento es CSS, sin JavaScript,
   así entra en el CSS adicional del sitio. */

:root {
  /* color: el verde oliva del logo, los ladrillos de la terraza y el blanco de los deptos */
  --olivo-900: #2f3822;
  --olivo-700: #4e5b38;
  --olivo-100: #e9ede1;
  --ladrillo: #a8472a;
  --ladrillo-hover: #93391f;
  --fondo: #faf8f4;
  --fondo-alt: #f1eee7;
  --tinta: #1f2119;
  --tinta-suave: #5a5d52;
  --tinta-tenue: #c9c4b7;
  --linea: #dedad0;
  --blanco: #ffffff;
  --blanco-80: rgb(255 255 255 / .8);
  --blanco-30: rgb(255 255 255 / .3);
  --sombra-foto: rgb(22 26 16 / .78);
  --sombra-media: rgb(22 26 16 / .4);
  --sombra-arriba: rgb(22 26 16 / .58);
  --sombra-caja: rgb(22 26 16 / .12);
  --sombra-boton: rgb(22 26 16 / .25);
  --sombra-linea: rgb(0 0 0 / .15);
  --velo: rgb(22 26 16 / .55);

  /* tipografía */
  --f-titulo: "Newsreader", Georgia, serif;
  --f-texto: "Figtree", system-ui, sans-serif;
  --t-hero: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);
  --t-h2: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --t-h3: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --t-frase: clamp(1.7rem, 1.15rem + 2.4vw, 3.1rem);
  --t-frase-chica: clamp(1.4rem, 1.1rem + 1.3vw, 2.2rem);
  --t-cita-grande: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --t-cita: 1.3rem;
  --t-num: clamp(2.6rem, 2rem + 2.4vw, 4.25rem);
  --t-menu: 2rem;
  --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --t-texto: 1rem;
  --t-chico: .875rem;
  --t-rotulo: .8125rem;

  /* espacio */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --s-10: 9rem;
  --seccion: var(--s-9);
  --margen: 1rem;
  --ancho: 72rem;
  /* las bandas de color van a lo ancho y su contenido queda alineado con el resto */
  --lado: max(var(--margen), calc((100% - var(--ancho)) / 2));
  --radio: 4px;
  --alto-franja: 2rem;
  --alto-cabecera: 4rem;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-franja) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--t-texto)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ladrillo); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--tinta-suave); }
body.bloqueado { overflow: hidden; }

.saltar { position: absolute; left: var(--s-4); top: -4rem; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; background: var(--blanco); padding: 0 var(--s-4); }
.saltar:focus { top: var(--s-4); }

/* botones: una forma, una tinta cada uno */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--radio);
  font-size: var(--t-texto); font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s var(--curva);
}
.boton:active { transform: scale(.98); }
.boton--acento { background: var(--ladrillo); color: var(--blanco); }
.boton--acento:hover { background: var(--ladrillo-hover); }
.boton--borde { border-color: var(--olivo-700); color: var(--olivo-700); }
.boton--borde:hover { background: var(--olivo-700); color: var(--blanco); }
.boton--claro-borde { border-color: var(--blanco-30); color: var(--blanco); }
.boton--claro-borde:hover { border-color: var(--blanco); }
.enlace {
  background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 600; color: var(--olivo-700); text-decoration: underline; text-underline-offset: .25em;
  text-decoration-thickness: 1px; cursor: pointer;
}
.enlace:hover { color: var(--ladrillo); }
.enlace--claro { color: var(--blanco); }
.enlace--claro:hover { color: var(--blanco); text-decoration-thickness: 2px; }

/* ---------- cabecera ---------- */
/* la franja del precio directo queda fija arriba de todo; el menú abierto la tapa */
.franja {
  position: fixed; inset: 0 0 auto; z-index: 19; height: var(--alto-franja);
  display: flex; align-items: center; justify-content: center; gap: .3em; padding: 0 var(--margen);
  background: var(--olivo-100); color: var(--olivo-900); font-size: var(--t-rotulo); text-decoration: none; white-space: nowrap;
  view-transition-name: franja;
}
.franja strong { font-weight: 600; color: var(--ladrillo); }
.cabecera {
  position: fixed; inset: var(--alto-franja) 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: var(--alto-cabecera); padding: 0 var(--margen);
  color: var(--blanco);
  transition: background-color .3s, box-shadow .3s;
  view-transition-name: cabecera;
}
/* las páginas sin foto arriba arrancan con la cabecera sólida, antes de que corra el script */
.cabecera.solida, .pagina-lista .cabecera, .pagina-contacto .cabecera { background: var(--olivo-900); box-shadow: 0 1px 0 var(--sombra-linea); }
.cabecera__logo { position: relative; z-index: 2; display: block; }
.cabecera__logo img { width: 92px; }

.burger {
  position: relative; z-index: 2;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: var(--blanco);
}
.burger__lineas, .burger__lineas::before, .burger__lineas::after {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--curva), opacity .2s;
}
.burger__lineas { top: 21px; }
.burger__lineas::before, .burger__lineas::after { content: ""; left: 0; }
.burger__lineas::before { top: -7px; }
.burger__lineas::after { top: 7px; }
[data-menu-abierto] .burger__lineas { background: transparent; }
[data-menu-abierto] .burger__lineas::before { transform: translateY(7px) rotate(45deg); background: var(--blanco); }
[data-menu-abierto] .burger__lineas::after { transform: translateY(-7px) rotate(-45deg); background: var(--blanco); }

.cabecera__menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(6rem + var(--alto-franja)) var(--margen) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--olivo-900);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
[data-menu-abierto] .cabecera__menu { opacity: 1; visibility: visible; transition: opacity .25s; }
.cabecera__nav { display: flex; flex-direction: column; }
.cabecera__nav a {
  font-family: var(--f-titulo); font-size: var(--t-menu); line-height: 1.2; text-decoration: none;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--blanco-30);
}
.cabecera__nav a[aria-current="page"] { color: var(--olivo-100); }
.cabecera__acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.idioma {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-2);
  background: none; border: 0; cursor: pointer; color: var(--blanco);
  font-size: var(--t-chico); font-weight: 500; letter-spacing: .04em;
}
.idioma [data-lang-op] { opacity: .72; }
.cabecera:not(.solida) .idioma { text-shadow: 0 1px 6px var(--sombra-arriba); }
.idioma--movil { position: relative; z-index: 2; margin-left: auto; margin-right: var(--s-1); }
.cabecera__acciones .idioma { display: none; }
.idioma [data-lang-op].activo { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }

/* ---------- portadas: inicio con video, cada depto con su foto, las páginas con una foto ---------- */
.portada {
  position: relative; isolation: isolate;
  min-height: 88svh; display: flex; align-items: flex-end;
  color: var(--blanco); overflow: clip; background: var(--olivo-900);
}
.portada--depto { min-height: 78svh; }
.portada--pagina { min-height: 72svh; }
.portada__medio { position: absolute; inset: 0; z-index: -2; }
.portada__medio picture, .portada__medio img, .portada__medio video { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada__medio img, .portada__medio video { object-fit: cover; }
.portada__medio video { opacity: 0; transition: opacity 1.2s; }
.portada__medio video.andando { opacity: 1; }
.pagina-lapaz .portada__medio img { object-position: 60% 50%; }
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--sombra-foto) 0%, var(--sombra-media) 40%, transparent 68%),
              linear-gradient(to bottom, var(--sombra-arriba), transparent 32%);
}
.portada__texto { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--s-7); }
.portada h1 { font-size: var(--t-hero); max-width: 14ch; }
.portada p { margin-top: var(--s-4); max-width: 34ch; font-size: var(--t-lead); line-height: 1.45; color: var(--blanco-80); }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.migas {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-bottom: var(--s-2);
  font-size: var(--t-chico); font-weight: 500; color: var(--blanco-80); text-decoration: none;
}
.migas:hover { color: var(--blanco); }

/* páginas que arrancan con texto: el título baja de la cabecera */
.pagina-cabeza {
  max-width: var(--ancho); margin: 0 auto;
  padding: calc(var(--alto-franja) + var(--alto-cabecera) + var(--s-8)) var(--margen) var(--s-8);
}
.pagina-cabeza h1 { font-size: var(--t-hero); max-width: 14ch; }
.pagina-cabeza .lead { margin-top: var(--s-5); max-width: 44ch; }

/* ---------- reserva ---------- */
.reserva { padding: 0 var(--margen); }
.reserva__caja {
  max-width: var(--ancho); margin: 0 auto; padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--linea);
}
.reserva__encabezado h2 { font-size: var(--t-h3); }
.reserva__encabezado p { margin-top: var(--s-1); font-size: var(--t-chico); color: var(--tinta-suave); }
.reserva__campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.campo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.campo span { font-size: var(--t-rotulo); font-weight: 500; color: var(--tinta-suave); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0 var(--s-3);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--t-texto); -webkit-appearance: none; appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
.campo input:focus, .campo select:focus { border-color: var(--olivo-700); outline: none; box-shadow: 0 0 0 2px var(--olivo-100); }
.reserva__boton { align-self: end; }

/* ---------- la frase: el porqué de la casa, en grande ---------- */
.frase { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.frase__texto { font-family: var(--f-titulo); font-size: var(--t-frase); line-height: 1.22; letter-spacing: -.012em; max-width: 25ch; }
.frase--chica .frase__texto { font-size: var(--t-frase-chica); line-height: 1.3; max-width: 34ch; }

.seccion__cabeza h2 { max-width: 16ch; }
.seccion__cabeza p { margin-top: var(--s-4); color: var(--tinta-suave); max-width: 46ch; }

/* ---------- tarjetas de departamento: carrusel en el celular, grilla en escritorio ---------- */
.deptos { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); overflow-x: clip; }
/* el carrusel entra corrido a la derecha: sin el recorte, el celular achica la página para mostrarlo */
.tarjetas {
  list-style: none; margin: var(--s-7) calc(-1 * var(--margen)) 0; padding: 0 var(--margen) var(--s-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.tarjetas::-webkit-scrollbar { display: none; }
.tarjeta { min-width: 0; scroll-snap-align: start; }
.tarjeta__enlace { display: grid; gap: var(--s-2); text-decoration: none; }
.tarjeta__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--fondo-alt); margin-bottom: var(--s-2); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--curva); }
.tarjeta__nombre { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.15; }
.tarjeta__dato { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--t-chico); color: var(--tinta-suave); }
.tarjeta__dato span + span::before { content: "·"; margin-right: var(--s-2); }
.tarjeta__ver { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 600; color: var(--olivo-700); }
.tarjeta__ver span:last-child { transition: translate .3s var(--curva); }
@media (hover: hover) {
  .tarjeta__enlace:hover .tarjeta__foto img { scale: 1.05; }
  .tarjeta__enlace:hover .tarjeta__ver { color: var(--ladrillo); }
  .tarjeta__enlace:hover .tarjeta__ver span:last-child { translate: .3rem 0; }
}
.deptos__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.deptos__quinto { color: var(--tinta-suave); }

/* ---------- reservar directo ---------- */
.directo { background: var(--fondo-alt); padding: var(--seccion) var(--lado); }
.directo h2 { max-width: 14ch; }
.directo__lista { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-6); }
.directo__lista li { padding-top: var(--s-4); border-top: 1px solid var(--olivo-700); }
.directo__lista p { margin-top: var(--s-2); color: var(--tinta-suave); max-width: 34ch; }

/* ---------- fotos a lo ancho ---------- */
.ancha { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: 82svh; color: var(--blanco); background: var(--olivo-900); }
.ancha__foto { position: absolute; inset: 0; z-index: -2; }
/* la foto es más alta que la banda: el sobrante es lo que recorre al bajar */
.ancha__foto img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.ancha--terraza::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--sombra-foto) 0%, var(--sombra-media) 38%, transparent 64%); }
.ancha__texto { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: var(--s-9) var(--margen) var(--s-7); }
.ancha__texto h2 { max-width: 13ch; }
.ancha__texto p { margin-top: var(--s-4); max-width: 38ch; font-size: var(--t-lead); line-height: 1.5; color: var(--blanco-80); }
.ancha__texto .enlace { margin-top: var(--s-3); }
.ancha--aerea { min-height: 0; aspect-ratio: 4 / 3; }

/* ---------- reseñas ---------- */
.resenas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.resenas__lista { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.resena { padding-top: var(--s-5); border-top: 1px solid var(--linea); }
.resena blockquote { margin: 0; }
.resena blockquote p { font-family: var(--f-titulo); font-size: var(--t-cita); line-height: 1.4; }
.resena:first-child blockquote p { font-size: var(--t-cita-grande); line-height: 1.25; }
.resena figcaption { margin-top: var(--s-4); font-weight: 600; font-size: var(--t-chico); }
.resena figcaption span { font-weight: 400; color: var(--tinta-suave); margin-left: var(--s-2); }

/* ---------- foto y texto, uno al lado del otro ---------- */
.dos { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); display: grid; gap: var(--s-6); }
.dos__foto { margin: 0 calc(-1 * var(--margen)); overflow: clip; }
.dos__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dos__texto h2 { max-width: 14ch; }
.dos__texto .lead { margin-top: var(--s-4); max-width: 40ch; }
.dos__texto .boton { margin-top: var(--s-6); }

/* ---------- contacto ---------- */
.contacto { background: var(--olivo-700); color: var(--blanco); padding: var(--seccion) var(--margen); }
.contacto__caja { max-width: var(--ancho); margin: 0 auto; }
.contacto h2 { max-width: 14ch; }
.contacto .lead { margin-top: var(--s-4); color: var(--blanco-80); }
.contacto__botones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- listado de departamentos ---------- */
.filas { list-style: none; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; gap: var(--s-9); }
.fila { display: grid; gap: var(--s-5); }
.fila__foto { display: block; margin: 0 calc(-1 * var(--margen)); overflow: clip; background: var(--fondo-alt); }
.fila__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale .8s var(--curva); }
@media (hover: hover) { .fila__foto:hover img { scale: 1.04; } }
.fila__texto h2 a { text-decoration: none; }
.fila__texto h2 a:hover { color: var(--ladrillo); }
.fila__datos { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: var(--s-3); color: var(--tinta-suave); }
.fila__datos span + span::before { content: "·"; margin-right: var(--s-3); }
.fila__desc { margin-top: var(--s-4); max-width: 40ch; }
.fila__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }

.quinto { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) 0; }
.quinto__caja { padding: var(--s-7) var(--s-5); border: 1px dashed var(--olivo-700); border-radius: 6px; background: var(--olivo-100); }
.quinto__caja h2 { font-size: var(--t-h3); }
.quinto__caja p { margin-top: var(--s-2); color: var(--tinta-suave); }

.comparar { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.tabla { margin-top: var(--s-6); overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-chico); font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--linea); }
.tabla td { white-space: nowrap; }
.tabla th:first-child { padding-left: 0; }
.tabla thead th { font-weight: 500; font-size: var(--t-rotulo); color: var(--tinta-suave); padding-top: 0; }
.tabla tbody th { font-weight: 400; }
.tabla tbody th a { display: inline-block; padding-block: 12px; margin-block: -12px; font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.25; text-decoration: none; }
.tabla tbody th a:hover { color: var(--ladrillo); }
.tabla td strong { color: var(--olivo-700); }
.tabla td s { color: var(--tinta-suave); }
.tabla__m2 { display: none; }
.comparar__nota { margin-top: var(--s-4); font-size: var(--t-rotulo); color: var(--tinta-suave); }

/* ---------- la página de cada departamento ---------- */
/* en el celular el precio sube al lado de la descripción; en escritorio va en una columna que acompaña */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: var(--s-8) var(--margen) var(--seccion); display: flex; flex-direction: column; }
.ficha__principal { display: contents; }
.ficha__reserva { order: 1; margin-top: var(--s-6); }
.ficha__titulo, .servicios, .camas { order: 2; }
.ficha__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--linea); }
.ficha__datos div { padding: var(--s-4) var(--s-2) var(--s-4) 0; }
.ficha__datos div + div { padding-left: var(--s-3); border-left: 1px solid var(--linea); }
.ficha__datos dt { font-size: var(--t-rotulo); color: var(--tinta-suave); }
.ficha__datos dd { margin: var(--s-1) 0 0; font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.25; }
.ficha__desc { margin-top: var(--s-6); font-family: var(--f-titulo); font-size: var(--t-frase-chica); line-height: 1.3; max-width: 32ch; }
.ficha__confirmar { margin-top: var(--s-4); padding-left: var(--s-3); border-left: 2px solid var(--ladrillo); font-size: var(--t-chico); color: var(--tinta-suave); }
.ficha__titulo { margin-top: var(--s-8); font-size: var(--t-h3); }
.servicios { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3) var(--s-6); }
.servicios li { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; }
.servicios svg, .horario__icono svg { flex: none; width: 24px; height: 24px; color: var(--olivo-700); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.camas { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.camas img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); background: var(--fondo-alt); }
.camas figcaption { margin-top: var(--s-2); font-size: var(--t-chico); color: var(--tinta-suave); }

.precio { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; }
.precio__web { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.precio__web strong { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.precio__web span { color: var(--tinta-suave); }
.precio__booking { color: var(--tinta-suave); font-size: var(--t-chico); margin-top: calc(-1 * var(--s-2)); }
.precio .boton { margin-top: var(--s-2); }
.precio .enlace { justify-self: center; }
.precio__nota { font-size: var(--t-rotulo); color: var(--tinta-suave); text-align: center; }

.mosaico { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); }
.mosaico h2 { display: flex; align-items: baseline; gap: var(--s-3); }
.mosaico__cuantas { font-family: var(--f-texto); font-size: var(--t-chico); color: var(--tinta-suave); }
.mosaico__lista { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.mosaico__lista li:first-child, .mosaico__lista--6 li:last-child { grid-column: 1 / -1; }
.mosaico__foto { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; border-radius: var(--radio); background: var(--fondo-alt); cursor: zoom-in; }
.mosaico__lista li:first-child .mosaico__foto { aspect-ratio: 3 / 2; }
.mosaico__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--curva); }
@media (hover: hover) { .mosaico__foto:hover img { scale: 1.04; } }

.otros { background: var(--fondo-alt); padding: var(--seccion) var(--lado); overflow-x: clip; }
.otros .tarjetas { margin-inline: calc(-1 * var(--margen)); }

/* ---------- la casa ---------- */
.terraza { background: var(--olivo-900); color: var(--blanco); padding: var(--seccion) var(--lado); }
.terraza__texto h2 { max-width: 13ch; }
.terraza__texto .lead { margin-top: var(--s-4); max-width: 40ch; color: var(--blanco-80); }
.terraza__fotos { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.terraza__fotos figure { overflow: clip; border-radius: var(--radio); }
.terraza__fotos img { width: 100%; height: 100%; object-fit: cover; }
.terraza__f1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.terraza__f2, .terraza__f3 { aspect-ratio: 3 / 4; }

.horario { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: var(--s-5); }
.horario__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--olivo-100); }
.horario__icono svg { width: 30px; height: 30px; }
.horario h2 { max-width: 15ch; }
.horario .lead { margin-top: var(--s-4); max-width: 46ch; }

.todos { background: var(--fondo-alt); padding: var(--seccion) var(--lado); }
.servicios--grande { margin-top: var(--s-7); gap: var(--s-5) var(--s-6); font-size: var(--t-lead); }
.servicios--grande svg { width: 28px; height: 28px; }
.todos__boton { margin-top: var(--s-7); }

/* ---------- La Paz ---------- */
.altura { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.altura > div { max-width: 40rem; padding-left: var(--s-5); border-left: 2px solid var(--ladrillo); }
.altura .lead { margin-top: var(--s-4); }
.guia { list-style: none; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); display: grid; gap: var(--s-9); }
.guia__item { display: grid; gap: var(--s-5); }
.guia__foto { margin: 0 calc(-1 * var(--margen)); overflow: clip; }
.guia__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guia__num { display: block; margin-bottom: var(--s-3); font-family: var(--f-titulo); font-size: var(--t-num); line-height: 1; color: var(--ladrillo); }
.guia__texto .lead { margin-top: var(--s-3); max-width: 40ch; }

.ubicacion { background: var(--fondo-alt); }
.ubicacion__texto { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) var(--s-7); }
.ubicacion__texto h2 { max-width: 15ch; }
.ubicacion__texto .lead { margin-top: var(--s-4); margin-bottom: var(--s-5); }
.ubicacion__mapa iframe { display: block; width: 100%; height: 22rem; border: 0; filter: saturate(.85); }

/* ---------- contacto ---------- */
.canales { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); }
.canales__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); }
.canal { display: grid; justify-items: start; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--linea); }
.canal h2 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.canal a:not(.boton) { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .2em; text-decoration-color: var(--linea); }
.canal p + p { margin-top: calc(var(--s-2) * -1); }
.canal .boton { margin-top: var(--s-3); }

.preguntas { background: var(--fondo-alt); padding: var(--seccion) var(--lado); }
.preguntas__lista { max-width: 48rem; margin-top: var(--s-7); border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 44px; padding: var(--s-5) 0; cursor: pointer;
  font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.3;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: var(--s-2);
  border-right: 1.5px solid var(--olivo-700); border-bottom: 1.5px solid var(--olivo-700);
  transform: translateY(-25%) rotate(45deg); transition: transform .3s var(--curva);
}
.preguntas details[open] summary::after { transform: translateY(25%) rotate(225deg); }
.preguntas details p { padding-bottom: var(--s-5); color: var(--tinta-suave); max-width: 56ch; }

/* ---------- pie ---------- */
.pie { background: var(--olivo-900); color: var(--blanco-80); padding: var(--s-8) var(--margen) var(--s-6); font-size: var(--t-chico); }
.pie > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.pie__arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--blanco-30); }
.pie__logo { width: 104px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pie__nav a:hover { text-decoration: underline; }
.pie__datos { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.pie a { color: var(--blanco); text-decoration-color: var(--blanco-30); text-underline-offset: .2em; }
.pie__datos a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--blanco-30); font-size: var(--t-rotulo); }
.pie__creditos { margin-top: var(--s-2); font-size: var(--t-rotulo); line-height: 1.7; }

/* ---------- barra fija del celular ---------- */
.barra-movil {
  position: fixed; inset: auto 0 0; z-index: 15;
  display: flex; gap: var(--s-2); align-items: center;
  padding: var(--s-3) var(--margen) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform .3s var(--curva);
  view-transition-name: barra;
}
.barra-movil.visible { transform: none; }
.barra-movil__wa {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--linea); border-radius: var(--radio); color: var(--olivo-700);
}
.barra-movil__reservar { flex: 1; }
.wa-flotante { display: none; }

/* ---------- hojas: galería y reserva (al pie en el celular) ---------- */
.hoja {
  width: 100%; max-width: 100%; max-height: 92svh;
  margin: auto 0 0; padding: 0; border: 0; border-radius: 12px 12px 0 0;
  background: var(--fondo); color: var(--tinta); overflow: hidden;
}
.hoja--galeria { height: 92svh; }
.hoja[open] { display: flex; flex-direction: column; animation: sube .35s var(--curva); }
.hoja.arrastrando { animation: none; transition: none; }
.hoja::backdrop { background: var(--velo); }
.hoja__cabeza {
  position: relative; flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--margen) var(--s-3); border-bottom: 1px solid var(--linea); touch-action: none; cursor: grab;
}
.hoja__cabeza::before {
  content: ""; position: absolute; top: var(--s-2); left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 2px; background: var(--linea);
}
.hoja__cabeza h2 { font-size: var(--t-h3); }
.hoja__cerrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; background: none; border: 0; cursor: pointer; }
.hoja__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--margen) var(--s-6); }
.hoja__pie {
  flex: none; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--margen) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea);
}
.hoja__pie:empty { display: none; }
.hoja__pie .boton { width: 100%; }
.galeria__fotos { display: grid; gap: var(--s-3); }
.galeria__fotos img { width: 100%; border-radius: var(--radio); background: var(--fondo-alt); }
@keyframes sube { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- la reserva simulada ---------- */
.sim__marca { font-size: var(--t-rotulo); font-weight: 600; color: var(--ladrillo); margin-bottom: var(--s-1); }
.sim__cuerpo { display: grid; gap: var(--s-4); align-content: start; }
.sim__campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.sim__campos .campo--ancho { grid-column: 1 / -1; }
.sim__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); color: var(--tinta-suave); font-size: var(--t-chico); }
.sim__error { color: var(--ladrillo); font-size: var(--t-chico); }
.sim__nota { font-size: var(--t-rotulo); color: var(--tinta-suave); }
.opcion {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: center;
  width: 100%; padding: var(--s-2); text-align: left; cursor: pointer;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.opcion:hover:not(:disabled) { border-color: var(--olivo-700); }
.opcion:disabled { cursor: not-allowed; opacity: .55; }
.opcion img { width: 96px; height: 80px; object-fit: cover; border-radius: var(--radio); }
.opcion__nombre { display: block; font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.2; }
.opcion__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin-top: var(--s-1); }
.opcion__precio strong { font-size: var(--t-texto); }
.opcion__precio s { color: var(--tinta-suave); font-size: var(--t-chico); }
.opcion__extra { display: block; font-size: var(--t-chico); color: var(--tinta-suave); }
.cuenta { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; }
.cuenta__fila { display: flex; justify-content: space-between; gap: var(--s-3); }
.cuenta__fila--ahorro { color: var(--olivo-700); }
.cuenta__fila--total { padding-top: var(--s-2); border-top: 1px solid var(--linea); font-weight: 600; font-size: var(--t-lead); }
.cuenta__depto { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--linea); }
.cuenta__depto img { width: 72px; height: 60px; object-fit: cover; border-radius: var(--radio); }
.cuenta__depto strong { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-lead); }
.pago { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.pago legend { padding: 0; margin-bottom: var(--s-2); font-weight: 600; }
.pago__op {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: var(--s-3) var(--s-4); background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.pago__op:has(input:checked) { border-color: var(--olivo-700); box-shadow: inset 0 0 0 1px var(--olivo-700); }
.pago__op input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--olivo-700); }
.pago__op strong, .pago__op span span { display: block; }
.pago__op span span { font-size: var(--t-chico); color: var(--tinta-suave); }
.sim__cargando { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) 0; color: var(--tinta-suave); }
.sim__cargando::before {
  content: ""; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--linea); border-top-color: var(--olivo-700); animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.sim__listo { display: grid; justify-items: start; gap: var(--s-3); }
.sim__check { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--olivo-100); color: var(--olivo-700); }
.sim__listo h3 { font-size: var(--t-h2); }
.sim__codigo { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sim__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); color: var(--tinta-suave); }
.sim__pasos li { display: flex; gap: var(--s-2); }
.sim__pasos li::before { content: "✓"; color: var(--olivo-700); font-weight: 600; }

/* ============ movimiento ============
   Todo es CSS: entra solo si la persona no pidió menos movimiento, y lo que depende del scroll
   solo en navegadores que lo saben hacer. Sin soporte, el contenido está quieto y completo. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* la portada entra al cargar: la foto se asienta y el texto sube en tres tiempos */
  .portada__medio > * { animation: asienta 2.4s var(--curva) both; }
  .portada__texto > * { animation: sube-texto 1s var(--curva) both; }
  .portada__texto > :nth-child(2) { animation-delay: .12s; }
  .portada__texto > :nth-child(3) { animation-delay: .24s; }
  @keyframes asienta { from { scale: 1.08; } }
  @keyframes sube-texto { from { opacity: 0; translate: 0 1.5rem; } }

  /* el menú del celular: los enlaces llegan de a uno */
  @media (max-width: 999px) {
    [data-menu-abierto] .cabecera__nav a, [data-menu-abierto] .cabecera__acciones { animation: sube-texto .5s var(--curva) both; }
    [data-menu-abierto] .cabecera__nav a:nth-child(2) { animation-delay: .05s; }
    [data-menu-abierto] .cabecera__nav a:nth-child(3) { animation-delay: .1s; }
    [data-menu-abierto] .cabecera__nav a:nth-child(4) { animation-delay: .15s; }
    [data-menu-abierto] .cabecera__acciones { animation-delay: .2s; }
  }

  .preguntas details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
  .preguntas details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }

  /* de una página a otra: la foto de la tarjeta se agranda hasta ser la portada del departamento */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--curva); }
  .tarjeta__foto img, .fila__foto img, .portada--depto img { view-transition-class: foto; }
  ::view-transition-old(*.foto), ::view-transition-new(*.foto) { height: 100%; object-fit: cover; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* al bajar, la foto de portada se hunde y el texto se despide */
    .portada__medio { animation: hunde linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .portada__texto { animation: se-va linear both; animation-timeline: scroll(root); animation-range: 10svh 75svh; }
    @keyframes hunde { to { translate: 0 22%; } }
    @keyframes se-va { to { opacity: 0; translate: 0 -2.5rem; } }

    /* textos y bloques suben a medida que entran */
    [data-entra] { animation: entra var(--curva) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes entra { from { opacity: 0; translate: 0 2.5rem; } }

    /* las fotos se destapan de abajo hacia arriba y se acomodan */
    [data-revela] { animation: destapa var(--curva) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    [data-revela] img { animation: acomoda linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    @keyframes destapa { from { clip-path: inset(18% 6% 0 6% round var(--radio)); } to { clip-path: inset(0 round 0); } }
    @keyframes acomoda { from { transform: scale(1.18); } to { transform: scale(1); } }

    /* las fotos a lo ancho van más lento que la página */
    [data-paralaje] .ancha__foto img { animation: paralaje linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes paralaje { from { translate: 0 -8%; } to { translate: 0 8%; } }

    /* la frase se va tiñendo línea por línea mientras se lee */
    .frase__texto span {
      color: transparent;
      background-image: linear-gradient(var(--tinta), var(--tinta)), linear-gradient(var(--tinta-tenue), var(--tinta-tenue));
      background-size: 0% 100%, 100% 100%; background-repeat: no-repeat;
      -webkit-background-clip: text; background-clip: text;
      animation: tine linear both; animation-timeline: view(); animation-range: entry 70% cover 50%;
    }
    @keyframes tine { to { background-size: 100% 100%, 100% 100%; } }

    /* el carrusel llega desde la derecha; en escritorio las tarjetas suben escalonadas */
    .tarjetas { animation: llega linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes llega { from { opacity: 0; translate: 4rem 0; } }
    .servicios li, .directo__lista li { animation: entra var(--curva) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
}

/* ============ tablet ============ */
@media (min-width: 700px) {
  :root { --margen: 2rem; }
  .barra-movil { display: none; }
  .wa-flotante {
    position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 15;
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--olivo-700); color: var(--blanco); box-shadow: 0 6px 20px var(--sombra-boton);
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--curva);
  }
  .wa-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
  .wa-flotante svg { width: 26px; height: 26px; }

  /* deja lugar para que el cuadro de reserva entre entero en la primera pantalla */
  .portada--inicio { min-height: max(32rem, calc(100svh - 11rem)); }
  .portada--inicio .portada__texto { padding-bottom: 8rem; }
  .portada--depto { min-height: max(30rem, 82svh); }
  .reserva { margin-top: -3.5rem; position: relative; z-index: 2; }
  .reserva__caja {
    padding: var(--s-5) var(--s-6); background: var(--blanco); border: 0; border-radius: 6px;
    box-shadow: 0 10px 30px var(--sombra-caja);
  }
  .reserva__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) auto; align-items: end; }

  .tarjetas { grid-auto-columns: 44%; }
  .directo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ancha { min-height: 88svh; }
  .ancha--aerea { min-height: 0; aspect-ratio: 16 / 7; }
  .resenas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-7); }
  .resena:first-child { grid-column: 1 / -1; }
  .resena:first-child blockquote p { max-width: 30ch; }
  .dos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  .dos__foto { margin: 0; border-radius: var(--radio); }
  .dos__foto img { aspect-ratio: 5 / 4; }

  .fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  .fila--der { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fila--der .fila__foto { order: 2; }
  .fila__foto { margin: 0; border-radius: var(--radio); }
  .fila__foto img { aspect-ratio: 5 / 4; }
  .quinto__caja { padding: var(--s-8) var(--s-7); }
  .tabla th, .tabla td { padding-inline: var(--s-4); }
  .tabla__m2 { display: table-cell; }

  .ficha__datos dd { font-size: var(--t-h3); }
  .ficha .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(10rem, 17vw, 15rem); gap: var(--s-3); }
  .mosaico__lista li:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaico__lista--6 li:last-child { grid-column: auto; }
  .mosaico__foto, .mosaico__lista li:first-child .mosaico__foto { aspect-ratio: auto; height: 100%; }

  .terraza__fotos { gap: var(--s-4); }
  .horario { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .servicios--grande { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .guia__item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  .guia__item:nth-child(even) .guia__foto { order: 2; }
  .guia__foto { margin: 0; border-radius: var(--radio); }
  .guia__foto img { aspect-ratio: 5 / 4; }
  .ubicacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .ubicacion__texto { margin: 0; padding: var(--seccion) var(--margen); align-self: center; }
  .ubicacion__mapa iframe { height: 100%; min-height: 28rem; }

  .canales__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }

  .pie__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hoja { width: min(40rem, calc(100% - 4rem)); max-height: min(88vh, 60rem); margin: auto; border-radius: 8px; }
  .hoja--galeria { width: min(64rem, calc(100% - 4rem)); height: min(88vh, 60rem); }
  .hoja[open] { animation: aparece .25s var(--curva); }
  .hoja__cabeza { cursor: default; }
  .hoja__cabeza::before { display: none; }
  .galeria__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoja__pie .boton { width: auto; align-self: flex-end; }
  @keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ============ escritorio ============ */
@media (min-width: 1000px) {
  :root { --margen: 3rem; --seccion: var(--s-10); --alto-cabecera: 5rem; }
  .cabecera__logo img { width: 104px; }
  .burger, .idioma--movil { display: none; }
  .cabecera__acciones .idioma { display: inline-flex; }
  .cabecera__menu {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: var(--s-6);
    padding: 0; background: none; opacity: 1; visibility: visible;
  }
  .cabecera__nav { flex-direction: row; gap: var(--s-5); }
  .cabecera__nav a {
    font-family: var(--f-texto); font-size: var(--t-chico); font-weight: 500; padding: var(--s-2) 0; border: 0;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--curva);
  }
  .cabecera__nav a:hover, .cabecera__nav a[aria-current="page"] { background-size: 100% 1px; color: var(--blanco); }
  .cabecera__acciones { gap: var(--s-3); }
  .cabecera__reservar { min-height: 44px; }

  .portada h1 { max-width: 13ch; }
  .pagina-cabeza { padding-bottom: var(--s-9); }

  .tarjetas { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-inline: 0; padding: 0; overflow: visible; }
  .otros .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; }
  .terraza { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
  .terraza__texto { position: sticky; top: calc(var(--alto-franja) + var(--alto-cabecera) + var(--s-7)); }
  .terraza__fotos { margin-top: 0; }
  .terraza__f3 { margin-top: var(--s-9); }

  .ficha { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 0 var(--s-9); align-items: start; padding-top: var(--s-9); }
  .ficha__principal { display: block; }
  .ficha__reserva { position: sticky; top: calc(var(--alto-franja) + var(--alto-cabecera) + var(--s-5)); margin-top: 0; }
  .precio { padding: var(--s-6); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    /* en la grilla, cada tarjeta arranca un poco más abajo que la anterior y llegan juntas */
    .tarjetas { animation: none; }
    .tarjeta { animation: escalona var(--curva) both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes escalona { from { opacity: 0; translate: 0 calc(3rem + var(--i, 0) * 2rem); } }
  }
}