/* ============================================================
   diapositivas.css — fotos que se relevan con un desenfoque

   Un montón de fotos apiladas en la misma caja. Solo una está
   nítida; las demás esperan desenfocadas y un punto más grandes.
   Al cambiar, la que entra se enfoca mientras la que sale se
   desenfoca, y el zoom se va soltando más despacio que el fundido.
   Ese desfase es lo que hace que el cambio se lea como respirar
   y no como un pase de diapositivas.

   La proporción de la caja la decide quien la usa, con
   `--diapos-ratio`. Por defecto es el vertical 2:3 de las fotos
   de la clínica, que es el único encuadre en el que se ven a
   plena resolución: los originales son 1024x1536 y cualquier
   recorte apaisado tira la mitad de los píxeles.

   Estado inicial sin JavaScript: todas visibles y apiladas, así
   que se ve la última. Nunca una caja en blanco. `js/diapositivas.js`
   marca `data-diapos-listo` y a partir de ahí manda la clase.
   ============================================================ */

.diapos {
  margin: var(--esp-3) 0 0;
}

.diapos-marco {
  position: relative;
  aspect-ratio: var(--diapos-ratio, 2 / 3);
  overflow: hidden;
  border-radius: var(--radio-2xl);
  background: var(--hueco-fondo);
}

.diapos-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El desenfoque recorta por el borde y deja ver la caja: un pelo
     de escala de más lo tapa durante toda la transición */
  transform: scale(1.04);
}

/* ── A partir de aquí manda el JavaScript ──

   El estado y la transición van en dos atributos distintos y no es
   un capricho. Si el mismo atributo encendiera las dos cosas, al
   cargar la página las fotos partirían visibles —que es como las
   deja el CSS de arriba— y se apagarían con un fundido de un
   segundo: se vería un parpadeo de la última foto antes de que
   apareciera la primera. Así no: `data-diapos-listo` coloca el
   estado en seco y `data-diapos-anima`, que llega un fotograma
   después, es el que abre la transición para los relevos. */

.diapos[data-diapos-listo] .diapos-img {
  opacity: 0;
  filter: blur(18px);
}

.diapos[data-diapos-listo] .diapos-img.is-activa {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.diapos[data-diapos-anima] .diapos-img {
  transition:
    opacity var(--diapos-fundido, 1100ms) var(--ease-suave),
    filter  var(--diapos-fundido, 1100ms) var(--ease-suave),
    transform var(--diapos-zoom, 1800ms) var(--ease-suave);
}

.diapos-pie {
  margin: var(--esp-2) 0 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

/* Dentro de la tarjeta de valoración de la home: apaisada y sin margen
   propio, porque la tarjeta ya lleva su ritmo */
.diapos--tarjeta {
  --diapos-ratio: 16 / 9;
  margin: 0;
}

/* ── Dos columnas: foto vertical y texto al lado ──
   El vertical solo no cuaja en un ancho de escritorio; al lado del
   texto sí, y de paso la foto se queda en 400-500px, que es donde
   un original de 1024 de ancho llega a 2x sin verse blando. */

.diapos-par {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
}

/* Apilado, la foto ocupa todo el ancho y un 2:3 la vuelve una torre:
   a 768px llegaba a 1060px de alto junto a una tarjeta de 216. En
   cuanto las columnas se ponen una debajo de otra, la foto pasa a
   cuadrada, que es la altura a la que se parece a la tarjeta. */
@media (max-width: 719px) {
  /* Apilado, la foto ocupa todo el ancho y un 2:3 la vuelve una torre:
     a 768px llegaba a 1060px de alto junto a una tarjeta de 216. Pasa a
     cuadrada, que es la altura a la que se parece a la tarjeta.

     El tope de 420px es para el tramo alto de este rango: sin él, a
     700px de ancho la foto volvía a dispararse a 700 de alto mientras
     la tarjeta se quedaba en 216. Las dos comparten tope y van
     centradas, así que se leen como un bloque. */
  .diapos-par:has(> .ficha-experiencia) > .diapos,
  .diapos-par:has(> .ficha-experiencia) > .ficha-experiencia {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .diapos-par:has(> .ficha-experiencia) > .diapos { --diapos-ratio: 1 / 1; }

  /* Filas de la misma altura. Apiladas, la tarjeta solo ocupaba lo que
     pedía su texto (259px) contra los 420 de la foto; así se estira a
     la altura de la foto y el texto, que ya va centrado, se queda en
     medio. Es el equivalente vertical del `stretch` de dos columnas. */
  .diapos-par:has(> .ficha-experiencia) {
    grid-auto-rows: 1fr;
    /* La regla base pone `center`, que impide el estirado: sin esto la
       tarjeta se queda en la altura de su texto y `1fr` no sirve. */
    align-items: stretch;
  }
}

/* El par con tarjeta se pone en dos columnas antes, desde 720px:
   apilado, su foto quedaba desproporcionada frente a una frase de dos
   líneas. Los pares con texto corrido siguen esperando a 860px, porque
   a 760 la columna les deja 38 caracteres por línea y se lee mal. */
@media (min-width: 720px) {
  /* Columnas iguales y estiradas a la misma altura: al lado de la foto
     hay una frase suelta, no texto corrido, así que repartir 5/6 dejaba
     la foto visiblemente más estrecha que la tarjeta. */
  .diapos-par:has(> .ficha-experiencia) {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-5, 48px);
    align-items: stretch;
  }

  .diapos-par:has(> .ficha-experiencia) > .diapos { margin-top: 0; }
}

@media (min-width: 860px) {
  .diapos-par {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--esp-5, 48px);
  }

  .diapos-par > .diapos { margin-top: 0; }
}

/* ── Sin movimiento ──
   No se apaga la foto, se apaga el relevo: `js/diapositivas.js` no
   arranca el temporizador y se queda la primera, fija y nítida. */
@media (prefers-reduced-motion: reduce) {
  .diapos[data-diapos-anima] .diapos-img { transition: none; }
  .diapos-img { transform: none; }
}