/* =========================================================
   GRUTA — gruta.la
   Hoja de estilo única. Sin dependencias de Cargo.
   ========================================================= */

/* ---------- tipografía propia (opcional) ----------
   Cuando subas los archivos de Diatype Semi-Mono a
   /assets/fonts/, el sitio los usa solo. Mientras tanto
   cae en DM Mono, que se carga desde Google Fonts.      */
@font-face{
  font-family:"Diatype Semi-Mono";
  src:url("/assets/fonts/ABCDiatypeSemi-Mono-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Diatype Semi-Mono";
  src:url("/assets/fonts/ABCDiatypeSemi-Mono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Diatype Semi-Mono";
  src:url("/assets/fonts/ABCDiatypeSemi-Mono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --bone:#E6E1D6;
  --silver:#9C9B96;
  --dim:#6B6A66;
  --ash:#262624;
  --black:#000;

  --mono:"Diatype Semi-Mono","DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"EB Garamond","Garamond",Georgia,serif;
  --fell:"IM Fell English","EB Garamond",Georgia,serif;

  --nav:300px;
  --nav-big:clamp(320px,29vw,560px);

  color-scheme:dark;
}

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

html{
  background:var(--black);
  scroll-behavior:smooth;
  scroll-padding-top:env(safe-area-inset-top,0px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--mono);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}
img,video,canvas{max-width:100%}
:focus-visible{outline:1px solid var(--bone);outline-offset:3px}

.g-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.g-skip{position:fixed;top:-100px;left:12px;z-index:10000;background:var(--bone);color:#000;
  padding:.6em 1em;text-decoration:none;font-size:13px;transition:top .2s}
.g-skip:focus{top:12px}

/* ---------- grano fino ---------- */
#g-grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.1}
@media (prefers-reduced-motion: reduce){#g-grain{opacity:.07}}

/* ---------- fondo: recorrido por la gruta ---------- */
#g-cave{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  mix-blend-mode:lighten;filter:blur(5px);transform:scale(1.03);
}

/* ---------- navegación ---------- */
.g-nav{
  position:fixed;top:0;left:0;bottom:0;width:var(--nav);z-index:20;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 30px) 24px calc(env(safe-area-inset-bottom,0px) + 28px) 28px;
}
.g-ntop{display:block}
.g-logo{display:inline-block;line-height:0}
.g-logo img{display:block;width:150px;height:auto}
.g-menu-btn{display:none;background:none;border:0;color:var(--bone);font:inherit;font-size:13px;
  cursor:pointer;padding:.3em 0;text-decoration:none}
.g-nav ul{list-style:none;margin:auto 0;padding:0}
.g-nav ul a{
  display:inline-block;font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.45;
  color:var(--silver);text-decoration:none;
}
.g-nav ul a:hover{color:var(--bone)}
.g-nav ul a[aria-current="true"]{color:var(--bone);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}
.g-rule{width:40px;height:1px;background:var(--ash);margin:1rem 0;font-size:0;line-height:0}
.g-nfoot{font-size:13px;line-height:1.9;color:var(--dim)}
.g-nfoot a{text-decoration:none}
.g-nfoot a:hover{color:var(--bone)}

/* menú grande hasta arriba, chico al bajar */
@media (min-width:901px){
  .g-nav{transition:width .5s ease}
  .g-nav ul a{transition:font-size .5s ease,line-height .5s ease,color .5s ease}
  .g-logo img{transition:width .5s ease}

  html.g-top .g-nav{
    width:var(--nav-big);
    padding-top:calc(env(safe-area-inset-top,0px) + 3vh);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 3vh);
  }
  html.g-top .g-nav ul{margin:auto 0;min-height:0;padding:1vh 0}
  html.g-top .g-nav ul a{font-size:clamp(30px,min(4.4vw,6.6vh),88px);line-height:1.08;color:var(--bone)}
  html.g-top .g-logo img{width:clamp(110px,min(13vw,14vh),200px)}
  html.g-top .g-rule{width:92%;height:0;background:none;border-top:1px dashed var(--silver);margin:.8rem 0}
  html.g-top .g-nfoot{flex:none}
  html.g-top .g-nfoot a{display:inline-block;border:1px solid var(--silver);color:var(--bone);
    padding:.3em .7em;margin:0 .4em .4em 0}
  html.g-top .g-nfoot br{display:none}
}
@media (prefers-reduced-motion: reduce){
  .g-nav,.g-nav ul a,.g-logo img{transition:none}
}

.g-main,.g-foot{margin-left:var(--nav);position:relative}

/* ---------- secciones ---------- */
.g-sec{padding:15vh 4vw 12vh 3vw;border-top:1px solid var(--ash)}
.g-page{max-width:1180px}

#inicio{border-top:0;padding-top:6vh}
@media (min-width:901px){
  #inicio{
    padding-left:calc(var(--nav-big) - var(--nav) + 3vw);
    min-height:100vh;display:flex;align-items:center;
  }
  #inicio > .g-page{flex:1;min-width:0}
}

h1,h2,h3{font-weight:400;margin:0}
.g-sec > .g-page > h2,
.g-sec > .g-page > h1{
  font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;
  letter-spacing:-.01em;margin:0 0 .4em;
}
.g-sub{font-size:13px;color:var(--silver);margin:0 0 2.2em}
.g-lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:36em;margin:0 0 1em}
.g-muted{color:var(--silver)}
.g-spec{display:grid;grid-template-columns:max-content 1fr;gap:.3em 1.4em;margin:0;font-size:14px;line-height:1.5}
.g-spec dt{color:var(--silver)}
.g-spec dd{margin:0}
.g-list{list-style:none;margin:0;padding:0;font-size:14px}
.g-list li{padding:.42em 0;border-bottom:1px solid var(--ash)}
.g-label{font-size:13px;color:var(--silver);margin:1.8em 0 .4em}

.g-btn{
  display:inline-block;border:1px solid var(--bone);background:none;color:var(--bone);
  padding:.65em 1.15em;font:inherit;font-size:14px;line-height:1.3;
  text-decoration:none;cursor:pointer;
}
.g-btn:hover{background:var(--bone);color:#000}
.g-btn.g-quiet{border-color:var(--ash);color:var(--silver)}
.g-btn.g-quiet:hover{background:none;border-color:var(--bone);color:var(--bone)}

/* ---------- inicio ---------- */
.g-hero-video{
  position:relative;width:min(100%,calc(82vh * 1.314));aspect-ratio:1.314;
  background:#000;overflow:hidden;margin:0 0 1.4em;
}
.g-hero-video video,
.g-hero-video iframe,
.g-hero-video img{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;pointer-events:none;object-fit:cover;background:#000;display:block;
}
/* .g-crop recorta el marco negro que el reproductor de Vimeo deja
   alrededor del cuadro. El fotograma de abajo ya viene limpio, así que
   no se recorta. */
.g-hero-video.g-crop iframe{
  inset:auto;left:-46.7%;top:-22.6%;width:196%;height:144.9%;
}
/* si se usa Vimeo, el iframe se revela al cargar */
.g-hero-video iframe{opacity:0;transition:opacity .6s ease}
.g-hero-video iframe.g-on{opacity:1}
.g-motto{
  font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.2;
  margin:0 0 .4em;color:var(--bone);
}
#inicio h1.g-sub{font-family:var(--mono);font-size:13px;font-weight:400;line-height:1.5;
  letter-spacing:0;color:var(--silver);max-width:44em;margin:0}

/* ---------- renta ---------- */
.g-cams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4vw;margin-top:3em}
.g-camimg{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin:0 0 1em;
  mix-blend-mode:screen}
.g-cam h3{font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;margin:.6em 0 .2em}
.g-price{margin:.2em 0 1.4em;color:var(--silver);font-size:14px}
.g-price b{font-weight:500;color:var(--bone);font-size:17px;margin-right:.35em}
.g-cam .g-btn{margin-top:1.6em}

/* ---------- archivo ---------- */
.g-bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:2.4em 0 1.2em}
.g-search{flex:1 1 320px;display:flex;align-items:center;border:1px solid var(--dim);padding:0 14px}
.g-search:focus-within{border-color:var(--bone)}
.g-search input{flex:1;background:none;border:0;padding:.8em 0;font:inherit;font-size:16px;color:var(--bone);outline:none}
.g-search input::placeholder{color:var(--dim)}
.g-search button,.g-clear{background:none;border:0;font:inherit;font-size:13px;color:var(--silver);
  cursor:pointer;padding:.4em 0 .4em .8em}
.g-clear{padding:0;text-decoration:underline;text-underline-offset:4px}
.g-bar-r{display:flex;gap:20px;align-items:center;font-size:13px;color:var(--silver)}
.g-bar-r select{background:#000;color:var(--bone);border:1px solid var(--ash);padding:.45em .6em;font:inherit;font-size:13px}
.g-arch{display:grid;grid-template-columns:200px minmax(0,1fr);gap:3vw;align-items:start}
.g-facets > summary{display:none}
.g-facets fieldset{border:0;margin:0 0 1.6em;padding:0}
.g-facets legend{font-size:13px;color:var(--silver);padding:0;margin-bottom:.35em}
.g-facets label{display:flex;justify-content:space-between;gap:.6em;font-size:14px;line-height:1.35;
  padding:.28em 0;cursor:pointer}
.g-facets label > span:first-child{display:flex;gap:.55em;align-items:baseline}
.g-facets input{appearance:none;width:11px;height:11px;border:1px solid var(--dim);margin:0;
  background:none;cursor:pointer;flex:none;transform:translateY(1px)}
.g-facets input:checked{background:var(--bone);border-color:var(--bone)}
.g-facets input:disabled{border-color:var(--ash);cursor:default}
.g-facets .g-n{color:var(--dim)}
.g-facets label.g-off{color:var(--dim);cursor:default}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em}
.g-chips:empty{display:none}
.g-chip{display:inline-flex;gap:.5em;align-items:center;border:1px solid var(--ash);background:none;
  color:var(--bone);padding:.3em .7em;font:inherit;font-size:13px;cursor:pointer}
.g-chip:hover{border-color:var(--bone)}
.g-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.2em 1.6em}
.g-card{display:flex;flex-direction:column;min-width:0}
.g-thumb{display:block;width:100%;aspect-ratio:4/3;background:#000;border:0;padding:0;font:inherit;
  cursor:pointer;position:relative;overflow:hidden}
.g-thumb:has(.g-noimg){border:1px solid var(--ash)}
.g-thumb img,.g-thumb video,.g-dprev img,.g-dprev video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;background:#000}
.g-noimg{position:absolute;left:10px;bottom:6px;font-size:12px;color:var(--dim)}
.g-dur{position:absolute;right:8px;bottom:6px;font-size:12px;color:var(--bone);text-shadow:0 0 6px #000}
.g-card h3{font-family:var(--serif);font-size:19px;line-height:1.25;margin:.75em 0 .1em}
.g-card h3 button{background:none;border:0;padding:0;font:inherit;color:var(--bone);text-align:left;cursor:pointer}
.g-card h3 button:hover{text-decoration:underline;text-underline-offset:4px}
.g-where{margin:0;font-size:13px;color:var(--silver)}
.g-row{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-top:.55em;
  font-size:12px;color:var(--dim)}
.g-add{background:none;border:1px solid var(--ash);padding:.28em .6em;font:inherit;font-size:12px;
  cursor:pointer;color:var(--silver);white-space:nowrap}
.g-add:hover{border-color:var(--bone);color:var(--bone)}
.g-add[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:#000}
.g-msg{grid-column:1/-1;color:var(--silver);padding:2em 0}
.g-arch-foot{margin-top:4em;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;
  padding-top:2em;border-top:1px solid var(--ash)}

/* ficha del clip */
.g-dlg{background:#000;color:var(--bone);border:1px solid var(--ash);padding:0;
  width:min(1120px,94vw);max-height:92vh;overflow:auto;font:inherit}
.g-dlg::backdrop{background:rgba(0,0,0,.86)}
.g-dgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.g-dprev{position:relative;aspect-ratio:4/3;background:#000;border-right:1px solid var(--ash);align-self:start}
.g-dinfo{padding:26px 26px 22px;display:flex;flex-direction:column}
.g-dinfo h3{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.2;
  margin:0 0 .5em;padding-right:4.5em}
.g-desc{color:var(--silver);margin:0 0 1.4em}
.g-dact{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6em}
.g-dnav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;
  padding-top:1.6em;font-size:13px;color:var(--silver)}
.g-dnav button,.g-dclose{background:none;border:0;cursor:pointer;color:var(--silver);
  padding:.3em 0;font:inherit;font-size:13px}
.g-dnav button:hover,.g-dclose:hover{color:var(--bone)}
.g-dclose{position:absolute;top:10px;right:14px}

/* selección */
.g-tray{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:9000;
  background:#000;color:var(--bone);border:1px solid var(--ash);display:none;font-size:14px;
  width:auto;max-width:min(480px,calc(100vw - 40px))}
.g-tray.g-show{display:block}
.g-ttog{display:block;width:100%;text-align:left;background:none;border:0;color:var(--bone);
  font:inherit;font-size:13px;padding:.65em 1em;cursor:pointer}
.g-ttog:hover{background:#111}
.g-tpanel{display:none}
.g-tray.g-open{width:min(480px,calc(100vw - 40px))}
.g-tray.g-open .g-tpanel{display:block;padding:0 1em 1em;border-top:1px solid var(--ash)}
.g-tray ol{margin:1em 0;padding-left:2em;max-height:36vh;overflow:auto}
.g-tray li{padding:.2em 0}
.g-tray li button{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:12px;
  margin-left:.6em;text-decoration:underline;text-underline-offset:3px}
.g-tray fieldset{border:0;padding:0;margin:0 0 1em}
.g-tray legend{font-size:13px;color:var(--silver);padding:0;margin-bottom:.3em}
.g-tray label{display:flex;gap:.6em;align-items:baseline;cursor:pointer}
.g-tray input{accent-color:var(--bone)}
.g-tact{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ---------- acervos ---------- */
.g-acervo{position:relative;display:block;overflow:hidden;text-decoration:none;color:var(--bone);
  border:1px solid var(--ash);margin-top:2.4em;background:#000}
.g-acervo img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;opacity:.72;
  transition:opacity .6s ease,transform 3s ease}
.g-acervo:hover img{opacity:.92;transform:scale(1.02)}
.g-acervo-nubes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:screen;opacity:.5;filter:blur(7px)}
.g-acervo-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3.2vw,44px);
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.35) 40%,rgba(0,0,0,.82))}
.g-acervo h3{font-family:var(--fell);font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.05;margin:0 0 .35em}
.g-acervo p{font-family:var(--fell);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.45;
  max-width:34em;margin:0 0 1em;color:var(--bone)}
.g-acervo-go{font-size:13px;color:var(--silver);border-bottom:1px solid var(--dim);padding-bottom:3px}
.g-acervo:hover .g-acervo-go{color:var(--bone);border-color:var(--bone)}

/* ---------- laboratorio / escaneo ---------- */
.g-archivist{display:block;width:100%;max-width:760px;aspect-ratio:4/3;margin:0 0 2em;
  background:url("/assets/img/gruta-escaner-lasergraphics-archivist.svg") no-repeat center/contain}
.g-stages{display:grid;grid-template-columns:200px minmax(0,1fr);margin:3em 0 0;max-width:980px}
.g-stages dt,.g-stages dd{border-top:1px solid var(--ash);padding:1.1em 0;margin:0}
.g-stages dt{color:var(--silver)}
.g-stages dd{max-width:40em}
.g-sec > .g-page > h2.g-h3,
.g-sec > .g-page > h3.g-h3{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.15;margin:3em 0 0}

/* ---------- creación / acerca ---------- */
.g-index{list-style:none;margin:2.4em 0 0;padding:0;max-width:720px}
.g-index li{border-top:1px solid var(--ash);padding:.6em 0;font-family:var(--serif);
  font-size:clamp(1.6rem,2.6vw,2.2rem)}
.g-index li:last-child{border-bottom:1px solid var(--ash)}
.g-areas{display:grid;grid-template-columns:130px minmax(0,1fr);margin:2.4em 0;max-width:40em}
.g-areas dt,.g-areas dd{border-top:1px solid var(--ash);padding:.9em 0;margin:0}
.g-areas dt{font-family:var(--serif);font-size:1.25rem}
.g-areas dd{color:var(--silver)}
.g-prose{max-width:40em}
.g-prose p{margin:0 0 1.2em}

/* ---------- pie ---------- */
.g-foot{padding:8vh 3vw calc(env(safe-area-inset-bottom,0px) + 10vh);border-top:1px solid var(--ash);
  font-size:13px;color:var(--silver);display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;align-items:center}
.g-foot img{width:110px;height:auto;display:block;margin-right:auto}
.g-foot a{text-decoration:none}
.g-foot a:hover{color:var(--bone)}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .g-cams,.g-dgrid,.g-arch-foot{grid-template-columns:minmax(0,1fr)}
  .g-dprev{border-right:0;border-bottom:1px solid var(--ash)}
}
@media (max-width:900px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 62px)}
  .g-nav{bottom:auto;right:0;width:auto;background:#000;border-bottom:1px solid var(--ash);
    padding:calc(env(safe-area-inset-top,0px) + 12px) 20px 12px}
  .g-ntop{display:flex;justify-content:space-between;align-items:center}
  .g-logo img{width:104px}
  .g-menu-btn{display:block}
  .g-nav ul,.g-nfoot{display:none}
  .g-nav.g-open{bottom:0}
  .g-nav.g-open ul{display:block;margin:auto 0}
  .g-nav.g-open .g-nfoot{display:block}
  .g-nav.g-open ul a{font-size:34px;line-height:1.5}
  .g-main,.g-foot{margin-left:0}
  .g-sec{padding:11vh 20px 9vh}
  #inicio{padding-top:92px}
  .g-foot{padding-left:20px;padding-right:20px}
  .g-arch,.g-stages,.g-areas{grid-template-columns:minmax(0,1fr)}
  .g-stages dd,.g-areas dd{border-top:0;padding-top:0}
  .g-facets{border:1px solid var(--ash);padding:0 14px}
  .g-facets > summary{display:block;cursor:pointer;padding:.8em 0;font-size:14px}
  .g-hero-video{width:100%}
}