/* proyectos-specific styles */

/* ─── Proyectos Destacados (bento) ─────────────────────────────── */
.proy-dest {
  padding: 5rem 0;
  background-color: var(--bg-primary);
}

@media (min-width: 992px) {
  .proy-dest { padding: 7rem 0; }
}

/* El bento se arma con spans, no con grid-template-areas: así admite
   cualquier número de tarjetas sin rediseñar la retícula cada vez que
   entra un proyecto nuevo. `dense` rellena los huecos que queden. */
.proy-dest__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 240px;
  grid-auto-flow: row dense;
  gap: 1.5rem;
}

/* Tablet: la grande ocupa el ancho completo; la ancha también */
@media (min-width: 768px) {
  .proy-dest__grid { grid-template-columns: repeat(2, 1fr); }

  .dest-card--lg,
  .dest-card--wide { grid-column: span 2; }
}

/* Desktop: la grande es un bloque 2×2 y la ancha ocupa dos columnas.
   Con 8 tarjetas (1 grande + 6 normales + 1 ancha) la retícula de 3
   columnas cierra en 4 filas exactas, sin huecos. */
@media (min-width: 992px) {
  .proy-dest__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
  }

  .dest-card--lg {
    grid-column: span 2;
    grid-row: span 2;
  }

  .dest-card--wide { grid-column: span 2; }
}

/* Tarjeta destacada: imagen a sangre + overlay + caption */
.dest-card {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
  background-image: var(--dest-img);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .5s ease;
  cursor: pointer;
}

.dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, .92) 0%,
    rgba(6, 6, 6, .55) 45%,
    rgba(6, 6, 6, .10) 100%
  );
  transition: background .3s ease;
}

/* Solo en dispositivos con puntero real: en táctil el :hover se queda
   "pegado" tras el primer toque y la tarjeta parece activa sin estarlo. */
@media (hover: hover) {
  .dest-card:hover .dest-card__overlay {
    background: linear-gradient(
      to top,
      rgba(6, 6, 6, .95) 0%,
      rgba(6, 6, 6, .65) 50%,
      rgba(6, 6, 6, .20) 100%
    );
  }
}

.dest-card__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

/* El body va sobre el overlay (z-index 2) y por defecto taparía el
   ::after del .stretched-link (z-index 1 de Bootstrap), dejando la
   tarjeta sin área clicable donde hay texto. Lo subimos por encima. */
.dest-card .stretched-link::after {
  z-index: 3;
}

.dest-card--lg .dest-card__body {
  padding: 2.5rem;
}

.dest-card__tag {
  font-family: var(--font-headings);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  display: block;
  margin-bottom: .55rem;
}

.dest-card__title {
  font-family: var(--font-headings);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
  margin: 0;
  transition: color .2s ease;
}

.dest-card--lg .dest-card__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

@media (hover: hover) {
  .dest-card:hover .dest-card__title {
    color: var(--accent);
  }
}

.dest-card__text {
  font-family: var(--font-body);
  font-size: .9rem;
  color: rgba(252, 252, 252, .72);
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
  display: none;
}

/* El texto descriptivo solo en la tarjeta grande y de tablet hacia
   arriba: en móvil la tarjeta mide 240px y el párrafo desborda el
   alto, recortando el tag y parte del título por la parte superior. */
@media (min-width: 768px) {
  .dest-card--lg .dest-card__text {
    display: block;
  }
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.proy-hero {
  position: relative;
  height: 100vh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.proy-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.proy-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, .95) 0%,
    rgba(6, 6, 6, .50) 45%,
    rgba(6, 6, 6, .18) 100%
  );
  z-index: 1;
}

.proy-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4rem) 7rem;
  max-width: 760px;
}

.proy-hero__title {
  font-family: var(--font-headings);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -6px;
  line-height: 1.0;
  margin: .6rem 0 1.1rem;
}

.proy-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  color: rgba(252, 252, 252, .72);
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}

/* ─── Sección principal ───────────────────────────────────────── */
.proy-section {
  padding: 5rem 0;
  background-color: var(--bg-primary);
}

@media (min-width: 992px) {
  .proy-section { padding: 7rem 0; }
}

/* Intro */
.proy-intro__text {
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  color: rgba(252, 252, 252, .65);
  line-height: 1.8;
  margin: 0 auto;
  max-width: 62ch;
}

/* ─── Cards de proyectos ─────────────────────────────────────── */
.proy-card {
  background-color: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease;
  cursor: pointer;
}

.proy-card:hover {
  border-color: rgba(255, 255, 255, .4);
}

/* Imagen */
.proy-card__img {
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

.proy-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

.proy-card:hover .proy-card__img img {
  transform: scale(1.06);
}

/* Cuerpo */
.proy-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.proy-card__tag {
  font-family: var(--font-headings);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  display: block;
  margin-bottom: .65rem;
}

.proy-card__title {
  font-family: var(--font-headings);
  font-size: .98rem;
  font-weight: 700;
  color: var(--text-base);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .75rem;
  line-height: 1.3;
  transition: color .2s ease;
}

.proy-card:hover .proy-card__title {
  color: var(--accent);
}

.proy-card__text {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

/* ─── Tarjetas con galería en hover (Todos los Proyectos) ──────── */
.gal-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .07);
  background-color: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}

/* <img> real (antes span con background) para poder dar alt + loading lazy */
.gal-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

.gal-card:hover .gal-card__img,
.gal-card:focus-visible .gal-card__img {
  transform: scale(1.06);
}

.gal-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 6, .85) 0%, rgba(6, 6, 6, .25) 55%, rgba(6, 6, 6, .05) 100%);
  transition: background .3s ease;
}

.gal-card:hover .gal-card__overlay,
.gal-card:focus-visible .gal-card__overlay {
  background: linear-gradient(to top, rgba(6, 6, 6, .9) 0%, rgba(6, 6, 6, .55) 60%, rgba(6, 6, 6, .3) 100%);
}

.gal-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: .7rem .8rem 1.65rem;   /* deja sitio a .gal-card__place */
  font-family: var(--font-headings);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--white);
  line-height: 1.2;
  text-align: left;
}

.gal-card__count {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 2;
  font-family: var(--font-headings);
  font-size: .71rem;   /* +15% respecto a .62rem; el icono escala solo */
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(252, 252, 252, .85);
}

/* Icono de lupa: aparece en hover */
.gal-card__zoom {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.gal-card:hover .gal-card__zoom,
.gal-card:focus-visible .gal-card__zoom {
  opacity: 1;
  transform: scale(1);
}

.gal-card__zoom i {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.gal-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Clientes ─────────────────────────────────────────────────── */
.proy-clientes {
  padding: 5rem 0;
  background-color: var(--bg-alt);
}

@media (min-width: 992px) {
  .proy-clientes { padding: 7rem 0; }
}

.clientes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 por fila en móvil */
  gap: 1.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A partir de tablet el grid se rellena solo con columnas de ~150px */
@media (min-width: 576px) {
  .clientes-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Entrada escalonada, uno a uno.
   El .reveal-group global solo escalona hasta el 8º hijo y a partir del 9º
   entran todos juntos; aquí son 30+, así que el retardo lo lleva la variable
   --i que PHP inyecta en cada <li>. La especificidad extra (:nth-child(n))
   es para ganarle a las reglas nth-child de main.min.css sin depender del
   orden de carga. El bloque global de prefers-reduced-motion sigue mandando:
   usa !important y desactiva la transición por completo. */
.clientes-grid.reveal-group > * {
  opacity: 0;
  transform: scale(.8);
  transition: opacity .5s ease,
              transform .5s cubic-bezier(.34, 1.28, .64, 1);
}

.clientes-grid.reveal-group.is-visible > *:nth-child(n) {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * .045s);
}

/* Excepción deliberada a la regla de "todo cuadrado": el cliente pidió
   tarjetas circulares para el muro de logos. Es el único radius del sitio. */
.cliente-card {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 150px;
  margin-inline: auto;
  border: 4px solid var(--gray);
  border-radius: 50%;
  background-color: var(--white);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.cliente-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

/* El .webp ya viene cuadrado y compuesto: cover encaja sin deformar */
.cliente-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .cliente-card,
  .cliente-card:hover { transform: none; }
}

/* Ubicación bajo el título de la tarjeta de galería */
.gal-card__place {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 .8rem .7rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(252, 252, 252, .66);
  line-height: 1.2;
  text-align: left;
}

.gal-card__place .bi {
  color: var(--accent);
}