/* Estilos de toda la web (portada y páginas de proyecto). Lenguaje: fondo grafito, crema, grotesca en mayúsculas y mono chica. */
:root{
  --bg:#1A1C1C; --bg2:#111313; --bg3:#232626; --fg:#F9F4EB; --dim:rgba(249,244,235,.55); --line:rgba(249,244,235,.16);
  --gris:#BDBAB3; --rojo:#E5322D;
  --sans:"Inter Tight",Helvetica,Arial,sans-serif; --mono:"Sometype Mono",ui-monospace,monospace;
  --gut:clamp(16px,2.8vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg)}
/* grano de video analógico en todo el fondo gris (el mismo del reel de la portada): una baldosa de ruido (img/grano.png) que salta de lugar ~12 veces por segundo, detrás de todo el contenido, así que las imágenes no lo llevan.
   Para sacarlo: borrar esta regla y la de .sobre-foto::after (home.css). Las secciones con fondo propio lo tapan: .dest ya no lo tiene. */
html::before{content:'';position:fixed;inset:-160px;z-index:-1;pointer-events:none;background:url(../img/grano.png) 0 0/140px 140px;opacity:.1;animation:grano .8s steps(1) infinite;will-change:transform}
@keyframes grano{0%{transform:translate(0,0)}10%{transform:translate(-60px,40px)}20%{transform:translate(50px,-80px)}30%{transform:translate(-110px,-30px)}40%{transform:translate(90px,70px)}50%{transform:translate(-40px,110px)}60%{transform:translate(120px,-60px)}70%{transform:translate(-90px,-100px)}80%{transform:translate(30px,90px)}90%{transform:translate(-20px,-50px)}}
@media (prefers-reduced-motion:reduce){.hero-grano,html::before,.sobre-foto::after{animation:none}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3}
.kick{display:inline-block;color:var(--fg)}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.82}
h1{font-size:clamp(46px,5vw,86px)}
h2{font-size:clamp(46px,5vw,86px)}
.grande{font-size:clamp(24px,2.9vw,46px);line-height:1.08;letter-spacing:-.015em;font-weight:400;text-indent:16%}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 18px;border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.claro{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill{display:inline-flex;align-items:center;gap:18px;height:50px;padding:0 18px 0 10px;transition:filter .2s}
.pill img{width:30px;height:30px;object-fit:cover;filter:grayscale(1)}
.pill.claro{background:var(--gris);color:var(--bg2)}
.pill.oscuro{background:var(--bg2);color:var(--fg)}
.pill:hover{filter:brightness(1.12)}

/* pantalla de carga */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;font-family:var(--mono);font-size:11px;transition:opacity .6s .1s,visibility .6s .1s}
body:not(.cargando) .loader{opacity:0;visibility:hidden}

/* barra flotante */
.bar{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(438px,calc(100vw - 32px));z-index:50;background:rgba(17,19,19,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:3px}
.bar-top{height:50px;display:grid;grid-template-columns:50px 1fr 50px;align-items:center;padding:0 2px}
.bar .logo{display:grid;place-items:center}
.bar-top .mono{text-align:center}
.burger{width:50px;height:50px;display:grid;place-content:center;gap:4px}
.burger i{display:block;width:18px;height:2px;background:var(--fg);transition:transform .3s,opacity .3s}
.bar.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bar.open .burger i:nth-child(2){opacity:0}
.bar.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.menu > *{min-height:0}
.bar.open .menu{grid-template-rows:1fr}
.menu{grid-template-columns:1fr}
.menu > a{padding:0 22px;height:0;overflow:hidden;font-size:15px;display:flex;align-items:center;border-top:1px solid transparent;transition:height .4s,border-color .4s}
.bar.open .menu > a{height:50px;border-color:var(--line)}
.menu-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;height:0;overflow:hidden;transition:height .4s,padding .4s}
.bar.open .menu-btns{height:66px;padding:8px}
.menu-btns .btn{justify-content:center}

/* columna derecha */
.stack{position:fixed;top:16px;right:16px;width:160px;z-index:45;display:flex;flex-direction:column;gap:4px}
.stack > .pill{width:100%}
.panel{background:rgba(17,19,19,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.panel-h{width:100%;height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 12px}
.panel-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.panel-b > *{min-height:0;overflow:hidden}
.panel.abierto .panel-b{grid-template-rows:1fr}
.panel:not(.abierto) .panel-b{visibility:hidden;height:0}
.cv-mini{display:flex;flex-direction:column;gap:6px;margin:0 12px 12px;padding:14px 12px;background:var(--fg);color:var(--bg2);font-size:13px;line-height:1.15}
.cv-mini span:not(.mono){font-size:11px}
.cv-mini .mono{margin-top:10px}

/* pie con reloj */
.pie{display:flex;gap:clamp(16px,4vw,64px);align-items:center;height:52px;border-top:1px solid var(--line)}
.pie .sp{flex:1}
.pie a:hover{opacity:.6}
.reloj i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rojo);vertical-align:1px;margin:0 4px;animation:titila 1s steps(2) infinite}
@keyframes titila{50%{opacity:.2}}


/* cursor flotante sobre los casos */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--gris);color:var(--bg2);height:50px;padding:0 16px;display:flex;align-items:center;
  transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .2s,transform .25s}
.cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (max-width:860px){
  .stack{display:none}
  .pie{flex-wrap:wrap;height:auto;padding:14px 0;gap:10px 22px}
  .pie .sp{display:none}
  .grande{text-indent:10%}
  .cursor{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* celular: textos y controles más grandes (en compu quedan los tamaños de siempre) */
@media (max-width:860px){
  .mono{font-size:12.5px}
  .loader{font-size:12.5px}
  .cv-mini span:not(.mono){font-size:12.5px}
  .pie a,.pie span a{display:inline-flex;align-items:center;min-height:44px}
}