@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   Portafolio — página 3 del PDF (1920 × 2279,9 pt).
   Necesita base.css cargado antes.

   La rejilla de proyectos va en CSS grid con las medidas del diseño, no con
   cada tarjeta colocada por coordenadas: el PDF sólo trae tres y el cliente
   tiene que mandar el resto. Añadir un proyecto es copiar un <li>.
   ═══════════════════════════════════════════════════════════════════════ */

.heroe     {height:67.85rem;background:var(--azul);overflow:hidden}
.proyectos {height:160.14rem;background:var(--blanco);overflow:hidden}

/* ═══ HÉROE ═══════════════════════════════════════ y del PDF 0 → 678,5 */

.heroe h1{font-weight:400;font-size:inherit}

.caja-titulo{
  left:64.56rem;top:35.11rem;
  width:73.63rem;height:14.8rem;
  border-radius:4.82rem;
  background:var(--violeta);
  transform:rotate(-4.13deg);
}
.hr-portafolio{
  left:75.4rem;top:calc(49.55rem - var(--asc-serif) * 12rem);
  font-size:12rem;color:var(--amarillo);
  transform:rotate(-5.41deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}

/* ═══ PROYECTOS ═════════════════════════════ y del PDF − 678,5 ═══════ */

/* ── Los siete filtros ───────────────────────────────────────────────── */
/* Píldoras de 68,5 de alto: el radio es la mitad, no el que devuelve la
   descomposición —un estadio no es un rectángulo redondeado y el ajuste
   daba valores distintos para cada uno. */

.filtros{position:static}
.f .caja{
  position:absolute;
  top:12.88rem;height:6.85rem;
  border-radius:3.425rem;
  background:var(--amarillo-caja);
}
.f .et{color:var(--violeta);font-size:3.687rem}
/* Las dos sombras del PDF —la del chip activo y la de la tercera tarjeta—
   son imágenes de negro puro con máscara, y el documento las dibuja al
   14,3 % de opacidad. Sin ese factor salen siete veces más oscuras: gris
   #b2b2b2 en vez del #f4f4f4 del diseño. */
.f .sombra{position:absolute;left:83.685rem;top:12.042rem;width:20.3rem;height:9.9rem;opacity:.143}

.f1 .caja{left:16.2rem;  width:17.14rem}
.f2 .caja{left:37.22rem; width:19.98rem}
.f3 .caja{left:59.76rem; width:22.14rem}
.f4 .caja{left:84.55rem; width:17.14rem;background:var(--azul)}
.f5 .caja{left:104.33rem;width:22.14rem}
.f6 .caja{left:127.98rem;width:26.13rem}
.f7 .caja{left:155.55rem;width:20.28rem}

.f1 .et{left:19.55rem; top:calc(17.66rem - var(--asc-sans) * 3.687rem)}
.f2 .et{left:38.92rem; top:calc(17.58rem - var(--asc-sans) * 3.687rem)}
.f3 .et{left:61.15rem; top:calc(17.66rem - var(--asc-sans) * 3.687rem)}
.f4 .et{left:87.82rem; top:calc(17.21rem - var(--asc-sans) * 3.687rem);color:var(--blanco)}
.f5 .et{left:107.78rem;top:calc(17.29rem - var(--asc-sans) * 3.687rem)}
.f6 .et{left:130.17rem;top:calc(17.66rem - var(--asc-sans) * 3.687rem)}
.f7 .et{left:157.74rem;top:calc(17.66rem - var(--asc-sans) * 3.687rem)}

/* ── La rejilla de proyectos ─────────────────────────────────────────── */
/* Medidas del diseño: tarjeta 462,5 × 462,5 y hueco 43,8. Tres por fila.
   La cuarta abre fila sola, sin tocar nada. */

.rejilla{
  position:absolute;
  left:23.58rem;top:34.99rem;
  width:147.51rem;
  display:grid;
  grid-template-columns:repeat(3, 46.25rem);
  gap:4.38rem;
}
.proyecto{position:relative;width:46.25rem;height:46.25rem;background:var(--blanco)}
.proyecto > a{display:block;width:100%;height:100%;position:relative}

/* Cada logotipo va en el sitio que le da el PDF dentro de su tarjeta, no
   centrado: el diseño no los centra. Las coordenadas son las del viewBox
   del SVG menos la esquina de la tarjeta. */
.proyecto .marca{position:absolute;max-width:none}

/* Tarjeta oscura: la letra de fondo y el texto al pie */
.p-oscuro{background:#333}
.p-oscuro .fondo{position:absolute;left:10.89rem;top:7.87rem;width:24.26rem;height:30.26rem}
.pie-tarjeta{
  position:absolute;
  left:3.69rem;top:calc(28.19rem - (var(--asc-sans) + .13) * 2.6rem);
  font-size:2.6rem;color:var(--blanco);
  line-height:calc(3.12 / 2.6);
  /* El PDF lo pone más fino que el texto corrido del resto del sitio: con el
     peso de texto salía con un 34 % más de tinta. */
  font-variation-settings:'wght' 60,'ital' 0;
}

/* La tercera tarjeta lleva su sombra como imagen aparte —por eso el PNG es
   mayor que la tarjeta— y el logotipo en vectorial. El blanco tiene que ir
   en el <a>, no en el <li>: si el fondo lo pinta el <li>, la sombra queda
   por delante y tapa la tarjeta entera de negro. */
.p-sombra{background:0}
.p-sombra > a{background:var(--blanco)}
.p-sombra .sombra{
  position:absolute;
  left:-.855rem;top:-.838rem;
  width:49.4rem;height:49.3rem;
  max-width:none;
  opacity:.143;
}
.p-sombra .marca{left:6.514rem;top:12.861rem;width:33.222rem;height:20.537rem}
.proyecto:nth-child(2) .marca{left:10.019rem;top:9.127rem;width:26.273rem;height:27.987rem}

/* ── Our clients ─────────────────────────────────────────────────────── */

.proyectos h2{font-weight:400;font-size:inherit}

.caja-our{
  left:71.06rem;top:97.1rem;
  width:18.93rem;height:10.71rem;
  border-radius:.84rem;
  background:var(--amarillo);
  transform:rotate(-1.85deg);
}
.cl-our{
  left:74.36rem;top:calc(104.75rem - var(--asc-sans) * 7.1rem);
  font-size:7.1rem;color:var(--violeta);
  transform:rotate(-2.19deg);
  transform-origin:left calc(var(--asc-sans) * 1em);
}
.cl-clients{
  left:92.44rem;top:calc(104.3rem - var(--asc-serif) * 12rem);
  font-size:12rem;color:var(--violeta);
  transform:rotate(-2.19deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}
.cl-tira{position:absolute;left:24.678rem;top:113.552rem;width:155.551rem;height:14.821rem}

/* ═══ PIE ═══════════════════════════════════ y del PDF − 678,5 ═══════ */

.logo-pie{left:9.99rem;top:142.97rem;width:14.73rem;height:11.77rem}
.mosaico {left:76.756rem;top:139.327rem;width:115.268rem;height:20.817rem}

/* ═══ COLUMNA FLOTANTE DE REDES ═══════════════════════════════════════ */

.redes{left:176.853rem;top:103.791rem;height:47.446rem}
.z-mail{top:.6rem}
.z-fb  {top:7.4rem}
.z-ig  {top:13.8rem}
.z-tt  {top:20.2rem}
.z-in  {top:26.6rem}
.z-wa  {top:38.5rem;height:9.5rem}