/* ─────────────────────────────────────────────────────────────────────────────
   Tarjeta de proyecto «Hueso y tinta» — elegida por Jesús el 10-09-2026 entre seis.
   Marco de navegador: barra con el dominio, mockup de la web en ordenador y móvil,
   y debajo sector, nombre y lo que se hizo. Sin bloque de enlace: la tarjeta entera
   es el enlace y el dominio enciende su flecha al pasar.

   Vive en la hoja LOCAL a propósito: se carga después de `itb-portafolio.css` y se
   revierte borrando este fichero, sin tocar la hoja principal ni el mu-plugin.

   🥇 Los tokens van prefijados `--itb-pfn-*`. Elementor emite 39 variables por
   elemento (`--width`, `--gap`, `--display`…) y un token propio con uno de esos
   nombres vale lo que diga Elementor dentro de cualquier contenedor suyo.
   ────────────────────────────────────────────────────────────────────────── */

.itb-pf{
  --itb-pfn-tinta:#12141d;
  --itb-pfn-hueso:#eeefe7;
  --itb-pfn-papel:#ffffff;
  --itb-pfn-linea:#dfe1d6;
  --itb-pfn-suave:#6b6d76;
  --itb-pfn-lima:#ccff8b;
}

/* ── La rejilla ─────────────────────────────────────────────────────────── */
.itb-pf .itb-pf__rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}

/* ── La tarjeta ─────────────────────────────────────────────────────────── */
.itb-pf .itb-pf__tarjeta{
  background:var(--itb-pfn-papel);
  border:1px solid var(--itb-pfn-linea);
  border-radius:12px;
  overflow:hidden;
  margin:0;
  transition:border-color .2s ease, transform .2s ease;
}
.itb-pf .itb-pf__tarjeta:hover{
  border-color:var(--itb-pfn-tinta);
  transform:translateY(-2px);
}
.itb-pf .itb-pf__enlace{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ── Barra de navegador ─────────────────────────────────────────────────── */
.itb-pf .itb-pf__barra{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  background:var(--itb-pfn-hueso);
  border-bottom:1px solid var(--itb-pfn-linea);
}
.itb-pf .itb-pf__luces{display:flex; gap:5px; flex:none}
.itb-pf .itb-pf__luces i{
  width:9px; height:9px; border-radius:50%;
  background:var(--itb-pfn-linea); display:block;
}
.itb-pf .itb-pf__url{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:6px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px; line-height:1.4;
  color:var(--itb-pfn-suave);
  background:var(--itb-pfn-papel);
  border:1px solid var(--itb-pfn-linea);
  border-radius:99px;
  padding:3px 11px;
  transition:border-color .2s ease, color .2s ease;
}
.itb-pf .itb-pf__url span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* La flecha aparece al pasar: es la señal de «esto abre algo», sin gastar una línea */
.itb-pf .itb-pf__url b{flex:none; font-weight:400; opacity:0; transition:opacity .2s ease}
.itb-pf .itb-pf__tarjeta:hover .itb-pf__url{
  border-color:var(--itb-pfn-tinta);
  color:var(--itb-pfn-tinta);
}
.itb-pf .itb-pf__tarjeta:hover .itb-pf__url b{opacity:1}

/* ── El mockup ──────────────────────────────────────────────────────────── */
.itb-pf .itb-pf__foto{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--itb-pfn-hueso);
}
.itb-pf .itb-pf__foto img{width:100%; height:100%; object-fit:cover; display:block}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
.itb-pf .itb-pf__cuerpo{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.itb-pf .itb-pf__meta{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--itb-pfn-suave);
  margin:0;
}
.itb-pf .itb-pf__titulo{
  font-family:Merriweather,Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:17px;
  line-height:1.2;
  margin:0;
  color:var(--itb-pfn-tinta);
}
.itb-pf .itb-pf__serv{
  display:flex; flex-wrap:wrap; gap:5px;
  list-style:none; margin:0; padding:0;
}
.itb-pf .itb-pf__serv li{
  font-size:10.5px; font-weight:600;
  border-radius:99px; padding:2px 9px;
  background:var(--itb-pfn-hueso);
  color:var(--itb-pfn-suave);
  border:1px solid var(--itb-pfn-linea);
}

/* La tarjeta destacada a lo ancho del listado antiguo no aplica a este diseño */
.itb-pf .itb-pf__tarjeta:only-child .itb-pf__enlace{display:block}
.itb-pf .itb-pf__tarjeta:only-child .itb-pf__foto{aspect-ratio:16/10; min-height:0; height:auto}
.itb-pf .itb-pf__tarjeta:only-child .itb-pf__cuerpo{padding:14px 16px 16px; justify-content:flex-start}

/* Quien no quiera movimiento no lo tiene */
@media (prefers-reduced-motion:reduce){
  .itb-pf .itb-pf__tarjeta,
  .itb-pf .itb-pf__url,
  .itb-pf .itb-pf__url b{transition:none}
  .itb-pf .itb-pf__tarjeta:hover{transform:none}
}