/* El carrusel de servicios.

   La fuente de verdad es el propio contenedor que se desplaza: con `scroll-snap`
   el dedo, la rueda y el teclado ya funcionan, las tarjetas están siempre
   en el documento —así que el lector de pantalla las lee todas, en orden— y sin
   JavaScript sigue siendo usable. `scripts/carrusel.js` sólo agrega los puntos y
   la rotación. */

.carrusel {
  position: relative;
  margin-top: var(--e-4);
}

.carrusel__via {
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sin esto, al llegar al final del carrusel el gesto sigue de largo y el
     navegador se va para atrás en el historial. */
  overscroll-behavior-x: contain;
  /* El recorte horizontal también recorta en vertical: sin este aire, la
     sombra de las tarjetas queda cortada. */
  padding-block: var(--e-3);
  /* Lugar para que el contorno del foco no quede cortado por el recorte. */
  padding-inline: 2px;
  /* Sin barra de desplazamiento: se mueve solo, con los puntos o con el dedo,
     y la barra sólo ensuciaba la franja. */
  scrollbar-width: none;
}

.carrusel__via::-webkit-scrollbar {
  display: none;
}

/* Cada tarjeta es una lámina como las de los posteos de servicios: verde
   bosque, bordes muy redondeados, todo centrado y un dibujo arriba. Lleva la
   clase `panel`, que le cambia los colores desde base.css. */
.tarjeta {
  /* Con 70 % del ancho se asoma el borde de la tarjeta siguiente: es lo que le
     dice al dedo que hay más para el costado. */
  flex: 0 0 min(70%, 23rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Todas miden lo que la más larga. El contenido va al medio para que en las
     cortas el sobrante quede repartido y no en un hueco antes del enlace. */
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-4) var(--e-4);
  text-align: center;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.tarjeta__icono {
  width: 4rem;
  height: 4rem;
  color: var(--acento);
}

.tarjeta__titulo {
  margin: 0;
  font-size: 1.4rem;
}

.tarjeta__texto {
  margin: 0;
  color: var(--texto-suave);
}

.tarjeta__enlace {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---- puntos, que crea carrusel.js -------------------------------------- */

.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

/* Con `display: flex` el atributo `hidden` no alcanza para esconderlos. */
.carrusel__puntos[hidden] {
  display: none;
}

.carrusel__punto {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* El punto que se ve es chico, pero lo que se toca son 44 px. */
.carrusel__punto::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--texto-suave);
}

.carrusel__punto[aria-current="true"]::before {
  background: var(--acento);
  border-color: var(--acento);
}