/* Propuesta 22/9: las fotografías como sujeto, no como fondo.
   Solo afecta de "Servicios" hacia abajo; el hero queda como está.
   Todo el archivo es aditivo: se carga después de portfolio.css y proposal.css. */

/* --- Parrilla de 8 proyectos ---------------------------------------------
   Antes: cajas 4:3 que recortaban los costados de las fachadas panorámicas,
   sin movimiento al pasar el mouse y sin animación de entrada (la única
   sección de la página sin ella). */
.portfolio-image { position: relative; aspect-ratio: 3 / 2; }
.portfolio-project-lead .portfolio-image { aspect-ratio: 16 / 10; }
.portfolio-image img { filter: saturate(1.05) contrast(1.03); transition: transform 760ms var(--ease-out), filter 760ms var(--ease-out); }

/* Un filo de luz que se enciende sobre la foto, con el celeste de la marca. */
.portfolio-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 rgba(40, 198, 247, 0);
  transition: border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

/* Entrada al hacer scroll, sin depender de JavaScript.
   El resto de la página usa una clase que agrega un observador; si ese
   observador no dispara, el elemento queda invisible. Con las fotos de los
   proyectos eso es inaceptable, así que la entrada se hace con la línea de
   tiempo del scroll: donde el navegador no la soporta (Safari hoy), las
   tarjetas simplemente se ven completas desde el principio. */
@keyframes foto-entra {
  from { opacity: 0; transform: translateY(26px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .portfolio-grid .portfolio-project {
      animation: foto-entra linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portfolio-project:hover .portfolio-image img { transform: scale(1.045); filter: saturate(1.14) contrast(1.05) brightness(1.07); }
  .portfolio-project:hover .portfolio-image::after { border-color: rgba(40, 198, 247, .5); box-shadow: 0 0 34px 0 rgba(40, 198, 247, .12); }
}

/* --- Tarjetas de servicios ------------------------------------------------
   Las cuatro fotos de obra estaban en 16:9, la proporción más chata de la
   página. En 3:2 ganan altura sin cambiar la grilla. */
.maintenance-compact .maintenance-card figure { position: relative; overflow: hidden; }
.maintenance-compact .maintenance-card img { aspect-ratio: 3 / 2; filter: saturate(1.04) contrast(1.02); transition: transform 760ms var(--ease-out), filter 760ms var(--ease-out); }
.maintenance-compact .maintenance-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color 420ms var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .maintenance-compact .maintenance-card:hover img { transform: scale(1.04) translateY(0); filter: saturate(1.12) contrast(1.04) brightness(1.05); }
  .maintenance-compact .maintenance-card:hover figure::after { border-color: rgba(0, 77, 160, .38); }
}

/* --- Antes / propuesta / resultado ---------------------------------------
   Es el bloque que más convence y era el más chico. Se agranda y se le pone
   un filo, pero se mantiene "contain": una comparación no debe recortar. */
.project-comparison .comparison-grid { gap: 30px; }
.project-comparison .comparison-grid figure { position: relative; }
.project-comparison .comparison-grid a { display: block; position: relative; overflow: hidden; background: var(--ink-2); }
.project-comparison .comparison-grid img { aspect-ratio: 3 / 2; transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
.project-comparison .comparison-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .10);
  transition: border-color 420ms var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-comparison .comparison-grid a:hover img { transform: scale(1.03); filter: brightness(1.06); }
  .project-comparison .comparison-grid a:hover::after { border-color: rgba(40, 198, 247, .5); }
}

/* --- Accesibilidad --------------------------------------------------------
   Sin movimiento si el sistema lo pide: el contenido igual se ve completo. */
@media (prefers-reduced-motion: reduce) {
  .portfolio-image img,
  .maintenance-compact .maintenance-card img,
  .project-comparison .comparison-grid img { transition: none; transform: none; }
}

@media (max-width: 700px) {
  .portfolio-project .portfolio-image,
  .portfolio-project-lead .portfolio-image { aspect-ratio: 3 / 2; }
}