/* ============================================================
   SOBRE — la página de quién está detrás.

   El bloque anterior vivía dentro de #studio y se retiró por tres cosas, y la
   segunda es la que gobierna esta hoja: estaba DESPROPORCIONADO. Cuerpo de 15 px
   debajo de un display gigante, una foto de 260 px contra una columna de texto
   ancha, y sin aire entre bloques. Parecía pegado, no diseñado.

   Aquí el texto es lo único que hay, así que sube de tamaño: el cuerpo arranca en
   1.05rem y llega a 1.3, y el ancho de línea se limita en `ch` para que no pase de
   unas 60 y siga leyéndose. La foto pasa de miniatura a plancha de media página.
   ============================================================ */

/* ============================================================
   `both` NO, `backwards`, EN TODO LO QUE LUEGO TIENE HOVER.

   Una animacion con `fill-mode: both` deja su ultimo fotograma aplicado para
   siempre, y las animaciones GANAN a las declaraciones normales en la cascada. Los
   revelados de aqui acaban en `transform:none`, asi que se comian el
   `scale(1.045)` de la foto y el `translateY(-2px)` de los creditos: las reglas
   estaban escritas, eran correctas, y no se aplicaban nunca.

   No se ve leyendo la hoja. Salio de mover el raton de verdad con
   Input.dispatchMouseEvent y leer la matriz: seguia en la identidad.

   `backwards` pinta el fotograma inicial durante el retraso —que es para lo que se
   queria— y AL ACABAR SUELTA el elemento a la cascada. Excepcion: `.sb-g`, los
   glifos del nombre, cuya regla base es `opacity:0`; ahi hace falta `both` o el
   nombre desaparece al terminar. Y no tienen hover, asi que no estorba.
   ============================================================ */

/* La columna del documento. 1120 px sale de sumar lo que mide de verdad el
   arranque: foto 380 + hueco 88 + 58ch de texto ≈ 1100. Puesto mas ancho, los
   bloques flotan sueltos en la izquierda con la mitad derecha desnuda, que es
   exactamente lo que se le reprocho al bloque que vivia en la home. */
.sb{ background:var(--field); --sb-col:1120px; }
.sb-hero, .sb-ficha, .sb-fin, .sb-in{
  max-width:calc(var(--sb-col) + var(--gut) * 2);
  margin-inline:auto; width:100%;
}
/* el interior de la banda: la banda sangra, su contenido no */
.sb-in{ padding-inline:var(--gut); }

/* .sb-nav (el filete entre los dos enlaces de la barra) vive en obra.css: lo usan
   esta página y el índice de obra, y un token no se declara dos veces. */

/* ---------------- el arranque ---------------- */
.sb-hero{
  display:grid; gap:clamp(24px,4vw,60px);
  /* La reserva de arriba es la de .ob-head, que es la que ya esta medida contra
     esta misma cabecera fija. No inventes una variable: --barh no existe. */
  padding:clamp(96px,13vh,150px) var(--gut) clamp(48px,7vw,96px);
  align-items:center;
}
@media (min-width:900px){
  /* La foto ocupa una columna de verdad —hasta 420 px— y no un sello de 260. Es la
     única cara real del sitio: si va pequeña, el bloque no tiene peso. */
  .sb-hero{ grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(40px,5vw,88px); }
}

/* ---------------- la foto ----------------
   MARCO COMPLETO, SIEMPRE PUESTO, Y PARALAJE 3D.

   Aqui hubo un passe-partout desplazado que se cerraba en hover, y sus cuatro
   objeciones eran justas: se veia descuadrado, no rodeaba la foto, no pega con la
   casa, y encima DESAPARECIA al pasar el cursor, que es lo contrario de lo que
   hace un marco. El error de fondo fue tomar prestado un gesto de diseno impreso
   -carton, passe-partout- para una casa que no es eso.

   Ahora el marco rodea la plancha entera y no se va nunca. Lo que se mueve es la
   PROFUNDIDAD: el conjunto se inclina siguiendo el cursor sobre una perspectiva
   real, con el marco un plano por delante de la imagen. Al inclinar, el marco
   recorre mas camino que la foto -paralaje- y el conjunto se lee como un objeto y
   no como dos capas de CSS.

   LA FIGURA NO SE MUEVE NUNCA: lleva la perspectiva y define el hueco de la
   rejilla. Lo que rota es el plano de dentro. Asi el parrafo de al lado no se
   entera (regla 28).

   Sin JS no hay --rx ni --ry, los `var()` caen a 0deg y queda el marco quieto.  */
.sb-foto{
  margin:0; position:relative;
  perspective:1100px;
  perspective-origin:50% 45%;
}

.sb-foto-3d{
  display:block; position:relative;
  transform-style:preserve-3d;
  /* las dos variables las escribe el JS con la posicion del cursor; sin el, 0 */
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .5s var(--ease-s);
  will-change:transform;
}
/* mientras el dedo/cursor esta encima se sigue al instante; al salir, vuelve con
   calma. Dos duraciones para dos cosas distintas. */
.sb-foto-3d[data-sigue="1"]{ transition:transform .12s linear; }

/* EL MARCO. Rodea la plancha entera, un paso por delante en Z. Ese `translateZ`
   es lo unico que produce el paralaje: sin el, se inclinaria pegado a la foto y no
   se notaria que hay profundidad. */
.sb-foto-3d::before{
  content:""; position:absolute; inset:calc(var(--m, 10px) * -1);
  border:1.5px solid var(--acc);
  transform:translateZ(26px);
  pointer-events:none;
  --m:clamp(8px,1vw,13px);
}
/* y su sombra, que cae del marco hacia la pagina y da el suelo */
.sb-foto-3d::after{
  content:""; position:absolute; inset:0;
  transform:translateZ(-30px);
  box-shadow:0 40px 70px -30px color-mix(in oklab, var(--deep) 92%, black);
  pointer-events:none;
}

.sb-foto-caja{
  position:relative; display:block; overflow:hidden;
  outline:1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  animation:sbFoto .9s var(--ease) backwards;
}
.sb-foto img{
  display:block; width:100%; height:auto;
  transition:transform .6s var(--ease);
}

/* EL BRILLO. Un especular que barre en el sentido de la inclinacion: es lo que
   remata que la plancha parezca una superficie y no una imagen. Va dentro de la
   caja que recorta, y su centro lo mueven las mismas variables del cursor. */
.sb-foto-caja::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(
    60% 50% at var(--lx, 50%) var(--ly, 30%),
    color-mix(in oklab, white 30%, transparent), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease-s);
  mix-blend-mode:soft-light;
}
.sb-foto:hover .sb-foto-caja::after{ opacity:1; }
/* la imagen respira un poco, dentro de la caja que no se mueve */
.sb-foto:hover img{ transform:scale(1.035); }

@media (min-width:900px){ .sb-foto{ max-width:380px } }

@keyframes sbFoto{
  from{ opacity:0; transform:scale(1.03); }
  to{ opacity:1; transform:none; }
}

.sb-rol{
  color:var(--acc); margin:0 0 .55em;
  letter-spacing:.14em; font-size:.78rem;
}

/* EL NOMBRE ES EL TITULAR de la página, así que se comporta como los titulares de
   la casa: display, caja alta, ancho estrecho y muy pesado. Pero se le pone un
   tope en `ch` porque «Pedro Rufete Garrido» son tres palabras largas y a pantalla
   ancha se iba a cuatro líneas de 90 px. */
.sb-nom{
  margin:0 0 clamp(18px,2.4vw,30px);
  font-family:var(--display); font-variation-settings:"wdth" 88,"wght" 800;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.92;
  /* 6vw dejaba el nombre en UNA linea de 358 px sobre 358 disponibles a 390: sin
     un pixel de aire a ninguno de los dos lados. Con 10.5vw parte en dos lineas y
     gana cuerpo, que es lo que un titular quiere en un movil. Medido, no
     estimado. */
  font-size:clamp(2.5rem, 10.5vw, 4.4rem);
  max-width:18ch;
}
/* La PALABRA es la que lleva el inline-block. Sin esto, 18 letras en 18 cajas
   sueltas y el navegador corta donde le cabe: «PEDRO RUFE / TE GARRIDO». */
.sb-w{ display:inline-block; }
/* revelado glifo a glifo: el JS envuelve cada letra y aquí se escalonan */
.sb-g{ display:inline-block; opacity:0; transform:translateY(.14em);
  animation:sbG .5s var(--ease) both; }
@keyframes sbG{ to{ opacity:1; transform:none; } }

.sb-cuerpo{ display:grid; gap:.9em; max-width:58ch; }
.sb-cuerpo p{
  margin:0; color:var(--ink-2); text-wrap:pretty;
  font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.62;
}
/* La frase que vende va en tinta principal y con filete: es la que tiene que
   quedarse, y en el bloque anterior se perdía al mismo tamaño que el resto. */
.sb-punch{
  color:var(--ink) !important;
  border-left:2px solid var(--acc); padding-left:.9em;
  font-size:clamp(1.1rem,1.5vw,1.45rem) !important;
}

/* ---------------- los créditos ---------------- */
.sb-cred{
  padding:clamp(40px,6vw,86px) 0;
  border-block:1px solid var(--line-2);
  background:color-mix(in oklab, var(--deep) 86%, transparent);
}
.sb-cred-lab{ color:var(--acc); margin:0 0 clamp(18px,2.4vw,30px); letter-spacing:.14em; }
/* UNA SOLA LINEA, Y DE BORDE A BORDE.
   Estaban a 3,1rem con huecos fijos de 52 px: no cabian, «080 BARCELONA» caia
   sola a la segunda linea y el boton se quedaba flotando en un cuadrante vacio.

   `space-between` reparte el aire el navegador, asi que lo unico que hay que
   garantizar es que los 44 caracteres de los cinco nombres quepan en el ancho de
   la columna. En Anybody a wdth 84 un caracter mide ~0,52em: 44 x 0,52 = 22,9em,
   y en 1120 px eso da 48 px de cuerpo. Se baja a 2,4rem para que quede aire.
   Medido contra el scrollWidth de la fila, no estimado (regla 20). */
.sb-cred-lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.35em clamp(14px,2vw,30px);
}
@media (min-width:1000px){
  .sb-cred-lista{ justify-content:space-between; flex-wrap:nowrap; gap:0 1em; }
}
.sb-cred-lista li{
  font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 760;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
  /* 2,4rem y no 3,1: es el cuerpo maximo con el que los cinco nombres caben en
     una linea en la columna de 1120 px. Si anades un sexto credito, hay que
     volver a medir: la cuenta esta en el comentario de .sb-cred-lista.
     El minimo se queda en 1,5rem, que es el que tenian: en movil van en dos lineas
     de todas formas, asi que el tope de la linea unica no aplica y achicarlos no
     compra nada. */
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  /* ENCENDIDOS SIEMPRE. Aqui hubo un ciclo que iba encendiendo uno y apagando los
     otros cuatro, y su queja fue justa: al acercar el cursor se paraba, y algo en
     marcha que se detiene cuando te acercas se lee como que lo has roto.
     Ahora no hay nada que parar. La animacion es un revelado escalonado la primera
     vez que la banda entra en pantalla, y despues quietos. */
  color:var(--ink);
  transition:color .28s var(--ease-s), transform .28s var(--ease-s);
}
/* el hover LEVANTA, no revela (regla 8): naranja y dos pixeles arriba */
.sb-cred-lista li:hover{ color:var(--acc); transform:translateY(-2px); }

/* el revelado: el JS pone data-rev="1" en la lista y cada nombre entra con su
   retraso. Sin JS no hay atributo y estan simplemente puestos. */
.sb-cred-lista[data-rev="1"] li{
  animation:sbCred .55s var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes sbCred{
  from{ opacity:0; transform:translateY(.22em); }
  to{ opacity:1; transform:none; }
}
.sb-sl{ color:var(--acc); }
/* La coda de la banda: a la izquierda lo que se hizo, a la derecha donde verlo.
   En una fila, porque los dos son la misma clase de letra y en dos parrafos
   seguidos el enlace se leia como una tercera cosa suelta. */
.sb-cred-pie-row{
  margin:clamp(20px,2.6vw,32px) 0 0;
  /* `center` y no `baseline`: con un boton dentro, la linea base del texto del
     boton alineada con la del parrafo deja la pastilla descolgada hacia abajo. */
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6em clamp(20px,3vw,44px);
  border-top:1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  padding-top:clamp(14px,1.8vw,22px);
}
.sb-cred-pie{ margin:0; color:var(--ink-2); }
/* BOTON, y al extremo, que es donde se busca una salida. Toma `.cta` de d.css
   —la misma pastilla naranja del brief— y aqui solo se le da la caja y la flecha:
   un segundo boton naranja en la pagina tiene que ser el MISMO boton, no un primo
   parecido. */
.sb-cred-cta{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; gap:.5em;
  min-height:44px; text-decoration:none;
}
.sb-cred-cta i{ font-style:normal; transition:transform .22s var(--ease-s); }
.sb-cred-cta:hover i{ transform:translate(2px,-2px); }
@media (prefers-reduced-motion: reduce){
  .sb-cred-cta i{ transition:none }
  .sb-cred-cta:hover i{ transform:none }
}

/* ---------------- la ficha ---------------- */
.sb-ficha{ padding:clamp(40px,6vw,80px) var(--gut) 0; }
/* La columna entera, no 760. Con tope, la ficha quedaba mas estrecha que la fila
   de creditos de arriba y se leia como un bloque huerfano pegado a la izquierda. */
.sb-dl{ max-width:none; }
.sb-ficha-lab{ color:var(--acc); margin:0 0 clamp(14px,1.8vw,22px); letter-spacing:.14em; }
/* LA FICHA MANDA MAS QUE EN LA HOME. `.dl` de d.css esta calibrado para vivir
   dentro de un panel estrecho: dt a .58rem (9,3 px) y dd a .85rem. Aqui es una
   seccion entera de una pagina de lectura y se veia pequena y sin peso.
   Sube todo: la etiqueta a .86rem, el valor a 1.15 y en semibold, y la fila gana
   aire vertical para que la lista se lea como una ficha tecnica y no como una
   tabla apretada. */
.sb-dl dt{
  font-size:.86rem; letter-spacing:.14em; font-weight:600;
  color:color-mix(in oklab, var(--ink) 74%, transparent);
}
.sb-dl dd{
  font-size:clamp(1.02rem,1.2vw,1.15rem); font-weight:600; color:var(--ink);
  letter-spacing:-.005em;
}
.sb-dl div{
  padding:clamp(13px,1.5vw,18px) 0;
  border-bottom:1px solid color-mix(in oklab, var(--ink) 15%, transparent);
}
/* la primera lleva filete arriba tambien: asi la ficha es un bloque cerrado y no
   una lista que empieza en el aire */
.sb-dl div:first-child{ border-top:1px solid color-mix(in oklab, var(--ink) 15%, transparent); }

/* LA ENTRADA. Las filas se descuelgan una tras otra cuando la ficha aparece, 70 ms
   de diferencia. Va detras de un atributo que pone el JS: sin JS la ficha esta
   entera y quieta, que es lo que tiene que pasar (regla 22). */
.sb-dl[data-rev="1"] div{
  animation:sbFila .5s var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 70ms);
}
@keyframes sbFila{
  from{ opacity:0; transform:translateY(.5em); }
  to{ opacity:1; transform:none; }
}

/* ---------------- el cierre ---------------- */
.sb-fin{
  padding:clamp(48px,7vw,100px) var(--gut) clamp(64px,9vw,130px);
  display:grid; gap:clamp(14px,1.8vw,22px); justify-items:start;
}
.sb-fin-h{ max-width:22ch; }
.sb-fin-p{
  margin:0; color:var(--ink-2); max-width:60ch; text-wrap:pretty;
  font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.6;
}
.sb-fin-cta{ margin:clamp(8px,1.2vw,14px) 0 0; }
.sb-cta{ display:inline-flex; align-items:center; min-height:48px; padding-inline:1.5em; }
/* Aqui vivia `.sb-fin-alt`, el pie con el portfolio y LinkedIn. Retirado: el
   enlace subio a la coda de la banda de creditos y LinkedIn sale del sitio. */

/* ---------------- el móvil ----------------
   Apilado, la foto centrada y más pequeña, y el nombre sin el tope de 18ch, que a
   390 px partía «GARRIDO» en dos. Va al final de la hoja a propósito: una media
   query no añade especificidad, así que puesta antes pierde. */
@media (max-width:899px){
  .sb-hero{ justify-items:start; }

  /* LA FOTO DEJA SITIO AL MARCO. El marco sobresale por los cuatro lados, asi que
     a sangre de columna se saldria por los cantos y quedaria cortado: se lee como
     un error de recorte, no como un marco. Se le restan los dos margenes. */
  .sb-foto{ max-width:calc(100% - clamp(8px,1vw,13px) * 2); margin-inline:clamp(8px,1vw,13px); }

  /* LA FICHA SE APILA. `.dl div` de d.css es un flex con `space-between` y el
     valor a la derecha: calibrado para un panel estrecho con valores cortos. Aqui,
     con «Direccion · montaje · color · sonido» a 390 px, partia la etiqueta en dos
     lineas («LO QUE / HAGO») y dejaba «sonido» solo en la suya. Apilado se lee de
     corrido y el filete sigue cerrando cada fila. */
  .sb-dl div{ display:grid; gap:.25em; justify-content:start; }
  .sb-dl dd{ text-align:left; }
  /* El boton se cae a su propia linea, y ahi el `margin-inline-start:auto` lo
     dejaba pegado a la derecha debajo de un pie alineado a la izquierda: dos
     alineaciones distintas en dos lineas seguidas se leen como descuadre. En
     apilado manda la columna. */
  .sb-cred-cta{ margin-inline-start:0; }
  .sb-nom{ max-width:none; }
  .sb-cuerpo{ max-width:none; }
}
@media (pointer:coarse){
  /* en tactil el hover no existe y ademas se queda pegado: al tocar la pantalla
     dejaria un nombre en naranja y levantado sin que nadie lo haya pedido */
  .sb-cred-lista li:hover{ color:var(--ink); transform:none; }
  /* en tactil no hay cursor que seguir: el marco se queda quieto y centrado, que
     es el estado dibujado. Un hover pegado dejaria la foto ampliada y el brillo
     encendido para siempre despues de un solo toque. */
  .sb-foto:hover img{ transform:none; }
  .sb-foto:hover .sb-foto-caja::after{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .sb-foto-caja, .sb-g{ animation:none; opacity:1; transform:none; }
  .sb-cred-lista li,
  .sb-cred-lista[data-rev="1"] li{ animation:none; transition:none; color:var(--ink);
    opacity:1; transform:none; }
  /* el marco se queda donde esta y nada se inclina: el objeto se ve igual, solo
     no se mueve. La sombra y el marco siguen ahi, que son dibujo y no animacion. */
  .sb-foto-3d{ transform:none !important; transition:none; }
  .sb-foto img{ transition:none; }
  .sb-foto:hover img{ transform:none; }
  .sb-foto:hover .sb-foto-caja::after{ opacity:0; }
  .sb-dl div{ animation:none !important; opacity:1 !important; transform:none !important; }
}