/* -------------------------------------------------------------------------
   Tipografías alojadas en nuestro servidor. Ni una petición a Google: menos
   latencia, sin terceros y sin aviso de cookies por este motivo.
   font-display:swap → el texto se lee desde el primer momento.
   ------------------------------------------------------------------------- */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/archivo-700.woff2") format("woff2"); }
@font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/archivo-black-400.woff2") format("woff2"); }
@font-face{ font-family:"Space Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/space-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"Space Mono"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/space-mono-700.woff2") format("woff2"); }
/* Bebas Neue Pro Bold (11 oct 2026): fuente del panel de salidas, en la
   carpeta Portfolio/aeropuerto del Drive. Condensada, mayúsculas-friendly,
   lo que exige un Solari: una sola variante basta porque las placas son
   todas mayúsculas y del mismo peso. Convertida a WOFF2 (40 KB) desde el
   OTF original (126 KB). */
@font-face{ font-family:"Bebas Neue Pro"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/bebas-neue-pro-bold.woff2") format("woff2"); }

/* =========================================================================
   DREU — base del tema
   Todo el aspecto se controla desde las variables de :root. Cambiar la piel
   entera es cambiar estos valores, no reescribir el CSS.
   ========================================================================= */

:root{
  /* --- color (paleta DREU de partida; se puede sustituir entera) --- */
  --w:#FFFBF0;   /* papel  */
  --k:#111111;   /* tinta  */
  --r:#E8220C;   /* rojo   */
  --y:#F5C400;   /* amarillo */
  --b:#0D2BB8;   /* azul   */
  --g:#12A84A;   /* verde  */

  --fondo:var(--w);
  --superficie:#F6F1E3;      /* bloques que se separan del papel */
  --texto:var(--k);
  --texto-suave:#5A564C;
  --linea:#E0DACB;
  --acento:var(--r);
  --cian:#0E8C8C;            /* el color de Rita, atenuado para fondo claro */

  /* --- tipografía --- */
  --display:"Archivo Black","Helvetica Neue",Impact,sans-serif;
  --cuerpo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --paso: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  --ancho: 1180px;
  --ancho-texto: 68ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --fondo:#101014;          /* negro con una pizca de azul: menos plano */
    --superficie:#191921;
    --texto:#F4F1E8;
    --texto-suave:#9A968C;
    --linea:#2C2C36;
    --acento:#FF5A3C;         /* el rojo puro no aguanta sobre negro */
    --cian:#4FD6D6;
  }
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:clamp(16px,15px + .2vw,17.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,video,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* --- accesibilidad --- */
.saltar{
  position:absolute; left:-9999px;
  background:var(--texto); color:var(--fondo);
  padding:10px 16px; z-index:100;
}
.saltar:focus{ left:12px; top:12px; }
:focus-visible{ outline:3px solid var(--acento); outline-offset:3px; }

/* --- estructura --- */
.envoltorio{
  width:min(100% - 2*var(--paso), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(2rem,5vw,4.5rem);
}

.cabecera{
  display:flex; align-items:baseline; gap:var(--paso);
  flex-wrap:wrap;
  width:min(100% - 2*var(--paso), var(--ancho));
  margin-inline:auto;
  padding-block:.8rem;
  border-bottom:1px solid var(--texto);
}
.marca{
  font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em;
  text-decoration:none;
}
.nav{ margin-left:auto; }
.nav-lista{
  display:flex; gap:1.5rem; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
  font-family:var(--cuerpo); font-weight:400; font-size:.85rem;
  letter-spacing:0;
}
.nav-lista a{ text-decoration:none; padding-block:.2rem; }

/* En móvil, todo centrado: el nombre y el menú, no pegados a la izquierda. */
@media (max-width:820px){
  .cabecera{ flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
  .nav{ margin-left:0; }
  .nav-lista{ justify-content:center; }
}
.nav-lista a:hover,
.nav-lista .current-menu-item > a{ color:var(--acento); }

/* --- tipografía de contenido --- */
.titulo-seccion{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,1.2rem + 3.6vw,4rem);
  line-height:1.02; letter-spacing:-.025em;
  margin:0 0 1.2rem; text-wrap:balance;
}
.prosa{ max-width:var(--ancho-texto); }
.prosa > * + *{ margin-top:1rem; }
.prosa h2{ font-family:var(--display); font-weight:400; font-size:1.6rem; margin-top:2.2rem; }
.prosa a{ color:var(--acento); text-underline-offset:3px; }

/* --- rejilla de tarjetas --- */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(1rem,2.4vw,2rem);
  margin-block:2rem;
}
.tarjeta-enlace{ text-decoration:none; display:block; }
.tarjeta-imagen{
  margin:0 0 .7rem; overflow:hidden;
  background:var(--linea); aspect-ratio:4/3;
}
.tarjeta-imagen img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tarjeta-enlace:hover .tarjeta-imagen img{ transform:scale(1.04); }
.tarjeta-titulo{
  font-family:var(--cuerpo); font-weight:700; font-size:1.05rem; margin:0;
}

/* --- pie --- */
.pie{
  width:min(100% - 2*var(--paso), var(--ancho));
  margin-inline:auto;
  padding-block:2.5rem;
  border-top:1px solid var(--linea);
  font-family:var(--mono); font-size:.8rem; color:var(--texto-suave);
}
.pie-marca{ font-family:var(--display); font-size:1.1rem; color:var(--texto); margin:0 0 .3rem; }
.pie p{ margin:0 0 .35rem; }
.pie-lista{ list-style:none; display:flex; gap:1rem; padding:0; margin:.8rem 0; }

/* =========================================================================
   Escenario por capas de la portada.
   El JavaScript solo escribe --mx y --my. El movimiento lo hace el CSS.
   ========================================================================= */

.escenario{
  position:relative;
  perspective:1200px;
  min-height:min(80vh,760px);
  overflow:clip;
}
.capa{
  position:absolute; inset:0;
  will-change:transform;
  transform:translate3d(
    calc(var(--mx,0) * var(--factor,0) * 40px),
    calc(var(--my,0) * var(--factor,0) * 28px),
    0
  );
  transition:transform .12s linear;
}
.capa--fondo{ --factor:.15; filter:blur(1px); opacity:.85; }
.capa--medio{ --factor:.45; }
.capa--frente{ --factor:.85; }

@media (prefers-reduced-motion: reduce){
  .capa{ transform:none !important; transition:none; }
  .tarjeta-imagen img{ transition:none; }
}

/* En móvil no hay ratón: el escenario se apila y se lee con el dedo. */
@media (max-width: 860px){
  .escenario{ perspective:none; min-height:0; overflow:visible; }
  .capa{ position:static; transform:none !important; filter:none; opacity:1; }
}

/* =========================================================================
   Portada
   ========================================================================= */

.escenario{
  display:grid;
  place-items:center;
  padding-block:clamp(3rem,9vw,7rem);
  min-height:min(72vh,700px);
}
/* Las tres capas comparten celda: se apilan una encima de otra. */
.escenario > .capa{ grid-area:1/1; position:relative; inset:auto; width:100%; }

.capa--fondo{
  display:grid; place-items:center;
  pointer-events:none;
}
/* El eco: el mismo logotipo, enorme y casi invisible. Da fondo sin pesar
   nada, porque es el mismo fichero ya descargado. */
.eco{
  width:min(190%,1900px); max-width:none;
  opacity:.05;
  filter:blur(2px);
  transform:rotate(-4deg);
}
@media (prefers-color-scheme: dark){ .eco{ opacity:.09; } }

.capa--frente{ display:grid; place-items:center; }
.logo-principal{
  width:min(88%,760px);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.14));
}
@media (prefers-color-scheme: dark){
  .logo-principal{ filter:invert(1) drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
  .eco{ filter:invert(1) blur(2px); }
}

/* Objetos del escenario: se colocan por porcentaje desde el escritorio. */
.capa--medio{ position:relative; min-height:1px; }
.objeto{
  position:absolute;
  left:var(--x,50%); top:var(--y,50%);
  width:clamp(90px,14vw,200px);
  transform:translate(-50%,-50%) scale(var(--s,1));
  text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.objeto:hover, .objeto:focus-visible{ transform:translate(-50%,-50%) scale(calc(var(--s,1) * 1.08)) rotate(-1.5deg); }
.objeto img{ width:100%; height:auto; }
.objeto-etiqueta{
  display:block; margin-top:.4rem;
  font-family:var(--mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--texto-suave);
  opacity:0; transition:opacity .25s;
}
.objeto:hover .objeto-etiqueta,
.objeto:focus-visible .objeto-etiqueta{ opacity:1; }

/* --- texto de la portada --- */
.portada-texto{ padding-top:0; }
.entradilla{
  font-family:var(--mono); font-size:.85rem;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--texto-suave); margin:0 0 2rem;
}
.atajos{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.atajo{
  font-family:var(--display); font-size:clamp(1.4rem,1rem + 2vw,2.4rem);
  letter-spacing:-.02em; text-decoration:none; line-height:1;
  padding:.35em .6em;
  border:2px solid var(--texto);
  transition:background .2s, color .2s, transform .2s;
}
.atajo:hover, .atajo:focus-visible{
  background:var(--texto); color:var(--fondo); transform:translateY(-2px);
}

/* Presentación de Andrés, debajo de los atajos (19 sep 2026). Una sola
   decisión tipográfica: la primera frase entra a tamaño titular —como una
   firma— y el resto se lee como cuerpo de texto normal. Nada de cajas,
   comillas ni iconos encima: el peso lo pone la propia tipografía. */
/* Más ancha que el --ancho-texto normal (68ch): con esa medida la caja
   quedaba bastante más estrecha que los botones de arriba y que la fila de
   clientes de abajo, y aunque estaba centrada de verdad, se veía como una
   columna suelta que no encajaba con el resto. 820px se acerca mucho más al
   ancho real de los botones sin perder la comodidad de lectura. */
.presentacion{ max-width:820px; }
.presentacion-lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.6vw,1.9rem);
  line-height:1.2; letter-spacing:-.015em;
  color:var(--texto);
  margin:0 0 1.3rem;
}
/* El nombre, más grande que el resto de la frase de entrada: es la firma.
   En línea, no en bloque aparte —si no, la coma que sigue queda huérfana al
   principio del siguiente renglón. */
.presentacion-nombre{
  font-size:1.55em;
  letter-spacing:-.02em;
}
.presentacion p{
  font-size:clamp(1rem,.95rem + .2vw,1.08rem);
  line-height:1.7;
  color:var(--texto-suave);
  margin:0 0 1.1rem;
}
.presentacion p:last-child{ margin-bottom:0; }

/* Texto que solo leen los lectores de pantalla y los buscadores. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (max-width:860px){
  .escenario{ min-height:0; padding-block:2.5rem; }
  .eco{ display:none; }              /* en móvil el eco solo estorbaría */
  .objeto{ position:static; transform:none; width:auto; }
  .capa--medio{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
}

/* --- RITA en el menú: es una puerta, no un enlace más --- */
.nav-lista .menu-item a[href*="/rita"]{
  color:var(--fondo);
  background:var(--texto);
  padding:.25em .7em;
  position:relative;
}
.nav-lista .menu-item a[href*="/rita"]::after{
  content:"●"; font-size:.55em; vertical-align:.25em; margin-left:.45em;
  color:#4FD6D6; animation:latido 2.4s ease-in-out infinite;
}
.nav-lista .menu-item a[href*="/rita"]:hover{ background:#4FD6D6; color:#080B0C; }
@keyframes latido{ 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion:reduce){
  .nav-lista .menu-item a[href*="/rita"]::after{ animation:none; }
}
/* En la página de Rita, la cabecera del sitio se pone a tono. */
.es-rita{ background:#080B0C; color:#CDE3E3; }
.es-rita .cabecera{ border-bottom-color:#4FD6D6; }
.es-rita .marca{ color:#CDE3E3; }
.es-rita .nav-lista a{ color:#6C8687; }
.es-rita .nav-lista a:hover, .es-rita .nav-lista .current-menu-item > a{ color:#4FD6D6; }
.es-rita .pie{ border-top-color:rgba(79,214,214,.2); color:#6C8687; }
.es-rita .pie-marca{ color:#CDE3E3; }
.es-rita .contenido{ padding:0; }


/* =========================================================================
   SOBRE MÍ
   ========================================================================= */

/* --- aparición al hacer scroll --------------------------------------------
   Solo transform y opacity, nada que provoque recálculo de maquetación. */
[data-revelar]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
[data-revelar].visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-revelar]{ opacity:1; transform:none; transition:none; }
}

/* --- apertura --- */
.sobre-apertura{
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3.5rem);
}
.apertura-eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acento); margin:0 0 1rem;
}
.apertura-nombre{
  font-family:var(--display); font-weight:400;
  /* Tres líneas en vez de dos: algo menos de cuerpo para que no se coma
     la pantalla de apertura. */
  font-size:clamp(2.6rem,1.4rem + 6.4vw,6rem);
  line-height:.86; letter-spacing:-.04em;
  margin:0 0 1.2rem; text-transform:uppercase;
  position:relative;
}
.apertura-alias{
  display:block;
  font-size:.26em; letter-spacing:.28em;
  color:transparent; -webkit-text-stroke:1.5px var(--texto);
  margin-top:.7em; padding-left:.2em;
}
.apertura-rol{
  font-family:var(--mono); font-size:.9rem; letter-spacing:.05em;
  margin:0 0 .3rem;
}
.apertura-lugar{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-suave); margin:0;
}
.apertura-retrato{ align-self:stretch; display:flex; align-items:flex-end; }

/* --- huecos de imagen --------------------------------------------------- */
.hueco{
  margin:0; width:100%;
  aspect-ratio:var(--prop,4/3);
  overflow:hidden;
  background:var(--linea);
}
.hueco--lleno img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mientras no hay foto: un hueco que se ve intencionado y dice qué va ahí. */
.hueco--vacio{
  position:relative;
  display:grid; place-content:center; gap:.5rem; justify-items:center;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 9px, color-mix(in srgb, var(--texto) 6%, transparent) 9px 10px),
    var(--superficie);
  border:1.5px dashed color-mix(in srgb, var(--texto) 28%, transparent);
  text-align:center; padding:1rem;
}
.hueco-marca{
  width:34px; height:34px;
  border:2px solid var(--acento);
  border-radius:50%;
  position:relative;
}
.hueco-marca::before, .hueco-marca::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--acento);
}
.hueco-marca::before{ width:14px; height:2px; }
.hueco-marca::after{ width:2px; height:14px; }
.hueco-texto{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-suave);
}
.hueco-nombre{
  font-family:var(--mono); font-size:.68rem;
  background:none; border:0; padding:0;
  color:var(--texto-suave); opacity:.65;
}

/* --- cifras --- */
.cifras{
  border-top:2px solid var(--texto);
  border-bottom:1px solid var(--linea);
  background:var(--superficie);
}
.cifras-fila{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; padding-block:0;
}
.cifra{
  padding:clamp(1.2rem,2.5vw,2rem) clamp(.6rem,1.6vw,1.4rem);
  border-left:1px solid var(--linea);
}
.cifra:first-child{ border-left:0; padding-left:0; }
.cifra b{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,1.2rem + 2.8vw,3.4rem);
  line-height:1; letter-spacing:-.03em;
}
.cifra span{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-suave);
}

/* --- biografía -----------------------------------------------------------
   Se acabó el muro de texto. Cada párrafo lleva su marca al margen, y tres
   momentos rompen el ritmo: la entrada, el bloque de RITA y la declaración.
   ------------------------------------------------------------------------- */
.sobre-bio{ padding-block:clamp(2.5rem,6vw,5rem); }
.sobre-bio .envoltorio{ padding-block:0; }

/* La entrada: grande, corta, y el nombre en color. */
.bio-entrada{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.bio-entrada p{
  max-width:34ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,1rem + 1.9vw,2.5rem);
  line-height:1.14; letter-spacing:-.022em;
  margin:0;
}
.bio-entrada strong{ font-weight:400; color:var(--acento); }

/* Filas con marca al margen. */
.bio-fila{
  display:grid;
  grid-template-columns:minmax(120px,180px) minmax(0,58ch);
  gap:clamp(1rem,3vw,3rem);
  align-items:start;
  padding-block:clamp(1.4rem,3vw,2.4rem);
  border-top:1px solid var(--linea);
}
.bio-marca{ position:sticky; top:2rem; }
.bio-marca-num{
  display:block;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--acento); margin-bottom:.3rem;
}
.bio-marca-nombre{
  display:block;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--texto-suave);
  line-height:1.35;
}
.bio-texto p{ margin:0; font-size:1.02rem; line-height:1.72; }

/* Imágenes intercaladas en la biografía. */
.bio-imagenes{ margin-block:clamp(2.5rem,6vw,4.5rem); }
.bio-imagenes--dos{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.8rem,2vw,1.6rem); align-items:start;
}
.hueco--baja{ margin-top:clamp(1.5rem,5vw,4rem); }   /* desajuste a propósito */
.bio-imagenes--ancha{
  width:min(100% - 2*var(--paso), 1600px);
  margin-inline:auto;
}

/* RITA: un bloque que se comporta como una puerta. */
.bio-rita{
  margin-block:clamp(2rem,5vw,3.5rem);
  padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--superficie);
  border-left:3px solid var(--cian);
  display:grid; gap:.9rem;
  max-width:none;
}
.bio-rita-marca{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cian);
}
.bio-rita-texto p{ margin:0; max-width:58ch; font-size:1.02rem; line-height:1.7; }
.bio-rita-texto a{ color:var(--cian); text-underline-offset:3px; }
.bio-rita-enlace{
  justify-self:start;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:var(--cian);
  border:1px solid var(--cian); padding:.55em 1em;
  transition:background .2s, color .2s;
}
.bio-rita-enlace:hover{ background:var(--cian); color:var(--fondo); }

/* La obsesión: se saca del cuerpo y se lee como una declaración. */
.bio-declaracion{
  margin-block:clamp(2.5rem,6vw,4rem);
  border:0; padding:0;
}
.declaracion-texto{
  max-width:26ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,1rem + 2vw,2.6rem);
  line-height:1.14; letter-spacing:-.02em;
  margin:0 0 0 auto;               /* alineada a la derecha: rompe el eje */
  text-align:right;
  position:relative;
}
.declaracion-texto::before{
  content:"";
  position:absolute; left:-2.2rem; top:.35em;
  width:1.6rem; height:2px; background:var(--acento);
}

/* Cierre del texto. */
.bio-cierre-texto{ margin-top:clamp(2rem,5vw,3.5rem); }
.bio-cierre-texto p{
  max-width:34ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,1rem + 1.4vw,2rem);
  line-height:1.2; letter-spacing:-.02em;
  margin:0;
}
.bio-cierre-texto strong{ font-weight:400; color:var(--acento); }

@media (max-width:760px){
  .bio-fila{ grid-template-columns:1fr; gap:.6rem; }
  .bio-marca{ position:static; display:flex; gap:.6rem; align-items:baseline; }
  .declaracion-texto{ text-align:left; margin-left:0; }
  .declaracion-texto::before{ position:static; display:block; margin-bottom:.6rem; }
}

/* --- declaración --- */
.lema{
  margin:clamp(3rem,7vw,6rem) 0;
  padding:clamp(2rem,5vw,4rem) 0;
  border-top:2px solid var(--texto);
  border-bottom:2px solid var(--texto);
  overflow:clip;
}
.lema-linea{
  font-family:var(--display); font-weight:400;
  /* 7.2vw sale de medir la línea más larga: 18 caracteres de Archivo Black
     ocupan unas 11 veces el cuerpo. Más grande y se sale de la pantalla. */
  font-size:clamp(2.4rem,7.2vw,7.6rem);
  line-height:.9; letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
  padding-inline:max(var(--paso), calc(50vw - var(--ancho) / 2));
  white-space:nowrap;
  /* las dos líneas se desplazan en sentidos opuestos con el scroll */
  transform:translateX(calc(var(--desliz,0) * 1px));
  will-change:transform;
}
.lema-linea--llena{ color:var(--texto); }
.lema-linea--hueca{
  color:transparent;
  -webkit-text-stroke:2px var(--texto);
  transform:translateX(calc(var(--desliz,0) * -1.6px));
}
@media (max-width:700px){
  .lema-linea{ font-size:clamp(1.9rem,10vw,3.4rem); white-space:normal; transform:none !important; }
  .lema-linea--hueca{ -webkit-text-stroke-width:1.4px; }
}
@media (prefers-reduced-motion:reduce){ .lema-linea{ transform:none !important; } }

/* --- toolbox --- */
.toolbox{ padding-top:0; }
.toolbox-cabecera{ max-width:62ch; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.toolbox-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);
  letter-spacing:-.02em; text-transform:uppercase; margin:0 0 .6rem;
}
.toolbox-nota{ color:var(--texto-suave); margin:0; }

.filtros{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.filtro{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase;
  padding:.45em .8em;
  background:none; border:1px solid var(--linea); color:var(--texto-suave);
  cursor:pointer; border-radius:0;
  transition:color .2s, border-color .2s, background .2s;
}
.filtro:hover{ color:var(--texto); border-color:var(--texto); }
.filtro.is-activo{ background:var(--texto); border-color:var(--texto); color:var(--fondo); }
.filtro:focus-visible{ outline:3px solid var(--acento); outline-offset:2px; }

.grupo{ border-top:1px solid var(--linea); padding:clamp(1.4rem,3vw,2.2rem) 0; }
.grupo:last-child{ border-bottom:1px solid var(--linea); }
.grupo[hidden]{ display:none; }

.grupo-cabeza{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.35rem; }
.grupo-num{ font-family:var(--mono); font-size:.72rem; color:var(--acento); letter-spacing:.1em; }
.grupo-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  letter-spacing:-.01em; margin:0; flex:1 1 auto;
}
.grupo-cuenta{
  font-family:var(--mono); font-size:.72rem; color:var(--texto-suave);
  border:1px solid var(--linea); padding:.1rem .45rem;
}
.grupo-nota{ color:var(--texto-suave); font-size:.92rem; max-width:58ch; margin:0 0 1rem; }

.fichas{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0; }
.ficha{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  padding:.42em .75em;
  border:1px solid var(--linea); color:var(--texto);
  transition:border-color .2s, color .2s, transform .2s, background .2s;
}
.ficha:hover{
  border-color:var(--texto); background:var(--texto); color:var(--fondo);
  transform:translateY(-2px);
}
/* Al aparecer el grupo, las fichas entran escalonadas. */
.grupo.visible .ficha{ animation:ficha-entra .45s backwards cubic-bezier(.2,.7,.3,1); animation-delay:calc(var(--n) * 22ms); }
@keyframes ficha-entra{ from{ opacity:0; transform:translateY(8px); } }

.grupo--ia       .ficha:hover{ background:var(--b); border-color:var(--b); color:#FFF; }
.grupo--sistemas .ficha:hover{ background:var(--g); border-color:var(--g); color:#FFF; }
.grupo--materia  .ficha:hover{ background:var(--y); border-color:var(--y); color:#111; }
.grupo--terreno  .ficha:hover{ background:var(--r); border-color:var(--r); color:#FFF; }

/* --- cierre --- */
.sobre-cierre{ padding-block:clamp(3rem,7vw,6rem); }
.cierre-frase{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.8rem);
  line-height:1.12; letter-spacing:-.02em;
  max-width:22ch; margin:0 0 1.4rem;
}
.cierre-enlace{
  display:inline-block;
  font-family:var(--display); font-size:clamp(1.6rem,1.2rem + 2vw,3rem);
  letter-spacing:-.02em; text-decoration:none; line-height:1;
  padding:.3em .6em;
  border:2px solid var(--texto);
  transition:background .25s, color .25s, transform .25s;
}
.cierre-enlace:hover{ background:var(--acento); border-color:var(--acento); color:#FFF; transform:translateY(-3px); }

@media (max-width:820px){
  .sobre-apertura{ grid-template-columns:1fr; align-items:start; }
  .apertura-retrato{ max-width:340px; }
  .bio-imagenes--dos{ grid-template-columns:1fr; }
  .hueco--baja{ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .ficha, .cierre-enlace{ transition:none; }
  .grupo.visible .ficha{ animation:none; }
}

/* =========================================================================
   Tira de Instagram en la portada
   Se desliza en horizontal con scroll nativo: rueda del ratón, trackpad,
   dedo y teclado funcionan solos. El JS solo añade arrastrar con el ratón.
   ========================================================================= */

.ig{
  padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem);
  border-top:1px solid var(--linea);
}
.ig-cabecera{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-block:0 clamp(1.2rem,3vw,2rem);
}
.ig-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem);
  letter-spacing:-.02em; text-transform:uppercase; margin:0 0 .35rem;
}
.ig-nota{ color:var(--texto-suave); margin:0; font-size:.95rem; max-width:46ch; }
.ig-cuenta{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--linea); padding-bottom:.25rem;
  transition:color .2s, border-color .2s;
}
.ig-cuenta:hover{ color:var(--acento); border-color:var(--acento); }

/* Carrusel «Lo último» de Instagram (rediseño 11 oct 2026).
   Objetivos: separación 8-12 px, scroll-snap mandatory, altura fija y
   proporción natural (nada de object-fit:cover ni aspect-ratio:1 que recorten
   el carteles verticales), controles de flechas en escritorio, en móvil una
   publicación completa + un cantito de la siguiente, sin desbordar la página.
   El contenedor .ig-carrusel se queda en overflow:hidden para que el carrusel
   NUNCA extienda la anchura del body. */
.ig-carrusel{
  position:relative;
  overflow:hidden;        /* NUNCA desbordar la página por culpa del scroll-x */
  margin-inline:calc(-1 * var(--paso));
}
.ig-tira{
  --ig-pieza-alto:clamp(220px, 32vw, 320px);
  --ig-pieza-gap:10px;    /* dentro del 8-12 px pedido */
  display:flex; gap:var(--ig-pieza-gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--paso);
  padding-inline:var(--paso);
  padding-block:.4rem;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  cursor:grab;
  /* Es un carrusel de imágenes: no hay nada que seleccionar, y al arrastrar
     se pintaba de azul medio documento. */
  user-select:none; -webkit-user-select:none;
}
.ig-tira.arrastrando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.ig-tira:focus-visible{ outline:3px solid var(--acento); outline-offset:4px; }
.ig-tira::-webkit-scrollbar{ height:6px; }
.ig-tira::-webkit-scrollbar-thumb{ background:var(--linea); }

/* Pieza: altura fija, ancho según la imagen. Las verticales serán estrechas,
   las apaisadas anchas, las cuadradas cuadradas — es la gracia. */
.ig-pieza{
  flex:0 0 auto;
  width:auto;
  height:var(--ig-pieza-alto);
  margin:0;
  aspect-ratio:1;         /* se mantiene SOLO como hint para los huecos de reserva */
  scroll-snap-align:start;
  overflow:hidden; background:var(--superficie);
  position:relative;
}
.ig-pieza img{
  display:block;
  width:auto; height:100%;
  object-fit:contain;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.ig-pieza:hover img{ transform:scale(1.03); }

/* Los huecos vacíos ya traen su propio marco; aquí solo se estiran. */
.ig-pieza--hueco{ background:none; width:var(--ig-pieza-alto); }
.ig-pieza--hueco .hueco{ height:100%; }

/* Última tarjeta: el salto a Instagram. Ya no es cuadrada: fija su propio ancho. */
.ig-pieza--final{
  width:var(--ig-pieza-alto); aspect-ratio:auto;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1rem,2vw,1.6rem);
  text-decoration:none;
  background:var(--texto); color:var(--fondo);
  font-family:var(--display);
  font-size:clamp(1.1rem,.9rem + .9vw,1.6rem);
  line-height:1.1; letter-spacing:-.015em;
  transition:background .25s, color .25s;
}
.ig-pieza--final:hover{ background:var(--acento); color:#FFF; }
.ig-flecha{ font-size:1.6em; line-height:1; align-self:flex-end; }

@media (prefers-reduced-motion:reduce){
  .ig-pieza img{ transition:none; }
  .ig-tira{ scroll-behavior:auto; }
}

/* --- controles de flecha (sólo escritorio) ------------------------------- */
.ig-arr{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--texto); color:var(--fondo);
  border:0; cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.4);
  font-family:var(--display); font-size:1.3rem; line-height:1;
  transition:opacity .2s, transform .2s, background .2s;
}
.ig-arr:hover{ background:var(--acento); color:#FFF; }
.ig-arr--izq{ left:.6rem; }
.ig-arr--der{ right:.6rem; }
.ig-arr[disabled]{ opacity:.3; cursor:default; pointer-events:none; }
@media (max-width:820px){
  /* En móvil el gesto natural es el swipe; las flechas sobran y comen pieza. */
  .ig-arr{ display:none; }
}

/* --- Mobile: 1 pieza completa + cantito de la siguiente ------------------
   Dreu, 11 oct 2026 (segunda pasada): «en móvil debe verse una completa».
   Las fotos verticales en marco cuadrado con object-fit:contain dejaban
   franjas negras a los lados. En móvil pasamos a cuadrado + recorte estilo
   Instagram, que evita los márgenes. En escritorio se mantiene la proporción
   natural. (Bloque movido abajo del todo del CSS del Instagram para que gane
   en la cascada a `.ig-tira .sbi_photo img{object-fit:contain!important}`.) */

/* -------------------------------------------------------------------------
   Smash Balloon dentro de nuestra tira.
   `display:contents` hace desaparecer sus dos contenedores de la maquetación,
   así sus tarjetas pasan a ser hijas directas de .ig-tira y se colocan en la
   misma fila que nuestra tarjeta final. No se toca su HTML: solo el estilo.
   ------------------------------------------------------------------------- */
/* Su CSS usa dos IDs encadenados (#sb_instagram #sbi_images), que gana a
   cualquier selector nuestro razonable. Aquí sí hace falta el !important. */
.ig-tira #sb_instagram{ display:contents !important; }
.ig-tira #sb_instagram #sbi_images{
  display:contents !important;
  grid-template-columns:none !important;
  width:auto !important; padding:0 !important;
}

/* Fuera su cabecera, su pie y su botón de cargar más: ya tenemos los nuestros. */
.ig-tira #sbi_header_wrap,
.ig-tira .sbi_header_wrap,
.ig-tira #sbi_load,
.ig-tira .sbi_follow_btn,
.ig-tira .sb_instagram_header{ display:none !important; }

.ig-tira .sbi_item{
  flex:0 0 auto !important;
  width:auto !important;
  height:var(--ig-pieza-alto) !important;
  padding:0 !important;
  margin:0 !important;
  /* Reserva espacio ANTES de que la imagen cargue (evita layout shift). Al
     cargar, el ancho real del <img> (width:auto + height:100% = ratio real)
     sustituye a este cuadrado por defecto porque width:auto le cede paso al
     contenido. Fix 11 oct 2026 (auditoría SEO: imgs sin width/height). */
  aspect-ratio:1 / 1 !important;
  scroll-snap-align:start;
  overflow:hidden;
  background:var(--superficie);
  position:relative;
}
.ig-tira .sbi_photo_wrap,
.ig-tira .sbi_photo{
  width:auto !important; height:100% !important;
  padding:0 !important; margin:0 !important;
  display:block;
  /* El background-image que Smash Balloon pinta como "cover" se desactiva:
     usamos la <img> real, con proporciones naturales. */
  background-image:none !important;
}
.ig-tira .sbi_photo img{
  display:block;
  width:auto !important; height:100% !important;
  object-fit:contain !important;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.ig-tira .sbi_item:hover .sbi_photo img{ transform:scale(1.03); }
/* Sus superposiciones de "ver en Instagram" estorban al arrastrar. */
.ig-tira .sbi_hover_top,
.ig-tira .sbi_photo_wrap .sbi_link{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .ig-tira .sbi_photo img{ transition:none; }
}

/* Override móvil (al final del bloque IG para que gane a .ig-tira .sbi_photo
   img{object-fit:contain!important} declarada antes). Ver nota 11 oct 2026. */
@media (max-width:820px){
  .ig-tira{
    --ig-pieza-alto:min(82vw, 340px);
    --ig-pieza-gap:8px;
  }
  .ig-tira .ig-pieza,
  .ig-tira .sbi_item{
    width:var(--ig-pieza-alto) !important;
    aspect-ratio:1 / 1 !important;
  }
  .ig-tira .ig-pieza img,
  .ig-tira .sbi_photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .ig-pieza--hueco{ width:var(--ig-pieza-alto); }
  .ig-pieza--final{ width:var(--ig-pieza-alto); }
}

/* =========================================================================
   «Lo que hago bien» — ficha blanca entre el logo y Instagram.
   Es blanca y negra en los DOS temas a propósito: así se lee como un objeto
   colocado encima de la página, no como una sección más del fondo.
   ========================================================================= */

.fuertes{ padding-block:clamp(1rem,3vw,2.5rem) clamp(2rem,5vw,4rem); }

.tarjeta-pros{
  background:#FFFFFF;
  color:#111111;
  border:3px solid #111111;
  box-shadow:14px 14px 0 rgba(17,17,17,.12);   /* sombra dura, sin difuminar */
  padding:clamp(1.6rem,4vw,3.4rem);
}
@media (prefers-color-scheme: dark){
  .tarjeta-pros{ box-shadow:14px 14px 0 rgba(255,255,255,.09); border-color:#FFFFFF; }
}

.tarjeta-pros-cabecera{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:clamp(1rem,2.5vw,1.8rem);
  border-bottom:3px solid #111111;
  margin-bottom:clamp(.5rem,2vw,1rem);
}
.tarjeta-pros-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem);
  line-height:1; letter-spacing:-.025em; text-transform:uppercase;
  margin:0; color:#111111;
}
.tarjeta-pros-nota{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:#6B6B6B; margin:0;
}

.fuertes-lista{ list-style:none; margin:0; padding:0; counter-reset:f; }

.fuerte{
  display:grid;
  grid-template-columns:clamp(84px,10vw,150px) 1fr;
  gap:clamp(1rem,3vw,2.4rem);
  align-items:start;
  padding:clamp(1.1rem,2.6vw,2rem) 0;
  border-bottom:1px solid #DCDCDC;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fuerte:last-child{ border-bottom:0; padding-bottom:0; }
.fuerte:hover{ transform:translateX(10px); }

/* El número: en contorno, y se rellena de color al pasar por encima. */
.fuerte-num{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3rem,2rem + 4.5vw,6.5rem);
  line-height:.8; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:2px #111111;
  transition:color .3s, -webkit-text-stroke-color .3s;
  display:block;
}
.fuerte:hover .fuerte-num{ color:#111111; }
.fuerte--r:hover .fuerte-num{ color:var(--r); -webkit-text-stroke-color:var(--r); }
.fuerte--b:hover .fuerte-num{ color:var(--b); -webkit-text-stroke-color:var(--b); }
.fuerte--y:hover .fuerte-num{ color:var(--y); -webkit-text-stroke-color:#111111; }
.fuerte--g:hover .fuerte-num{ color:var(--g); -webkit-text-stroke-color:var(--g); }

.fuerte-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,.9rem + .9vw,1.55rem);
  line-height:1.1; letter-spacing:-.015em; text-transform:uppercase;
  margin:0 0 .5rem; color:#111111;
}
.fuerte-desc{
  margin:0; max-width:58ch;
  font-size:clamp(.94rem,.9rem + .2vw,1.02rem);
  line-height:1.6; color:#4A4A4A;
}

@media (max-width:620px){
  .fuerte{ grid-template-columns:1fr; gap:.4rem; }
  .fuerte-num{ font-size:2.6rem; -webkit-text-stroke-width:1.6px; }
  .fuerte:hover{ transform:none; }
  .tarjeta-pros{ box-shadow:8px 8px 0 rgba(17,17,17,.12); }
}
@media (prefers-reduced-motion:reduce){
  .fuerte, .fuerte-num{ transition:none; }
  .fuerte:hover{ transform:none; }
}

/* =========================================================================
   Aviso de obra. Temporal: para quitarlo, borrar la sección .obras de
   front-page.php y este bloque.
   ========================================================================= */

.obras{
  margin-block:clamp(1rem,3vw,2.5rem);
  overflow:clip;
}

/* Cinta de obra: rayas diagonales negras y amarillas, hechas con un gradiente
   repetido. Sin imagen, sin animación. */
.obras-cinta{
  height:14px;
  background:repeating-linear-gradient(
    -45deg,
    var(--k) 0 14px,
    var(--y) 14px 28px
  );
}

.obras-texto{
  font-family:var(--display); font-weight:400;
  /* 15 caracteres de Archivo Black ocupan unas 9,3 veces el cuerpo: a 8.6vw
     la línea llena el ancho sin salirse. */
  font-size:clamp(2rem,8.6vw,9rem);
  line-height:1.06; letter-spacing:-.04em;
  text-transform:uppercase; text-align:center;
  margin:0; padding-block:clamp(.6rem,1.6vw,1.4rem);
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px var(--texto);
}

@media (max-width:700px){
  .obras-texto{
    white-space:normal; font-size:clamp(1.8rem,11vw,3.2rem);
    -webkit-text-stroke-width:1.4px;
  }
  .obras-cinta{ height:10px; }
}

/* Cursiva REAL de Archivo (Dreu, 7 sep). Sin esto el navegador inclina la
   redonda a la fuerza y en un porfolio de diseño se nota a la legua. El
   fichero se sirve desde el tema, como las otras cinco: la web no le pide
   nada a Google. Archivo es OFL, así que alojarla es legítimo. */
@font-face{ font-family:"Archivo"; font-style:italic; font-weight:400;
  font-display:swap; src:url("../fonts/archivo-italic-400.woff2") format("woff2"); }

/* =========================================================================
   SOBRE MÍ — maqueta de Dreu (6 sep 2026)
   Todos los colores salen de SUS PROPIOS SVG, no de una interpretación:
     #6D6D6D titulares · #545454 estrella lateral · #FECCFF rosa ·
     #CAFCEB mint · #CAEAF9 azul · #AAAAAA estrella de review
   El único valor elegido por mí es el fondo (no aparece en ningún SVG porque
   allí es transparente): un gris medio que deja las estrellas oscuras y el
   texto legibles, y por debajo del #AAA de las estrellas de review para que
   esas se lean claras, como en la referencia. Cambiarlo = una línea.
   ========================================================================= */

/* Los colores y las medidas viven en la raíz porque desde el 7 sep esta piel ya
   no es solo de Sobre mí: la lleva todo el sitio menos RITA. */
:root{
  --d2-fondo:#A2A2A2;
  --d2-tinta:#6D6D6D;
  --d2-estrella:#545454;
  --d2-rosa:#FECCFF;
  --d2-mint:#CAFCEB;
  --d2-azul:#CAEAF9;
  --d2-columna:96px;          /* ancho reservado a las estrellas laterales */
  --d2-aire:2rem;             /* separación entre las estrellas y el contenido */
}
.dreu2{
  position:relative;
  background:var(--d2-fondo);
  overflow:clip;              /* las columnas no generan scroll horizontal */
}

/* =========================================================================
   LA PIEL GRIS EN TODO EL SITIO (Dreu, 7 sep) — menos RITA.
   En vez de repintar componente por componente, se reescriben los TOKENS del
   tema: así todo lo que ya existía (tarjetas, líneas, textos suaves) se pone
   a tono solo, y de paso queda inmune al modo oscuro del sistema, que antes
   volvía la web negra.
   ========================================================================= */
.es-gris{
  --fondo:var(--d2-fondo);
  --superficie:#B0B0B0;       /* los bloques que se separaban del papel */
  --texto:#3A3A3A;
  --texto-suave:#5E5E5E;
  --linea:#8E8E8E;
  background:var(--d2-fondo);
  /* En las páginas cortas el <main> medía cuatro líneas y las estrellas se
     cortaban a media pantalla. Con esto el contenido estira hasta abajo, el
     pie se queda pegado al fondo y las columnas llegan siempre al final. */
  display:flex; flex-direction:column; min-height:100vh;
  /* Las columnas de estrellas ahora son hijas directas del body (antes de
     .contenido): con esto de contenedor de posición, corren también detrás
     de la cabecera, no solo del <main>. */
  position:relative;
}
.es-gris .contenido{ flex:1 0 auto; }
/* La cabecera y el pie se ponen a tono con la sección. */
.es-gris .cabecera{ border-bottom-color:#6D6D6D; }
.es-gris .marca,
.es-gris .nav-lista a{ color:#545454; }
.es-gris .nav-lista a:hover,
.es-gris .nav-lista .current-menu-item > a{ color:#FFF; }
.es-gris .pie{ border-top-color:#8E8E8E; color:#5E5E5E; }
.es-gris .pie-marca{ color:#545454; }

/* El contenido se estrecha para no meterse debajo de las estrellas. Solo se
   tocan los contenedores centrados; lo que sangra a propósito (el titular
   deslizante y el carrusel) se deja sangrar. */
.es-gris .contenido{ position:relative; }
.es-gris .cabecera,
.es-gris .pie,
.es-gris .envoltorio{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
}
.es-gris .bio-imagenes--ancha{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), 1600px);
}
/* --- columnas de estrellas ------------------------------------------------
   ANTES: una tira con 44 estrellas <img> que se desplazaba. Problema: la
   columna es tan alta como TODA la sección, así que la tira se quedaba corta y
   al desplazarse dejaba huecos — las estrellas "desaparecían" (Dreu, 6 sep).
   AHORA: la estrella es un fondo que se repite en vertical y lo que se anima es
   la POSICIÓN del fondo, un solo mosaico. Se repite hasta el infinito, da igual
   lo que crezca la página, y de paso se ahorran 88 imágenes en el HTML.
   El mosaico mide 44×68: la estrella entra centrada y los 26 px que sobran son
   la separación entre una y otra.
   ------------------------------------------------------------------------- */
.d2-columna{
  position:absolute; top:0; bottom:0; width:var(--d2-columna);
  overflow:hidden; pointer-events:none; z-index:1;
  background-image:url("../img/sobre/estrella.svg");
  background-repeat:repeat-y;
  background-size:44px 68px;
  background-position:center 0;
  opacity:.9;
  animation:d2-sube 3.4s linear infinite;
}
.d2-columna--izq{ left:0; }
.d2-columna--der{ right:0; animation-name:d2-baja; }
/* Las globales van por DETRÁS de todo el contenido de la página (si no, se
   pintaban encima del vídeo del cabecero y de cualquier imagen a sangre).
   Va con el hijo directo a propósito: tiene que ganarle al z-index de arriba.
   Hijas directas del body (19 sep 2026, antes de .contenido): así corren
   también detrás de la cabecera. */
body > .d2-columna--global{ z-index:-1; }
/* Un mosaico completo por vuelta: el salto es invisible. */
@keyframes d2-sube{ from{ background-position:center 0; }    to{ background-position:center -68px; } }
@keyframes d2-baja{ from{ background-position:center 0; }    to{ background-position:center  68px; } }
@media (prefers-reduced-motion:reduce){ .d2-columna{ animation:none; } }

/* Detalles pequeños: rótulos verticales pegados a las columnas. */
.d2-detalle{
  position:absolute; z-index:2; pointer-events:none;
  writing-mode:vertical-rl;
}
.d2-detalle img{ width:auto; height:74px; opacity:.85; }
.d2-detalle--1{ left:calc(var(--d2-columna) + 10px); top:9%; }
.d2-detalle--2{ right:calc(var(--d2-columna) + 10px); top:31%; }
.d2-detalle--3{ left:calc(var(--d2-columna) + 10px); top:57%; }
.d2-detalle--4{ right:calc(var(--d2-columna) + 10px); top:79%; }

/* Todo el contenido vive entre las dos columnas. */
.d2-dentro{
  position:relative; z-index:3;
  width:min(100% - 2*var(--d2-columna) - var(--d2-aire), 1180px);
  margin-inline:auto;
}

/* --- cabecero: collage -----------------------------------------------------
   Composición medida sobre la referencia que mandó Dreu (referencia.png,
   1184×796 → proporción 1.487). Todas las piezas van en % del contenedor y el
   contenedor conserva esa proporción, así que el collage es IDÉNTICO en
   ordenador y en móvil: solo cambia de tamaño.
   ------------------------------------------------------------------------- */
.d2-cabecero{
  /* Un 20% más grande que la caja de la sección (Dreu, 6 sep). Para crecer
     tiene que salirse de la columna de contenido, así que se centra con la
     técnica de ancho completo y se le pone tope para no pasar de la ventana.
     Va por encima de las estrellas laterales, no por debajo. */
  position:relative; z-index:4;
  width:120%; max-width:calc(100vw - 1.5rem);
  margin-left:50%; transform:translateX(-50%);
  aspect-ratio:1.487/1;      /* la de la referencia */
  /* Aire con la barra superior del sitio (Dreu, 6 sep): el doble que antes. */
  margin-top:clamp(2rem,5.5vw,4.5rem);
}
/* La rejilla del fondo cubre el cabecero entero, por detrás de todo. */
.d2-rejilla{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.55; pointer-events:none;
}
.d2-pieza{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w);
  transform:
    translate(-50%,-50%)
    translate(calc(var(--mx,0) * var(--prof,1) * 20px), calc(var(--my,0) * var(--prof,1) * 14px))
    rotate(var(--giro,0deg));
  animation:d2-flota var(--dur,8s) ease-in-out var(--retraso,0s) infinite;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.d2-pieza img{ width:100%; height:auto; display:block; }
@keyframes d2-flota{
  0%,100%{ margin-top:0; }
  50%    { margin-top:-1.4%; }
}
/* Orden de capas, como en la referencia: la foto en medio, la pegatina y los
   objetos de delante encima, la rejilla y los ladrillos detrás. */
.d2-pieza--ladrillos{ z-index:1; }
/* El boli ATRAVIESA la foto: va grande y por DETRÁS, así asoma el capuchón
   arriba a la izquierda y la punta por abajo, como en la referencia. */
.d2-pieza--boli     { z-index:2; }
.d2-pieza--foto     { z-index:3; filter:drop-shadow(0 14px 26px rgba(0,0,0,.20)); }
.d2-pieza--nombre,
.d2-pieza--vigalpe,
.d2-pieza--pegatina,
.d2-pieza--palmera,
.d2-pieza--dentadura,
.d2-pieza--datafono { z-index:5; }
.d2-pieza:hover{ z-index:9; }
@media (prefers-reduced-motion:reduce){ .d2-pieza{ animation:none; transition:none; } }

/* Móvil: la composición NO cambia (Dreu: "en ordenador y en móvil tal cual").
   Solo se estrechan las columnas de estrellas para darle más ancho. */
@media (max-width:820px){
  :root{ --d2-columna:30px; }
  .d2-columna{ background-size:24px 37px; }
  @keyframes d2-sube{ from{ background-position:center 0; } to{ background-position:center -37px; } }
  @keyframes d2-baja{ from{ background-position:center 0; } to{ background-position:center 37px; } }
  .d2-detalle{ display:none; }
  .d2-presenta{ width:85%; margin-inline:auto; }
}

/* --- presentación --------------------------------------------------------- */
.d2-presenta{
  padding-top:clamp(2rem,5vw,4rem);
  /* El aire de debajo forma, junto al de encima del rótulo de clientes, el
     hueco entre disciplinas y "[ALGUNOS DE MIS CLIENTES]". Los dos recortados
     un 30% (Dreu, 6 sep). */
  padding-bottom:clamp(1.4rem,3.5vw,2.8rem);
  text-align:center;
}
.d2-hola{
  position:relative; display:inline-block;
  width:min(100%,900px);
}
.d2-hola > img.d2-base{ width:100%; height:auto; display:block; }
/* El Recurso 3 va ENCIMA de la palabra DREU. Los porcentajes están medidos
   sobre el viewBox de "HOLA SOY DREU" (1189.55 × 454.47): la palabra cae en
   la primera línea, a la derecha. Se dibuja después, así que queda encima. */
.d2-recurso{
  /* Es una elipse a mano alzada que RODEA "DREU". Medido sobre el viewBox de
     HOLA SOY DREU (1189.55×454.47): la palabra ocupa la primera línea, a la
     derecha. Se dibuja encima, con el trazo un punto más marcado para que no
     se pierda sobre el gris. */
  position:absolute; z-index:2; pointer-events:none;
  left:56%; top:-1%; width:39%;
  filter:brightness(.72);
  animation:d2-recurso-entra .9s cubic-bezier(.2,.7,.3,1);
}
/* La entrada anima SOLO el gesto, nunca la opacidad: si el navegador congela
   el reloj de la animación (pasa en vistas fuera de pantalla), un fotograma
   inicial con opacity:0 dejaría la elipse invisible para siempre. */
@keyframes d2-recurso-entra{
  from{ transform:translateY(10px) rotate(-3deg) scale(.96); }
  to  { transform:none; }
}

/* Disciplinas: van entrando y saliendo, una cada vez. */
.d2-disciplinas{
  /* Al mismo ancho que el titular de arriba (no el de la sección entera),
     para que las dos piezas queden alineadas. */
  position:relative; width:min(100%,900px); margin-inline:auto;
  aspect-ratio:4/1;                /* la proporción de la disciplina más alta */
  margin-top:clamp(1rem,2.5vw,1.8rem);
}
.d2-disciplina{
  /* Las enciende el JS con .esta, igual que los logos y las reviews. Antes iban
     con @keyframes y eso tenía dos problemas: había que reajustar la animación
     cada vez que se añadía una disciplina, y si el navegador congelaba el reloj
     de la animación se quedaban invisibles. */
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  transform:translateY(10px);
}
.d2-disciplina.esta{ opacity:1; transform:none; }
.d2-disciplina img{ width:100%; height:auto; }

@media (prefers-reduced-motion:reduce){
  .d2-disciplina{ transition:none; }
  .d2-recurso{ animation:none; }
}

/* --- biografía ------------------------------------------------------------
   El único texto de verdad de la página: todo lo demás son SVG de Dreu.
   Ajustes de Dreu (7 sep): ocupa el ancho de la sección de arriba (los mismos
   900px del titular y las disciplinas, sin recortar la medida), cuerpo un pelín
   mayor, negritas en el gris oscuro y texto justificado con la última línea a
   la izquierda. */
.d2-bio{
  width:min(100%,900px); margin-inline:auto;
  padding-bottom:clamp(1.6rem,4vw,3rem);
}
.d2-bio-texto{
  font-family:var(--cuerpo);
  font-size:clamp(1.05rem,.94rem + .4vw,1.24rem);
  line-height:1.72;
  color:var(--d2-tinta);
  text-align:justify;
  text-align-last:left;            /* la última línea de cada párrafo, suelta */
}
.d2-bio-texto p{ margin:0 0 1.05em; }
.d2-bio-texto p:last-child{ margin-bottom:0; }
.d2-bio-texto strong{ font-weight:700; color:var(--d2-estrella); }

@media (max-width:820px){
  /* Igual que la presentación: el texto no se pega a las estrellas. Y en una
     columna estrecha el justificado abre "ríos" entre palabras, así que se
     deja partir con guiones. */
  .d2-bio{ width:85%; }
  .d2-bio-texto{ line-height:1.66; hyphens:auto; }
}

/* --- fila de logos --------------------------------------------------------
   Cuatro huecos fijos; en cada hueco los logos se relevan al azar (lo hace el
   JS eligiendo del montón, aquí solo está el fundido). */
/* Rótulo "[ALGUNOS DE MIS CLIENTES]" (ajustes de Dreu, 6 sep):
   · sube un 20% → el aire de encima baja de 4vw a 3.2vw
   · se separa un 10% de los logos → el margen de debajo sube de 3vw a 3.3vw
   · en móvil, un 20% más pequeño → del 70% al 56% del ancho */
.d2-clientes{
  padding-top:clamp(0.84rem,2.24vw,1.68rem);
  padding-bottom:clamp(1.5rem,4vw,3rem);
  text-align:center;
}
.d2-clientes-titulo{
  width:min(70%,320px); height:auto; display:block;
  margin:0 auto clamp(1.32rem,3.3vw,2.2rem);
}
@media (max-width:820px){
  .d2-clientes-titulo{ width:min(56%,256px); }
}
.d2-logos{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,2.5vw,2.5rem);
  align-items:center;
}
.d2-hueco{
  /* Tamaño de los logos dentro de su hueco (Dreu, 6 sep):
     escritorio un 20% menos, móvil un 30% menos. Se toca aquí, en un sitio. */
  --logo-escala:.80;
  position:relative; aspect-ratio:3/2;
  display:grid; place-items:center;
  /* min-width/height a 0 y overflow oculto: por defecto un hijo de grid tiene
     min-width:auto y puede EMPUJAR la celda. Sin esto los logos se salían de
     su hueco y se comían la página. */
  min-width:0; min-height:0; overflow:hidden;
}
.d2-hueco img{
  grid-area:1/1;
  /* width/height al 100% + contain: los SVG solo traen viewBox y sin esto
     se dibujaban a tamaño intrínseco, comiéndose media página. */
  width:calc(100% * var(--logo-escala));
  height:calc(100% * var(--logo-escala));
  object-fit:contain;
  min-width:0; min-height:0;
  opacity:0; transform:scale(.94);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.d2-hueco img.esta{ opacity:1; transform:none; }
/* OJO: es el 12.svg que mandó Dreu, que al renombrar quedó como logo-13.svg
   (su carpeta traía un 5_1.svg que desplazó la numeración). Va un 40% más
   pequeño que el resto porque su dibujo pesa mucho más en el hueco. */
.d2-hueco img[data-logo="logo-13.svg"]{
  width:calc(100% * var(--logo-escala) * .6);
  height:calc(100% * var(--logo-escala) * .6);
}
@media (max-width:820px){ .d2-hueco{ --logo-escala:.70; } }
@media (max-width:620px){ .d2-logos{ grid-template-columns:repeat(2,1fr); } }

/* --- reviews --------------------------------------------------------------
   El laurel NO se mueve; dentro se alternan los mensajes. Las estrellas
   aparecen y desaparecen alternándose. */
.d2-reviews{ padding-block:clamp(2rem,5vw,4rem); display:grid; place-items:center; }
.d2-laurel{
  position:relative;
  width:min(100%,520px);
}
.d2-laurel > img.d2-base{ width:100%; height:auto; display:block; }
/* Los mensajes NO se centran: cada uno se coloca para que SU corte (la línea
   entre el comentario y el autor) caiga justo sobre la barra horizontal que
   trae el laurel, al 66,5% de su alto. Medido sobre los propios SVG, porque
   cada mensaje tiene distinto número de líneas y centrarlos los descuadraba.
   Si se añade un mensaje nuevo hay que darle su --ancho y su --top:
       alto   = ancho × (altoSVG/anchoSVG) × 1.821
       --top  = 66.5% − (corte del SVG) × alto
   'corte' es la fracción del alto del SVG donde está el hueco entre el
   comentario y la firma. */
.d2-mensajes{
  position:absolute; inset:0;
}
.d2-mensaje{
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:var(--ancho); top:var(--top);
  height:auto;
  opacity:0;
  transition:opacity .5s ease;
}
.d2-mensaje.esta{ opacity:1; }


/* --- móvil apaisado -------------------------------------------------------
   Al voltear el teléfono la pantalla es ancha (844) pero muy baja (390): no
   entraba en la regla de móvil y se llevaba las columnas de 96px de
   escritorio, con el contenido pegado a los lados. Se decide por la ALTURA,
   que es lo que de verdad distingue este caso.
   ------------------------------------------------------------------------- */
@media (max-height:560px) and (orientation:landscape){
  :root{ --d2-columna:34px; --d2-aire:2.5rem; }
  .d2-columna{ background-size:26px 40px; }
  .d2-detalle{ display:none; }
  .d2-cabecero{ aspect-ratio:2.1/1; }   /* el collage, más apaisado y más bajo */
  .d2-presenta{ width:88%; margin-inline:auto; }
}

/* =========================================================================
   CABECERO DE VÍDEO (portada) — Dreu, 7 sep.
   De borde a borde y algo menos que la pantalla entera: se tiene que ver que
   hay web debajo, si no parece una pantalla previa de las de "entrar".
   ========================================================================= */
.cine{
  position:relative;
  width:100%;
  height:min(76vh,760px);
  overflow:hidden;
  background:transparent;  /* así se ven las columnas de estrellas de detrás
                               (viven en <main>, z-index:-1); si aquí se pinta
                               un fondo propio, aunque sea del mismo gris, las tapa */
}
.cine-video{
  position:relative; z-index:1;  /* por delante del sello, que va absolute */
  width:100%; height:100%;
  object-fit:cover;            /* llena siempre: lo que sobra se recorta */
  display:block;
  --poster-color:transparent;  /* el fondo de la sección se ve a través, sin caja blanca detrás */
}
/* El sello (svggg.svg, 18 sep), quieto y recto, detrás del modelo 3D. Va
   arriba del todo (top, no centrado) para que el personaje tape lo menos
   posible: centrado del todo, la cabeza se comía la "D" y el cuerpo,
   "CREATIVE" entero. */
.cine-sello{
  position:absolute; z-index:0; left:50%; top:34%; transform:translate(-50%,-50%);
  width:min(70%,900px); height:auto;
}
@media (max-width:820px){
  /* En móvil el personaje ocupa casi todo el ancho: el sello necesita más
     anchura relativa y quedar más arriba para asomar por encima.
     80% = 94% ya con el -15% general de móvil aplicado. */
  .cine-sello{ width:80%; top:24%; }
}
/* Se funde con el gris del sitio por abajo, para que no haya un corte seco. */
.cine::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:15%;
  background:linear-gradient(to bottom, rgba(162,162,162,0), var(--d2-fondo));
  pointer-events:none;
}
/* Aviso «En construcción» (11 oct 2026, Dreu). Texto plano, sin adornos, por
   encima del personaje 3D de la cabecera. */
.cine-aviso{
  position:absolute; z-index:3;
  left:50%; top:clamp(.6rem, 1.6vw, 1.1rem);
  transform:translateX(-50%);
  margin:0;
  font-family:var(--mono);
  font-size:clamp(.64rem, .55rem + .25vw, .78rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-suave, #6b6b6b);
  white-space:nowrap;
  pointer-events:none;
}

.cine-baja{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  z-index:2; font-family:var(--mono); font-size:1.1rem; color:#545454;
  animation:cine-late 2.2s ease-in-out infinite;
}
@keyframes cine-late{
  0%,100%{ transform:translate(-50%,0);    opacity:.55; }
  50%    { transform:translate(-50%,6px);  opacity:1;   }
}
@media (max-width:820px){
  /* -15% en móvil: toda la composición (personaje + sello) más pequeña. */
  .cine{ height:min(57.8vh,527px); }
}
@media (prefers-reduced-motion:reduce){
  .cine-baja{ animation:none; }
}

/* =========================================================================
   POR AMOR AL ARTE — el muro (Dreu, 7 sep).
   Tres por fila. Sin marco, sin caja y sin fondo: los PNG vienen recortados,
   así que cada pieza se apoya en el gris con una sombra que sigue SU contorno
   (drop-shadow lee la transparencia; box-shadow habría dibujado un rectángulo,
   que es justo lo que no se quiere).
   Lo "original" es que la fila no está a nivel: la columna del medio cuelga un
   poco más baja y las piezas se levantan al pasar por encima, como objetos en
   una pared, no como una rejilla de fichas.
   ========================================================================= */
.pama{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(2rem,5vw,4rem) clamp(3rem,8vw,6rem);
}
.pama-cabecera{ text-align:center; margin-bottom:clamp(2rem,6vw,4.5rem); }
.pama-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,1.2rem + 6vw,6rem);
  line-height:.88; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella);
  margin:0;
}
.pama-nota{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d2-tinta);
  margin:.9rem 0 0;
}
/* El párrafo de entrada (Dreu, 7 sep). Mismo tratamiento que la biografía de
   Sobre mí —justificado con la última línea suelta a la izquierda— para que las
   dos secciones se lean igual. La medida se recorta: bajo un titular centrado,
   una línea de 1180 px no hay quien la siga. */
.pama-intro{
  max-width:64ch; margin:clamp(1.6rem,4vw,2.6rem) auto 0;
  font-family:var(--cuerpo);
  font-size:clamp(1rem,.92rem + .34vw,1.16rem);
  line-height:1.72;
  color:var(--d2-tinta);
  text-align:justify; text-align-last:left;
}
/* Los énfasis: la negrita en el gris oscuro (igual que en la biografía) y la
   cursiva un punto más clara, para que las dos se distingan entre sí y no
   compitan. */
.pama-intro strong{ font-weight:700; color:var(--d2-estrella); }
.pama-intro em{ font-style:italic; color:#5E5E5E; }
@media (max-width:820px){
  .pama-intro{ line-height:1.66; hyphens:auto; }
}

.pama-muro{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,4vw,3.4rem) clamp(1rem,3vw,2.6rem);
  align-items:end;                 /* todas apoyadas en la misma línea */
}
.pama-pieza{
  position:relative;
  display:grid; place-items:center;
  min-width:0;                     /* si no, la imagen desborda su celda */
}
/* La columna del centro cuelga más baja: rompe la cuadrícula sin descolocarla. */
.pama-pieza:nth-child(3n+2){ margin-top:clamp(1rem,3.5vw,3rem); }

.pama-pieza img{
  width:100%; height:auto;
  max-height:min(46vh,420px);
  object-fit:contain;              /* nada se recorta ni se deforma */
  /* Sin sombra (Dreu, 7 sep): las piezas se apoyan en el gris a pelo.
     Al pasar por encima solo se levantan; el relieve lo pone el propio dibujo. */
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.pama-pieza:hover img{ transform:translateY(-10px) scale(1.04); }
/* El número, en la esquina y muy discreto: identifica la pieza sin ponerle
   un título que Dreu no ha escrito. */
.pama-num{
  position:absolute; left:0; bottom:-1.35em;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  color:var(--d2-tinta); opacity:.75;
}

@media (max-width:820px){
  /* Móvil de pie (Dreu, 7 sep): las piezas se veían demasiado grandes — el muro
     llegaba a tocar las estrellas y cada pieza llenaba su celda entera. Ahora
     el muro es más estrecho y la pieza deja aire dentro de su hueco: ~81 px en
     vez de ~103 px en una pantalla de 390. */
  .pama{ width:80%; }
  .pama-muro{ gap:clamp(1.6rem,7vw,2.4rem) clamp(.7rem,3vw,1.2rem); }
  .pama-pieza img{ width:84%; max-height:26vh; }
  .pama-num{ font-size:.6rem; bottom:-1.5em; }
}

/* Móvil tumbado: aquí la pantalla mide 390 px de ALTO, así que un tope en vh
   dejaba las piezas en 120 px dentro de celdas de 179. Se sube el tope y se
   estrechan las columnas de estrellas, que en apaisado se comían 256 px de 844. */
@media (max-height:560px) and (orientation:landscape){
  .pama{ width:88%; }
  .pama-pieza img{ width:100%; max-height:min(78vh,320px); }
}
@media (prefers-reduced-motion:reduce){
  .pama-pieza img{ transition:none; }
  .pama-pieza:hover img{ transform:none; }
}

/* Ajustes de una pieza suelta del muro (Dreu, 7 sep).
   --escala la encoge respecto a las demás; --marco le pone marco negro.
   El truco está en cambiar el ancho de 100% a automático: con 100% la imagen
   se centra dentro de una caja más ancha que el dibujo, y el marco quedaría
   flotando lejos del arte. Con ancho automático la caja mide lo que mide la
   pieza (los ficheros van recortados al milímetro), así que el marco la ciñe. */
.pama-pieza--marco img{
  width:auto;
  max-width:calc(100% * var(--escala,1));
  max-height:calc(min(46vh,420px) * var(--escala,1));
  border:.3rem solid #111;
  box-sizing:border-box;
}
@media (max-width:820px){
  .pama-pieza--marco img{
    max-width:calc(84% * var(--escala,1));
    max-height:calc(26vh * var(--escala,1));
    border-width:.18rem;
  }
}
@media (max-height:560px) and (orientation:landscape){
  .pama-pieza--marco img{
    max-width:calc(100% * var(--escala,1));
    max-height:calc(min(78vh,320px) * var(--escala,1));
  }
}

/* =========================================================================
   IA LAB (Dreu, 7 sep) — debajo del muro de Por amor al arte.
   Por ahora solo el rótulo, con un gato a cada lado mirándose. El collage de
   imágenes y vídeo entra aquí debajo cuando esté.
   ========================================================================= */
.ialab{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,4rem);
}
.ialab-cabecera{ text-align:center; }
/* Con gatos pasa a ser una fila: gato · título · gato. El título manda el
   tamaño de los gatos (--gato va en em del propio título) para que crezcan y
   encojan con él sin tener que tocar dos sitios. */
.ialab-cabecera--gatos{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.8rem,3vw,2.4rem);
}
.ialab-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,1rem + 4.4vw,4.4rem);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella);
  margin:0;
}
.ialab-gato{
  flex:0 0 auto;
  width:auto; height:clamp(3.2rem,7vw,7rem);
  image-rendering:auto;
}
.ialab-gato--espejo{ transform:scaleX(-1); }
@media (max-width:820px){
  .ialab{ width:80%; }
  .ialab-cabecera--gatos{ gap:.7rem; }
  .ialab-gato{ height:clamp(2.4rem,11vw,4rem); }
}

/* =========================================================================
   EL TALLER (12 oct 2026) — rejilla de aparatos físicos bajo «Por amor al arte».
   Dos columnas en escritorio, una en móvil. Fotos de producto sobre fondo claro
   para que no se peleen con el gris del sitio, numeración en mono y rotulación
   en display, mismo criterio tipográfico que el muro de piezas de arriba.
   ========================================================================= */
.taller{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(3rem,7vw,5rem) clamp(3rem,8vw,6rem);
  border-top:1px solid #8E8E8E;
}
.taller-cabecera{ text-align:center; margin-bottom:clamp(2rem,5vw,3.5rem); }
.taller-rotulo{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--d2-tinta);
  margin:0 0 .8rem;
}
.taller-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,1.1rem + 5vw,4.8rem);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella);
  margin:0;
}
.taller-intro{
  max-width:52ch; margin:1.2rem auto 0;
  font-family:var(--cuerpo); font-size:clamp(.98rem,.9rem + .25vw,1.1rem);
  line-height:1.6; color:var(--d2-tinta);
}

.taller-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.6rem,3vw,2.8rem);
}
.taller-item{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:1.1rem;
  align-items:center;
}
/* Las fotos son PNG con fondo transparente — se apoyan sobre el gris del
   muro directamente, sin tarjeta ni marco: cada aparato queda recortado
   igual que las piezas del muro de arriba. */
.taller-img{
  margin:0;
  background:transparent;
  aspect-ratio:1 / 1;
  display:grid; place-items:center;
  overflow:visible;
}
.taller-img img{
  width:100%; height:100%; object-fit:contain;
  padding:0;
}
.taller-cuerpo{ min-width:0; }
.taller-num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--d2-tinta); margin:0 0 .35rem;
}
.taller-nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);
  line-height:1.1; letter-spacing:-.005em; text-transform:uppercase;
  color:var(--d2-estrella); margin:0 0 .25rem;
}
.taller-sub{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#5E5E5E;
  margin:0 0 .7rem;
}
.taller-texto{
  font-family:var(--cuerpo); font-size:.9rem; line-height:1.55;
  color:var(--d2-tinta); margin:0;
}

@media (max-width:900px){
  .taller-lista{ grid-template-columns:1fr; gap:clamp(2.4rem,6vw,3.2rem); }
  /* Pila vertical en móvil: foto grande arriba, texto grande debajo. Cada
     aparato destaca entero en la pantalla, no se encoge en una columnita. */
  .taller-item{
    display:flex; flex-direction:column;
    gap:1rem;
  }
  .taller-img{
    aspect-ratio:4 / 3;
  }
  .taller-img img{ padding:0; }
  .taller-num{
    font-size:.78rem; letter-spacing:.22em;
    margin-bottom:.55rem;
  }
  .taller-nombre{
    font-size:clamp(1.6rem,1rem + 3.6vw,2.2rem);
    letter-spacing:-.015em;
    margin-bottom:.4rem;
  }
  .taller-sub{
    font-size:.74rem; letter-spacing:.16em;
    margin-bottom:1rem;
  }
  .taller-texto{
    font-size:1rem; line-height:1.6;
  }
}

/* =========================================================================
   CONTACTO — el formulario dentro de un anillo de GIF (Dreu, 7 sep).
   La elipse la define la PROPORCIÓN del contenedor: cuadrada en escritorio y
   alta en móvil. Cada GIF va colocado con las coordenadas que calcula el PHP,
   así que cambiar el número de GIF no obliga a tocar nada aquí.
   ========================================================================= */
.contacto{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,8vw,6rem);
}
.contacto-cabecera{ text-align:center; margin-bottom:clamp(1rem,3vw,2rem); }
.contacto-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,1.2rem + 5vw,5rem);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella); margin:0;
}
.contacto-nota{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d2-tinta); margin:.9rem 0 0;
}

/* El ruedo. Cuadrado y con un tope, para que el anillo no se desmadre. */
.contacto-orbita{
  position:relative;
  width:min(100%, 840px);
  aspect-ratio:1;
  margin:0 auto;
}
.contacto-anillo{ position:absolute; inset:0; pointer-events:none; }
.contacto-gif{
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) rotate(var(--giro,0deg));
  width:auto; height:auto;
  max-width:clamp(44px,5.6vw,78px);
  max-height:clamp(32px,4vw,56px);
  image-rendering:pixelated;      /* son GIF de los 90: que se vean nítidos */
}

/* El hueco de dentro. El anillo pasa por el borde, así que el formulario vive
   en el cuadrado inscrito — de ahí el 21% por lado. */
.contacto-centro{
  position:absolute; inset:21%;
  display:flex; flex-direction:column; justify-content:center;
  gap:.7rem;
}

.contacto-form{ display:grid; gap:.55rem; margin:0; }
.contacto-campo{ display:grid; gap:.2rem; margin:0; }
.contacto-campo label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--d2-estrella);
}
.contacto-campo input,
.contacto-campo select,
.contacto-campo textarea{
  font-family:var(--cuerpo); font-size:.92rem; color:#2A2A2A;
  background:#BDBDBD;             /* un peldaño por encima del gris del fondo */
  border:1px solid #6D6D6D; border-radius:0;
  padding:.42rem .55rem;
  width:100%;
}
.contacto-campo textarea{ resize:vertical; min-height:3.4rem; }
.contacto-campo input:focus,
.contacto-campo select:focus,
.contacto-campo textarea:focus{
  outline:2px solid #111; outline-offset:1px; background:#C9C9C9;
}
.contacto-enviar{ margin:.25rem 0 0; }
.contacto-enviar button{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase;
  background:#111; color:#EDEDED; border:0; border-radius:0;
  padding:.6rem 1.6rem; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.contacto-enviar button:hover{ background:#000; transform:translateY(-2px); }

.contacto-directo{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--d2-tinta); text-align:center; margin:0;
}
.contacto-directo a{ color:var(--d2-estrella); }

.contacto-aviso{
  font-family:var(--cuerpo); font-size:.86rem; line-height:1.45;
  margin:0; padding:.6rem .7rem; border-left:3px solid;
}
.contacto-aviso--bien{ border-color:#1F6B3B; background:#B6C8BC; color:#173D26; }
.contacto-aviso--mal { border-color:#8C2118; background:#C6B1AE; color:#4A140F; }

/* La trampa antirrobots: fuera de la vista pero no display:none, que algunos
   robots lo detectan y se la saltan. */
.contacto-trampa{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0;
}

@media (max-width:820px){
  .contacto{ width:86%; }
  /* En vertical la elipse se estira para que el formulario quepa dentro.
     Las medidas están calculadas, no a ojo: con la elipse a 335 px de ancho,
     un GIF de 56 px centrado en el borde llega hasta el 11% del contenedor,
     así que el formulario arranca en el 15% y no se tocan. Con los 64 px y el
     11% de antes se solapaban (Dreu, 7 sep). */
  /* El hueco de dentro es un RECTÁNGULO y el anillo una ELIPSE: para que no se
     toquen, las esquinas del rectángulo tienen que caer dentro de la elipse,
     o sea (ancho/radioX)² + (alto/radioY)² < 1. Con inset 12%/15% daba 1,21 —
     por eso los GIF se metían encima de los campos. Con 16%/21% da 0,90, que
     deja un 10% de aire. El anillo va a ancho completo para que al formulario
     le quede sitio. */
  /* En el móvil el marco deja de ser elipse y pasa a ser RECTÁNGULO: en 390 px
     una elipse dejaba el formulario en 200 px de ancho, y así se va a 290.
     Mismos GIF, mismo collage, otra forma. Las coordenadas del rectángulo las
     calcula el PHP en --rx/--ry. (Dreu, 7 sep) */
  .contacto-orbita{
    aspect-ratio:.83;
    width:100vw; margin-left:50%; transform:translateX(-50%);
  }
  .contacto-gif{ left:var(--rx); top:var(--ry); }
  .contacto-centro{ inset:11% 16%; }
  .contacto-gif{ max-width:clamp(26px,8vw,40px); max-height:clamp(19px,5.8vw,30px); }
  .contacto-campo input,
  .contacto-campo select,
  .contacto-campo textarea{ font-size:16px; }  /* menos de 16px y el iPhone hace zoom */
}
@media (max-height:560px) and (orientation:landscape){
  .contacto-orbita{ aspect-ratio:1.5; }
  .contacto-centro{ inset:12% 26%; }
}
@media (prefers-reduced-motion:reduce){
  .contacto-enviar button{ transition:none; }
}

/* Páginas sin estrellas laterales (Contacto). No hay que retocar anchos uno a
   uno: basta con poner a cero la columna reservada y dejar un margen normal en
   su lugar. Todo lo que se estrechaba para no pisarlas se ensancha solo. */
.sin-estrellas{
  --d2-columna:0px;
  --d2-aire:var(--paso);
}

/* =========================================================================
   TIENDA — ficha de producto (Dreu, 7 sep).
   Dos columnas en ordenador (galería | datos) y una encima de otra en móvil.
   ========================================================================= */
.tienda{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,8vw,6rem);
}
.tienda-cabecera{ text-align:center; margin-bottom:clamp(1.8rem,5vw,3.4rem); }
.tienda-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,1.2rem + 5vw,5rem);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella); margin:0;
}
.tienda-nota{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d2-tinta); margin:.9rem 0 0;
}

.prod{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
.prod-marco{
  position:relative; aspect-ratio:4/5;
  background:#B0B0B0;              /* las fotos de producto van sobre blanco:
                                      un fondo neutro las asienta */
  overflow:hidden;
}
.prod-foto{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s ease;
}
.prod-foto.esta{ opacity:1; }
.prod-tiras{ display:flex; gap:.5rem; margin-top:.55rem; }
.prod-tira{
  flex:0 0 auto; width:72px; aspect-ratio:4/5;
  padding:0; border:1px solid transparent; background:#B0B0B0;
  cursor:pointer; overflow:hidden;
}
.prod-tira img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-tira.esta{ border-color:#111; }

.prod-nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,1rem + 2.6vw,3rem);
  line-height:.95; letter-spacing:-.02em; text-transform:uppercase;
  color:#2F2F2F; margin:0;
}
.prod-autor{
  display:block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--d2-tinta); margin-top:.5rem;
}
.prod-precio{
  font-family:var(--display); font-size:1.7rem; color:#2F2F2F;
  margin:1.1rem 0 0;
}
.prod-iva{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--d2-tinta); margin-left:.5rem;
}
.prod-texto{
  font-family:var(--cuerpo); font-size:1rem; line-height:1.65;
  color:var(--d2-tinta); margin:1.1rem 0 0; max-width:46ch;
}
.prod-texto strong{ font-weight:700; color:var(--d2-estrella); }

.prod-tallas{ margin-top:1.6rem; }
.prod-etiqueta{
  display:block; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--d2-estrella);
  margin-bottom:.45rem;
}
.prod-botones{ display:flex; flex-wrap:wrap; gap:.4rem; }
.prod-talla{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
  min-width:3rem; padding:.5rem .2rem;
  background:transparent; color:#2F2F2F;
  border:1px solid #6D6D6D; border-radius:0; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.prod-talla:hover{ background:#B8B8B8; }
.prod-talla.esta{ background:#111; color:#EDEDED; border-color:#111; }
.prod-guia{
  display:inline-block; margin-top:.7rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  color:var(--d2-tinta);
}

.prod-comprar{ margin:1.7rem 0 0; }
.prod-boton{
  display:inline-block; text-decoration:none;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase;
  background:#111; color:#EDEDED;
  padding:.85rem 2.2rem;
  transition:background .2s ease, transform .2s ease;
}
.prod-boton:hover{ background:#000; transform:translateY(-2px); }
.prod-aviso{
  display:block; margin-top:.6rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em;
  color:var(--d2-tinta);
}

.prod-ficha{
  margin:2rem 0 0; padding-top:1.2rem;
  border-top:1px solid #8E8E8E;
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem;
  font-size:.86rem;
}
.prod-ficha dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--d2-estrella); padding-top:.15rem;
}
.prod-ficha dd{ margin:0; font-family:var(--cuerpo); color:var(--d2-tinta); }

@media (max-width:820px){
  .tienda{ width:86%; }
  .prod{ grid-template-columns:1fr; gap:1.4rem; }
  .prod-tira{ width:58px; }
  .prod-talla{ min-width:2.7rem; font-size:.76rem; }
}
@media (prefers-reduced-motion:reduce){
  .prod-foto{ transition:none; }
  .prod-boton{ transition:none; }
}

/* El vídeo del producto se comporta igual que una foto de la galería, y su
   miniatura lleva un triángulo de play para que se sepa que se mueve. */
.prod-foto--video{ object-fit:cover; background:#FFF; }
.prod-tira--video{ position:relative; }
.prod-play{
  /* Un disco oscuro con el triángulo dentro. Antes era sólo el triángulo en
     blanco y sobre una miniatura de fondo blanco no se veía (Dreu, 7 sep). */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:rgba(17,17,17,.72); pointer-events:none;
}
.prod-play::after{
  content:""; position:absolute; left:54%; top:50%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-left:7px solid #FFF;
  border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;
}

/* Los logos y las reviews en la portada (Dreu, 7 sep). Vienen de Sobre mí, así
   que el estilo ya existe: aquí sólo se les da el aire de una sección de la
   portada, que antes se lo daba el contenedor de Sobre mí. */
.portada-social{ padding-block:clamp(1rem,3vw,2.5rem) clamp(2rem,5vw,4rem); }
.portada-social .d2-reviews{ padding-bottom:0; }

/* Fila de logos bajo el panel de salidas (11 oct 2026). Mismo envoltorio del
   sitio para alinear con el panel; margen vertical sosegado. */
.portada-logos{ padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,5vw,4rem); }
.portada-logos .d2-clientes{ margin-block:0; }

/* =========================================================================
   TODO CENTRADO en portada, Trabajos y RITA (Dreu, 7 sep).
   Se centra por página, no de forma global: Sobre mí, Por amor al arte,
   Tienda y Contacto ya tienen su propia composición decidida.
   ========================================================================= */
.es-home .portada-texto,
.es-trabajos .envoltorio,
.es-rita .contenido{ text-align:center; }

/* Portada: los tres botones y la cabecera de Instagram eran filas alineadas a
   los extremos; centradas hay que cambiarles el reparto, no sólo el texto. */
.es-home .atajos{ justify-content:center; }
.es-home .ig-cabecera{
  flex-direction:column; align-items:center; text-align:center;
}
/* La ficha blanca: cabecera apilada y cada punto con el número encima del
   texto, en columna. En dos columnas el centrado no tiene sentido. */
.es-home .tarjeta-pros{ text-align:center; }
.es-home .tarjeta-pros-cabecera{ flex-direction:column; align-items:center; }
.es-home .fuerte{
  grid-template-columns:1fr; justify-items:center; gap:.4rem;
}
.es-home .fuerte-texto{ max-width:52ch; }

/* Trabajos: el bloque de texto tenía tope de ancho y se quedaba a la
   izquierda; centrado hay que centrar también la caja. */
.es-trabajos .prosa{ margin-inline:auto; }

/* Excepciones en RITA: el arranque de pantalla y la lista de procesos son un
   terminal. Un log centrado no hay quien lo lea, así que esos dos se quedan
   alineados a la izquierda. */
.es-rita .rita-boot-texto,
.es-rita .rita-procesos{ text-align:left; }

/* Instagram en la portada (Dreu, 7 sep): centrado y sin meterse debajo de las
   estrellas. La tira estaba pensada para sangrar por la derecha —"hay más
   fuera de la pantalla"— con un relleno calculado sobre el ancho de la ventana
   entera, y por eso pasaba por encima de las columnas. Ahora se ciñe al mismo
   ancho que el resto del contenido.
   'safe center' es a propósito: con el centrado normal, si las imágenes no
   caben, las primeras quedan fuera de alcance y no hay forma de llegar a ellas
   arrastrando. Con 'safe' se centran sólo cuando caben. */
.es-home .ig-tira{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), var(--ancho));
  margin-inline:auto;
  padding-inline:0;
  justify-content:center;
  justify-content:safe center;
}
/* El texto editable de la portada también centrado: tenía tope de ancho y se
   quedaba pegado a la izquierda. */
.es-home .prosa{ margin-inline:auto; }

/* La presentación de Andrés es prosa de verdad, de varias frases: centrada
   línea a línea se lee peor (mismo motivo que el log de Rita, arriba). Se
   centra la caja pero el texto queda a la izquierda dentro de ella.
   En móvil, a petición de Dreu, va centrada también (como el nombre y el
   menú de la cabecera). */
.es-home .presentacion{ text-align:left; margin-inline:auto; }
@media (max-width:820px){
  .es-home .presentacion{ text-align:center; }
}

/* =========================================================================
   RITA — el mueble de verdad (Dreu, 7 sep).
   La foto trae el hueco de la pantalla TRANSPARENTE, así que la captura va
   detrás y asoma por él: encaja sola, sin recortes ni máscaras.
   El volumen no es una caja 3D dibujada, es la propia foto inclinada en
   perspectiva siguiendo al ratón. Menos código y, sobre todo, es el mueble
   real y no una interpretación.
   Estas reglas viven aquí (main.css) y no en rita.css porque rita.css sólo se
   carga en su página; main.css se carga siempre y así el bloque es reutilizable.
   ========================================================================= */
.mueble{
  perspective:1200px;
  width:min(100%,520px);
  margin-inline:auto;
}
.mueble-3d{
  position:relative;
  transform-style:preserve-3d;
  transform:
    rotateY(calc(var(--rx,0) * 9deg))
    rotateX(calc(var(--ry,0) * -7deg))
    translateZ(0);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
.mueble-foto{
  position:relative; z-index:2;
  width:100%; height:auto; display:block;
}
/* El hueco de la pantalla en rita_mueble.png es (236,218)-(527,736) sobre
   760×982. Pasado a porcentajes, para que valga a cualquier tamaño. */
.mueble-pantalla,
.mueble-brillo{
  position:absolute; z-index:1;
  left:31.05%; top:22.20%;
  width:38.29%; height:52.75%;
}
.mueble-pantalla{ object-fit:cover; object-position:top center; }
/* Un reflejo diagonal y el verdor del fósforo: la pantalla es una foto plana
   y sin esto se ve pegada, no encendida. */
.mueble-brillo{
  z-index:3; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 32%, transparent 46%),
    radial-gradient(120% 90% at 50% 0%, rgba(79,214,214,.14), transparent 60%);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){
  .mueble-3d{ transition:none; transform:none; }
}

/* =========================================================================
   RITA — TRANSMISIÓN EN VIVO (Dreu, 7 sep).
   Va antes de las capturas. La idea es que parezca un instrumento encendido,
   no una infografía: cifras grandes en monoespaciada, rótulos diminutos, una
   línea de barrido muy lenta cruzando la caja y el punto latiendo. Nada de
   colorines: el cian de RITA y ya.
   ========================================================================= */
.rita-vivo{
  position:relative;
  margin:clamp(1.5rem,4vw,3rem) auto clamp(2rem,5vw,3.5rem);
  width:min(100%,860px);
  border:1px solid rgba(79,214,214,.28);
  background:linear-gradient(180deg, rgba(79,214,214,.05), rgba(79,214,214,.015));
  padding:clamp(.9rem,2.4vw,1.4rem) clamp(1rem,3vw,1.8rem) clamp(.8rem,2vw,1.2rem);
  overflow:hidden;
}
/* Un barrido que cruza la caja cada 7 s. Es lo único que se mueve, y por eso
   funciona: si se moviera todo, sería ruido. */
.rita-vivo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(79,214,214,.10) 50%, transparent 58%);
  transform:translateX(-100%);
  animation:vivo-barrido 7s linear infinite;
}
@keyframes vivo-barrido{ to{ transform:translateX(100%); } }

.vivo-barra{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:#4FD6D6;
  padding-bottom:.75rem; margin-bottom:.9rem;
  border-bottom:1px solid rgba(79,214,214,.18);
}
.vivo-punto{
  width:.46rem; height:.46rem; border-radius:50%; background:#4FD6D6;
  box-shadow:0 0 0 0 rgba(79,214,214,.6);
  animation:vivo-latido 2.4s ease-out infinite;
}
@keyframes vivo-latido{
  0%  { box-shadow:0 0 0 0 rgba(79,214,214,.55); }
  70% { box-shadow:0 0 0 .55rem rgba(79,214,214,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,214,214,0); }
}
.vivo-desde{
  margin-left:auto; letter-spacing:.1em; text-transform:none;
  color:rgba(180,200,205,.55); font-size:.62rem;
}

.vivo-celdas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:clamp(.6rem,2vw,1.4rem);
}
.vivo-celda{ text-align:center; }
.vivo-cifra{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:clamp(1.05rem,.7rem + 1.1vw,1.6rem);
  line-height:1; color:#DCEFEF; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;   /* no bailan al cambiar de cifra */
  white-space:nowrap;
}
.vivo-etiqueta{
  display:block; margin-top:.4rem;
  font-family:var(--mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(180,200,205,.5);
}

.vivo-cola,
.vivo-pie{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em;
  color:rgba(180,200,205,.62); margin:.95rem 0 0;
}
.vivo-cola b,
.vivo-pie b{ color:#4FD6D6; font-weight:400; }
.vivo-flecha{ color:#4FD6D6; margin-right:.3rem; }
.vivo-pie{ margin-top:.35rem; font-size:.58rem; color:rgba(180,200,205,.42); }

/* Cuando los datos son viejos no se disimula: se apaga. */
.rita-vivo--frio{ border-color:rgba(180,200,205,.16); }
.rita-vivo--frio .vivo-punto{ background:rgba(180,200,205,.4); animation:none; box-shadow:none; }
.rita-vivo--frio .vivo-barra{ color:rgba(180,200,205,.5); }
.rita-vivo--frio::after{ display:none; }

@media (prefers-reduced-motion:reduce){
  .rita-vivo::after,
  .vivo-punto{ animation:none; }
}

/* RITA centrada de verdad (Dreu, 8 sep).
   Con text-align:center no bastaba: varios bloques tienen tope de ancho y el
   margen izquierdo a cero, así que el TEXTO se centraba dentro de una caja que
   seguía pegada a la izquierda. Lo que hay que centrar es la caja. */
.es-rita .rita-intro,
.es-rita .rita-lead,
.es-rita .rita-desc,
.es-rita .rita-hero-pie,
.es-rita .rita-editable,
.es-rita .rita-boot-texto,
.es-rita .rita-procesos{ margin-inline:auto; }

/* El terminal y la lista de procesos siguen leyéndose a la izquierda por
   dentro, pero como bloque van centrados igual que todo lo demás. */
.es-rita .rita-boot-texto{ max-width:52ch; }
.es-rita .rita-procesos{ max-width:72ch; }

/* La cabecera era una fila con el título a un lado; centrada se apila. */
.es-rita .rita-cabecera{ text-align:center; }
.es-rita .rita-titulo{ justify-content:center; }

/* Los rótulos 01/02/03 son cajas flex: el text-align no los mueve, hay que
   cambiarles el reparto. Y el pie del sitio también se centra en las tres
   páginas centradas, que si no queda descolgado abajo a la izquierda. */
.es-rita .rita-h2{ justify-content:center; }
.es-home .pie,
.es-trabajos .pie,
.es-rita .pie{ text-align:center; }
.es-home .pie-lista,
.es-trabajos .pie-lista,
.es-rita .pie-lista{ justify-content:center; }

/* =========================================================================
   CONTACTO v2 — mosaico de GIF a sangre (Dreu, 8 sep).
   El fondo se llena entero, sin huecos, y encima va un cuadrado del mismo gris
   del sitio con el formulario. La versión del anillo sigue guardada en
   page-contacto.php.bak.20260908-anillo.
   ========================================================================= */
.ctm{
  position:relative;
  /* A sangre: se sale del contenedor y ocupa el ancho de la ventana. */
  width:100vw; margin-left:50%; transform:translateX(-50%);
  min-height:min(92vh,900px);
  display:grid; place-items:center;
  overflow:hidden;                  /* recorta el desbordamiento del mosaico */
  padding-block:clamp(2rem,5vw,4rem);
}
.ctm-fondo{ position:absolute; inset:0; pointer-events:none; }

/* La clave del "petado": filas de altura fija donde cada GIF CRECE hasta
   llenar la fila. Un mosaico normal deja el hueco de la derecha en cada línea;
   con flex-grow no queda ni uno. */
.ctm-mosaico{
  display:flex; flex-wrap:wrap; gap:0;
  align-content:flex-start;
  /* Algo más grande que la caja para que al moverse no asome el fondo. */
  position:absolute; inset:-8%;
  transform:translate3d(calc(var(--mx,0) * -26px), calc(var(--my,0) * -26px), 0);
  will-change:transform;
}
.ctm-hueco{
  flex:1 1 auto;
  height:clamp(48px,5.4vw,76px);
  min-width:44px; max-width:150px;
  overflow:hidden;
  background:#8E8E8E;               /* por si un GIF tarda en llegar */
}
.ctm-hueco img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;        /* son GIF de los 90: nítidos, no borrosos */
}

/* El cuadrado gris. Sombra dura, sin difuminar: sobre un fondo tan revuelto,
   una sombra suave desaparece y el cuadro se pega al ruido. */
.ctm-cuadro{
  position:relative; z-index:2;
  width:min(100% - 2rem, 460px);
  background:var(--d2-fondo);
  border:1px solid #6D6D6D;
  box-shadow:16px 16px 0 rgba(17,17,17,.22);
  padding:clamp(1.4rem,4vw,2.4rem);
}
.ctm-cabecera{ text-align:center; margin-bottom:clamp(1rem,3vw,1.6rem); }
.ctm-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);
  line-height:.92; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--d2-estrella); margin:0;
}
.ctm-nota{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d2-tinta); margin:.7rem 0 0;
}

@media (max-width:820px){
  /* En el móvil, piezas más pequeñas: son más filas, pero cada una pesa menos
     de descodificar y el mosaico sigue leyéndose como una masa. */
  .ctm-hueco{ height:clamp(34px,9vw,52px); min-width:32px; max-width:96px; }
  /* El cuadro tapaba casi toda la pantalla y del mosaico sólo se veían dos
     tiras. Se estrecha y se le da aire arriba y abajo para que la masa de GIF
     se lea como fondo y no como un borde. */
  .ctm-cuadro{ width:min(100% - 3.4rem, 330px); box-shadow:9px 9px 0 rgba(17,17,17,.22); }
  .ctm{ min-height:auto; padding-block:clamp(3rem,13vw,5.5rem); }
}
@media (prefers-reduced-motion:reduce){
  .ctm-mosaico{ transform:none; }
}


/* =========================================================================
   APPS — catálogo de herramientas (16 sep 2026)
   Todo con los tokens que ya existen: ni un color ni una fuente nuevos.
   Se apoya en .envoltorio, .ficha y [data-revelar], que ya estaban.
   ========================================================================= */
.apps-cabeza{ padding-block: clamp(2rem, 1rem + 4vw, 4rem) 0; }
.apps-entradilla{ font-size:1.05rem; color:var(--texto-suave); margin-top:.6rem; }

.apps-rejilla{
  list-style:none; margin:2.4rem 0 4rem; padding:0;
  display:grid; gap:var(--paso);
  /* Una sola app hoy, pero la rejilla ya está lista para varias sin retocar. */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.apps-tarjeta{
  display:flex; flex-direction:column;
  background:var(--superficie);
  border:2px solid var(--texto);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.apps-tarjeta:hover{ transform:translateY(-4px); box-shadow:6px 6px 0 var(--texto); }

/* La miniatura. Sin imagen todavía, se pinta un marcador tipográfico: es una
   herramienta de tipos, así que unas letras dicen más que un icono genérico. */
.apps-lienzo{
  aspect-ratio:16/10; background:var(--fondo);
  border-bottom:2px solid var(--texto);
  display:grid; place-items:center; overflow:hidden;
}
.apps-lienzo img{ width:100%; height:100%; object-fit:cover; display:block; }
.apps-lienzo-letras{
  font-family:var(--display); font-size:clamp(3rem, 2rem + 6vw, 5.5rem);
  line-height:1; color:var(--texto); opacity:.92;
}

.apps-cuerpo{ padding:1.4rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }

.apps-estado{
  margin:0; font-family:var(--mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--texto-suave);
}
.apps-tarjeta[data-estado="activa"]     .apps-estado{ color:var(--g); }
.apps-tarjeta[data-estado="beta"]       .apps-estado{ color:var(--acento); }
.apps-tarjeta[data-estado="desarrollo"] .apps-estado{ color:var(--y); }

.apps-nombre{
  font-family:var(--display); font-weight:400; font-size:1.5rem;
  line-height:1.1; letter-spacing:-.02em; margin:0;
}
.apps-desc{ margin:0; font-size:.98rem; }
.apps-detalle{ margin:0; font-size:.88rem; color:var(--texto-suave); }

.apps-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0 0; padding:0; }

.apps-boton{
  align-self:flex-start; margin-top:auto;
  display:inline-block; text-decoration:none;
  font-family:var(--mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.12em;
  padding:.7em 1.3em;
  color:var(--fondo); background:var(--texto);
  border:2px solid var(--texto);
  transition:background .14s ease, color .14s ease;
}
.apps-boton:hover{ background:var(--acento); border-color:var(--acento); color:var(--w); }
.apps-boton--inerte{ background:transparent; color:var(--texto-suave); border-color:var(--linea); cursor:not-allowed; }

@media (prefers-reduced-motion:reduce){
  .apps-tarjeta{ transition:none; }
  .apps-tarjeta:hover{ transform:none; }
}

/* =========================================================================
   TRABAJOS — portfolio (17 sep 2026)
   Todo con los tokens existentes (--fondo/--texto/--texto-suave/--linea/
   --superficie/--acento/--display/--cuerpo/--mono). Ni un color ni una fuente
   nuevos, así el modo claro/oscuro funciona solo. Añadido al final; nada de lo
   anterior se toca.
   ========================================================================= */

/* --- rejilla /trabajos/ --- */
.trabajos-cabeza{ margin-bottom:clamp(1.5rem,4vw,3rem); }
.trabajos-entradilla{ color:var(--texto-suave); font-size:clamp(1.05rem,1rem + .5vw,1.35rem); }

/* Listado por RENGLONES: cada proyecto es una fila con logo + título + imagen
   + «Ver más…». La fila entera es el enlace al case study. */
.trabajos-lista{ list-style:none; margin:0; padding:0; }
.trabajos-fila{ border-top:1px solid var(--linea); }
.trabajos-fila:last-child{ border-bottom:1px solid var(--linea); }
.trabajos-fila-enlace{
  display:grid; grid-template-columns:1fr; gap:1.2rem;
  align-items:center; text-decoration:none; color:inherit;
  padding:clamp(1.4rem,3.5vw,2.4rem) 0;
}
@media (min-width:760px){
  .trabajos-fila-enlace{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); }
}
.trabajos-fila-info{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.trabajos-fila-logo{ color:var(--texto-suave); display:block; line-height:0; }
/* altura DEFINIDA: un <svg> con solo viewBox y height:auto colapsa a 0 dentro de
   un flex en columna. Con height fija, el ancho lo calcula el navegador. */
.trabajos-fila-logo svg{ height:clamp(38px,4vw,50px); width:auto; max-width:min(220px,100%); display:block; fill:currentColor; }
.trabajos-fila-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.6vw,2rem); line-height:1.02;
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.trabajos-fila-meta{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave);
}
.trabajos-fila-mas{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(.85rem,.7rem + .5vw,1.05rem); letter-spacing:.01em;
  color:var(--texto-suave); margin-top:.2rem;
}
.trabajos-fila-enlace:hover .trabajos-fila-mas,
.trabajos-fila-enlace:focus-visible .trabajos-fila-mas{ text-decoration:underline; text-underline-offset:3px; }
.trabajos-fila-img{
  margin:0; overflow:hidden; background:var(--superficie);
  border:1px solid var(--linea); border-radius:2px;
  aspect-ratio:16/9;
}
.trabajos-fila-img img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block;
  transition:scale .6s cubic-bezier(.2,.7,.2,1);
}
/* Burger King: es un cartel, no una foto — el 32% de serie (pensado para que
   una cara/sujeto no quede cortado por arriba) deja el logo central fuera de
   encuadre. Aquí el foco está en el centro de la imagen. */
.trabajos-fila-img--burger-king-coronando-talento img{ object-position:center; }
/* hover con la propiedad `scale` (independiente de `transform`, que lo usa el
   parallax) para que no se pisen. */
.trabajos-fila-enlace:hover .trabajos-fila-img img,
.trabajos-fila-enlace:focus-visible .trabajos-fila-img img{ scale:1.04; }

/* --- case study: hero --- */
.trabajo-hero{
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .trabajo-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}
.trabajo-logo{ color:var(--texto-suave); margin-bottom:1.2rem; }
.trabajo-logo svg{ height:clamp(64px,8vw,110px); width:auto; max-width:min(320px,100%); display:block; fill:currentColor; }
.trabajo-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,1.6rem + 4.4vw,5.2rem);
  line-height:.98; letter-spacing:-.03em; margin:0; text-wrap:balance;
}
/* Títulos largos (una sola palabra de 10+ letras, p. ej. SHAREMUSIC!) se
   salían de su columna y los tapaba la imagen: tamaño menor y, si aun así no
   cabe, que parta la palabra en vez de desbordar. */
.trabajo-hero-texto{ min-width:0; }
.trabajo-titulo{ overflow-wrap:anywhere; }
.trabajo-titulo--largo{ font-size:clamp(2.2rem,1rem + 3.2vw,3.9rem); letter-spacing:-.025em; }
.trabajo-ficha-fila{ grid-template-columns:minmax(6.5rem,9rem) 1fr; }
.trabajo-ficha-fila dd{ overflow-wrap:anywhere; }
.trabajo-subtitulo{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; color:var(--texto-suave); margin:.7rem 0 0;
}
.trabajo-hero-imagen{ margin:0; }
.trabajo-hero-imagen img{
  width:100%; height:auto; display:block; border-radius:2px;
  border:1px solid var(--linea);
}

/* --- intro + ficha --- */
.trabajo-intro{
  display:grid; gap:clamp(1.4rem,4vw,3rem); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .trabajo-intro{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}
.trabajo-entradilla{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);
  line-height:1.18; letter-spacing:-.01em; margin:0; text-wrap:balance;
}
.trabajo-ficha{ margin:0; border-top:1px solid var(--linea); }
.trabajo-ficha-fila{
  display:grid; grid-template-columns:8rem 1fr; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--linea);
}
.trabajo-ficha-fila dt{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin:0;
}
.trabajo-ficha-fila dd{ margin:0; font-size:.98rem; }
.trabajo-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.trabajo-tag{
  font-family:var(--mono); font-size:.76rem; padding:.2rem .55rem;
  background:var(--superficie); border:1px solid var(--linea); border-radius:2px;
}

/* --- proceso --- */
/* El contenedor ocupa todo el ancho y es cada párrafo el que se limita: así el
   texto arranca en el mismo borde izquierdo que el título y la entradilla
   (con max-width en el contenedor quedaba centrado y descuadrado). */
.trabajo-proceso{ max-width:none; }
.trabajo-proceso p{ font-size:1.05rem; line-height:1.6; color:var(--texto); max-width:var(--ancho-texto); }
.trabajo-proceso p + p{ margin-top:1rem; }

/* --- galería con ritmo --- */
/* La sección Trabajos era una página-marcador centrada (regla previa
   `.es-trabajos .envoltorio{text-align:center}`). Con contenido real va a la
   izquierda, editorial. Esta regla, al ir después, manda. */
.es-trabajos .envoltorio{ text-align:left; }
.trabajo-galeria{ display:block; }
/* Cada figura se limita a su ancho REAL de píxeles (inline: max-width:<nativo>px)
   y se centra: así una imagen pequeña NO se estira ni pierde nitidez, y una
   grande llena hasta donde toca. La clase pone el tope superior según el rol. */
.trabajo-galeria .t-fig{ margin:0 auto clamp(1rem,3vw,2rem); }
.trabajo-galeria .t-fig img{ width:100%; height:auto; display:block; border-radius:2px; }
/* apaisada: hasta el ancho útil (zona segura entre estrellas en es-gris). */
.t-fig--ancho{ width:min(100% - 2*var(--paso), 1600px); }
.es-gris .t-fig--ancho{ width:min(100% - 2*(var(--d2-columna) + var(--d2-aire)), 1600px); }
.t-fig--alto{ width:min(100%, 720px); }    /* retrato: columna cómoda, nunca ampliado */
.t-fig--medio{ width:min(100%, 900px); }
.t-par{
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,3vw,2rem);
  margin-bottom:clamp(1rem,3vw,2rem);
}
@media (min-width:720px){ .t-par{ grid-template-columns:1fr 1fr; align-items:center; } }
.t-par .t-fig{ margin:0; }

/* --- vídeo --- */
.trabajo-video-caja{
  max-width:min(720px,100%); margin-inline:auto; background:var(--superficie);
  border:1px solid var(--linea); border-radius:2px; overflow:hidden;
}
.trabajo-video-caja video{ width:100%; height:auto; display:block; }

/* --- navegación --- */
.trabajo-nav{
  display:flex; flex-wrap:wrap; gap:1.5rem 2rem;
  justify-content:space-between; align-items:flex-end;
  border-top:1px solid var(--linea); margin-top:2rem;
}
.trabajo-nav-volver{
  font-family:var(--mono); font-size:.85rem; text-transform:uppercase;
  letter-spacing:.05em; text-decoration:none; color:var(--texto);
}
.trabajo-nav-volver:hover{ color:var(--acento); }
.trabajo-nav-lados{ display:flex; gap:1.5rem 2.5rem; flex-wrap:wrap; }
.trabajo-nav-lados a{ text-decoration:none; color:inherit; display:grid; gap:.15rem; }
.trabajo-nav-sig{ text-align:right; }
.trabajo-nav-dir{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--texto-suave);
}
.trabajo-nav-nom{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.02em; }
.trabajo-nav-lados a:hover .trabajo-nav-nom{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   TRABAJOS — capa de interacción (17 sep 2026). ENHANCEMENT: los estados
   iniciales se gatean bajo .js-trabajos (que el <head> añade solo si hay JS),
   así SIN JS se ve todo. Respeta prefers-reduced-motion.
   ========================================================================= */

/* aparición al hacer scroll */
.js-trabajos [data-aparece]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.js-trabajos [data-aparece].visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js-trabajos [data-aparece]{ opacity:1; transform:none; transition:none; }
}

/* parallax de la imagen del renglón: algo más alta que su marco y desplazada
   por --par (la escribe el JS). Sin JS, altura normal y sin desplazamiento. */
.js-trabajos .trabajos-fila-img img{
  height:118%; transform:translate3d(0, var(--par, 0px), 0); will-change:transform;
}

/* cursor propio sobre los renglones (solo con ratón fino) */
.t-cursor{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  width:10px; height:10px; border-radius:50%; background:var(--acento);
  display:grid; place-items:center; opacity:0;
  transition:width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
.t-cursor.activo{ opacity:1; width:76px; height:76px; }
.t-cursor-txt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:#fff;
  text-transform:uppercase; opacity:0; transition:opacity .25s; transform:scale(.6);
}
.t-cursor.activo .t-cursor-txt{ opacity:1; transform:none; transition:opacity .25s .05s, transform .25s .05s; }
/* con cursor propio activo, se oculta el del sistema sobre el renglón */
.js-trabajos .trabajos-fila-enlace{ cursor:none; }
@media (hover:none){ .t-cursor{ display:none; } .js-trabajos .trabajos-fila-enlace{ cursor:pointer; } }
@media (prefers-reduced-motion:reduce){ .t-cursor{ display:none; } .js-trabajos .trabajos-fila-enlace{ cursor:pointer; } }

/* Mola Spring: el hero es una pegatina de fondo transparente, no una foto —
   el marco de .trabajo-hero-imagen img se ve como un recuadro sobrante. */
body.es-trabajo-mola-spring .trabajo-hero-imagen img{ border:none; }

/* Mola Spring: corcho de campaña (18 sep 2026, v3 — sin pegatinas sueltas:
   solo las fotos, giradas como recortes clavados, solapándose de forma
   irregular. El ancho se limita a la zona segura entre las columnas de
   estrellas de la piel es-gris (mismo cálculo que .t-fig--ancho), con un
   margen extra porque el giro hace que las esquinas sobresalgan un poco de
   su caja sin girar. */
.trabajo-galeria--corcho{
  padding:clamp(1rem,3vw,2rem) var(--paso);
}
.corcho{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1.4rem,4vw,2.6rem); margin-inline:auto;
  width:min(100%, 1600px);
}
.es-gris .corcho{
  width:min(100% - 2*(var(--d2-columna) + var(--d2-aire) + 16px), 1600px);
}
.corcho-foto{
  margin:0; flex:1 1 240px; max-width:min(100%,420px);
  background:var(--w); padding:.5rem .5rem 1.3rem;
  box-shadow:0 14px 28px -10px rgba(0,0,0,.4); border-radius:2px;
  transform:rotate(var(--r,0deg));
}
.corcho-foto img{ width:100%; height:auto; display:block; }
@media (hover:hover){
  .corcho-foto{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .corcho-foto:hover{ transform:rotate(0deg) scale(1.04); position:relative; z-index:2; }
}
@media (prefers-reduced-motion:reduce){
  .corcho-foto{ transition:none; }
}

/* Cuadrícula de 3 columnas con recorte cuadrado + lightbox (18 sep 2026,
   estreno con LA3 Club). Miniatura recortada a propósito (a diferencia de la
   galería genérica, que nunca recorta): aquí manda el orden visual sobre la
   proporción real, y la pieza completa se ve entera al hacer clic. */
.trabajo-cuadricula{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.3rem,1vw,.7rem);
}
.trabajo-cuadricula-item{
  all:unset; cursor:pointer; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:2px; background:var(--superficie);
}
.trabajo-cuadricula-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:scale .4s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .trabajo-cuadricula-item:hover img{ scale:1.06; }
}
@media (prefers-reduced-motion:reduce){
  .trabajo-cuadricula-item img{ transition:none; }
}

/* Ítem de vídeo en la cuadrícula mixta (19 sep 2026, estreno con DYD
   Lowrider): se ve como su póster con un botón de play encima; al clic, el
   lightbox lo reproduce en bucle y sin sonido, como si fuera un GIF. */
.trabajo-cuadricula-item--video{ position:relative; }
.trabajo-cuadricula-play{
  position:absolute; inset:0; margin:auto; width:42px; height:42px;
  border-radius:50%; background:rgba(17,17,17,.55);
  display:grid; place-items:center; pointer-events:none;
  transition:background .2s;
}
.trabajo-cuadricula-play::before{
  content:""; width:0; height:0; margin-left:3px;
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;
}
@media (hover:hover){
  .trabajo-cuadricula-item--video:hover .trabajo-cuadricula-play{ background:rgba(17,17,17,.75); }
}

/* Variante ancha (18 sep 2026, estreno con Cachitos): fotos de escenario con
   resoluciones nativas muy dispares (519px a 4528px) que en la galería
   editorial se veían todas de tamaño distinto porque nunca se amplía una
   imagen por debajo de su ancho real. Aquí todas ocupan el mismo hueco,
   recortadas a 3:2, en vez de cuadrado. */
.trabajo-galeria--ancha .trabajo-cuadricula{ grid-template-columns:repeat(2,1fr); }
.trabajo-galeria--ancha .trabajo-cuadricula-item{ aspect-ratio:3/2; }

/* Lightbox: overlay a pantalla completa con la pieza a su tamaño real.
   Vive fuera de .trabajo-cuadricula (trabajos.js lo añade una vez al body). */
.t-lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(0,0,0,.88);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.t-lightbox.activo{ opacity:1; pointer-events:auto; }
.t-lightbox-img,
.t-lightbox-video{
  max-width:100%; max-height:100%; display:block;
  box-shadow:0 20px 50px rgba(0,0,0,.5); border-radius:2px;
}
.t-lightbox-cerrar{
  position:absolute; top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.2rem; line-height:1;
  display:grid; place-items:center;
}
.t-lightbox-cerrar:hover{ background:rgba(255,255,255,.24); }
body.t-lightbox-abierto{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .t-lightbox{ transition:none; }
}

/* Globo de chicle junto al cursor (18 sep 2026, assets/js/app.js). El cursor
   del sistema (la flecha) se deja intacto: esto es un compañero aparte que
   sigue al ratón con position:fixed y un pelín de desfase para no montarse
   encima de la punta de la flecha. */
.cursor-burbuja{
  position:fixed; top:0; left:0; z-index:9999;
  width:88px; height:auto; pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
}

/* =========================================================================
   TRABAJOS EN CURSO — panel mecánico de aeropuerto Solari (11 oct 2026).

   Rediseño completo del panel «Trabajos en curso». Antes era una interpretación
   digital (grid con etiquetas de borde fino); ahora es un facsímil del
   Solari Udine de los 60-70: chasis negro mate, placas negras independientes
   para cada carácter, bisagra horizontal visible en el centro de la placa,
   letra blanca envejecida (Bebas Neue Pro Bold), amarillo señalético sólo en
   la cabecera y la avioneta.

   Datos → front-page.php ($vuelos_trabajos) + helper dreu_vuelos_placas() en
   functions.php. Animación de volteo → assets/js/app.js (sólo al entrar en
   pantalla, una vez, respetando prefers-reduced-motion). Sin JS el panel se
   ve ya con los nombres finales desde PHP.

   Paleta:
     --carbon      #141210  carcasa (negro cálido, no puro).
     --placa       #0d0b09  cara de las placas (ligeramente más oscuro).
     --placa-arriba  gradiente arriba, con un hilo de luz.
     --placa-abajo   gradiente abajo, sombra interior.
     --crema       #ece0c4  letra «blanca envejecida».
     --amarillo    #f6c22b  destellos de amarillo señalético (sólo cabecera).
   ========================================================================= */

.vuelos{
  --carbon:#141210;
  --carbon-alto:#1f1a15;
  --placa:#0d0b09;
  --placa-sombra:#050403;
  --placa-luz:rgba(255,255,255,.07);
  --placa-sombra-interior:rgba(0,0,0,.55);
  --placa-bisagra:#1b1613;
  --crema:#ece0c4;
  --crema-apagada:#8a7d63;
  --amarillo:#ffcf2b;         /* amarillo señalético vintage, bien saturado */
  --vuelos-linea:rgba(236,224,196,.1);
}

/* El marco: panel con chasis metálico. La capa .vuelos-panel es la carcasa
   exterior (relieve). Dentro, un halo radial suavísimo imita la lámpara
   cenital de una sala de embarques. Se autoajusta al contenido (fit-content):
   antes dejaba un hueco negro de ~70 px a la derecha porque el panel ocupaba
   el 100% del envoltorio pero la fila terminaba antes (Dreu, 11 oct 2026). */
.vuelos-panel{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  background:
    radial-gradient(140% 90% at 50% -20%, rgba(246,194,43,.045), transparent 55%),
    linear-gradient(180deg, var(--carbon-alto) 0%, var(--carbon) 55%, #0f0d0b 100%);
  border-radius:10px;
  padding:clamp(.8rem,1.6vw,1.4rem) clamp(.8rem,1.6vw,1.4rem) clamp(1rem,1.8vw,1.4rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),           /* reflejo arriba del chasis */
    inset 0 -2px 0 rgba(0,0,0,.5),                 /* sombra inferior del chasis */
    inset 0 0 0 1px rgba(0,0,0,.6),                /* junta del marco */
    0 24px 44px -22px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.05);
  color:var(--crema);
  overflow:hidden;
  isolation:isolate;    /* el halo no sale */
}
/* Micro-granulado estilo "chapa pintada": textura hecha con dos gradients
   diminutos repetidos, muy sutiles, para que el fondo no sea plano digital. */
.vuelos-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 2px);
  mix-blend-mode:overlay;
  opacity:.6;
  pointer-events:none;
  z-index:0;
}
/* Fogueado interior oscuro (las esquinas más apagadas que el centro). */
.vuelos-panel::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  pointer-events:none; z-index:0;
}
.vuelos-panel > *{ position:relative; z-index:1; }

/* ---------- Cabecera ---------- */
.vuelos-cabecera{
  display:flex; align-items:center; gap:clamp(.5rem,1.4vw,.9rem);
  padding:.2rem .4rem .9rem;
  border-bottom:1px solid var(--vuelos-linea);
  margin-bottom:.8rem;
}
.vuelos-icono{
  display:grid; place-items:center; flex:none;
  width:1.9rem; height:1.9rem;
  background:var(--amarillo);
  color:var(--carbon);
  border-radius:50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 2px 0 rgba(0,0,0,.4);
}
.vuelos-icono svg{ transform:rotate(-30deg) translate(-1px,1px); display:block; }

.vuelos-titulo{
  flex:1 1 auto;
  margin:0;
  font-family:"Bebas Neue Pro", "Archivo Black", sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,.9rem + 1.1vw,1.75rem);
  letter-spacing:.08em; line-height:1;
  color:var(--amarillo);
  text-transform:uppercase;
  /* amarillo con un hilo de contraluz, como pintura señalética bajo foco */
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),
    0 0 .35em rgba(255,207,43,.3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vuelos-separador{ margin:0 .35em; opacity:.75; }

.vuelos-reloj{
  display:flex; align-items:center; gap:.4rem;
  margin:0; flex:none;
  font-family:"Bebas Neue Pro", "Archivo Black", sans-serif;
  font-size:clamp(1rem,.85rem + .4vw,1.3rem);
  letter-spacing:.08em; line-height:1;
  color:var(--crema);
}
.vuelos-reloj-punto{
  width:.5em; height:.5em; border-radius:50%;
  background:var(--amarillo);
  box-shadow:0 0 .5em var(--amarillo);
  animation:vuelos-reloj-latir 1.4s ease-in-out infinite;
}
@keyframes vuelos-reloj-latir{
  0%,100%{ opacity:1; } 50%{ opacity:.25; }
}
@media (prefers-reduced-motion:reduce){
  .vuelos-reloj-punto{ animation:none; }
}

/* ---------- Tabla ---------- */
.vuelos-tabla{
  display:flex; flex-direction:column; gap:.3rem;
  /* Deja que la fila sea más ancha que el panel y aparezca el scroll al
     mínimo necesario — se gestiona en .vuelos-fila. */
}
.vuelos-cabecera-cols{
  display:grid;
  grid-template-columns:
    calc(var(--placa-ancho) * 2  + var(--placa-gap) * 1)
    calc(var(--placa-ancho) * 35 + var(--placa-gap) * 34)
    calc(var(--placa-ancho) * 10 + var(--placa-gap) * 9);
  gap:var(--placa-sep);
  align-items:end;
  padding:0 .25rem .35rem;
  font-family:var(--cuerpo); font-size:.58rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--crema-apagada);
  min-width:max-content;    /* no se encoge; se desborda si hace falta */
}
.vuelos-cabecera-cols .vuelos-col--num{ text-align:left; }
.vuelos-cabecera-cols .vuelos-col--estado{ text-align:left; }

.vuelos-fila{
  display:grid;
  grid-template-columns:
    calc(var(--placa-ancho) * 2  + var(--placa-gap) * 1)
    calc(var(--placa-ancho) * 35 + var(--placa-gap) * 34)
    calc(var(--placa-ancho) * 10 + var(--placa-gap) * 9);
  gap:var(--placa-sep);
  align-items:center;
  min-width:max-content;
}
.vuelos-col{
  display:inline-flex; gap:var(--placa-gap);
}

/* Scroll horizontal del panel entero cuando no cabe (una franja de panel que
   se arrastra, como un panel real que mide 2 m de ancho visto en un vestíbulo
   pequeño). Pistas visuales a los lados. */
.vuelos-tabla{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(236,224,196,.18) transparent;
  padding-bottom:.3rem;
  mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.vuelos-tabla::-webkit-scrollbar{ height:6px; }
.vuelos-tabla::-webkit-scrollbar-thumb{ background:rgba(236,224,196,.2); border-radius:3px; }

/* --- Dimensiones de la placa (variables globales del panel) --------------
   Mantener coherencia con las 47 placas (2 + 35 + 10). El ancho máximo está
   calculado para que la fila entera (incluidos gaps y separadores) quepa en
   el ancho del envoltorio (≈ 1024 px) sin necesidad de scroll horizontal. */
.vuelos-panel{
  --placa-ancho:clamp(14px, 1.4vw, 19px);
  --placa-alto:calc(var(--placa-ancho) * 1.55);
  --placa-gap:0px;
  --placa-sep:clamp(.5rem, .9vw, .8rem);
}

/* ---------- Placas (split-flap) ------------------------------------------
   Estructura:
     <span class="flap" data-flap data-final="A">
       <span class="flap-top"><span class="flap-ch">A</span></span>
       <span class="flap-bot"><span class="flap-ch">A</span></span>
     </span>
   La bisagra central es un pseudo-elemento sobre .flap, 1 px de alto, con un
   degradé horizontal que simula el metal de la junta. En reposo no se mueve;
   la animación la hace app.js aplicando .flap--volteando sobre .flap. */
.flap{
  position:relative;
  display:inline-block;
  width:var(--placa-ancho);
  height:var(--placa-alto);
  perspective:160px;
  perspective-origin:50% 50%;
  background:var(--placa);
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 1px 0 rgba(0,0,0,.6);
  color:var(--crema);
  font-family:"Bebas Neue Pro", "Archivo Black", sans-serif;
  font-weight:700;
  line-height:1;
  overflow:hidden;
  vertical-align:top;
}
/* Bisagra horizontal — la raya metálica que divide la placa por el medio. */
.flap::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px;
  background:linear-gradient(180deg,
    rgba(0,0,0,.9) 0, rgba(0,0,0,.9) 1px,
    rgba(255,255,255,.1) 1px, rgba(255,255,255,.1) 2px);
  z-index:3;
  pointer-events:none;
}
/* Las dos mitades. Cada una muestra la MITAD correspondiente del mismo
   carácter: .flap-top muestra la mitad superior (overflow:hidden abajo), y
   .flap-bot la mitad inferior. Para que el centro del glifo caiga sobre la
   bisagra, la .flap-ch ocupa toda la placa y cada mitad la recorta. */
.flap-top, .flap-bot{
  position:absolute; left:0; right:0;
  height:50%;
  overflow:hidden;
  display:block;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.flap-top{
  top:0;
  background:linear-gradient(180deg, #121010 0%, #0b0908 100%);
  box-shadow:inset 0 1px 0 var(--placa-luz);
  transform-origin:50% 100%;
}
.flap-bot{
  bottom:0;
  background:linear-gradient(180deg, #0a0806 0%, #06050440 100%);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 2px 4px -2px var(--placa-sombra-interior);
  transform-origin:50% 0%;
}
.flap-ch{
  display:block;
  position:absolute; left:0; right:0;
  width:100%;
  text-align:center;
  font-size:calc(var(--placa-alto) * .9);
  letter-spacing:0;
  color:var(--crema);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  will-change:transform;
}
/* Dentro de .flap-top, el carácter se dibuja desde arriba (ocupa toda la
   placa alineado por arriba) — la mitad inferior se recorta por overflow. */
.flap-top .flap-ch{ top:0; height:var(--placa-alto); line-height:1; padding-top:calc(var(--placa-alto) * .04); }
/* Dentro de .flap-bot, el carácter está alineado para que su mitad superior
   caiga justo encima del borde — la mitad superior se recorta por overflow. */
.flap-bot .flap-ch{ top:calc(var(--placa-alto) * -.5); height:var(--placa-alto); line-height:1; padding-top:calc(var(--placa-alto) * .04); }

.flap--blank .flap-ch{ display:none; }
.flap--blank{
  background:#070605;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    inset 0 -1px 0 rgba(0,0,0,.5);
}

/* ---------- Estados por fila --------------------------------------------
   DEPARTED (terminado): el proyecto sigue legible pero más apagado. Los
   paneles de verdad lo hacían con placas descoloridas por el sol. */
.vuelos-fila--departed .flap-ch{ color:var(--crema-apagada); text-shadow:0 1px 0 rgba(0,0,0,.5); }
.vuelos-fila--departed .flap{ background:#0a0908; }

/* ---------- Volteo (animación del split-flap) ----------------------------
   app.js aplica la clase .flap--volteando y hace un cambio de textContent en
   el pico del volteo. Dos keyframes acopladas: la mitad superior cae, la
   mitad inferior sube. Duración corta (~140 ms) para encadenar varias
   "vueltas" antes de posarse en la letra final. */
@keyframes vuelos-cae-arriba{
  0%   { transform:rotateX(0deg); }
  100% { transform:rotateX(-90deg); }
}
@keyframes vuelos-cae-abajo{
  0%   { transform:rotateX(90deg); }
  100% { transform:rotateX(0deg); }
}
.flap.flap--volteando .flap-top{
  animation:vuelos-cae-arriba 140ms cubic-bezier(.5,.05,.65,.8) forwards;
}
.flap.flap--volteando .flap-bot{
  animation:vuelos-cae-abajo 140ms cubic-bezier(.35,.2,.5,.95) forwards;
  animation-delay:60ms;
}
@media (prefers-reduced-motion:reduce){
  .flap.flap--volteando .flap-top,
  .flap.flap--volteando .flap-bot{ animation:none; }
}

/* ---------- Mobile ------------------------------------------------------- */
/* En móvil el panel ya no cabría a lo ancho con las 47 placas de la fila, así
   que apilamos cada proyecto en DOS sub-filas: la de arriba lleva «#  nombre»,
   la de abajo el estado alineado a la derecha. Mantiene las placas y la
   estética Solari; evita scroll horizontal; cada fila ocupa el ancho útil. */
@media (max-width:820px){
  .vuelos-panel{
    --placa-ancho:13px;
    --placa-gap:1px;
    --placa-sep:.45rem;
    padding:.75rem .6rem .9rem;
    border-radius:8px;
  }
  .vuelos-titulo{ font-size:1rem; letter-spacing:.06em; }
  .vuelos-icono{ width:1.5rem; height:1.5rem; }
  .vuelos-reloj{ font-size:.95rem; }
  .vuelos-cabecera-cols{ display:none; }

  .vuelos-tabla{
    gap:.6rem;
    overflow-x:visible;
    mask-image:none; -webkit-mask-image:none;
    padding-bottom:0;
  }
  .vuelos-fila{
    display:grid;
    grid-template-columns:
      calc(var(--placa-ancho) * 2  + var(--placa-gap) * 1)
      minmax(0, 1fr);
    grid-template-areas:
      "num nombre"
      "num estado";
    row-gap:.3rem; column-gap:var(--placa-sep);
    min-width:0;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--vuelos-linea);
  }
  .vuelos-fila:last-child{ border-bottom:0; padding-bottom:0; }
  .vuelos-col--num   { grid-area:num; align-self:center; }
  .vuelos-col--nombre{
    grid-area:nombre;
    justify-content:flex-start;
    overflow:hidden;         /* placas que no caben se recortan por la derecha */
    /* un fade a la derecha avisa de que la fila continúa (los nombres cortos
       ni se enteran: la cola son placas negras que ya se funden con el panel) */
    mask-image:linear-gradient(90deg, #000 0 85%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, #000 0 85%, transparent 100%);
  }
  .vuelos-col--estado{
    grid-area:estado;
    justify-content:flex-end;
  }
}
@media (max-width:520px){
  .vuelos-panel{ --placa-ancho:11px; --placa-sep:.35rem; }
  .vuelos-titulo{ font-size:.85rem; }
}
@media (max-width:380px){
  .vuelos-panel{ --placa-ancho:9px; }
  .vuelos-titulo{ font-size:.78rem; letter-spacing:.04em; }
  .vuelos-reloj{ font-size:.82rem; }
}

/* =========================================================================
   Segundo modelo 3D — remate al final de la portada (19 sep 2026)
   Centrado y bastante más pequeño que el de la cabecera (.cine): es un
   cierre, no un segundo héroe. Ver el comentario en front-page.php sobre
   loading="lazy".
   ========================================================================= */
.pieza-3d{ padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem); }
.pieza-3d .envoltorio{ display:flex; justify-content:center; padding-block:0; }
.pieza-3d-modelo{
  width:min(68%,540px);
  height:min(45vh,430px);
  --poster-color:transparent;
  cursor:pointer;
}
@media (max-width:820px){
  .pieza-3d-modelo{ width:min(92%,340px); height:min(34vh,320px); }
}

/* Rebote al tocar la pieza (assets/js/app.js): squash-and-stretch de toda
   la caja, no una deformación real del modelo — barato y con vida igual. */
@keyframes pieza-3d-rebote{
  0%   { transform:scale(1,1); }
  30%  { transform:scale(1.08,.9); }
  55%  { transform:scale(.94,1.08); }
  75%  { transform:scale(1.03,.97); }
  100% { transform:scale(1,1); }
}
.pieza-3d-modelo.rebota{
  animation:pieza-3d-rebote .55s cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================================
   BLOG (28 sep 2026) — inc/blog.php
   Bloque de la portada (la última reflexión, en grande) y las páginas /blog y
   /blog/<slug>. Solo tokens del sitio: ni colores ni fuentes nuevos, así que
   hereda la piel gris igual que todo lo demás. Cabeceras centradas como el
   resto de la portada; el texto largo, alineado a la izquierda para leerlo.
   ========================================================================= */

/* --- portada ------------------------------------------------------------- */
.blog-portada{
  padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--linea);
}
.blog-portada-cabecera{ text-align:center; padding-bottom:clamp(1.2rem,3vw,2rem); }
.blog-portada-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem);
  letter-spacing:-.02em; text-transform:uppercase; margin:0 0 .35rem;
}
.blog-nota{ color:var(--texto-suave); margin:0 auto; font-size:.95rem; max-width:46ch; }

.blog-destacada{
  display:block; max-width:980px; margin-inline:auto;
  text-decoration:none; color:inherit; text-align:center;
}
.blog-destacada-imagen{ margin:0; overflow:hidden; background:var(--superficie); }
/* > img con clase base para no perder contra otras reglas de imagen del tema
   (la trampa de especificidad de Sobre mí). */
.blog-destacada-imagen > img,
.blog-destacada-imagen > .blog-sin-imagen{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.blog-destacada:hover .blog-destacada-imagen > img{ transform:scale(1.03); }
.blog-destacada-texto{ padding-top:clamp(1rem,2.5vw,1.6rem); }
.blog-destacada-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem);
  line-height:1.05; letter-spacing:-.02em; text-wrap:balance;
  margin:.5rem auto .6rem; max-width:24ch;
}
.blog-destacada-desc{ color:var(--texto-suave); margin:0 auto; max-width:56ch; }
.blog-leer{
  display:inline-block; margin-top:1.1rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em;
  border-bottom:1px solid var(--linea); padding-bottom:.25rem;
  transition:color .2s, border-color .2s;
}
.blog-destacada:hover .blog-leer{ color:var(--acento); border-color:var(--acento); }

.blog-fecha{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-suave);
}

/* Sin imagen: la inicial del titular en grande, nunca un hueco roto. */
.blog-sin-imagen{
  display:grid; place-items:center; aspect-ratio:16/9;
  background:var(--superficie); color:var(--texto-suave);
  font-family:var(--display); font-size:clamp(4rem,12vw,9rem); line-height:1;
}

/* --- /blog y /blog/<slug> ------------------------------------------------ */
.blog-cabeza{ text-align:center; padding-top:clamp(2rem,6vw,4rem); }
.blog-cabeza .titulo-seccion{ margin-bottom:.4rem; }
.blog-lista{ max-width:760px; padding-bottom:clamp(3rem,8vw,6rem); }
.reflexion{ padding-block:clamp(2rem,5vw,3.5rem); }
.reflexion + .reflexion{ border-top:1px solid var(--linea); }
.reflexion-imagen{ margin:0 0 clamp(1.2rem,3vw,1.8rem); overflow:hidden; background:var(--superficie); }
.reflexion-imagen > img{ display:block; width:100%; height:auto; }
.reflexion-cabeza{ text-align:center; margin-bottom:clamp(1.2rem,3vw,2rem); }
.reflexion-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem);
  line-height:1.04; letter-spacing:-.02em; text-wrap:balance;
  margin:.5rem 0 .7rem;
}
.reflexion-titulo a{ color:inherit; text-decoration:none; }
.reflexion-titulo a:hover{ color:var(--acento); }
.reflexion-entradilla{ font-size:1.12rem; color:var(--texto-suave); margin:0 auto; max-width:52ch; }
.reflexion-cuerpo{ margin-inline:auto; text-align:left; font-size:1.05rem; line-height:1.65; }
.blog-vacio{ text-align:center; color:var(--texto-suave); padding-block:3rem; }
.blog-volver{ text-align:center; margin:1rem 0 0; }
.blog-volver a{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-decoration:none;
  border-bottom:1px solid var(--linea); padding-bottom:.25rem;
}
.blog-volver a:hover{ color:var(--acento); border-color:var(--acento); }
.blog-lista--una .reflexion{ padding-top:clamp(2rem,6vw,4rem); }
/* Imágenes entre el texto: ocupan el ancho de la columna de lectura; dos o
   tres van en fila y en móvil se apilan. */
.reflexion-cuerpo .blog-figura{ margin:2rem 0; }
.blog-figura-imgs{ display:grid; gap:clamp(.5rem,1.5vw,1rem); }
.blog-figura[data-n="2"] .blog-figura-imgs{ grid-template-columns:1fr 1fr; }
.blog-figura[data-n="3"] .blog-figura-imgs{ grid-template-columns:repeat(3,1fr); }
.blog-figura-imgs > img{ display:block; width:100%; height:auto; min-width:0; background:var(--superficie); }
.blog-figura figcaption{
  margin-top:.6rem; text-align:center;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--texto-suave);
}
@media (max-width:560px){
  .blog-figura[data-n] .blog-figura-imgs{ grid-template-columns:1fr; }
}
/* Portada con imagen vertical (un cartel): entero a la izquierda y el texto a
   la derecha, sin recortar. En móvil se apila como el apaisado. */
.blog-destacada--vertical{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center; max-width:1060px;
}
.blog-destacada--vertical .blog-destacada-imagen > img{ aspect-ratio:auto; }
.blog-destacada--vertical .blog-destacada-texto{ padding-top:0; }
@media (max-width:760px){
  .blog-destacada--vertical{ grid-template-columns:1fr; gap:0; }
  .blog-destacada--vertical .blog-destacada-texto{ padding-top:clamp(1rem,2.5vw,1.6rem); }
}
/* La primera reflexión va pegada a la cabecera del blog, y una imagen vertical
   no pasa del alto de la pantalla (se ve entera sin tener que desplazarse). */
.blog-cabeza{ padding-bottom:0; }
.blog-lista{ padding-top:0; }
.blog-lista > .reflexion:first-child{ padding-top:clamp(1rem,3vw,2rem); }
.reflexion-imagen{ background:none; }
.reflexion-imagen > img{ width:auto; max-width:100%; max-height:85vh; margin-inline:auto; }

/* --- Blog: texto editorial (28 sep) -------------------------------------
   Negritas y cursivas dentro del texto (la cursiva real de Archivo ya la
   declara el tema), primer párrafo de entrada y frases destacadas en la
   tipografía de los titulares. */
.reflexion-cuerpo strong{ font-weight:700; color:var(--texto); }
.reflexion-cuerpo em{ font-style:italic; }
.reflexion-cuerpo > p:first-child{ font-size:1.22rem; line-height:1.55; }
.blog-cita{
  margin:2.4rem 0; padding:1.4rem 0;
  border-block:1px solid var(--linea);
  text-align:center;
}
.blog-cita p{
  margin:0 auto; max-width:24ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.45rem,1rem + 1.9vw,2.3rem);
  line-height:1.12; letter-spacing:-.015em; text-wrap:balance;
  color:var(--texto);
}
.blog-cita--cierre{ border:0; margin:3rem 0 1rem; padding:0; }
.blog-cita--cierre p{ font-size:clamp(2rem,1.2rem + 3.6vw,3.6rem); max-width:none; }

/* =========================================================================
   LA IA Y YO (12 oct 2026) — página independiente, mismo tono gris del sitio.
   Sin iconografía de IA. Numeración 01/02/03 en mono como guiño editorial,
   tipografía display para titulares y cuerpo medido a 68ch para que lea.
   ========================================================================= */
.ia-yo{ color:var(--texto); }
.ia-yo .envoltorio{ padding-block:clamp(1.2rem,3vw,2.4rem); }

.ia-yo-cabecera{
  padding-top:clamp(2.4rem,6vw,5rem) !important;
  padding-bottom:clamp(2rem,5vw,4rem) !important;
  text-align:left;
}
.ia-yo-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--texto-suave);
  margin:0 0 1.1rem;
}
.ia-yo-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);
  line-height:.96; letter-spacing:-.02em;
  margin:0 0 .4rem; color:var(--texto);
  text-wrap:balance;
}
.ia-yo-titulo em{
  font-style:italic; font-family:var(--cuerpo); font-weight:400;
  letter-spacing:-.01em;
}
.ia-yo-claim{
  font-family:var(--cuerpo); font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);
  color:var(--texto-suave); max-width:34ch; margin:0;
  line-height:1.3;
}

/* Separador visual entre bloques: una línea fina del color de la piel gris. */
.ia-yo-bloque{
  border-top:1px solid var(--linea);
  padding-top:clamp(2rem,4vw,3.4rem) !important;
  padding-bottom:clamp(2rem,4vw,3.4rem) !important;
}
.ia-yo-numero{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.2em;
  color:var(--texto-suave); margin:0 0 .4rem;
}
.ia-yo-h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,1.2rem + 2.4vw,2.8rem);
  line-height:1.08; letter-spacing:-.01em;
  margin:0 0 1.6rem; color:var(--texto);
  text-wrap:balance;
}

/* Cuerpo largo: una columna legible a 68ch, no pegada al borde. */
.ia-yo-cuerpo p,
.ia-yo-pie-02,
.ia-yo-cierre p{
  max-width:none;
  font-size:1.02rem; line-height:1.65;
  margin:0 0 1rem;
}
.ia-yo-cuerpo p:last-child{ margin-bottom:0; }

/* Negritas y cursivas de énfasis: enriquecen la lectura. La negrita sube el
   color un pelo (plano #222 sobre el gris de piel) y la cursiva usa la
   variante italic real de Archivo. */
.ia-yo-cuerpo strong,
.ia-yo-r strong{ font-weight:700; color:#222; }
.ia-yo-cuerpo em,
.ia-yo-r em{ font-style:italic; }

/* Gato animado (webp) a mitad del intro — pieza heredada de la antigua IA Lab
   de «Por amor al arte». Centrado, con aire, no se recorta. */
.ia-yo-gato{
  margin:1.8rem auto;
  max-width:220px;
  text-align:center;
}
.ia-yo-gato img{
  width:100%; height:auto;
  display:block;
  margin-inline:auto;
}
@media (max-width:640px){
  .ia-yo-gato{ max-width:170px; margin-block:1.4rem; }
}

.ia-yo-nota{
  max-width:none;
  font-family:var(--mono); font-size:.86rem; line-height:1.55;
  color:var(--texto-suave); margin:0 0 2rem;
}

/* ---------- 02 · Galería «Lo que sale de aquí» (rotatoria) ----------
   Grid de huecos fijos. Cada hueco rota entre las piezas del pool con un fade.
   Toda la lógica vive en app.js: aquí solo pintamos el escenario. */
.ia-yo-bloque--gal{ max-width:none; }
.ia-yo-bloque--gal .ia-yo-h2,
.ia-yo-bloque--gal .ia-yo-nota{ max-width:none; }

/* Mosaico con CSS columns (verdadero masonry): el navegador equilibra las
   columnas sin dejar huecos muertos, y cada hueco puede tener su propia
   altura. 5 proporciones distintas ciclan para dar ritmo visual. */
.ia-yo-gal{
  display:flex; gap:.6rem; align-items:flex-start;
  margin-top:1.4rem;
}
/* Columna de vídeos verticales, grandes y a su proporción 9:16. */
.ia-yo-gal-vid{
  flex:0 0 33%;
  display:flex; flex-direction:column; gap:.6rem;
}
.ia-yo-gal .ia-yo-gal-vid .ia-yo-slot{ margin:0; aspect-ratio:9 / 16; }
.ia-yo-gal-resto{ flex:1; column-count:2; column-gap:.6rem; }

.ia-yo-slot{
  position:relative;
  background:#2b2b2b;
  overflow:hidden;
  display:block;
  margin:0 0 .6rem;
  break-inside:avoid;
  border-radius:8px;
  box-shadow:0 10px 28px -14px rgba(0,0,0,.45);
  /* Por defecto vertical phone-shape; se sobrescribe con nth-child. */
  aspect-ratio:3 / 4;
}
.ia-yo-slot:nth-child(5n+1){ aspect-ratio:3 / 4; }   /* vertical normal */
.ia-yo-slot:nth-child(5n+2){ aspect-ratio:1 / 1; }   /* cuadrado */
.ia-yo-slot:nth-child(5n+3){ aspect-ratio:4 / 5; }   /* vertical suave */
.ia-yo-slot:nth-child(5n+4){ aspect-ratio:9 / 16; }  /* story/phone estirado */
.ia-yo-slot:nth-child(5n+5){ aspect-ratio:2 / 3; }   /* vertical esbelto */

/* Móvil: la galería rompe el ancho de la columna y va de borde a borde de la
   pantalla (por encima de las estrellas laterales). Ritmo: una pieza grande
   a todo el ancho, luego dos pequeñas, otra grande... Todo en filas
   completas, así que cierra limpia por abajo. */
@media (max-width:820px){
  .ia-yo{ overflow-x:clip; }
  .ia-yo-gal{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:.35rem;
    position:relative; z-index:3;
    width:100vw; margin-left:calc(50% - 50vw);
    margin-top:1.2rem;
  }
  .ia-yo-gal-vid, .ia-yo-gal-resto{ display:contents; }
  .ia-yo-gal .ia-yo-slot,
  .ia-yo-gal .ia-yo-slot:nth-child(n){
    margin:0; break-inside:unset;
    aspect-ratio:3 / 4;
    border-radius:0;
  }
  /* Piezas a todo el ancho: dos de la galería. */
  /* Primera fila: la cabecera fijada y otro vídeo vertical, lado a lado. */
  .ia-yo-gal .ia-yo-gal-vid .ia-yo-slot--pin,
  .ia-yo-gal .ia-yo-gal-vid .ia-yo-slot:nth-child(2){ aspect-ratio:9 / 16; }
  .ia-yo-gal .ia-yo-gal-resto .ia-yo-slot:nth-child(2),
  .ia-yo-gal .ia-yo-gal-resto .ia-yo-slot:nth-child(5),
  .ia-yo-gal .ia-yo-gal-resto .ia-yo-slot:nth-child(8){
    grid-column:1 / -1; aspect-ratio:4 / 5;
  }
}

/* La media (img o video) se posiciona en absolute para poder cross-fade entre
   dos capas al cambiar. app.js alterna la clase .es-visible. */
.ia-yo-slot > .ia-yo-med{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .9s ease;
  background:#111;
  pointer-events:none;
}
.ia-yo-slot > .ia-yo-med.es-visible{ opacity:1; }

/* En «reducir movimiento» no hay transición ni rotación: la primera pieza se
   queda fija. */
@media (prefers-reduced-motion: reduce){
  .ia-yo-slot > .ia-yo-med{ transition:none; }
}


   Esquema compacto en una sola columna estrecha. Cada ficha es un <details>
   nativo: cerrado se ve el índice + nombre + etiquetas en una línea; abierto
   despliega la descripción. Sin JS, sin tarjetas pesadas: todo es filete
   fino y tipografía. */
.ia-yo-herramientas{
  list-style:none; margin:0 0 1.6rem; padding:0;
  max-width:none;
  border-top:1px solid var(--linea);
}
.ia-yo-h{ border-bottom:1px solid var(--linea); }

.ia-yo-h-det{ display:block; }
.ia-yo-h-sum{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:.9rem 1.2rem;
  padding:.9rem 0;
  cursor:pointer;
  list-style:none;
}
.ia-yo-h-sum::-webkit-details-marker{ display:none; }

.ia-yo-h-indice{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--texto-suave); align-self:center;
}
.ia-yo-h-cuerpo{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.3rem .9rem; min-width:0;
}
.ia-yo-h-nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.02rem,.9rem + .35vw,1.2rem);
  line-height:1.2; letter-spacing:-.005em;
  color:var(--texto);
}
.ia-yo-h-etiquetas{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-suave);
  line-height:1.2;
}
.ia-yo-h-mas{
  align-self:center;
  font-family:var(--mono); font-size:1.1rem; line-height:1;
  color:var(--texto-suave);
  transition:transform .18s ease;
}
.ia-yo-h-det[open] .ia-yo-h-mas{ transform:rotate(45deg); }
.ia-yo-h-sum:hover .ia-yo-h-nombre{ text-decoration:underline; text-underline-offset:.22em; }

.ia-yo-h-panel{
  padding:0 0 1.1rem calc(1.2rem + 2ch); /* alinea con la columna del nombre */
  max-width:46rem;
}
.ia-yo-h-texto{
  font-size:.98rem; line-height:1.6; margin:0 0 .7rem;
  color:var(--texto);
}
.ia-yo-h-enlace{ margin:0; }
.ia-yo-h-enlace a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--texto); text-decoration:none;
  border-bottom:1px solid currentColor;
}

@media (max-width:520px){
  .ia-yo-h-sum{ grid-template-columns:auto 1fr auto; gap:.6rem .8rem; }
  .ia-yo-h-panel{ padding-left:calc(.8rem + 2ch); }
}

.ia-yo-pie-02{
  padding-top:1.4rem; margin-top:.4rem;
  font-style:italic; color:var(--texto-suave);
  max-width:none;
}

/* ---------- 03 · Reflexión ----------
   Varios sub-apartados con h3 propio. Entre uno y otro, aire — no filetes. */
.ia-yo-reflexion{ display:flex; flex-direction:column; gap:clamp(1.6rem,3vw,2.6rem); }
.ia-yo-r{ max-width:none; }
.ia-yo-r-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,1rem + .9vw,1.65rem);
  line-height:1.15; letter-spacing:-.005em;
  margin:0 0 .9rem; color:var(--texto);
  text-wrap:balance;
}
.ia-yo-r p{ font-size:1.02rem; line-height:1.65; margin:0 0 .9rem; }
.ia-yo-r p:last-child{ margin-bottom:0; }

/* ---------- Pie ---------- */
.ia-yo-cierre{
  border-top:1px solid var(--linea);
  padding-top:clamp(1.6rem,3vw,2.4rem) !important;
  padding-bottom:clamp(2.4rem,5vw,4rem) !important;
}
.ia-yo-cierre a{
  color:var(--texto); border-bottom:1px solid currentColor;
  text-decoration:none;
}
.ia-yo-cierre a:hover,
.ia-yo-cierre a:focus-visible{ color:#111; }

/* Modo oscuro: subimos un pelo el contraste de los nombres y los enlaces. */
@media (prefers-color-scheme: dark){
  .ia-yo-h-nombre a:hover,
  .ia-yo-h-nombre a:focus-visible,
  .ia-yo-cierre a:hover,
  .ia-yo-cierre a:focus-visible{ color:#FFF; }
}

/* Móvil: menos aire entre bloques y bajada de tamaño del titulazo. */
@media (max-width:640px){
  .ia-yo-cabecera{ padding-top:clamp(1.6rem,6vw,3rem) !important; }
  .ia-yo-titulo{ font-size:clamp(2.2rem,1rem + 10vw,3.4rem); }
  .ia-yo-herramientas{ gap:1.2rem; }
  .ia-yo-h{ padding-top:1rem; }
}

@media (hover:hover) and (min-width:821px){
  .ia-yo-slot > .ia-yo-med{ transition:opacity .9s ease, transform .9s ease; }
  .ia-yo-slot:hover > .ia-yo-med.es-visible{ transform:scale(1.035); }
}

/* ---------- Galería: pieza ampliada ---------- */
.ia-yo-slot{ cursor:zoom-in; }
.ia-lb{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  background:rgba(12,12,12,.94);
  opacity:0; transition:opacity .25s ease;
}
.ia-lb.es-abierto{ display:flex; opacity:1; }
.ia-lb-escena{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:3.2rem 3.4rem;
  box-sizing:border-box;
}
.ia-lb-med{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
  border-radius:6px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8);
}
.ia-lb-x, .ia-lb-nav{
  position:absolute; z-index:2;
  background:rgba(255,255,255,.1); color:#fff; border:0;
  width:2.6rem; height:2.6rem; border-radius:50%;
  font-size:1.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ia-lb-x:hover, .ia-lb-nav:hover, .ia-lb-x:focus-visible, .ia-lb-nav:focus-visible{ background:rgba(255,255,255,.25); }
.ia-lb-x{ top:.9rem; right:.9rem; }
.ia-lb-nav{ top:50%; transform:translateY(-50%); }
.ia-lb-prev{ left:.7rem; }
.ia-lb-next{ right:.7rem; }
.ia-lb-bloqueo, .ia-lb-bloqueo body{ overflow:hidden; }
@media (max-width:820px){
  .ia-lb-escena{ padding:3.4rem .6rem 1.2rem; }
  .ia-lb-nav{ top:auto; bottom:1rem; transform:none; width:2.8rem; height:2.8rem; }
  .ia-lb-prev{ left:calc(50% - 3.4rem); }
  .ia-lb-next{ right:calc(50% - 3.4rem); }
  .ia-lb-escena{ padding-bottom:4.6rem; }
}

/* --- Trabajos: enlaces de cierre (Behance / Instagram) --- */
.trabajos-mas{
  margin-top:clamp(2.4rem,6vw,4.5rem);
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1rem 2rem;
}
.trabajos-mas-texto{
  margin:0; max-width:46ch;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.45;
  color:var(--texto-suave);
}
.trabajos-mas-enlaces{ margin:0; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.trabajos-mas-enlaces a{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:.95rem; color:var(--texto); text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:.15rem;
}
.trabajos-mas-enlaces a:hover,
.trabajos-mas-enlaces a:focus-visible{ color:#000; border-bottom-width:4px; }

/* ---------- Por amor al arte: tarjeta de fotos de cada pieza ----------
   Al pasar el cursor (escritorio) o tocar (móvil) se abre una tarjeta con 3-4
   fotos de la pieza y una línea de texto. Sale solo si la pieza tiene fotos en
   assets/img/arte/detalle/. */
.pama-pieza--detalle{ cursor:pointer; }
.pama-detalle{
  position:absolute; z-index:30;
  top:50%; left:50%;
  width:clamp(300px,150%,460px);
  transform:translate(-50%,-46%) scale(.97);
  background:#161616; color:#f2f2ee;
  padding:.7rem .7rem .9rem;
  border-radius:6px;
  box-shadow:0 22px 50px -16px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  cursor:default; text-align:left;
}
/* Columnas de los lados: la tarjeta se abre hacia dentro del muro. */
.pama-pieza--detalle:nth-child(3n+1) .pama-detalle{ left:0; transform:translate(0,-46%) scale(.97); }
.pama-pieza--detalle:nth-child(3n)   .pama-detalle{ left:auto; right:0; transform:translate(0,-46%) scale(.97); }
.pama-detalle-fotos{ display:grid; gap:.35rem; }
.pama-detalle-fotos--2{ grid-template-columns:repeat(2,1fr); }
.pama-detalle-fotos--3{ grid-template-columns:repeat(3,1fr); }
.pama-detalle-fotos--4{ grid-template-columns:repeat(4,1fr); }
.pama-detalle-fotos img{
  width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover;
  display:block; border-radius:3px; max-height:none;
  transform:none !important; transition:none;
}
.pama-detalle-titulo{
  margin:.7rem 0 .15rem; font-family:var(--display); font-size:1.05rem; line-height:1.15;
}
.pama-detalle-texto{
  margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:#b9b9b2; line-height:1.4;
}
.pama-detalle-x{ display:none; }

@media (hover:hover) and (min-width:821px){
  .pama-pieza--detalle:hover .pama-detalle,
  .pama-pieza--detalle:focus-within .pama-detalle{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
    transition-delay:.12s, .12s, 0s;    /* un respiro: no salta al pasar de largo */
  }
  .pama-pieza--detalle:nth-child(3n+1):hover .pama-detalle,
  .pama-pieza--detalle:nth-child(3n+1):focus-within .pama-detalle,
  .pama-pieza--detalle:nth-child(3n):hover .pama-detalle,
  .pama-pieza--detalle:nth-child(3n):focus-within .pama-detalle{ transform:translate(0,-50%) scale(1); }
  .pama-pieza--detalle:hover{ z-index:40; }
}

/* Móvil: no hay «pasar el cursor». Un toque abre la tarjeta como una hoja
   anclada abajo; otro toque fuera (o la ✕) la cierra. */
@media (max-width:820px), (hover:none){
  .pama-detalle,
  .pama-pieza--detalle:nth-child(3n+1) .pama-detalle,
  .pama-pieza--detalle:nth-child(3n) .pama-detalle{
    position:fixed; z-index:9000;
    top:auto; left:50%; right:auto; bottom:1rem;
    width:min(92vw,440px);
    transform:translate(-50%,14px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .pama-pieza--detalle.es-abierta .pama-detalle{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translate(-50%,0); transition-delay:0s;
  }
  .pama-detalle-x{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:-.9rem; right:.2rem; width:2.2rem; height:2.2rem;
    border:0; border-radius:50%; background:#f2f2ee; color:#111;
    font-size:1.4rem; line-height:1; cursor:pointer;
  }
}
@media (prefers-reduced-motion:reduce){
  .pama-detalle{ transition:none; }
}

/* --- Sobre mí: reproductor de Spotify con carcasa tipo Winamp clásico ---
   Dos «ventanas» apiladas como en los 2000s: la principal (pantalla LCD verde
   con el tiempo, visualizador, letrero, barra y botones) y la de la lista, que
   es el reproductor oficial de Spotify sin tocar. */
.d2-musica{
  width:min(100%,640px); margin-inline:auto;
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
.d2-musica-reproductor{ display:block; width:100%; height:352px; border:0; }

.wa{
  display:grid; gap:6px;
  font-family:"Courier New",ui-monospace,monospace;
}
.wa-ventana{
  background:linear-gradient(#4a4c5e,#2d2e3c);
  border:2px solid; border-color:#8a8da6 #14141c #14141c #8a8da6;   /* biselado */
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6);
}
.wa-titulo{
  height:1.15rem; margin:3px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(#1c2a55 0 2px,#5a6fb0 2px 3px,#1c2a55 3px 5px);
  color:#e8ecff; font-size:.62rem; font-weight:700; letter-spacing:.22em;
}
.wa-titulo span{ background:#2d2e3c; padding:0 .6rem; line-height:1.1rem; }

.wa-pantalla{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:4px 10px; margin:6px; padding:8px 10px;
  background:#000; border:2px solid; border-color:#14141c #8a8da6 #8a8da6 #14141c;
}
.wa-lcd{ display:flex; align-items:center; gap:8px; grid-row:1 / 2; }
.wa-play-ico{
  width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #1a4a1a;
}
.wa.sonando .wa-play-ico{ border-left-color:#3dff3d; }
.wa-tiempo{
  font-size:2.4rem; line-height:1; font-weight:700; letter-spacing:.06em;
  color:#3dff3d; text-shadow:0 0 6px rgba(61,255,61,.55);
  font-variant-numeric:tabular-nums;
}
.wa-visual{
  grid-row:1 / 2; grid-column:2; height:2.6rem;
  display:flex; align-items:flex-end; gap:2px;
}
.wa-visual i{
  flex:1; height:var(--h,50%); transform-origin:bottom;
  background:linear-gradient(#ff3a1a 0 18%,#ffd21a 18% 45%,#3dff3d 45%);
  transform:scaleY(.1);
  animation:wa-baila .7s steps(7,end) var(--d,0s) infinite alternate paused;
}
.wa.sonando .wa-visual i{ animation-play-state:running; }
@keyframes wa-baila{ 0%{transform:scaleY(.12);} 60%{transform:scaleY(1);} 100%{transform:scaleY(.38);} }
.wa-letrero{
  grid-column:1 / -1; overflow:hidden; white-space:nowrap;
  color:#3dff3d; font-size:.82rem; letter-spacing:.06em;
  border-top:1px solid #0f330f; padding-top:3px;
}
.wa-letrero span{ display:inline-block; padding-left:100%; animation:wa-letrero 16s linear infinite; }
@keyframes wa-letrero{ to{ transform:translateX(-100%); } }

.wa-barra{
  display:block; width:calc(100% - 12px); margin:0 6px 6px; height:.7rem;
  -webkit-appearance:none; appearance:none; background:#000;
  border:2px solid; border-color:#14141c #8a8da6 #8a8da6 #14141c; border-radius:0; cursor:pointer;
}
.wa-barra::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.6rem; height:.7rem;
  background:linear-gradient(#cfd2e4,#8a8da6); border:1px solid #14141c;
}
.wa-barra::-moz-range-thumb{
  width:1.6rem; height:.7rem; border-radius:0;
  background:linear-gradient(#cfd2e4,#8a8da6); border:1px solid #14141c;
}
.wa-barra:disabled{ cursor:default; opacity:.7; }

.wa-botones{ display:flex; gap:4px; margin:0 6px 8px; }
.wa-botones[hidden]{ display:none; }
.wa-botones button{
  flex:1; height:1.9rem; cursor:pointer;
  background:linear-gradient(#aeb1c8,#5d6078);
  border:2px solid; border-color:#e1e3f2 #14141c #14141c #e1e3f2;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.wa-botones button:active{ border-color:#14141c #e1e3f2 #e1e3f2 #14141c; background:linear-gradient(#5d6078,#8d90a8); }
.wa-botones button:focus-visible{ outline:2px solid #3dff3d; outline-offset:1px; }
.wa-i{ display:block; position:relative; width:.8rem; height:.8rem; }
.wa-i-play::before{ content:""; position:absolute; inset:0; margin:auto; width:0; height:0; border-style:solid; border-width:.4rem 0 .4rem .7rem; border-color:transparent transparent transparent #14141c; }
.wa-i-pausa::before,.wa-i-pausa::after{ content:""; position:absolute; top:0; bottom:0; width:.28rem; background:#14141c; }
.wa-i-pausa::before{ left:.08rem; } .wa-i-pausa::after{ right:.08rem; }
.wa-i-stop::before{ content:""; position:absolute; inset:.05rem; background:#14141c; }
.wa-i-inicio::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:.2rem; background:#14141c; }
.wa-i-inicio::after{ content:""; position:absolute; left:.25rem; top:0; width:0; height:0; border-style:solid; border-width:.4rem .6rem .4rem 0; border-color:transparent #14141c transparent transparent; }

.wa-lista{ margin:0 6px 6px; border:2px solid; border-color:#14141c #8a8da6 #8a8da6 #14141c; background:#000; }

@media (max-width:820px){
  .d2-musica{ width:100%; }
  .wa-tiempo{ font-size:2rem; }
}
@media (prefers-reduced-motion:reduce){
  .wa-visual i{ animation:none; transform:scaleY(.5); }
  .wa-letrero span{ animation:none; padding-left:0; }
}

/* =========================================================================
   PORTADA en ordenador, v2 (15 oct 2026): una sola columna centrada, más
   ancha y con el texto a 20px. Solo ≥1000px; el móvil no cambia. Sin tocar
   tipografías.
   ========================================================================= */
@media (min-width:1000px){
  .es-home .entradilla{ font-size:1rem; letter-spacing:.16em; margin-bottom:2.4rem; }
  .es-home .atajos{ margin-bottom:clamp(2.6rem,4.5vw,4rem); }

  .es-home .presentacion{ max-width:960px; margin-inline:auto; text-align:left; }
  .es-home .presentacion-lead{
    font-size:clamp(1.8rem,1rem + 1.5vw,2.3rem);
    line-height:1.18; margin:0 0 1.9rem;
  }
  .es-home .presentacion p:not(.presentacion-lead){
    font-size:clamp(1.12rem,.95rem + .4vw,1.28rem);
    line-height:1.68; margin:0 0 1.35rem;
    color:var(--texto);
  }
  .es-home .presentacion p:last-child{ margin-bottom:0; }

  .ig-nota, .blog-nota{ font-size:1.1rem; line-height:1.5; max-width:52ch; }
  .blog-destacada-desc{ font-size:1.2rem; line-height:1.55; max-width:52ch; }
}