/* Navegación fija */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--fondo-rgb) / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.nav__interior { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav__marca { font-family: var(--serif); font-size: 23px; text-decoration: none; color: var(--texto); }
.nav__marca span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto-tenue); display: block; margin-top: -4px; }
.nav__links { display: none; gap: 26px; list-style: none; }
.nav__links a { color: var(--texto-suave); text-decoration: none; font-size: 14.5px; }
.nav__links a:hover { color: var(--acento-texto); }
.nav__toggle {
  background: none; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 8px 12px; cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--texto);
}
.nav__panel { display: none; border-top: 1px solid var(--borde); padding: 10px 0 16px; }
.nav__panel[data-abierto="true"] { display: block; }
.nav__panel ul { list-style: none; display: grid; gap: 2px; }
.nav__panel a { display: block; padding: 11px 4px; color: var(--texto); text-decoration: none; }

@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__panel { display: none !important; }
}

/* Switch de mundos: vive en la nav de los dos mundos y no se esconde nunca,
   tampoco en pantallas chicas. */
.nav__interior { gap: 12px; }
.mundos {
  position: relative;
  display: inline-flex; gap: 2px; padding: 3px; margin-right: auto;
  border: 1px solid var(--borde); border-radius: 99px;
}
.mundos a {
  position: relative; z-index: 1;
  padding: 5px 13px; border-radius: 99px; text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-suave);
  transition: background 0.15s, color 0.15s;
}
.mundos a:hover { color: var(--texto); background: var(--fondo-hundido); }
.mundos a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); }
.mundos a[aria-current="page"]:hover { background: var(--acento); color: var(--sobre-acento); }

/* El fondo del mundo activo es este <span> y no el background del <a>: un
   background no se puede deslizar de un elemento al otro, y este es el mismo
   que aterriza desde la portada y el que se desliza al cambiar de mundo.
   Hasta que js/movimiento.js lo coloca queda invisible y manda el background
   del <a> de arriba, así que sin JS la pastilla se ve igual. */
.mundos__indicador {
  position: absolute; top: 3px; left: 3px; height: 26px; width: 60px;
  border-radius: 99px; background: var(--acento);
  opacity: 0; z-index: 0;
}
.mundos[data-listo="true"] .mundos__indicador { opacity: 1; }
.mundos[data-listo="true"] a[aria-current="page"],
.mundos[data-listo="true"] a[aria-current="page"]:hover { background: transparent; }

/* Tira de cruce: el puente de un mundo al otro, al pie de cada uno. */
.cruce {
  display: grid; gap: 6px; padding: 28px; text-decoration: none;
  border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); background: var(--fondo);
  transition: border-color 0.15s;
}
.cruce:hover, .cruce:focus-visible { border-color: var(--acento); color: var(--texto); }
.cruce:hover .m-flecha, .cruce:focus-visible .m-flecha { transform: translateX(4px); }
.cruce__titulo { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.cruce__texto { color: var(--texto-suave); max-width: 52ch; }
.cruce__pie { font-family: var(--mono); font-size: 13px; color: var(--acento-texto); margin-top: 6px; }

@media (max-width: 519px) {
  .nav__marca { font-size: 19px; }
  .mundos a { padding: 5px 10px; font-size: 10.5px; }
}

/* Hero */
.hero { padding: 56px 0 68px; }
.hero__frase { color: var(--texto-suave); font-size: 18px; max-width: 46ch; margin: 18px 0 30px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__datos { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px;
  padding-top: 22px; border-top: 1px solid var(--borde); }

/* Hueco de foto: proporción fija para que la foto real entre sin mover el layout */
.foto {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radio);
  background: linear-gradient(150deg, var(--fondo-hundido), rgba(194, 84, 47, 0.14));
  border: 1px solid var(--borde); color: var(--texto-tenue);
}
.foto--ancha { aspect-ratio: 16 / 9; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto__rotulo { font-family: var(--mono); font-size: 11.5px; }

/* La capa que se mueve más lento que el scroll. Es la que va a llevar la foto
   cuando haya fotos: hoy lleva el rótulo del hueco y hace exactamente el mismo
   recorrido, así que el día que entre la imagen no hay nada que ajustar. Va un
   poco más alta que el marco para que el desplazamiento no descubra el borde. */
.foto__capa {
  position: absolute; left: 0; right: 0; top: -24px; bottom: -24px;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}

/* Footer */
.pie { background: var(--texto); color: rgb(var(--fondo-rgb) / 0.72); padding: 48px 0 34px; }
.pie a { color: var(--fondo); }
.pie__grilla { display: grid; gap: 26px; }
.pie__legal { margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgb(var(--fondo-rgb) / 0.16); font-size: 13px; }

@media (min-width: 720px) {
  .pie__grilla { grid-template-columns: repeat(3, 1fr); }
}

/* Habitaciones */
.habs { display: grid; gap: 34px; }
.hab { display: grid; gap: 18px; }
.hab__cuerpo { display: grid; gap: 10px; align-content: start; }
.hab__lista { list-style: none; display: grid; gap: 6px; margin: 6px 0; }
.hab__lista li { position: relative; padding-left: 20px; color: var(--texto-suave); font-size: 15px; }
.hab__lista li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--verde);
}
.hab__precio { margin-top: 4px; color: var(--texto-suave); font-size: 14px; }
.hab__precio .dato { font-size: 22px; color: var(--texto); margin-right: 4px; }
.hab__cta { margin-top: 10px; justify-self: start; }
.habs__nota { margin-top: 30px; color: var(--texto-tenue); font-size: 14px; }

@media (min-width: 760px) {
  .habs { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Resto */
.resto { display: grid; gap: 30px; align-items: start; }
.horarios { display: grid; gap: 10px; margin: 22px 0; }
.horarios > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 9px; border-bottom: 1px solid var(--borde); max-width: 380px;
}
.horarios dt { color: var(--texto-suave); }
.resto__nota { color: var(--texto-tenue); font-size: 14px; }

/* Grilla de íconos */
.iconos { list-style: none; display: grid; gap: 26px; }
.iconos li { display: flex; gap: 14px; align-items: start; }
.iconos svg {
  flex: none; width: 26px; height: 26px; stroke: var(--acento);
  stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.iconos h3 { font-family: var(--sans); font-size: 16px; font-weight: 500; margin-bottom: 2px; }
.iconos p { color: var(--texto-suave); font-size: 14.5px; }

/* Normas */
.normas { display: grid; gap: 26px; }
.normas p:last-child { color: var(--texto-suave); margin-top: 4px; max-width: 46ch; }

@media (min-width: 760px) {
  .resto { grid-template-columns: 1fr 1fr; gap: 46px; }
  .iconos { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
  .normas { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}

/* Ubicación */
.ubicacion { display: grid; gap: 30px; align-items: start; }
.ubicacion__datos { display: grid; gap: 6px; }
.ubicacion__datos .etiqueta { margin-top: 16px; }
.ubicacion__datos .etiqueta:first-child { margin-top: 0; }
.ubicacion__direccion { font-size: 18px; }
.ubicacion__lista { list-style: none; display: grid; gap: 7px; }
.ubicacion__lista li { color: var(--texto-suave); font-size: 15px; }
.ubicacion__lista .dato { color: var(--texto); margin-right: 6px; }
.ubicacion__texto { color: var(--texto-suave); max-width: 44ch; }
.mapa {
  aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: var(--fondo-hundido);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 760px) {
  .ubicacion { grid-template-columns: 1fr 1.15fr; gap: 44px; }
}

/* Botón flotante de WhatsApp, solo en pantallas chicas */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 54px; height: 54px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde); color: var(--fondo);
  box-shadow: 0 6px 20px rgba(25, 21, 18, 0.28);
}
.wa-flotante svg { width: 27px; height: 27px; fill: currentColor; }

@media (min-width: 720px) {
  .wa-flotante { display: none; }
}

/* Instagram, al final de la página.
   ─────────────────────────────────────────────────────────────────────────
   Solo el ícono: el link con el nombre completo ya está más arriba, en la
   columna de contacto, y repetir el texto abajo no agrega nada.

   Vive acá, en layout.css, y no en resto.css, porque el pie es el mismo en el
   resto, en el hostal y en el portal, y las tres páginas cargan esta hoja.
   El color sale por herencia del pie de cada página: el ícono es un trazo de
   currentColor, así que se tiñe solo y no hay que repetir la paleta.
   `.pie a.ig` le gana a `.pie a` de resto.css por especificidad, sin importar
   en qué orden se carguen las hojas. */
.pie__redes {
  margin-top: 26px;
  text-align: center;
}
.pie a.ig,
.portal__pie a.ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px es lo mínimo que un dedo acierta sin pelearse. */
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  opacity: 0.6;
  /* El pie del portal tiene los clics apagados para no tapar las dos puertas;
     el ícono los necesita prendidos. */
  pointer-events: auto;
  transition: opacity 0.3s, transform 0.3s;
}
.pie a.ig:hover,
.pie a.ig:focus-visible,
.portal__pie a.ig:hover,
.portal__pie a.ig:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}
.pie a.ig svg,
.portal__pie a.ig svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* En el portal el pie es una sola línea pegada abajo: el ícono va encima de la
   dirección, no al lado. */
.portal__pie a.ig {
  margin: 0 auto 10px;
}
.portal__pie > span {
  display: block;
}

/* En el teléfono las dos puertas del portal se apilan y el pie queda flotando
   sobre la de abajo, al lado de su "Ver los dormitorios". Con el ícono más
   chico deja de disputarle el renglón. */
@media (max-width: 719px) {
  .portal__pie a.ig {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
  }
  .portal__pie a.ig svg {
    width: 18px;
    height: 18px;
  }
}