/* ============================================================
   carrusel.css — carril con scroll-snap, botones y contador

   Componente compartido. Lo usan dos páginas con dos aspectos
   muy distintos:

   · testimonios.html  capturas de WhatsApp dentro de un marco,
                       contenidas y ampliables con lupa
   · tecnologia.html   fotos del equipo a sangre, sin marco,
                       con pie de foto  (.carrusel--equipos)

   El carril funciona sin JavaScript: es un scroller con
   scroll-snap, así que se arrastra con el dedo o con la barra.
   js/carrusel.js solo añade los botones, el contador y la lupa.
   ============================================================ */

   el contador y la lupa.
   ══════════════════════════════════════════════════════════ */

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

.carrusel-carril {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra nativa sobra: se navega con los botones o arrastrando */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carrusel-carril::-webkit-scrollbar { display: none; }

.carrusel-lamina {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2xl);
  background: var(--color-superficie-alta);
}

.carrusel-lamina img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  border-radius: var(--radio-md);
  /* Las capturas oscuras necesitan despegarse de la superficie clara */
  box-shadow: 0 6px 18px rgba(45, 67, 54, 0.10);
}

/* Con JS la captura se puede ampliar: el cursor lo anuncia */
.carrusel-lamina--ampliable img { cursor: zoom-in; }

/* ── Controles ── */

.carrusel-mando {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.carrusel-boton {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-texto);
  border-radius: var(--radio-circulo);
  background: transparent;
  color: var(--color-texto);
  cursor: pointer;
  transition: background var(--t-media) ease, color var(--t-media) ease, opacity var(--t-media) ease;
}

.carrusel-boton:hover:not(:disabled) {
  background: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
}

.carrusel-boton:disabled {
  opacity: 0.3;
  cursor: default;
}

.carrusel-boton svg { display: block; }

.carrusel-progreso {
  flex: 1;
  height: 2px;
  background: var(--color-borde-suave);
  border-radius: var(--radio-pill);
  overflow: hidden;
}

.carrusel-progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-acento);
  transition: width var(--t-media) var(--ease-suave);
}

.carrusel-cuenta {
  flex: none;
  font-size: var(--txt-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* ── Ampliación a pantalla completa ── */

/* La captura se muestra a su tamaño real, no encogida a la ventana:
   en un teléfono ese es el único modo de que el texto se lea. Si no
   cabe, el visor se desplaza. `safe center` centra cuando cabe y deja
   de centrar cuando desborda, que es lo que permite llegar al borde
   izquierdo de una imagen más ancha que la pantalla. */
.carrusel-lupa {
  position: fixed;
  inset: 0;
  /* Por encima de la barra (90) y del botón flotante de WhatsApp (95),
     por debajo del salto al contenido (200) */
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: safe center;
  align-items: safe center;
  overflow: auto;
  padding: var(--esp-3);
  border: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 67, 54, 0.92);
  cursor: zoom-out;
}

.carrusel-lupa[hidden] { display: none; }

.carrusel-lupa img {
  flex: none;
  width: auto;
  height: auto;
  border-radius: var(--radio-md);
}

.carrusel-lupa-cerrar {
  /* Fijo, no absoluto: dentro de un visor que se desplaza, el
     absoluto se iría con el contenido */
  position: fixed;
  top: var(--esp-2);
  right: var(--esp-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--velo-borde);
  border-radius: var(--radio-circulo);
  background: var(--velo-fondo);
  color: var(--color-texto-inverso);
  cursor: pointer;
}

.carrusel-lupa :focus-visible { outline-color: var(--color-vegetal); }

/* En el teléfono el ancho es todo: cada píxel que se le quita al
   marco se lo quita al texto de la captura. El carrusel sale del
   padding del contenedor y la lámina se queda con un marco mínimo. */
@media (max-width: 699px) {
  .mensajes-carrusel {
    margin-inline: calc(var(--padding-lateral) * -1);
  }

  .carrusel-lamina {
    padding: var(--esp-1);
    border-radius: var(--radio-lg);
  }

  .carrusel-mando {
    margin-inline: var(--padding-lateral);
  }
}

@media (min-width: 900px) {
  .carrusel-lamina { padding: var(--esp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel-carril { scroll-behavior: auto; }
  .carrusel-progreso span { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   VARIANTE: FOTOS DE EQUIPO
   Aquí la imagen no es texto que haya que leer, es una foto:
   no necesita marco ni lupa, necesita tamaño. La lámina pierde
   el recuadro y la foto ocupa todo el ancho del carril, que es
   el del contenedor. El límite lo pone la altura de la ventana,
   para que la lámina no se coma la pantalla en un portátil.
   ══════════════════════════════════════════════════════════ */

.carrusel--equipos .carrusel-lamina {
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  gap: var(--esp-3);
  align-content: center;
}

.carrusel--equipos .carrusel-lamina img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radio-2xl);
  box-shadow: none;
}

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

.carrusel-pie b {
  display: block;
  margin-bottom: var(--esp-1);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: 400;
  color: var(--color-texto);
}

/* Las fotos de la clínica son verticales de 1024x1536. Puestas a lo
   ancho de la columna habría que recortarlas a apaisado y estirarlas
   por encima de su tamaño real, que es justo lo que las veía blandas.
   Al lado del texto se quedan en unos 400 px y llegan a 2x sobradas. */
@media (min-width: 860px) {
  .carrusel--equipos .carrusel-lamina {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--esp-5, 48px);
    align-items: center;
  }
}