/* =========================================================================
   Galería de proyectos (Potfolio_Galeria, nodo 33:37361).
   Requiere base.css y service.css: de ahí salen la cabecera, el footer,
   la tarjeta .proy, el botón relleno y los títulos de sección.
   ========================================================================= */

/* La galería no tiene banda oscura arriba, así que la cabecera va en negro
   (es la variante del menú que usa el diseño en esta pantalla). */
.page-gal .nav-link,
.page-gal .btn-outline{color:#000}
.page-gal .brand img{filter:brightness(0)}
.page-gal .btn-outline{border-color:#000}
.page-gal .btn-outline:hover{border-color:var(--teal)}
.page-gal .nav-toggle span{background:#000}
.page-gal .site-header.is-stuck{background:rgba(255,255,255,.94)}
@media (max-width:1100px){
  /* con el menú desplegado el panel sí es oscuro */
  .page-gal .nav.is-open .nav-link,
  .page-gal .nav.is-open .btn-outline{color:#fff}
  .page-gal .nav.is-open .btn-outline{border-color:#fff}
}

.gal{padding:clamp(88px,8.3vw,120px) var(--gutter) clamp(56px,6.1vw,88px)}
.gal__head{display:flex;flex-direction:column;gap:clamp(28px,3.3vw,48px)}

/* ------------------------------- filtros -------------------------------- */
.gal__filtros{display:flex;flex-wrap:wrap;gap:16px}
.gal__filtros button{
  border:1px solid #dedede;border-radius:1000px;padding:8px 16px;
  font-family:var(--display);font-weight:500;font-size:clamp(14px,1.11vw,16px);
  line-height:1.2;color:#000;background:#fff;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.gal__filtros button:hover{border-color:#b9b9b9}
.gal__filtros button[aria-pressed="true"]{
  background:var(--svc-purple);border-color:var(--svc-purple);color:#fff;
}

/* -------------------------------- rejilla ------------------------------- */
/* El diseño coloca las tarjetas en una rejilla de 8 columnas y 10 filas de
   201 px dentro de un lienzo de 1280, con 10 px de hueco. La fila se hace
   fluida (15,7 % del ancho del lienzo) para que todo escale junto. */
.gal__grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-auto-rows:clamp(86px,13.96vw,201px);
}
.gal__grid .proy{aspect-ratio:auto;height:100%}

/* Colocacion de Potfolio_Galeria 33:36881: 8 columnas x 8 filas, hueco 10. */
.gal__grid .proy[data-area="coi"]      {grid-area:1 / 1 / span 3 / span 5}
.gal__grid .proy[data-area="ocaso-ux"] {grid-area:1 / 6 / span 3 / span 3}
.gal__grid .proy[data-area="unicaja"]  {grid-area:4 / 1 / span 2 / span 3}
.gal__grid .proy[data-area="danone"]   {grid-area:4 / 4 / span 3 / span 3}
.gal__grid .proy[data-area="ges"]      {grid-area:4 / 7 / span 3 / span 2}
.gal__grid .proy[data-area="ocaso-red"]{grid-area:6 / 1 / span 3 / span 3}
.gal__grid .proy[data-area="santander"]{grid-area:7 / 4 / span 2 / span 5}

/* Al filtrar se pierde la composición exacta del diseño, así que las
   tarjetas conservan su tamaño y se recolocan solas. */
.gal__grid.is-filtered .proy{grid-area:auto}
.gal__grid.is-filtered{grid-auto-flow:dense}
.gal__grid.is-filtered .proy[data-span="5x3"]{grid-column:span 5;grid-row:span 3}
.gal__grid.is-filtered .proy[data-span="3x3"]{grid-column:span 3;grid-row:span 3}
.gal__grid.is-filtered .proy[data-span="3x2"]{grid-column:span 3;grid-row:span 2}
.gal__grid.is-filtered .proy[data-span="2x3"]{grid-column:span 2;grid-row:span 3}
.gal__grid.is-filtered .proy[data-span="5x2"]{grid-column:span 5;grid-row:span 2}

.gal__grid .proy[hidden]{display:none}

.gal__vacio{
  grid-column:1 / -1;padding:48px 0;text-align:center;color:#555;
  font-size:clamp(16px,1.39vw,20px);
}

/* ---------------------- fondos propios de dos tarjetas ------------------- */
/* CAIXA no lleva foto: es el verde claro del diseño con un degradado verde
   oscuro en la mitad inferior. */
.proy--caixa{background:#f6ffe6}
.proy--caixa::after{
  background:linear-gradient(180deg,rgba(0,58,12,0) 50%,rgba(0,58,12,1) 100%);
}

/* DANONE: vídeo de fondo teñido con un sólido #005EB8 en modo Color, como en
   el diseño, y encima la tira de pantallas. El degradado queda de reserva
   por si el vídeo no carga. */
.proy--danone{
  background:linear-gradient(180deg,#00172d 0%,#001b36 14%,#003569 45%,#003b75 72%,#002e5c 100%);
}
.proy--danone .media-video,
.proy--danone .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.proy__tinte{
  position:absolute;inset:0;z-index:1;
  background:#005eb8;mix-blend-mode:color;pointer-events:none;
}
.proy--danone::after{
  background:linear-gradient(180deg,rgba(0,23,45,0) 40%,rgba(0,23,45,.82) 100%);
}
.proy__ui{
  position:absolute;left:0;top:13.8%;width:100%;height:auto;z-index:1;
}

/* EL CORTE INGLÉS lleva dos rótulos sobre la foto. */
.proy__codigo{
  position:absolute;z-index:1;color:var(--teal);
  font-family:var(--display-x);font-weight:700;line-height:1.22;
  white-space:pre-line;pointer-events:none;
}
/* Las dos van donde las pone el diseño: la grande asoma por el borde. */
.proy__codigo--1{left:56.3%;top:9.5%;font-size:clamp(16px,2.78vw,40px)}
.proy__codigo--2{left:99.6%;top:5.8%;font-size:clamp(22px,3.89vw,56px)}

/* ------------------------------ responsive ------------------------------ */
@media (max-width:1000px){
  .gal__grid,
  .gal__grid.is-filtered{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;grid-auto-flow:row;
  }
  /* hay que igualar la especificidad de [data-area] / [data-span] para
     poder soltar la colocación del diseño */
  .gal__grid .proy[data-area],
  .gal__grid .proy[data-span],
  .gal__grid.is-filtered .proy[data-span]{
    grid-area:auto;grid-column:auto;grid-row:auto;
    height:auto;aspect-ratio:4/3;
  }
  .proy__codigo--1{font-size:18px}
  .proy__codigo--2{font-size:26px}
}
@media (max-width:640px){
  .gal__grid,
  .gal__grid.is-filtered{grid-template-columns:1fr}
  .gal__grid .proy[data-area],
  .gal__grid .proy[data-span],
  .gal__grid.is-filtered .proy[data-span]{aspect-ratio:5/4}
}