/* =========================
   BASE (limpio)
========================= */
html, body { height: 100%; }

body{
  margin: 0;
  overflow: auto; /* ✅ default sano */
}

/* Wrapper layout: default */
.app-layout{ display: block; }

/* Mobile blocks ocultos en desktop */
.mobile-intro,
.mobile-footerbar{ display: none; }

/* =========================================================
   LAYOUT CON SIDEBAR (AUTO) — CORREGIDO
   Activa layout lateral si existe .sidebar dentro de .app-layout
========================================================= */

/* ✅ Si hay sidebar -> layout horizontal */
.app-layout:has(.sidebar){
  display: flex;
}

/* ✅ Si hay sidebar -> body no scrollea (scrollea main-panel) */
body:has(.app-layout .sidebar){
  overflow: hidden;
}

/* Sidebar */
.sidebar{
  position: fixed;
  top: 0; left: 0;
  width: 17.2%;
  height: 100dvh;
  padding: 24px 12px;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.sidebar__item-title{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sidebar__text{
  font-size: 13px;
  line-height: 1.45;
  /*max-width: 240px;*/
}

.sidebar__links a{
  display: inline-block;
  font-size: clamp(13px, 0.850vw, 24px) !important;
  text-decoration: none;
  color: #111;
  transition: opacity .2s ease;
  
}
.sidebar__links a:hover{ opacity: .6; }

.sidebar__section--bottom{ margin-top: auto; }

/* Panel derecho con scroll interno (solo cuando hay sidebar) */
.app-layout:has(.sidebar) .main-panel{
  margin-left: 17.2%;
  width: calc(100% - 17.2%);
  min-width: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 48px 15px 24px 0px;
}

/* ✅ Cuando NO hay sidebar: panel normal */
.app-layout:not(:has(.sidebar)) .main-panel{
  margin-left: 0% !important;
  width: 100% !important;
  height: auto;
  padding-top:42px;
  overflow: visible;
  /*padding: 24px;*/ /* default para páginas normales */
}

/* =========================
   DESKTOP — SINGLE PROYECTO
   (scroll normal del body para evitar líos)
========================= */
body.single-proyecto{
  overflow: auto !important;
}

/* En single proyecto NO queremos panel fijo/scroll interno */
.layout--project .main-panel{
  margin-left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  padding: 80px 0 24px; /* sin padding lateral fijo; lo manejan los containers */
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 15px 12px 24px 12px;
}

.topbar__nav{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar__left{ display: inline-flex; gap: 16px; }

.topbar__link{
  text-decoration: none;
  color: #111;
  font-size: 13px;
  letter-spacing: .02em;
  transition: opacity .2s ease;
}
.topbar__link:hover{ opacity: .6; }

/* =========================
   HOME — MASONRY EDITORIAL (GRID 35/65 REAL)
========================= */
.projects-archive{ padding: 0; }

/* Anti-parpadeo: oculto hasta que JS marque html.msn-ready */
.masonry{ opacity: 0; }
html.msn-ready .masonry{ opacity: 1; transition: opacity .15s ease; }

.masonry{
  display: grid;
  /* ✅ minmax evita que una columna se “achique raro” */
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  column-gap: 8px;
  row-gap: 8px;
  align-items: start;

  /* clave para el masonry real */
  grid-auto-rows: 8px;
}

.masonry__item{
  margin: 0; /* el gap maneja el espacio */
}

.project-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-card__media{
  overflow: hidden;
  background: #f3f3f3;
}

.project-card__img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease, opacity .35s ease;
}

.project-card:hover .project-card__img{
  transform: scale(1.015);
  opacity: .95;
}

.project-card__meta{ padding: 8px 0 0; }

.project-card__title{
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.project-card__excerpt{
  font-size: 15px;
  line-height: 1.35;
  opacity: 1;
  margin-top: 4px;
  max-width: 420px;
  letter-spacing: -1px;
}

/* =========================
   MOBILE (blanco)
========================= */
@media (max-width: 900px){

  body{ overflow: auto; }
  .app-layout{ display: block; }

  /* En mobile ocultamos sidebar si existe */
  .sidebar{ display: none; }

  /* Panel full width */
  .main-panel{
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 12px 90px;
  }

  /* Intro mobile */
  .mobile-intro{
    display: block;
    width: 100%;
    padding: 26px 0 20px;
  }

  .mobile-intro__text{
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -0.015em;
    max-width: 560px;
    padding: 0 20px;
  }

  /* Masonry -> 1 columna */
  .masonry{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 26px;
  }

  /* Footer bar */
  .mobile-footerbar{
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(0,0,0,.15);
    background: #fff;
    z-index: 300;
    justify-content: space-between;
    align-items: flex-end;
  }

  .mobile-footerbar a{
    color: #111;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .mobile-footerbar__left{
    display: inline-flex;
    gap: 14px;
  }

  .mobile-footerbar__sep{ display: none; }
  .mobile-footerbar__right{ text-align: right; }

  /* Reveal (home) */
  .reveal{
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================
   PROYECTO — BASE
========================= */
.project{
  max-width: 980px;
  margin: 0 auto;
}

.project__title{
  font-size: 22px;
  margin: 0 0 12px;
  letter-spacing: .01em;
}

.project__intro{
  font-size: 14px;
  line-height: 1.55;
  opacity: 1;
  margin-bottom: 18px;
}

.project__content{
  font-size: 14px;
  line-height: 1.6;
}

.project__content img,
.project__content video{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   PROYECTO — EXPERIMENTAL (FULL WIDTH)
========================= */
.project--experimental{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Container ÚNICO: texto con padding 0 en desktop, y luego lo abrimos en mobile */
.project--experimental .project-exp__header,
.project--experimental .project-exp__intro-cols,
.project--experimental .project-exp__content p,
.project--experimental .project-exp__content h2,
.project--experimental .project-exp__content h3,
.project--experimental .project-exp__content ul,
.project--experimental .project-exp__content ol,
.project--experimental .project-exp__content .wp-block-separator,
.project--experimental .project-exp__content hr{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Header */
.project-exp__title{
  font-size: 26px;
  margin: 0 0 16px;
  letter-spacing: .01em;
}

.project-exp__intro{
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  opacity: .9;
}

/* Intro 3 columnas */
.project-exp__intro-cols{
  margin-top: 80px;
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  font-size: 12px;
  line-height: 1.4;
}

/* Fallback: siempre visible + anim suave si JS agrega .is-in */
.project-exp__intro-cols .intro-col{
  opacity: 1;
  transform: translateY(10px);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.project-exp__intro-cols.is-in .intro-col{ transform: translateY(0); }
.project-exp__intro-cols.is-in .intro-col:nth-child(1){ transition-delay: 0ms; }
.project-exp__intro-cols.is-in .intro-col:nth-child(2){ transition-delay: 90ms; }
.project-exp__intro-cols.is-in .intro-col:nth-child(3){ transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce){
  .project-exp__intro-cols .intro-col{
    transform: none;
    transition: none;
  }
}

/* Texto */
.project-exp__content{ width: 100%; }

.project-exp__content p,
.project-exp__content h2,
.project-exp__content h3,
.project-exp__content ul,
.project-exp__content ol{
  line-height: 1.6;
  margin: 0 auto 0;
}

/* Imágenes/videos normales */
.project-exp__content .wp-block-image,
.project-exp__content .wp-block-video{
  width: 100%;
  margin-bottom: 36px;
}

/* Separadores */
.project-exp__content .wp-block-separator,
.project-exp__content hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 36px auto;
}

/* =========================
   GALERÍA NORMAL (grid)
========================= */
.project-exp__content .wp-block-gallery:not(.gallery-slider){
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-bottom: 36px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* =========================================================
   SLIDER (1 imagen) + arrows negros (SIN dots)
========================================================= */

/* Wrapper */
.project-slider,
.project-exp__content .wp-block-gallery.gallery-slider{
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* ✅ Para la Gallery slider: NO full-bleed */
.project-exp__content .wp-block-gallery.gallery-slider{
  max-width: 100%;
  margin: 24px auto 36px !important;
  padding: 0 !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ventana */
.project-slider .slider-viewport,
.project-exp__content .wp-block-gallery.gallery-slider .slider-viewport{
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

/* Track */
.project-slider .slider-track,
.project-exp__content .wp-block-gallery.gallery-slider .slider-track{
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
}
.project-slider .slider-track::-webkit-scrollbar,
.project-exp__content .wp-block-gallery.gallery-slider .slider-track::-webkit-scrollbar{
  display: none;
}

/* Slide = 1 por vista */
.project-slider .slide,
.project-exp__content .wp-block-gallery.gallery-slider .slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100% !important;
  max-width: 100% !important;
}

/* Reset Gutenberg */
.project-slider .slide figure,
.project-slider .slide .wp-block-image,
.project-exp__content .wp-block-gallery.gallery-slider .slide figure,
.project-exp__content .wp-block-gallery.gallery-slider .slide .wp-block-image{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Imagen */
.project-slider .slide img,
.project-exp__content .wp-block-gallery.gallery-slider .slide img{
  width: 100% !important;
  height: auto !important;
  display: block;
  max-height: 70vh;
  object-fit: contain;
}

/* Arrows minimalistas negros */
.project-slider .slider-btn,
.project-exp__content .wp-block-gallery.gallery-slider .slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  user-select: none;
}

.project-slider .slider-btn.prev,
.project-exp__content .wp-block-gallery.gallery-slider .slider-btn.prev{ left: 6px; }

.project-slider .slider-btn.next,
.project-exp__content .wp-block-gallery.gallery-slider .slider-btn.next{ right: 6px; }

.project-slider .slider-btn:disabled,
.project-exp__content .wp-block-gallery.gallery-slider .slider-btn:disabled{
  opacity: .25;
  cursor: default;
}

/* =========================
   MOBILE — PROYECTO
========================= */
@media (max-width: 900px){

  /* ✅ 3 cols -> 1 col */
  .project-exp__intro-cols{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  /* ✅ padding texto */
  .project--experimental .project-exp__header,
  .project--experimental .project-exp__intro-cols,
  .project--experimental .project-exp__content p,
  .project--experimental .project-exp__content h2,
  .project--experimental .project-exp__content h3,
  .project--experimental .project-exp__content ul,
  .project--experimental .project-exp__content ol{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ✅ slider con padding 20 lateral */
  .project-exp__content .wp-block-gallery.gallery-slider{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* imagen un toque menos alta */
  .project-slider .slide img,
  .project-exp__content .wp-block-gallery.gallery-slider .slide img{
    max-height: 62vh;
  }
}

/* =========================================================
   FIX: después de galerías/masonry, que el contenido siga normal
========================================================= */
.project-exp__content .wp-block-gallery{
  position: relative;
  clear: both;
}
.project-exp__content .wp-block-gallery::after{
  content: "";
  display: block;
  clear: both;
}
.project-exp__content .wp-block-group::after{
  content: "";
  display: block;
  clear: both;
}
.project-exp__content > *{
  position: relative;
  z-index: 1;
}

/* =========================
   FX — Reveal (proyecto) SAFE
========================= */
:root{
  --fx-ease: cubic-bezier(.2,.8,.2,1);
  --fx-dur: 520ms;
}

@media (prefers-reduced-motion: reduce){
  :root{ --fx-dur: 1ms; }
}

/* Default visible */
.fx-reveal{
  opacity: 1;
  transform: none;
}

/* Solo cuando JS marca html.fx-js */
html.fx-js .fx-reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
  will-change: opacity, transform;
}
html.fx-js .fx-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Overlay: no bloquea nunca */
.page-fade{
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 9999;
}

/* =========================
   FIX MOBILE: aunque exista .sidebar en el DOM
   anulamos el modo sidebar
========================= */
@media (max-width: 900px){
  /* El body debe volver a scrollear */
  body{ overflow: auto !important; }

  /* Forzamos layout mobile siempre */
  .app-layout{ display: block !important; }

  /* Sidebar off */
  .sidebar{ display: none !important; }

  /* Panel full width */
  .main-panel{
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 12px 90px !important;
  }

  /* Masonry 1 col */
  .masonry{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 26px !important;
  }

  /* Footer bar */
  .mobile-footerbar{
    display: flex !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(0,0,0,.15);
    background: #fff;
    z-index: 300;
    justify-content: space-between;
    align-items: flex-end;
  }
}
/* =========================
   HOVER PROYECTOS (RESTORE)
========================= */
.masonry .project-card__media{
  overflow: hidden !important;
}

.masonry .project-card__img{
  display: block;
  transform: translateZ(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              opacity .35s ease !important;
  will-change: transform, opacity;
}

/* Solo desktop con hover real */
@media (hover: hover) and (pointer: fine){
  .masonry .project-card:hover .project-card__img{
    transform: scale(1.04) !important;
    opacity: .88 !important;
  }
}

#ast-scroll-top{
background-color:#000000!important
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh; /* o min-height según tu setup */
}

.sidebar__section--bottom {
    display: none; /* por si quedó algo residual */
}

.page-prevnext {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    width: 100%;
    background: transparent; 
}

.page-prevnext__prev a,
.page-prevnext__next a {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: inherit;
    font-family:"neue_machinamedium", Sans-serif!important;
}

.page-prevnext__prev a:hover,
.page-prevnext__next a:hover {
    text-decoration: underline;
}

#ast-scroll-top {
    border: none !important;
}

#ast-scroll-top svg path {
    fill: inherit !important;
}

#ast-scroll-top {
    box-shadow: none !important;
}