/* ------------------------------------------------------------------
   Maqueta y estilos del clon.

   Los colores y las tipografias NO se hardcodean: salen de theme.css,
   que se regenera en cada sync con la paleta que tenga el sitio en Wix.
   ------------------------------------------------------------------ */

/* --- transicion entre paginas -----------------------------------------
   Wix hace un "OutIn": lo que se va baja a opacidad 0 en 0.35s y recien
   despues aparece lo nuevo. Funde solo el contenido de abajo del header —
   el logo y el nav quedan quietos, sin parpadear, igual que en el original
   (alla el fundido es del contenedor de paginas, que cuelga del header).
   Los tiempos y las curvas son los mismos, copiados del CSS de Wix.

   Va por CSS + una linea de JS en vez de la View Transitions API (que es lo
   que usa Wix) porque las transiciones entre documentos todavia no corren en
   todos los navegadores, y asi el efecto es el mismo en todos.
   ------------------------------------------------------------------ */

html.entering .section {
  animation: 0.35s cubic-bezier(.64, 0, .78, 0) both fade-in;
}

html.leaving .section {
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.entering .section { animation: none; }
  html.leaving .section { transition: none; }
}


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: rgb(var(--color_11));
  color: rgb(var(--color_45));
  font: var(--font_8);
  overflow-x: hidden;
}

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

a { color: inherit; }


/* --- mesh -----------------------------------------------------------
   Mismo esquema que usa Wix: un grid por contenedor, cada componente en
   su fila, corrido con `left`. Las posiciones concretas las escribe
   site_build.py en un <style> por pagina.
   ------------------------------------------------------------------ */

#SITE_HEADER, .section { width: 100%; }

.mesh {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr;
  align-items: start;
  justify-items: start;
}

/* separadores invisibles heredados del mesh de Wix (ver wix_scrape.parse_mesh) */
.wedge { visibility: hidden; width: 0; }

.cell {
  position: relative;
  justify-self: start;
  align-self: start;
  max-width: 100%;
}


/* --- header --- */

.logo img { width: 100%; height: auto; }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
}

.menu a, .menu button {
  font-family: josefin-sans-v2, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.75px;
  color: rgb(var(--color_39));
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}

.menu a:hover, .menu button:hover,
.menu .active { color: rgb(var(--color_41)); }

.menu li { position: relative; }

.menu .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 20px;
  background: rgb(var(--color_11));
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  z-index: 20;
}

.menu li:hover > .sub,
.menu li.open > .sub { display: flex; }

/* los submenus no siguen al menu de arriba: Wix les pone Open Sans y el
   marron del texto (#7D612B, el mismo que --color_45) */
.menu .sub a {
  font-family: 'open sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.65px;
  color: rgb(var(--color_45));
}


/* --- bloques --- */

.richtext h1, .richtext h2, .richtext h3,
.richtext h4, .richtext h5, .richtext h6, .richtext p {
  margin: 0;
  font-weight: inherit;
}

/* mismas medidas que le da Wix a las listas del rich text */
.richtext ul, .richtext ol { margin: 0 0 0 8px; padding: 0; }
.richtext li { margin: 0 0 0 1.3em; padding: 0; }

.photo img { width: 100%; height: auto; }

/* el video box: el mesh le da el ancho, el alto sale de la relacion de aspecto
   del box en Wix, y el video se recorta dentro como alla (fittingType "fill") */
.video { aspect-ratio: var(--ar, 16 / 9); }
.video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.divider {
  border-top: var(--lnw, 1px) solid rgb(var(--color_39));
  width: 100%;
  height: var(--h, 5px);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  border-radius: var(--rd, 6px);
  border: var(--brw, 0) solid rgb(var(--brd, var(--color_11)));
  background: rgb(var(--bg, var(--color_38)));
  color: rgb(var(--txt, var(--color_37)));
  font: var(--fnt, var(--font_7));
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease;
}

.button:hover {
  background: rgb(var(--bgh, var(--color_41)));
  color: rgb(var(--txth, var(--color_38)));
}


/* --- galerias -------------------------------------------------------
   Filas justificadas: `flex-grow` proporcional al aspect ratio hace que
   todas las fotos de una fila terminen con la misma altura, sea cual sea
   el ancho de la pantalla.
   ------------------------------------------------------------------ */

.gallery { width: 100%; }

.gallery .row {
  display: flex;
  gap: var(--gap, 20px);
  margin-bottom: var(--gap, 20px);
}

.gallery .row:last-child { margin-bottom: 0; }

.shot {
  flex: var(--a) 1 0;
  aspect-ratio: var(--a);
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}

/* una ultima fila corta no se estira a lo ancho: queda a altura normal */
.row.short { justify-content: flex-start; }
.row.short .shot { flex: 0 0 auto; height: var(--row-h); width: auto; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}

.shot:hover img { opacity: .82; }


/* --- lightbox --- */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .97);
  padding: 4vmin;
}

#lightbox[hidden] { display: none; }

#lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 100%;
}

#lightbox img {
  max-height: 78vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

#lightbox figcaption {
  text-align: center;
  max-width: 46em;
  font-family: josefin-sans-v2, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: rgb(var(--color_14));
}

#lightbox figcaption strong {
  display: block;
  font-weight: 400;
  color: rgb(var(--color_41));
}

#lightbox figcaption span { white-space: pre-line; }

#lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: rgb(var(--color_40));
  cursor: pointer;
  line-height: 1;
  padding: 12px;
  transition: color .2s ease;
}

#lightbox button:hover { color: rgb(var(--color_41)); }

.lb-close { top: 12px; right: 16px; font-size: 34px; }
.lb-prev  { left: 8px;  top: 50%; transform: translateY(-50%); font-size: 52px; }
.lb-next  { right: 8px; top: 50%; transform: translateY(-50%); font-size: 52px; }


/* --- 404 --- */

body.notfound main {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: .05em;
}


/* --- mobile ---------------------------------------------------------
   Debajo de 981px entra la maqueta que Wix define para telefono (canvas
   de 320px, re-emitida en porcentajes). Las galerias pasan a dos
   columnas tipo masonry: sin recortes y sin filas de fotos diminutas.
   ------------------------------------------------------------------ */

@media (max-width: 980px) {
  /* Wix, en telefono, reemplaza el menu por una hamburguesa y no le da
     posicion en el mesh. Aca se queda el mismo menu, a lo ancho y envolviendo
     en varias lineas, que para cinco items entra bien. */
  .menu {
    width: 100%;
    justify-self: stretch;
    padding: 0 16px;
    margin-bottom: 28px;
  }

  .menu ul { flex-wrap: wrap; justify-content: center; gap: 4px 18px; }

  .menu .sub {
    position: static;
    transform: none;
    padding: 6px 0 2px;
    box-shadow: none;
    background: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .menu li.has-sub { display: flex; flex-direction: column; align-items: center; }
  .menu li:hover > .sub { display: none; }
  .menu li.open > .sub { display: flex; }

  /* En telefono Wix reagrupa las filas de la galeria sobre un ancho mucho
     menor. En vez de mandar dos maquetas en el HTML, las filas se disuelven
     con `display:contents` y flexbox vuelve a envolver solo: con el
     flex-basis proporcional al aspect ratio, cada linea sale justificada y
     todas las fotos de una misma linea quedan a la misma altura.

     Las medidas van en vw (proporcion del canvas de 320px que usa Wix en
     mobile) para que el agrupado sea el mismo en cualquier telefono. */
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6.25vw;
    --gap: 6.25vw;
    --row-h: 40.6vw;
  }

  .gallery .row { display: contents; }

  .shot,
  .row.short .shot {
    flex: var(--a) 1 calc(var(--a) * var(--row-h));
    width: auto;
    height: auto;
  }

  /* se come el espacio sobrante de la ultima linea, para que no se estire */
  .gallery::after { content: ""; flex-grow: 999999; }

  .lb-prev { left: 0; font-size: 40px; }
  .lb-next { right: 0; font-size: 40px; }
}