/* ==========================================================================
   Página de proyectos
   Encabezado con el titular y su entradilla, barra de filtros centrada y
   pegajosa bajo el menú, y una rejilla de dos fichas por fila: imagen arriba,
   nombre y descripción breve debajo.
   ========================================================================== */

/* ---------- 1 · Banda oscura a sangre ----------
   Mismo planteamiento que la portada de "El estudio": banda a sangre con los
   focos de color difuminados y la hoja crema montada encima. La diferencia es
   el reparto: titular a la izquierda, entradilla a la derecha.
   El relleno vertical lo pone la regla general de .web-service-page; solo se
   corrige el superior en móvil, para que la miga libre el menú fijo. */
.proj-cover{
  position:relative;overflow:hidden;isolation:isolate;
  background:#16120E;color:#fff;
}
/* Relleno propio, por encima del genérico de .web-service-page: arriba para
   librar el menú fijo con holgura, y abajo lo bastante para que quede banda
   oscura visible bajo el texto DESPUÉS de que la hoja crema suba por encima
   (sube entre 72 y 104 px según el ancho). Con el relleno genérico apenas
   sobraban unos píxeles y el titular quedaba pegado a la sección siguiente. */
.proj-page main section.proj-cover{
  padding:calc(104px + clamp(2.2rem,4vw,3.6rem)) 0 clamp(9rem,14vw,13rem);
}
.proj-cover__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.proj-cover__bg i{position:absolute;display:block;border-radius:50%;filter:blur(110px)}
.proj-cover__bg i:nth-child(1){width:44vw;height:44vw;left:-10vw;top:-12vw;background:#e36539;opacity:.5}
.proj-cover__bg i:nth-child(2){width:36vw;height:36vw;right:-6vw;top:4vw;background:#7d9fe4;opacity:.3}
.proj-cover__bg i:nth-child(3){width:32vw;height:32vw;left:36vw;bottom:-16vw;background:#c9962e;opacity:.26}


.proj-cover__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem);align-items:end;
}
.proj-cover__k{
  display:block;font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.proj-page main .proj-cover h1{
  margin:1.4rem 0 0;color:#fff;font-weight:500;
  font-size:clamp(2.9rem,7vw,6rem);letter-spacing:-.055em;line-height:1;
}
.proj-dot{color:#e36539}
.proj-cover__p{
  margin:0 0 .45rem;max-width:44ch;
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.75;color:rgba(255,255,255,.74);
}

/* La hoja crema, montada sobre la banda */
.proj-sheet{
  position:relative;z-index:2;
  margin-top:clamp(-6.5rem,-7vw,-4.5rem);
  background:var(--paper);
  border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0;
  padding-top:clamp(2.4rem,4.5vw,3.8rem);
}

/* ---------- 2 · Filtro ----------
   Control segmentado: una cápsula de cristal con un bloque oscuro que se
   desliza hasta el botón elegido. Cada servicio lleva un punto de su color,
   el mismo de las etiquetas de las fichas.
   Estático a propósito: no acompaña al desplazamiento. */
.proj-page main section.proj-filter{padding:0}
.proj-filter{position:relative}
.proj-filter[hidden]{display:none}
.proj-filter__in{display:flex;justify-content:center;padding:0}

.proj-seg{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:4px;padding:5px;border-radius:18px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(27,24,21,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 22px 44px -34px rgba(27,24,21,.85);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
          backdrop-filter:blur(10px) saturate(1.4);
}
/* Lo coloca el guion. Sin transición hasta que está puesto, para que no entre
   volando desde la esquina en la primera carga. */
.proj-seg__glide{
  position:absolute;left:0;top:0;z-index:0;
  width:0;height:0;border-radius:13px;
  background:var(--ink);
  box-shadow:0 14px 26px -14px rgba(27,24,21,.8);
}
.proj-seg.is-live .proj-seg__glide{
  transition:transform .52s var(--ease),width .52s var(--ease),height .52s var(--ease);
}

.proj-chip{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font);font-size:.875rem;font-weight:500;letter-spacing:-.012em;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  background:transparent;border:0;border-radius:13px;
  padding:.72rem 1.05rem;line-height:1.1;
  transition:color .34s var(--ease),background .34s var(--ease);
}
.proj-chip:not([aria-pressed="true"]):hover{background:rgba(27,24,21,.05)}
.proj-chip[aria-pressed="true"]{color:#fff}
.proj-chip:focus-visible{outline:2px solid #c34c29;outline-offset:3px}
.proj-chip b{font-weight:500;font-size:.6875rem;font-variant-numeric:tabular-nums;opacity:.45}
.proj-chip[aria-pressed="true"] b{opacity:.7}

/* El punto toma el color del servicio: el mismo de las etiquetas de la ficha */
.proj-chip__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:rgb(var(--dot))}
.c--web{--dot:var(--c-coral)}
.c--marca{--dot:var(--c-mostaza)}
.c--seo{--dot:var(--c-azul)}
.c--ads{--dot:var(--c-verde)}
.c--rrss{--dot:var(--c-gris)}
.c--soft{--dot:var(--c-gris)}

/* ---------- 3 · La rejilla ---------- */
.proj-page main section.proj-grid{padding:clamp(2.8rem,5.5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.proj-count{
  display:block;margin-bottom:clamp(1.5rem,3vw,2.3rem);
  font-size:.8125rem;color:var(--gray);
}
.proj-cards{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,4vw,3.6rem) clamp(1.4rem,2.4vw,2.2rem);
}
.proj-card{--c:var(--c-coral)}
.proj-card--azul{--c:var(--c-azul)}
.proj-card--verde{--c:var(--c-verde)}
.proj-card--mostaza{--c:var(--c-mostaza)}
.proj-card--gris{--c:var(--c-gris)}
.proj-card[hidden]{display:none}
/* Las fichas que ya tienen página de caso son enlaces: sin subrayado ni color
   de enlace, con foco visible y una pista al pasar por encima.
   [hidden] gana por especificidad, así que el filtro sigue ocultándolas. */
a.proj-card{display:block;text-decoration:none;color:inherit}
a.proj-card:focus-visible{outline:2px solid #c34c29;outline-offset:6px;border-radius:8px}
a.proj-card:hover .proj-card__name{text-decoration:underline;text-underline-offset:5px}
@keyframes projIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.proj-card.is-in{animation:projIn .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.proj-card__media{
  position:relative;overflow:hidden;
  border-radius:clamp(14px,1.8vw,20px);
  aspect-ratio:4/3;background:rgba(var(--c),.12);
}
.proj-card__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.proj-card:hover .proj-card__media img{transform:scale(1.035)}
.proj-page main .proj-card__name{
  margin:clamp(1.1rem,1.8vw,1.5rem) 0 0;font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.8rem);letter-spacing:-.045em;line-height:1.1;
}
.proj-card__desc{margin:.6rem 0 0;color:var(--gray);font-size:.9375rem;line-height:1.65;max-width:44ch}
.proj-card .pcase__tags{margin-top:1rem}

.proj-empty{
  padding:clamp(2.5rem,5vw,4rem) 0;text-align:center;
  color:var(--gray);font-size:1rem;
}
.proj-empty[hidden]{display:none}

/* ---------- 4 · Cierre ---------- */
.proj-page main section.proj-end{padding:0 0 clamp(3.5rem,7vw,6rem)}
.proj-end__in{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.2rem 2rem;
  border-top:1px solid var(--web-line);padding-top:clamp(1.8rem,3.5vw,2.6rem);
}
.proj-page main .proj-end h2{
  margin:0;font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-.045em;line-height:1.15;font-weight:500;
}
.proj-end__in>div>p{margin:.5rem 0 0;color:var(--gray);font-size:.9375rem;max-width:40ch}

/* ---------- Adaptación ---------- */
@media (max-width:900px){
  .proj-cover__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .proj-cover__p{max-width:52ch}
  .proj-cards{grid-template-columns:1fr;gap:2.4rem}
  .proj-card__desc{max-width:52ch}
}
/* Estrecho: la cápsula deja de romper en varias filas y pasa a tira con
   desplazamiento lateral. El bloque deslizante sigue dentro, así que acompaña. */
@media (max-width:760px){
  .proj-filter__in{display:block}
  .proj-seg{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;border-radius:16px;scrollbar-width:none}
  .proj-seg::-webkit-scrollbar{display:none}
}
@media (max-width:560px){
  .proj-page main section.proj-cover{padding-top:calc(78px + 2.5rem)}
  .proj-sheet{margin-top:-3.5rem}
  .proj-chip{font-size:.8125rem;padding:.66rem .9rem}
}
@media (prefers-reduced-motion:reduce){
  .proj-card:hover .proj-card__media img{transform:none}
  .proj-seg.is-live .proj-seg__glide{transition:none}
  .proj-card.is-in{animation:none}
}