@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

/*
  BIOSPACE — fuente de pago (Creative Market / alifgraphic), no distribuible por CDN.
  Cuando tengas el archivo con licencia, colócalo en una carpeta "fonts/" junto a
  index.html, con estos nombres exactos, y se activará sola sin tocar nada más:
    fonts/Biospace.woff2
    fonts/Biospace.otf
  Hasta entonces, el sitio usa Fraunces como respaldo visual (se ve similar: serif
  elegante de alto contraste).
*/
@font-face{
  font-family:'Biospace';
  src: url('fonts/Biospace.woff2') format('woff2'),
       url('fonts/Biospace.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --mint: #dbf6ee;
  --mint-deep: #c9efe4;
  --teal: #00ad96;
  --teal-deep: #00967f;
  --ink: #12211d;
  --ink-soft: rgba(18,33,29,0.62);
  --ink-faint: rgba(18,33,29,0.4);
  --paper: #f7fbf9;
  --rule: rgba(18,33,29,0.14);
  --rule-on-teal: rgba(247,251,249,0.24);
  --ph-dark: #16211d;
  --ph-dark-2: #223530;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body.lightbox-abierto{
  overflow:hidden;
  position:fixed;
  width:100%;
}

body{
  background:var(--mint);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{
  display:block; max-width:100%;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}

.serif{ font-family:'Fraunces', serif; }

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- topbar (todas las páginas) ---------- */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 48px;
  background:transparent;
  transition:background .3s ease;
}
.topbar.solid{
  background:rgba(219,246,238,0.96);
}
.mobile-nav-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex:1;
}
.topnav{ display:flex; gap:28px; }
.topnav a{
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.topnav a:hover, .topnav a:focus-visible{ color:var(--ink); }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:26px; height:20px;
  padding:0;
  margin-left:auto;
  position:relative;
  z-index:110;
}
.nav-toggle span{
  position:absolute; left:0; right:0;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.topbar.nav-open .nav-toggle span:nth-child(1){ top:9px; transform:rotate(45deg); }
.topbar.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.topbar.nav-open .nav-toggle span:nth-child(3){ top:9px; transform:rotate(-45deg); }

.lang-switch{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.08em;
}
.lang-switch .lang-option{
  color:rgba(255,255,255,0.75);
  cursor:pointer;
  transition:color .2s ease;
}
.lang-switch .lang-option:hover{ color:#fff; }
.lang-switch .lang-option.active{ color:#fff; cursor:default; }
.lang-switch .sep{ color:rgba(255,255,255,0.5); }
.lang-switch .disabled{ color:rgba(255,255,255,0.75); cursor:default; position:relative; }
.topbar.solid .lang-switch .lang-option,
.topbar.nav-open .lang-switch .lang-option{ color:var(--ink-soft); }
.topbar.solid .lang-switch .lang-option:hover,
.topbar.nav-open .lang-switch .lang-option:hover{ color:var(--ink); }
.topbar.solid .lang-switch .lang-option.active,
.topbar.nav-open .lang-switch .lang-option.active{ color:var(--ink); }
.topbar.solid .lang-switch .sep,
.topbar.nav-open .lang-switch .sep{ color:var(--ink-faint); }
.topbar.solid .lang-switch .disabled,
.topbar.nav-open .lang-switch .disabled{ color:var(--ink-soft); }
.lang-switch .disabled:hover::after{
  content: attr(data-tip);
  position:absolute; top:130%; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  font-size:0.62rem; letter-spacing:0.04em;
  padding:5px 9px; border-radius:4px;
  white-space:nowrap;
}

/* ---------- hero (index) ---------- */
.hero{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:100svh;
  position:relative;
}
.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 20px 0 64px;
}
.hero-left h1{
  font-weight:400;
  font-size:clamp(3.4rem, 6.2vw, 5.6rem);
  line-height:0.98;
}
.hero-left .eyebrow{ margin-top:16px; }

.hero-right{ position:relative; overflow:hidden; }
.placeholder-photo{
  width:100%; height:100%;
  background:linear-gradient(155deg, #94a49c, #56645c 62%, #333f39);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex; align-items:flex-end; justify-content:flex-start;
  position:relative;
}
.placeholder-photo::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px);
}
.placeholder-photo.has-photo::before{ display:none; }
.placeholder-photo.has-photo .ph-label{ display:none; }
.ph-label{
  position:relative;
  font-family:'Inter', sans-serif;
  font-size:0.66rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  padding:18px 22px;
}

/* ---------- qui soc ---------- */
.about-section{
  display:grid;
  grid-template-columns:34% 66%;
  align-items:center;
  padding:80px 48px 100px;
  gap:60px;
}
.about-photo .placeholder-photo{
  aspect-ratio:4/5;
  border-radius:2px;
}
.about-text .eyebrow{ margin-bottom:14px; }
.about-text h2{
  font-weight:400;
  font-size:clamp(2rem, 3.6vw, 2.8rem);
  margin-bottom:22px;
}
.about-text p{
  max-width:680px;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:16px;
}

.about-page .gallery-hero{ padding:150px 48px 0; }
.about-page .about-section{ padding:40px 48px 100px; }

.section-divider{
  height:1px;
  background:var(--rule);
  margin:0 48px;
}

.fotografia-section{ padding:120px 0 40px; }
.fotografia-section .section-title{
  padding:0 48px;
  font-weight:400;
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:56px;
}

.dest-rows{
  display:flex;
  flex-direction:column;
  gap:80px;
}

.dest-row{
  position:relative;
  height:220px;
  overflow:hidden;
}
.dest-row.hidden-row{ display:none; }
.dest-tiles-track{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  width:100%;
  height:100%;
}

.veure-mes-wrap{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:40px;
}
.veure-mes-btn{
  display:flex;
  padding:14px 30px;
  border:1px solid var(--ink);
  border-radius:30px;
  background:none;
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.veure-mes-btn:hover{ background:var(--ink); color:var(--mint); }
.veure-mes-btn:active{ transform:scale(0.96); }
.veure-menys-btn{
  display:none;
  border-color:transparent;
  color:var(--ink-soft);
}
.veure-menys-btn:hover{ background:none; color:var(--ink); text-decoration:underline; }
.dest-tile{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, var(--tile-a, #b7c6bd), var(--tile-b, #7c8c82));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.dest-tile::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
}
.dest-tile.has-photo::before{ display:none; }
.dest-tile.has-photo .ph-label{ display:none; }
.dest-row:nth-child(odd) .dest-tile{ --tile-a:#c3d1c8; --tile-b:#8a998f; }
.dest-row:nth-child(even) .dest-tile{ --tile-a:#b3c3bd; --tile-b:#69796f; }

.dest-title-wrap{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:3;
  pointer-events:none;
  text-align:center;
}
.dest-title{
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
  white-space:nowrap;
}
.dest-hint{
  font-family:'Inter', sans-serif;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
  opacity:0.85;
  transition:opacity .25s ease, transform .25s ease;
}
.dest-row:hover .dest-hint{ opacity:1; transform:translateY(2px); }
.dest-row:hover{ filter:brightness(0.94); }
.dest-row:hover .dest-tile{ transform:scale(1.015); }
.dest-row:active{ filter:brightness(0.88); }
.dest-row:active .dest-tile{ transform:scale(0.98); }
.dest-tile{ transition:transform .3s ease; }
.dest-row{ transition:filter .15s ease; }

/* ---------- proyectos (sección dentro de la página) ---------- */
.projects-section{ background:var(--teal); color:var(--paper); }

.projects-hero{
  padding:110px 48px 40px;
}
.projects-hero h1{
  font-weight:400;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
}

.projects-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:20px 48px 130px;
  align-items:stretch;
  max-width:1300px;
  margin:0 auto;
}

.project-list{ display:flex; flex-direction:column; }
.project-item{
  display:flex;
  align-items:center;
  gap:26px;
  padding:34px 0;
  border-top:1px solid var(--rule-on-teal);
  cursor:pointer;
}
.project-item:last-child{ border-bottom:1px solid var(--rule-on-teal); }
.project-item-thumb{
  width:92px; height:92px;
  flex:none;
  border-radius:3px;
  overflow:hidden;
}
.project-item-thumb .ph-label{ display:none; }
.project-item h3{
  font-weight:400;
  font-size:1.5rem;
  margin-top:6px;
  transition:opacity .2s ease;
}
.project-item .eyebrow{ color:rgba(247,251,249,0.6); margin-top:0; }
.project-desc{
  margin-top:8px;
  max-width:420px;
  font-size:0.85rem;
  line-height:1.5;
  color:rgba(247,251,249,0.75);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.project-item{ opacity:0.55; transition:opacity .25s ease; }
.project-item:active{ opacity:1; transform:scale(0.985); transition:opacity .1s ease, transform .1s ease; }
.project-item.active{ opacity:1; }
.external-icon{
  display:inline-block;
  vertical-align:-2px;
  opacity:0.55;
  transition:transform .2s ease, opacity .2s ease;
}
.project-item:hover .external-icon{ opacity:1; transform:translate(2px, -2px); }

.project-sticky{
  position:sticky;
  top:120px;
  width:100%;
  height:100%;
  border-radius:2px;
  overflow:hidden;
  background:var(--ph-dark);
  display:flex;
  align-items:flex-end;
}
.sticky-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .7s ease;
}
.sticky-layer.visible{ opacity:1; }
.project-sticky .ph-label{ position:relative; color:rgba(247,251,249,0.6); }
.project-sticky.has-photo .ph-label{ display:none; }

/* ---------- destination gallery pages ---------- */
.gallery-page{ min-height:100svh; }
.gallery-hero{
  padding:150px 48px 50px;
  border-bottom:1px solid var(--rule);
}
.gallery-hero .back-link{
  display:inline-block;
  margin-bottom:22px;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.gallery-hero .back-link:hover{ color:var(--ink); }
.gallery-hero h1{
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.6rem, 6vw, 4.2rem);
}
.gallery-hero p{
  max-width:560px;
  margin-top:18px;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.6;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  padding:2px 0 0;
}
.gallery-grid .dest-tile{ aspect-ratio:3/4; display:flex; align-items:flex-end; }
.gallery-grid .dest-tile:nth-child(3n+1){ aspect-ratio:1/1; }
.gallery-grid .dest-tile .ph-label{ color:rgba(255,255,255,0.7); font-size:0.6rem; }

/* ---------- mosaico de viaje (masonry construido por JS) ---------- */
.masonry-grid{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:0 48px 100px;
}
.masonry-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.masonry-item{
  border-radius:2px;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--ph-dark);
}
.masonry-item img{
  width:100%;
  display:block;
  transition:transform .5s ease;
}
.masonry-item:hover img{ transform:scale(1.03); }
.masonry-item:active img{ transform:scale(0.99); transition:transform .1s ease; }

.glightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(8,12,10,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.glightbox.open{ opacity:1; pointer-events:auto; }
.glightbox img{
  max-width:88vw; max-height:88vh;
  border-radius:2px;
  user-select:none;
}
.glightbox-close{
  position:absolute; top:28px; right:36px;
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(247,251,249,0.7);
  background:none; border:none;
  cursor:pointer;
}
.glightbox-close:hover{ color:#fff; }
.glightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(247,251,249,0.3);
  background:rgba(0,0,0,0.2);
  color:#fff;
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.glightbox-arrow:hover{ background:rgba(255,255,255,0.12); border-color:rgba(247,251,249,0.6); }
.glightbox-prev{ left:24px; }
.glightbox-next{ right:24px; }

@media (max-width:900px){
  .masonry-grid{ padding:0 22px 70px; }
  .glightbox-arrow{ width:38px; height:38px; }
  .glightbox-prev{ left:10px; }
  .glightbox-next{ right:10px; }
}

/* ---------- contacto ---------- */
.contact-section{
  padding:130px 48px 80px;
  text-align:center;
}
.contact-section h2{
  font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4rem);
  margin-bottom:36px;
}
.contact-links{
  display:flex;
  flex-direction:column;
  max-width:440px;
  margin:0 auto;
}
.contact-links a{
  padding:18px 0;
  border-top:1px solid var(--rule);
  font-size:0.9rem;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  transition:color .2s ease, letter-spacing .2s ease;
}
.contact-links a:last-child{ border-bottom:1px solid var(--rule); }
.contact-links a:hover{ color:var(--teal-deep); letter-spacing:0.03em; }

footer{
  text-align:center;
  padding:30px 40px 40px;
  font-size:0.66rem;
  font-weight:500;
  letter-spacing:0.08em;
  color:var(--ink-faint);
}
.projects-section + footer,
.projects-section footer{ color:rgba(247,251,249,0.5); }

/* ---------- logo (hero, footer, cabecera de viaje) ---------- */
.site-logo{
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-logo{
  width:100px;
  height:100px;
  margin-bottom:18px;
  background-position:left center;
}
.footer-logo{
  width:30px;
  height:30px;
  margin:0 auto 10px;
}
.gallery-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.gallery-logo{
  width:44px;
  height:44px;
  flex:none;
  margin-top:4px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .topbar{ padding:20px 22px; }
  .nav-toggle{ display:block; }

  .mobile-nav-panel{
    position:fixed;
    inset:0;
    flex-direction:column;
    justify-content:space-between;
    padding:110px 0 44px;
    background:linear-gradient(to bottom, var(--mint) 0%, var(--mint) 15%, var(--mint-deep) 55%, var(--teal) 100%);
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .topbar.nav-open .mobile-nav-panel{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .topnav{
    flex-direction:column;
    align-items:center;
    gap:30px;
  }
  .topnav a{ font-size:1rem; letter-spacing:0.1em; }
  .lang-switch{ justify-content:center; }
  .hero{ display:flex; flex-direction:column; min-height:auto; }
  .hero-left{ padding:150px 24px 40px; order:1; flex:none; }
  .hero-right{ height:60svh; order:2; flex:none; }
  .about-section{ grid-template-columns:1fr; padding:60px 24px 70px; gap:32px; }
  .about-photo .placeholder-photo{ aspect-ratio:3/4; }

  .fotografia-section{ padding:70px 0 40px; }
  .fotografia-section .section-title{ padding:0 24px; }
  .dest-row{ height:auto; }
  .dest-tiles-track{ display:flex; width:auto; }
  .dest-row .dest-tile{ flex:0 0 33.3334%; aspect-ratio:1/1; }
  .dest-title{ font-size:1.8rem; }
  .dest-hint{ opacity:1; font-size:0.62rem; }
  .veure-mes-btn{ margin-left:24px; margin-right:24px; }

  .projects-hero{ padding:120px 24px 20px; }
  .projects-body{ grid-template-columns:1fr; padding:10px 24px 80px; }
  .project-sticky{ display:none; }
  .project-item-thumb{ width:110px; height:110px; }
  .project-item h3{ font-size:1.25rem; }

  .gallery-hero{ padding:120px 24px 36px; }
  .gallery-hero-top{ flex-wrap:wrap; }
  .gallery-logo{ width:32px; height:32px; }
  .hero-logo{ width:72px; height:72px; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }

  /* Las reglas .about-page de más arriba (fuera de este media query) tienen
     más especificidad que .gallery-hero/.about-section de aquí arriba, así
     que sin este bloque "Qui soc" se quedaba con el padding de escritorio
     en móvil. Misma especificidad aquí, y al ir después en el archivo, gana. */
  .about-page .gallery-hero{ padding:120px 24px 0; }
  .about-page .about-section{ padding:30px 24px 70px; }
}