/* =========================================================
   refine.css — UX/UI refinements (v28.6)
   Se carga DESPUÉS de style.css y de los <style> inline, así
   que ordena el cascado sin tocar los archivos originales.
   No cambia contenido: solo legibilidad, contraste, foco,
   áreas táctiles, responsive y accesibilidad.
   Para volver atrás: quitá el <link> a refine.css.
   ========================================================= */

/* ---------- 0. Base ---------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--ink)}
img{max-width:100%}

/* Foco visible y consistente (antes casi no existía).
   :where() = especificidad 0, no pisa estilos de foco propios. */
:where(a,button,[role="link"],[role="button"],[tabindex]):focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

/* ---------- 1. Navegación ----------
   Problema: el nav era blanco fijo y desaparecía sobre las secciones
   claras (Work / Case studies). mix-blend-mode:difference invierte solo
   el color según el fondo que tenga debajo: blanco sobre negro,
   oscuro sobre papel. Un solo sistema, sin JS por sección. */
.nav,.nav.dark,.nav.profile-light{
  color:#fff;
  mix-blend-mode:difference;
}
.navlinks{font-size:12px;font-weight:500;gap:28px}
.navlinks a,.lang{min-height:32px;display:inline-flex;align-items:center}
.navlinks a::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.nav .navlinks a:hover,.nav.profile-light .navlinks a:hover{color:#fff}
.lang{border:0 !important;border-radius:0;background:none !important;font-size:12px;font-weight:500;letter-spacing:.1em;padding:5px 0;transition:opacity .25s}
.lang::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.lang:hover::after,.lang:focus-visible::after{transform:scaleX(1)}

/* ---------- 2. Hero ---------- */
.hero-copy{
  font-size:clamp(13px,1.05vw,16px);
  font-weight:300;               /* 200 era demasiado fino sobre negro */
  line-height:1.5;
  max-width:560px;
  text-shadow:0 0 22px rgba(0,0,0,.6);
  text-wrap:pretty;
}
.hero-side{font-size:clamp(11px,1vw,13px);font-weight:400;letter-spacing:.08em}
/* Velo inferior: el texto blanco a veces cae sobre la letra gris (#aaa). */
.hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.35) 20%,rgba(0,0,0,0) 38%);
}
@media(max-width:800px){
  .hero-copy{font-size:13px;line-height:1.45}
  .hero-side{font-size:10px}
}
@media(max-width:480px){
  .hero-copy{font-size:12.5px}
  .hero-side{font-size:9px}
}

/* ---------- 3. Rótulos de sección y filtros ---------- */
.section-num,.profile-head .section-num{color:#66665f;font-size:12px}
.contact-label{color:#b4b4ad!important}

.filters{gap:0 30px;margin:0 0 40px 0}
.filter{
  position:relative;
  padding:8px 0;
  font-size:14px;
  font-weight:400;
  color:#66665f;
  transition:color .25s;
}
.filter:hover{color:var(--ink);transform:none}   /* lime sobre papel = contraste 1.2:1 */
.filter.active{color:var(--ink);font-weight:600}
.filter::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.filter.active::after,.filter:hover::after{transform:scaleX(1)}
@media(max-width:800px){
  .filters{gap:0 20px;margin:0 0 26px 0}
  .filter{font-size:13px;padding:4px 0;line-height:1.2}
  .filter::before{content:"";position:absolute;inset:-4px -6px}   /* mantiene el área táctil sin separar las filas */
  .filter::after{bottom:1px}
}

/* ---------- 4. Galería de proyectos: piezas, hover y título ---------- */
.gallery-projects{ --hover-zoom:1.06; }                         /* cuánto se agranda la imagen al pasar el mouse */

/* Piezas rectas, sin borde redondeado */
.gallery-projects .card,
.gallery-projects .thumb,
.gallery-projects .thumb img{border-radius:0 !important}
.gallery-projects .card{background:transparent}
.gallery-projects .thumb{background:#242424}                     /* solo se ve mientras carga la imagen */
.gallery-projects .thumb img{
  filter:none;
  transform:scale(1);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.gallery-projects .card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gallery-projects .card h3{font-size:clamp(17px,1.5vw,24px);line-height:1.05;margin:0}
.gallery-projects .card p{font-size:11px;line-height:1.3;margin:6px 0 0}

/* Título: aparece con la misma animación de siempre (fade + subida), sin velo ni degradé. */
.gallery-projects .card-body{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:0 18px 16px;
  background:none;
  opacity:0;transform:translateY(5px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}

/* Color del título según el fondo de cada imagen (lo detecta main.js, como el menú):
   fondo oscuro → letras claras · fondo claro → letras oscuras. */
.gallery-projects .card[data-tone="dark"] h3{color:#fff}
.gallery-projects .card[data-tone="dark"] p{color:rgba(255,255,255,.8)}
.gallery-projects .card[data-tone="light"] h3{color:#111}
.gallery-projects .card[data-tone="light"] p{color:rgba(17,17,17,.72)}
/* Respaldo si el navegador no deja leer los colores de la imagen: se invierte solo, igual que el menú. */
.gallery-projects .card:not([data-tone]) .card-body{mix-blend-mode:difference}
.gallery-projects .card:not([data-tone]) h3{color:#fff}
.gallery-projects .card:not([data-tone]) p{color:rgba(255,255,255,.85)}

/* Mouse: la imagen se agranda un poco dentro de su marco y aparece el título. */
@media(hover:hover){
  .gallery-projects .card:hover .thumb img{transform:scale(var(--hover-zoom))}
  .gallery-projects .card:hover .card-body{opacity:1;transform:translateY(0)}
}
.gallery-projects .card:focus-visible .thumb img{transform:scale(var(--hover-zoom))}
.gallery-projects .card:focus-visible .card-body{opacity:1;transform:translateY(0)}

/* Táctil: no hay hover. El primer toque muestra el título (clase .is-active, la pone main.js)
   y el segundo toque abre el trabajo. */
@media(hover:none){
  .gallery-projects .card:hover .thumb img{transform:scale(1)}
  .gallery-projects .card:hover .card-body{opacity:0;transform:translateY(5px)}
  .gallery-projects .card.is-active .thumb img{transform:scale(var(--hover-zoom))}
  .gallery-projects .card.is-active .card-body{opacity:1;transform:translateY(0)}
}

/* ---------- 5. Perfil ---------- */
.profile-statement{text-wrap:pretty}
.profile-statement .word{color:#bbbbb2}              /* gris claro: el texto "se enciende" a negro con el scroll */
.profile-statement .word.is-black{color:var(--ink)}

/* El punto del CV: zona de clic más grande, accesible con teclado. */
.blink-dot::before{content:"";position:absolute;inset:-.22em -.3em}
.blink-dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.blink-dot:focus-visible .tooltip{opacity:1}
.blink-dot .tooltip{
  background:#fff;
  color:#111;
  font-size:12px!important;
  font-weight:500!important;
  padding:8px 11px!important;
  border-radius:4px!important;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
}
/* El punto parpadea; el tooltip es hijo del punto y parpadeaba con él. */
.blink-dot:hover,.blink-dot:focus-visible{animation:none;opacity:1}

/* ---------- 6. Contacto y footer ---------- */
.contact-list{
  margin-top:64px;gap:14px 44px;
  font-size:clamp(16px,1.35vw,20px);
  font-weight:300;
}
.contact-list a{
  display:inline-block;padding:8px 0;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1px no-repeat;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .25s;
}
.contact-list a:hover,.contact-list a:focus-visible{color:var(--lime);background-size:100% 1px}
@media(max-width:800px){
  .contact-list{margin-top:48px;gap:6px;font-size:17px}
}
footer{
  font-size:12px;font-weight:400;color:rgba(255,255,255,.78);
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}

/* ---------- 7. Páginas de caso ---------- */
/* "← Todos los trabajos" estaba en el mismo lugar que el nav (se pisaban).
   Pasa a la izquierda, alineado con el margen del título. */
.back{
  position:fixed!important;
  top:22px!important;
  left:5vw!important;
  right:auto!important;
  z-index:51!important;
  padding:5px 0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:#fff;
  mix-blend-mode:difference;
  transition:opacity .25s;
}
.back:hover{opacity:.6}

.case-hero h1{text-wrap:balance;overflow-wrap:break-word}
.case-info p,.case-section p{max-width:62ch;text-wrap:pretty}
.case-section p{line-height:1.6}
.case-external{font-weight:500;padding:8px 0 5px;transition:opacity .25s}
.case-external:hover{opacity:.6}
.case-next a{padding:8px 0}

@media(max-width:800px){
  /* En móvil el back no entra en la fila del nav: baja a una segunda línea. */
  .back{top:58px!important;left:6vw!important}
  /* Títulos largos ("Lubricantes") se cortaban en pantallas de 360px. */
  .case-hero h1{font-size:clamp(40px,13.5vw,130px)}
  .case-next h2{font-size:clamp(46px,15vw,110px)}
  .case-section p,.case-info p{font-size:17px}
}

/* ---------- 8. Reduced motion ----------
   BUG: con "reducir movimiento" el JS no corre, pero el hero seguía
   position:fixed con z-index:2 → tapaba TODO el sitio y no se podía
   llegar a Work, Perfil ni Contacto. Acá pasa a ser una sección normal. */
@media(prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero{position:relative;inset:auto;height:100svh;min-height:100svh;transform:none!important;will-change:auto}
  .hero-name-track{display:flex;align-items:center;padding:0 4vw}
  .hero-name{
    position:static;transform:none!important;white-space:normal;
    font-size:clamp(64px,19vw,34vh);line-height:.8;letter-spacing:-.07em;
  }
  /* El efecto de palabras grises→negras depende de scroll+JS: texto final directo. */
  .profile-statement .word{color:var(--ink)}
  .blink-dot{opacity:1}
}


/* =========================================================
   v28.7 — Ajustes puntuales de la página principal
   ========================================================= */

/* ---------- HERO ---------- */
/* Bloque de texto unos milímetros más abajo (desktop). */
@media(min-width:801px){
  .hero-copy{bottom:calc(11vh - 14px)}
}

/* ---------- PERFIL / WORK: menos aire arriba (desktop) ---------- */
@media(min-width:801px){
  .profile{padding-top:57px;padding-bottom:100px}   /* antes 150 / 150 */
  #work{padding-top:40px}                            /* antes 70 */
}

/* ---------- GALERÍA: cuadrados de dos tamaños en una grilla de 4 columnas ----------
   Grupos de 3 trabajos: 1 GRANDE (2 columnas × 2 filas) + 2 chicas (1 × 1) escalonadas. Todas cuadradas.
   En qué columna va cada pieza de cada grupo se define en main.js (GALLERY_PATTERNS).
   --gap es el ancho de TODAS las calles y también el de los márgenes (arriba, izquierda y derecha):
   12px en desktop, 10px en mobile. */
.gallery-projects{
  --gap:12px;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  column-gap:0 !important;
  row-gap:0 !important;
  align-items:start !important;
  padding:calc(var(--gap) / 2) calc(var(--gap) / 2) 90px !important;
}
.gallery-projects .card{
  align-self:start;
  width:auto;
  margin:calc(var(--gap) / 2) !important;
  transform:none !important;
}
.gallery-projects .card .thumb img{aspect-ratio:1 / 1}            /* proporción de TODAS las piezas (ancho / alto) */

@media(max-width:800px){
  .gallery-projects{--gap:10px;padding-bottom:50px !important}
  /* Título más chico para que entre en las piezas chicas (solo aparece al tocar). */
  .gallery-projects .card-body{padding:0 9px 8px}
  .gallery-projects .card h3{font-size:13px}
  .gallery-projects .card p{font-size:9px;line-height:1.25;margin-top:3px}
}

/* Subtítulo vacío: no ocupa lugar */
.gallery-projects .card p:empty{display:none}

/* Imagen que todavía no está en assets/home: recuadro oscuro con el título siempre visible,
   así sabés qué archivo falta (el nombre del archivo es el data-slot de la tarjeta). */
.gallery-projects .card[data-missing] .thumb{background:#242424}
.gallery-projects .card[data-missing] .thumb img{visibility:hidden}
.gallery-projects .card[data-missing] .card-body{opacity:1;transform:none}
.gallery-projects .card[data-missing] h3{color:#f5f4ed}
.gallery-projects .card[data-missing] p{color:rgba(245,244,237,.7)}

/* Movimiento con scroll: la imagen se desliza DENTRO de su marco (main.js cambia object-position).
   Los marcos quedan fijos, así las calles nunca se pisan. */
.gallery-projects .thumb img{will-change:transform,object-position}

/* Entrada escalonada (la activa main.js; sin JS o con "reducir movimiento" no se oculta nada).
   Usa la propiedad "translate" para no pisarse con el parallax, que usa "transform". */
html.js-reveal .gallery-projects .card{
  opacity:0;
  translate:0 38px;
  transition:none;
}
html.js-reveal .gallery-projects .card.is-in{
  opacity:1;
  translate:0 0;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate 1s cubic-bezier(.2,.7,.2,1);
}

/* ---------- CONTACTO ---------- */
@media(max-width:800px){
  .contact h2{white-space:nowrap}      /* main.js calcula el tamaño para que entre completo */
}

/* ---------- FOOTER: link a sobrelafaz.com ---------- */
.footer-link{transition:color .25s}
.footer-link:hover,.footer-link:focus-visible{color:var(--lime)}

/* ---------- HERO: letras del nombre que se ponen blancas con el mouse ---------- */
.hero-letter{transition:color .25s ease}
@media(hover:hover){
  .hero-letter:hover{color:#fff}
}