/* ==========================================================================
   Pipí Cucú — hoja de estilos
   --------------------------------------------------------------------------
   PALETA — arena y celeste, sacada del frente de la cuadra
     Fondo .............. #FBF8F2   arena muy clarito
     Tarjetas ........... #FFFFFF   blanco puro, para que "floten"
     Texto .............. #333333   gris oscuro
     Principal .......... #2B5B78   azul profundo (títulos y bloque final)
     Secundario ......... #E9DDCB   arena
     Botones ............ #5E9EC4   celeste
     Hover de botones ... #47829F

   TIPOGRAFÍAS
     Títulos y marca .... Petrona   (serifa de Omnibus-Type, Buenos Aires)
     Texto y botones .... Archivo   (de la misma fundición)

   Las dos son de Omnibus-Type, fundición tipográfica de Buenos Aires.
   Petrona es VARIABLE: se le puede pedir cualquier peso entre 100 y 900.
   Usamos 600 en los títulos: ni finita ni pesada, con el trazo parejo.
   Nada de cursivas en toda la página.

   BORDES REDONDEADOS
     --radio-chico ...... botones y chapitas
     --radio ............ tarjetas, mapa, sello
     --radio-grande ..... fotos y bloques grandes

   Todo vive acá arriba, en :root. Si querés cambiar el look de TODA la
   página, tocá estos valores y no hace falta nada más.
   ========================================================================== */

:root {
  --fondo: #f4ede0;
  --tarjeta: #ffffff;
  --texto: #333333;
  --texto-suave: #57544d;
  --azul: #2b5b78;
  --azul-claro: #3c769a;
  --arena: #e9ddcb;
  --arena-suave: #ebe0cd;
  --celeste: #5e9ec4;
  --celeste-hover: #47829f;
  --linea: #ddd0b9;

  --sombra: 0 1px 2px rgba(51, 51, 51, 0.03), 0 12px 32px -16px rgba(51, 51, 51, 0.16);
  --sombra-alta: 0 2px 6px rgba(51, 51, 51, 0.05), 0 28px 56px -20px rgba(43, 91, 120, 0.28);

  --display: "Petrona", Georgia, "Times New Roman", serif;
  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.5rem;
  --t-xl: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
  --t-2xl: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);

  --ancho: 74rem;
  --radio-chico: 10px;
  --radio: 16px;
  --radio-grande: 24px;
}

/* La página está pensada en claro. Para quien usa el celular en modo oscuro
   armamos la misma paleta, apenas adaptada, para que no se encandile. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141613;
    --tarjeta: #1c1f1c;
    --texto: #ece8e1;
    --texto-suave: #a09c94;
    --azul: #7db4d4;
    --azul-claro: #9bc9e2;
    --arena: #2b2822;
    --arena-suave: #23211c;
    --celeste: #6fa9cd;
    --celeste-hover: #8bbfdd;
    --linea: #2e2f2a;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -16px rgba(0, 0, 0, 0.85);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.6), 0 28px 56px -20px rgba(0, 0, 0, 0.9);
  }
}

:root[data-theme="dark"] {
  --fondo: #141613;
  --tarjeta: #1c1f1c;
  --texto: #ece8e1;
  --texto-suave: #a09c94;
  --azul: #7db4d4;
  --azul-claro: #9bc9e2;
  --arena: #2b2822;
  --arena-suave: #23211c;
  --celeste: #6fa9cd;
  --celeste-hover: #8bbfdd;
  --linea: #2e2f2a;
}
:root[data-theme="light"] {
  --fondo: #f4ede0;
  --tarjeta: #ffffff;
  --texto: #333333;
  --texto-suave: #57544d;
  --azul: #2b5b78;
  --azul-claro: #3c769a;
  --arena: #e9ddcb;
  --arena-suave: #ebe0cd;
  --celeste: #5e9ec4;
  --celeste-hover: #47829f;
  --linea: #ddd0b9;
}

/* ═══════════════════════════════════════════════════════════════ base ═══ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Cuando alguien toca un link del menú, la sección se frena un poco más
   abajo para que la barra fija no le tape el título. */
:target,
section[id] {
  scroll-margin-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.7;
  /* Nada de "font-smoothing": adelgaza las letras y las hace ver lavadas.
     Dejamos que el sistema las dibuje como sabe. */
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--display);
  /* 600: el punto medio. Con 400 se ve endeble en tamaños grandes y con 700
     se empasta. Petrona mantiene el trazo parejo en todo el recorrido. */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--azul);
}

p {
  margin: 0;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 99;
  background: var(--azul);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radio);
  font-size: var(--t-sm);
}

/* Etiqueta chiquita en mayúsculas que abre cada sección */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--celeste);
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* La rayita del eyebrow se dibuja sola cuando la sección aparece */
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.visible .eyebrow::before,
.entra.eyebrow::before,
.portada .eyebrow::before {
  transform: scaleX(1);
}
.eyebrow--claro {
  color: var(--arena);
}
.cierre .eyebrow {
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════ botones ═══ */

.boton {
  display: inline-block;
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}
.boton:hover {
  transform: translateY(-2px);
}
.boton:active {
  transform: translateY(0);
}

/* El botón principal: celeste */
.boton--acento {
  background: var(--celeste);
  color: #fff;
}
.boton--acento:hover {
  background: var(--celeste-hover);
  box-shadow: 0 12px 26px -12px var(--celeste);
}

.boton--contorno,
.boton--fantasma-claro {
  border-color: var(--linea);
  color: var(--texto);
  background: var(--tarjeta);
}
.boton--contorno:hover,
.boton--fantasma-claro:hover {
  border-color: var(--azul);
  color: var(--azul);
}

.boton--tinta {
  background: var(--azul);
  color: #fff;
}
.boton--tinta:hover {
  background: var(--azul-claro);
}

/* Sobre el bloque azul del final */
.boton--claro {
  background: var(--celeste);
  color: #fff;
}
.boton--claro:hover {
  background: var(--celeste-hover);
}

.boton--fantasma {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.boton--fantasma:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.boton--linea {
  border-color: var(--linea);
  background: var(--tarjeta);
  padding: 0.62rem 1.2rem;
}
.boton--linea:hover {
  border-color: var(--celeste);
  color: var(--celeste);
}

.boton--grande {
  padding: 1.2rem 2.75rem;
  font-size: var(--t-base);
}

/* ══════════════════════════════════════════════════════════════ barra ═══ */

.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.35rem clamp(1.25rem, 5vw, 4rem);
  color: var(--texto);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}
/* Al bajar, la barra se pinta del mismo celeste del "pipí cucú" del título.
   Opaca de verdad: si se transparentara, el título de la portada y el mapa
   se verían por detrás y parecería que está todo encimado. */
.barra--solida {
  background: var(--celeste);
  border-bottom-color: transparent;
  padding-block: 0.85rem;
  box-shadow: 0 6px 24px -14px rgba(43, 91, 120, 0.85);
}

/* Sobre el celeste, todo el contenido de la barra pasa a blanco */
.barra--solida .marca__nombre {
  color: #fff;
}
.barra--solida .marca__bajada {
  color: rgba(255, 255, 255, 0.8);
}
.barra--solida .barra__nav a {
  color: rgba(255, 255, 255, 0.88);
}
.barra--solida .barra__nav a:hover,
.barra--solida .barra__nav a.activo {
  color: #fff;
}
.barra--solida .barra__nav a::after {
  background: #fff;
}
.barra--solida .boton--linea {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.barra--solida .boton--linea:hover {
  background: #fff;
  border-color: #fff;
  color: var(--azul);
}

.marca {
  text-decoration: none;
  display: grid;
  line-height: 1.15;
}
.marca__nombre {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--azul);
}
.marca__bajada {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.barra__nav {
  display: flex;
  gap: 2.5rem;
  margin-left: auto;
  font-size: var(--t-sm);
  font-weight: 500;
}
.barra__nav a {
  text-decoration: none;
  color: var(--texto-suave);
  padding-bottom: 3px;
  position: relative;
  transition: color 0.2s ease;
}
.barra__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.barra__nav a:hover,
.barra__nav a.activo {
  color: var(--texto);
}
.barra__nav a:hover::after,
.barra__nav a.activo::after {
  transform: scaleX(1);
  transform-origin: left;
}
.barra__nav a.activo {
  font-weight: 600;
}

@media (max-width: 56rem) {
  .barra__nav {
    display: none;
  }
  .barra .boton--linea {
    margin-left: auto;
  }
}

/* ════════════════════════════════════════════════════════════ portada ═══ */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* "safe center" centra, PERO si el contenido no entra deja de centrar y
     lo apoya arriba respetando el padding. Sin el "safe", cuando la pantalla
     es baja el contenido se desborda hacia arriba y el título se le mete
     abajo de la barra del menú. */
  justify-content: center;
  justify-content: safe center;
  background: var(--fondo);
  padding: clamp(7.5rem, 15vh, 11rem) clamp(1.25rem, 5vw, 4rem) 3rem;
  overflow: hidden;
  isolation: isolate;
}

/* Un halo de arena, tibio, atrás del título */
.portada__halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 65% 60% at 18% 38%,
    var(--arena) 0%,
    transparent 64%
  );
  opacity: 0.9;
  animation: entrarHalo 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes entrarHalo {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 0.9;
    transform: none;
  }
}

/* La portada en dos columnas: texto a la izquierda, foto a la derecha */
.portada__grid {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 62rem) {
  .portada__grid {
    grid-template-columns: 1fr;
  }
}

.portada__contenido {
  min-width: 0;
}

/* La foto principal de la portada */
.portada__foto {
  margin: 0;
  position: relative;
  border-radius: var(--radio-grande);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--arena-suave);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.05), 0 32px 60px -26px rgba(43, 91, 120, 0.4);
  /* El parallax: script.js va cambiando --parallax mientras scrolleás */
  translate: 0 calc(var(--parallax, 0px) * -1);
}
.portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
  animation: acercarFoto 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes acercarFoto {
  from {
    opacity: 0;
    transform: scale(1.16);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}
/* Un marquito de arena, corrido, que le da profundidad */
.portada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-grande);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
@media (max-width: 62rem) {
  .portada__foto {
    aspect-ratio: 16 / 10;
  }
}

/* La foto del frente es de 1024x768, así que la mostramos sin agrandarla
   de más: cuanto menos la estiremos, más nítida se ve. */
.portada__foto--frente {
  aspect-ratio: 4 / 3;
}
.portada__foto--frente img {
  object-position: center 58%;
  transform: none;
  animation-name: aparecerFoto;
}
@keyframes aparecerFoto {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.portada__titulo {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 2.25rem;
}
/* "pipí cucú" se distingue por el COLOR, no por la inclinación */
.portada__titulo em {
  font-style: normal;
  color: var(--celeste);
}

/* Cada línea del título sale de abajo, como una persiana que se abre */
.linea {
  display: block;
  overflow: hidden;
  /* Un poco de aire: la itálica tiene colas que se salen de la caja de la
     letra, y el "overflow: hidden" de la animación se las comería. */
  padding: 0.04em 0 0.16em;
}
.linea__i {
  display: block;
  transform: translateY(105%);
  animation: subirLinea 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes subirLinea {
  to {
    transform: translateY(0);
  }
}

.portada__bajada {
  max-width: 44ch;
  font-size: var(--t-md);
  color: var(--texto-suave);
  line-height: 1.8;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.75rem;
}

/* Aparición general con retardo: se usa con style="--d: 0.4s" */
.entra {
  opacity: 0;
  transform: translateY(18px);
  animation: entrar 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes entrar {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- los tres números de la portada --- */
.datos {
  width: 100%;
  max-width: var(--ancho);
  margin: clamp(3.5rem, 9vh, 6.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
  padding-top: 2.5rem;
}
.datos dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.datos dd {
  margin: 0;
}
.datos__valor {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
  margin: 0.6rem 0 0.4rem !important;
}
/* El "/10" y el "/5": chico y apagado, para que el número siga siendo
   el protagonista pero se entienda sobre cuánto es. */
.datos__escala {
  font-size: 0.42em;
  font-weight: 400;
  color: var(--texto-suave);
  letter-spacing: 0;
  margin-left: 0.12em;
}
.datos__pie {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* Flechita de "seguí bajando" */
.portada__flecha {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  translate: -50% 0;
  width: 1px;
  height: 3.5rem;
  background: var(--linea);
  overflow: hidden;
}
.portada__flecha span {
  position: absolute;
  inset: 0;
  background: var(--celeste);
  animation: bajar 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bajar {
  0% {
    transform: translateY(-100%);
  }
  55%,
  100% {
    transform: translateY(100%);
  }
}
@media (max-width: 46rem) {
  .portada__flecha {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════ secciones ═══ */

.seccion {
  padding: clamp(3rem, 5.5vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
}
.seccion > * {
  max-width: var(--ancho);
  margin-inline: auto;
}
/* Las secciones "papel" van en arena suave, para separar los bloques */
.seccion--papel {
  background: var(--arena-suave);
  border-block: 1px solid var(--linea);
}

/* El encabezado ocupa el mismo ancho que el contenido de abajo (por eso
   NO le ponemos un max-width propio: si no, queda desalineado con las
   tarjetas). El texto se angosta por dentro, no la caja.

   Además va en dos columnas —título a la izquierda, bajada a la derecha—
   para que ocupe la mitad de alto y la sección entre entera en pantalla. */
/* El encabezado va centrado en la página: etiqueta, título y bajada,
   uno debajo del otro y todos al medio. */
.encabezado {
  max-width: 50rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.encabezado .eyebrow {
  justify-content: center;
  margin-bottom: 1rem;
}
.encabezado h2 {
  font-size: var(--t-xl);
  max-width: 20ch;
  margin-inline: auto;
}
.encabezado__intro {
  margin: 1.1rem auto 0;
  color: var(--texto-suave);
  font-size: var(--t-base);
  line-height: 1.7;
  max-width: 56ch;
}

/* Cuando la bajada es la frase de un huésped en vez de un texto nuestro */
.encabezado__cita {
  margin: 1.35rem auto 0;
  max-width: 48ch;
}
.encabezado__cita p {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--texto-suave);
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 20, "WONK" 0;
}
.encabezado__cita p::before {
  content: "“";
  color: var(--celeste);
}
.encabezado__cita p::after {
  content: "”";
  color: var(--celeste);
}
.encabezado__cita cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--celeste);
}

/* ═════════════════════════════════════════════════════════════ fichas ═══ */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.15rem;
}

.ficha {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.15rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease,
    border-color 0.4s ease;
}
/* Línea terracota que se dibuja arriba al pasar el mouse */
.ficha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ficha:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
  border-color: color-mix(in srgb, var(--azul) 30%, var(--linea));
}
.ficha:hover::before {
  transform: scaleX(1);
}

.ficha__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ficha__numero {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--celeste);
}
/* La chapita de "Planta baja" / "Planta alta" */
.ficha__planta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--arena-suave);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* La lista de ambientes de cada departamento */
.ficha__ambientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.ficha__ambientes li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.5;
}
.ficha__ambientes li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--celeste);
}
/* El ítem que merece destacarse en cada ficha */
.ficha__ambientes .destacado {
  color: var(--azul);
  font-weight: 600;
}
.ficha__ambientes .destacado::before {
  background: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
.ficha__nombre {
  font-size: 1.25rem;
  line-height: 1.2;
}
.ficha__resumen {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: 1.75;
}

/* Dibujitos de camas: se ve de un vistazo qué hay en cada depto */
.camas {
  display: flex;
  align-items: flex-end;
  /* Pegados al borde derecho, en la misma columna que el detalle
     de camas que aparece justo abajo ("1 doble + 1 sofá cama"). */
  justify-content: flex-end;
  gap: 0.8rem;
  padding: 0.9rem 0 0.5rem;
  margin-top: auto;
}
.camas__icono {
  width: 48px;
  height: 29px;
  fill: none;
  stroke: var(--azul);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  transition: stroke 0.4s ease, opacity 0.4s ease;
}
.ficha:hover .camas__icono {
  stroke: var(--celeste);
  opacity: 1;
}
.camas__icono--simple {
  width: 29px;
}
.camas__icono--sofa {
  width: 39px;
}

.ficha__datos {
  margin: 0;
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
}
.ficha__datos > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
}
.ficha__datos > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ficha__datos dt {
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.ficha__datos dd {
  margin: 0;
  text-align: right;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════ galería ═══ */

/* La galería es una grilla de 6 columnas. Con eso podemos armar el ritmo
   2 · 3 · 2 · 3 · 2 : las filas de dos ocupan 3 columnas cada una y las de
   tres, 2 columnas cada una. Doce fotos entran justo. */
.galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.galeria__item {
  margin: 0;
  position: relative;
  grid-column: span 2; /* por defecto: fila de tres */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radio-grande);
  background: var(--arena-suave);
    box-shadow: var(--sombra);
  transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Las filas de dos: fotos 1-2, 6-7 y 11-12 */
.galeria__item:nth-child(1),
.galeria__item:nth-child(2),
.galeria__item:nth-child(6),
.galeria__item:nth-child(7),
.galeria__item:nth-child(11),
.galeria__item:nth-child(12) {
  grid-column: span 3;
  aspect-ratio: 16 / 10;
}
.galeria__item:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-4px);
}

@media (max-width: 60rem) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
  .galeria__item,
  .galeria__item:nth-child(1),
  .galeria__item:nth-child(2),
  .galeria__item:nth-child(6),
  .galeria__item:nth-child(7),
  .galeria__item:nth-child(11),
  .galeria__item:nth-child(12) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 34rem) {
  .galeria {
    grid-template-columns: 1fr;
  }
}
.galeria__item img {
  width: 100%;
  height: 100%;
  /* Igual que en el collage: recorta el cartelito de la fecha */
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.galeria__item:hover img,
.galeria__item:focus-visible img {
  transform: scale(1.16);
}



/* ════════════════════════════════════════════════════════════ incluye ═══ */

.incluye {
  list-style: none;
  /* "0 auto", no "0": con margin 0 pierde el centrado que le da .seccion > *
     y queda corrido a la izquierda respecto del título. */
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  column-gap: clamp(2rem, 6vw, 5rem);
  border-top: 1px solid var(--linea);
}
.incluye li {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 0 0.95rem 2.35rem;
  border-bottom: 1px solid var(--linea);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--texto-suave);
  position: relative;
}
/* La tilde de "esto ya está incluido" */
.incluye li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.55rem;
  width: 13px;
  height: 7px;
  border-left: 1.8px solid var(--celeste);
  border-bottom: 1.8px solid var(--celeste);
  transform: rotate(-45deg);
}
.incluye span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--azul);
}

/* ═════════════════════════════════════════════════════════════ reglas ═══ */

.reglas {
  margin: 0 auto; /* mismo motivo que .incluye: si no, se descentra */
  border-top: 1px solid var(--linea);
}
.reglas > div {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: 0.5rem 3rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linea);
}
.reglas dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--celeste);
  padding-top: 0.4rem;
}
.reglas dd {
  margin: 0;
  color: var(--texto-suave);
  max-width: 56ch;
}
@media (max-width: 44rem) {
  .reglas > div {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════ opiniones ═══ */

.opiniones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  /* Sin max-width propio: tiene que medir lo mismo que el encabezado */
}
@media (max-width: 56rem) {
  .opiniones {
    grid-template-columns: 1fr;
  }
}

/* Los puntajes van en dos columnas: ocupan la mitad de alto */
.puntajes {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 34rem) {
  .puntajes {
    grid-template-columns: 1fr;
  }
}
.puntajes > div {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.puntajes dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.puntajes dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.puntajes > div::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  background: var(--linea);
  border-radius: 2px;
}
.puntajes .barra-relleno {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--azul);
  transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}

/* El sello con el 9,8 */
.opiniones__sello {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.25rem 1.15rem;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.opiniones__sello:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.opiniones__numero {
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.opiniones__escala {
  font-size: 0.38em;
  font-weight: 400;
  color: var(--texto-suave);
  margin-left: 0.1em;
}
.opiniones__etiqueta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--celeste);
  margin-top: 0.35rem;
}
.opiniones__detalle {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--texto-suave);
  margin-top: 0.5rem;
  max-width: 20ch;
  margin-inline: auto;
}
.opiniones__sello .boton {
  margin-top: 1.1rem;
  padding: 0.7rem 1.1rem;
  font-size: var(--t-xs);
}

/* El carrusel de comentarios va a lo ancho, no encajonado */
.carrusel {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════ carrusel ═══ */

.carrusel {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--linea);
  padding-top: clamp(0.9rem, 2vw, 1.25rem);
}
.carrusel[hidden] {
  display: none;
}

/* La ventana desborda a propósito hacia los costados: la cinta entra por un
   lado y sale por el otro, sin bordes visibles. */
.carrusel__ventana {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(clamp(1.25rem, 5vw, 4rem) * -1);
  padding-block: 0.85rem;
  /* Los extremos se desvanecen, así las tarjetas no aparecen ni desaparecen
     de golpe contra el borde de la pantalla. */
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}

/* La cinta se desplaza de verdad (lo maneja script.js), no con una
   animación de CSS. Así las flechas pueden empujarla. Las tarjetas están
   duplicadas: al pasar la mitad se vuelve al principio sin que se note. */
.carrusel__riel {
  display: flex;
  align-items: stretch;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  width: max-content;
}

.carrusel__ventana::-webkit-scrollbar {
  display: none;
}

.carrusel__slide {
  flex: 0 0 min(30rem, 78vw);
  min-width: 0;
  display: flex;
}

/* Las que no están activas se ven más chicas y apagadas */
.opinion {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.1rem, 2vw, 1.45rem);
  box-shadow: var(--sombra);
  width: 100%;
  transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.opinion:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-4px);
}

/* La chapita de arriba: Booking / Google + el puntaje */
.opinion__sello {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.opinion__fuente {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--celeste);
}
.opinion__puntaje {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--azul);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-variant-numeric: tabular-nums;
}

.opinion__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--azul);
}

.opinion blockquote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  /* Texto bien oscuro: el gris claro era lo que lo hacía ver "de mala
     calidad". El contraste alto es lo que da sensación de nitidez. */
  color: var(--texto);
  text-wrap: pretty;

  /* Los comentarios largos se cortan a 7 renglones para que ninguna tarjeta
     se salga de la pantalla. El botón "Leer completa" los despliega. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.opinion.abierta blockquote {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.opinion blockquote::before {
  content: "“";
  color: var(--celeste);
  font-family: var(--display);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.15em;
  margin-right: 0.1em;
}
.opinion blockquote::after {
  content: "”";
  color: var(--celeste);
  font-family: var(--display);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-left: 0.05em;
}

.opinion figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
/* El circulito con la inicial del nombre */
.opinion__inicial {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--arena);
  color: var(--azul);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
}
.opinion__quien {
  display: grid;
  line-height: 1.35;
}
.opinion__quien strong {
  font-weight: 600;
  color: var(--texto);
}
.opinion__quien span {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}





/* ══════════════════════════════════════════════════════════ ubicación ═══ */

.ubicacion {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 5.5rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .ubicacion {
    grid-template-columns: 1fr;
  }
}

.ubicacion h2 {
  font-size: var(--t-xl);
}
/* Acá el intro no está adentro de un .encabezado, así que le devolvemos
   su separación de arriba */
.ubicacion__texto .encabezado__intro {
  margin-top: 1.25rem;
}

.direccion {
  font-size: var(--t-md);
  line-height: 2;
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--celeste);
}
/* Las distancias caminando, en filas con el número destacado */
.distancias {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
  max-width: 26rem;
}
.distancias li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.distancias span {
  flex: none;
  width: 4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

.ubicacion__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --- el mapa --- */
.mapa {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
  /* position + z-index encierran al mapa en su propia "capa".
     Sin esto, Leaflet dibuja sus paneles con z-index altísimos (hasta 700)
     que compiten con el resto de la página y el mapa termina tapando la
     barra de arriba al scrollear. */
  position: relative;
  z-index: 0;
}

.mapa__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--linea);
  background: var(--tarjeta);
}
.mapa__capas {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--arena-suave);
  border-radius: 999px;
}
.mapa__capa,
.mapa__volver {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mapa__capa:hover,
.mapa__volver:hover {
  color: var(--texto);
}
.mapa__capa.activo {
  background: var(--azul);
  color: #fff;
}
.mapa__volver[hidden] {
  display: none;
}

.mapa__lienzo {
  width: 100%;
  aspect-ratio: 5 / 4;
  /* Techo de altura para que la sección entera entre en la pantalla */
  max-height: min(19rem, 36vh);
  background: var(--arena-suave);
}
@media (max-width: 56rem) {
  .mapa__lienzo {
    aspect-ratio: 4 / 3;
    max-height: 20rem;
  }
}

.mapa__cerca {
  padding: 1.1rem 1.1rem 1.2rem;
  border-top: 1px solid var(--linea);
}
.mapa__cerca-titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.85rem;
}
.cercanias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Cada chapita es una categoría: bolita de color, nombre y cuántos hay */
.cercanias button {
  font-family: var(--ui);
  font-size: var(--t-sm);
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}
.cercanias button:hover {
  border-color: var(--color, var(--celeste));
  transform: translateY(-2px);
}
.cercanias .bolita {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--color, var(--celeste));
}
/* Cuando está elegida, la chapita se pinta del color de su categoría */
.cercanias button.activo {
  background: var(--color, var(--azul));
  border-color: var(--color, var(--azul));
  color: #fff;
}
.cercanias button.activo .bolita {
  background: #fff;
}
.cercanias .dist {
  min-width: 1.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: var(--arena-suave);
  font-size: var(--t-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cercanias button.activo .dist {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* El "&" de Archivo es muy cerrado y a tamaño chico se confunde con una
   "e". Lo dibujamos con una tipografía de ampersand clásico, que es el que
   todo el mundo reconoce. Los nombres de los locales quedan intactos. */
.amp {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  padding-inline: 0.06em;
}

/* Los puntitos de los lugares en el mapa */
.punto__bola {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(51, 51, 51, 0.4);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.leaflet-marker-icon:hover .punto__bola {
  transform: scale(1.35);
}

/* El recuadro que se abre al elegir una categoría */
.detalle {
  margin-top: 0.85rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--color, var(--celeste));
  border-radius: var(--radio-chico);
  background: var(--fondo);
  overflow: hidden;
  animation: abrirDetalle 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.detalle[hidden] {
  display: none;
}
@keyframes abrirDetalle {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.detalle__titulo {
  padding: 0.6rem 0.85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color, var(--celeste));
  border-bottom: 1px solid var(--linea);
}

.detalle__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detalle__lista li + li {
  border-top: 1px solid var(--linea);
}
.detalle__lista button {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0.85rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: var(--t-sm);
  color: var(--texto);
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.detalle__lista button:hover {
  background: var(--arena-suave);
}
.detalle__lista button.activo {
  background: var(--color, var(--celeste));
  color: #fff;
}
.detalle__nombre {
  min-width: 0;
}
.detalle__dist {
  flex: none;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}
.detalle__lista button.activo .detalle__dist {
  color: rgba(255, 255, 255, 0.85);
}

/* Los globitos que salen al tocar un lugar */
.leaflet-popup-content-wrapper {
  background: var(--tarjeta) !important;
  color: var(--texto) !important;
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra-alta) !important;
  border: 1px solid var(--linea) !important;
}
/* Sin márgenes: la foto del globito llega hasta el borde.
   OJO: el ancho NO se fuerza acá. Leaflet mide el contenido para calcular
   dónde centrar el globito sobre el marcador; si le pisamos el ancho con
   un !important, mide mal y el globito queda corrido. El ancho fijo va
   adentro, en .globo. */
.leaflet-popup-content {
  margin: 0 !important;
  font-family: var(--ui) !important;
  line-height: 1.4 !important;
}
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  overflow: hidden;
}

/* El globito: foto arriba, nombre y dirección abajo */
.globo {
  display: grid;
  width: 172px;
  text-align: center;
}

/* El globito de los lugares cercanos: solo texto, sin foto. Necesita su
   propio relleno porque a .leaflet-popup-content le sacamos los márgenes
   para que la foto del otro globito llegue hasta el borde. */
.globo--simple {
  width: auto;
  min-width: 8rem;
  max-width: 13rem;
  padding: 0.65rem 0.95rem;
  justify-items: center;
}
.globo--simple .globo__nombre {
  margin-top: 0;
  padding: 0;
  white-space: normal;
  line-height: 1.15;
}
.globo--simple .globo__dato {
  padding: 0.25rem 0 0;
  font-size: 0.5625rem;
}
.globo__foto {
  width: 100%;
  height: 78px;
  object-fit: cover;
  object-position: center 62%;
}
.globo .globo__nombre {
  margin-top: 0.5rem;
  padding-inline: 0.6rem;
  font-size: 1rem;
  white-space: nowrap;
}
.globo .globo__dato {
  padding: 0.1rem 0.6rem 0.6rem;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
}
.leaflet-popup-tip {
  background: var(--tarjeta) !important;
  border: 1px solid var(--linea) !important;
}
.leaflet-popup-close-button {
  color: var(--texto-suave) !important;
}
.globo__nombre {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--azul);
  display: block;
}
.globo__dato {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.mapa__sinjs,
.mapa__pie {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.mapa__credito {
  opacity: 0.7;
  letter-spacing: 0.06em;
}

.leaflet-container {
  font-family: var(--ui) !important;
  background: var(--arena-suave) !important;
}
.leaflet-control-zoom a {
  color: var(--texto) !important;
  background: var(--tarjeta) !important;
  border-color: var(--linea) !important;
  font-weight: 400 !important;
}
.leaflet-control-zoom a:hover {
  background: var(--arena-suave) !important;
}
.leaflet-control-attribution {
  display: none !important; /* la atribución la mostramos abajo, en .mapa__pie */
}

/* La casita del departamento en el mapa */
.casa {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.casa__cuerpo {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--azul);
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(43, 91, 120, 0.5);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.casa__cuerpo svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leaflet-marker-icon:hover .casa__cuerpo {
  transform: scale(1.12);
}
.casa__onda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--azul);
  animation: latido 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Los puntitos de los lugares cercanos */
.pin {
  position: relative;
}
.pin__punto {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--celeste);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(196, 106, 74, 0.5);
}
.pin__punto--chico {
  background: var(--azul);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(46, 93, 98, 0.4);
}
.pin__onda {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1.5px solid var(--celeste);
  animation: latido 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes latido {
  0% {
    transform: scale(0.55);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ═════════════════════════════════════════════════════════════ franja ═══ */
/* La franja a todo el ancho con una opinión sobre la foto del patio.
   Corta el ritmo de la página: es el recurso que usan los hoteles boutique
   para que no sea una sucesión de bloques iguales. */

.franja {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem);
  background: var(--azul);
  overflow: hidden;
  isolation: isolate;
}
/* Un halo apenas más claro detrás del texto, para que el azul no sea plano */
.franja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 60% 80% at 50% 40%,
    rgba(255, 255, 255, 0.09),
    transparent 70%
  );
}
/* Las comillas gigantes de fondo, como marca de agua */
.franja::after {
  content: "\201C";
  position: absolute;
  top: -0.28em;
  left: 50%;
  translate: -50% 0;
  z-index: -1;
  font-family: var(--display);
  font-size: clamp(12rem, 26vw, 22rem);
  line-height: 1;
  color: #fff;
  opacity: 0.07;
  pointer-events: none;
}

.franja__contenido {
  max-width: 44rem;
  text-align: center;
}
.franja .eyebrow {
  justify-content: center;
  margin-bottom: 0.9rem;
}

.franja__estrellas {
  font-size: 1rem;
  letter-spacing: 0.35em;
  color: var(--arena);
  margin-bottom: 1.1rem;
}

.franja__cita {
  margin: 0;
  color: #fff;
}
/* Acá usamos Archivo (la de palo seco) y no Fraunces: en tamaño grande la
   "f" y la "j" de Fraunces tienen colas muy marcadas que llaman demasiado
   la atención. Además el contraste con los títulos con serifa le da aire
   editorial: título con serifa, cita sin serifa. */
.franja__cita p {
  font-family: var(--ui);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.3rem, 0.8rem + 1.9vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.franja__firma {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  margin-top: 1.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.franja__firma cite {
  font-style: normal;
  font-weight: 600;
  color: #fff;
}
.franja__firma span {
  color: var(--arena);
  opacity: 0.85;
}

/* ═════════════════════════════════════════════════════════════ cierre ═══ */
/* El único bloque de color pleno de la página: azul petróleo. */

.cierre {
  position: relative;
  background: var(--azul);
  color: #fff;
  padding: clamp(6rem, 14vw, 10rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.cierre__contenido {
  max-width: 48rem;
  margin-inline: auto;
}
.cierre__titulo {
  font-size: var(--t-xl);
  color: #fff;
}
.cierre__texto {
  max-width: 46ch;
  margin: 2rem auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--t-md);
  line-height: 1.8;
}
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 3rem;
}

/* ════════════════════════════════════════════════════════════════ pie ═══ */

.pie {
  background: var(--arena-suave);
  color: var(--texto-suave);
  border-top: 1px solid var(--linea);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) 2rem;
  font-size: var(--t-sm);
}
.pie__grid {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}
.pie__col {
  display: grid;
  gap: 0.3rem;
  align-content: start;
}
.pie__marca {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--azul);
  margin-bottom: 0.4rem;
}
.pie__titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.5rem;
}
.pie__linea strong {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--azul);
  font-weight: 600;
}
.pie__link {
  color: var(--texto-suave);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pie__link:hover {
  color: var(--azul);
  border-bottom-color: var(--celeste);
}

.pie__legal {
  max-width: var(--ancho);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}


/* ══════════════════════════════════════════ accesos rápidos flotantes ═══ */
/* Los cuatro botones redondos que quedan fijos abajo a la derecha. */

.flotante {
  position: fixed;
  right: clamp(0.85rem, 2vw, 1.6rem);
  bottom: clamp(0.85rem, 2vw, 1.6rem);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

/* La lista arranca escondida. En la computadora se despliega al pasar el
   mouse por la botonera; en el celular, con la clase .abierto que pone el
   JavaScript en el primer toque. */
.flotante__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(12px);
  /* pointer-events apaga los clics cuando está cerrada, y cambia de golpe:
     así nunca queda un botón invisible que igual se pueda tocar. */
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Solo en dispositivos con mouse de verdad */
@media (hover: hover) {
  .flotante:hover .flotante__lista,
  .flotante:focus-within .flotante__lista {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* En el celular lo maneja el JavaScript */
.flotante.abierto .flotante__lista {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Cada botón entra escalonado, de abajo hacia arriba */
.flotante:hover .flotante__boton,
.flotante.abierto .flotante__boton {
  animation: entrarFlotante 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.flotante__lista .flotante__boton:nth-child(3) {
  animation-delay: 0.02s;
}
.flotante__lista .flotante__boton:nth-child(2) {
  animation-delay: 0.08s;
}
.flotante__lista .flotante__boton:nth-child(1) {
  animation-delay: 0.14s;
}
@keyframes entrarFlotante {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.flotante__boton {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* El de WhatsApp, que siempre se ve */
.flotante__principal {
  animation: entrarFlotante 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}
/* Una onda que late alrededor, para que se note que está ahí */
.flotante__principal .flotante__logo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: latidoWa 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes latidoWa {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  60%,
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.flotante:hover .flotante__principal .flotante__logo::after,
.flotante.abierto .flotante__principal .flotante__logo::after {
  animation: none;
}

/* El nombre asoma por la izquierda al pasar el mouse */
.flotante__nombre {
  order: -1;
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.flotante__boton:hover .flotante__nombre,
.flotante__boton:focus-visible .flotante__nombre {
  opacity: 1;
  transform: none;
}

.flotante__logo {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  box-shadow: 0 8px 20px -8px rgba(51, 51, 51, 0.5);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.flotante__logo svg {
  width: 1.5rem;
  height: 1.5rem;
}
.flotante__boton:hover .flotante__logo,
.flotante__boton:focus-visible .flotante__logo {
  transform: scale(1.1);
  box-shadow: 0 12px 26px -8px rgba(51, 51, 51, 0.55);
}

/* Cada uno con el color de su marca */
.flotante__logo--wa {
  background: #25d366;
  border-color: #25d366;
}
.flotante__logo--booking {
  background: #003580;
  border-color: #003580;
}
.flotante__logo--ruta {
  background: #4285f4;
  border-color: #4285f4;
}
.flotante__logo--maps {
  background: #fff;
  border-color: var(--linea);
}
.flotante__logo--booking svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Texto solo para lectores de pantalla */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* En el celular: más chicos y sin las etiquetas */
@media (max-width: 40rem) {
  .flotante,
  .flotante__lista {
    gap: 0.5rem;
  }
  .flotante__logo {
    width: 2.75rem;
    height: 2.75rem;
  }
  .flotante__logo svg {
    width: 1.35rem;
    height: 1.35rem;
  }
  .flotante__nombre {
    display: none;
  }
}


/* ═══════════════════════════════════════════ menú desplegable ═══════════ */

.desple {
  position: relative;
}
.desple__abrir {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.desple__flecha {
  width: 10px;
  height: 7px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.desple:hover .desple__flecha,
.desple:focus-within .desple__flecha {
  transform: rotate(180deg);
}

/* El panel que baja. Aparece al pasar el mouse por el menú. */
.desple__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: 0.85rem;
  min-width: 16rem;
  display: grid;
  padding: 0.4rem;
  border-radius: var(--radio);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  box-shadow: 0 18px 40px -18px rgba(51, 51, 51, 0.45);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Un puente invisible para que el mouse pueda bajar sin que se cierre */
.desple__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9rem;
  height: 0.9rem;
}
.desple:hover .desple__menu,
.desple:focus-within .desple__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.desple__menu a {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radio-chico);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.desple__menu a:hover {
  background: var(--arena-suave);
}
.desple__menu strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--azul);
}
.desple__menu span {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
/* Sobre la barra celeste, el panel sigue siendo claro */
.barra--solida .desple__menu strong {
  color: var(--azul);
}
.barra--solida .desple__menu span {
  color: var(--texto-suave);
}

@media (max-width: 56rem) {
  .desple__menu {
    display: none;
  }
}

/* ═══════════════════════════════════ página de cada departamento ════════ */

.depto {
  padding-top: clamp(6rem, 12vh, 9rem);
}
.depto__volver {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color 0.2s ease;
}
.depto__volver:hover {
  color: var(--azul);
}

.depto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 62rem) {
  .depto__grid {
    grid-template-columns: 1fr;
  }
}

.depto__titulo {
  font-size: var(--t-xl);
  margin-bottom: 0.25rem;
}
.depto__ambientes {
  margin-top: 1.5rem;
}
.depto__datos {
  margin-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.depto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.depto__portada {
  margin: 0;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--arena-suave);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.05), 0 32px 60px -26px rgba(43, 91, 120, 0.4);
  /* Sin proporción forzada: la foto entra entera, no recortada */
  max-height: 34rem;
  display: grid;
  place-items: center;
}
.depto__portada img {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}

/* ══════════════════════════ la tira de fotos que se mueve sola ══════════ */

.tira__ventana {
  overflow-x: auto;
  /* Sin scroll-behavior: smooth acá. Pelearía con el movimiento cuadro a
     cuadro del carrusel. Las flechas piden el suavizado por su cuenta. */
  margin-inline: calc(clamp(1.25rem, 5vw, 4rem) * -1);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tira__ventana::-webkit-scrollbar {
  display: none;
}
.tira__riel {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.tira__foto {
  flex: 0 0 auto;
  /* Alto fijo y ancho libre: cada foto conserva SU proporción. Antes las
     forzábamos a 4:3 y el recorte se comía justo lo que hay que mostrar
     —la cama, la mesada—. Así no se corta nada. */
  height: clamp(12rem, 30vh, 19rem);
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--arena-suave);
  box-shadow: var(--sombra);
}
.tira__foto img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .tira__riel {
    animation: none;
  }
  .tira__ventana {
    overflow-x: auto;
  }
}

/* ═══════════════════════════════════════════════ aparecer al scrollear ═══ */

.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.revelar.visible {
  opacity: 1;
  transform: none;
}

/* Si la persona pidió menos animaciones en su sistema, las apagamos todas */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .revelar,
  .entra,
  .linea__i {
    opacity: 1 !important;
    transform: none !important;
  }
  .eyebrow::before {
    transform: scaleX(1) !important;
  }
  .portada__foto {
    translate: none !important;
  }
  .portada__grilla {
    opacity: 0.85 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════ flechas de las cintas ══════════════════ */
/* Van ENCIMA de las fotos, a los costados. Aparecen al pasar el mouse por
   la cinta y se esconden cuando el mouse se va. En pantallas táctiles, donde
   no hay mouse, quedan siempre visibles. */

.tira,
.carrusel {
  position: relative;
}

.cinta__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--azul);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(51, 51, 51, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.cinta__flecha svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.cinta__flecha--antes {
  left: 0.6rem;
}
.cinta__flecha--despues {
  right: 0.6rem;
}

/* Aparecen al pasar el mouse por la cinta */
.tira:hover .cinta__flecha,
.tira:focus-within .cinta__flecha,
.carrusel:hover .cinta__flecha,
.carrusel:focus-within .cinta__flecha {
  opacity: 1;
}
.cinta__flecha:hover {
  background: var(--celeste);
  color: #fff;
  border-color: var(--celeste);
  transform: scale(1.08);
}
.cinta__flecha:focus-visible {
  opacity: 1;
}

/* En el celular se ven siempre, un poco más chicas.
   Va por ANCHO de pantalla y no por "(hover: none)": varios navegadores
   de celular contestan que sí tienen mouse, y entonces las flechas
   quedaban invisibles justo donde más hacen falta. */
@media (max-width: 48rem), (hover: none) {
  .cinta__flecha {
    opacity: 0.92;
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* ═════════════════════════ las fichas llevan a su página ════════════════ */
/* El título es el link, pero la zona sensible es la tarjeta ENTERA: el
   ::after estirado la cubre toda. Así se puede tocar en cualquier lado y
   el lector de pantalla sigue anunciando un solo enlace con su nombre. */

.ficha__link {
  text-decoration: none;
  color: inherit;
}
.ficha__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.ficha:hover {
  cursor: pointer;
}
.ficha:hover .ficha__nombre,
.ficha:focus-within .ficha__nombre {
  color: var(--celeste);
}

/* El pie que invita a entrar */
.ficha__ver {
  margin-top: 1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--celeste);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ficha:hover .ficha__ver,
.ficha:focus-within .ficha__ver {
  opacity: 1;
  transform: none;
}
/* En celular no hay mouse: se ve siempre */
@media (hover: none) {
  .ficha__ver {
    opacity: 1;
    transform: none;
  }
}
.ficha__link:focus-visible::after {
  outline: 2px solid var(--celeste);
  outline-offset: 4px;
}

/* ═════════════════════════════════════════════ versión celular ═══ */
/*
   Todo lo de acá abajo vale SOLO en pantallas chicas (hasta 34rem, o sea
   un celular parado). En la computadora no cambia nada.

   El problema que resuelve: la portada medía 17 pantallas de scroll y la
   galería sola se llevaba 5, porque las 15 fotos se apilaban una debajo
   de la otra.
*/
@media (max-width: 34rem) {
  /* --- 1. La galería pasa a ser una cinta que se desliza con el dedo ---
     Mismo truco que el carrusel de opiniones: la cinta se sale por los
     costados de la pantalla, así se ve que hay más fotos para el lado. */
  .galeria {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    /* el "imán": al soltar el dedo, la foto se acomoda sola */
    scroll-snap-type: x mandatory;
    margin-inline: calc(clamp(1.25rem, 5vw, 4rem) * -1);
    padding-inline: clamp(1.25rem, 5vw, 4rem);
    padding-block: 0.25rem;
    /* la barra de scroll se esconde: ya se entiende que se desliza */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .galeria::-webkit-scrollbar {
    display: none;
  }
  .galeria__item,
  .galeria__item:nth-child(1),
  .galeria__item:nth-child(2),
  .galeria__item:nth-child(6),
  .galeria__item:nth-child(7),
  .galeria__item:nth-child(11),
  .galeria__item:nth-child(12) {
    flex: 0 0 78vw;
    grid-column: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }
}

/* --- 2. El botón de volver arriba ---------------------------------
   Va abajo a la IZQUIERDA para no pelearse con el botón de WhatsApp,
   que vive abajo a la derecha. Aparece recién cuando bajaste bastante:
   antes de eso no tiene sentido y tapa contenido. */
.arriba {
  position: fixed;
  left: clamp(0.85rem, 2vw, 1.6rem);
  bottom: clamp(0.85rem, 2vw, 1.6rem);
  z-index: 800;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--azul);
  box-shadow: var(--sombra);
  cursor: pointer;
  /* escondido hasta que el JavaScript le ponga la clase .visible */
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.arriba.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.arriba svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arriba:hover {
  border-color: var(--celeste);
  color: var(--celeste);
}
/* Si alguien configuró el sistema para no ver animaciones, se lo respeta */
@media (prefers-reduced-motion: reduce) {
  .arriba {
    transition: none;
  }
}

/* --- 3. Secciones que se pliegan en el celular --------------------
   El <details> del HTML es un desplegable que trae el navegador de
   fábrica: no necesita JavaScript para abrirse, el teclado lo maneja
   solo y los lectores de pantalla lo anuncian bien. */
.plegable__boton {
  display: none; /* en la computadora no se ve: la sección va abierta */
}
.plegable > summary {
  list-style: none;
}
.plegable > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 34rem) {
  .plegable__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--tarjeta);
    color: var(--azul);
    font-family: var(--ui);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .plegable__flecha {
    width: 0.75rem;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
  }
  /* al abrirse, la flechita gira para arriba */
  .plegable[open] .plegable__flecha {
    transform: rotate(180deg);
  }
  .plegable[open] .plegable__boton {
    margin-bottom: 0.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plegable__flecha {
    transition: none;
  }
}

/* --- 4. La reseña destacada no se muestra en el celular -----------
   En pantalla grande es una franja linda que corta el ritmo entre
   secciones. En el celular ocupa casi media pantalla de scroll y lo
   mismo ya está más abajo, en la sección de opiniones completa. */
@media (max-width: 34rem) {
  .franja {
    display: none;
  }
}

/* --- 5. Todas las fotos del mismo tamaño -------------------------
   Antes cada foto conservaba su proporción: misma altura y ancho
   libre. Quedaba desparejo —unas anchísimas, otras angostas— sobre
   todo mezclando horizontales y verticales.

   Ahora todas entran en el mismo recuadro 4:3 y se recorta lo que
   sobra. Vale igual en la computadora y en el celular.

   Revisé las 40 fotos recortadas así: en 38 el centro muestra lo que
   hay que mostrar. Las 2 que no, se corrigen más abajo a mano. */

/* --- el carrusel de las páginas de departamento --- */
.tira__foto {
  width: clamp(15rem, 72vw, 22rem);
  height: auto;
  aspect-ratio: 4 / 3;
}
.tira__foto img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- la galería de la portada, en el celular --- */
@media (max-width: 34rem) {
  .galeria {
    align-items: stretch;
  }
  .galeria__item,
  .galeria__item:nth-child(1),
  .galeria__item:nth-child(2),
  .galeria__item:nth-child(6),
  .galeria__item:nth-child(7),
  .galeria__item:nth-child(11),
  .galeria__item:nth-child(12) {
    flex: 0 0 78vw;
    grid-column: auto;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .galeria__item img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* --- las dos que no se centran bien ---
   Las dos son verticales con la cama abajo: centradas mostraban el
   techo, el aire acondicionado y la cortina, y dejaban la cama afuera.
   Las corremos hacia abajo. Vale en todos lados donde aparezcan. */
img[src$="d2-living-1000.jpg"],
img[src$="d2-living-500.jpg"] {
  object-position: center 85%;
}
img[src$="d1-dormitorio-toallas-1000.jpg"],
img[src$="d1-dormitorio-toallas-500.jpg"] {
  object-position: center 72%;
}