.ejemplos {
  overflow: hidden;
  padding: var(--v) 0 calc(var(--alto-muesca) + 3rem) var(--columna);
}

.ejemplos__entrada {
  max-width: 32rem;
  margin-bottom: var(--v-tit);
  padding-right: var(--lado);
}

.ejemplo {
  position: relative;
  flex-direction: column;
  user-select: none;
}

.ejemplo img {
  -webkit-user-drag: none;
}

.ejemplo__imagen {
  aspect-ratio: 1;
  border-radius: 0 var(--radio-tarjeta) var(--radio-tarjeta);
  --pestana-color: var(--color-superficie-opaca);
}

.ejemplo__imagen img {
  position: absolute;
  top: -1%;
  left: -1%;
  width: 102%;
  max-width: none;
  height: 102%;
  object-fit: cover;
  filter: blur(0);
  transition: filter var(--duracion-muelle-hover) var(--muelle-hover);
}

.ejemplo__flecha {
  display: flex;
  width: 0;
  margin-left: -.5rem;
  overflow: hidden;
  transition: width var(--duracion-muelle-hover) var(--muelle-hover), margin var(--duracion-muelle-hover) var(--muelle-hover);
  --icono-tamano: .8125rem;
}

.ejemplo__texto {
  margin-top: 1.5rem;
  font-size: var(--texto-titulo-5);
  line-height: 1.3;
}

.ejemplo__boton {
  text-align: left;
  text-wrap: balance;
}

.ejemplo__boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--radio-tarjeta);
}

.ejemplo__boton:focus-visible {
  outline: none;
}

.ejemplo__boton:focus-visible::after {
  outline: 1px solid var(--color-texto);
  outline-offset: .1875rem;
}

.ejemplo__concepto {
  margin-top: .5rem;
  color: var(--color-texto-secundario);
  font-size: var(--texto-interfaz);
  line-height: 1.05rem;
}

.ejemplo:has(.ejemplo__boton:focus-visible) img {
  filter: blur(.4375rem);
}

.ejemplo:has(.ejemplo__boton:focus-visible) .ejemplo__flecha {
  width: .8125rem;
  margin-left: 0;
}

@media (hover: hover) {
  .ejemplo:hover img {
    filter: blur(.4375rem);
  }

  .ejemplo:hover .ejemplo__flecha {
    width: .8125rem;
    margin-left: 0;
  }
}

.ejemplos__flechas {
  z-index: 3;
  gap: .5rem;
  padding: .75rem 1rem .5rem;
}

.visor {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  padding: var(--marco);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-fondo);
}

.visor--abierto {
  display: flex;
  flex-direction: column;
}

.visor__cerrar {
  position: fixed;
  top: var(--marco);
  right: var(--marco);
  left: auto;
  z-index: 3;
  min-height: 2.5rem;
  padding: .5rem 1rem .75rem;
  cursor: pointer;
}

.visor__marco {
  flex: none;
  width: min(100%, var(--visor-ancho, 45rem), (100dvh - 2 * var(--marco)) * var(--visor-proporcion, 99));
  margin: auto;
  border-radius: 0 var(--radio-tarjeta) var(--radio-tarjeta);
  animation: entrada var(--duracion-entrada) var(--curva-entrada) backwards;
}

.visor__imagen {
  width: 100%;
}

.visor__nombre {
  z-index: 2;
}

@media (min-width: 1200px) {
  .ejemplos {
    padding-right: var(--columna);
  }

  .ejemplos .carrusel__elemento {
    flex: 1 1 0;
  }

  .ejemplos__flechas {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .ejemplo__texto {
    font-size: 1rem;
    line-height: 1.4;
  }
}

.carrusel--quieto .ejemplos__flechas {
  display: none;
}