/* ---------------------------------------------------------------
   Fernando D. Umpiérrez · sistema visual
   Heredado del portafolio de 2026: verde petróleo, dorado,
   tipografía de cartel y el destello de cuatro puntas.
   Todo el color vive en :root. Cambiar la identidad es cambiar
   este primer bloque.
----------------------------------------------------------------*/
@import url("tipografias.css");

:root{
  /* color */
  --verde:#0F2326;
  --verde-alt:#16282B;
  --verde-hondo:#0A1B1D;
  --linea:#2A3C3F;
  --hueso:#EDE8DC;
  --hueso-suave:#A3AEAC;
  --oro:#E6B800;         /* dorado vivo del portafolio de octubre de 2026 */
  --oro-claro:#E6B800;   /* ya no hace falta un segundo dorado: se mantiene el nombre por compatibilidad */
  --oro-tinta:#101F22;   /* texto sobre fondo dorado */
  /* tipografía */
  --titular:"Anton",Impact,"Arial Narrow",sans-serif;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --firma:"Parisienne","Brush Script MT",cursive;
  /* medidas */
  --ancho:70rem;
  --ancho-texto:38rem;
  /* sombra dorada desplazada de las imágenes de las fichas */
  --sombra:9px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--verde);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.caja{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 1.5rem}

h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.04;margin:0;letter-spacing:.005em}
h1{font-family:var(--titular);font-weight:400;letter-spacing:.012em;line-height:1.06;font-size:clamp(2rem,5.6vw,4rem);text-transform:uppercase;color:var(--oro)}
/* Título de las páginas de listado: mismo peso visual que antes, pero es el h1 de la página. */
.titulo-pagina{font-family:var(--titular);font-weight:400;letter-spacing:.012em;line-height:1.06;
  text-transform:uppercase;color:var(--oro);font-size:clamp(1.8rem,4vw,2.9rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);text-transform:uppercase;color:var(--oro)}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1.1rem}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

.firma{font-family:var(--firma);font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:1;color:var(--hueso);margin:.2rem 0 1.5rem}
.rotulo{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);font-weight:600;margin:0}
/* Entre el rótulo y el título, 11 px: las tildes de las mayúsculas («ÚLTIMO») no tocan el rótulo. */
.rotulo+h1,.rotulo+h2{margin-top:.7rem}
.saltar{position:absolute;left:-9999px;background:var(--oro);color:var(--oro-tinta);padding:.6rem 1rem;z-index:20}
.saltar:focus{left:1rem;top:1rem}

/* destello de cuatro puntas entre líneas, como en el portafolio */
.regla{display:flex;align-items:center;gap:1rem;margin:0 0 2.6rem}
.regla:before,.regla:after{content:"";height:1px;background:var(--oro);opacity:.45;flex:1}
.destello{width:13px;height:13px;flex:none;fill:var(--oro)}

/* --- cabecera --------------------------------------------------- */
.cabecera{border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:10;background:rgba(15,35,38,.94);backdrop-filter:blur(8px)}
.cabecera .caja{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.4rem;flex-wrap:wrap}
.marca{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:1rem;text-decoration:none;color:var(--hueso)}
.menu{display:flex;gap:1.5rem;font-size:.9rem;flex-wrap:wrap}
.menu a{color:var(--hueso-suave);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--oro-claro);border-bottom-color:var(--oro)}

/* --- portada ---------------------------------------------------- */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero .caja{display:block}
.hero-abajo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.hero-abajo .retrato{aspect-ratio:4/5;object-fit:cover;max-height:360px;margin-left:auto}
.hero .entradilla{font-size:1.1rem;color:var(--hueso-suave);max-width:33rem}
.retrato{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--linea)}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.boton{display:inline-block;text-decoration:none;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.85rem 1.5rem;background:var(--oro);color:var(--oro-tinta);border:1px solid var(--oro)}
.boton:hover{background:var(--oro-claro);border-color:var(--oro-claro)}
.boton.vacio{background:transparent;color:var(--oro-claro)}
.boton.vacio:hover{background:var(--oro);color:var(--oro-tinta)}

/* --- franja dorada: el recurso del índice del portafolio --------- */
.franja{background:var(--oro);color:var(--oro-tinta);padding:2.2rem 0}
.franja ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem 2rem}
.franja strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem}
.franja span{font-size:.84rem;color:#33401F}

/* --- secciones -------------------------------------------------- */
.seccion{padding:clamp(3rem,6.5vw,5rem) 0}
.seccion.alterna{background:var(--verde-alt)}
.seccion-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.seccion-titulo p{color:var(--hueso-suave);margin:.6rem 0 0;max-width:var(--ancho-texto)}
.enlace-todo{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-claro);text-decoration:none;border-bottom:1px solid var(--oro);white-space:nowrap}
.enlace-todo:hover{color:var(--hueso)}

/* --- tarjetas --------------------------------------------------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));gap:1.6rem}
.tarjeta{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--linea);background:var(--verde-alt);transition:border-color .18s ease,transform .18s ease}
.tarjeta:hover{border-color:var(--oro);transform:translateY(-3px)}
.tarjeta .imagen{aspect-ratio:4/3;width:100%;object-fit:contain;padding:.7rem;background:var(--verde-hondo);border-bottom:1px solid var(--linea)}
.tarjeta .sin-imagen{aspect-ratio:4/3;background:var(--verde-hondo);border-bottom:1px solid var(--linea);display:grid;place-items:center;color:#3E5458;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.tarjeta .cuerpo{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tarjeta h3{color:var(--hueso)}
.tarjeta .meta{font-size:.8rem;color:var(--oro-claro);letter-spacing:.04em;margin:0}
.tarjeta .resumen{font-size:.93rem;color:var(--hueso-suave);margin:0}
.etiqueta{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--oro-claro);width:fit-content}

/* --- ficha de proyecto y de caso --------------------------------- */
.ficha-cabecera{padding:clamp(2.5rem,6vw,4rem) 0 2rem}
.migas{font-size:.84rem;color:var(--hueso-suave);margin-bottom:1.4rem}
.migas a{text-decoration:none;border-bottom:1px solid var(--linea)}
.migas a:hover{color:var(--oro-claro);border-bottom-color:var(--oro)}
.ficha-subtitulo{font-family:var(--firma);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--oro-claro);line-height:1;margin:.6rem 0 0}
.ficha-rejilla{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;padding-bottom:clamp(3rem,6vw,4.5rem)}
.sinopsis{font-size:1.05rem;max-width:var(--ancho-texto)}
.sinopsis h2{font-family:var(--texto);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);font-weight:600;margin-bottom:.9rem}
.ficha-imagen{width:100%;border:1px solid var(--oro);margin-bottom:1.6rem}
.datos{border:1px solid var(--linea);background:var(--verde-alt);padding:1.4rem 1.5rem;font-size:.93rem}
.datos dl{margin:0;display:grid;gap:1rem}
.datos dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro);font-weight:600}
.datos dd{margin:.2rem 0 0;color:var(--hueso)}
.premios{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem}
.premios li{border-left:2px solid var(--oro);padding-left:1rem}
.premios strong{display:block;font-size:.96rem}
.premios span{color:var(--hueso-suave);font-size:.88rem}
.nota{font-size:.88rem;color:var(--hueso-suave);border-top:1px solid var(--linea);padding-top:1.1rem;margin-top:1.8rem}

/* bloques de un caso de copy: encargo, reto, insight, idea */
.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;margin:2rem 0}
.bloque h2,.bloque h3{font-family:var(--texto);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);font-weight:600;margin-bottom:.5rem}
.bloque p{margin:0;color:var(--hueso)}
.idea{border:1px solid var(--oro);background:rgba(230,184,0,.09);padding:1.4rem 1.5rem;margin:2rem 0}
.idea h2,.idea h3{font-family:var(--texto);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);font-weight:600;margin-bottom:.5rem}
.idea p{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:0;color:var(--oro)}
.guion{border-left:2px solid var(--linea);padding-left:1.2rem;margin:1.6rem 0;color:var(--hueso-suave);font-size:.95rem;white-space:pre-line}
.aviso-ficticia{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro-tinta);background:var(--oro-claro);padding:.3rem .7rem;width:fit-content;font-weight:600}
.credito{font-size:.85rem;color:var(--hueso-suave);font-style:italic}

/* --- avisos de material pendiente, solo en borrador -------------- */
.pendiente{border:1px dashed var(--oro-claro);color:var(--oro-claro);background:rgba(230,184,0,.08);padding:.55rem .9rem;font-size:.82rem;display:inline-block}

/* --- pie ---------------------------------------------------------- */
.pie{border-top:1px solid var(--linea);background:var(--verde-alt);padding:3.5rem 0 2.5rem;font-size:.93rem}
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.2rem}
.pie h2{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin-bottom:.8rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pie a{color:var(--hueso-suave);text-decoration:none;border-bottom:1px solid transparent}
.pie a:hover{color:var(--oro-claro);border-bottom-color:var(--oro)}
.pie .legal{color:var(--hueso-suave);font-size:.8rem;margin-top:2.5rem}

/* --- móvil -------------------------------------------------------- */
@media (max-width:820px){
  .hero-abajo,.ficha-rejilla{grid-template-columns:1fr}
  .hero-abajo .retrato{margin-left:0;max-height:none}
  .retrato{max-width:20rem}
  .cabecera .caja{min-height:3.4rem;padding-top:.6rem;padding-bottom:.6rem}
  .menu{gap:1rem;font-size:.85rem}
  body{font-size:16px}
  h1{font-size:clamp(1.9rem,8.6vw,3rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tarjeta{transition:none}
}

@media print{
  .cabecera,.acciones,.pie,.pendiente{display:none}
  body{background:#fff;color:#111}
  h1,h2,h3,.rotulo,.etiqueta{color:#111}
}

/* --- imágenes por convención de nombre ---------------------------
   Cada tarjeta y cada ficha buscan su imagen por el nombre del
   proyecto. Si el archivo no está, se ve el hueco de reserva.
   Para poner o cambiar un cartel basta con dejar el archivo en
   sitio/img/proyectos/ con el nombre correcto. No hay que tocar
   el código ni volver a generar las páginas.
------------------------------------------------------------------*/
.visual{position:relative;aspect-ratio:4/3;background:var(--verde-hondo);border-bottom:1px solid var(--linea);overflow:hidden}
.visual .sin-imagen{position:absolute;inset:0;display:grid;place-items:center;aspect-ratio:auto;border:0;background:none;color:#3E5458;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.visual img{position:relative;width:100%;height:100%;object-fit:contain;padding:.7rem;display:block}

/* --- movimiento ---------------------------------------------------
   Reglas de la casa:
   · Duraciones cortas (0,4 a 0,8 s) y curvas que frenan al final.
   · Desplazamientos de 14 px, no de media pantalla.
   · Solo se anima opacidad, transform y clip-path, que no obligan al
     navegador a recalcular la página entera.
   · La clase .con-movimiento la pone el script. Sin JavaScript no se
     oculta nada: la web se ve completa, solo que quieta.
   · Quien tenga «reducir movimiento» activado en su sistema no ve
     ninguna de estas animaciones.
--------------------------------------------------------------------*/
.con-movimiento .entra{opacity:0;transform:translateY(14px)}
.con-movimiento .entra.dentro{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.25,1) var(--retardo,0ms),
             transform .55s cubic-bezier(.22,.61,.25,1) var(--retardo,0ms);
}
/* La franja se revela con una cortina que se retira, no recortando la
   propia franja: un elemento recortado con clip-path tiene área visible
   cero y el observador de scroll deja de verlo, así que nunca se
   revelaría. Lo aprendimos por las malas. */
.con-movimiento .franja.entra{opacity:1;transform:none;position:relative;overflow:hidden}
.con-movimiento .franja.entra:after{
  content:"";position:absolute;inset:0;background:var(--verde);
  transform-origin:right;transition:transform .75s cubic-bezier(.22,.61,.25,1)
}
.con-movimiento .franja.entra.dentro:after{transform:scaleX(0)}
.con-movimiento .regla.entra{opacity:1;transform:none}
.con-movimiento .regla.entra:before,.con-movimiento .regla.entra:after{transform:scaleX(0)}
.con-movimiento .regla.entra:before{transform-origin:right}
.con-movimiento .regla.entra:after{transform-origin:left}
.con-movimiento .regla.entra.dentro:before,.con-movimiento .regla.entra.dentro:after{
  transform:scaleX(1);transition:transform .7s cubic-bezier(.22,.61,.25,1)
}
.con-movimiento .regla.entra .destello{opacity:0;transform:rotate(-120deg) scale(.4)}
.con-movimiento .regla.entra.dentro .destello{
  opacity:1;transform:none;
  transition:opacity .5s ease-out,transform .7s cubic-bezier(.22,.61,.25,1)
}
.con-movimiento .ficha-imagen.entra{opacity:0;transform:scale(.985)}
.con-movimiento .ficha-imagen.entra.dentro{
  opacity:1;transform:none;transition:opacity .6s ease-out,transform .8s cubic-bezier(.22,.61,.25,1)
}
.boton{transition:background .18s ease,color .18s ease,border-color .18s ease}
.menu a,.enlace-todo,.pie a,.migas a{transition:color .18s ease,border-color .18s ease}
.visual img{transition:transform .45s cubic-bezier(.22,.61,.25,1)}
.tarjeta:hover .visual img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .con-movimiento .entra,.con-movimiento .entra.dentro,
  .con-movimiento .franja.entra:after,.con-movimiento .regla.entra:before,
  .con-movimiento .regla.entra:after,.con-movimiento .regla.entra .destello,
  .con-movimiento .ficha-imagen.entra{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important
  }
  .tarjeta:hover .visual img,.tarjeta:hover{transform:none}
}


/* --- cita de apertura de la biografía -----------------------------
   Comillas angulares, que son las correctas en español y las que mejor
   dibuja Fraunces. No se usa filete a la izquierda: ese recurso ya
   significa «premio» en las fichas y no conviene que signifique dos
   cosas distintas.
--------------------------------------------------------------------*/
.cita{position:relative;margin:0 0 2.6rem;max-width:36rem;padding-left:2.4rem}
.cita p{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.32;color:var(--oro);margin:0}
.cita:before{content:"\00AB";position:absolute;left:0;top:-.12em;font-family:var(--display);font-size:4.2rem;line-height:1;color:var(--oro);opacity:.45}

/* --- fichas de caso: el hallazgo ------------------------------------
   La cita recoge el insight, que es lo que vende el caso. Las casillas
   van siempre en el mismo orden para que la ficha se hojee sin releer
   las etiquetas. El resto de la ficha va por láminas (más abajo).
------------------------------------------------------------------*/
.cita-caso{margin:0 0 2.2rem;max-width:40rem}
.cita-caso p{font-size:clamp(1.2rem,2.2vw,1.55rem)}
.cita-caso{min-height:2.8rem}
.cita-caso:before{font-size:3.2rem;top:-.06em}

.ficha-cabecera .credito{color:var(--hueso-suave);font-size:.88rem;margin:.9rem 0 0;font-style:normal}


/* El retrato de portada se ve entero: una foto de alguien no se recorta. */
.hero-abajo .retrato{aspect-ratio:auto;object-fit:contain;max-height:420px;width:auto;margin-left:auto}
@media (max-width:820px){.hero-abajo .retrato{margin:0;max-height:none;width:100%}}

/* --- biografía: la cita y el texto y, al lado, la foto de la cámara.
   La foto arranca a la altura de la cita y se ve entera, sin recorte: no se estira
   hasta el final del texto porque para eso habría que recortarla (probado). */
.bio-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) var(--bio-foto,26rem);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.bio-cuerpo .sinopsis{max-width:none}
.bio-cuerpo .cita{max-width:none}
.bio-foto{margin:0}
.bio-foto img{display:block;width:100%;height:auto;border:1px solid var(--linea)}
.bio-foto figcaption{color:var(--hueso-suave);font-size:.82rem;margin-top:.6rem}
@media (max-width:1100px){.bio-cuerpo{--bio-foto:22rem}}
@media (max-width:820px){
  .bio-cuerpo{grid-template-columns:1fr}
  .bio-texto{display:contents}
  .bio-cuerpo .cita{order:-2}
  .bio-foto{order:-1;justify-self:center;width:100%;max-width:15rem;margin-bottom:.6rem}
}

/* asociaciones del pie: enlace y, si hay archivo, logo */
.asoc{display:inline-flex;align-items:center;gap:.6rem}
.logo-asoc{display:block;height:2.6rem;width:auto;opacity:.88;
  /* cualquier logo pasa a un solo tono, el hueso de la web. Un filtro y no una máscara:
     la máscara no funciona al abrir la web en local con doble clic */
  filter:brightness(0) invert(.93) sepia(.18);transition:opacity .18s ease}
.asoc:hover .logo-asoc{opacity:1}
.pie a.asoc,.pie a.asoc:hover{border-bottom:0}

/* --- portada: el retrato a sangre ---------------------------------
   La foto va fuera de la caja, a toda la altura de la cabecera y pegada al borde
   derecho y a la franja dorada. El fundido lo hace la web con una máscara de
   degradado (esta sí funciona en local), así el verde es siempre el del fondo:
   la foto se sube SIN degradado. */
.hero{position:relative;overflow:hidden}
.hero .caja{position:relative;z-index:2}
.hero-abajo{display:block}
.hero-abajo>div:first-child{max-width:33rem}
/* Estrecho: sin fundido, con la sombra dorada desplazada y recortada sobre la figura (la foto tiene media pared vacía). */
.hero-foto{margin:2.2rem 1.5rem 14px calc(1.5rem + 14px);max-width:24rem;aspect-ratio:4/5;overflow:hidden;
  box-shadow:-14px 14px 0 var(--oro)}
.hero-foto img{display:block;width:155%;max-width:none;height:auto;margin:-24% 0 0 -55%}
@media (min-width:1240px){
  .hero{min-height:620px}
  .hero-foto{position:absolute;top:0;bottom:0;right:0;margin:0;max-width:none;aspect-ratio:auto;overflow:visible;box-shadow:none;z-index:1}
  .hero-foto img{height:100%;width:auto;margin:0;object-fit:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);
    mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
}
@media (max-width:1239px){.hero{padding-bottom:clamp(2rem,5vw,3rem)}}

/* --- fichas de caso por láminas -----------------------------------
   Como el portafolio de copy: cada lámina, su texto a la izquierda y
   sus imágenes a la derecha; en móvil, el texto y debajo sus imágenes.
   Las imágenes llevan la sombra dorada desplazada del retrato de
   portada; la pone la web, los archivos vienen sin ella.
--------------------------------------------------------------------*/
.migas-caso{margin:clamp(2rem,5vw,3rem) 0 0}
.lamina{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2.6rem,6vw,4.2rem)}
.lamina .regla{margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.lamina-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.lamina-cabeza{margin-bottom:1.8rem}
.lamina-cabeza .rotulo{margin-bottom:0}
.lamina-cabeza .credito{color:var(--hueso-suave);font-size:.88rem;margin:.9rem 0 0;font-style:normal}
.lamina-cabeza .aviso-ficticia{margin:1.1rem 0 0}
.lamina-titulo{font-family:var(--titular);font-weight:400;letter-spacing:.012em;line-height:1.06;
  font-size:clamp(1.9rem,4.2vw,3rem)}
.lamina-bajada{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-suave);margin:.7rem 0 0}
.lamina .cita-caso{margin-bottom:1.8rem}
.lamina .bloques{grid-template-columns:1fr;gap:1.3rem;margin:0}
.lamina .idea{margin:clamp(2.2rem,5vw,3.2rem) 0 0}
.lamina .acciones{margin-top:1.6rem}
.pieza+.pieza{margin-top:1.8rem}
.pieza h3{font-family:var(--texto);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-claro);font-weight:600;margin:0 0 .55rem}
.pieza p{margin:0;max-width:var(--ancho-texto)}
/* Los guiones, en monoespaciada, como se escriben. */
.lamina .guion{font-family:"Courier Prime","Courier New",Courier,ui-monospace,monospace;font-size:.9rem;
  line-height:1.6;color:var(--hueso);border-left:2px solid var(--oro);margin:.9rem 0 0}
.lamina-ancho{grid-column:1/-1}
.lamina-ancho .lamina-cabeza{margin-bottom:0}

/* composiciones de imágenes; el margen deja sitio a la sombra (--sombra) */
.comp figure{margin:0}
.comp img{display:block;width:100%;height:auto;box-shadow:calc(-1 * var(--sombra)) var(--sombra) 0 var(--oro)}
.lamina-imagenes{padding:0 0 var(--sombra) var(--sombra)}
.comp-columna{display:grid;gap:2rem}
/* Grupos (la gráfica 3+1, la tira de ojos): se leen como una sola pieza.
   Separación fina con franja dorada entre las fotos y una sola sombra para el conjunto. */
.comp-grupo{--sep:6px;display:grid;gap:var(--sep);background:var(--oro);box-shadow:calc(-1 * var(--sombra)) var(--sombra) 0 var(--oro)}
.comp-grupo img{box-shadow:none}
.comp-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sep)}
.comp-fila img{aspect-ratio:4/3;object-fit:cover}
/* Tira (ojos de Solera, fotogramas de CEAR): fotos en columna, separadas, cada una con su
   sombra. Con fondo dorado entre ellas quedaba raro (decisión de Fer, 6 oct). */
.comp-tira{max-width:var(--tira,26rem);margin:0 auto;gap:1.8rem}
@media (max-width:820px){
  :root{--sombra:6px}
  .lamina-rejilla{grid-template-columns:1fr}
  .comp-tira{max-width:min(var(--tira,20rem),20rem);gap:1.4rem}
  .comp-grupo{--sep:4px}
}

/* Lámina ancha (la gráfica de exterior de Solera, como en el portafolio): una sola
   columna, la fila de tres fotos separadas con su pie, la grande debajo y el copy al
   final con su primera frase en grande. Ancho tope: el de la imagen grande (924 px). */
.lamina-ancho.lamina-imagenes{max-width:calc(924px + var(--sombra));width:100%}
.comp-sueltas{display:grid;gap:2.2rem}
.comp-sueltas .comp-fila{gap:clamp(1.2rem,4vw,3.4rem)}
.comp-sueltas .comp-fila img{aspect-ratio:4/3;object-fit:cover}
.comp-sueltas figcaption{text-align:center;font-weight:700;color:var(--oro);font-size:.95rem;margin-top:1.2rem}
.pieza-titular{font-family:var(--texto);font-weight:600;font-size:clamp(1.4rem,3.2vw,2.3rem);
  line-height:1.2;color:var(--oro);margin:0 0 .8rem!important;max-width:none!important;text-wrap:balance}
.lamina-ancho .lamina-cabeza{margin-bottom:.4rem}
@media (max-width:820px){
  .comp-sueltas{gap:1.6rem}
  .comp-sueltas figcaption{margin-top:.8rem}
}

/* Imágenes sueltas (capturas de Zesauro): a su tamaño real como máximo, nunca ampliadas. */
.comp-columna img,.comp-par img{width:auto;max-width:100%}
.comp-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:start}
/* Lámina en parejas: cada pieza con su captura al lado, una fila por pieza. */
.lamina-rejilla>.lamina-ancho+.lamina-texto,.lamina-rejilla>.lamina-ancho+.lamina-texto+.lamina-imagenes{margin-top:.4rem}
/* Copy literal citado: es la prueba de que escribe, va entero y en la letra del texto. */
.literal{margin:1rem 0 0;border-left:2px solid var(--oro);padding-left:1.1rem}
.literal p{margin:0;color:var(--hueso-suave);font-style:italic;font-size:.98rem}
@media (max-width:820px){
  .comp-par{gap:1.4rem}
}

/* Parejas en columnas (blog de Zesauro): dos piezas lado a lado, cada una con su imagen
   debajo, algo más pequeña. En estrecho se apilan: texto e imagen, texto e imagen. */
.parejas-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem);
  margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.pareja-columna{display:flex;flex-direction:column;gap:1.6rem}
/* Las dos imágenes arrancan a la misma altura aunque un texto sea más largo. */
@supports (grid-template-rows:subgrid){
  .parejas-columnas{row-gap:1.6rem}
  .pareja-columna{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}
.pareja-columna .comp img,.parejas-columnas>.lamina-imagenes .comp img{max-width:min(100%,26rem)}
.parejas-columnas>.lamina-texto{margin-top:clamp(1rem,3vw,2rem)}
.parejas-columnas>.lamina-imagenes{margin-top:clamp(1rem,3vw,2rem)}
@media (max-width:820px){.parejas-columnas{grid-template-columns:1fr}}

/* El rótulo de una pieza enlazada se ve como los demás; el subrayado sale al pasar por encima. */
.pieza h3 a{text-decoration:none;color:inherit;transition:color .18s ease}
.pieza h3 a:hover,.pieza h3 a:focus-visible{color:var(--hueso);text-decoration:underline;text-underline-offset:3px}

/* Lámina solo de texto: menos aire entre el título y las columnas, y el guion arranca
   a la misma altura que la columna de al lado cuando no lleva rótulo. */
.solo-texto{row-gap:clamp(1.4rem,3vw,2.2rem)}
.pieza-guion>.guion:first-child{margin-top:0}
.pieza>p:first-child{margin-top:0}

/* Escenas (L'Quipe, como en el portafolio): cada foto a la izquierda y su fragmento de
   texto a la derecha. En estrecho, la foto y debajo su texto. */
.escenas{display:grid;gap:clamp(2rem,4vw,2.8rem)}
.escena{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:center}
.escena .lamina-texto{max-width:var(--ancho-texto)}
.escena .guion,.escena .literal{margin:0}
.escenas>.lamina-imagenes{max-width:calc(56rem + var(--sombra))}
.escena-texto{max-width:var(--ancho-texto)}
@media (max-width:820px){
  .escena{grid-template-columns:1fr;gap:1.2rem}
  .escena .lamina-imagenes{max-width:calc(20rem + var(--sombra))}
}
/* Fila libre (L'Quipe): las fotos en fila, cada una con su forma, sin recortar. */
.comp-fila-libre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
@media (max-width:820px){.comp-fila-libre{gap:1rem}}

/* Spot incrustado (CEAR): fotograma propio con botón de reproducir; al pulsar, el vídeo
   ocupa el mismo hueco. Lleva la sombra dorada de las imágenes. */
.video{position:relative;aspect-ratio:16/9;margin:1.6rem 0 var(--sombra) var(--sombra);
  box-shadow:calc(-1 * var(--sombra)) var(--sombra) 0 var(--oro);background:#000}
.video iframe,.video-portada{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-portada img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .25s ease}
.video-portada:hover img,.video-portada:focus-visible img{filter:brightness(.75)}
.video-play{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;
  border-radius:50%;background:var(--oro);display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .2s ease}
.video-play svg{width:1.9rem;height:1.9rem;fill:var(--oro-tinta);margin-left:.2rem}
.video-portada:hover .video-play{transform:scale(1.06)}
.video-rotulo{position:absolute;left:0;bottom:0;padding:.55rem .9rem;background:rgba(15,35,38,.85);
  color:var(--oro);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
@media (prefers-reduced-motion:reduce){.video-play,.video-portada img{transition:none}}

/* Ficha técnica de la pieza (duración, emisión) con el formato del crédito de la cabecera. */
.pieza-tema>p:not(.pieza-titular){color:var(--hueso-suave);font-size:.88rem;line-height:1.6}
/* Aperturas de CEAR: las fotos bajan hasta la última línea del texto. La sombra sobresale
   por debajo, así que se resta para que lo que alinee sea el borde de la foto. */
.lamina-imagenes.imagenes-abajo{align-self:end;margin-bottom:calc(-1 * var(--sombra) + .35rem)}
@media (max-width:820px){.lamina-imagenes.imagenes-abajo{margin-bottom:0}}
/* La ficha técnica bajo el título de la lámina, como el crédito bajo el de la cabecera;
   el vídeo de al lado arranca a la altura del guion. */
.lamina-cabeza .credito{color:var(--hueso-suave);font-size:.88rem;margin:.9rem 0 0;font-style:normal}
.solo-texto .lamina-texto>.video:first-child{margin-top:0}

/* Vídeo de una ficha de proyecto: la portada es el cartel, vertical. Se ve entero en el
   centro, sobre una copia ampliada y desenfocada que rellena el formato 16:9. */
.video-fondo{position:absolute;inset:-20px;background-size:cover;background-position:center;
  filter:blur(18px) brightness(.55)}
.video-portada{overflow:hidden}
.video-portada img.video-cartel{position:relative;object-fit:contain;padding:.9rem 0}

/* --- ficha de proyecto: columna derecha ----------------------------
   Ordenador: a la izquierda, cartel, sinopsis y nota; a la derecha, siempre en este
   orden, datos, acción (vídeo o botón, si lo hay) y premios.
   Móvil: cartel, sinopsis, nota, acción, premios y datos (decisión de Fer, 6 oct).
   El cartel no pasa de la altura de la pantalla y se ve entero, sin recortar. */
.ficha-lado{display:flex;flex-direction:column;gap:2.2rem;min-width:0}
.ficha-accion .video{margin-top:0}
.ficha-accion .acciones{margin-top:0}
.ficha-premios h2{font-family:var(--texto);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-claro);font-weight:600;margin-bottom:.9rem}
.ficha-premios .premios{margin-top:0}
.ficha-imagen{width:auto;max-width:100%;max-height:calc(100vh - 7rem);max-height:calc(100svh - 7rem)}
@media (max-width:820px){
  .ficha-lado{gap:2rem}
  .ficha-lado>.datos{order:2}
  .ficha-lado>.ficha-premios{order:1}
}

/* --- tarjetas de artículos del Substack: la portada del artículo arriba, entera,
   como las demás tarjetas (variante A, elegida por Fer el 6 oct) --- */
.visual-articulo{aspect-ratio:16/9}
.visual-articulo img{object-fit:cover;padding:0}

/* --- lista única de correcciones (aplicada el 9 de octubre de 2026) -----------
   Cada regla lleva el número de la lista (pruebas/lista-unica-2026-10-06.md). */

/* Texto solo para lectores de pantalla. */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1.5 Franja de credenciales en 3 + 3 en ordenador. */
@media (min-width:821px){.franja ul{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 1.10 Menú en una sola fila en móvil: el nombre arriba y el menú debajo, repartido. */
@media (max-width:820px){
  .cabecera .caja{gap:.35rem}
  .menu{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:.6rem;font-size:.8rem}
  .menu a{padding:.3rem 0;white-space:nowrap}
}

/* 1.1 El correo del pie, visible y fácil de pulsar. */
.pie a.pie-correo{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.25rem;
  color:var(--oro);padding:.45rem 0;line-height:1.3;border-bottom:1px solid transparent;word-break:break-word}
.pie a.pie-correo:hover,.pie a.pie-correo:focus-visible{color:var(--hueso);border-bottom-color:var(--oro)}

/* 2.17 Redes del pie: símbolos en hueso, dorados al pasar el cursor o con el foco. */
.pie ul.redes{display:flex;flex-wrap:wrap;gap:.4rem}
.pie a.red{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--hueso);border-bottom:0}
.pie a.red svg{width:1.5rem;height:1.5rem;fill:currentColor}
.pie a.red:hover,.pie a.red:focus-visible{color:var(--oro)}

/* 1.9 Logos de ALMA y DAMA en línea y más presentes; dorados al pasar el cursor o con el
   foco. El color sale de un filtro: los archivos oficiales no se tocan. */
.pie ul.asociaciones{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem}
.logo-asoc{height:3.2rem;opacity:1}
.asoc:hover .logo-asoc,.asoc:focus-visible .logo-asoc{
  filter:brightness(0) saturate(100%) invert(72%) sepia(76%) saturate(1500%) hue-rotate(5deg) brightness(101%) contrast(102%)}

/* 2.6 y 2.12 Logline bajo el título de la ficha: lo primero que se lee. */
.ficha-logline{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.5;color:var(--hueso);max-width:44rem;margin:1.1rem 0 0}
.ficha-subtitulo+.ficha-logline{margin-top:1.3rem}
/* 2.12 El cartel no se come la primera pantalla. */
.ficha-imagen{max-height:calc(100vh - 10rem);max-height:calc(100svh - 10rem)}
@media (max-width:820px){.ficha-imagen{max-height:min(58svh,30rem)}}
/* 2.11 El vídeo, en la columna principal, bajo la sinopsis. */
.sinopsis>.ficha-accion{margin-top:2rem}

/* 2.13 Descriptor de las fichas de caso, en estilo de rótulo (la manuscrita queda para
   los subtítulos de obra). */
.ficha-descriptor{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-suave);margin:.8rem 0 0}

/* 2.1, 2.3 y 2.10 Bloque de contacto: una frase y «Escríbeme». */
.ficha-cierre{border-top:1px solid var(--linea);padding:clamp(2.4rem,6vw,3.6rem) 0}
.cierre-portada{padding:clamp(3rem,7vw,4.6rem) 0}
.contacto-cierre{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem}
.contacto-frase{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;
  color:var(--oro);margin:0;max-width:40rem}

/* 3.2 «Siguiente proyecto» y «Siguiente caso». */
.siguiente{border-top:1px solid var(--linea)}
.siguiente a{display:flex;flex-direction:column;gap:.35rem;padding:1.8rem 0 2.2rem;text-decoration:none;width:fit-content}
.siguiente-rotulo{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-suave);font-weight:600}
.siguiente-titulo{font-family:var(--titular);text-transform:uppercase;letter-spacing:.012em;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;color:var(--oro);transition:color .18s ease}
.siguiente a:hover .siguiente-titulo,.siguiente a:focus-visible .siguiente-titulo{color:var(--hueso)}
/* 1.8 La cita de la ficha de caso entra después del título que lleva encima. */
.lamina-texto>.cita-caso{--retardo:220ms}
/* Frase final destacada de la entradilla de portada («Cuéntame qué necesitas.»). */
.hero .entradilla strong{font-weight:600;color:var(--oro)}

/* --- logos de la franja de credenciales (10 oct) ---------------------
   Logo a la izquierda del texto, a altura fija y sin deformar; todos alineados arriba.
   Los archivos ya vienen en el verde de la web: no llevan filtro. Si un logo queda
   desproporcionado, se ajusta su --logo-alto aquí, por nombre de archivo. */
.franja li{display:flex;align-items:flex-start;gap:1rem}
/* Los logos vienen en un lienzo cuadrado transparente, con el dibujo centrado: todos
   ocupan la misma caja cuadrada y los textos quedan alineados en columna. */
.credencial-logo{flex:none;width:var(--logo-alto,48px);height:var(--logo-alto,48px);object-fit:contain}
.franja li>div{min-width:0}
@media (max-width:820px){
  .credencial-logo{width:calc(var(--logo-alto,48px) * .84);height:calc(var(--logo-alto,48px) * .84)}
}
/* Nota bajo las credenciales («Entre otros premios y selecciones.»), en el tono de los detalles. */
.franja-nota{margin:1.6rem 0 0;text-align:center;font-size:.84rem;font-style:italic;color:#33401F}

/* Pie centrado en todas las anchuras (pedido de Fer, 10 oct): los tres bloques se reparten
   en el centro y, si no caben en una fila, bajan uno debajo de otro, también centrados.
   Cada título queda centrado sobre su bloque. */
.pie-rejilla{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem 5.5rem}
.pie-rejilla>div{text-align:center}
.pie ul.redes,.pie ul.asociaciones{justify-content:center}
.pie .legal{text-align:center}

/* Bloque «Escríbeme»: cuando el botón cae bajo la frase (pantallas estrechas y móvil), frase
   y botón van centrados; mientras cabe al lado, sigue junto a la frase (pedido de Fer, 10 oct). Los cortes
   salen de medir dónde baja: 876 px con frase larga, 384 px con «¿Te interesa?». */
@media (max-width:876px){.cierre-largo .boton{margin-inline:auto}
  .cierre-largo .contacto-frase{text-align:center;margin-inline:auto}}
@media (max-width:384px){.cierre-corto .boton{margin-inline:auto}
  .cierre-corto .contacto-frase{text-align:center;margin-inline:auto}}

/* Galería «Por dentro» de una ficha de proyecto (10 oct): dos imágenes en dos columnas desde
   720 px, una en móvil; sin sombras ni marcos; el pie, como el de la foto de la biografía. */
.ficha-galeria{padding:0 0 clamp(2.6rem,6vw,4rem)}
.ficha-galeria h2{font-family:var(--texto);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-claro);font-weight:600;margin-bottom:1.2rem}
.galeria-obra{display:grid;grid-template-columns:1fr;gap:1.6rem}
.galeria-obra figure{margin:0}
.galeria-obra a{display:block}
.galeria-obra img{width:100%;height:auto}
.galeria-obra figcaption{color:var(--hueso-suave);font-size:.82rem;margin-top:.6rem}
@media (min-width:720px){.galeria-obra{grid-template-columns:1fr 1fr}}
/* Enlaces de la caja de datos de una ficha (Jen del Pozo, Filmin): dorados al pasar el cursor
   o con el foco del teclado, como los iconos del pie. El subrayado se mantiene. */
.datos dd a{transition:color .18s ease}
.datos dd a:hover,.datos dd a:focus-visible{color:var(--oro)}