/* ============================================================
   CRÉCIMA — Proyectos
   Medido sobre los frames "Proyectos — Desktop 1440",
   "Proyectos- Tablet 768" y "Proyectos - Movil. 390".
   Header, botones y footer viven en main.css.
   ============================================================ */

:root {
  /* Márgenes de 60 a cada lado: 1440 − 120 = 1320 de grilla, que
     con el hueco de 24 deja tarjetas de 648.
     Antes eran 91 y 1258 (lo del Figma). Se abrió siguiendo la
     referencia de orchid, que trabaja con márgenes de 39 y
     tarjetas de 669; 60 es el radio del panel, así que las
     tarjetas no se meten nunca dentro de la curva de la esquina. */
  --container-pj: 1320px;
  --pad-pj: 60px;

  /* Tarjeta */
  --pj-card-radio: var(--radius-img);
  /* La pestaña de la carpeta: un tercio del ancho, como la de las
     tarjetas de equipo en Nosotros. Va en porcentaje para que
     acompañe a la tarjeta en cada ruptura. */
  --pj-tab-ancho: 33%;
  --pj-tab-alto: 11px;
  /* Cuadrada. Es de donde sale la sensación de amplitud de la
     referencia: el bloque de cada proyecto es mucho más alto y
     el nombre queda con aire encima. */
  --pj-card-prop: 1 / 1;
  --pj-card-pad-x: 69px;
  --pj-card-pad-der: 47px;
  --pj-card-pad-y: 56px;
  --pj-flecha: 60px;
  --pj-name: 28px;

  /* Filtros */
  --pj-filtro-alto: 85px;
  --pj-filtro-pad: 60px;
  --pj-filtro-fs: 24px;
  --pj-punto: 17.5px;
  --pj-filtro-sep: 77px;
}

body.pagina-proyectos { background: var(--bg-hero); }

.container-pj {
  width: 100%;
  max-width: calc(var(--container-pj) + 2 * var(--pad-pj));
  margin-inline: auto;
  padding-inline: var(--pad-pj);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------
   Franja oscura con tres anillos concéntricos. El centro de los
   anillos cae por debajo del corte, así que de ellos sólo se ven
   los arcos de arriba.

   Los tres diámetros guardan la misma proporción en las tres
   rupturas —100 %, 74,7 % y 49,8 %—, así que alcanza con una
   variable para el mayor. La otra variable es dónde queda el
   centro respecto del borde de abajo del hero, que sí cambia
   bastante: en escritorio muy abajo, en móvil apenas arriba.
   ------------------------------------------------------------ */
.pj-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-hero);
  padding: 216px var(--gutter) 110px;
  text-align: center;
}

/* Los aros y las chispas son el componente compartido de
   main.css. Acá sólo se le dicen las dos medidas: el diámetro del
   aro grande y dónde cae el centro, que en este hero queda muy
   por debajo del corte. */
.pj-aros {
  --aro: 1214px;
  --aro-y: calc(100% + 328px);
}

.pj-hero__txt {
  position: relative;
  z-index: 1;
  max-width: var(--container-pj);
  margin-inline: auto;
}
.pj-hero__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-invert);
}
.pj-hero__lead {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-invert-soft);
}

/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */
.pj-panel {
  border-radius: 60px 60px 0 0;
  padding-block: 62px clamp(90px, 11vw, 150px);
  background: var(--bg-light);
}

/* ------------------------------------------------------------
   FILTROS
   ------------------------------------------------------------
   Los tres son botones con la misma forma; lo único que cambia
   el activo es el borde. El punto de color sale de --punto, que
   cada botón define en su etiqueta: agregar una categoría es
   agregar un botón, no una regla más acá.
   ------------------------------------------------------------ */
/* La fila va centrada en el contenedor, no alineada al borde de
   la grilla: en el frame de 1440 arranca 21px más adentro que
   las tarjetas, que es exactamente lo que da centrarla. */
.pj-filtros {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pj-filtro-sep);
}
.pj-filtro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--pj-filtro-alto);
  padding-inline: var(--pj-filtro-pad);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--pj-filtro-fs);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
/* El seleccionado se distingue por el peso de la tipografía y
   nada más: sin contorno, sin fondo. */
.pj-filtro.is-activo { font-weight: 600; }
.pj-filtro:hover { color: var(--brand-deep); }

/* Pasar de regular a semibold ensancha el texto, y como la fila
   va centrada los tres se correrían de lugar en cada clic. Esta
   copia del rótulo, en semibold y escondida, ocupa el lugar del
   más ancho de los dos estados: el ancho ya no depende de cuál
   esté seleccionado y nada se mueve.
   Va con `visibility: hidden` y no con `opacity: 0` justamente
   porque así queda fuera del árbol de accesibilidad: el lector
   de pantalla no lee el rótulo dos veces. */
.pj-filtro__txt { display: inline-grid; }
.pj-filtro__txt > span { grid-area: 1 / 1; }
.pj-filtro__txt::after {
  content: attr(data-texto);
  grid-area: 1 / 1;
  font-weight: 600;
  visibility: hidden;
}

/* El foco del teclado sí se marca: es lo único que le dice a
   quien no usa mouse dónde está parado. Sólo aparece con
   :focus-visible, así que con el mouse no se ve. */
.pj-filtro:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: 4px;
}

.pj-filtro__punto {
  flex: 0 0 auto;
  width: var(--pj-punto);
  height: var(--pj-punto);
  border-radius: 50%;
  background: var(--punto, transparent);
}
/* El de "Todos los Trabajos" es un aro, no un punto lleno. */
.pj-filtro__punto--aro {
  border: 1.5px solid #3a3a3d;
  background: none;
}

/* Con los filtros en pausa no hay de qué separarse: la grilla
   arranca sola y el panel se acomoda. Cuando vuelvan, esto deja
   de aplicar y todo regresa a su lugar sin tocar nada. */
.pj-panel:not(:has(.pj-filtros:not([hidden]))) { padding-top: 90px; }
.pj-panel:not(:has(.pj-filtros:not([hidden]))) .pj-grid { margin-top: 0; }

.pj-vacio {
  margin-top: 46px;
  font-size: var(--fs-lead);
  color: var(--text-soft);
}

/* ------------------------------------------------------------
   GRILLA
   ------------------------------------------------------------ */
.pj-grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Fila y columna con medidas muy distintas —80 contra 24— y no
     el mismo hueco para los dos lados. Es el detalle que más
     hace por la amplitud en la referencia: las dos tarjetas de
     una fila se leen como un par, y las filas respiran entre
     sí. */
  gap: 80px 24px;
}
/* Las que el filtro deja afuera se ocultan de verdad —no sólo se
   transparentan— para que no queden huecos en la grilla ni
   destinos alcanzables con el tabulador. De eso se encarga la
   regla de `[hidden]` que está en main.css. */

/* ------------------------------------------------------------
   TARJETA
   ------------------------------------------------------------
   La imagen ocupa toda la tarjeta y encima va un degradado que
   arranca transparente al 35 % del alto: es lo que hace legible
   el texto sin oscurecer la foto entera.
   ------------------------------------------------------------ */
.pj-card {
  position: relative;
  display: block;
  aspect-ratio: var(--pj-card-prop);
}

/* La forma de carpeta: una pestaña arriba a la izquierda y el
   cuerpo debajo, con la esquina superior izquierda recta para
   que las dos piezas se lean como una sola. Es la misma forma de
   las tarjetas de equipo de Nosotros.

   Van dos marcos y no uno recortado, porque un solo recorte con
   `clip-path` obliga a renunciar a los radios. Cada marco recorta
   lo suyo y adentro va la misma foto, encuadrada igual en los
   dos: por eso las dos imágenes llevan el mismo `aspect-ratio`
   que la tarjeta y se apoyan en su borde de arriba. La de la
   pestaña es decorativa —la que tiene el texto alternativo es la
   del cuerpo— y el navegador la pide una sola vez. */
.pj-card__pestana,
.pj-card__cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  overflow: hidden;
}
.pj-card__pestana {
  top: 0;
  height: var(--pj-tab-alto);
  clip-path: inset(0 calc(100% - var(--pj-tab-ancho)) 0 0 round 6px 6px 0 0);
}
.pj-card__cuerpo {
  top: var(--pj-tab-alto);
  bottom: 0;
  border-radius: 0 var(--pj-card-radio) var(--pj-card-radio) var(--pj-card-radio);
}

.pj-card__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-out);
}

/* Un único velo cambia suavemente de oscuro a violeta. Usar
   currentColor dentro del degradado permite animar el color sin
   superponer dos capas y evita la franja oscura del cruce.
   ------------------------------------------------------------ */
.pj-card__cuerpo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  color: rgba(31, 30, 34, 0.92);
  background: linear-gradient(180deg, transparent 30%, currentColor 100%);
  transition: color var(--dur-base) var(--ease-out);
}

.pj-card__pie {
  position: absolute;
  z-index: 5;
  left: var(--pj-card-pad-x);
  right: var(--pj-card-pad-der);
  bottom: var(--pj-card-pad-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.pj-card__name {
  font-size: var(--pj-name);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text-invert);
}
.pj-card__meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-invert);
}
/* Los corchetes del diseño, sin imágenes: son parte del texto. */
.pj-tag::before { content: "[ "; }
.pj-tag::after  { content: " ]"; }
.pj-sep { font-style: normal; font-weight: 700; }

.pj-card__flecha {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--pj-flecha);
  height: var(--pj-flecha);
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}
/* La flecha no se mueve de lugar: gira 45° sobre sí misma y
   queda apuntando arriba a la derecha, que es el gesto de
   "abrir". El círculo mantiene su degradado, no cambia. */
.pj-card__flecha svg {
  width: 45%;
  height: 45%;
  transition: rotate var(--dur-base) var(--ease-out);
}

/* ------------------------------------------------------------
   HOVER DE LA TARJETA
   ------------------------------------------------------------
   Sólo donde hay puntero de verdad: en una pantalla táctil el
   hover se queda pegado después de tocar y la tarjeta se
   quedaría violeta hasta que toques otra cosa. Va con
   `hover: hover` a secas y sin `pointer: fine`, porque hay
   equipos con trackpad que se declaran de puntero grueso y
   quedaban afuera.

   Se dispara también con :focus-visible, para que quien navega
   con el teclado vea lo mismo que quien usa el mouse.
   ------------------------------------------------------------ */
@media (hover: hover) {
  .pj-card__name,
  .pj-card__meta { transition: translate var(--dur-base) var(--ease-out); }

  .pj-card:is(:hover, :focus-visible) .pj-card__cuerpo::after { color: #55227d; }
  .pj-card:is(:hover, :focus-visible) .pj-card__img { scale: 1.04; }

  /* El nombre sube primero y la línea de datos lo sigue un
     instante después: es el mismo escalonado de los bloques que
     entran con el scroll, en chiquito. */
  .pj-card:is(:hover, :focus-visible) .pj-card__name { translate: 0 -4px; }
  .pj-card:is(:hover, :focus-visible) .pj-card__meta {
    translate: 0 -4px;
    transition-delay: 0.06s;
  }

  .pj-card:is(:hover, :focus-visible) .pj-card__flecha svg { rotate: -45deg; }

  /* Al salir todo vuelve un poco más rápido de lo que entró: la
     tarjeta se siente atenta y no pegajosa. */
  .pj-card::before,
  .pj-card::after,
  .pj-card__img,
  .pj-card__name,
  .pj-card__meta,
  .pj-card__flecha svg { transition-duration: var(--dur-fast); }
  .pj-card__cuerpo::after { transition-duration: var(--dur-fast); }
  .pj-card:is(:hover, :focus-visible) .pj-card__cuerpo::after,
  .pj-card:is(:hover, :focus-visible) .pj-card__img,
  .pj-card:is(:hover, :focus-visible) .pj-card__name,
  .pj-card:is(:hover, :focus-visible) .pj-card__meta,
  .pj-card:is(:hover, :focus-visible) .pj-card__flecha svg {
    transition-duration: var(--dur-base);
  }
}

.pj-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   ENTRAR AL PROYECTO
   ------------------------------------------------------------
   El gesto lo hace la cortina —está en main.css—. Acá queda
   sólo lo que hace la tarjeta elegida: se hunde apenas, como un
   botón que se aprieta. Alcanza para confirmar cuál se eligió,
   y es el último cuadro que se ve antes de que la cortina tape.

   Conserva su estado de hover mientras tanto: el violeta, el
   pie y la flecha se quedan donde estaban. Antes se desvanecían
   mientras la foto crecía, y era eso —la tarjeta vaciándose
   mientras se infla— lo que se leía como roto.
   ------------------------------------------------------------ */
.pj-card.va-entrando {
  scale: 0.985;
  transition: scale var(--dur-fast) var(--ease-out);
}

/* ------------------------------------------------------------
   TABLET — 768
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --container-pj: 664px;
    --pad-pj: 52px;

    --pj-card-prop: 1 / 1;
    --pj-card-pad-x: 25px;
    --pj-card-pad-der: 24px;
    --pj-card-pad-y: 29px;
    --pj-flecha: 42px;
    --pj-name: 20px;
    --pj-tab-alto: 9px;

    --pj-filtro-alto: 62px;
    --pj-filtro-pad: 20px;
    --pj-filtro-fs: 18px;
    --pj-filtro-sep: 10px;
  }

  .pj-aros { --aro: 664px; --aro-y: calc(100% + 14px); }
  .pj-hero {
    padding: 185px 80px 82px;
    text-align: left;
  }
  /* En los frames de tablet y móvil no hay chispas. */
  .pj-aros .chispa { display: none; }

  .pj-hero__title { font-size: 36px; line-height: 1.17; }
  .pj-hero__lead { line-height: 1.5; }

  .pj-panel { padding-top: 52px; }

  /* Abajo de escritorio la fila de filtros no siempre entra.
     Sale hasta el borde de la pantalla y se puede arrastrar.
     `safe center` la deja centrada mientras entra y pasa sola a
     alinearla al principio cuando no: sin ese `safe`, lo que
     sobra por la izquierda queda fuera de alcance. */
  .pj-filtros {
    justify-content: safe center;
    margin-inline: calc(-1 * var(--pad-pj));
    padding-inline: var(--pad-pj);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .pj-filtros::-webkit-scrollbar { display: none; }

  .pj-grid,
  .pj-vacio { margin-top: 33px; }
  .pj-grid { gap: 56px 22px; }
  .pj-panel:not(:has(.pj-filtros:not([hidden]))) { padding-top: 70px; }

  /* En tablet y en móvil la tarjeta muestra sólo el nombre: la
     línea de "Proyecto [ … ] / [ … ]" no está en esos frames. */
  .pj-card__meta { display: none; }
}

/* ------------------------------------------------------------
   MÓVIL — 390
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --container-pj: 358px;
    --pad-pj: 16px;

    --pj-card-prop: 1 / 1;
    --pj-card-pad-x: 29px;
    --pj-card-pad-der: 24px;
    --pj-card-pad-y: 47px;
    --pj-name: 24px;
    --pj-tab-alto: 8px;

    --pj-filtro-alto: 47px;
    --pj-filtro-pad: 26px;
    --pj-filtro-fs: 14px;
    --pj-punto: 12px;
    --pj-filtro-sep: 2px;
  }

  /* Los márgenes van iguales a los dos lados. En el frame están
     en 58 y 28, que deja el bloque corrido a la derecha; 40 es el
     promedio, así que el ancho de lectura queda casi igual al
     del diseño (310 contra 304) y los cortes de línea no
     cambian, pero el texto sí queda centrado. */
  .pj-aros { --aro: 582px; --aro-y: calc(100% - 31px); }
  .pj-hero {
    padding: 146px 40px 76px;
  }
  .pj-hero__title { font-size: 25px; line-height: 1.16; }
  .pj-hero__lead { line-height: 1.3; margin-top: 25px; }

  .pj-panel { padding-top: 57px; }

  /* En 390 los tres no entran ni cerca: el `safe center` de
     arriba ya los deja pegados al principio y la fila se
     arrastra. */

  .pj-grid {
    margin-top: 34px;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .pj-panel:not(:has(.pj-filtros:not([hidden]))) { padding-top: 56px; }
  .pj-vacio { margin-top: 34px; }
}

/* ------------------------------------------------------------
   Sin animación
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* El color del hover se queda —es información, dice cuál
     tarjeta está señalada—; lo que se va es el movimiento. */
  .pj-card__img,
  .pj-card__name,
  .pj-card__meta,
  .pj-card__flecha svg { transition: none; }
  .pj-card:is(:hover, :focus-visible) .pj-card__flecha svg { rotate: none; }
  .pj-card:is(:hover, :focus-visible) .pj-card__img { scale: 1; }
  .pj-card:is(:hover, :focus-visible) .pj-card__name,
  .pj-card:is(:hover, :focus-visible) .pj-card__meta { translate: none; }
}