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

@font-face {
  font-family: "Inter";
  src: url("/fuentes/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Fondo crema y títulos en serif con una palabra en cursiva: el estilo que el
   cliente pidió tomar de su referencia. El beige es el de su logo y su arte. */
:root {
  --crema:   #f6f2ec;
  --papel:   #fffdf9;
  --tinta:   #1e1c1a;
  --tenue:   #6b645c;
  --acento:  #9c7b5c;
  --noche:   #161412;
  --linea:   rgba(30,28,26,.12);
  --serif:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--tinta);
  background: var(--crema);
  font-family: var(--sans);
  line-height: 1.6;
}

img { display: block; max-width: 100%; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
}
h1 em, h2 em { font-style: italic; }

/* ---- Barra de arriba ----
   Va encima de la foto de cada página, en blanco. No es pegajosa: así no hace
   falta un fondo opaco que tape la foto. */
.barra {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0 1rem;
  color: #fff;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-decoration: none;
  text-transform: uppercase;
}
.marca img { width: auto; height: 34px; }

.abrir-menu {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.abrir-menu svg { width: 18px; height: 18px; }

/* ---- Servicios ----
   Un solo menú para los dos tamaños: en el teléfono es un cajón que sale de la
   izquierda; en escritorio es la fila horizontal de la barra. Tener uno solo
   evita que los dos se desalineen. */
.lateral .grupo {
  margin: 0 0 .75rem;
  color: var(--acento);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lateral ul { margin: 0; padding: 0; list-style: none; }
.lateral a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.cerrar-menu {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.velo {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(0,0,0,.45);
}

@media (max-width: 55.99rem) {
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(18rem, 85vw);
    padding: 4.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    background: var(--papel);
    color: var(--tinta);
  }
  .lateral a {
    padding: .5rem 0;
    border-bottom: 1px solid var(--linea);
    font-family: var(--serif);
    font-size: 1.45rem;
  }
  .lateral a[aria-current="page"] { color: var(--acento); font-style: italic; }

  /* Solo se esconde cuando el script corrió (clase .js): sin JavaScript el
     cajón queda abierto como un bloque más y los enlaces siguen al alcance. */
  .js .lateral {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .js .lateral.abierto {
    transform: none;
    visibility: visible;
    transition: transform .22s ease;
  }
  html:not(.js) .lateral { position: static; width: auto; }
  html:not(.js) .abrir-menu,
  html:not(.js) .cerrar-menu { display: none; }
}

@media (min-width: 56rem) {
  .barra { padding: 0 2.5rem; min-height: 5.5rem; }
  .abrir-menu, .cerrar-menu, .velo, .lateral .grupo { display: none; }
  .lateral ul { display: flex; gap: 2.25rem; }
  .lateral a {
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .02em;
    border-bottom: 1px solid transparent;
  }
  .lateral a:hover,
  .lateral a[aria-current="page"] { border-bottom-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .lateral, .js .lateral.abierto { transition: none; }
}

/* ---- Foto de cabecera ----
   Que la foto se vea cerca de su proporción real: estirada a toda la pantalla
   se ampliaba tres veces y se veía enorme y borrosa. En el teléfono va en una
   franja y el título debajo, sobre oscuro. En pantallas anchas la portada va
   encima de la foto, pero sin pasar del alto que da la proporción de la foto
   (47.8vw es 490/1023, la de la terraza). Las páginas de servicio van en dos
   columnas, texto y foto, porque casi todas sus fotos son verticales. */
.foto-cabecera {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--noche);
}
.foto-cabecera > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Oscurece arriba, donde va la barra: sobre una foto clara el blanco no se
   leería. */
.foto-cabecera::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  pointer-events: none;
}
/* La portada lleva varias fotos, una encima de otra, y sitio.js las va
   alternando. Sin script se ve solo la primera (.activa). El fundido y el
   acercamiento lento solo existen bajo .anima. */
.portada .fotos {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.portada .fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portada .fotos img:not(.activa) { display: none; }
.anima .portada .fotos img:not(.activa) { display: block; opacity: 0; }
.anima .portada .fotos img { transition: opacity 1.4s ease; }
.anima .portada .fotos img.activa { animation: acercar 7s ease-out both; }
@keyframes acercar {
  from { transform: scale(1.08); }
  to { transform: none; }
}

.foto-cabecera > .texto {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding: 1.75rem 1.25rem 2.75rem;
}

.foto-cabecera h1 { font-size: clamp(3rem, 11vw, 6.5rem); }
.foto-cabecera p {
  margin: 1rem 0 0;
  max-width: 32rem;
  font-size: 1.1rem;
  color: rgba(255,255,255,.9);
}

.antetitulo {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .foto-cabecera.portada {
    display: flex;
    align-items: flex-end;
    min-height: max(32rem, min(92svh, 47.8vw));
  }
  .foto-cabecera.portada > .fotos {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .foto-cabecera.portada::after {
    inset: 0;
    height: auto;
    background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%);
  }
  .foto-cabecera.portada > .texto { padding: 8rem 2.5rem 4rem; }

  .foto-cabecera:not(.portada) {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    min-height: 34rem;
  }
  /* height 0 + min-height 100%: la foto llena su columna sin imponer su alto.
     Con height: 100% a secas, una foto vertical estiraba la fila entera. */
  .foto-cabecera:not(.portada) > img {
    grid-area: 1 / 2;
    height: 0;
    min-height: 100%;
    aspect-ratio: auto;
  }
  .foto-cabecera:not(.portada) > .texto {
    grid-area: 1 / 1;
    align-self: end;
    padding: 8rem 2.5rem 4rem;
  }
}

/* ---- Botones ---- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin-top: 1.75rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
.boton:hover { transform: translateY(-2px); background: #000; }
.boton svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.boton.claro { background: var(--papel); color: var(--tinta); }
.boton.claro:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .boton { transition: none; }
  .boton:hover { transform: none; }
}

/* ---- Secciones ---- */
.seccion { padding: 4.5rem 1.25rem; }
.seccion > * { max-width: 72rem; margin-left: auto; margin-right: auto; }
.seccion h2 { font-size: clamp(2.3rem, 6vw, 3.4rem); margin-bottom: 1.25rem; }
.seccion.papel { background: var(--papel); }
.seccion.centrada h2 { text-align: center; }

.intro { text-align: center; }
.intro p { max-width: 38rem; color: var(--tenue); font-size: 1.1rem; }

@media (min-width: 56rem) {
  .seccion { padding: 6rem 2.5rem; }
}

/* Tarjetas de foto con el nombre debajo, en fila: dos por línea en el teléfono
   y las cuatro en horizontal desde tableta. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .tarjetas { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .tarjetas.de-tres { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta { color: inherit; text-decoration: none; }
.tarjeta img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  transition: transform .3s ease;
}
.tarjeta:hover img { transform: scale(1.02); }
.tarjeta span {
  display: block;
  margin-top: .8rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta img { transition: none; }
  .tarjeta:hover img { transform: none; }
}

/* ---- Destinos que ya vivimos ----
   Fila que se desliza de lado, encajando foto por foto. En el teléfono se ve
   asomar la siguiente, y eso basta para saber que hay más. */
.destinos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(15rem, 64vw);
  gap: 1rem;
  margin: 2.5rem auto 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.destinos > li { scroll-snap-align: start; }
.destino {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
}
.destino img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .4s ease;
}
.destino:hover img { transform: scale(1.04); }
.destino::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
}
.destino span {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  z-index: 1;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
}
@media (prefers-reduced-motion: reduce) {
  .destino img { transition: none; }
  .destino:hover img { transform: none; }
}

/* ---- Próximas salidas ----
   Foto alta y, encima, un panel con los datos del viaje que sube al pasar el
   mouse, como en la referencia de Latitud 84. Donde no hay mouse (teléfono,
   tableta) no hay «encima»: el panel va siempre visible debajo de la foto.
   Con el teclado, el panel sube al enfocar su botón. */
.salidas {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .salidas { grid-template-columns: repeat(2, 1fr); max-width: 52rem; }
}
.salida {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--noche);
  color: #fff;
}
.salida img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.salida-info { padding: 1.5rem; }
.salida-info .antetitulo { color: rgba(255,255,255,.7); }
.salida-info h3 { font-size: 2.4rem; }
.salida-info p { margin: .5rem 0 0; color: rgba(255,255,255,.8); }
.salida-info .boton { margin-top: 1.25rem; }
.salida dl {
  display: flex;
  gap: 1.75rem;
  margin: 1rem 0 0;
  padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.salida dt {
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.salida dd { margin: .15rem 0 0; font-size: .95rem; }

/* Computadora: el panel va encima de la foto y sube al pasar el mouse. */
@media (hover: hover) {
  .salida-info {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(22,20,18,.96) 55%, rgba(22,20,18,.75));
    backdrop-filter: blur(4px);
    transform: translateY(101%);
    transition: transform .35s ease;
  }
  .salida:hover .salida-info,
  .salida:focus-within .salida-info { transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .salida-info { transition: none; }
}

/* Teléfono: cada salida es un carrete de dos láminas, como un carrusel de
   Instagram: primero la foto y, al deslizar, la información. No depende de
   JavaScript: es un scroll horizontal que encaja lámina por lámina. */
@media (hover: none) {
  .salida {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .salida::-webkit-scrollbar { display: none; }
  .salida > img,
  .salida-info {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .salida-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Va dentro del scroll, así que se queda sobre la foto al deslizar. */
  .salida::after {
    content: "Desliza para ver el viaje  →";
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .8rem;
    pointer-events: none;
  }
}

/* ---- Página de un servicio ---- */
.detalle p.bajada {
  max-width: 40rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  line-height: 1.4;
}

/* ---- Pie ---- */
.pie {
  padding: 3.5rem 1.25rem 2.5rem;
  background: var(--noche);
  color: rgba(255,255,255,.85);
  text-align: center;
}
.pie img { height: 46px; width: auto; margin: 0 auto 1rem; }
.pie p { margin: 0; }
.pie .lema { font-family: var(--serif); font-size: 1.5rem; font-style: italic; }
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin: 1.75rem 0 2rem;
}
.redes a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}
.redes a:hover { background: rgba(255,255,255,.08); }
.redes svg { width: 20px; height: 20px; flex: none; }
.redes .wa svg { fill: #25d366; }
.redes .ig svg { fill: #e1567c; }
.pie small { color: rgba(255,255,255,.5); font-size: .8rem; }

/* ---- WhatsApp flotante ----
   Por debajo de la barra (z-index 20): con el cajón abierto, el velo lo tapa
   igual que al resto de la página. El margen respeta la barra de inicio del
   iPhone. */
.wa-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 15;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
@media (prefers-reduced-motion: reduce) {
  .wa-flotante { transition: none; }
  .wa-flotante:hover { transform: none; }
}

/* ---- Lo que aparece al bajar ----
   Solo se esconde bajo .anima, que el script pone cuando sí va a animar: sin
   JavaScript, o con «reducir movimiento», nada queda invisible. --orden
   escalona las tarjetas de una misma fila. */
.anima .aparece {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: calc(var(--orden, 0) * 110ms);
}
.anima .aparece.visible { opacity: 1; transform: none; }